/* Timekeeping design system. Shared by MVC, Identity and injected modal content. */
:root {
    --tk-primary: #2563eb;
    --tk-primary-hover: #1d4ed8;
    --tk-canvas: #f8fafc;
    --tk-surface: #ffffff;
    --tk-ink: #0f172a;
    --tk-muted: #475569;
    --tk-border: #e2e8f0;
    --tk-control-border: #94a3b8;
    --tk-blue-soft: #eff6ff;
    --tk-success: #166534;
    --tk-success-soft: #f0fdf4;
    --tk-warning: #854d0e;
    --tk-warning-soft: #fefce8;
    --tk-danger: #b91c1c;
    --tk-danger-soft: #fef2f2;
    --tk-radius: 12px;
    --tk-shadow: 0 2px 8px rgb(15 23 42 / 4%);
    --tk-sidebar: 240px;
    --bs-primary: var(--tk-primary);
    --bs-primary-rgb: 37, 99, 235;
    --bs-body-color: var(--tk-ink);
    --bs-body-bg: var(--tk-canvas);
}
html { font-size: 16px; min-height: 100%; }
body.tk-app { margin: 0; color: var(--tk-ink); background: var(--tk-canvas); font-family: "Segoe UI", system-ui, -apple-system, sans-serif; line-height: 1.5; min-height: 100vh; display: flex; flex-direction: column; }
a { color: var(--tk-primary-hover); text-underline-offset: 3px; }
a:hover { color: var(--tk-primary-hover); }
.text-muted { color: var(--tk-muted) !important; }
.skip-link { position: fixed; top: -80px; left: 16px; z-index: 10000; padding: 12px 20px; border-radius: 8px; background: var(--tk-ink); color: white; }
.skip-link:focus { top: 12px; color: white; }
:focus-visible { outline: 3px solid var(--tk-primary); outline-offset: 3px; }
.app-topbar { min-height: 76px; border-bottom: 1px solid var(--tk-border); background: var(--tk-surface); padding: 16px 32px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.app-brand { display: inline-flex; align-items: center; gap: 12px; color: var(--tk-ink); text-decoration: none; font-size: 19px; font-weight: 700; white-space: nowrap; }
.app-brand:hover { color: var(--tk-ink); }
.brand-mark { display: grid; place-items: center; width: 38px; height: 38px; background: var(--tk-primary); color: white; border-radius: 10px; font-size: 20px; }
.brand-caption { display: block; font-size: 11px; font-weight: 500; color: var(--tk-muted); letter-spacing: .08em; text-transform: uppercase; }
.app-sidebar.offcanvas { width: var(--tk-sidebar); background: var(--tk-surface); border-right: 1px solid var(--tk-border); }
.app-sidebar .offcanvas-body { padding: 18px 16px; }
.nav-section { margin-bottom: 22px; }
.nav-section-title { margin: 0 12px 8px; font-size: 11px; font-weight: 700; letter-spacing: .09em; color: var(--tk-muted); text-transform: uppercase; }
.app-nav-link { display: flex; align-items: center; gap: 12px; padding: 10px 12px; margin: 3px 0; border-radius: 8px; color: var(--tk-muted); text-decoration: none; font-size: 14px; font-weight: 500; }
.app-nav-link .bi { font-size: 18px; }
.app-nav-link:hover { background: var(--tk-canvas); color: var(--tk-ink); }
.app-nav-link.active { background: var(--tk-blue-soft); color: var(--tk-primary-hover); font-weight: 650; }
.app-workspace { flex: 1; padding: 32px; min-width: 0; }
.app-main { width: 100%; max-width: 1600px; margin: 0 auto; min-width: 0; }
.app-main > :is(.container, .container-fluid), .app-main > :is(.container, .container-fluid) > .container { width: 100%; max-width: none; padding: 0 !important; margin-top: 0 !important; }
.app-footer { padding: 18px 32px; border-top: 1px solid var(--tk-border); font-size: 12px; color: var(--tk-muted); display: flex; justify-content: space-between; gap: 16px; }
.account-nav { display: flex; flex-direction: row; align-items: center; gap: 14px; margin: 0; }
.account-nav .nav-link { color: var(--tk-muted); font-size: 13px; padding: 6px; }
.account-name { max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; vertical-align: middle; }
.account-role { display: block; font-size: 11px; color: var(--tk-muted); }
.notification-menu { width: 360px; max-width: calc(100vw - 32px); max-height: 420px; overflow-y: auto; overflow-x: hidden; }
#notificationBadge { font-size: 10px; }
.dropdown-menu { border: 1px solid var(--tk-border); border-radius: 10px; padding: 6px; box-shadow: 0 8px 28px rgb(15 23 42 / 10%); }
.dropdown-item { font-size: 14px; padding: 9px 12px; border-radius: 5px; }
.dropdown-item:hover, .dropdown-item:focus { background: var(--tk-blue-soft); color: var(--tk-primary-hover); }
.page-header, .tk-app .page-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; margin-bottom: 28px; }
.page-header h1, .app-main h1, .app-main .page-title, .tk-app .page-head h1 { font-size: clamp(24px, 2vw, 28px); line-height: 1.25; font-weight: 700; letter-spacing: -.025em; color: var(--tk-ink) !important; margin-bottom: 8px; }
.page-description, .tk-app .page-head .subtitle { font-size: 14px; color: var(--tk-muted); margin: 0; }
.page-eyebrow { color: var(--tk-primary-hover); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 8px; }
.tk-app .page-head .icon-wrap { background: var(--tk-blue-soft); color: var(--tk-primary-hover); box-shadow: none; border-radius: 10px; width: 44px; height: 44px; }
.app-main h2 { font-size: 20px; font-weight: 650; }
.app-main h3 { font-size: 18px; font-weight: 650; }
.app-main .card, .tk-app :is(.requests-card, .agents-card, .synclog-card) { background: var(--tk-surface) !important; color: var(--tk-ink) !important; border: 1px solid var(--tk-border) !important; border-radius: var(--tk-radius); box-shadow: var(--tk-shadow) !important; overflow: visible; }
.card-body { padding: 24px; }
.tk-app .card-header, .tk-app :is(.requests-card, .agents-card, .synclog-card) .card-header { padding: 16px 24px; border-bottom: 1px solid var(--tk-border); background: var(--tk-surface) !important; color: var(--tk-ink) !important; border-radius: var(--tk-radius) var(--tk-radius) 0 0; font-weight: 600; font-size: 14px; }
.card-header :is(h2,h3,h4,h5,h6) { color: var(--tk-ink); font-size: 15px; margin: 0; font-weight: 650; }
.card-footer { padding: 14px 24px; background: var(--tk-canvas); border-color: var(--tk-border); }
.card.text-white :is(.card-text, small), .card-header.text-white :is(h1,h2,h3,h4,h5,h6) { color: inherit !important; }
.metric-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 20px; margin-bottom: 28px; }
.metric-card { padding: 22px; }
.metric-label { display: flex; justify-content: space-between; align-items: center; color: var(--tk-muted); font-size: 13px; font-weight: 500; }
.metric-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 8px; background: var(--tk-blue-soft); color: var(--tk-primary-hover); }
.metric-value { font-size: 32px; line-height: 1.2; font-weight: 700; margin: 16px 0 8px; font-variant-numeric: tabular-nums; letter-spacing: -.04em; }
.metric-note { font-size: 12px; color: var(--tk-muted); }
.metric-card[data-tone="success"] .metric-icon { background: var(--tk-success-soft); color: var(--tk-success); }
.metric-card[data-tone="warning"] .metric-icon { background: var(--tk-warning-soft); color: var(--tk-warning); }
.metric-card[data-tone="danger"] .metric-icon { background: var(--tk-danger-soft); color: var(--tk-danger); }
.btn, .tk-app :is(.btn-upload,.btn-approve,.btn-reject,.btn-reassign) { border-radius: 8px; padding: 9px 16px; font-size: 14px; font-weight: 600; line-height: 1.4; min-height: 40px; box-shadow: none; transition: background-color .15s, border-color .15s; }
.btn-primary, .tk-app .btn-upload { color: white; background: var(--tk-primary); border: 1px solid var(--tk-primary); }
.btn-primary:hover, .btn-primary:focus, .tk-app .btn-upload:hover { background: var(--tk-primary-hover); border-color: var(--tk-primary-hover); color: white; }
.btn-secondary, .btn-outline-secondary { color: var(--tk-muted); background: white; border-color: var(--tk-control-border); }
.btn-secondary:hover, .btn-outline-secondary:hover { background: var(--tk-canvas); color: var(--tk-ink); border-color: var(--tk-muted); }
.btn-outline-primary { color: var(--tk-primary-hover); border-color: var(--tk-primary); }
.btn-success, .tk-app .btn-approve { background: var(--tk-success); border: 1px solid var(--tk-success); color: white; }
.btn-danger { background: var(--tk-danger); border-color: var(--tk-danger); }
.btn-warning { background: var(--tk-warning-soft); color: var(--tk-warning); border-color: #ca8a04; }
.btn-info { background: var(--tk-blue-soft); color: var(--tk-primary-hover) !important; border-color: #93c5fd; }
.btn-sm, .btn-group-sm > .btn, .table .btn { padding: 6px 10px; font-size: 12px; min-height: 32px; }
.btn-lg { min-height: 48px; padding: 12px 20px; font-size: 16px; }
.btn-link { min-height: auto; }
.btn:focus-visible, .form-control:focus, .form-select:focus, .form-check-input:focus { border-color: var(--tk-primary); box-shadow: 0 0 0 3px rgb(37 99 235 / 18%); }
.btn-group { flex-wrap: wrap; gap: 4px; }
.btn-group > .btn { border-radius: 6px !important; }
.form-label, label.form-check-label { font-size: 14px; }
.form-label { color: var(--tk-ink); font-weight: 600; margin-bottom: 6px; }
.form-control, .form-select { border-color: var(--tk-control-border); border-radius: 8px; min-height: 40px; font-size: 14px; color: var(--tk-ink); }
.form-control::placeholder { color: #64748b; }
.form-control:disabled, .form-control[readonly], .form-select:disabled { background: #f1f5f9; color: var(--tk-muted); }
.form-floating > .form-control { min-height: 58px; }
.form-text { color: var(--tk-muted); font-size: 12px; }
.field-validation-error, .validation-summary-errors { color: var(--tk-danger); font-size: 13px; }
.form-check-input:checked { background-color: var(--tk-primary); border-color: var(--tk-primary); }
.table-responsive { border-radius: 0 0 var(--tk-radius) var(--tk-radius); max-width: 100%; }
.table { margin-bottom: 0; color: var(--tk-ink); font-size: 14px; vertical-align: middle; --bs-table-striped-bg: #fafbfd; --bs-table-hover-bg: #f1f5f9; }
.tk-app .table > thead > tr > th, .tk-app :is(.requests-table,.agents-table,.synclog-table) thead th { background: var(--tk-canvas) !important; color: var(--tk-muted) !important; border-color: var(--tk-border); padding: 12px 16px; font-size: 12px; font-weight: 650; text-transform: none; letter-spacing: normal; white-space: nowrap; box-shadow: none; }
.tk-app .table > tbody > tr > td, .tk-app :is(.requests-table,.agents-table,.synclog-table) tbody td { padding: 14px 16px; border-color: var(--tk-border); font-size: 14px; vertical-align: middle; font-variant-numeric: tabular-nums; }
.table-bordered > :not(caption) > * > * { border-left: 0; border-right: 0; }
.table caption { padding: 12px 16px; color: var(--tk-muted); }
.page-link { color: var(--tk-muted); border-color: var(--tk-border); min-width: 38px; text-align: center; font-size: 13px; }
.page-item.active .page-link { background: var(--tk-primary); border-color: var(--tk-primary); }
.pagination { flex-wrap: wrap; gap: 4px; }
.pagination .page-link { border-radius: 6px !important; }
.badge, .tk-app :is(.status-badge,.type-badge,.count-pill) { display: inline-flex; align-items: center; gap: 4px; border-radius: 6px; padding: 5px 8px; font-size: 11px; line-height: 1.3; font-weight: 600; white-space: normal; }
.badge.bg-primary, .badge.bg-info { background: var(--tk-blue-soft) !important; color: var(--tk-primary-hover) !important; }
.badge.bg-success { background: #dcfce7 !important; color: var(--tk-success) !important; }
.badge.bg-warning { background: #fef9c3 !important; color: var(--tk-warning) !important; }
.badge.bg-danger { background: #fee2e2 !important; color: var(--tk-danger) !important; }
.badge.bg-secondary { background: #f1f5f9 !important; color: var(--tk-muted) !important; }
.alert { border-radius: 10px; font-size: 14px; border-width: 1px; padding: 16px 20px; }
.alert-success { background: var(--tk-success-soft); color: var(--tk-success); border-color: #bbf7d0; }
.alert-warning { background: var(--tk-warning-soft); color: var(--tk-warning); border-color: #fde68a; }
.alert-danger { background: var(--tk-danger-soft); color: var(--tk-danger); border-color: #fecaca; }
.alert-info { background: var(--tk-blue-soft); color: var(--tk-primary-hover); border-color: #bfdbfe; }
.modal-content { border: 1px solid var(--tk-border); border-radius: 14px; box-shadow: 0 24px 80px rgb(15 23 42 / 20%); }
.tk-app .modal-header { background: white !important; color: var(--tk-ink) !important; border-bottom: 1px solid var(--tk-border); padding: 20px 24px; border-radius: 14px 14px 0 0; }
.modal-title { font-size: 18px; font-weight: 650; color: var(--tk-ink); }
.modal-header .btn-close-white { filter: none; }
.modal-body { padding: 24px; }
.modal-footer { padding: 16px 24px; border-color: var(--tk-border); gap: 6px; }
.modal-body pre { max-height: 360px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; }
.toast { border: 1px solid var(--tk-border); border-radius: 10px; box-shadow: var(--tk-shadow); background: white; color: var(--tk-ink); }
.toast a { color: var(--tk-primary-hover) !important; }
.empty-state { text-align: center; padding: 48px 24px; color: var(--tk-muted); }
.empty-state .bi { display: block; font-size: 28px; color: var(--tk-primary); margin-bottom: 12px; }
.empty-state h2 { color: var(--tk-ink); font-size: 17px; }
.empty-state p { margin: 0; font-size: 14px; }
.auth-workspace { display: grid; place-items: start center; padding-top: 56px; }
.auth-main { max-width: 480px; background: white; border: 1px solid var(--tk-border); border-radius: 16px; padding: 32px; box-shadow: var(--tk-shadow); }
.auth-main > .row > [class*="col-"] { width: 100%; }
.auth-main h2 { font-size: 14px; font-weight: 400; color: var(--tk-muted); margin-bottom: 24px; }
.auth-main hr { display: none; }
.auth-main form > div:has(> p) { margin-top: 20px; font-size: 13px; }
.auth-main .form-floating { margin-bottom: 16px; }
.auth-brand { text-align: center; color: var(--tk-primary-hover); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 24px; }
.settings-page { max-width: 1040px; margin: 0 auto; }
.settings-panel { background: white; border: 1px solid var(--tk-border); border-radius: 12px; padding: 28px; }
.settings-panel > .row > [class*="col-"] { width: 100%; max-width: 560px; }
.settings-nav .nav-link { color: var(--tk-muted); border-radius: 8px; padding: 12px 16px; font-size: 14px; }
.settings-nav .nav-link.active { background: var(--tk-blue-soft); color: var(--tk-primary-hover); font-weight: 600; }
.reading-page { max-width: 760px; margin: 0 auto; }
.reading-page p { color: var(--tk-muted); }
#digital-clock { font-size: clamp(32px,4vw,56px); font-variant-numeric: tabular-nums; }
#global-loader .spinner-border { width: 40px; height: 40px; margin-bottom: 12px; }
.spinner-border { width: 1.5rem; height: 1.5rem; margin: 0; }
.spinner-border-sm { width: 1rem; height: 1rem; }
@media (min-width: 992px) {
    .tk-authenticated .app-sidebar { top: 76px; visibility: visible !important; transform: none !important; }
    .tk-authenticated .app-workspace, .tk-authenticated .app-footer { margin-left: var(--tk-sidebar); }
    .app-sidebar .offcanvas-header { display: none; }
}
@media (max-width: 991.98px) {
    .app-topbar { padding: 16px 20px; }
    .app-workspace { padding: 24px 20px; }
    .metric-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .account-role { display: none; }
}
@media (max-width: 575.98px) {
    .app-topbar { padding: 12px 16px; gap: 8px; }
    .app-brand { font-size: 16px; gap: 8px; }
    .brand-caption, .account-name { display: none; }
    .account-nav { gap: 6px; }
    .app-workspace { padding: 24px 16px; }
    .auth-workspace { padding-top: 24px; }
    .auth-main { padding: 24px; }
    .card-body, .settings-panel { padding: 20px; }
    .tk-app .card-header { padding: 16px 20px; }
    .metric-grid { gap: 12px; }
    .metric-card { padding: 16px; }
    .metric-value { font-size: 28px; }
    .metric-icon { display: none; }
    .app-main .d-flex.justify-content-between { flex-wrap: wrap; gap: 12px; }
    .modal-body, .modal-header, .modal-footer { padding: 18px !important; }
    .app-footer { padding: 16px; flex-wrap: wrap; }
    .btn { min-height: 40px; }
    .table .btn { min-height: 36px; }
    .card-body.p-5 { padding: 24px !important; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}
@media print {
    .app-topbar, .app-sidebar, .app-footer, .btn, .pagination, .toast-container, #global-loader, .modal, .skip-link { display: none !important; }
    .app-workspace { margin: 0 !important; padding: 0 !important; }
    .tk-app, .app-main, .card { background: white !important; color: black !important; box-shadow: none !important; }
    .table-responsive { overflow: visible !important; }
    .table { font-size: 10pt; }
    thead { display: table-header-group; }
    tr { break-inside: avoid; }
    .badge { color: black !important; background: transparent !important; border: 1px solid #888; }
}