/* Adeia, in the EMAX Solutions identity (emax.cloud, EMAX Helpdesk): navy and teal, Segoe UI, quiet surfaces.
   Desktop only (1920x1080 and up). Text stays at one size (Windows display scaling already enlarges it on 1440p and
   4K screens); on wider windows the content area grows instead, so the layout reflows into the extra space. */
:root{
  --navy:#0b2545;        /* brand navy: wordmark, headings, current month, statement band */
  --navy-2:#13315c;
  --teal:#12a594;        /* brand teal: actions, the active tab */
  --teal-dark:#0e8174;
  --teal-soft:#e6f6f4;
  --blue:#1565c0;        /* links */
  --ink:#1c2733;         /* text */
  --muted:#5b6b7b;       /* secondary text */
  --slate:#b8c7d8;       /* earlier months in charts, light rules on navy */
  --line:#e2e8ef;
  --line-strong:#c9d3de;
  --bg:#f4f7fa;          /* page */
  --surface:#ffffff;     /* panels, tables */
  --red:#c42b34;         /* problems only: mismatches, negative margins, expiries */
  --red-soft:#fdecec;
  --amber:#9a5b00;
  --amber-soft:#fdf3e1;
  --grey-soft:#edf1f5;
  --radius:6px;
  --font:"Segoe UI",system-ui,-apple-system,Helvetica,Arial,sans-serif;
  /* names used in older markup */
  --accent:var(--teal-dark);--accent-soft:var(--teal-soft);--warn:var(--amber);--warn-soft:var(--amber-soft);
  --bad:var(--red);--bad-soft:var(--red-soft);--good:var(--teal-dark);--info:var(--muted);--info-soft:var(--grey-soft);
  --card:var(--surface);--pencil:var(--muted);--rule:var(--line);--green:var(--teal-dark);
}
html{font-size:16px}
*{box-sizing:border-box}
/* 14px text like the Helpdesk; rem stays 16px so spacing keeps its proportions */
body{margin:0;min-width:1280px;background:var(--bg);color:var(--ink);font:400 .875rem/1.45 var(--font);font-variant-numeric:tabular-nums lining-nums;overflow-x:hidden}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
a{color:var(--blue)}
.hidden{display:none!important}
.viewer .admin-only{display:none!important}
.muted{color:var(--muted)}
.small{font-size:.8125rem}
.card>p.muted,.card>p:not([class]){max-width:110ch;margin:.25rem 0 .75rem}
.num{text-align:right}
.ok{color:var(--teal-dark)}.err{color:var(--red)}
.up{color:var(--teal-dark);font-weight:600}.down{color:var(--red);font-weight:600}
.zero{color:var(--red);font-weight:700}
code,pre{font-family:"Cascadia Mono",Consolas,ui-monospace,monospace;font-size:.8125rem}
code{background:var(--grey-soft);padding:.0625rem .25rem;border-radius:3px}
p code{overflow-wrap:anywhere}
pre{background:var(--grey-soft);padding:.75rem;border-radius:var(--radius);overflow-x:auto}
h1,h2,h3{color:var(--navy)}

/* ---------------------------------------------------------------- top bar: white, logo, teal-underlined tabs */
.top{background:var(--surface);border-bottom:1px solid var(--line)}
.topbar,nav.tabs,main{max-width:160rem;margin:0 auto;padding-left:2.5rem;padding-right:2.5rem}
.topbar{display:flex;justify-content:space-between;align-items:center;gap:1.5rem;padding-top:.625rem;padding-bottom:0}
.brand{display:flex;align-items:center;gap:1.125rem}
.logo{height:2.125rem;width:auto;display:block}
.product{display:flex;flex-direction:column;padding-left:1.125rem;border-left:1px solid var(--line-strong);
  font-size:1.1875rem;font-weight:700;color:var(--navy);line-height:1.1}
.product-sub{font-size:.75rem;font-weight:400;color:var(--muted);margin-top:.1875rem}
.topright{display:flex;align-items:center;gap:1.75rem}
.month{display:flex;align-items:center;gap:.5rem;color:var(--muted);font-size:.8125rem}
.month select{font:600 .875rem var(--font);color:var(--navy);background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--radius);padding:.3125rem .5rem}
.who{display:flex;align-items:center;gap:.625rem;font-size:.8125rem;color:var(--muted)}
.who .role{font-size:.75rem;font-weight:600;padding:0 .4375rem;border-radius:999px;background:var(--grey-soft);color:var(--muted)}
/* tabs start on the logo's left edge; the teal underline is exactly the word's width */
nav.tabs{display:flex;gap:1.75rem;margin-top:.25rem}
nav.tabs button{font:600 .875rem var(--font);color:var(--muted);background:none;border:0;border-bottom:3px solid transparent;
  padding:.625rem 0 .5rem;cursor:pointer;white-space:nowrap}
nav.tabs button:hover{color:var(--navy)}
nav.tabs button.active{color:var(--navy);border-bottom-color:var(--teal)}

main{padding-top:1.25rem;padding-bottom:3rem}

/* ---------------------------------------------------------------- the month's statement: a navy band */
.statement{background:var(--navy);color:#fff;margin:-1.25rem calc(50% - 50vw) 1.25rem;padding:1.25rem calc(50vw - 50%) 0;
  background-image:linear-gradient(135deg,var(--navy) 0%,var(--navy-2) 100%)}
/* the figure on the left, the year's bars on the right: this month read against the last twelve */
.st-top{display:grid;grid-template-columns:auto minmax(0,1fr);gap:3rem;align-items:end}
.st-head{padding:0 0 .25rem}
.st-chart{max-width:64rem;justify-self:end;width:100%}
.statement .chart text{fill:var(--slate)}
.st-month{font-size:.9375rem;font-weight:600;color:var(--slate);margin:0}
.st-figure{display:flex;align-items:baseline;flex-wrap:wrap;gap:.25rem .875rem;margin:.125rem 0 0}
.st-amount{font-size:2.75rem;font-weight:700;letter-spacing:-.02em;line-height:1.1;color:#fff}
.st-word{font-size:1.125rem;color:var(--slate)}
.st-delta{margin:.25rem 0 0;color:var(--slate)}
.statement .up{color:#7ee0d3}.statement .down{color:#ff9aa0}.statement .muted{color:var(--slate)}
/* column totals: a rule above, the accountant's double rule below */
.st-totals{display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));margin:1rem 0 0;
  border-top:1px solid rgba(255,255,255,.28);border-bottom:3px double rgba(255,255,255,.55)}
.st-totals>div{padding:.625rem 1rem .75rem;border-left:1px solid rgba(255,255,255,.16)}
.st-totals>div:first-child{border-left:0;padding-left:0}
.st-totals dt{font-size:.75rem;color:var(--slate)}
.st-totals dd{margin:.0625rem 0 0;font-size:1.25rem;font-weight:700;color:#fff}
.st-totals dd.st-sub{font-size:.75rem;font-weight:400;color:var(--slate);margin-top:0}
.statement::after{content:"";display:block;height:1.25rem}

/* ---------------------------------------------------------------- panels */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:.875rem 1.25rem .75rem;margin:0 0 1rem}
.card h2{font-size:1.125rem;font-weight:700;margin:0 0 .625rem}
.cardhead{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.5rem 1rem;margin-bottom:.625rem}
.cardhead h2,.cardhead h3{margin:0}
/* things opened from a list: outlined in teal so it's clear which row they belong to */
#detail.card,#custedit.card,#subedit.card{border-color:var(--teal);box-shadow:inset 4px 0 0 var(--teal);padding-left:1.5rem}
/* dashboard: customers in the main column, the attention list as a rail that stays in view */
.workbench{display:grid;grid-template-columns:minmax(0,1fr) 24rem;gap:1rem;align-items:start}
.wb-rail{position:sticky;top:1rem;max-height:calc(100vh - 2rem);display:flex;flex-direction:column;padding-bottom:.5rem}
.wb-rail h2{display:flex;align-items:baseline;gap:.5rem}
.wb-rail .alerts{max-height:none;flex:1;min-height:0;margin:0 -1.25rem;padding:0 1.25rem}
.wb-rail .alerts .muted{font-size:.8125rem}
.count{font-size:.8125rem;font-weight:600;color:var(--muted)}
.grid2{display:grid;grid-template-columns:3fr 2fr;gap:0 1rem}
.grid2>.card{margin-bottom:1rem}
.grid2.stack{grid-template-columns:1fr}
.grid2.stack .chart{margin-top:.75rem}
/* two independent columns of panels (Data sources: Logicom left, the rest right; Settings) */
.cols{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:0 1rem;align-items:start}
#tab-settings.cols{grid-template-columns:1fr 1fr}
.col{min-width:0}
.rules{margin-top:1rem;padding-top:.75rem;border-top:1px solid var(--line)}
.rules h3,#lcmp h3,.sub-h{font-size:.9375rem;font-weight:700;margin:1rem 0 .375rem;display:flex;align-items:center;gap:.5rem}
.rules h3:first-child{margin-top:0}
h3{font-size:.9375rem}
.scroll{overflow-x:auto}

/* ---------------------------------------------------------------- tables: ruled number columns */
table{width:100%;border-collapse:collapse}
/* tinted header row like the Helpdesk's tables, with the navy rule under it */
th{font-size:.75rem;font-weight:600;color:var(--muted);text-align:left;padding:.375rem .5rem;background:var(--bg);border-bottom:2px solid var(--navy);white-space:nowrap;vertical-align:bottom}
td{padding:.4375rem .5rem;border-bottom:1px solid var(--line);vertical-align:top;line-height:1.4}
td .muted.small,td .small{font-size:.75rem}
td.num,th.num{border-left:1px solid var(--line);white-space:nowrap}
tfoot td{font-weight:700;border-top:1px solid var(--navy);border-bottom:0;padding-top:.375rem;padding-bottom:.375rem;color:var(--navy)}
tfoot tr.sub td{font-weight:400;color:var(--muted);border-top:1px solid var(--line)}
tfoot tr:last-child td{border-bottom:3px double var(--navy)}
#customers tbody tr,#custtable tbody tr,#subtable tbody tr,tr.clickable{cursor:pointer}
#customers tbody tr:hover,#custtable tbody tr:hover,#subtable tbody tr:hover,tr.clickable:hover{background:#f7f9fb}
#customers tbody tr.sel,#custtable tbody tr.sel,#subtable tbody tr.sel{background:var(--teal-soft)}
#customers tbody tr.sel td:first-child,#custtable tbody tr.sel td:first-child,#subtable tbody tr.sel td:first-child{box-shadow:inset 3px 0 0 var(--teal)}
tr.inactive td{color:var(--muted)}
#products td,#lcmpcust td,#lcmpprod td,#usertable td,.orders td{vertical-align:middle}
.audit{max-height:18rem;overflow:auto;font-size:.8125rem}
.audit td{padding:.25rem .5rem}

.bar{display:flex;align-items:center;gap:.5rem;min-width:8rem}
.bar .track{flex:1;height:.375rem;background:var(--grey-soft);border-radius:3px;overflow:hidden}
.bar .fill{height:100%;background:var(--teal)}
.bar .fill.low{background:var(--amber)}

/* ---------------------------------------------------------------- attention list */
.alerts{list-style:none;margin:0;padding:0;max-height:22rem;overflow:auto}
.alerts li{display:grid;grid-template-columns:3.5rem 1fr;gap:.5rem;align-items:start;padding:.4375rem 0;line-height:1.35;border-bottom:1px solid var(--line);cursor:pointer}
.alerts li:last-child{border-bottom:0}
.alerts li:hover{background:#f7f9fb}
.alerts li.muted{display:block;cursor:default}
.tag{display:inline-block;font-size:.6875rem;font-weight:700;padding:.0625rem .4375rem;border-radius:999px;white-space:nowrap;text-align:center}
.tag.high{background:var(--red-soft);color:var(--red)}
.tag.med{background:var(--amber-soft);color:var(--amber)}
.tag.info,.tag.off{background:var(--grey-soft);color:var(--muted)}
.tag.on{background:var(--teal-soft);color:var(--teal-dark)}

.chart svg{width:100%;height:auto;display:block}
.chart text{font:12px var(--font);fill:var(--muted)}

/* ---------------------------------------------------------------- controls */
.btn{display:inline-flex;align-items:center;gap:.5rem;font:600 .8125rem var(--font);padding:.375rem .75rem;border-radius:var(--radius);border:1px solid var(--line-strong);background:var(--surface);color:var(--navy);text-decoration:none;cursor:pointer;line-height:1.4}
.btn:hover{border-color:var(--navy)}
.btn.primary{background:var(--teal);border-color:var(--teal);color:#fff}
.btn.primary:hover{background:var(--teal-dark);border-color:var(--teal-dark)}
.btn.danger{background:var(--red);border-color:var(--red);color:#fff}
.btn:disabled{opacity:.45;cursor:not-allowed}
.linkbtn,.hist button{background:none;border:0;color:var(--red);cursor:pointer;font:inherit;padding:0 .125rem}
.linkbtn.checkorder{color:var(--blue);font-weight:600}
input:not([type=checkbox]):not([type=radio]):not([type=file]),select,textarea{font:inherit;color:var(--ink);background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--radius);padding:.3125rem .5rem}
input:not([type=checkbox]):not([type=radio]):not([type=file]):focus,select:focus,textarea:focus{border-color:var(--teal);box-shadow:0 0 0 3px rgba(18,165,148,.18);outline:0}
input[type=number]{width:6rem;text-align:right}
textarea{width:100%;font:.8125rem/1.45 "Cascadia Mono",Consolas,ui-monospace,monospace;margin:.5rem 0}
#set-general textarea,#set-sources textarea,#custform textarea,#subform textarea{font:inherit}
input[type=checkbox]{accent-color:var(--teal);width:1rem;height:1rem}
input.pname{width:100%}
input.ym{width:7rem}
input.note{min-width:12rem;flex:1}
.row,.inline{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
.form{display:grid;grid-template-columns:repeat(auto-fit,minmax(10rem,1fr));gap:.625rem;align-items:end;margin:.625rem 0}
.form label,.settings-grid label{display:flex;flex-direction:column;gap:.1875rem;font-size:.75rem;color:var(--muted)}
.form input,.form select{width:100%;text-align:left}
.form .wide,.settings-grid .wide{grid-column:1/-1}
.settings-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:.625rem .875rem;margin:.375rem 0 .75rem}
.settings-grid input,.settings-grid select,.settings-grid textarea{margin:0;width:100%}
.settings-grid input[type=number]{text-align:left}
.check{display:flex!important;flex-direction:row!important;align-items:center;gap:.5rem;color:var(--ink)!important;font-size:.8125rem!important}
.check input{width:1rem}
.badges{display:flex;gap:.25rem;flex-wrap:wrap;margin-top:.25rem}
.badge{font-size:.6875rem;font-weight:600;padding:0 .4375rem;border-radius:999px;background:var(--teal-soft);color:var(--teal-dark);white-space:nowrap}
.hist{font-size:.75rem;color:var(--muted);line-height:1.7}
.hist span{white-space:nowrap;margin-right:.75rem}
.kv{display:grid;grid-template-columns:max-content 1fr;gap:.1875rem 1rem;font-size:.8125rem;margin:.375rem 0 .75rem}
.kv dt{color:var(--muted)}.kv dd{margin:0}
details summary{cursor:pointer;color:var(--blue);font-weight:600;margin:.5rem 0}
.status{display:inline-block;font-size:.6875rem;font-weight:700;padding:.0625rem .4375rem;border-radius:999px}
.status.ok{background:var(--teal-soft);color:var(--teal-dark)}
.status.partial{background:var(--amber-soft);color:var(--amber)}
.status.failed{background:var(--red-soft);color:var(--red)}
.status.running{background:var(--grey-soft);color:var(--muted)}
#lcmp select,#products select,#usertable select{max-width:18rem;padding:.25rem .375rem}

/* ---------------------------------------------------------------- ordering */
.orderbox{border:1px solid var(--line);border-left:3px solid var(--teal);border-radius:var(--radius);padding:.75rem 1rem;margin:.75rem 0;background:#fbfcfd}
.orderbox h3{margin:0 0 .5rem}
.orderbox select[size]{width:100%}
.confirm{border-top:1px solid var(--line);margin-top:.75rem;padding-top:.75rem}
.warnbox{background:var(--amber-soft);color:var(--amber);padding:.5rem .625rem;border-radius:var(--radius);font-size:.8125rem}

/* ---------------------------------------------------------------- sign-in */
.loginpage{min-height:100vh;display:grid;place-items:center;background:var(--bg)}
.logincard{background:var(--surface);border:1px solid var(--line);border-top:4px solid var(--teal);border-radius:var(--radius);
  padding:2.25rem;width:26rem;display:flex;flex-direction:column;gap:1.25rem;box-shadow:0 6px 24px rgba(11,37,69,.08)}
.logincard p{margin:0}
.logincard .signin{justify-content:center;padding:.625rem 1rem;font-size:.9375rem}
.ms-logo{width:1.125rem;height:1.125rem;background:#fff;padding:2px;border-radius:2px}