:root{
    --bg:#FFFFFF;
    --bg2:#F7F8FA;
    --card:#FFFFFF;
    --card-hi:#F2F2F2;
    --line:#D9D9D9;
    --line-soft:#E8E8E8;
    --txt:#1F1F1F;
    --muted:#6B7280;
    --muted2:#8C8C8C;
    --header-bar:#445973;
    --header-bar-text:#FFFFFF;
    --blue:#0070C0;
    --blue-soft:rgba(0,112,192,.10);
    --gold:#0070C0;
    --gold-soft:rgba(0,112,192,.35);
    --pos:#008000;
    --pos-soft:rgba(0,128,0,.10);
    --neg:#FF0000;
    --neg-soft:rgba(255,0,0,.08);
    --serif: Georgia,"Palatino Linotype","Times New Roman",serif;
    --sans: -apple-system,BlinkMacSystemFont,"Segoe UI",Calibri,Arial,sans-serif;
    --mono: ui-monospace,"SF Mono","Cascadia Mono","Roboto Mono",Menlo,Consolas,monospace;
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;background:var(--bg);color:var(--txt);font-family:var(--sans);}
  body{
    background: var(--bg);
    min-height:100vh;
  }
  .wrap{max-width:1280px;margin:0 auto;padding:28px 28px 80px;}

  /* ---- Header ---- */
  header.top{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;
    border-bottom:3px solid var(--header-bar);padding-bottom:20px;margin-bottom:22px;}
  .brand-eyebrow{font-family:var(--sans);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--blue);margin-bottom:6px;font-weight:700;}
  h1{font-family:var(--serif);font-weight:700;font-size:32px;margin:0;letter-spacing:.2px;color:var(--header-bar);}
  .sub{color:var(--muted);font-size:13.5px;margin-top:6px;}
  .controls{display:flex;gap:10px;align-items:center;flex-wrap:wrap;}
  .company-dropdown{position:relative;}
  .company-dropdown-btn{
    background:var(--card);border:1px solid var(--line);color:var(--txt);
    padding:10px 32px 10px 14px;border-radius:6px;font-family:var(--sans);font-size:13.5px;
    cursor:pointer;min-width:190px;text-align:left;position:relative;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23445973'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-position:right 14px center;
  }
  .company-dropdown-btn:focus{outline:2px solid var(--gold-soft);outline-offset:1px;}
  .company-dropdown-panel{
    position:absolute;top:calc(100% + 4px);left:0;z-index:50;min-width:260px;max-height:320px;overflow-y:auto;
    background:#fff;border:1px solid var(--line);border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.12);
    padding:6px;
  }
  .company-dropdown-item{
    display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:5px;cursor:pointer;
    font-family:var(--sans);font-size:13.5px;color:var(--txt);
  }
  .company-dropdown-item:hover{background:var(--card-hi);}
  .company-dropdown-item input[type=checkbox]{width:15px;height:15px;accent-color:var(--blue);cursor:pointer;flex-shrink:0;}
  .company-dropdown-item-all{font-weight:700;}
  .company-dropdown-sep{height:1px;background:var(--line);margin:4px 2px;}
  select{
    background:var(--card);border:1px solid var(--line);color:var(--txt);
    padding:10px 14px;border-radius:6px;font-family:var(--sans);font-size:13.5px;
    appearance:none;-webkit-appearance:none;cursor:pointer;min-width:190px;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23445973'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-position:right 14px center;padding-right:32px;
  }
  select:focus{outline:2px solid var(--gold-soft);outline-offset:1px;}
  label.ctl-label{font-size:11px;color:var(--muted2);text-transform:uppercase;letter-spacing:.08em;margin-right:6px;font-family:var(--sans);font-weight:600;}

  /* ---- Tabs ---- */
  .sticky-head{
    position:sticky; top:0; z-index:80; background:var(--bg);
    margin:0 -28px; padding:0 28px; box-shadow:0 2px 0 rgba(0,0,0,0);
    transition:box-shadow .15s ease;
  }
  .sticky-head.is-stuck{box-shadow:0 4px 10px rgba(0,0,0,.08);}
  .sticky-head header.top{padding-top:20px;}
  nav.tabs{display:flex;gap:4px;margin-bottom:26px;border-bottom:1px solid var(--line);flex-wrap:wrap;}
  nav.tabs button{
    background:none;border:none;color:var(--muted);font-family:var(--sans);font-size:14px;
    padding:12px 18px;cursor:pointer;position:relative;top:1px;border-bottom:2px solid transparent;
    transition:color .15s ease;
  }
  nav.tabs button:hover{color:var(--header-bar);}
  nav.tabs button.active{color:var(--blue);border-bottom-color:var(--blue);font-weight:700;}

  .view{display:none;}
  .view.active{display:block;animation:fade .25s ease;}
  @keyframes fade{from{opacity:0;transform:translateY(4px);}to{opacity:1;transform:translateY(0);}}

  /* ---- Cards / KPIs ---- */
  .kpi-row{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:22px;}
  @media(max-width:900px){.kpi-row{grid-template-columns:repeat(2,1fr);}}
  .kpi{
    background:var(--card);
    border:1px solid var(--line);border-radius:8px;padding:16px 18px;
    box-shadow:0 1px 2px rgba(0,0,0,.04);
  }
  .kpi .lbl{font-family:var(--sans);font-size:10.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted2);margin-bottom:8px;font-weight:700;}
  .kpi .val{font-family:var(--serif);font-size:24px;color:var(--blue);font-weight:700;}
  .kpi .delta{font-family:var(--sans);font-size:12px;margin-top:6px;font-weight:600;}
  .delta.pos{color:var(--pos);} .delta.neg{color:var(--neg);}

  /* Collapsible cards in Enter Data and Budget — keeps long tabs manageable */
  #view-entry section.card > h2, #view-budget section.card > h2{
    cursor:pointer; display:flex; align-items:center; justify-content:space-between; user-select:none;
  }
  #view-entry section.card > h2:hover, #view-budget section.card > h2:hover{ opacity:.75; }
  .card-toggle-arrow{
    font-size:13px; color:var(--muted2); transition:transform .15s ease; flex-shrink:0; margin-left:10px;
  }
  #view-entry section.card.collapsed > h2 .card-toggle-arrow, #view-budget section.card.collapsed > h2 .card-toggle-arrow{ transform:rotate(-90deg); }
  #view-entry section.card.collapsed > *:not(h2), #view-budget section.card.collapsed > *:not(h2){ display:none !important; }

  section.card{
    background:var(--card);border:1px solid var(--line);border-radius:8px;
    padding:20px 22px;margin-bottom:20px;box-shadow:0 1px 2px rgba(0,0,0,.04);
  }
  section.card h2{font-family:var(--serif);font-weight:700;font-size:17px;margin:0 0 4px;color:var(--header-bar);}
  .commentary-heading{font-family:var(--serif);font-weight:700;font-size:15.5px;color:var(--header-bar);margin:16px 0 4px;}
  .commentary-heading:first-child{margin-top:0;}
  section.card .desc{color:var(--muted);font-size:12.5px;margin-bottom:16px;}
  .grid2{display:grid;grid-template-columns:1.3fr 1fr;gap:18px;}
  @media(max-width:960px){.grid2{grid-template-columns:1fr;}}

  .chart-box{position:relative;height:320px;}
  .chart-box.short{height:230px;}

  table{width:100%;border-collapse:collapse;font-size:13px;}
  th{text-align:right;font-family:var(--sans);font-size:11px;text-transform:uppercase;letter-spacing:.04em;
     color:var(--header-bar-text);background:var(--header-bar);padding:9px 10px;font-weight:700;
     position:sticky;top:0;z-index:5;}
  #printReportContainer th{position:static;}
  th:first-child,td:first-child{text-align:left;}
  td{padding:9px 10px;border-bottom:1px solid var(--line-soft);font-family:var(--sans);text-align:right;color:var(--blue);font-weight:600;}
  td:first-child{font-family:var(--sans);color:var(--txt);font-weight:600;}
  tbody tr:nth-child(even) td{background:var(--card-hi);}
  tr:hover td{background:var(--blue-soft) !important;}
  tr.total td{border-top:2px solid var(--header-bar);font-weight:700;color:var(--header-bar);}
  .pos{color:var(--pos) !important;} .neg{color:var(--neg) !important;}
  .cell-bg-pos{background:var(--pos-soft) !important;}
  .cell-bg-neg{background:var(--neg-soft) !important;}
  .pill{display:inline-block;padding:2px 8px;border-radius:20px;font-family:var(--sans);font-size:11px;font-weight:700;}
  .pill.pos{background:var(--pos-soft);color:var(--pos);} .pill.neg{background:var(--neg-soft);color:var(--neg);}

  .foot-note{color:var(--muted2);font-size:11.5px;margin-top:6px;font-family:var(--sans);}
  .scroll-x{overflow-x:auto;overflow-y:auto;max-height:560px;}
  .badge-src{font-family:var(--sans);font-size:10px;color:var(--muted2);border:1px solid var(--line);
     padding:2px 7px;border-radius:20px;margin-left:8px;vertical-align:middle;}
  .empty-note{color:var(--muted);font-size:13px;padding:30px 0;text-align:center;font-family:var(--serif);font-style:italic;}
  .line-item-del{background:none;border:none;color:var(--neg);cursor:pointer;font-size:13px;padding:0 3px;vertical-align:middle;}
  .line-item-del:hover{text-decoration:underline;}

  /* ---- Data entry ---- */
  .entry-toolbar{display:flex;gap:16px;align-items:flex-end;flex-wrap:wrap;margin-bottom:18px;}
  #entryCompanySelect, #budgetCompanySelect{min-width:220px;}
  .company-block{margin-bottom:28px;}
  .company-block:last-child{margin-bottom:0;}
  .company-block h3{font-family:var(--serif);font-size:15px;color:var(--header-bar);margin:0 0 8px;
    padding-bottom:6px;border-bottom:1px solid var(--line);}
  .entry-toolbar .field{display:flex;flex-direction:column;gap:4px;}
  .entry-toolbar input[type=number]{
    background:var(--card);border:1px solid var(--line);color:var(--txt);border-radius:6px;
    padding:9px 10px;font-family:var(--sans);font-size:13.5px;width:120px;
  }
  .btn{
    background:var(--blue);color:#fff;border:none;border-radius:6px;padding:10px 18px;
    font-family:var(--sans);font-size:13.5px;font-weight:700;cursor:pointer;
  }
  .btn:hover{background:#005A9E;}
  .btn.secondary{background:#fff;color:var(--header-bar);border:1px solid var(--header-bar);}
  .btn.secondary:hover{background:var(--card-hi);}
  .btn.danger{background:#fff;color:var(--neg);border:1px solid var(--neg);}
  .btn.danger:hover{background:var(--neg-soft);}
  table.entry-table input[type=text]{
    width:100%;min-width:88px;border:1px solid transparent;background:transparent;
    color:var(--blue);font-family:var(--sans);font-weight:600;text-align:right;padding:5px 6px;border-radius:4px;
  }
  table.entry-table input[type=text]:focus{border-color:var(--blue);background:#fff;outline:none;}
  table.entry-table tr.group-row td{background:var(--header-bar);color:#fff;font-weight:700;padding:7px 10px;position:sticky;top:32px;z-index:4;}
  #printReportContainer table.entry-table tr.group-row td{position:static;}
  table.entry-table tr.total-row td{background:var(--card-hi);font-weight:700;border-top:2px solid var(--header-bar);color:var(--header-bar);}
  table.entry-table td.ytd-cell{color:var(--header-bar);font-weight:700;background:#F0F4F8;}
  .saved-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;}
  .saved-chip{
    display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:20px;
    padding:5px 6px 5px 12px;font-size:12.5px;font-family:var(--sans);background:var(--card-hi);
  }
  .saved-chip button{background:none;border:none;color:var(--muted2);cursor:pointer;font-size:14px;line-height:1;padding:2px 6px;}
  .saved-chip button:hover{color:var(--neg);}
  .status-msg{font-size:12.5px;font-family:var(--sans);margin-top:10px;min-height:16px;}
  .status-msg.ok{color:var(--pos);} .status-msg.err{color:var(--neg);}

  #printReportContainer{display:none;}
  .print-report-title{font-family:var(--serif);font-size:15px;color:var(--header-bar);margin:0 0 8px;border-bottom:2px solid var(--header-bar);padding-bottom:5px;}
  @media print{
    html, body{ -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; color-adjust: exact !important; }
    body > #loginGate, body > #forcePasswordChangeGate, body > .wrap{ display:none !important; }
    #printReportContainer{ display:block !important; font-size:9.5px; -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
    #printReportContainer *{ -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; color-adjust: exact !important; }
    #printReportContainer .print-page-break{ page-break-before: always; }
    #printReportContainer nav.tabs, #printReportContainer header.top, #printReportContainer .sticky-head{ display:none !important; }

    /* compact everything so each dashboard has the best chance of fitting on its own page(s) */
    #printReportContainer section.card{ padding:8px 10px; margin-bottom:8px; box-shadow:none !important; border:1px solid #ccc !important; }
    #printReportContainer section.card h2{ font-size:12px; margin-bottom:2px; break-after:avoid-page; page-break-after:avoid; }
    #printReportContainer .commentary-heading{ font-size:11px; break-after:avoid-page; page-break-after:avoid; }
    #printReportContainer section.card .desc{ font-size:9px; margin-bottom:6px; break-after:avoid-page; page-break-after:avoid; }
    #printReportContainer .foot-note{ display:none !important; }
    #printReportContainer .kpi-row{ grid-template-columns:repeat(6,1fr) !important; gap:6px; margin-bottom:8px; break-inside:avoid-page; page-break-inside:avoid; }
    #printReportContainer .kpi{ padding:6px 8px; }
    #printReportContainer .kpi .lbl{ font-size:7.5px; margin-bottom:3px; }
    #printReportContainer .kpi .val{ font-size:13px; }
    #printReportContainer .kpi .delta{ font-size:7.5px; margin-top:2px; }
    /* table-layout:fixed + width:100% guarantees every table fits within the page's width — no columns clipped
       off the right edge — text wraps inside narrow cells instead. A card as a whole is kept off a page break
       where it reasonably can be (smaller tables); very tall tables are allowed to continue onto a further page
       rather than force blank space, but repeat their header row so the continuation is still readable. */
    #printReportContainer .scroll-x{ overflow:visible !important; max-height:none !important; }
    #printReportContainer table{ font-size:7px; table-layout:fixed !important; width:100% !important; break-inside:avoid-page; page-break-inside:avoid; }
    #printReportContainer table thead{ display:table-header-group; }
    #printReportContainer table th, #printReportContainer table td{ padding:1.5px 2.5px !important; line-height:1.15; font-size:7px !important; white-space:nowrap; }
    #printReportContainer .pill{ font-size:7px !important; padding:1px 4px !important; }
    #printReportContainer table th:first-child, #printReportContainer table td:first-child{ width:12% !important; overflow-wrap:break-word; word-break:break-word; white-space:normal; }
    /* This table has ~20 columns — headers use the shortened labels from shortenWideTableHeadersForPrint and
       are allowed to wrap onto a couple of lines, kept as plain horizontal text (no rotation/transform, which
       risks a table failing to render in some print engines). */
    #printReportContainer #ov-analysis-table thead th{ white-space:normal; overflow-wrap:break-word; word-break:break-word; text-align:center !important; }
    #printReportContainer #ov-analysis-table thead th:first-child{ text-align:left !important; width:11% !important; }
    #printReportContainer .chart-box{ height:170px; overflow:hidden; break-inside:avoid-page; page-break-inside:avoid; }
    #printReportContainer tr{ break-inside:avoid-page; page-break-inside:avoid; }
    #printReportContainer .kpi{ break-inside:avoid-page; page-break-inside:avoid; }
    #printReportContainer .grid2{ grid-template-columns:1fr 1fr !important; }

    @page{ size: landscape; margin: 8mm; }
  }