:root {
    --navy:   #000D38;
    --blue:   #0060DB;
    --lblue:  #EBF4FF;
    --pink:   #E60062;
    --grey:   #F3F3F3;
    --dblue:  #0047A2;
    --sblue:  #C0DBFE;
    --green:  #008A27;
    --amber:  #FBC828;
    --red:    #C9372C;
    --dpink:  #B2004C;
    --white:  #FFFFFF;
    --text:   #1a1a2e;
    --muted:  #666;
    --border: rgba(0,13,56,0.1);
  }
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; }
  body {
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    color: var(--text);
    background: #f5f7fc;
    line-height: 1.5;
  }

  /* ── TOP NAV ── */
  .topnav {
    background: var(--navy);
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 100;
    height: 52px;
    box-shadow: 0 2px 8px rgba(0,0,0,.25);
  }
  .topnav-brand {
    font-family: 'Quicksand', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.3px;
  }
  .topnav-brand span { color: var(--sblue); }
  .topnav-nav { display: flex; gap: 4px; }
  .topnav-nav a {
    font-size: 11px;
    font-weight: 500;
    color: rgba(255,255,255,.65);
    text-decoration: none;
    padding: 5px 10px;
    border-radius: 5px;
    transition: background .15s, color .15s;
    white-space: nowrap;
  }
  .topnav-nav a:hover { background: rgba(255,255,255,.12); color: #fff; }
  .topnav-meta { font-size: 11px; color: var(--sblue); }

  /* ── PAGE WRAPPER ── */
  .page { max-width: 1180px; margin: 0 auto; padding: 20px 20px 60px; }

  /* ── SECTION HEADERS ── */
  .sec-hdr {
    background: var(--navy);
    border-radius: 10px;
    padding: 14px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
  }
  .sec-hdr-title {
    font-family: 'Quicksand', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
  }
  .sec-hdr-sub { font-size: 11px; color: var(--sblue); margin-top: 2px; }
  .sec-hdr-right { text-align: right; }
  .sec-hdr-right .big { font-size: 20px; font-weight: 500; color: #fff; }
  .sec-hdr-right .small { font-size: 11px; color: var(--sblue); }
  .sec-label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--blue);
    padding-bottom: 6px;
    border-bottom: 1px solid var(--sblue);
    margin: 24px 0 12px;
  }

  /* ── METRIC CARDS ── */
  .g4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; margin-bottom: 18px; }
  .g2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 18px; }
  .g3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
  @media(max-width:900px) { .g4{grid-template-columns:repeat(2,1fr);} .g2{grid-template-columns:1fr;} }
  @media(max-width:600px) { .g4{grid-template-columns:1fr;} .g3{grid-template-columns:1fr;} }
  .g5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-bottom: 18px; }
  @media(max-width:900px) { .g5 { grid-template-columns: repeat(3, 1fr); } }
  @media(max-width:600px) { .g5 { grid-template-columns: 1fr; } }

  .mc { border-radius: 8px; padding: 12px 14px; background: var(--lblue); }
  .mc-good { background: #e8f5e9; }
  .mc-warn { background: #fff8e1; }
  .mc-gap  { background: #fde8e8; }
  .mc-l { font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: .05em; color: var(--dblue); margin-bottom: 4px; }
  .mc-l-good { color: #2e7d32; }
  .mc-l-warn { color: #856404; }
  .mc-l-gap  { color: #8b1a1a; }
  .mc-v { font-family: 'Quicksand', sans-serif; font-size: 22px; font-weight: 600; color: var(--navy); line-height: 1.1; }
  .mc-v-good { color: #1b5e20; }
  .mc-v-warn { color: #5d4037; }
  .mc-v-gap  { color: #b71c1c; }
  .mc-s { font-size: 11px; color: var(--muted); margin-top: 3px; }

  /* ── CARDS ── */
  .card { background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; }

  /* ── BADGES ── */
  .bp { background:#d4edda; color:#1a6b30; font-size:10px; padding:2px 7px; border-radius:4px; font-weight:500; display:inline-block; white-space:nowrap; }
  .bn { background:#fde8e8; color:#8b1a1a; font-size:10px; padding:2px 7px; border-radius:4px; font-weight:500; display:inline-block; white-space:nowrap; }
  .bw { background:#fff3cd; color:#856404; font-size:10px; padding:2px 7px; border-radius:4px; font-weight:500; display:inline-block; white-space:nowrap; }
  .bg { background:#f0f0f0; color:#555; font-size:10px; padding:2px 7px; border-radius:4px; font-weight:500; display:inline-block; white-space:nowrap; }

  /* ── TABLES ── */
  .tbl-wrap { overflow-x: auto; }
  table { width: 100%; border-collapse: collapse; font-size: 12px; }
  th { padding: 6px 8px; font-size: 10px; font-weight: 500; color: var(--muted); border-bottom: 1px solid #e0e0e0; text-align: right; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
  th.l { text-align: left; }
  td { padding: 5px 8px; border-bottom: 1px solid #f5f5f5; text-align: right; vertical-align: middle; }
  td.l { text-align: left; }
  td.bold { font-weight: 500; }
  tr:hover td { background: #f7faff; }
  tr:last-child td { border-bottom: none; }
  tr.subtotal td { background: var(--lblue); font-weight: 500; color: var(--navy); }
  tr.total-row td { background: var(--navy); color: #fff; font-weight: 500; }
  tr.gap-pos td { background: #d4edda; color: #1a6b30; font-weight: 500; }
  tr.gap-neg td { background: #fde8e8; color: #8b1a1a; font-weight: 500; }

  /* ── BARS ── */
  .bt { background: #e8f0fe; border-radius: 3px; height: 5px; overflow: hidden; margin-top: 3px; }
  .bf { height: 5px; border-radius: 3px; }

  /* ── PILLS ── */
  .pill-c { background:var(--lblue); color:var(--dblue); font-size:10px; padding:1px 6px; border-radius:4px; font-weight:500; }
  .pill-a { background:#FFE5F1; color:var(--dpink); font-size:10px; padding:1px 6px; border-radius:4px; font-weight:500; }
  .pill-tm { background:#f3e5f5; color:#6a1b9a; font-size:10px; padding:1px 6px; border-radius:4px; font-weight:500; }
  .pill-fix { background:#fff3cd; color:#856404; font-size:9px; padding:1px 5px; border-radius:3px; font-weight:500; margin-left:4px; }

  /* ── CHART CONTAINERS ── */
  .chart-wrap { position: relative; width: 100%; }
  .legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 11px; color: var(--muted); margin-bottom: 8px; }
  .ld { width: 9px; height: 9px; border-radius: 2px; display: inline-block; margin-right: 3px; vertical-align: middle; }

  /* ── SOURCE NOTE ── */
  .src { font-size: 10px; color: var(--muted); font-style: italic; margin-top: 6px; }

  /* ── DIVIDER ── */
  .div { border: none; border-top: 1px solid #e8edf5; margin: 20px 0; }

  /* ── PLANNING BOARD ── */
  .planning-note { background: var(--lblue); border: 1px solid var(--sblue); border-radius: 7px; padding: 10px 14px; font-size: 12px; margin-bottom: 14px; }
  .planning-note strong { color: var(--navy); }
  .month-settings { display: flex; gap: 20px; margin-bottom: 16px; flex-wrap: wrap; align-items: center; }
  .setting-item { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }
  .setting-item input { font-size: 12px; font-family: 'DM Sans', sans-serif; background: #fff; border: 1px solid var(--sblue); border-radius: 5px; padding: 3px 7px; width: 75px; color: var(--text); }
  .tbl-input { font-size: 12px; font-family: 'DM Sans', sans-serif; background: #f8faff; border: 1px solid #d4e3f8; border-radius: 4px; padding: 2px 5px; width: 100%; text-align: right; color: var(--text); }
  .tbl-input.l { text-align: left; }
  select.tbl-input { text-align: left; }
  .add-btn { font-size: 11px; padding: 5px 12px; border-radius: 5px; cursor: pointer; background: transparent; border: 1px solid var(--blue); color: var(--blue); font-family: 'DM Sans', sans-serif; margin-top: 8px; transition: background .15s; }
  .add-btn:hover { background: var(--lblue); }
  .del-btn { font-size: 10px; padding: 1px 5px; border-radius: 3px; cursor: pointer; background: transparent; border: 1px solid var(--red); color: var(--red); font-family: 'DM Sans', sans-serif; }
  .gap-note { background: #fff8e1; border: 1px solid var(--amber); border-radius: 7px; padding: 10px 14px; font-size: 12px; margin-top: 12px; line-height: 1.6; }

  /* ── SECTION SPACER ── */
  .section-block { margin-bottom: 32px; }

  /* ── SEARCH ── */
  .table-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
  .tbl-qh2 { font-family: 'Quicksand', sans-serif; font-size: 14px; font-weight: 600; color: var(--navy); }
  .search-input { font-size: 11px; padding: 4px 10px; border-radius: 5px; border: 1px solid var(--sblue); background: #fff; width: 160px; font-family: 'DM Sans', sans-serif; color: var(--text); }

  /* ---- LOGIN PAGE ---- */
  .login-page {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #f5f7fc;
  }
  .login-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 40px;
    text-align: center;
    max-width: 380px;
    width: 100%;
    box-shadow: 0 4px 24px rgba(0, 13, 56, 0.08);
    overflow: hidden;
  }
  .login-card h1 {
    font-family: 'Quicksand', sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: var(--navy);
    margin-bottom: 8px;
  }
  .login-card p {
    font-size: 13px;
    color: var(--muted);
    margin-bottom: 24px;
  }
  .login-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 24px;
    background: var(--navy);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s;
  }
  .login-btn:hover { background: var(--dblue); }
  .login-btn svg { width: 18px; height: 18px; }
  .login-error {
    background: #fde8e8;
    color: #8b1a1a;
    font-size: 12px;
    padding: 8px 12px;
    border-radius: 6px;
    margin-bottom: 16px;
  }
  .login-brand {
    background: var(--navy);
    margin: -40px -40px 28px;
    padding: 28px 40px;
    border-radius: 11px 11px 0 0;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  /* ---- DASHBOARD EMPTY STATE ---- */
  .dashboard-welcome {
    text-align: center;
    padding: 60px 20px;
  }
  .dashboard-welcome h2 {
    font-family: 'Quicksand', sans-serif;
    font-size: 20px;
    font-weight: 600;
    color: var(--navy);
    margin-bottom: 8px;
  }
  .dashboard-welcome p {
    font-size: 13px;
    color: var(--muted);
  }

  /* ---- USER MENU (nav right side) ---- */
  .topnav-user {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .topnav-user img {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid var(--sblue);
  }
  .topnav-user span {
    font-size: 11px;
    color: var(--sblue);
  }
  .topnav-logout {
    font-size: 10px;
    color: rgba(255,255,255,.5);
    text-decoration: none;
    margin-left: 4px;
  }
  .topnav-logout:hover { color: #fff; }

  /* -- ADMIN TABS (Phase 2) -- */
  .admin-tabs {
    display: flex;
    gap: 8px;
    border-bottom: 1px solid var(--sblue);
    margin-bottom: 24px;
  }
  .admin-tabs a {
    font-size: 12px;
    font-weight: 500;
    color: var(--muted);
    padding: 8px 16px;
    text-decoration: none;
    border-bottom: 4px solid transparent;
    transition: background .15s, color .15s, border-color .15s;
  }
  .admin-tabs a:hover { background: var(--lblue); color: var(--navy); }
  .admin-tabs a.active {
    color: var(--navy);
    border-bottom-color: var(--blue);
  }
  .admin-tab-body { padding: 8px 0 24px; }

  /* -- BUTTONS (Phase 2) -- */
  .btn-primary, .btn-secondary, .btn-destructive {
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    font-weight: 500;
    padding: 10px 24px;
    border-radius: 6px;
    cursor: pointer;
    transition: background .15s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
  }
  .btn-primary { background: var(--blue); color: #fff; border: none; }
  .btn-primary:hover { background: var(--dblue); }
  .btn-secondary {
    background: transparent;
    color: var(--blue);
    border: 1px solid var(--blue);
  }
  .btn-secondary:hover { background: var(--lblue); }
  .btn-destructive { background: var(--red); color: #fff; border: none; }
  .btn-destructive:hover { background: #a02520; }

  /* -- UPLOAD DROPZONE -- */
  .upload-dropzone {
    border: 2px dashed var(--sblue);
    border-radius: 10px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: border-color .15s;
  }
  .upload-dropzone:hover { border-color: var(--blue); }
  .upload-dropzone input[type="file"] { display: none; }
  .upload-file-label {
    display: inline-flex; align-items: center; gap: 6px;
    cursor: pointer; font-size: 12px; font-weight: 500;
    color: var(--blue); border: 1px solid var(--sblue);
    background: var(--lblue); border-radius: 5px;
    padding: 5px 12px; transition: background .15s;
  }
  .upload-file-label:hover { background: #d4e8ff; border-color: var(--blue); }
  .upload-file-label svg { width: 14px; height: 14px; flex-shrink: 0; }
  .upload-chosen { font-size: 11px; color: var(--muted); margin-top: 6px; }
  .upload-hint { font-size: 11px; color: var(--muted); margin-top: 4px; }
  .upload-dropzone button:disabled { opacity: 0.4; cursor: not-allowed; }

  /* -- PREVIEW CARD -- */
  .preview-card {
    border-left: 4px solid var(--blue);
    padding: 16px;
    margin: 16px 0;
  }
  .preview-card h3 {
    font-family: 'Quicksand', sans-serif;
    font-size: 14px;
    margin-bottom: 12px;
    color: var(--navy);
  }

  /* -- TOASTS -- */
  .toast {
    padding: 10px 16px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    box-shadow: 0 4px 12px rgba(0,13,56,0.08);
    animation: toastIn .18s ease-out;
  }
  .toast-success { background: #e8f5e9; color: #1b5e20; }
  .toast-error   { background: #fde8e8; color: #8b1a1a; }
  .toast-warn    { background: #fff8e1; color: #856404; }
  @keyframes toastIn {
    from { transform: translateX(16px); opacity: 0; }
    to   { transform: translateX(0);    opacity: 1; }
  }
  @keyframes toastOut {
    from { opacity: 1; max-height: 60px; margin-bottom: 8px; }
    to   { opacity: 0; max-height: 0;    margin-bottom: 0; padding: 0; }
  }
  .toast.toast-hiding {
    animation: toastOut .3s ease-in forwards;
    pointer-events: none;
    overflow: hidden;
  }

  /* -- PREVIEW CARD CLOSE BUTTON -- */
  .preview-close {
    position: absolute; top: 8px; right: 10px;
    background: none; border: none; cursor: pointer;
    font-size: 18px; line-height: 1; color: var(--muted);
    padding: 2px 6px; border-radius: 4px;
  }
  .preview-close:hover { background: var(--grey); color: var(--text); }

  /* -- ICON ACTION BUTTONS -- */
  .icon-btn {
    display: inline-flex; align-items: center; justify-content: center;
    background: none; border: 1px solid transparent; cursor: pointer;
    padding: 4px; border-radius: 5px; transition: background .15s, border-color .15s;
    vertical-align: middle; line-height: 1;
  }
  .icon-btn svg { width: 15px; height: 15px; stroke-width: 2; display: block; }
  .icon-btn-resume   { color: var(--blue); }
  .icon-btn-resume:hover   { background: var(--lblue);  border-color: var(--sblue); }
  .icon-btn-activate { color: var(--green); }
  .icon-btn-activate:hover { background: #e8f5e9; border-color: #a3d9a5; }
  .icon-btn-delete   { color: var(--red); }
  .icon-btn-delete:hover   { background: #fde8e8; border-color: #f5aeae; }
  /* Uploads table: all columns left-aligned, rows column right-aligned */
  .uploads-table th,
  .uploads-table td { text-align: left; vertical-align: middle; }
  .uploads-table .col-rows { text-align: right; }

  /* -- BURNDOWN PILL -- */
  .pill-b {
    background: #E0F7FA;
    color: #006064;
    font-size: 10px;
    padding: 1px 6px;
    border-radius: 4px;
    font-weight: 500;
  }

  /* -- FIXED FEE PILL (Phase 7 -- UI-09) -- */
  .pill-ff {
    background: var(--dpink);
    color: #ffffff;
    font-size: 10px;
    padding: 1px 6px;
    border-radius: 4px;
    font-weight: 500;
  }