/**
 * CAS-ia Time Clock — CSS
 * Covers: Kiosk full-screen UI + Portal tab styles
 * @since 4.7.0
 */

/* ── Kiosk Base ─────────────────────────────────────────────────────────── */
.tc-kiosk-body {
    margin:0;padding:0;
    font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
    background:#0f172a;color:#e2e8f0;min-height:100vh;overflow:hidden;
    -webkit-font-smoothing:antialiased;
}
.tc-kiosk-header {
    display:flex;align-items:center;justify-content:space-between;
    padding:14px 28px;background:#1e293b;
    border-bottom:1px solid rgba(255,255,255,.07);height:68px;
}
.tc-kiosk-logo{max-height:42px;max-width:160px;object-fit:contain}
.tc-kiosk-property-name{font-size:20px;font-weight:700;color:#f1f5f9}
.tc-kiosk-clock-display{
    font-size:28px;font-weight:700;color:#38bdf8;
    letter-spacing:.04em;font-variant-numeric:tabular-nums;
}
.tc-kiosk-main{padding:24px 28px;height:calc(100vh - 68px);overflow-y:auto}
.tc-kiosk-prompt{text-align:center;color:#94a3b8;font-size:16px;margin-bottom:20px}
.tc-kiosk-grid{
    display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
    gap:16px;max-width:1100px;margin:0 auto;
}
.tc-kiosk-empty{
    grid-column:1/-1;text-align:center;color:#64748b;
    font-size:16px;padding:60px 20px;line-height:1.6;
}

/* ── Employee Tile ──────────────────────────────────────────────────────── */
.tc-tile{
    background:#1e293b;border:1px solid rgba(255,255,255,.08);border-radius:14px;
    padding:20px 12px 16px;display:flex;flex-direction:column;align-items:center;
    gap:6px;cursor:pointer;transition:transform .15s,border-color .15s,box-shadow .15s;
    text-align:center;-webkit-tap-highlight-color:transparent;touch-action:manipulation;
}
.tc-tile:hover,.tc-tile:focus{
    transform:translateY(-2px);border-color:#3b82f6;
    box-shadow:0 8px 24px rgba(59,130,246,.25);outline:none;
}
.tc-tile.tc-tile--in{border-color:#22c55e;background:#052e16}
.tc-tile-avatar{
    width:52px;height:52px;border-radius:50%;
    background:linear-gradient(135deg,#3b82f6,#8b5cf6);
    display:flex;align-items:center;justify-content:center;
    font-size:18px;font-weight:700;color:#fff;
}
.tc-tile.tc-tile--in .tc-tile-avatar{background:linear-gradient(135deg,#16a34a,#059669)}
.tc-tile-name{font-size:14px;font-weight:600;color:#f1f5f9;line-height:1.3}
.tc-tile-dept{font-size:12px;color:#64748b}
.tc-tile-status{font-size:11px;font-weight:600;color:#22c55e;min-height:14px}

/* ── Overlays ───────────────────────────────────────────────────────────── */
.tc-overlay{
    position:fixed;inset:0;background:rgba(0,0,0,.75);backdrop-filter:blur(4px);
    display:flex;align-items:center;justify-content:center;z-index:500;padding:20px;
}
.tc-overlay.hidden{display:none}

/* ── PIN Card ───────────────────────────────────────────────────────────── */
.tc-pin-card{
    background:#1e293b;border-radius:20px;padding:28px 24px 24px;
    width:100%;max-width:360px;display:flex;flex-direction:column;
    align-items:center;gap:10px;position:relative;
    box-shadow:0 24px 64px rgba(0,0,0,.6);
}
.tc-back-btn{
    position:absolute;top:16px;left:16px;background:none;border:none;
    color:#94a3b8;font-size:14px;cursor:pointer;padding:4px 8px;
    border-radius:6px;transition:color .15s;
}
.tc-back-btn:hover{color:#fff}
.tc-pin-avatar{
    width:64px;height:64px;border-radius:50%;
    background:linear-gradient(135deg,#3b82f6,#8b5cf6);
    display:flex;align-items:center;justify-content:center;
    font-size:22px;font-weight:700;color:#fff;margin-bottom:2px;
}
.tc-pin-name{font-size:18px;font-weight:700;color:#f1f5f9}
.tc-pin-dept{font-size:13px;color:#64748b}
.tc-pin-action{font-size:14px;color:#94a3b8}
.tc-pin-action strong{color:#38bdf8}
.tc-camera-wrap{
    width:200px;height:150px;border-radius:10px;overflow:hidden;
    background:#0f172a;position:relative;border:1px solid rgba(255,255,255,.1);
}
#tc-camera-preview{width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}
.tc-camera-badge{
    position:absolute;bottom:6px;left:0;right:0;
    text-align:center;font-size:11px;color:#94a3b8;
}
.tc-pin-dots{display:flex;gap:14px;margin:4px 0}
.tc-dot{
    width:16px;height:16px;border-radius:50%;border:2px solid #475569;
    transition:background .15s,border-color .15s;
}
.tc-dot.tc-dot--filled{background:#3b82f6;border-color:#3b82f6}
.tc-numpad{display:grid;grid-template-columns:repeat(3,72px);gap:10px}
.tc-num-btn{
    height:64px;border-radius:12px;border:1px solid rgba(255,255,255,.1);
    background:#0f172a;color:#f1f5f9;font-size:22px;font-weight:600;cursor:pointer;
    transition:background .1s,transform .1s;
    -webkit-tap-highlight-color:transparent;touch-action:manipulation;
}
.tc-num-btn:active{transform:scale(.93);background:#1e40af}
.tc-num-btn--clear{font-size:20px;color:#f87171}
.tc-num-btn--submit{background:#1e40af;font-size:26px;color:#fff}
.tc-num-btn--submit:not(:disabled):hover{background:#2563eb}
.tc-num-btn--submit:disabled{opacity:.35;cursor:not-allowed}
.tc-pin-msg{font-size:14px;text-align:center;border-radius:8px;padding:8px 16px}
.tc-pin-msg.hidden{display:none}
.tc-pin-msg--error{background:rgba(239,68,68,.15);color:#f87171}
.tc-pin-msg--info{background:rgba(59,130,246,.15);color:#93c5fd}
.tc-spinner{display:flex;align-items:center;justify-content:center;padding:4px}
.tc-spinner.hidden{display:none}
.tc-spinner-inner{
    width:28px;height:28px;border:3px solid rgba(255,255,255,.15);
    border-top-color:#38bdf8;border-radius:50%;
    animation:tc-spin .7s linear infinite;
}
@keyframes tc-spin{to{transform:rotate(360deg)}}

/* ── Result / Error ─────────────────────────────────────────────────────── */
.tc-result-card,.tc-error-card{
    background:#1e293b;border-radius:20px;padding:40px 32px;
    max-width:380px;width:100%;text-align:center;
    box-shadow:0 24px 64px rgba(0,0,0,.6);
}
.tc-result-icon{font-size:64px;margin-bottom:12px;transition:all .3s}
.tc-result-icon--success{color:#22c55e}
.tc-result-icon--ot{color:#f59e0b}
.tc-result-name{font-size:22px;font-weight:700;color:#f8fafc;margin-bottom:6px}
.tc-result-msg{font-size:15px;color:#94a3b8;margin-bottom:10px}
.tc-result-hours{font-size:18px;font-weight:600;color:#38bdf8}
.tc-result-hours.hidden,.tc-result-ot.hidden{display:none}
.tc-result-ot{margin-top:10px;font-size:14px;color:#f59e0b;font-weight:600}
.tc-error-icon{font-size:52px;color:#f87171;margin-bottom:12px}
.tc-error-msg{font-size:15px;color:#94a3b8;margin-bottom:20px}
.tc-btn-retry{
    background:#1e40af;color:#fff;border:none;
    border-radius:10px;padding:12px 32px;font-size:15px;font-weight:600;cursor:pointer;
}
.tc-btn-retry:hover{background:#2563eb}

/* ═══════════════════════════════════════════════════════════════════════════
   Portal Tab
═══════════════════════════════════════════════════════════════════════════ */
.tc-portal-wrap{font-family:inherit}
.tc-period-bar{
    display:flex;align-items:center;justify-content:space-between;
    gap:12px;padding:12px 0 16px;
    border-bottom:1px solid var(--border-color,#e2e8f0);
    margin-bottom:20px;flex-wrap:wrap;
}
.tc-period-label{font-size:15px;font-weight:600;color:var(--heading-color,#1e293b)}
.tc-period-nav{display:flex;align-items:center;gap:8px}
.tc-btn{
    display:inline-flex;align-items:center;gap:6px;
    padding:7px 14px;border-radius:7px;font-size:13px;font-weight:500;
    cursor:pointer;border:1px solid transparent;
    transition:background .15s,border-color .15s;
}
.tc-btn-primary{background:var(--primary-color,#2563eb);color:#fff}
.tc-btn-primary:hover{filter:brightness(1.1)}
.tc-btn-secondary{
    background:var(--bg-secondary,#f1f5f9);
    color:var(--text-color,#374151);
    border-color:var(--border-color,#e2e8f0);
}
.tc-btn-secondary:hover{background:var(--bg-hover,#e2e8f0)}
.tc-btn-danger{background:#ef4444;color:#fff}
.tc-btn-danger:hover{background:#dc2626}
.tc-btn-sm{padding:4px 10px;font-size:12px}
.tc-summary-table,.tc-timesheet-table{width:100%;border-collapse:collapse;font-size:13px}
.tc-summary-table{margin-bottom:28px}
.tc-summary-table th,.tc-timesheet-table th{
    background:var(--bg-secondary,#f8fafc);color:var(--text-muted,#6b7280);
    font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.05em;
    padding:9px 12px;text-align:left;
    border-bottom:2px solid var(--border-color,#e5e7eb);white-space:nowrap;
}
.tc-summary-table td,.tc-timesheet-table td{
    padding:8px 10px;border-bottom:1px solid var(--border-color,#f1f5f9);
    color:var(--text-color,#374151);vertical-align:middle;
}
.tc-summary-table tr:hover td,.tc-timesheet-table tr:hover td{background:var(--bg-hover,#f8fafc)}
.tc-badge{
    display:inline-flex;align-items:center;padding:2px 8px;
    border-radius:12px;font-size:11px;font-weight:600;white-space:nowrap;
}
.tc-badge-ot-daily{background:#fef3c7;color:#92400e}
.tc-badge-ot-weekly{background:#fee2e2;color:#991b1b}
.tc-badge-open{background:#dbeafe;color:#1d4ed8}
.tc-badge-edited{background:#f3f4f6;color:#6b7280}
.tc-row-open td{background:#eff6ff!important}
.tc-row-ot-daily td:first-child{border-left:3px solid #f59e0b}
.tc-row-ot-weekly td:first-child{border-left:3px solid #ef4444}
.tc-photo-thumb{
    width:36px;height:28px;object-fit:cover;border-radius:4px;
    cursor:pointer;border:1px solid var(--border-color,#e5e7eb);
}
.tc-modal-backdrop{
    position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:9998;
    display:flex;align-items:center;justify-content:center;padding:20px;
}
.tc-modal-backdrop.hidden{display:none}
.tc-modal{
    background:var(--card-bg,#fff);border-radius:12px;padding:24px;
    width:100%;max-width:480px;box-shadow:0 20px 60px rgba(0,0,0,.25);
}
.tc-modal h3{margin:0 0 16px;font-size:16px;color:var(--heading-color,#1e293b)}
.tc-modal-row{margin-bottom:14px}
.tc-modal-row label{
    display:block;font-size:12px;font-weight:600;color:var(--text-muted,#6b7280);
    margin-bottom:4px;text-transform:uppercase;letter-spacing:.04em;
}
.tc-modal-row input,.tc-modal-row textarea{
    width:100%;padding:8px 10px;border:1px solid var(--border-color,#d1d5db);
    border-radius:7px;font-size:13px;background:var(--bg-secondary,#f9fafb);
    color:var(--text-color,#111827);
}
.tc-modal-row textarea{min-height:72px;resize:vertical}
.tc-modal-footer{display:flex;gap:10px;justify-content:flex-end;margin-top:18px}
.tc-original-times{font-size:11px;color:var(--text-muted,#9ca3af);margin-top:4px}
.tc-settings-section{
    background:var(--card-bg,#fff);border:1px solid var(--border-color,#e5e7eb);
    border-radius:10px;padding:20px 24px;margin-bottom:20px;
}
.tc-settings-section h4{margin:0 0 16px;font-size:14px;font-weight:700;color:var(--heading-color,#1e293b)}
.tc-settings-row{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:12px}
.tc-settings-field{flex:1;min-width:180px}
.tc-settings-field label{
    display:block;font-size:12px;font-weight:600;color:var(--text-muted,#6b7280);
    margin-bottom:4px;text-transform:uppercase;letter-spacing:.04em;
}
.tc-settings-field input,.tc-settings-field select{
    width:100%;padding:8px 10px;border:1px solid var(--border-color,#d1d5db);
    border-radius:7px;font-size:13px;background:var(--bg-secondary,#f9fafb);
    color:var(--text-color,#111827);
}
.tc-terminal-row{
    display:flex;align-items:center;gap:12px;padding:10px 0;
    border-bottom:1px solid var(--border-color,#f1f5f9);font-size:13px;flex-wrap:wrap;
}
.tc-terminal-label{font-weight:600;color:var(--text-color,#374151);min-width:120px}
.tc-terminal-url{font-family:monospace;font-size:12px;color:var(--text-muted,#6b7280);flex:1;word-break:break-all}
.tc-copy-btn{
    padding:4px 10px;border-radius:6px;font-size:12px;
    background:var(--bg-secondary,#f1f5f9);color:var(--text-color,#374151);
    border:1px solid var(--border-color,#e2e8f0);cursor:pointer;
}
.tc-copy-btn:hover{background:var(--bg-hover,#e2e8f0)}
.tc-loading{
    display:flex;align-items:center;gap:10px;color:var(--text-muted,#9ca3af);
    font-size:13px;padding:20px 0;
}
.tc-loading.hidden{display:none}
.tc-loading-spin{
    width:18px;height:18px;border:2px solid #e2e8f0;border-top-color:#3b82f6;
    border-radius:50%;animation:tc-spin .7s linear infinite;
}
.tc-inner-tabs{
    display:flex;gap:0;border-bottom:2px solid var(--border-color,#e5e7eb);margin-bottom:20px;
}
.tc-inner-tab{
    padding:9px 18px;font-size:13px;font-weight:600;color:var(--text-muted,#6b7280);
    cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-2px;
    background:none;border-top:none;border-left:none;border-right:none;
    transition:color .15s,border-color .15s;
}
.tc-inner-tab:hover{color:var(--primary-color,#2563eb)}
.tc-inner-tab.active{color:var(--primary-color,#2563eb);border-bottom-color:var(--primary-color,#2563eb)}

@media(max-width:600px){
    .tc-period-bar{flex-direction:column;align-items:flex-start}
    .tc-kiosk-grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}
    .tc-summary-table,.tc-timesheet-table{font-size:12px}
    .tc-settings-row{flex-direction:column}
}