:root {
  --brand: #1f4e79;
  --brand-dark: #163a5a;
  --brand-darker: #0f2a42;
  --sidebar-w: 250px;
  --stat: #fff6d6;
  --weekend: #f6f7f9;
  --focus: #ffbf47;
}
html { -webkit-text-size-adjust: 100%; }
body { background: #f2f4f7; color: #1d2733; font-size: .94rem; min-height: 100vh; overflow-x: hidden; }
img, svg { max-width: 100%; }
.min-w-0 { min-width: 0; }

/* ---------- Accessibility ---------- */
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 2000; background: #fff; color: var(--brand); padding: .6rem 1rem; border-radius: 0 0 6px 0; font-weight: 600; }
.skip-link:focus { left: 0; }
a:focus-visible, button:focus-visible, .btn:focus-visible, .nav-link:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--focus); outline-offset: 2px; box-shadow: none;
}
.app-main:focus { outline: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* ---------- Sidebar ---------- */
.app-sidebar { --bs-offcanvas-width: 270px; --bs-offcanvas-bg: var(--brand-darker); color: #dbe5ef; background: linear-gradient(180deg, var(--brand-dark) 0%, var(--brand-darker) 100%); display: flex; flex-direction: column; }
.app-sidebar .sidebar-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: 1.1rem 1rem .9rem; border-bottom: 1px solid rgba(255,255,255,.08); }
.sidebar-brand { display: flex; align-items: center; gap: .65rem; color: #fff; text-decoration: none; min-width: 0; }
.sidebar-brand:hover { color: #fff; }
.brand-mark { flex: 0 0 36px; height: 36px; border-radius: 9px; background: rgba(255,255,255,.14); display: grid; place-items: center; font-size: 1.15rem; }
.brand-text { font-weight: 600; line-height: 1.2; font-size: .92rem; min-width: 0; }
.brand-text small { display: block; font-weight: 400; opacity: .7; font-size: .74rem; margin-top: 2px; }
.sidebar-body { flex: 1 1 auto; overflow-y: auto; padding: .5rem .65rem 1rem; }
.nav-section { text-transform: uppercase; letter-spacing: .8px; font-size: .68rem; font-weight: 600; color: rgba(219,229,239,.55); padding: 1rem .65rem .35rem; }
.app-sidebar .nav-link { display: flex; align-items: center; gap: .7rem; color: #dbe5ef; padding: .58rem .7rem; border-radius: 8px; min-height: 44px; font-size: .92rem; }
.app-sidebar .nav-link i { font-size: 1.05rem; width: 1.2rem; text-align: center; opacity: .85; }
.app-sidebar .nav-link:hover { background: rgba(255,255,255,.08); color: #fff; }
.app-sidebar .nav-link.active { background: #fff; color: var(--brand-dark); font-weight: 600; }
.app-sidebar .nav-link.active i { opacity: 1; }
.sidebar-foot { padding: .9rem 1rem 1rem; border-top: 1px solid rgba(255,255,255,.08); }
.avatar { flex: 0 0 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.16); color: #fff; display: grid; place-items: center; font-size: .8rem; font-weight: 600; }
.user-name { color: #fff; font-weight: 600; font-size: .88rem; }
.user-role { font-size: .74rem; color: rgba(219,229,239,.7); }
.btn-sidebar { color: #dbe5ef; border: 1px solid rgba(255,255,255,.18); min-height: 38px; display: inline-flex; align-items: center; justify-content: center; gap: .35rem; }
.btn-sidebar:hover, .btn-sidebar.active { background: rgba(255,255,255,.12); color: #fff; }

@media (min-width: 992px) {
  .app-sidebar { position: fixed; inset: 0 auto 0 0; width: var(--sidebar-w); z-index: 1030; }
  .app-sidebar .offcanvas-body { display: contents; }
  body.has-sidebar .app-content { margin-left: var(--sidebar-w); }
}

/* ---------- Top bar (mobile/tablet) ---------- */
.app-topbar { position: sticky; top: 0; z-index: 1020; display: flex; align-items: center; gap: .5rem; height: 56px; padding: 0 .5rem; background: var(--brand); color: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.15); }
.topbar-brand { flex: 1 1 auto; min-width: 0; color: #fff; text-decoration: none; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar-brand:hover { color: #fff; }
.btn-icon { width: 44px; height: 44px; display: inline-grid; place-items: center; color: #fff; font-size: 1.45rem; border: 0; padding: 0; }
.btn-icon:hover { color: #fff; background: rgba(255,255,255,.12); }
.notif-dot { position: absolute; top: 4px; right: 2px; background: #dc3545; color: #fff; border-radius: 10px; font-size: .62rem; padding: 1px 5px; font-weight: 600; line-height: 1.3; }

/* ---------- Content ---------- */
.app-content { display: flex; flex-direction: column; min-height: 100vh; min-width: 0; }
.app-main { flex: 1; padding: 1.5rem 1.75rem 2rem; width: 100%; max-width: 1600px; }
.app-footer { text-align: center; color: #6b7685; font-size: .78rem; padding: 1rem; }

.card { border: 0; box-shadow: 0 1px 3px rgba(16,24,40,.08), 0 1px 2px rgba(16,24,40,.04); border-radius: 10px; }
.card-header { background: #fff; border-bottom: 1px solid #edf0f3; font-weight: 600; border-radius: 10px 10px 0 0 !important; }
.page-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: 1rem; }
.page-head h1 { font-size: 1.4rem; margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.page-head > * { min-width: 0; }
.stat-tile { padding: 1rem 1.1rem; }
.stat-tile .label { font-size: .75rem; text-transform: uppercase; letter-spacing: .5px; color: #5b6573; }
.stat-tile .value { font-size: 1.6rem; font-weight: 600; line-height: 1.2; }
.btn-brand { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn-brand:hover, .btn-brand:focus { background: var(--brand-dark); border-color: var(--brand-dark); color: #fff; }
.text-muted { color: #5b6573 !important; } /* AA contrast on white and #f2f4f7 */
.table-responsive { -webkit-overflow-scrolling: touch; position: relative; }
.table td, .table th { vertical-align: middle; }

/* Stat tiles wrap instead of squeezing */
.tile-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: .5rem; text-align: center; }

/* ---------- Timesheet grid ---------- */
.ts-table { font-size: .86rem; margin: 0; }
.ts-table th { background: #f7f8fa; font-weight: 600; white-space: nowrap; font-size: .76rem; text-transform: uppercase; letter-spacing: .3px; color: #4a5565; vertical-align: middle; }
.ts-table td { vertical-align: middle; padding: .3rem .4rem; }
.ts-table tbody th { background: #fff; text-transform: none; letter-spacing: 0; font-size: .86rem; color: inherit; white-space: nowrap; }
.ts-table tr.weekend > * { background: var(--weekend); }
.ts-table tr.stat > * { background: var(--stat); }
.ts-table tr.notemployed > * { opacity: .55; }
.ts-table input.form-control, .ts-table select.form-select { padding: .25rem .4rem; font-size: .85rem; min-width: 0; }
.ts-table input[type=time] { width: 7.4rem; }
.ts-table input.num { width: 4.8rem; text-align: right; }
.ts-table input.remarks { min-width: 10rem; }
.ts-table .calc { text-align: right; font-variant-numeric: tabular-nums; color: #374151; width: 3.6rem; }
.ts-table .calc-hd { background: #eef3f9 !important; }
.ts-table tfoot td { font-weight: 600; background: #f7f8fa; }
.ts-table .worked { font-weight: 600; text-align: right; width: 4.2rem; }
.ts-table .note-icon { color: #5b6573; cursor: help; }
.day-name { color: #5b6573; font-size: .78rem; }
.code-legend span { display: inline-block; margin-right: 1rem; }
.code-legend b { color: var(--brand); }
.log-list { list-style: none; padding: 0; margin: 0; font-size: .85rem; }
.log-list li { padding: .35rem 0; border-bottom: 1px dashed #e5e7eb; }
.notif-unread { background: #f1f6fc; }
.calc-note-text { display: none; }

/* ---------- Tablet & phone ---------- */
@media (max-width: 991.98px) {
  .app-main { padding: 1.1rem 1.1rem 2rem; }
}

@media (max-width: 767.98px) {
  body { font-size: .95rem; }
  .app-main { padding: 1rem .85rem 2rem; }
  .page-head h1 { font-size: 1.2rem; }
  .stat-tile .value { font-size: 1.3rem; }
  /* 16px inputs stop iOS zooming in; 44px targets for touch */
  .form-control, .form-select { font-size: 16px; min-height: 44px; }
  .form-control-sm, .form-select-sm { min-height: 40px; }
  .btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  .btn-sm { min-height: 38px; }
  .btn-link.btn-sm { min-height: 0; }
  .page-head .btn, .page-head form { flex: 1 1 auto; }
  .card-footer .btn, .ts-actions .btn { width: 100%; margin-top: .4rem; }

  /* Timesheet grid becomes one card per day */
  .ts-table.stack, .ts-table.stack tbody, .ts-table.stack tr, .ts-table.stack td, .ts-table.stack tbody th, .ts-table.stack tfoot { display: block; width: 100%; }
  .ts-table.stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .ts-table.stack { border: 0; }
  .ts-table.stack tbody tr { border: 1px solid #e3e7ec; border-radius: 10px; margin: 0 0 .7rem; padding: .55rem .7rem .4rem; background: #fff; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: .35rem .6rem; }
  .ts-table.stack tbody tr.weekend { background: var(--weekend); }
  .ts-table.stack tbody tr.stat { background: var(--stat); }
  .ts-table.stack tbody tr > * { background: transparent !important; border: 0; padding: 0; width: auto; text-align: left; }
  .ts-table.stack td[data-label]::before { content: attr(data-label); display: block; font-size: .68rem; text-transform: uppercase; letter-spacing: .4px; color: #5b6573; font-weight: 600; margin-bottom: 2px; }
  .ts-table.stack .cell-date { grid-column: 1 / -1; font-size: 1rem; border-bottom: 1px solid #e9edf1; padding-bottom: .35rem; }
  .ts-table.stack .cell-date::before { display: none; }
  .ts-table.stack tbody tr.notemployed { opacity: .6; }
  .ts-table.stack tbody tr.notemployed > * { opacity: 1; }
  .ts-table.stack td.d-none { display: none !important; }
  .ts-table.stack td.cell-remarks, .ts-table.stack td.cell-leave { grid-column: span 3; }
  .ts-table.stack td.cell-leavehrs { grid-column: span 3; }
  .ts-table.stack td.cell-leavehrs.is-empty { display: none; }
  .ts-table.stack input[type=time], .ts-table.stack input.num, .ts-table.stack input.remarks, .ts-table.stack select { width: 100%; min-width: 0; }
  .ts-table.stack td.worked { text-align: left; }
  .ts-table.stack td.calc { width: auto; text-align: left; font-weight: 600; }
  .ts-table.stack td.calc:empty, .ts-table.stack td.note-cell:empty { display: none; }
  .ts-table.stack td.note-cell { grid-column: 1 / -1; }
  .ts-table.stack td.note-cell .note-icon { display: none; }
  .ts-table.stack td.note-cell .calc-note-text { display: block; font-size: .78rem; color: #5b6573; }
  .ts-table.stack .copy-prev { display: none; }
  /* Locked sheets: days with nothing entered collapse to one line */
  .ts-table.stack tbody tr.row-blank { padding: .45rem .7rem; }
  .ts-table.stack tbody tr.row-blank > td { display: none !important; }
  .ts-table.stack tbody tr.row-blank .cell-date { border-bottom: 0; padding-bottom: 0; }
  .ts-table.stack tbody tr.row-blank .cell-date::after { content: "No time entered"; float: right; font-size: .8rem; color: #5b6573; }
  .ts-table.stack tfoot tr { display: grid; grid-template-columns: repeat(4, 1fr); gap: .35rem; background: #fff; border: 1px solid #e3e7ec; border-radius: 10px; padding: .6rem .7rem; }
  .ts-table.stack tfoot td { border: 0; padding: 0; background: transparent; text-align: left !important; width: auto; }
  .ts-table.stack tfoot td.tf-label, .ts-table.stack tfoot td:empty { display: none; }
  .ts-table.stack tfoot td[data-label]::before { content: attr(data-label); display: block; font-size: .68rem; color: #5b6573; text-transform: uppercase; }
  .ts-table.stack + .table-hint { display: none; }
  .ts-grid-wrap { overflow: visible !important; padding: .7rem; }
  .code-legend { display: none !important; }
}

@media print {
  body { background: #fff; font-size: 11px; }
  body.has-sidebar .app-content { margin-left: 0 !important; }
  .card { box-shadow: none; }
  .app-main { padding: 0; max-width: none; }
  .ts-table th { background: #eee !important; }
  a { text-decoration: none; color: #000; }
}

/* ---------- WCAG AA colour contrast overrides (Bootstrap defaults fall just short on #f2f4f7) ---------- */
:root {
  --bs-link-color: #1a5a94; --bs-link-color-rgb: 26, 90, 148;
  --bs-link-hover-color: #103d66; --bs-link-hover-color-rgb: 16, 61, 102;
  --bs-secondary-color: #5b6573;
}
.app-footer { color: #5b6573; }
.btn-outline-secondary { --bs-btn-color: #475160; --bs-btn-border-color: #8a94a3; --bs-btn-hover-bg: #475160; --bs-btn-hover-border-color: #475160; --bs-btn-active-bg: #3a4350; --bs-btn-active-border-color: #3a4350; }
.btn-outline-primary { --bs-btn-color: #1a5a94; --bs-btn-border-color: #1a5a94; --bs-btn-hover-bg: #1a5a94; --bs-btn-hover-border-color: #1a5a94; --bs-btn-active-bg: #163a5a; --bs-btn-active-border-color: #163a5a; }
.btn-outline-success { --bs-btn-color: #12613c; --bs-btn-border-color: #12613c; --bs-btn-hover-bg: #12613c; --bs-btn-hover-border-color: #12613c; }
.btn-outline-danger { --bs-btn-color: #a52834; --bs-btn-border-color: #a52834; --bs-btn-hover-bg: #a52834; --bs-btn-hover-border-color: #a52834; }
.btn-success { --bs-btn-bg: #15703f; --bs-btn-border-color: #15703f; --bs-btn-hover-bg: #105a32; --bs-btn-hover-border-color: #105a32; }
.btn-link { --bs-btn-color: #1a5a94; --bs-btn-hover-color: #103d66; }
.nav-pills { --bs-nav-pills-link-active-bg: var(--brand); --bs-nav-link-color: #1a5a94; --bs-nav-link-hover-color: #103d66; }
.table-primary { --bs-table-bg: #e6f0fa; --bs-table-color: #1d2733; --bs-table-hover-bg: #dbe8f6; }
.text-warning { color: #8a5a00 !important; }
.badge.bg-secondary { background-color: #5b6573 !important; }
.badge.bg-success { background-color: #15703f !important; }
.badge.bg-danger { background-color: #b02a37 !important; }
.badge.bg-primary { background-color: var(--brand) !important; }

/* ---------- "Log in as" banner ---------- */
.impersonation-bar { position: sticky; top: 0; z-index: 1025; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem;
  background: #ffd24d; color: #2b2100; padding: .55rem 1.25rem; font-size: .9rem; box-shadow: 0 2px 6px rgba(0,0,0,.12); }
@media (max-width: 991.98px) { .impersonation-bar { top: 56px; padding: .5rem .85rem; } }
body:has(.impersonation-bar) .app-sidebar { box-shadow: inset 0 4px 0 #ffd24d; }
.read-only-view form.is-read-only { cursor: not-allowed; }
.read-only-view form.is-read-only .btn:disabled { opacity: .45; }