/* Olir Estimator — design system
   Navy sidebar shell · ice-blue workspace · paper-white cards
   IBM Plex Sans for UI, Plex Mono for every number. Orange is spent in
   exactly one place: the active/action accent. */
:root{
  --bg:#EFF5FC; --surface:#FFFFFF; --surface2:#E7EFF9; --line:#D3DEEC;
  --ink:#0A2540; --muted:#54677F; --accent:#0052BF; --accent-soft:#E0EBFA;
  --accent2:#FF7F00; --navy:#001F3D; --navy2:#00315F; --navy3:#0A2C52;
  --good:#177A4C; --good-soft:#DFF0E7; --warn:#A96700; --warn-soft:#FFEDD6;
  --bad:#B23A2E; --bad-soft:#F7E4E1;
  --shadow:0 1px 2px rgba(10,37,64,.05),0 4px 16px rgba(10,37,64,.06);
  --radius:12px;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--bg);color:var(--ink);font-family:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;font-size:15px;line-height:1.55}
a{color:var(--accent);text-decoration:none}
.mono{font-family:"IBM Plex Mono",ui-monospace,Consolas,monospace}

/* ---------- app shell: navy sidebar + workspace ---------- */
.app{display:grid;grid-template-columns:216px 1fr;min-height:100vh}
.side{background:linear-gradient(178deg,var(--navy) 0%,var(--navy3) 100%);color:#DCE8F7;
  display:flex;flex-direction:column;position:sticky;top:0;height:100vh;padding:1.15rem .9rem 1rem}
.side .mark{display:flex;align-items:center;gap:.55rem;padding:.15rem .45rem .95rem;
  border-bottom:1px solid rgba(255,255,255,.09);margin-bottom:.9rem}
.side .mark img{width:28px;height:28px;object-fit:contain;background:#fff;border-radius:7px;padding:3px}
.side .mark .co{display:flex;flex-direction:column;line-height:1.2;min-width:0}
.side .mark .co b{font-size:.83rem;font-weight:600;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side .mark .co span{font-size:.62rem;letter-spacing:.14em;color:#7E9CC6}
.snav{display:flex;flex-direction:column;gap:.15rem;flex:1}
.snav a{display:flex;align-items:center;gap:.6rem;color:#B9CCE6;font-size:.86rem;font-weight:500;
  padding:.5rem .65rem;border-radius:8px;border-left:3px solid transparent}
.snav a:hover{background:rgba(255,255,255,.06);color:#fff}
.snav a.on{background:rgba(255,255,255,.09);color:#fff;border-left-color:var(--accent2)}
.snav .gap{margin-top:auto}
.side .who{border-top:1px solid rgba(255,255,255,.09);padding:.8rem .45rem .1rem;
  font-size:.78rem;color:#9FB6D6;display:flex;flex-direction:column;gap:.15rem}
.side .who b{color:#fff;font-weight:600;font-size:.83rem}
.side .who a{color:#7E9CC6;font-size:.74rem}
.side .who a:hover{color:var(--accent2)}
.main{min-width:0;padding:1.7rem 2.1rem 4rem;max-width:1120px}

h1{font-size:1.42rem;font-weight:700;letter-spacing:-.015em;margin:.2rem 0 .3rem}
h2{font-size:1rem;font-weight:600;margin:1.8rem 0 .6rem}
.sub{color:var(--muted);font-size:.87rem;margin:0 0 1.25rem}
.pagehead{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:.4rem}

/* ---------- cards & tiles ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.25rem 1.4rem;margin-bottom:1.05rem;box-shadow:var(--shadow)}
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:.85rem;margin:1.1rem 0 1.3rem}
.tile{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:.9rem 1.05rem;box-shadow:var(--shadow)}
.tile .k{font-size:.68rem;color:var(--muted);text-transform:uppercase;letter-spacing:.09em;font-weight:600}
.tile .v{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:1.35rem;font-weight:600;margin-top:.25rem;font-variant-numeric:tabular-nums}
.tile .d{font-size:.73rem;color:var(--muted);margin-top:.1rem}

/* ---------- tables ---------- */
.tblwrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:.86rem}
th{text-align:left;color:var(--muted);font-weight:600;font-size:.68rem;text-transform:uppercase;letter-spacing:.07em;padding:.5rem .6rem;border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:.6rem;border-bottom:1px solid var(--line);vertical-align:middle}
tr:last-child td{border-bottom:none}
td.num,th.num{text-align:right;font-family:"IBM Plex Mono",ui-monospace,monospace;font-variant-numeric:tabular-nums;white-space:nowrap}
tr:hover td{background:var(--surface2)}
tr.nohover:hover td{background:transparent}

/* ---------- pills ---------- */
.pill{display:inline-block;border-radius:99px;padding:.12rem .66rem;font-size:.71rem;font-weight:600;white-space:nowrap}
.p-acc{background:var(--accent-soft);color:var(--accent)}
.p-good{background:var(--good-soft);color:var(--good)}
.p-warn{background:var(--warn-soft);color:var(--warn)}
.p-bad{background:var(--bad-soft);color:var(--bad)}
.p-mut{background:var(--surface2);color:var(--muted)}

/* ---------- forms ---------- */
label{display:block;font-size:.74rem;font-weight:600;color:var(--muted);margin-bottom:.28rem;letter-spacing:.01em}
input[type=text],input[type=number],input[type=password],input[type=date],input[type=email],select,textarea{
  width:100%;background:var(--surface);border:1px solid var(--line);border-radius:8px;
  padding:.52rem .7rem;font-size:.9rem;font-family:inherit;color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent);outline-offset:-1px;border-color:var(--accent)}
input[readonly].calc{background:var(--surface2);border-color:transparent;font-family:"IBM Plex Mono",monospace;text-align:right;font-weight:600}
.field{margin-bottom:.9rem}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 1.05rem}
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0 1.05rem}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:0 1.05rem}
.sect{font-size:.68rem;letter-spacing:.11em;text-transform:uppercase;color:var(--muted);margin:1.25rem 0 .75rem;font-weight:700;display:flex;align-items:center;gap:.6rem}
.sect::after{content:"";flex:1;height:1px;background:var(--line)}
.card > .sect:first-child{margin-top:0}

/* ---------- totals strip on the document form ---------- */
.totals{background:var(--navy);border-radius:10px;padding:1rem 1.2rem;display:grid;
  grid-template-columns:repeat(4,1fr);gap:.9rem;margin:.4rem 0 1rem}
.totals .t .k{font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:#8FA9CC;font-weight:600}
.totals .t .v{font-family:"IBM Plex Mono",monospace;color:#fff;font-size:1.02rem;font-weight:600;margin-top:.2rem;font-variant-numeric:tabular-nums}
.totals .t.grand .v{color:#FFB25E;font-size:1.25rem}

/* ---------- buttons ---------- */
.btn{display:inline-block;background:var(--accent);color:#fff;border:none;border-radius:8px;
  padding:.52rem 1.1rem;font-size:.87rem;font-weight:600;cursor:pointer;font-family:inherit}
.btn:hover{background:var(--navy2)}
.btn.ghost{background:var(--surface);color:var(--ink);border:1px solid var(--line);font-weight:500}
.btn.ghost:hover{background:var(--surface2)}
.btn.small{padding:.3rem .72rem;font-size:.77rem}
.btn.danger{background:var(--surface);color:var(--bad);border:1px solid var(--line)}
.btn:focus-visible{outline:2px solid var(--accent2);outline-offset:2px}
.actions{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;margin-top:1.1rem}

/* ---------- flash ---------- */
.flash{border-radius:8px;padding:.62rem .95rem;font-size:.86rem;margin:0 0 1rem}
.flash.ok{background:var(--good-soft);color:var(--good)}
.flash.err{background:var(--bad-soft);color:var(--bad)}

/* ---------- login ---------- */
.login-wrap{min-height:100vh;display:grid;grid-template-columns:minmax(380px,46%) 1fr}
.login-brand{position:relative;overflow:hidden;color:#F4F9FF;
  background:linear-gradient(158deg,var(--navy) 28%,#00347A 92%,#003C8C 130%);
  display:flex;flex-direction:column;justify-content:space-between;
  padding:2.6rem 3rem 2.2rem;gap:2rem}
/* soft orange glow anchoring the panel's lower left */
.login-brand::after{content:"";position:absolute;left:-90px;bottom:-120px;width:340px;height:340px;
  background:radial-gradient(circle,rgba(255,127,0,.20),transparent 68%);pointer-events:none}
.login-brand > *{position:relative;z-index:1}

.brand-top{display:flex;align-items:center;gap:.85rem}
.brand-logo{width:60px;height:60px;object-fit:contain;background:#fff;border-radius:14px;
  padding:8px;display:block;box-shadow:0 6px 20px rgba(0,0,0,.22)}
.brand-word{display:flex;flex-direction:column;line-height:1.15}
.brand-word b{font-size:1.32rem;font-weight:700;letter-spacing:.2em;color:#fff}
.brand-word span{font-size:.62rem;letter-spacing:.26em;color:#8FAAD0;margin-top:.2rem}

.login-brand .head{font-size:2.1rem;font-weight:600;line-height:1.24;letter-spacing:-.02em;margin:0}
.login-brand .lede{font-size:.92rem;color:#A9C2E4;margin:.85rem 0 0;max-width:34ch;line-height:1.62}
.brand-points{list-style:none;margin:1.9rem 0 0;padding:0;display:flex;flex-direction:column;gap:.95rem;max-width:38ch}
.brand-points li{display:flex;flex-direction:column;gap:.12rem;padding-left:.95rem;
  border-left:2px solid rgba(255,127,0,.55)}
.brand-points b{font-size:.87rem;font-weight:600;color:#fff}
.brand-points span{font-size:.79rem;color:#93AECF;line-height:1.5}

.brand-foot{display:flex;align-items:center;gap:.65rem;font-size:.66rem;letter-spacing:.16em;color:#7E9CC6}
.brand-foot i{width:30px;height:2px;background:var(--accent2);border-radius:1px;display:block;flex:none}

.login-form{display:flex;align-items:center;justify-content:center;background:var(--surface);padding:2rem 1.4rem}
.login-form .box{width:100%;max-width:322px}
.login-form h1{margin-top:0}
.form-foot{font-size:.76rem;color:var(--muted);margin:1.1rem 0 0;text-align:center;line-height:1.5}

/* ---------- dashboard filter bar ---------- */
.filterbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  flex-wrap:wrap;margin:.2rem 0 .3rem}
.chips{display:flex;gap:.4rem;flex-wrap:wrap}
.chip{display:inline-block;padding:.34rem .85rem;border-radius:99px;font-size:.82rem;
  font-weight:500;color:var(--muted);background:var(--surface);border:1px solid var(--line)}
.chip:hover{background:var(--surface2);color:var(--ink)}
.chip.on{background:var(--navy);border-color:var(--navy);color:#fff;font-weight:600}
.daterange{display:flex;align-items:center;gap:.45rem;flex-wrap:wrap}
.daterange input[type=date]{width:auto;padding:.34rem .5rem;font-size:.82rem}
.inline-label{display:inline;margin:0;font-size:.74rem;color:var(--muted);font-weight:600}

/* ---------- inline link-style buttons (table row actions) ---------- */
.linkbtn{background:none;border:none;padding:0 0 0 .55rem;font:inherit;font-size:.8rem;
  color:var(--accent);cursor:pointer}
.linkbtn:hover{text-decoration:underline}
.linkbtn.del{color:var(--bad)}
.linkbtn:focus-visible{outline:2px solid var(--accent2);outline-offset:2px;border-radius:3px}

/* ---------- destructive area ---------- */
.danger-zone{border-color:#E9C9C4}
.danger-zone .sect{color:var(--bad)}
.danger-zone .sect::after{background:#E9C9C4}

/* ---------- PDF preview ---------- */
.pdfcard{padding:0;overflow:hidden}
.pdfframe{display:block;width:100%;height:78vh;min-height:420px;border:0;background:var(--surface2)}

/* ---------- misc ---------- */
.tag{font-family:"IBM Plex Mono",monospace;font-size:.7rem;border:1px solid var(--line);border-radius:5px;padding:.05rem .4rem;color:var(--muted)}
.muted{color:var(--muted)}
.small{font-size:.8rem}
.right{text-align:right}
details.rowform{margin:.3rem 0}
details.rowform summary{cursor:pointer;font-size:.8rem;color:var(--accent);list-style:none}
details.rowform[open] summary{margin-bottom:.5rem}
.inline-form{display:inline}
.help{font-size:.76rem;color:var(--muted);margin-top:.3rem;line-height:1.5}

@media(prefers-reduced-motion:no-preference){
  .btn,.snav a{transition:background .15s ease,color .15s ease}
}
@media(max-width:900px){
  .app{grid-template-columns:1fr}
  .side{position:static;height:auto;flex-direction:row;align-items:center;gap:.6rem;
    padding:.6rem .8rem;flex-wrap:wrap}
  .side .mark{border:none;margin:0;padding:0}
  .snav{flex-direction:row;flex-wrap:wrap;gap:.1rem}
  .snav a{border-left:none;border-bottom:2px solid transparent;border-radius:6px;padding:.4rem .55rem;font-size:.8rem}
  .snav a.on{border-left:none;border-bottom-color:var(--accent2)}
  .snav .gap{margin:0}
  .side .who{border:none;padding:0;margin-left:auto;flex-direction:row;gap:.5rem;align-items:center}
  .main{padding:1.1rem 1rem 3rem}
  .tiles{grid-template-columns:1fr 1fr}
  .grid2,.grid3,.grid4{grid-template-columns:1fr}
  .totals{grid-template-columns:1fr 1fr}
  .login-wrap{grid-template-columns:1fr}
  .login-brand{padding:1.8rem 1.6rem;gap:1.4rem}
  .login-brand .head{font-size:1.5rem}
  .brand-logo{width:48px;height:48px;border-radius:11px;padding:6px}
  .brand-word b{font-size:1.1rem}
  .brand-points{display:none}          /* keep the mobile header compact */
  .brand-foot{display:none}
  .filterbar{align-items:stretch;flex-direction:column;gap:.6rem}
}
@media(max-height:720px) and (min-width:901px){
  .brand-points li:nth-child(3){display:none}   /* avoid a scrollbar on short screens */
}

/* ---------- phones ---------- */
@media(max-width:560px){
  body{font-size:15px}
  .main{padding:.9rem .8rem 3rem}
  h1{font-size:1.22rem}

  /* sidebar becomes a two-row header: brand + who, then the nav strip */
  .side{padding:.55rem .7rem}
  .side .mark{flex:1 1 auto;min-width:0}
  .side .mark .co b{font-size:.8rem}
  .side .who{flex:0 0 auto;font-size:.72rem;text-align:right}
  .side .who b{font-size:.76rem}
  .snav{flex:1 0 100%;order:3;overflow-x:auto;flex-wrap:nowrap;
    -webkit-overflow-scrolling:touch;scrollbar-width:none}
  .snav::-webkit-scrollbar{display:none}
  .snav a{white-space:nowrap;padding:.45rem .6rem}

  /* one column everywhere; stat tiles stay two-up so numbers stay readable */
  .tiles{grid-template-columns:1fr 1fr;gap:.6rem}
  .tile{padding:.7rem .8rem}
  .tile .v{font-size:1.15rem}
  .totals{grid-template-columns:1fr 1fr;padding:.85rem .9rem;gap:.7rem}
  .card{padding:1rem .95rem;border-radius:10px}

  /* full-width controls are easier to hit than side-by-side ones */
  .pagehead{align-items:flex-start}
  .pagehead .actions{width:100%}
  .actions .btn{flex:1 1 auto;text-align:center}
  .chips{width:100%}
  .chip{flex:1 1 auto;text-align:center}
  .daterange{width:100%}
  .daterange input[type=date]{flex:1 1 40%;min-width:0}
  form[style*="display:flex"] > div{min-width:0 !important;flex:1 1 100%}
  input[type=text],input[type=number],input[type=password],input[type=date],
  input[type=email],select,textarea{max-width:none !important;font-size:16px}

  /* tables scroll inside their card rather than stretching the page */
  table{font-size:.82rem}
  th,td{padding:.5rem .45rem}

  /* mobile PDF viewers are unreliable inside a frame — keep it short and
     let the Download button do the work */
  .pdfframe{height:58vh;min-height:300px}

  /* bigger tap targets for row actions */
  .linkbtn{padding:.35rem .4rem;font-size:.84rem}
  .btn{padding:.58rem 1.05rem}
  .btn.small{padding:.4rem .8rem;font-size:.8rem}
}