:root{
  --ink:#1B2430;
  --ink-2:#242F3F;
  --paper:#F6F4EF;
  --paper-dim:#EFEAdd;
  --card:#FFFFFF;
  --line:#DCD5C2;
  --line-strong:#C7BEA6;
  --gold:#B3862C;
  --gold-dim:#E8DBB8;
  --teal:#2F7B6E;
  --teal-dim:#DCEAE6;
  --terracotta:#BE4E2C;
  --terracotta-dim:#F5DED2;
  --amber:#C6871F;
  --amber-dim:#F2E1BC;
  --muted:#767065;
  --text:#22221F;
  --radius:3px;
  --shadow:0 1px 2px rgba(27,36,48,0.06), 0 4px 14px rgba(27,36,48,0.05);
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--paper);
  color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:14px;
  line-height:1.5;
}
.serif{ font-family:Georgia,"Iowan Old Style","Palatino Linotype",Palatino,serif; }
.mono{ font-family:"SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace; }

/* ===== Login page ===== */
.login-body{ background:var(--ink); display:flex; align-items:center; justify-content:center; min-height:100vh; }
.login-wrap{ width:100%; max-width:380px; padding:20px; }
.login-card{ background:var(--card); border:1px solid var(--line-strong); padding:34px 28px; box-shadow:0 20px 60px rgba(0,0,0,.35); text-align:center; }
.login-logo{ max-height:100px; max-width:260px; margin-bottom:14px; }
.login-card .eyebrow{ text-transform:uppercase; letter-spacing:.12em; font-size:10.5px; color:var(--gold); font-weight:700; margin-bottom:6px;}
.login-card h1{ font-size:22px; margin:0 0 20px; font-family:Georgia,serif; text-align:left; }
.login-card form{ text-align:left; }
.login-card .err{ color:var(--terracotta); font-size:12.5px; min-height:16px; margin-top:6px; }

/* ===== App shell ===== */
#app{ max-width:1320px; margin:0 auto; padding:0 20px 60px; }

.masthead{
  display:flex; align-items:flex-end; justify-content:space-between;
  padding:22px 0 16px; border-bottom:3px solid var(--ink);
  gap:16px; flex-wrap:wrap;
}
.masthead-logo{ max-height:58px; max-width:180px; object-fit:contain; }
.masthead .title-block .eyebrow{
  text-transform:uppercase; letter-spacing:.14em; font-size:11px; color:var(--gold);
  font-weight:700; margin-bottom:4px;
}
.masthead h1{ font-size:26px; margin:0; font-weight:600; color:var(--ink); letter-spacing:-0.01em; }
.masthead .sub{ color:var(--muted); font-size:12.5px; margin-top:3px;}
.masthead .controls{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.whoami{ font-size:12px; color:var(--muted); margin-right:6px; }
.role-badge{ text-transform:uppercase; font-size:10px; font-weight:700; color:var(--gold); }

select.chip, .btn{
  font:inherit; font-size:12.5px; border:1px solid var(--line-strong); background:var(--card);
  padding:7px 12px; border-radius:var(--radius); color:var(--text); cursor:pointer;
}
.btn:hover, select.chip:hover{ border-color:var(--ink); }
.btn-primary{ background:var(--ink); color:#fff; border-color:var(--ink); font-weight:600; }
.btn-primary:hover{ background:var(--ink-2); }
.btn-gold{ background:var(--gold); color:#fff; border-color:var(--gold); font-weight:600; }
.btn-sm{ padding:4px 9px; font-size:11.5px; }
.btn-danger{ color:var(--terracotta); border-color:var(--terracotta-dim); }
.btn-danger:hover{ background:var(--terracotta-dim); }

.tabs{ display:flex; gap:4px; margin-top:0; flex-wrap:wrap; }
.tab{
  padding:10px 18px 9px; font-size:13px; font-weight:600; color:var(--muted);
  background:var(--paper-dim); border:1px solid var(--line); border-bottom:none;
  border-radius:6px 6px 0 0; cursor:pointer; position:relative; top:1px;
  margin-top:14px;
}
.tab.active{ background:var(--card); color:var(--ink); border-color:var(--line-strong); border-bottom:1px solid var(--card); }

.panel{
  background:var(--card); border:1px solid var(--line-strong); border-top:none;
  padding:22px; box-shadow:var(--shadow);
}

/* ===== Dashboard ===== */
.kpi-row{ display:grid; grid-template-columns:repeat(5,1fr); gap:12px; margin-bottom:20px; }
@media (max-width:900px){ .kpi-row{ grid-template-columns:repeat(2,1fr);} }
.kpi{
  border:1px solid var(--line); border-left:4px solid var(--gold); padding:14px 16px;
  background:linear-gradient(180deg,#fff, var(--paper) 220%);
}
.kpi.ok{ border-left-color:var(--teal); }
.kpi.warn{ border-left-color:var(--terracotta); }
.kpi .num{ font-family:Georgia,serif; font-size:27px; font-weight:700; color:var(--ink); line-height:1;}
.kpi .lbl{ font-size:11px; text-transform:uppercase; letter-spacing:.07em; color:var(--muted); margin-top:6px;}

.grid-2{ display:grid; grid-template-columns:1.15fr .85fr; gap:18px; margin-bottom:18px; }
@media (max-width:980px){ .grid-2{ grid-template-columns:1fr;} }
.grid-3{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:18px; }
@media (max-width:980px){ .grid-3{ grid-template-columns:1fr;} }

.card-block{ border:1px solid var(--line); background:#fff; }
.card-block h3{
  font-size:12px; text-transform:uppercase; letter-spacing:.08em; margin:0; padding:11px 14px;
  border-bottom:1px solid var(--line); color:var(--ink); background:var(--paper-dim);
  display:flex; justify-content:space-between; align-items:center;
}
.card-body{ padding:14px; }

table.ledger{ width:100%; border-collapse:collapse; font-size:12.5px; }
table.ledger th{
  text-align:left; font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted);
  border-bottom:2px solid var(--ink); padding:6px 8px; font-weight:700; cursor:pointer; white-space:nowrap;
}
table.ledger td{ padding:6px 8px; border-bottom:1px dashed var(--line); vertical-align:top; }
table.ledger tr:hover td{ background:var(--paper-dim); }

.barlist .brow{ display:grid; grid-template-columns:150px 1fr 34px; align-items:center; gap:8px; margin-bottom:7px; }
.barlist .brow .name{ font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.barlist .bar-track{ background:var(--paper-dim); height:9px; border-radius:2px; overflow:hidden; }
.barlist .bar-fill{ background:var(--gold); height:100%; }
.barlist .bval{ font-family:monospace; font-size:11.5px; text-align:right; color:var(--muted); }

.pill{ display:inline-block; padding:1px 8px; border-radius:20px; font-size:10.5px; font-weight:700; letter-spacing:.02em; white-space:nowrap;}
.st-Pending{ background:var(--amber-dim); color:#8A5D0F; }
.st-InProgress{ background:#DCE6F2; color:#33547E; }
.st-Completed{ background:var(--teal-dim); color:#1F5B50; }
.st-Escalated{ background:var(--terracotta-dim); color:#8E3719; }
.pr-Low{ color:var(--muted); }
.pr-Medium{ color:#33547E; }
.pr-High{ color:#8A5D0F; font-weight:700;}
.pr-Critical{ color:#8E3719; font-weight:700;}
.flag{ display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:5px; }
.flag.red{ background:var(--terracotta);} .flag.amber{ background:var(--amber);} .flag.green{ background:var(--teal);}

.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px 20px; }
@media (max-width:800px){ .form-grid{ grid-template-columns:1fr; } }
.form-grid .span2{ grid-column:1/-1; }
label{ display:block; font-size:11.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); margin-bottom:5px; font-weight:700;}
input[type=text], input[type=date], input[type=number], input[type=password], select, textarea{
  width:100%; font:inherit; font-size:13.5px; padding:9px 10px; border:1px solid var(--line-strong);
  border-radius:var(--radius); background:#fff; color:var(--text);
}
textarea{ min-height:70px; resize:vertical; }
input:focus, select:focus, textarea:focus{ outline:2px solid var(--gold); outline-offset:1px; border-color:var(--gold); }
.hint{ font-size:11px; color:var(--muted); margin-top:4px; }
.warn-box{ background:var(--terracotta-dim); border:1px solid #E3A78D; color:#8E3719; padding:8px 10px; font-size:12px; border-radius:var(--radius); margin-top:6px; }
.tmpl-row{ display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.tmpl-chip{ font-size:11px; border:1px dashed var(--line-strong); background:var(--paper-dim); padding:4px 9px; border-radius:20px; cursor:pointer; }
.tmpl-chip:hover{ border-color:var(--gold); color:var(--gold); }

.filter-bar{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:14px; padding:12px; background:var(--paper-dim); border:1px solid var(--line);}
.filter-bar input[type=text], .filter-bar select, .filter-bar input[type=date]{ width:auto; min-width:120px; padding:6px 8px; font-size:12.5px; }
.view-toggle{ margin-left:auto; display:flex; gap:4px; }

.kanban{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; align-items:start; }
@media (max-width:1000px){ .kanban{ grid-template-columns:1fr 1fr; } }
.kcol{ background:var(--paper-dim); border:1px solid var(--line); min-height:80px; }
.kcol h4{ font-size:11.5px; text-transform:uppercase; letter-spacing:.05em; padding:9px 10px; margin:0; border-bottom:2px solid var(--ink); display:flex; justify-content:space-between; }
.kcol .kbody{ padding:8px; display:flex; flex-direction:column; gap:8px; max-height:520px; overflow:auto; }
.kcard{ background:#fff; border:1px solid var(--line); border-left:3px solid var(--gold); padding:8px 10px; cursor:pointer; box-shadow:var(--shadow); }
.kcard:hover{ border-left-color:var(--ink);}
.kcard .cid{ font-family:monospace; font-size:11px; color:var(--muted); }
.kcard .cname{ font-size:12.5px; font-weight:600; margin:2px 0; }
.kcard .cissue{ font-size:11.5px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.kcard .cmeta{ display:flex; justify-content:space-between; align-items:center; margin-top:6px; font-size:10.5px; color:var(--muted); }

.row-red td{ background:#FBEDE6 !important; }
.row-amber td{ background:#FBF2DE !important; }

.modal-bg{ position:fixed; inset:0; background:rgba(27,36,48,0.5); display:flex; align-items:flex-start; justify-content:center; padding:40px 16px; z-index:50; overflow:auto;}
.modal{ background:#fff; max-width:640px; width:100%; border:1px solid var(--line-strong); box-shadow:0 20px 60px rgba(0,0,0,.25); }
.modal-head{ display:flex; justify-content:space-between; align-items:center; padding:14px 18px; border-bottom:3px solid var(--ink); }
.modal-head h2{ font-size:16px; margin:0; }
.modal-body{ padding:18px; max-height:70vh; overflow:auto; }
.close-x{ background:none; border:none; font-size:20px; cursor:pointer; color:var(--muted); }
.detail-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px 18px; font-size:12.5px; margin-bottom:14px;}
.detail-grid .k{ color:var(--muted); text-transform:uppercase; font-size:10px; letter-spacing:.05em; }
.note-item{ border-left:2px solid var(--gold); padding:6px 10px; margin-bottom:8px; background:var(--paper-dim); font-size:12.5px; }
.note-item .ts{ font-size:10.5px; color:var(--muted); display:block; margin-bottom:2px; }

.dropzone{ border:2px dashed var(--line-strong); padding:30px; text-align:center; color:var(--muted); font-size:13px; background:var(--paper-dim); }
.import-report{ margin-top:14px; font-size:12.5px; }
.import-report .ok{ color:var(--teal); }
.import-report .bad{ color:var(--terracotta); }

.footer-note{ margin-top:18px; font-size:11.5px; color:var(--muted); text-align:center; }

@media print{
  .tabs, .masthead .controls, .filter-bar, .no-print{ display:none !important; }
  .panel{ border:none; box-shadow:none; }
}