@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&display=swap');

:root {
    --ink: #172033;
    --muted: #68738a;
    --line: #e5e9f0;
    --canvas: #f5f7fa;
    --panel: #ffffff;
    --navy: #101b36;
    --primary: #176b87;
    --primary-dark: #11566d;
    --primary-soft: #e8f5f7;
    --success: #18805b;
    --success-soft: #e9f7f1;
    --warning: #a65d00;
    --warning-soft: #fff5dd;
    --danger: #bd3c4a;
    --danger-soft: #fff0f1;
    --violet: #6556c2;
    --shadow: 0 1px 2px rgba(17, 31, 60, .04), 0 8px 24px rgba(17, 31, 60, .05);
    --radius: 14px;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--canvas); }
body { margin: 0; min-height: 100vh; color: var(--ink); background: var(--canvas); font: 14px/1.5 'DM Sans', system-ui, sans-serif; }
a { color: var(--primary); text-decoration: none; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
h1, h2, h3, p { margin-top: 0; }

.app-shell { display: grid; grid-template-columns: 252px minmax(0, 1fr); }
.sidebar { position: sticky; top: 0; display: flex; flex-direction: column; height: 100vh; padding: 24px 16px 18px; color: #dce4f4; background: linear-gradient(180deg, #111d39 0%, #0d172d 100%); z-index: 30; }
.brand { display: flex; align-items: center; gap: 11px; padding: 0 8px 28px; color: white; }
.brand-mark { display: grid; flex: 0 0 auto; place-items: center; width: 38px; height: 38px; border-radius: 11px; color: white; background: linear-gradient(140deg, #2b91a7, #17627d); font-size: 12px; font-weight: 700; letter-spacing: -.5px; box-shadow: 0 8px 20px rgba(19, 123, 148, .25); }
.brand-mark.large { width: 46px; height: 46px; border-radius: 13px; }
.brand strong, .auth-brand strong { display: block; font-size: 15px; letter-spacing: -.2px; }
.brand small, .auth-brand small { display: block; margin-top: 1px; color: #91a0bd; font-size: 10px; letter-spacing: .25px; }
.main-nav { display: flex; flex: 1; flex-direction: column; gap: 5px; }
.main-nav a, .nav-disabled { display: flex; align-items: center; gap: 12px; min-height: 42px; padding: 0 12px; border-radius: 9px; color: #aebbd1; font-weight: 500; }
.main-nav a span, .nav-disabled span { width: 20px; color: #7f91af; font-size: 18px; text-align: center; }
.main-nav a:hover { color: white; background: rgba(255,255,255,.05); }
.main-nav a.active { color: white; background: rgba(56, 154, 176, .18); box-shadow: inset 3px 0 #3ca1b8; }
.main-nav a.active span { color: #67bfd0; }
.nav-heading { padding: 24px 12px 6px; color: #5f6f8b; font-size: 10px; font-weight: 700; letter-spacing: .9px; text-transform: uppercase; }
.nav-disabled { opacity: .45; cursor: not-allowed; }
.sidebar-user { display: flex; align-items: center; gap: 10px; padding: 14px 8px 0; border-top: 1px solid rgba(255,255,255,.08); }
.avatar { display: grid; flex: 0 0 auto; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: #c5edf4; background: #223755; font-weight: 700; }
.user-meta { min-width: 0; flex: 1; }
.user-meta strong, .user-meta small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-meta strong { color: white; font-size: 12px; }
.user-meta small { color: #8292ae; font-size: 10px; }
.icon-button { width: 30px; height: 30px; border: 0; border-radius: 8px; color: #8c9ab3; background: transparent; cursor: pointer; }
.icon-button:hover { color: white; background: rgba(255,255,255,.08); }

.main-content { min-width: 0; }
.topbar { display: flex; align-items: center; justify-content: space-between; height: 82px; padding: 0 34px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.92); backdrop-filter: blur(10px); }
.topbar h1 { margin: 1px 0 0; font-size: 20px; line-height: 1.2; letter-spacing: -.4px; }
.eyebrow { color: #8a95a9; font-size: 9px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }
.topbar-actions { display: flex; align-items: center; gap: 10px; }.topbar-actions form { margin: 0; }
.environment-pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid #d4e8eb; border-radius: 999px; color: var(--primary); background: #f1fafa; font-size: 10px; font-weight: 700; letter-spacing: .5px; }
.environment-pill::before { width: 6px; height: 6px; border-radius: 50%; background: #42a681; content: ''; }
.signout-button { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 11px; border: 1px solid var(--line); border-radius: 8px; color: #5f6a7d; background: white; font-size: 10px; font-weight: 700; cursor: pointer; }.signout-button:hover { color: var(--danger); border-color: #efcbd0; background: var(--danger-soft); }
.menu-button { display: none; }
.page-content { max-width: 1500px; margin: auto; padding: 30px 34px 54px; }
.page-intro { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 22px; }
.page-intro h2, .section-heading h2 { margin-bottom: 3px; font-size: 21px; letter-spacing: -.5px; }
.page-intro p, .section-heading p { margin-bottom: 0; color: var(--muted); font-size: 13px; }

.button { display: inline-flex; align-items: center; justify-content: center; min-height: 39px; padding: 0 16px; border: 1px solid transparent; border-radius: 9px; font-size: 12px; font-weight: 700; cursor: pointer; transition: .15s ease; }
.button:hover { transform: translateY(-1px); }
.button-primary { color: white; border-color: var(--primary); background: var(--primary); box-shadow: 0 5px 14px rgba(23, 107, 135, .17); }
.button-primary:hover { color: white; background: var(--primary-dark); }
.button-secondary { color: var(--primary); border-color: #c9e0e5; background: var(--primary-soft); }
.button-ghost { color: #5e697d; border-color: var(--line); background: white; }
.button-danger { color: var(--danger); border-color: #f1c9ce; background: var(--danger-soft); }
.button-block { width: 100%; }
.button-row { display: flex; align-items: center; gap: 9px; }

.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 22px; }
.metric-card { display: flex; align-items: center; gap: 15px; min-height: 116px; padding: 20px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); box-shadow: var(--shadow); }
.metric-icon { display: grid; flex: 0 0 auto; place-items: center; width: 43px; height: 43px; border-radius: 12px; font-size: 19px; }
.metric-icon.blue { color: #207895; background: #eaf6f8; }.metric-icon.amber { color: #a9670a; background: #fff5df; }.metric-icon.green { color: #21805d; background: #eaf7f1; }.metric-icon.red { color: #b84e59; background: #fff0f1; }
.metric-card small, .metric-card span { display: block; color: var(--muted); font-size: 11px; }
.metric-card strong { display: block; margin: 2px 0 0; font-size: 25px; line-height: 1.2; letter-spacing: -.7px; }

.panel { margin-bottom: 20px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); box-shadow: var(--shadow); }
.panel-header { display: flex; align-items: center; justify-content: space-between; min-height: 76px; padding: 17px 21px; border-bottom: 1px solid var(--line); }
.panel-header h2, .action-panel h2, .note-panel h2 { margin-bottom: 2px; font-size: 14px; letter-spacing: -.15px; }
.panel-header p, .action-panel p { margin-bottom: 0; color: var(--muted); font-size: 11px; }
.panel-header > a { font-size: 11px; font-weight: 700; }
.table-wrap { width: 100%; overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th { padding: 11px 18px; color: #788399; background: #fafbfc; font-size: 9px; font-weight: 700; letter-spacing: .65px; text-align: left; text-transform: uppercase; white-space: nowrap; }
td { padding: 15px 18px; border-top: 1px solid #edf0f4; color: #3c4659; font-size: 12px; vertical-align: middle; }
tbody tr:hover { background: #fbfcfd; }
td strong, td small { display: block; }
td strong { color: var(--ink); font-size: 12px; }
td small { margin-top: 2px; color: #8a94a7; font-size: 10px; }
th.number, td.number { text-align: right; }
.table-link { font-size: 11px; font-weight: 700; white-space: nowrap; }
.badge { display: inline-flex; align-items: center; min-height: 24px; padding: 0 9px; border-radius: 999px; font-size: 9px; font-weight: 700; letter-spacing: .2px; white-space: nowrap; }
.badge-neutral { color: #5f687a; background: #f0f2f5; }.badge-success { color: var(--success); background: var(--success-soft); }.badge-warning { color: var(--warning); background: var(--warning-soft); }.badge-danger { color: var(--danger); background: var(--danger-soft); }
.empty-state { padding: 55px 20px; color: var(--muted); text-align: center; }
.empty-state > span { display: grid; place-items: center; width: 48px; height: 48px; margin: 0 auto 13px; border-radius: 14px; color: var(--primary); background: var(--primary-soft); font-size: 22px; }
.empty-state h3 { margin-bottom: 4px; color: var(--ink); font-size: 14px; }.empty-state p { margin-bottom: 18px; font-size: 11px; }
.filterbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 15px 18px; border-bottom: 1px solid var(--line); }
.search-field { display: flex; align-items: center; gap: 8px; width: min(360px, 100%); height: 37px; padding: 0 11px; border: 1px solid var(--line); border-radius: 8px; background: #fafbfc; }
.search-field span { color: #8b96a8; font-size: 17px; }.search-field input { width: 100%; border: 0; outline: 0; background: transparent; font-size: 11px; }
.record-count { color: var(--muted); font-size: 10px; }

label { display: block; color: #465064; font-size: 11px; font-weight: 600; }
input, select, textarea { width: 100%; margin-top: 6px; border: 1px solid #dbe0e8; border-radius: 8px; color: var(--ink); background: white; outline: none; }
input, select { height: 41px; padding: 0 11px; }
textarea { padding: 10px 11px; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: #65aebf; box-shadow: 0 0 0 3px rgba(51, 148, 171, .1); }
label small { display: block; margin-top: 4px; color: #8a94a6; font-size: 9px; font-weight: 400; }
.form-panel { padding: 22px; }
.form-grid { display: grid; gap: 18px; }.form-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }.form-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }.span-two { grid-column: 1 / -1; }
.section-heading { display: flex; align-items: center; justify-content: space-between; margin: 28px 0 12px; }
.line-items-panel { padding: 0 18px; overflow: hidden; }
.line-items-header, .line-item { display: grid; grid-template-columns: minmax(250px, 2fr) minmax(200px, 1.4fr) minmax(110px, .65fr) minmax(180px, 1.2fr) 34px; gap: 11px; align-items: end; }
.line-items-header { padding: 12px 2px 8px; color: #7b8698; font-size: 9px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; }
.line-item { padding: 13px 2px 17px; border-top: 1px solid var(--line); }
.line-item label > .mobile-label { display: none; }
.line-item input, .line-item select { margin-top: 0; }
.remove-line { width: 31px; height: 41px; border: 0; border-radius: 8px; color: #a56b72; background: transparent; font-size: 19px; cursor: pointer; }.remove-line:hover { color: var(--danger); background: var(--danger-soft); }

.alert { max-width: 100%; margin: 0 0 16px; padding: 11px 14px; border: 1px solid; border-radius: 9px; font-size: 11px; }
.alert-error { color: #9e3541; border-color: #f1cbd0; background: var(--danger-soft); }.alert-success { color: #176d4f; border-color: #bfe4d5; background: var(--success-soft); }
.breadcrumb { display: flex; gap: 8px; margin-bottom: 7px; color: #8993a4; font-size: 10px; }.breadcrumb a { font-weight: 600; }
.title-with-status { display: flex; align-items: center; gap: 12px; }.title-with-status h2 { margin-bottom: 0; }
.detail-grid { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(290px, .72fr); gap: 20px; align-items: start; }
.details-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin: 0; padding: 21px; }
.details-list div.wide { grid-column: 1 / -1; }.details-list dt { margin-bottom: 5px; color: #8791a4; font-size: 9px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; }.details-list dd { margin: 0; color: #303a4d; font-size: 12px; font-weight: 500; }.details-list dd small { display: block; color: var(--muted); font-size: 10px; font-weight: 400; }
.action-panel { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 19px 20px; border-left: 3px solid #dba83f; }
.action-panel > div:first-child { display: flex; align-items: center; gap: 12px; }.action-icon { display: grid; flex: 0 0 auto; place-items: center; width: 38px; height: 38px; border-radius: 10px; font-size: 17px; }.action-icon.amber { color: var(--warning); background: var(--warning-soft); }.action-icon.blue { color: var(--primary); background: var(--primary-soft); }.action-icon.green { color: var(--success); background: var(--success-soft); }.action-icon.violet { color: var(--violet); background: #f0eefc; }
.approval-form { min-width: 340px; }.approval-form .button-row { justify-content: flex-end; margin-top: 9px; }
.timeline { margin: 0; padding: 21px; list-style: none; }.timeline li { position: relative; display: grid; grid-template-columns: 18px 1fr; gap: 10px; padding-bottom: 23px; }.timeline li:last-child { padding-bottom: 0; }.timeline li:not(:last-child)::after { position: absolute; top: 17px; bottom: 0; left: 5px; width: 1px; background: #dde3ea; content: ''; }.timeline-dot { position: relative; z-index: 1; width: 11px; height: 11px; margin-top: 3px; border: 3px solid white; border-radius: 50%; background: #8d98aa; box-shadow: 0 0 0 1px #b9c1cd; }.timeline-dot.approved { background: var(--success); box-shadow: 0 0 0 1px #6db99e; }.timeline-dot.rejected { background: var(--danger); box-shadow: 0 0 0 1px #df8992; }
.timeline strong { display: block; font-size: 11px; }.timeline p { margin: 1px 0; color: var(--muted); font-size: 9px; }.timeline small { color: #9aa3b2; font-size: 8px; }.timeline blockquote { margin: 7px 0; padding: 7px 9px; border-left: 2px solid #cbd5e0; color: #667085; background: #f8f9fb; font-size: 9px; }
.note-panel { padding: 20px; }.note-panel > div { margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--line); }.note-panel strong { font-size: 10px; }.note-panel p { margin: 4px 0 0; color: var(--muted); font-size: 10px; }

.auth-shell { display: grid; min-height: 100vh; place-items: center; padding: 30px 18px; background: radial-gradient(circle at 20% 15%, rgba(46, 147, 168, .13), transparent 28%), radial-gradient(circle at 85% 80%, rgba(60, 81, 139, .12), transparent 28%), #f3f6f9; }
.auth-main { width: min(430px, 100%); }.auth-card { padding: 34px; border: 1px solid rgba(220,226,234,.95); border-radius: 18px; background: rgba(255,255,255,.95); box-shadow: 0 24px 70px rgba(22, 35, 64, .12); }.auth-card.wide { width: 560px; max-width: calc(100vw - 36px); margin-left: 50%; transform: translateX(-50%); }
.auth-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 35px; }.auth-heading { margin-bottom: 23px; }.auth-heading h1 { margin: 4px 0 5px; font-size: 25px; letter-spacing: -.7px; }.auth-heading p { color: var(--muted); font-size: 12px; }.form-stack { display: grid; gap: 16px; }.auth-footnote { margin: 24px 0 0; color: var(--muted); font-size: 10px; text-align: center; }
.error-page { padding: 80px 20px; text-align: center; }.error-page > span { display: block; color: #ccd3dd; font-size: 70px; font-weight: 700; letter-spacing: -5px; }.error-page h1 { margin-bottom: 6px; }.error-page p { margin-bottom: 20px; color: var(--muted); }

.narrow-content { max-width: 620px; }
.button-row.end { justify-content: flex-end; }
.security-notice { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; padding: 13px; border: 1px solid #f0d49c; border-radius: 10px; color: #845416; background: var(--warning-soft); }
.security-notice > span { display: grid; flex: 0 0 auto; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: white; background: #c47a16; font-weight: 700; }
.security-notice strong { display: block; font-size: 11px; }.security-notice p { margin: 1px 0 0; font-size: 10px; }
.admin-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 20px; }
.admin-summary article { padding: 16px 18px; border: 1px solid var(--line); border-radius: 12px; background: white; box-shadow: var(--shadow); }
.admin-summary small, .admin-summary strong { display: block; }.admin-summary small { color: var(--muted); font-size: 10px; }.admin-summary strong { margin-top: 2px; font-size: 22px; }
.inline-create { padding: 20px; border-bottom: 1px solid var(--line); background: #f9fbfc; }.inline-create[hidden] { display: none; }.inline-create .button-row { margin-top: 18px; }
.inline-create.compact { padding: 16px 20px; }.department-create { grid-template-columns: 180px minmax(240px, 1fr) auto; align-items: end; }.department-create .button { height: 41px; }
.role-chip { display: inline-block; padding: 4px 8px; border: 1px solid #dce3ea; border-radius: 6px; color: #536074; background: #f8fafb; font-size: 9px; font-weight: 700; }
.row-actions { display: flex; align-items: center; gap: 12px; }.row-actions form { margin: 0; }
.text-button { padding: 0; border: 0; color: var(--primary); background: transparent; font-size: 10px; font-weight: 700; cursor: pointer; }.danger-text { color: var(--danger); }
.reset-menu { position: relative; }.reset-menu summary { color: var(--primary); font-size: 10px; font-weight: 700; cursor: pointer; list-style: none; }.reset-menu summary::-webkit-details-marker { display: none; }
.reset-menu[open] form { position: absolute; z-index: 10; top: 25px; right: 0; width: 260px; padding: 14px; border: 1px solid var(--line); border-radius: 10px; background: white; box-shadow: 0 15px 35px rgba(20, 31, 55, .16); }.reset-menu form .button { width: 100%; margin-top: 10px; }
.department-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; padding: 10px; }
.department-card { display: flex; align-items: center; gap: 11px; margin: 6px; padding: 14px; border: 1px solid var(--line); border-radius: 10px; background: #fbfcfd; }
.department-card > span { display: grid; flex: 0 0 auto; place-items: center; width: 34px; height: 34px; border-radius: 9px; color: var(--primary); background: var(--primary-soft); font-size: 10px; font-weight: 700; }.department-card strong, .department-card small { display: block; }.department-card strong { font-size: 11px; }.department-card small { color: var(--muted); font-size: 9px; }

@media (max-width: 1100px) {
    .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .detail-grid { grid-template-columns: 1fr; }.detail-aside { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }.detail-aside .panel { margin: 0; }
    .line-items-header { display: none; }.line-item { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; }.line-item label > .mobile-label { display: block; margin-bottom: 5px; color: #7b8698; font-size: 9px; font-weight: 700; text-transform: uppercase; }.remove-line { grid-column: 2; justify-self: end; }
    .form-grid.three, .department-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
    .app-shell { display: block; }.sidebar { position: fixed; left: -270px; width: 252px; transition: left .2s ease; box-shadow: 15px 0 40px rgba(8, 18, 40, .25); }.sidebar.open { left: 0; }
    .topbar { height: 70px; padding: 0 18px; }.menu-button { display: block; margin-right: 12px; border: 0; color: var(--ink); background: transparent; font-size: 21px; }.topbar > div:nth-child(2) { margin-right: auto; }.topbar h1 { font-size: 17px; }
    .environment-pill { display: none; }.signout-button { padding: 0 9px; }.signout-button span { display: none; }
    .page-content { padding: 22px 16px 42px; }.page-intro { align-items: flex-start; flex-direction: column; }.detail-intro > .button { display: none; }
    .metric-grid { grid-template-columns: 1fr; gap: 10px; }.metric-card { min-height: 92px; }.metric-card strong { font-size: 21px; }
    .form-grid.two, .form-grid.three, .details-list, .department-grid, .admin-summary { grid-template-columns: 1fr; }.span-two, .details-list div.wide { grid-column: auto; }
    .section-heading { align-items: flex-start; gap: 10px; }.line-item { grid-template-columns: 1fr; }.remove-line { grid-column: 1; }.line-items-panel { padding: 0 13px; }
    .action-panel { align-items: stretch; flex-direction: column; }.approval-form { min-width: 0; }.approval-form .button-row { align-items: stretch; flex-direction: column-reverse; }.approval-form .button { width: 100%; }
    .detail-aside { display: block; }.detail-aside .panel { margin-bottom: 20px; }
    .filterbar { align-items: stretch; flex-direction: column; }.search-field { width: 100%; }.record-count { display: none; }
    .auth-card { padding: 26px 21px; }.auth-card.wide { width: auto; max-width: none; margin: 0; transform: none; }.auth-card .form-grid.two { grid-template-columns: 1fr; }
    .department-create { grid-template-columns: 1fr; }.row-actions { align-items: flex-start; flex-direction: column; }.reset-menu[open] form { right: auto; left: 0; }
}