/* TSH 2.0 shared theme — extracted from the original harvesting dashboards.
   Ported verbatim so existing dashboard markup/JS keeps working unmodified;
   new pages (login, management dashboard, chatbot) build on this too. */
:root{
  /* TSH Resources Berhad Green Theme */
  --tsh-green:#006B3F; --tsh-green-d:#004D2D;
  --navy:var(--tsh-green); --navy-d:var(--tsh-green-d);

  --orange:#C0560A; --teal:#0E7C66; --gold:#BF8F00;
  --red:#D32F2F; --purple:#7B1FA2; --blue:#1976D2; --brown:#795548; --dark:#37474F;

  --bg:#F4F6F8; --card:#FFFFFF; --ink:#1B2630; --ink-soft:#5B6B79; --line:#E3E8EC;
  --warn-bg:#FFF4DE; --warn-line:#F0CE7A; --err:#B3261E; --ok:#0E7C66;
}
*{box-sizing:border-box;}
body{margin:0;font-family:Arial,"Helvetica Neue",Helvetica,sans-serif;background:var(--bg);color:var(--ink);}
.wrap{max-width:1300px;margin:0 auto;padding:0 24px 60px;}

/* ── Global UI scale ───────────────────────────────────────────────────────
   Every TSH 2.0 page renders at 80% so a full dashboard fits on screen at the
   browser's default zoom — users were manually zooming to 80% to see it all,
   so that is now the built-in default.

   `zoom` (not transform:scale) is used so layout still reflows normally and
   fixed/sticky positioning keeps working. Because zoom also scales viewport
   units, anything sized to fill the screen must be divided by the same factor
   — hence the 125vh (100 / 0.8) heights below, which render as exactly one
   full viewport.

   Desktop only: below the 900px drawer breakpoint the shrink would make text
   too small on phones, and media queries resolve against the real viewport
   (zoom does not affect them), so the two breakpoints stay in step.

   The matching full-height compensation for the shell lives in shell.css,
   which owns those classes and loads after this file. */
@media (min-width:901px){
  html{zoom:0.8;}
}

header.top{background:linear-gradient(135deg,var(--navy) 0%,var(--navy-d) 100%);color:#fff;padding:28px 0;margin-bottom:0;}
header.top .wrap{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:10px;}
header.top h1{margin:0 0 6px;font-size:26px;letter-spacing:.2px;}
header.top .sub{font-size:14px;opacity:.92;}
header.top .meta{font-size:12.5px;opacity:.8;text-align:right;}

.section-title{font-size:15px;font-weight:bold;color:var(--navy);text-transform:uppercase;letter-spacing:.6px;margin:38px 0 14px;display:flex;align-items:center;gap:10px;}
.section-title .line{flex:1;height:1px;background:var(--line);}

.toolbar{background:#fff;border-bottom:1px solid var(--line);padding:12px 0;position:sticky;top:0;z-index:50;box-shadow:0 1px 3px rgba(20,30,40,.06);}
.toolbar .wrap{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.btn{font-family:inherit;font-size:13px;font-weight:bold;padding:9px 16px;border-radius:7px;border:1px solid var(--line);background:#fff;color:var(--navy);cursor:pointer;white-space:nowrap;}
.btn:hover{background:#F0F3F6;}
.btn.primary{background:var(--navy);color:#fff;border-color:var(--navy);}
.btn.primary:hover{background:var(--navy-d);}
.btn.secondary{background:#E8F1EC;color:var(--navy);border-color:#C9DDD2;}
.btn.secondary:hover{background:#D6E8DC;}
.btn.btn-danger{background:#FFF4F4;color:#B3261E;border-color:#F5C7C3;font-size:11.5px;padding:6px 11px;}
.btn.btn-danger:hover:not(:disabled){background:#FCE4E2;border-color:#E5A6A0;}
.btn:disabled{opacity:.55;cursor:default;}
.btn input[type=file]{display:none;}
.upload-status{font-size:12.5px;color:var(--ink-soft);flex:1;min-width:160px;}
.data-badge{font-size:11.5px;color:var(--ink-soft);background:#F0F3F6;border-radius:6px;padding:4px 9px;}

.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:16px 18px;box-shadow:0 1px 2px rgba(20,30,40,.04);}
.kpi .num{font-size:24px;font-weight:bold;color:var(--navy);line-height:1.15;}
.kpi .num.highlighted-num{color:var(--red);}
.kpi .num.small{font-size:17px;}
.kpi .sub2{font-size:11.5px;color:var(--ink-soft);margin-top:2px;}
.kpi .lbl{font-size:11.5px;color:var(--ink-soft);margin-top:5px;text-transform:uppercase;letter-spacing:.4px;}

.chart-card{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:18px;box-shadow:0 1px 2px rgba(20,30,40,.04);margin-bottom:20px;}
.chart-card h3{margin:0 0 16px;font-size:14px;color:var(--ink);}

.controls{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:12px;}
input[type=text], select{font-family:inherit;font-size:13px;padding:8px 11px;border:1px solid var(--line);border-radius:7px;background:#fff;color:var(--ink);}
input[type=text]{min-width:230px;}
.tabs{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap;}
.tab{padding:9px 16px;border-radius:7px;font-size:13px;font-weight:bold;cursor:pointer;border:1px solid var(--line);background:#fff;color:var(--ink-soft);transition:all 0.2s;}
.tab.active{color:#fff;border-color:transparent;}

.table-card{background:var(--card);border:1px solid var(--line);border-radius:10px;overflow:hidden;box-shadow:0 1px 2px rgba(20,30,40,.04);}
.table-scroll{max-height:560px;overflow:auto;}
table{width:100%;border-collapse:collapse;font-size:12.5px;}
thead th{position:sticky;top:0;background:var(--navy);color:#fff;text-align:left;padding:9px 10px;font-weight:bold;cursor:pointer;white-space:nowrap;user-select:none;z-index:2;}
thead th:hover{background:var(--navy-d);}
thead th .arrow{opacity:.6;font-size:10px;margin-left:4px;}
tbody td{padding:7px 10px;border-bottom:1px solid var(--line);white-space:nowrap;}
tbody tr:nth-child(even){background:#FAFBFC;}
.row-count{font-size:12px;color:var(--ink-soft);padding:8px 4px 0;}
.empty-state{padding:30px;text-align:center;color:var(--ink-soft);font-size:13px;}

.info-box{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:14px 18px;margin-bottom:14px;display:none;}
.info-box.visible{display:block;}
.info-box .info-title{font-size:13.5px;font-weight:bold;margin-bottom:5px;}
.info-box .info-def{font-size:12.5px;color:var(--ink);line-height:1.55;margin-bottom:6px;}
.info-box .info-row{display:flex;gap:20px;flex-wrap:wrap;}
.info-box .info-block{flex:1;min-width:220px;}
.info-box .info-label{font-size:10px;text-transform:uppercase;letter-spacing:.5px;color:var(--ink-soft);margin-bottom:3px;font-weight:bold;}
.info-box .info-text{font-size:12px;color:var(--ink-soft);line-height:1.5;}
.info-box .crit-badge{display:inline-block;background:#F0F3F6;border-radius:5px;padding:4px 9px;font-size:11.5px;color:var(--ink);font-family:monospace;}

.methodology{font-size:11.5px;color:var(--ink-soft);line-height:1.6;margin-top:20px;padding:14px;background:#fff;border:1px solid var(--line);border-radius:8px;}
.methodology b{color:var(--ink);}
footer{margin-top:30px;font-size:11.5px;color:#8d99a3;text-align:center;}

@media (max-width:980px){ .kpi-grid{grid-template-columns:repeat(2,1fr);} }