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

/* ═══════════════════════════════════════════════════════════
   SAMS v2 — Eye-Comfort Design System
   Palette tuned for 8+ hours daily use:
   · Warm off-white bg (no pure white glare)
   · Muted, desaturated blue (not electric)
   · Warm dark sidebar (no cold jet-black)
   · Softer text contrast (~60–70 % vs 95 %)
   · Low-chroma status badges (pastels only)
   ═══════════════════════════════════════════════════════════ */
:root {
  /* Brand – slate-blue, muted */
  --brand:#3a68aa;          /* softer, less electric */
  --brand-dark:#2a5090;
  --brand-light:#edf3fb;
  --brand-mid:#5b82c2;      /* focus ring */

  /* Sidebar – warm dark navy  */
  --sb-bg:#1b2c3e;
  --sb-width:220px;
  --sb-text:#7f9bb0;        /* warm muted */
  --sb-text-hov:#cddcec;
  --sb-active-bg:rgba(91,130,194,.14);
  --sb-active:#7baedc;      /* sky blue, not harsh */
  --sb-border:rgba(255,255,255,.07);
  --sb-head-h:56px;

  /* Topbar */
  --topbar-h:52px;
  --topbar-bg:#eef2f7;      /* warm off-white topbar */
  --topbar-bdr:#d6dde6;

  /* Page & card backgrounds — key for eye comfort */
  --bg:#ebeff5;             /* warm grey-blue, not pure white */
  --card-bg:#f5f8fb;        /* barely-off-white cards */
  --card-bdr:#d5dce5;       /* soft border, not stark */

  /* Text — warm grays, reduced contrast */
  --t1:#243040;             /* primary: warm dark navy (not #000) */
  --t2:#4c6070;             /* secondary: medium warm */
  --t3:#8a9ead;             /* muted: desaturated */

  /* Status colours — desaturated / pastel */
  --success:#2e8a62;        /* calm forest green */
  --warning:#c07a30;        /* warm amber */
  --danger:#b54050;         /* muted burgundy-red */
  --info:#2880a2;

  /* Geometry */
  --radius:9px;
  --radius-sm:6px;
  --radius-lg:13px;

  /* Shadows — softer lifts */
  --shadow-sm:0 1px 4px rgba(30,45,65,.05);
  --shadow:  0 3px 14px rgba(30,45,65,.07);
  --shadow-lg:0 8px 28px rgba(30,45,65,.11);
  --tr:.17s ease;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:14.5px}
body{font-family:'Inter',system-ui,sans-serif;background:var(--bg);color:var(--t1);line-height:1.6}
a{color:var(--brand);text-decoration:none}
a:hover{color:var(--brand-dark);text-decoration:none}
ul,ol{list-style:none}
input,select,textarea,button{font-family:inherit;font-size:inherit}

/* ── App Shell ── */
.app-shell{display:flex;min-height:100vh}

/* ── Sidebar ── */
.sidebar{width:var(--sb-width);background:var(--sb-bg);display:flex;flex-direction:column;
  position:fixed;top:0;left:0;bottom:0;z-index:200;overflow:hidden}
.sb-brand{height:var(--sb-head-h);display:flex;align-items:center;padding:0 1.25rem;
  border-bottom:1px solid var(--sb-border);flex-shrink:0;gap:.65rem}
.sb-brand .logo-icon{width:30px;height:30px;background:var(--brand);border-radius:7px;
  display:flex;align-items:center;justify-content:center;font-size:.85rem;color:#fff;font-weight:800;flex-shrink:0}
.sb-logo-img{width:34px;height:34px;flex-shrink:0;display:block}
.sb-brand .logo-text{font-size:.95rem;font-weight:700;color:#dce8f0;letter-spacing:.2px}
.sb-brand .logo-text span{display:block;font-size:.65rem;font-weight:400;color:var(--sb-text)}
.sb-nav{flex:1;overflow-y:auto;overflow-x:hidden;padding:.75rem 0;
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.1) transparent}
.sb-nav::-webkit-scrollbar{width:4px}
.sb-nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1);border-radius:4px}
.sb-section-label{font-size:.64rem;font-weight:700;letter-spacing:1px;text-transform:uppercase;
  color:var(--sb-text);padding:.65rem 1.25rem .3rem;opacity:.6}
.sb-link{display:flex;align-items:center;gap:.6rem;padding:.52rem 1.25rem;color:var(--sb-text);
  font-size:.82rem;font-weight:500;transition:color var(--tr),background var(--tr);
  border-left:3px solid transparent;white-space:nowrap}
.sb-link i{width:16px;text-align:center;font-size:.8rem;flex-shrink:0}
.sb-link:hover{color:var(--sb-text-hov);background:rgba(255,255,255,.05)}
.sb-link.active{color:var(--sb-active);background:var(--sb-active-bg);border-left-color:var(--sb-active);font-weight:600}
.sb-year-link{display:flex;align-items:center;justify-content:space-between;
  padding:.38rem 1.25rem .38rem 2.5rem;color:var(--sb-text);font-size:.79rem;
  font-weight:400;transition:color var(--tr),background var(--tr);border-left:3px solid transparent}
.sb-year-link:hover{color:var(--sb-text-hov);background:rgba(255,255,255,.04)}
.sb-year-link.active{color:var(--sb-active);background:var(--sb-active-bg);
  border-left-color:var(--sb-active);font-weight:600}
.sb-year-link .dot{width:6px;height:6px;border-radius:50%;background:var(--sb-text);opacity:.28;flex-shrink:0}
.sb-year-link.active .dot{background:var(--sb-active);opacity:1}
.sb-footer{border-top:1px solid var(--sb-border);padding:.75rem 1.25rem;flex-shrink:0}
.sb-user{display:flex;align-items:center;gap:.6rem}
.sb-avatar{width:30px;height:30px;border-radius:50%;background:#2e4a65;
  display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:700;color:#cde;flex-shrink:0}
.sb-user-info{flex:1;min-width:0}
.sb-user-name{font-size:.79rem;font-weight:600;color:#cddcec;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-user-role{font-size:.67rem;color:var(--sb-text)}
.sb-logout{color:var(--sb-text);font-size:.78rem;padding:.25rem;border-radius:4px;
  transition:color var(--tr);flex-shrink:0}
.sb-logout:hover{color:#e07080}

/* ── Main Content ── */
.main-content{margin-left:var(--sb-width);flex:1;min-width:0;display:flex;
  flex-direction:column;min-height:100vh}

/* ── Top Bar ── */
.topbar{height:var(--topbar-h);background:var(--topbar-bg);border-bottom:1px solid var(--topbar-bdr);
  display:flex;align-items:center;padding:0 1.75rem;gap:1rem;position:sticky;top:0;z-index:100;
  box-shadow:0 1px 4px rgba(30,45,65,.05)}
.topbar-title{font-size:.92rem;font-weight:700;color:var(--t1);flex:1}
.topbar-title .tb-sub{font-size:.72rem;font-weight:400;color:var(--t3);margin-top:.05rem}
.topbar-right{display:flex;align-items:center;gap:.75rem}
.role-pill{font-size:.67rem;font-weight:700;padding:.22rem .55rem;border-radius:20px;text-transform:uppercase;letter-spacing:.4px}
.role-pill.admin{background:#f0e6c4;color:#6b4c0e}
.role-pill.editor{background:#dae5f7;color:#1a4080}
.role-pill.viewer{background:#daf0e4;color:#1a5535}

/* ── Page ── */
.page-wrap{flex:1;padding:1.75rem;max-width:1440px;width:100%}
.page-header{display:flex;align-items:flex-start;justify-content:space-between;
  margin-bottom:1.5rem;gap:1rem;flex-wrap:wrap}
.page-header h1{font-size:1.2rem;font-weight:700;color:var(--t1);
  display:flex;align-items:center;gap:.5rem}
.page-header h1 i{color:var(--brand);font-size:1.05rem}
.page-subtitle{font-size:.78rem;color:var(--t3);margin-top:.15rem}

/* ── Cards ── */
.card{background:var(--card-bg);border:1px solid var(--card-bdr);
  border-radius:var(--radius);box-shadow:var(--shadow-sm)}
.card-header{padding:.875rem 1.25rem;border-bottom:1px solid var(--card-bdr);
  display:flex;align-items:center;justify-content:space-between;gap:.75rem}
.card-header h2{font-size:.84rem;font-weight:700;color:var(--t1);
  display:flex;align-items:center;gap:.4rem;margin:0}
.card-header h2 i{color:var(--brand);font-size:.78rem;opacity:.8}
.card-body{padding:1.25rem}
.card-body.p0{padding:0}
.card-footer{padding:.75rem 1.25rem;border-top:1px solid var(--card-bdr);background:var(--bg)}
.mb4{margin-bottom:1.25rem}
.mb3{margin-bottom:1rem}
.card-2col{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem}
.card-3col{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1.25rem}
.card-row{display:flex;gap:1.25rem;flex-wrap:wrap}
.card-row>.card{flex:1;min-width:240px}

/* ── Stat Cards ── */
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem;margin-bottom:1.25rem}
.stat-card{background:var(--card-bg);border:1px solid var(--card-bdr);
  border-radius:var(--radius);padding:1.25rem;box-shadow:var(--shadow-sm)}
.stat-top{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:.65rem}
.stat-lbl{font-size:.71rem;color:var(--t3);font-weight:600;text-transform:uppercase;letter-spacing:.4px}
.stat-ico{width:36px;height:36px;border-radius:var(--radius-sm);
  display:flex;align-items:center;justify-content:center;font-size:.88rem}
/* All icon tints – desaturated, pastel */
.si-blue{background:#dde9f7;color:#2d5e9e}
.si-green{background:#d8f0e5;color:#1e7048}
.si-orange{background:#f7e8d4;color:#8a5520}
.si-red{background:#f3dde0;color:#8a2a35}
.si-purple{background:#e8e1f7;color:#5c3498}
.stat-val{font-size:1.3rem;font-weight:800;color:var(--t1);line-height:1}
.stat-sub{font-size:.71rem;color:var(--t3);margin-top:.22rem}

/* ── Buttons ── */
.btn{display:inline-flex;align-items:center;gap:.4rem;padding:.46rem .88rem;
  border-radius:var(--radius-sm);font-size:.82rem;font-weight:500;cursor:pointer;
  border:1px solid transparent;transition:all var(--tr);white-space:nowrap;line-height:1}
.btn-primary{background:var(--brand);color:#fff;border-color:var(--brand)}
.btn-primary:hover{background:var(--brand-dark)}
.btn-danger{background:var(--danger);color:#fff;border-color:var(--danger)}
.btn-danger:hover{background:#8f2d39}
.btn-success{background:var(--success);color:#fff}
.btn-success:hover{background:#1f6040}
.btn-warning{background:var(--warning);color:#fff}
.btn-warning:hover{background:#9a6020}
.btn-outline{background:var(--card-bg);color:var(--brand);border-color:var(--card-bdr)}
.btn-outline:hover{border-color:var(--brand-mid);background:var(--brand-light)}
.btn-ghost{background:transparent;color:var(--t2);border-color:var(--card-bdr)}
.btn-ghost:hover{background:var(--bg)}
.btn-sm{padding:.3rem .68rem;font-size:.77rem}
.btn-xs{padding:.2rem .46rem;font-size:.71rem}
.btn-lg{padding:.58rem 1.35rem;font-size:.9rem}

/* ── Forms ── */
.form-grid{display:grid;gap:1rem}
.fg2{grid-template-columns:repeat(2,1fr)}
.fg3{grid-template-columns:repeat(3,1fr)}
.fg4{grid-template-columns:repeat(4,1fr)}
.col-full{grid-column:1/-1}
.form-group{display:flex;flex-direction:column;gap:.3rem}
.form-group label,.form-label{font-size:.73rem;font-weight:600;color:var(--t2);
  text-transform:uppercase;letter-spacing:.4px;margin-bottom:.1rem;display:block}
.form-group input,.form-group select,.form-group textarea,
.form-control{padding:.5rem .72rem;border:1px solid var(--card-bdr);border-radius:var(--radius-sm);
  background:#eef3f9;color:var(--t1);width:100%;transition:border-color var(--tr),box-shadow var(--tr),background var(--tr)}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus,
.form-control:focus{outline:none;border-color:var(--brand-mid);background:#f2f6fc;
  box-shadow:0 0 0 3px rgba(91,130,194,.14)}
.form-group input[readonly]{background:#e8edf3;color:var(--t3)}
select.form-control{cursor:pointer}
.form-hint{font-size:.71rem;color:var(--t3);margin-top:.14rem}
.required,.req{color:var(--danger);margin-left:1px;font-weight:600}
.form-actions{display:flex;gap:.75rem;flex-wrap:wrap;margin-top:1.5rem;
  padding-top:1.25rem;border-top:1px solid var(--card-bdr)}
.inline-row{display:flex;gap:.5rem;align-items:flex-end}
.filter-bar{display:flex;flex-wrap:wrap;gap:.75rem;align-items:flex-end}
.align-end{display:flex;align-items:flex-end;gap:.5rem}
.form-group.align-end{justify-content:flex-end}

/* ── Data Table ── */
.tbl-wrap{overflow-x:auto}
.data-tbl{width:100%;border-collapse:collapse;font-size:.82rem}
.data-tbl thead th{background:#e6ecf3;border-bottom:2px solid var(--card-bdr);
  padding:.65rem .88rem;text-align:left;font-size:.69rem;font-weight:700;
  color:var(--t2);text-transform:uppercase;letter-spacing:.5px;white-space:nowrap;
  position:sticky;top:0;z-index:1}
.data-tbl thead th.r{text-align:right}
.data-tbl tbody td{padding:.6rem .88rem;border-bottom:1px solid #dde4ec;vertical-align:middle;
  color:var(--t1)}
.data-tbl tbody tr:last-child td{border-bottom:none}
/* Alternating rows – gentle banding */
.data-tbl tbody tr:nth-child(even) td{background:#edf1f7}
.data-tbl tbody tr:hover td{background:#e4ecf6 !important}
.data-tbl tfoot td{padding:.62rem .88rem;border-top:2px solid var(--card-bdr);
  background:#e6ecf3;font-weight:700;color:var(--t1)}
.data-tbl td.r,.data-tbl tfoot td.r{text-align:right;font-feature-settings:"tnum"}
.data-tbl td.pname{font-weight:600;color:var(--t1)}
.data-tbl .row-num{color:var(--t3);font-size:.71rem;width:28px;text-align:center}
.data-tbl input,.data-tbl select{padding:.3rem .48rem;border:1px solid var(--card-bdr);
  border-radius:4px;font-size:.79rem;width:100%;background:#eef3f9}
tfoot .tot{font-weight:700;color:var(--t1)}

/* ── Badges ── (low chroma, easy on eyes) */
.badge{display:inline-flex;align-items:center;padding:.17rem .58rem;
  border-radius:20px;font-size:.68rem;font-weight:700;white-space:nowrap}
.badge-p100{background:#d4eedd;color:#1a5e38}
.badge-pclosed{background:#d4e4f5;color:#184478}
.badge-ppending{background:#f5ead0;color:#6d4010}
.badge-plost{background:#f5d8dc;color:#701824}
.badge-active{background:#d4eedd;color:#1a5e38}
.badge-disabled{background:#e4e9ef;color:var(--t3)}
.badge-admin{background:#f0e2c0;color:#614010}
.badge-editor{background:#d4e4f5;color:#184478}
.badge-viewer{background:#d4eedd;color:#1a5e38}
.badge-you{background:#d8eaf6;color:#1a4e78}
.badge-danger{background:#f5d8dc;color:#701824}
.badge-muted{background:#e4e9ef;color:var(--t3)}

/* ── Alerts ── */
.alert{display:flex;align-items:flex-start;gap:.65rem;padding:.8rem 1rem;
  border-radius:var(--radius);border-left:4px solid;font-size:.83rem;margin-bottom:1.25rem}
.alert i{margin-top:.12rem;flex-shrink:0}
.alert-success{background:#e4f4ec;color:#1a4a2c;border-color:var(--success)}
.alert-error{background:#f4e0e3;color:#5c1824;border-color:var(--danger)}
.alert-warning{background:#f5ead0;color:#5c3208;border-color:var(--warning)}
.alert-info{background:#dce9f7;color:#1a3860;border-color:var(--brand)}
.alert ul{padding-left:1rem;list-style:disc;margin-top:.25rem}

/* ── Utils ── */
.divider{border:none;border-top:1px solid var(--card-bdr);margin:1rem 0}
.hidden{display:none!important}
.t-right{text-align:right}
.t-center{text-align:center}
.c-danger{color:var(--danger)}
.c-success{color:var(--success)}
.c-muted{color:var(--t3)}
.text-muted{color:var(--t3)}
.fw6{font-weight:600}
.fw7{font-weight:700}
.mt2{margin-top:.5rem}
.mt3{margin-top:1rem}
.fs-sm{font-size:.77rem}
.gap-row{display:flex;gap:.4rem;flex-wrap:wrap;align-items:center}

/* ── Auth split-panel ── */
.auth-wrap{min-height:100vh;display:flex;background:var(--bg)}
.auth-left{width:400px;background:var(--sb-bg);display:flex;flex-direction:column;
  justify-content:center;align-items:flex-start;padding:3rem 2.5rem;flex-shrink:0}
.al-brand{display:flex;align-items:center;gap:.75rem;margin-bottom:2.5rem}
.al-icon{width:42px;height:42px;background:var(--brand);border-radius:10px;
  display:flex;align-items:center;justify-content:center;font-weight:900;font-size:1rem;color:#fff}
.al-name{font-size:1.35rem;font-weight:800;color:#d8e8f5}
.al-name span{display:block;font-size:.73rem;font-weight:400;color:var(--sb-text)}
.auth-tagline{color:#5a7898;font-size:.875rem;line-height:1.85;max-width:300px}
.auth-tagline strong{color:var(--sb-text)}
.auth-right{flex:1;display:flex;align-items:center;justify-content:center;padding:2rem}
.auth-box{background:var(--card-bg);border:1px solid var(--card-bdr);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);width:100%;max-width:420px;padding:2.4rem}
.auth-box h2{font-size:1.25rem;font-weight:800;color:var(--t1);margin-bottom:.2rem}
.auth-sub{font-size:.81rem;color:var(--t3);margin-bottom:1.9rem}
.auth-box .form-group{margin-bottom:1.1rem}
.auth-box label{display:block;font-size:.75rem;font-weight:600;color:var(--t2);
  text-transform:uppercase;letter-spacing:.4px;margin-bottom:.3rem}
.auth-box input,.auth-box select{width:100%;padding:.62rem .88rem;border:1px solid var(--card-bdr);
  border-radius:var(--radius-sm);font-size:.88rem;background:#eef3f9;color:var(--t1);
  transition:border-color var(--tr),box-shadow var(--tr)}
.auth-box input:focus,.auth-box select:focus{outline:none;border-color:var(--brand-mid);
  box-shadow:0 0 0 3px rgba(91,130,194,.14)}
.auth-btn{width:100%;padding:.68rem 1rem;background:var(--brand);color:#fff;border:none;
  border-radius:var(--radius-sm);font-size:.88rem;font-weight:600;cursor:pointer;
  transition:background var(--tr);display:flex;align-items:center;justify-content:center;
  gap:.4rem;margin-top:.25rem}
.auth-btn:hover{background:var(--brand-dark)}
.auth-footer{text-align:center;margin-top:1.2rem;font-size:.81rem;color:var(--t3)}

/* ── Dashboard: summary & charts ── */
.summary-tbl{width:100%;font-size:.82rem;border-collapse:collapse}
.summary-tbl td{padding:.44rem .5rem;border-bottom:1px solid var(--card-bdr)}
.summary-tbl tr:last-child td{border-bottom:none}
.summary-tbl td:first-child{color:var(--t2)}
.summary-tbl td:last-child{text-align:right;font-weight:600;color:var(--t1)}
.chart-wrap{position:relative;height:250px}

/* ── Record/Update: calc panel ── */
.calc-panel{background:#e8eef6;border:1px solid var(--card-bdr);border-radius:var(--radius);
  padding:1rem 1.25rem;margin-top:.75rem;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:.5rem}
.calc-row{display:flex;justify-content:space-between;align-items:center;gap:.5rem;font-size:.82rem}
.calc-row span{color:var(--t2)}

/* ── Users ── */
.user-actions{display:flex;gap:.3rem;flex-wrap:wrap}
.row-disabled{opacity:.5}

/* ── Inactivity warning ── */
#inactivity-warning{position:fixed;bottom:1.5rem;right:1.5rem;background:var(--sb-bg);
  border:1px solid var(--warning);color:#cddcec;border-radius:var(--radius);
  padding:1rem 1.25rem;z-index:9999;box-shadow:var(--shadow-lg);
  font-size:.83rem;max-width:300px;display:none}
#inactivity-warning .wt{font-weight:700;color:var(--warning);margin-bottom:.2rem}
#inactivity-warning .wb{display:flex;gap:.5rem;margin-top:.75rem}

/* ── Responsive ── */
@media(max-width:1200px){.stat-grid{grid-template-columns:repeat(2,1fr)}.card-3col{grid-template-columns:1fr 1fr}}
@media(max-width:820px){.auth-left{display:none}.fg2,.fg3,.fg4{grid-template-columns:1fr}.page-wrap{padding:1rem}.stat-grid{grid-template-columns:1fr 1fr}.card-2col{grid-template-columns:1fr}}
@media print{.sidebar,.topbar,.btn,#inactivity-warning{display:none!important}.main-content{margin-left:0}.page-wrap{padding:0}.card{box-shadow:none;border:1px solid #ccc}}