*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --black: #0a0a0a; --white: #ffffff;
  --gray-50: #f9fafb; --gray-100: #f3f4f6; --gray-200: #e5e7eb; --gray-300: #d1d5db; --gray-400: #9ca3af; --gray-600: #4b5563; --gray-800: #1f2937;
  --accent: #2A454B; --accent-mid: #9BAFDA; --gold: #0B3866; --gold-light: #e8c97a;
  --panel: #D8DED6; --page: #E1DAE6;
  --success: #10b981; --danger: #ef4444; --warn: #d97706; --radius: 12px;
  --shadow: 0 4px 24px rgba(0,0,0,0.08); --shadow-lg: 0 12px 48px rgba(0,0,0,0.14);
}
body { font-family: 'Outfit', system-ui, sans-serif; background: var(--page); color: var(--black); min-height: 100vh; display: flex; flex-direction: column; font-size: 15px; }
a { color: var(--gold); }
code { background: var(--gray-100); padding: 1px 6px; border-radius: 4px; font-size: 13px; }

/* TOP BAR */
.topbar { background: var(--accent); color: var(--white); }
.topbar-inner { max-width: 1100px; margin: 0 auto; padding: 10px 20px; display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--white); }
.brand img { height: 44px; mix-blend-mode: multiply; }
.brand-tag { font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-light); }
.nav { display: flex; gap: 4px; flex: 1; flex-wrap: wrap; }
.nav a { color: rgba(255,255,255,.8); text-decoration: none; font-weight: 500; font-size: 14px; padding: 8px 12px; border-radius: 8px; }
.nav a:hover { background: rgba(255,255,255,.08); color: var(--white); }
.nav a.active { background: rgba(255,255,255,.14); color: var(--white); }
.who { display: flex; align-items: center; gap: 12px; font-size: 14px; }
.who-name { font-weight: 600; }
.link-btn { background: none; border: 1px solid rgba(255,255,255,.35); color: var(--white); border-radius: 6px; padding: 5px 10px; font: inherit; font-size: 13px; cursor: pointer; }
.link-btn:hover { background: rgba(255,255,255,.1); }

.wrap { width: 100%; max-width: 1100px; margin: 0 auto; padding: 28px 20px 40px; flex: 1; }
.foot { text-align: center; color: var(--gray-600); font-size: 12px; padding: 16px; }

/* GENERIC */
h1 { font-size: 26px; font-weight: 700; color: var(--accent); }
h2 { font-size: 17px; font-weight: 700; color: var(--accent); margin-bottom: 14px; }
.muted { color: var(--gray-600); }
.small, .hint { font-size: 12.5px; }
.hint { color: var(--gray-600); }
.sub { font-size: 12px; color: var(--gray-600); margin-top: 2px; }
.empty { color: var(--gray-600); padding: 12px 0; }
.card { background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow); padding: 22px 24px; margin-bottom: 20px; }
.page-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.page-head p { margin-top: 4px; max-width: 680px; }
.back { text-decoration: none; font-weight: 600; }
.head-actions { display: flex; gap: 10px; }

.alert { padding: 12px 16px; border-radius: 8px; margin-bottom: 16px; font-size: 14px; border-left: 4px solid; }
.alert-success { background: #ecfdf5; border-color: var(--success); color: #065f46; }
.alert-error { background: #fef2f2; border-color: var(--danger); color: #991b1b; }
.alert-warning { background: #fffbeb; border-color: var(--warn); color: #78350f; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-family: inherit; font-size: 14px; font-weight: 600; padding: 10px 20px; border-radius: 8px; border: 1.5px solid var(--gray-300); background: var(--white); color: var(--gray-800); cursor: pointer; text-decoration: none; transition: all .15s; }
.btn:hover { border-color: var(--gray-400); }
.btn-sm { padding: 5px 12px; font-size: 13px; }
.btn-primary { background: linear-gradient(135deg, var(--accent), #3d6670); color: var(--white); border-color: transparent; }
.btn-primary:hover { filter: brightness(1.1); }
.btn-primary:disabled { opacity: .5; cursor: not-allowed; }
.btn-block { width: 100%; }
.btn-approve { background: var(--success); color: var(--white); border-color: var(--success); }
.btn-approve:hover { filter: brightness(1.05); }
.btn-reject { background: var(--white); color: var(--danger); border: 2px solid var(--danger); }
.btn-reject:hover { background: #fef2f2; }

.badge { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; background: var(--gray-200); color: var(--gray-600); white-space: nowrap; }
.badge-pending { background: #e0e7ff; color: var(--gold); }
.badge-approved { background: #d1fae5; color: #065f46; }
.badge-rejected { background: #fee2e2; color: #991b1b; }
.badge-cancelled, .badge-skipped, .badge-waiting { background: var(--gray-200); color: var(--gray-600); }

/* STATS */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin-bottom: 20px; }
.stat { background: var(--white); border-radius: var(--radius); padding: 18px 20px; box-shadow: var(--shadow); }
.stat-num { font-size: 30px; font-weight: 700; color: var(--accent); }
.stat-label { font-size: 13px; color: var(--gray-600); }
.stat-hot { background: var(--accent); }
.stat-hot .stat-num, .stat-hot .stat-label { color: var(--white); }

/* TABLES */
.table-wrap { overflow-x: auto; }
table.list { width: 100%; border-collapse: collapse; font-size: 14px; }
table.list th { text-align: left; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gray-600); padding: 10px 12px; border-bottom: 2px solid var(--gray-200); white-space: nowrap; }
table.list td { padding: 12px; border-bottom: 1px solid var(--gray-100); vertical-align: top; }
table.list tr:hover td { background: var(--gray-50); }
table.list a { text-decoration: none; }
table.list tr.inactive td { opacity: .55; }

.tabs { display: flex; gap: 6px; margin-bottom: 14px; flex-wrap: wrap; }
.tab { text-decoration: none; padding: 8px 14px; border-radius: 999px; background: var(--white); color: var(--gray-600); font-weight: 600; font-size: 13px; }
.tab span { background: var(--gray-100); border-radius: 999px; padding: 1px 8px; margin-left: 4px; font-size: 12px; }
.tab.active { background: var(--accent); color: var(--white); }
.tab.active span { background: rgba(255,255,255,.2); }
.filters { display: grid; grid-template-columns: 2fr 1fr 1fr auto; gap: 14px; align-items: end; }
.filter-actions { display: flex; gap: 8px; }

/* AUTH */
.auth { display: flex; justify-content: center; padding-top: 40px; }
.auth-card { width: 100%; max-width: 420px; padding: 32px; }
.auth-card h1 { margin-bottom: 8px; }
.auth-card > p { margin-bottom: 18px; font-size: 14px; }
.auth-card form { display: flex; flex-direction: column; gap: 14px; margin-bottom: 16px; }

/* FORM SHELL (matches original PTO form) */
.form-shell { max-width: 820px; margin: 0 auto 24px; }
.form-header { background: var(--accent); border-radius: var(--radius) var(--radius) 0 0; padding: 24px 32px; display: flex; align-items: center; justify-content: space-between; gap: 16px; position: relative; overflow: hidden; }
.form-header h1 { color: var(--white); font-size: 22px; }
.header-sub { color: rgba(255,255,255,.7); font-size: 13px; margin-top: 4px; }
.form-header::after { content: ''; position: absolute; right: -40px; top: -40px; width: 200px; height: 200px; border-radius: 50%; background: rgba(201,168,76,0.08); pointer-events: none; }
.form-title-badge { background: rgba(201,168,76,0.18); border: 1px solid rgba(201,168,76,0.4); border-radius: 8px; padding: 8px 16px; color: var(--gold-light); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; position: relative; z-index: 1; }
.form-title-badge.badge-approved { background: #d1fae5; color: #065f46; border-color: #6ee7b7; }
.form-title-badge.badge-rejected { background: #fee2e2; color: #991b1b; border-color: #fca5a5; }
.form-title-badge.badge-cancelled { background: var(--gray-200); color: var(--gray-600); border-color: var(--gray-300); }
.form-body { background: var(--panel); border-radius: 0 0 var(--radius) var(--radius); box-shadow: var(--shadow-lg); overflow: hidden; }
.section { padding: 26px 32px; border-bottom: 1px solid rgba(255,255,255,.5); }
.section-title { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); margin-bottom: 18px; display: flex; align-items: center; gap: 10px; }
.section-title::after { content: ''; flex: 1; height: 1px; background: linear-gradient(to right, var(--gold-light), transparent); }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 11.5px; font-weight: 600; color: var(--gray-600); letter-spacing: .06em; text-transform: uppercase; }
.req { color: var(--danger); }
.field input, .field textarea, .field select { width: 100%; border: 1.5px solid var(--gray-200); border-radius: 8px; padding: 10px 14px; font-family: inherit; font-size: 14.5px; color: var(--black); background: var(--gray-50); outline: none; transition: border-color .2s, box-shadow .2s, background .2s; }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--gold); background: var(--white); box-shadow: 0 0 0 3px rgba(11,56,102,.12); }
.field textarea { resize: vertical; min-height: 80px; }
.readonly { border: 1.5px solid var(--gray-200); border-radius: 8px; padding: 10px 14px; background: rgba(255,255,255,.6); min-height: 42px; }
.prewrap { white-space: pre-wrap; }

.absence-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.absence-option { position: absolute; opacity: 0; pointer-events: none; }
.absence-label { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 14px 10px; height: 100%; border: 1.5px solid var(--gray-200); border-radius: 10px; cursor: pointer; text-align: center; font-size: 12px; font-weight: 600; color: var(--gray-600); background: var(--gray-50); transition: all .2s; user-select: none; }
.absence-label .icon { font-size: 22px; line-height: 1; }
.absence-option:checked + .absence-label { border-color: var(--gold); background: linear-gradient(135deg, #fdfaee, #fff8e1); color: var(--accent); box-shadow: 0 2px 12px rgba(201,168,76,.18); }
.absence-option:focus-visible + .absence-label { outline: 2px solid var(--gold); }
.absence-label:hover { border-color: var(--gold-light); background: #fffdf5; }

.table-scroll { overflow-x: auto; }
.hours-table { width: 100%; border-collapse: collapse; border-radius: 10px; overflow: hidden; border: 1.5px solid var(--gray-200); background: var(--white); }
.hours-table thead tr { background: var(--accent); color: var(--white); }
.hours-table thead th { padding: 12px 14px; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; text-align: left; white-space: nowrap; }
.hours-table tbody tr:nth-child(even) { background: var(--gray-50); }
.hours-table tbody td { padding: 10px 14px; font-size: 14px; color: var(--gray-800); }
.hours-table input[type="number"] { border: 1.5px solid var(--gray-200); border-radius: 6px; padding: 6px 10px; font-family: inherit; font-size: 14px; width: 90px; outline: none; }
.hours-table input[type="number"]:focus { border-color: var(--gold); }
.balance-cell { font-weight: 700; color: var(--accent); white-space: nowrap; }
.balance-cell.neg { color: var(--danger); }

.notice { margin-top: 16px; background: linear-gradient(135deg, #fffbeb, #fef3c7); border-left: 4px solid var(--gold); border-radius: 0 8px 8px 0; padding: 12px 16px; font-size: 13px; color: #78350f; font-style: italic; }

.sig-wrapper { border: 1.5px solid var(--gray-200); border-radius: 10px; background: var(--gray-50); overflow: hidden; position: relative; }
.sig-canvas { display: block; width: 100%; height: 120px; cursor: crosshair; touch-action: none; background: var(--white); }
.sig-placeholder { position: absolute; top: 60px; left: 50%; transform: translate(-50%, -50%); font-size: 13px; color: var(--gray-400); pointer-events: none; transition: opacity .2s; white-space: nowrap; }
.sig-actions { display: flex; justify-content: flex-end; padding: 6px 10px; border-top: 1px solid var(--gray-200); background: var(--white); }
.btn-clear { font-family: inherit; font-size: 12px; font-weight: 600; color: var(--gray-600); background: none; border: 1.5px solid var(--gray-200); border-radius: 6px; padding: 4px 12px; cursor: pointer; }
.btn-clear:hover { border-color: var(--danger); color: var(--danger); }

.sig-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.step-card { background: var(--white); border: 1.5px solid var(--gray-200); border-radius: 10px; padding: 14px 16px; }
.step-card.is-active { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(42,69,75,.12); }
.step-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 10px; }
.step-name { font-weight: 700; color: var(--accent); }
.sig-img { height: 90px; border: 1px dashed var(--gray-200); border-radius: 8px; display: flex; align-items: center; justify-content: center; background: var(--gray-50); }
.sig-img img { max-height: 84px; max-width: 100%; }
.sig-meta { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; margin-top: 8px; }
.sig-meta span { color: var(--gray-600); }
.comment { margin-top: 8px; font-size: 13px; color: var(--gray-800); font-style: italic; background: var(--gray-50); border-radius: 6px; padding: 8px 10px; }

.action-section { background: var(--white); }
.decision-buttons { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; }

.submit-area { padding: 24px 32px; background: var(--gray-50); display: flex; flex-direction: column; gap: 14px; }
.submit-buttons { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; margin-top: 6px; }
.next-step-note { background: linear-gradient(135deg, #e8f4f6, #d4edf1); border-left: 4px solid var(--accent); border-radius: 0 8px 8px 0; padding: 12px 16px; font-size: 13px; color: #1a3a40; font-weight: 500; }

/* TRACKER */
.tracker { display: flex; padding: 22px 24px 8px; background: var(--white); }
.t-step { flex: 1; display: flex; flex-direction: column; align-items: center; position: relative; text-align: center; min-width: 0; }
.t-step::before { content: ''; position: absolute; top: 14px; left: -50%; width: 100%; height: 3px; background: var(--gray-200); }
.t-step:first-child::before { display: none; }
.t-step.done::before, .t-step.active::before, .t-step.rejected::before { background: var(--accent); }
.t-dot { width: 30px; height: 30px; border-radius: 50%; background: var(--white); border: 3px solid var(--gray-200); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: var(--gray-400); position: relative; z-index: 1; }
.t-step.done .t-dot { background: var(--success); border-color: var(--success); color: var(--white); }
.t-step.active .t-dot { border-color: var(--accent); color: var(--accent); box-shadow: 0 0 0 4px rgba(42,69,75,.15); }
.t-step.rejected .t-dot { background: var(--danger); border-color: var(--danger); color: var(--white); }
.t-step.skipped { opacity: .45; }
.t-label { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--gray-600); margin-top: 8px; }
.t-sub { font-size: 12px; color: var(--gray-400); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; padding: 0 4px; }
.banner { background: var(--white); padding: 4px 24px 18px; font-size: 14px; color: #1a3a40; }
.banner-ok { color: #065f46; } .banner-bad { color: #991b1b; } .banner-muted { color: var(--gray-600); }

.chain { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.chain-step { display: flex; align-items: center; gap: 10px; background: var(--white); border: 1.5px solid var(--gray-200); border-radius: 10px; padding: 10px 14px; }
.chain-num { width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: var(--white); font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.chain-arrow { color: var(--gray-400); font-size: 18px; }

.edit-card { border: 2px solid var(--accent); }
.edit-card h2 .muted { font-weight: 500; font-size: 14px; }

@media (max-width: 760px) {
  .topbar-inner { gap: 10px; }
  .nav { order: 3; width: 100%; }
  .who { margin-left: auto; }
  .filters { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .wrap { padding: 18px 12px 30px; }
  .card { padding: 18px; }
  .form-header { padding: 20px; }
  .section, .submit-area { padding: 22px 18px; }
  .grid-2 { grid-template-columns: 1fr; }
  .absence-grid { grid-template-columns: repeat(2, 1fr); }
  .hours-table input[type="number"] { width: 64px; }
  .hours-table thead th, .hours-table tbody td { padding: 8px; }
  .tracker { padding: 18px 6px 6px; }
  .t-sub { display: none; }
  .banner { padding: 4px 18px 16px; }
}
@media print {
  @page { margin: 12mm; }
  body { background: var(--white); font-size: 12px; }
  .topbar, .foot, .no-print, .alert, .sig-actions { display: none !important; }
  .wrap { padding: 0; max-width: none; }
  .form-shell { max-width: none; margin: 0; }
  .form-body, .card { box-shadow: none; }
  .form-header, .hours-table thead tr, .t-dot, .badge, .form-title-badge { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .section { padding: 14px 0; break-inside: avoid; }
  .form-body { background: var(--white); }
  .step-card { break-inside: avoid; }
}

.checks { justify-content: center; gap: 10px; }
.check { display: flex; align-items: center; gap: 8px; font-size: 14px !important; text-transform: none !important; letter-spacing: 0 !important; color: var(--gray-800) !important; font-weight: 500 !important; cursor: pointer; }
.check input { width: 16px; height: 16px; accent-color: var(--accent); }
.row-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.row-actions form { display: inline; }

/* USERS PAGE — restrained neutral/blue palette, wide non-stacking table */
.users-layout { max-width: 1560px; width: 100%; padding-left: 30px; padding-right: 30px; }
.users-page .page-head p { max-width: 950px; }
.users-page .page-head { align-items: center; }
.users-page .page-head .btn-primary, .users-page .users-search .btn-primary { background: #003a7f; border-color: #003a7f; }
.users-table-card { padding: 18px 22px; }
.users-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 12px; }
.users-search { display: flex; align-items: center; gap: 8px; flex: 1; max-width: 660px; }
.users-search input { min-width: 220px; flex: 1; }
.users-count { color: #606975; font-size: 13px; white-space: nowrap; }
.users-table-wrap { overflow-x: auto; }
.users-table { min-width: 1100px; table-layout: auto; }
.users-table th, .users-table td { padding: 13px 10px; vertical-align: middle; }
.users-table th { color: #44505d; background: #fafbfc; }
.users-table td:nth-child(1), .users-table td:nth-child(2),
.users-table td:nth-child(3), .users-table td:nth-child(4),
.users-table td:nth-child(5), .users-table td:nth-child(6) { white-space: nowrap; }
.users-table td:nth-child(2) { min-width: 160px; }
.users-table td:nth-child(3) { min-width: 195px; }
.users-table td:nth-child(7) { min-width: 225px; }
.users-table .sub { margin-top: 5px; }
.users-roles { display: flex; align-items: center; flex-wrap: nowrap; gap: 5px; }
.users-roles .users-department { color: #5c6670; }
.users-page .badge { background: #edf1f5; color: #465363; font-size: 10px; letter-spacing: .025em; padding: 3px 7px; }
.users-page .badge-pending, .users-page .badge-approved { background: #e8eff9; color: #003a7f; }
.users-page .badge-rejected { background: #eef0f2; color: #475569; }
.users-table .row-actions { display: table-cell; white-space: nowrap; }
.users-table .row-actions form { display: inline-block; margin-left: 5px; }
.users-table .row-actions .btn { padding: 7px 10px; border-radius: 6px; }
.users-empty { text-align: center; color: #606975; padding: 30px 12px !important; }
.users-pagination { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 16px; flex-wrap: wrap; }
.users-pages { display: flex; align-items: center; gap: 5px; }
.users-pages .page-number { display: inline-flex; min-width: 32px; height: 32px; align-items: center; justify-content: center; text-decoration: none; color: #283b50; border: 1px solid #d8dee6; border-radius: 6px; font-size: 13px; }
.users-pages .page-number.current { background: #003a7f; color: #fff; border-color: #003a7f; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@media (max-width: 760px) {
  .users-layout { padding-left: 12px; padding-right: 12px; }
  .users-toolbar { align-items: stretch; flex-direction: column; }
  .users-search { max-width: none; }
  .users-table-card { padding: 14px 12px; }
}

/* HR oversight and allocation pages; neutral with restrained corporate blue */
.wrap.hr-layout { max-width: 1560px; }
.hr-layout .btn-primary { background:#003a7f; border-color:#003a7f; }
.hr-layout .stat-hot { background:#003a7f; }
.hr-actions {display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.hr-search {display:flex;gap:10px;align-items:flex-end;margin-bottom:20px;flex-wrap:wrap}
.hr-search .field {flex:1;min-width:220px;max-width:460px}
.balance-table {min-width:960px}
.balance-table td {vertical-align:middle!important}
.balance-table input[type=number] {width:125px;min-width:100px;padding:9px;border:1px solid #d1d5db;border-radius:6px;font:inherit}
.hr-pagination {display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-top:16px;font-size:13px;color:#4b5563}

/* Table-first request history: keep columns aligned on desktop and scroll on mobile. */
.request-history-table { min-width: 1250px; width: 100%; table-layout: auto; }
.request-history-table th, .request-history-table td { white-space: nowrap; vertical-align: top; }
.request-history-table .request-reason { white-space: normal; min-width: 170px; max-width: 270px; overflow-wrap: anywhere; }
#undertimeSection[hidden] { display: none !important; }