:root{
  --bg:#f4f7f6;--surface:#ffffff;--surface-2:#e8f7ed;--line:#dde5e0;
  --ink:#087f23;--ink-soft:#16a34a;--accent:#16a34a;--accent-soft:#e8f7ed;
  --text:#1d2119;--muted:#6c7268;--good:#15803d;--good-bg:#dcfce7;
  --warn:#a9711c;--warn-bg:#faeed1;--escalated:#a5372a;--escalated-bg:#f8ded7;
  --critical-bg:#7f1d1d;--critical-fg:#fbe9e4;--radius:12px;
  --shadow:0 1px 2px rgba(8,127,35,.06), 0 6px 20px rgba(8,127,35,.05);
}
*{box-sizing:border-box;margin:0;padding:0;}
body{background:var(--bg);color:var(--text);font-family:'Inter',sans-serif;-webkit-font-smoothing:antialiased;}
h1,h2,h3,.display{font-family:'Space Grotesk',sans-serif;}
.mono{font-family:'IBM Plex Mono',monospace;}

.app{display:flex;min-height:100vh;}
.sidebar{width:220px;flex-shrink:0;background:linear-gradient(160deg,#087f23,#16a34a);color:#eef2ee;padding:24px 16px;display:flex;flex-direction:column;gap:26px;}
.brand{padding:0 6px;}
.brand .mark{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:9px;background:#ffffff;color:#087f23;font-weight:700;font-family:'Space Grotesk',sans-serif;font-size:16px;margin-bottom:10px;}
.brand h1{font-size:18px;font-weight:700;letter-spacing:.2px;color:#fff;}
.brand p{font-size:11.5px;color:#d7f0dd;margin-top:3px;letter-spacing:.3px;}
.navlist{display:flex;flex-direction:column;gap:2px;}
.navlist button{display:flex;align-items:center;gap:10px;background:transparent;border:none;color:#c7d6cc;padding:10px 12px;border-radius:8px;font-size:13.5px;font-weight:500;cursor:pointer;text-align:left;width:100%;transition:background .15s, color .15s;}
.navlist button .ico{font-size:15px;width:18px;text-align:center;}
.navlist button:hover{background:rgba(255,255,255,.14);color:#fff;}
.navlist button.active{background:#eafbf0;color:#087f23;font-weight:700;}
.navlist .badge{margin-left:auto;background:rgba(255,255,255,.18);color:#fff;font-size:10.5px;font-weight:700;border-radius:20px;padding:2px 7px;font-family:'IBM Plex Mono',monospace;}
.navlist button.active .badge{background:var(--escalated);color:#fff;}
.sidebar-foot{margin-top:auto;font-size:11px;color:#d7ecdd;line-height:1.6;padding:0 6px;}
.main{flex:1;min-width:0;display:flex;flex-direction:column;}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:18px 28px;border-bottom:1px solid var(--line);background:var(--surface);position:sticky;top:0;z-index:5;}
.topbar h2{font-size:20px;font-weight:700;color:var(--ink);}
.topbar .sub{font-size:12.5px;color:var(--muted);margin-top:2px;}
.clock{text-align:right;font-size:12px;color:var(--muted);}
.clock .time{font-family:'IBM Plex Mono',monospace;color:var(--ink);font-weight:600;font-size:13px;}
.content{padding:26px 28px 60px;width:100%;max-width:none;margin:0;}
.tab{display:none;}
.tab.active{display:block;animation:fade .18s ease;}
@keyframes fade{from{opacity:0;transform:translateY(3px);}to{opacity:1;transform:none;}}

.stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:22px;}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;box-shadow:var(--shadow);border-left:4px solid var(--ink);}
.stat.warn{border-left-color:var(--warn);}
.stat.escalated{border-left-color:var(--escalated);}
.stat.critical{border-left-color:var(--critical-bg);}
.stat .label{font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);font-weight:600;}
.stat .value{font-family:'Space Grotesk',sans-serif;font-size:28px;font-weight:700;color:var(--ink);margin-top:6px;}
.stat .value.warn{color:var(--warn);}
.stat .value.escalated{color:var(--escalated);}
.stat .value.critical{color:var(--critical-bg);}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:22px;margin-bottom:20px;box-shadow:var(--shadow);}
.panel-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px;flex-wrap:wrap;}
.panel-title{font-size:15.5px;font-weight:700;color:var(--ink);display:flex;align-items:center;gap:8px;}
.panel-desc{font-size:12.5px;color:var(--muted);margin-top:3px;}

.form-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;align-items:end;}
.field label{display:block;font-size:11px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;margin-bottom:6px;}
input,select{width:100%;padding:10px 11px;border:1px solid var(--line);border-radius:8px;font-size:13.5px;font-family:'Inter',sans-serif;background:#fbfbf9;color:var(--text);outline:none;}
input:focus,select:focus{border-color:var(--ink-soft);background:#fff;box-shadow:0 0 0 3px rgba(23,49,41,.08);}
input[readonly]{background:#eef1ec;color:var(--muted);cursor:not-allowed;}
.btn{border:none;border-radius:8px;padding:10px 16px;font-weight:600;font-size:13px;cursor:pointer;transition:filter .15s, transform .05s;font-family:'Inter',sans-serif;}
.btn:active{transform:translateY(1px);}
.btn-primary{background:var(--ink);color:#fff;}
.btn-primary:hover{filter:brightness(1.15);}
.btn-accent{background:var(--accent);color:#fff;}
.btn-ghost{background:var(--surface-2);color:var(--ink);}
.btn-ghost:hover{background:#dfe3da;}
.btn-danger{background:var(--escalated-bg);color:var(--escalated);padding:7px 11px;font-size:12px;}
.btn-danger:hover{filter:brightness(.96);}
.btn-success{background:var(--good-bg);color:var(--good);padding:7px 11px;font-size:12px;}
.btn-success:hover{filter:brightness(.96);}
.btn-sm{padding:7px 11px;font-size:12px;}
.btn[disabled]{opacity:.5;cursor:not-allowed;}

.table-wrap{overflow-x:auto;}
table{width:100%;border-collapse:collapse;min-width:1000px;}
th{background:var(--surface-2);color:var(--ink-soft);text-align:left;font-size:10.5px;text-transform:uppercase;letter-spacing:.5px;font-weight:700;padding:11px 12px;border-bottom:1px solid var(--line);}
td{padding:11px 12px;border-bottom:1px solid #f0f1ec;font-size:13px;vertical-align:middle;}
tbody tr:hover td{background:#fafaf7;}
.idx{font-family:'IBM Plex Mono',monospace;color:var(--muted);font-size:12px;}
.status-pill{display:inline-block;padding:4px 10px;border-radius:20px;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;font-family:'IBM Plex Mono',monospace;}
.status-todo{background:#eceee7;color:#5b6259;}
.status-progress{background:var(--warn-bg);color:var(--warn);}
.status-done{background:var(--good-bg);color:var(--good);}
.stamp{display:inline-block;font-family:'IBM Plex Mono',monospace;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.7px;padding:3px 9px;border-radius:4px;border:1.5px solid currentColor;transform:rotate(-2deg);}
.stamp-normal{color:var(--ink-soft);}
.stamp-warn{color:var(--warn);}
.stamp-escalated{color:var(--escalated);}
.stamp-critical{color:var(--critical-fg);background:var(--critical-bg);border-color:var(--critical-bg);}
.empty{text-align:center;padding:40px 20px;color:var(--muted);font-size:13.5px;}
.empty .big{font-size:26px;display:block;margin-bottom:8px;}
.filter-bar{display:flex;gap:10px;margin-bottom:14px;flex-wrap:wrap;}
.filter-bar input, .filter-bar select{max-width:220px;}
.prio-pill{display:inline-block;padding:4px 10px;border-radius:20px;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;font-family:'IBM Plex Mono',monospace;}
.prio-critical{background:var(--critical-bg);color:var(--critical-fg);}
.prio-high{background:#fde6d3;color:#b4540a;}
.prio-medium{background:var(--warn-bg);color:var(--warn);}
.prio-low{background:var(--good-bg);color:var(--good);}
.remark-cell{min-width:240px;width:26%;}
.remark-input{width:100%;min-height:56px;padding:8px 10px;border:1px solid var(--line);border-radius:8px;font-size:13px;font-family:'Inter',sans-serif;background:#fbfbf9;color:var(--text);outline:none;resize:vertical;line-height:1.4;}
.remark-input:focus{border-color:var(--ink-soft);background:#fff;box-shadow:0 0 0 3px rgba(23,49,41,.08);}
.remark-view{white-space:pre-wrap;word-break:break-word;font-size:13px;line-height:1.45;color:var(--text);}
.remark-view.none{color:var(--muted);}
.alert{padding:12px 16px;border-radius:9px;margin-bottom:16px;font-size:13px;display:none;font-weight:500;}
.alert.show{display:block;}
.alert-success{background:var(--good-bg);color:var(--good);}
.alert-warn{background:var(--warn-bg);color:var(--warn);}
.escalation-note{background:var(--accent-soft);border:1px solid #bfe8cc;color:#0c5c22;border-radius:9px;padding:12px 16px;margin-bottom:18px;font-size:12.5px;}
.escalation-note b{color:#087f23;}
.critical-banner{display:none;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;background:var(--critical-bg);color:var(--critical-fg);border-radius:10px;padding:14px 18px;margin-bottom:18px;font-size:13px;}
.critical-banner.show{display:flex;}
.critical-banner strong{font-weight:700;}
.critical-banner .btn{background:#fff;color:var(--critical-bg);}
.critical-banner .btn:hover{filter:brightness(.95);}
.stat.clickable{cursor:pointer;transition:transform .1s, box-shadow .1s;}
.stat.clickable:hover{transform:translateY(-1px);box-shadow:0 3px 10px rgba(23,49,41,.1);}
.stat.clickable.selected{outline:2px solid var(--ink);outline-offset:-1px;}
.overdue-link{color:var(--escalated);font-weight:700;text-decoration:underline;cursor:pointer;background:none;border:none;font-family:'IBM Plex Mono',monospace;font-size:13px;padding:0;}
.overdue-link:hover{color:#7a281d;}

.team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
.person-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:16px;position:relative;}
.person-card .top{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;}
.avatar{width:38px;height:38px;border-radius:50%;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-family:'Space Grotesk',sans-serif;font-size:14px;flex-shrink:0;}
.person-card .name{font-weight:700;color:var(--ink);font-size:14.5px;margin-top:10px;}
.person-card .role{font-size:12px;color:var(--muted);margin-top:2px;}
.person-stats{display:flex;gap:16px;margin-top:14px;padding-top:12px;border-top:1px dashed var(--line);}
.person-stats div{font-size:11px;color:var(--muted);}
.person-stats strong{display:block;font-family:'IBM Plex Mono',monospace;font-size:16px;color:var(--ink);margin-top:2px;}
.person-stats .due-link{cursor:pointer;text-decoration:underline;}
.load-bar{height:5px;border-radius:3px;background:var(--surface-2);margin-top:12px;overflow:hidden;}
.load-bar span{display:block;height:100%;background:var(--accent);}
.add-inline{display:flex;gap:10px;margin-bottom:18px;flex-wrap:wrap;}
.add-inline input{max-width:220px;}
.loading-state{padding:60px;text-align:center;color:var(--muted);font-size:13.5px;}

.import-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;}
.file-btn{display:inline-flex;align-items:center;gap:8px;background:var(--surface-2);color:var(--ink);border:1px dashed var(--ink-soft);border-radius:8px;padding:10px 14px;font-size:13px;font-weight:600;cursor:pointer;}
.file-btn:hover{background:#dfe9e0;}
.import-summary{font-size:12.5px;color:var(--muted);margin-top:10px;line-height:1.6;}
.import-summary b{color:var(--ink);}
.import-errors{margin-top:8px;max-height:140px;overflow-y:auto;font-size:12px;color:var(--escalated);}

.company-section{margin-bottom:24px;}
.company-section-head{display:flex;align-items:center;gap:10px;margin-bottom:12px;}
.company-section-head h3{font-size:14px;font-weight:700;color:var(--ink);}
.company-section-head .count{font-family:'IBM Plex Mono',monospace;font-size:11.5px;color:var(--muted);background:var(--surface-2);padding:2px 9px;border-radius:20px;}
.company-pill{display:inline-block;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;padding:2px 8px;border-radius:20px;background:var(--surface-2);color:var(--ink);margin-top:6px;}

.login-screen{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(160deg,#087f23,#16a34a);padding:20px;}
.login-card{background:#fff;border-radius:16px;padding:36px 32px;width:100%;max-width:380px;box-shadow:0 20px 50px rgba(0,0,0,.18);text-align:center;}
.login-card .mark{background:var(--ink);color:#fff;border-radius:12px;display:flex;align-items:center;justify-content:center;font-family:'Space Grotesk',sans-serif;font-weight:700;}
.login-card h1{font-size:16.5px;font-weight:700;color:var(--ink);line-height:1.35;}
.login-sub{font-size:12px;color:var(--muted);margin-top:4px;margin-bottom:22px;}
.login-tabs{display:flex;background:var(--surface-2);border-radius:9px;padding:4px;margin-bottom:18px;}
.login-tab{flex:1;border:none;background:transparent;padding:9px 0;border-radius:7px;font-weight:700;font-size:13px;color:var(--muted);cursor:pointer;}
.login-tab.active{background:var(--ink);color:#fff;}
.login-panel .field{margin-bottom:12px;text-align:left;}
.login-error{display:none;background:var(--escalated-bg);color:var(--escalated);font-size:12.5px;border-radius:8px;padding:9px 12px;margin-bottom:14px;text-align:left;}
.login-error.show{display:block;}
.login-hint{font-size:11.5px;color:var(--muted);margin-top:10px;text-align:left;}

@media(max-width:1100px){
  .form-grid{grid-template-columns:repeat(3,1fr);}
  .stat-row{grid-template-columns:repeat(2,1fr);}
  .team-grid{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:760px){
  .sidebar{width:76px;padding:20px 10px;}
  .sidebar .brand p, .navlist button span.label, .sidebar-foot{display:none;}
  .navlist button{justify-content:center;}
  .navlist button .badge{display:none;}
  .form-grid{grid-template-columns:1fr;}
  .team-grid{grid-template-columns:1fr;}
  .content{padding:18px;}
}