/* ============================= TOKENS (approved UI baseline) ============================= */
:root{
  --ink-navy:#132A46;
  --ink-navy-2:#1C3A5E;
  --ink-navy-deep:#0B1B2E;
  --paper:#F6F2E7;
  --paper-2:#EFE8D6;
  --card:#FFFDF8;
  --line:#DBD2B8;
  --brass:#A9782F;
  --brass-light:#C99A45;
  --seal-red:#8E2A2A;
  --seal-red-light:#B44343;
  --forest:#2F6B4F;
  --forest-light:#DDEDE2;
  --slate:#54626F;
  --ink:#20303F;
  --amber:#B5762A;
  --amber-light:#F3E4C8;
  --shadow: 0 1px 2px rgba(19,42,70,.06), 0 6px 20px -8px rgba(19,42,70,.18);
  --radius: 10px;
  --font-display:'Lora', serif;
  --font-body:'IBM Plex Sans', sans-serif;
  --font-mono:'IBM Plex Mono', monospace;
}
*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--font-body); -webkit-font-smoothing:antialiased;
  background-image: radial-gradient(circle at 1px 1px, rgba(19,42,70,.05) 1px, transparent 0);
  background-size: 22px 22px;
}
::selection{background:var(--amber-light);}
button{font-family:inherit;}
a{color:inherit;}
::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-thumb{background:#CBBF9C;border-radius:8px;}
::-webkit-scrollbar-track{background:transparent;}

/* ============================= LOGIN ============================= */
#loginScreen{
  min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px;
  background: linear-gradient(160deg, var(--ink-navy-deep), var(--ink-navy) 55%, var(--ink-navy-2));
}
.login-card{
  background:var(--card); border-radius:14px; width:100%; max-width:400px; padding:34px 32px;
  box-shadow: 0 30px 70px -15px rgba(0,0,0,.5); border:1px solid rgba(255,255,255,.08);
}
.login-seal{
  width:56px;height:56px;border-radius:50%; border:2.5px solid var(--brass); margin:0 auto 14px;
  display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:700;
  color:var(--brass); font-size:19px;
}
.login-card h1{font-family:var(--font-display); text-align:center; font-size:20px; margin:0 0 2px; color:var(--ink-navy-deep);}
.login-card .tag{text-align:center; font-size:11px; letter-spacing:1.4px; text-transform:uppercase; color:var(--slate); margin-bottom:22px;}
.login-err{background:#FBEDED; border:1px solid var(--seal-red-light); color:var(--seal-red); padding:9px 12px; border-radius:7px; font-size:12.5px; margin-bottom:14px; display:none;}
.login-err.show{display:block;}
.login-foot{text-align:center; margin-top:18px; font-size:11.5px; color:var(--slate);}
.demo-box{background:var(--paper); border:1px dashed var(--brass); border-radius:8px; padding:10px 12px; font-size:11px; color:var(--slate); margin-top:16px; font-family:var(--font-mono); line-height:1.6;}
.login-tabs{display:flex; gap:6px; margin-bottom:20px; background:var(--paper); border-radius:8px; padding:4px;}
.login-tab{flex:1; text-align:center; padding:7px; border-radius:6px; font-size:12px; font-weight:600; cursor:pointer; color:var(--slate);}
.login-tab.active{background:#fff; color:var(--ink-navy-deep); box-shadow:var(--shadow);}

/* ============================= LAYOUT ============================= */
#app{display:none;}
#app.ready{display:flex; min-height:100vh;}

#sidebar{
  width:250px; flex:0 0 250px; background:var(--ink-navy-deep);
  background-image: linear-gradient(180deg, var(--ink-navy) 0%, var(--ink-navy-deep) 60%);
  color:#EFE6D2; display:flex; flex-direction:column;
  position:sticky; top:0; height:100vh; overflow-y:auto;
}
.brand{padding:22px 20px 18px; display:flex; gap:12px; align-items:center; border-bottom:1px solid rgba(239,230,210,.12);}
.brand-seal{width:42px;height:42px;border-radius:50%; flex:0 0 42px; border:2px solid var(--brass-light); display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:700; color:var(--brass-light); font-size:16px; background:rgba(201,154,69,.08);}
.brand-text .name{font-family:var(--font-display); font-weight:600; font-size:15px; line-height:1.2;}
.brand-text .sub{font-size:10px; text-transform:uppercase; letter-spacing:1.4px; color:#B9A87E; margin-top:3px;}

.nav-group{padding:16px 12px 4px;}
.nav-group-label{font-size:10px; text-transform:uppercase; letter-spacing:1.6px; color:#8FA0B3; padding:6px 12px 8px; font-weight:600;}
.nav-item{display:flex; align-items:center; gap:11px; padding:9px 12px; margin:2px 0; border-radius: 3px 10px 10px 3px; cursor:pointer; font-size:13.5px; color:#DCD3B9; border-left:3px solid transparent; transition:background .15s ease, color .15s ease;}
.nav-item svg{width:17px;height:17px; flex:0 0 17px; opacity:.85;}
.nav-item:hover{background:rgba(239,230,210,.06); color:#fff;}
.nav-item.active{background:var(--paper); color:var(--ink-navy-deep); font-weight:600; border-left:3px solid var(--seal-red); box-shadow: -3px 0 0 var(--brass) inset;}
.nav-item.active svg{opacity:1;}
.nav-badge{margin-left:auto; background:var(--seal-red); color:#fff; font-size:10px; font-weight:700; padding:1px 7px; border-radius:20px; font-family:var(--font-mono);}
.sidebar-foot{margin-top:auto; padding:14px 18px 18px; font-size:11px; color:#7E90A3; border-top:1px solid rgba(239,230,210,.1);}

#main{flex:1; min-width:0; display:flex; flex-direction:column;}
#topbar{height:64px; flex:0 0 64px; background:var(--card); border-bottom:1px solid var(--line); display:flex; align-items:center; gap:16px; padding:0 22px; position:sticky; top:0; z-index:20; box-shadow: var(--shadow);}
.search-wrap{flex:1; max-width:420px; position:relative;}
.search-wrap input{width:100%; padding:9px 14px 9px 36px; border-radius:8px; border:1px solid var(--line); background:var(--paper); font-size:13px; color:var(--ink); font-family:var(--font-body);}
.search-wrap input:focus{outline:2px solid var(--brass-light); outline-offset:1px; background:#fff;}
.search-wrap svg{position:absolute; left:11px; top:50%; transform:translateY(-50%); width:15px; height:15px; color:var(--slate);}
.topbar-right{margin-left:auto; display:flex; align-items:center; gap:18px;}
.icon-btn{width:36px;height:36px;border-radius:50%; border:1px solid var(--line); background:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; position:relative; color:var(--ink-navy);}
.icon-btn svg{width:17px;height:17px;}
.icon-btn .dot{position:absolute; top:6px; right:7px; width:7px;height:7px;border-radius:50%; background:var(--seal-red); border:1.5px solid #fff;}
.profile{display:flex; align-items:center; gap:10px; cursor:pointer; padding:4px 8px 4px 4px; border-radius:24px;}
.profile:hover{background:var(--paper);}
.avatar{width:34px;height:34px;border-radius:50%; background:var(--ink-navy); color:var(--brass-light); display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:700; font-size:13px;}
.profile .who{line-height:1.2;}
.profile .who .n{font-size:12.5px; font-weight:600; color:var(--ink);}
.profile .who .r{font-size:10.5px; color:var(--slate);}

#view{flex:1; padding:26px 30px 60px; max-width:1360px; width:100%; margin:0 auto;}

/* ============================= COMMON UI ============================= */
.page-head{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:22px; flex-wrap:wrap;}
.page-head h1{font-family:var(--font-display); font-size:25px; margin:0 0 4px; color:var(--ink-navy-deep); font-weight:600;}
.page-head .eyebrow{font-size:10.5px; text-transform:uppercase; letter-spacing:1.6px; color:var(--brass); font-weight:700; margin-bottom:6px;}
.page-head p.desc{margin:0; color:var(--slate); font-size:13.5px;}
.btn{border:1px solid var(--ink-navy); background:var(--ink-navy); color:#fff; padding:9px 16px; border-radius:7px; font-size:13px; font-weight:600; cursor:pointer; display:inline-flex; align-items:center; gap:7px; transition: transform .08s ease, background .15s ease;}
.btn:hover{background:var(--ink-navy-2);}
.btn:active{transform:scale(.98);}
.btn:disabled{opacity:.55; cursor:not-allowed;}
.btn.ghost{background:transparent; color:var(--ink-navy); border:1px solid var(--line);}
.btn.ghost:hover{background:var(--paper);}
.btn.brass{background:var(--brass); border-color:var(--brass);}
.btn.brass:hover{background:var(--brass-light);}
.btn.danger{background:#fff; color:var(--seal-red); border-color:var(--seal-red-light);}
.btn.danger:hover{background:#FBEDED;}
.btn.sm{padding:6px 11px; font-size:12px; border-radius:6px;}
.btn.block{width:100%; justify-content:center;}
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow);}
.grid{display:grid; gap:16px;}
.stat-row{display:grid; grid-template-columns:repeat(auto-fit,minmax(168px,1fr)); gap:14px; margin-bottom:22px;}
.stat-card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:16px 16px 14px; position:relative; overflow:hidden;}
.stat-card::before{content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--accent, var(--brass));}
.stat-card .lbl{font-size:10.5px; text-transform:uppercase; letter-spacing:1.2px; color:var(--slate); font-weight:600;}
.stat-card .val{font-family:var(--font-display); font-size:30px; font-weight:700; color:var(--ink-navy-deep); margin-top:6px;}
.stat-card .delta{font-size:11px; color:var(--forest); margin-top:4px; font-weight:600;}
.stat-card .delta.down{color:var(--seal-red);}
.stamp{display:inline-flex; align-items:center; justify-content:center; gap:5px; font-family:var(--font-mono); font-weight:600; font-size:10.5px; letter-spacing:.6px; border:1.5px solid currentColor; border-radius:40px; padding:3px 10px 3px 9px; transform:rotate(-2.2deg); text-transform:uppercase; white-space:nowrap;}
.stamp::before{content:""; width:6px;height:6px;border-radius:50%; background:currentColor;}
.stamp.new{color:var(--ink-navy-2);}
.stamp.pending{color:var(--amber);}
.stamp.forwarded{color:var(--brass);}
.stamp.overdue{color:var(--seal-red);}
.stamp.completed{color:var(--forest);}
.stamp.returned{color:#7A4FA0;}
.daak-no{font-family:var(--font-mono); font-weight:600; font-size:12px; color:var(--ink-navy-deep); background:var(--paper-2); border:1px dashed var(--brass); padding:2px 8px; border-radius:5px;}
table.dtable{width:100%; border-collapse:collapse; font-size:12.8px;}
table.dtable thead th{text-align:left; font-size:10.5px; text-transform:uppercase; letter-spacing:1px; color:var(--slate); padding:10px 12px; border-bottom:2px solid var(--ink-navy); font-weight:700;}
table.dtable tbody td{padding:11px 12px; border-bottom:1px solid var(--line); vertical-align:middle;}
table.dtable tbody tr:hover{background:var(--paper);}
table.dtable tbody tr:last-child td{border-bottom:none;}
.section-title{font-family:var(--font-display); font-size:16.5px; font-weight:600; color:var(--ink-navy-deep); margin:0 0 14px; display:flex; align-items:center; gap:8px;}
.section-title .tag{font-family:var(--font-body); font-size:10px; background:var(--forest-light); color:var(--forest); padding:2px 8px; border-radius:20px; font-weight:700; letter-spacing:.4px;}
.field{margin-bottom:14px;}
.field label{display:block; font-size:11.5px; font-weight:600; color:var(--ink-navy); margin-bottom:5px; letter-spacing:.2px;}
.field label .opt{color:var(--slate); font-weight:400; font-size:10.5px; margin-left:4px;}
.field input, .field select, .field textarea{width:100%; padding:9px 11px; border:1px solid var(--line); border-radius:7px; font-size:13px; font-family:var(--font-body); background:#fff; color:var(--ink);}
.field input:focus, .field select:focus, .field textarea:focus{outline:2px solid var(--brass-light); outline-offset:0; border-color:var(--brass-light);}
.field textarea{resize:vertical; min-height:64px;}
.field .err{color:var(--seal-red); font-size:11px; margin-top:4px; display:none;}
.field.invalid input, .field.invalid select, .field.invalid textarea{border-color:var(--seal-red-light);}
.field.invalid .err{display:block;}
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:0 16px;}
.form-grid .full{grid-column:1/-1;}
.file-drop{border:1.5px dashed var(--line); border-radius:8px; padding:16px; text-align:center; color:var(--slate); font-size:12px; background:var(--paper); cursor:pointer;}
.file-drop:hover{border-color:var(--brass-light); color:var(--brass);}
.chip{display:inline-flex; align-items:center; gap:6px; background:var(--paper-2); border:1px solid var(--line); padding:4px 6px 4px 10px; border-radius:20px; font-size:11.5px; margin:3px 5px 0 0;}
.chip button{border:none; background:transparent; cursor:pointer; color:var(--slate); font-size:13px; line-height:1; padding:2px;}
.chip button:hover{color:var(--seal-red);}
.combo{position:relative;}
.combo-list{position:absolute; top:calc(100% + 4px); left:0; right:0; background:#fff; border:1px solid var(--line); border-radius:8px; box-shadow: 0 10px 30px -8px rgba(19,42,70,.3); max-height:230px; overflow-y:auto; z-index:30; display:none;}
.combo-list.show{display:block;}
.combo-opt{padding:9px 12px; cursor:pointer; font-size:12.5px; border-bottom:1px solid #F0EBDA;}
.combo-opt:last-child{border-bottom:none;}
.combo-opt:hover{background:var(--paper);}
.combo-opt .o-name{font-weight:600; color:var(--ink);}
.combo-opt .o-meta{color:var(--slate); font-size:11px;}
.kanban{display:grid; grid-template-columns:repeat(5,minmax(220px,1fr)); gap:12px; overflow-x:auto; padding-bottom:6px;}
.kcol{background:var(--paper-2); border:1px solid var(--line); border-radius:10px; padding:10px; min-height:200px;}
.kcol-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; padding:0 3px;}
.kcol-head .t{font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.6px; color:var(--ink-navy);}
.kcol-head .c{font-family:var(--font-mono); font-size:11px; background:#fff; border:1px solid var(--line); padding:1px 7px; border-radius:20px;}
.kcard{background:#fff; border:1px solid var(--line); border-radius:8px; padding:10px 11px; margin-bottom:9px; cursor:grab; box-shadow:0 1px 2px rgba(19,42,70,.05);}
.kcard:active{cursor:grabbing;}
.kcard.dragging{opacity:.4;}
.kcard .subj{font-size:12.5px; font-weight:600; color:var(--ink); margin:6px 0 5px; line-height:1.3;}
.kcard .meta{font-size:10.5px; color:var(--slate); display:flex; justify-content:space-between; align-items:center;}
.kcol.dragover{outline:2px dashed var(--brass); outline-offset:-4px; background:#F3ECD6;}
.timeline{position:relative; padding-left:28px;}
.timeline::before{content:""; position:absolute; left:9px; top:6px; bottom:6px; width:2px; background:var(--line);}
.tl-item{position:relative; padding-bottom:22px;}
.tl-item:last-child{padding-bottom:0;}
.tl-dot{position:absolute; left:-28px; top:2px; width:19px;height:19px;border-radius:50%; background:var(--ink-navy); border:3px solid var(--paper); display:flex; align-items:center; justify-content:center;}
.tl-dot.done{background:var(--forest);}
.tl-dot.pending-dot{background:var(--amber);}
.tl-head{display:flex; gap:10px; align-items:baseline; flex-wrap:wrap;}
.tl-head .act{font-weight:700; font-size:13px; color:var(--ink-navy-deep);}
.tl-head .when{font-size:11px; color:var(--slate); font-family:var(--font-mono);}
.tl-body{font-size:12.5px; color:var(--ink); margin-top:3px;}
.tl-body .remark{color:var(--slate); font-style:italic; margin-top:3px;}
.letterhead{background:#fff; border:1px solid var(--line); border-radius:8px; padding:28px 32px; font-family:var(--font-display); box-shadow:var(--shadow);}
.lh-top{display:flex; align-items:center; gap:16px; border-bottom:3px double var(--ink-navy); padding-bottom:14px; margin-bottom:18px;}
.lh-seal{width:54px;height:54px;border-radius:50%;border:2px solid var(--brass); display:flex;align-items:center;justify-content:center; font-weight:700; color:var(--brass); flex:0 0 54px;}
.lh-org{font-size:19px; font-weight:700; color:var(--ink-navy-deep);}
.lh-sub{font-family:var(--font-body); font-size:11px; color:var(--slate); text-transform:uppercase; letter-spacing:1px;}
#toast-host{position:fixed; bottom:22px; right:22px; z-index:999; display:flex; flex-direction:column; gap:8px;}
.toast{background:var(--ink-navy-deep); color:#F1E9D2; padding:12px 16px; border-radius:8px; font-size:12.5px; box-shadow:0 10px 30px -6px rgba(0,0,0,.4); display:flex; align-items:center; gap:9px; min-width:230px; border-left:3px solid var(--brass-light); animation:slideIn .25s ease;}
.toast.error{border-left-color:var(--seal-red-light);}
@keyframes slideIn{from{transform:translateX(20px); opacity:0;} to{transform:translateX(0); opacity:1;}}
.modal-bg{position:fixed; inset:0; background:rgba(11,27,46,.55); display:none; align-items:center; justify-content:center; z-index:200; padding:20px;}
.modal-bg.show{display:flex;}
.modal{background:#fff; border-radius:12px; max-width:560px; width:100%; max-height:88vh; overflow-y:auto; box-shadow:0 30px 60px -10px rgba(0,0,0,.4);}
.modal-head{padding:18px 22px; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between;}
.modal-head h3{margin:0; font-family:var(--font-display); font-size:17px; color:var(--ink-navy-deep);}
.modal-close{cursor:pointer; border:none; background:var(--paper); width:28px;height:28px;border-radius:50%; font-size:15px; color:var(--slate);}
.modal-body{padding:20px 22px;}
.modal-foot{padding:14px 22px; border-top:1px solid var(--line); display:flex; justify-content:flex-end; gap:10px;}
.two-col{display:grid; grid-template-columns:1.5fr 1fr; gap:18px;}
@media (max-width:980px){.two-col{grid-template-columns:1fr;}}
.two-col > *{min-width:0;}
.pad{padding:18px;}
.hint{font-size:11.5px; color:var(--slate);}
.divider{height:1px; background:var(--line); margin:16px 0;}
.avatar-sm{width:26px;height:26px;border-radius:50%; background:var(--ink-navy); color:var(--brass-light); display:inline-flex; align-items:center; justify-content:center; font-size:10.5px; font-weight:700; font-family:var(--font-display);}
.bar-row{display:flex; align-items:center; gap:10px; margin-bottom:9px;}
.bar-row .l{width:112px; font-size:11.5px; color:var(--ink); flex:0 0 112px;}
.bar-track{flex:1; height:9px; background:var(--paper-2); border-radius:6px; overflow:hidden;}
.bar-fill{height:100%; background:linear-gradient(90deg, var(--brass), var(--brass-light)); border-radius:6px;}
.bar-row .v{width:26px; font-family:var(--font-mono); font-size:11px; color:var(--slate); text-align:right;}
.pill-tabs{display:flex; gap:6px; margin-bottom:18px; flex-wrap:wrap;}
.pill-tab{padding:7px 14px; border-radius:20px; border:1px solid var(--line); background:#fff; font-size:12px; font-weight:600; cursor:pointer; color:var(--slate);}
.pill-tab.active{background:var(--ink-navy); color:#fff; border-color:var(--ink-navy);}
.fieldrow{display:flex; align-items:center; gap:10px; padding:9px 10px; border:1px solid var(--line); border-radius:7px; margin-bottom:7px; background:#fff;}
.fieldrow .ftype{font-size:10px; text-transform:uppercase; background:var(--paper-2); padding:2px 7px; border-radius:5px; color:var(--brass); font-weight:700; letter-spacing:.4px;}
.fieldrow .fname{flex:1; font-size:12.5px; font-weight:600;}
.togg{width:34px;height:19px; border-radius:20px; background:var(--line); position:relative; cursor:pointer; flex:0 0 34px;}
.togg.on{background:var(--forest);}
.togg::after{content:""; position:absolute; width:15px;height:15px;border-radius:50%; background:#fff; top:2px; left:2px; transition:left .15s ease;}
.togg.on::after{left:17px;}
.wf-flow{display:flex; align-items:center; gap:6px; flex-wrap:wrap; padding:6px 0;}
.wf-step{background:var(--paper-2); border:1px solid var(--brass); border-radius:8px; padding:10px 14px; font-size:12px; font-weight:600; color:var(--ink-navy); position:relative;}
.wf-step .rm{position:absolute; top:-8px; right:-8px; background:var(--seal-red); color:#fff; width:18px;height:18px;border-radius:50%; border:none; font-size:11px; cursor:pointer; line-height:1;}
.wf-arrow{color:var(--brass); font-size:16px;}
.empty-state{text-align:center; padding:40px 20px; color:var(--slate);}
.empty-state .es-icon{font-size:32px; margin-bottom:10px;}
.skel{background:linear-gradient(90deg,var(--paper-2) 25%,#fff 37%,var(--paper-2) 63%); background-size:400% 100%; animation:skel 1.4s ease infinite; border-radius:6px; min-height:14px;}
@keyframes skel{0%{background-position:100% 50%;}100%{background-position:0 50%;}}
@media (max-width: 880px){
  #sidebar{position:fixed; left:-260px; transition:left .2s ease; z-index:100;}
  #sidebar.open{left:0;}
  .form-grid, .two-col{grid-template-columns:1fr;}
  .kanban{grid-template-columns:repeat(5,220px);}
  #view{padding:18px;}
  /* wide data tables scroll inside their card instead of stretching the whole page */
  table.dtable{display:block; overflow-x:auto; -webkit-overflow-scrolling:touch;}
}

/* demo credentials box on the login screen (shown only on demo installs) */
.demo-box .demo-row{cursor:pointer; padding:2px 6px; margin:1px -6px; border-radius:5px;}
.demo-box .demo-row:hover{background:var(--paper-2);}
.demo-box .demo-row span{color:var(--brass);}