:root{--green:#2f7d32;--green-d:#1b5e20;--bg:#f4f6f4;--card:#fff;--line:#dce1dc;--muted:#6b756b;--red:#c0392b;--amber:#b9770e}
*{box-sizing:border-box}
body{margin:0;font-family:-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:var(--bg);color:#1e241e}
a{color:var(--green-d)}
header.top{background:var(--green-d);color:#fff;padding:10px 18px;display:flex;align-items:center;gap:18px}
header.top .brand{font-weight:700;font-size:16px}
header.top .hdr-logo{height:26px;width:auto;display:block;filter:brightness(0) invert(1);opacity:.95}
header.top .hdr-select{background:rgba(255,255,255,.15);color:#fff;border:1px solid rgba(255,255,255,.35);border-radius:6px;padding:5px 8px;font-size:13px;cursor:pointer}
header.top .hdr-select option{color:#1e241e}
/* modal popup (create role) */
.modal-ov{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:850;display:flex;align-items:flex-start;justify-content:center;overflow:auto;padding:5vh 16px}
.modal{background:#fff;border-radius:12px;box-shadow:0 16px 48px rgba(0,0,0,.3);padding:22px 24px;width:760px;max-width:100%;position:relative}
/* table pagination */
.pg-bar{display:flex;align-items:center;gap:12px;margin:2px 0 8px;font-size:13px}
.pg-bar label{display:inline;color:#1e241e;margin:0}
.pg-bar select{padding:4px 6px;font-size:13px}
.pg-count{font-size:12px}
.pg-pager{display:flex;align-items:center;justify-content:flex-end;margin-top:8px;font-size:13px}
/* inventory: current-warehouse banner */
.wh-banner{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  background:linear-gradient(90deg,var(--green-d),var(--green));color:#fff;border-radius:12px;padding:16px 22px;margin-bottom:16px}
.wh-banner .wh-b-label{font-size:12px;text-transform:uppercase;letter-spacing:.06em;opacity:.85}
.wh-banner .wh-b-name{font-size:26px;font-weight:800;line-height:1.1;margin-top:2px}
.wh-banner label{color:#eafae9}
.wh-banner select{font-size:15px;padding:8px 10px;min-width:180px;border-radius:8px;border:1px solid rgba(255,255,255,.5);background:rgba(255,255,255,.15);color:#fff;font-weight:600}
.wh-banner select option{color:#1e241e}
/* roles & permissions grid */
.perm-grid{display:flex;flex-wrap:wrap;gap:14px;margin-top:10px}
.perm-group{border:1px solid var(--line);border-radius:8px;padding:8px 12px;min-width:230px;background:#fbfdfb}
.perm-group-h{font-weight:700;font-size:12px;color:var(--green-d);text-transform:uppercase;letter-spacing:.03em;margin-bottom:6px}
.perm{display:flex;align-items:center;gap:7px;font-size:13px;color:#1e241e;padding:3px 0;cursor:pointer}
.perm input{width:auto}
/* login branding */
.login-brand{text-align:center;margin-bottom:14px}
.login-brand img{width:230px;max-width:80%;height:auto}
.login-brand .login-sub{color:var(--muted);font-size:13px;margin-top:4px;font-weight:600}
header.top nav{display:flex;gap:4px;flex-wrap:wrap}
header.top nav button{background:transparent;border:0;color:#dbeeda;padding:8px 12px;border-radius:6px;cursor:pointer;font-size:14px}
header.top nav button.active,header.top nav button:hover{background:rgba(255,255,255,.15);color:#fff}
header.top .spacer{flex:1}
.dropdown{position:relative;display:inline-block}
.dropdown-menu{display:none;position:absolute;top:100%;left:0;background:#fff;border:1px solid var(--line);border-radius:8px;box-shadow:0 6px 20px rgba(0,0,0,.15);min-width:190px;z-index:50;overflow:hidden;margin-top:4px}
.dropdown-menu.open{display:block}
.dropdown-menu a{display:block;padding:9px 14px;color:#1e241e;font-size:14px;cursor:pointer;text-decoration:none}
.dropdown-menu a:hover{background:#eef3ee;color:var(--green-d)}
.subnav{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.subnav button{background:#eef2ee;border:1px solid var(--line);color:var(--green-d);padding:7px 12px;border-radius:6px;cursor:pointer;font-size:13px}
.subnav button.active{background:var(--green);color:#fff;border-color:var(--green)}
.crumb{font-size:13px;color:var(--muted);margin-bottom:10px}
.crumb a{cursor:pointer}
.tile{display:inline-flex;flex-direction:column;justify-content:center;min-width:150px;padding:14px 16px;border:1px solid var(--line);border-radius:10px;margin:0 10px 10px 0;cursor:pointer;background:#fff}
.tile:hover{border-color:var(--green);box-shadow:0 2px 8px rgba(0,0,0,.06)}
.tile b{font-size:15px}
.tile .sub{color:var(--muted);font-size:12px;margin-top:3px}
.badge-off{background:#fdecea;color:var(--red)}
.badge-on{background:#eaf6ea;color:var(--green-d)}
/* reconciliation colours */
.metrics{display:flex;flex-wrap:wrap;gap:12px;margin:8px 0 14px}
.metric{border:1px solid var(--line);border-radius:10px;padding:10px 16px;min-width:130px;background:#fbfdfb}
.metric .mv{font-size:20px;font-weight:600;color:var(--green-d)}
.metric .ml{font-size:12px;color:var(--muted);margin-top:2px}
.metric.shrink{background:#f3f8f3;border-color:var(--green)}
.metric.shrink .mv{font-weight:800;color:#12401a}
.metric.shrink .ml{font-weight:700;color:#12401a}
.cell-green{background:#ddf3dd}
.cell-red{background:#f9d2ce}
.cell-amber{background:#fce9c6}
/* recon tree */
.tree{border:1px solid var(--line);border-radius:8px;overflow:hidden}
.tnode{padding:9px 12px;border-top:1px solid var(--line);cursor:pointer;font-size:14px;user-select:none}
.tnode:first-child{border-top:0}
.tnode .caret{display:inline-block;width:14px;color:#555}
.tnode.lvl1{padding-left:34px;font-size:13px}
.tnode.lvl2{padding-left:58px;font-size:13px}
.lvl3{padding:8px 12px 12px 58px;background:#fafcfa;border-top:1px solid var(--line)}
.schedpt{border:1px solid var(--line);border-radius:8px;padding:8px 10px;margin-bottom:8px;background:#fff}
.schedpt-h{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.schedpt label{margin-bottom:2px}
/* lock-points: per-pod grouping */
.lp-pod{margin-bottom:14px}
.lp-pod-h{font-weight:700;color:var(--green-d);font-size:14px;padding:8px 10px;background:#eef3ee;border:1px solid var(--line);border-radius:8px;cursor:pointer;user-select:none}
.lp-pod-h:hover{background:#e3ece3}
.lp-pod-h .caret{display:inline-block;width:14px;color:#555}
.lp-pod:has(table) .lp-pod-h{border-bottom:0;border-radius:8px 8px 0 0}
/* fixed layout + shared colgroup widths keep every pod's columns aligned,
   so the split-by-pod tables read as one continuous table */
.lp-tbl{table-layout:fixed;width:100%}
.lp-tbl td,.lp-tbl th{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lp-pod table{border-top-left-radius:0;border-top-right-radius:0}
/* compact report tables: smaller font + tight padding so wide tables fit */
table.compact{font-size:11px}
table.compact th,table.compact td{padding:3px 5px}
table.compact input,table.compact select{font-size:11px;padding:3px 4px}
/* help drawer */
.help-ov{position:fixed;inset:0;background:rgba(0,0,0,.28);z-index:800}
.help-drawer{position:fixed;top:0;right:0;height:100%;width:370px;max-width:92vw;background:#fff;box-shadow:-6px 0 24px rgba(0,0,0,.2);z-index:801;overflow:auto;padding:18px 20px}
.help-drawer h3{margin:0 0 10px;color:var(--green-d)}
.help-drawer h4{color:var(--green-d)}
.help-body{font-size:13.5px;line-height:1.5}
.help-body p{margin:6px 0}
.help-close{float:right;cursor:pointer;font-size:18px;color:var(--muted);line-height:1}
.help-close:hover{color:#000}
/* guided tour */
.tour-ov{position:fixed;inset:0;z-index:900}
.tour-hl{position:fixed;z-index:901;border:2px solid var(--green);border-radius:6px;box-shadow:0 0 0 9999px rgba(0,0,0,.55);pointer-events:none;transition:all .18s ease}
.tour-tip{position:fixed;z-index:902;background:#fff;border-radius:10px;padding:13px 15px;max-width:290px;box-shadow:0 10px 34px rgba(0,0,0,.35)}
.tour-nav{display:flex;align-items:center;gap:8px;margin-top:12px}
.row-green{background:#e8f6e8}
.row-amber{background:#fdefd2}
.row-red{background:#fbdcd8}
.tnode.row-green:hover{background:#dcefdc}
.tnode.row-amber:hover{background:#fbe6bf}
.tnode.row-red:hover{background:#f6cec8}
header.top .who{font-size:13px;color:#cfe6ce}
.container{max-width:1200px;margin:20px auto;padding:0 18px}
.card{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:18px;margin-bottom:18px}
.card h2{margin:0 0 12px;font-size:18px}
.card h3{margin:16px 0 8px;font-size:15px}
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end}
label{display:block;font-size:12px;color:var(--muted);margin-bottom:3px}
input,select,textarea{padding:8px;border:1px solid var(--line);border-radius:6px;font-size:14px;background:#fff}
input[type=number]{width:90px}
/* entry fields (IDS C/M/D, TMS B/P): hide up/down spinners so typed values stay fully visible */
input.cmd{-moz-appearance:textfield;appearance:textfield;text-align:center}
input.cmd::-webkit-outer-spin-button,input.cmd::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.btn{background:var(--green);color:#fff;border:0;padding:9px 14px;border-radius:6px;cursor:pointer;font-size:14px}
.btn:hover{background:var(--green-d);color:#fff}
.btn.sec{background:#eef2ee;color:var(--green-d);border:1px solid var(--line)}
.btn.sec:hover{color:var(--green-d)}
.btn.sm{padding:5px 9px;font-size:13px}
a.btn{display:inline-block;text-decoration:none;text-align:center;box-sizing:border-box}
table{border-collapse:collapse;width:100%;font-size:13px}
th,td{border:1px solid var(--line);padding:6px 8px;text-align:left}
th{background:#eef3ee}
.muted{color:var(--muted)}
.pill{display:inline-block;padding:2px 8px;border-radius:20px;font-size:12px;background:#eef3ee;color:var(--green-d)}
.err{color:var(--red);font-size:13px}
.ok{color:var(--green-d);font-size:13px}
.right{text-align:right}
.neg{color:var(--red)}
.pos{color:var(--amber)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.hidden{display:none}
.list-item{display:flex;justify-content:space-between;align-items:center;padding:8px 10px;border:1px solid var(--line);border-radius:6px;margin-bottom:6px;cursor:pointer;background:#fff}
.list-item:hover{border-color:var(--green)}
/* login */
.login-wrap{max-width:360px;margin:8vh auto}
.login-wrap .card{padding:26px}
/* print sheets */
.sheet{background:#fff;border:1px solid #000;padding:10px;font-size:11px}
.sheet.landscape{}
.sheet table{font-size:10px}
.sig-group{border:1px solid var(--line);border-radius:8px;padding:8px 12px;margin-bottom:8px}
.sig-group>b{font-size:13px}
.table-scroll{overflow-x:auto;max-width:100%}
.table-scroll table{min-width:100%}
@media print{.table-scroll{overflow:visible}}
.sheet th,.sheet td{border:1px solid #000;padding:2px 3px}
.sheet .title{font-weight:700;font-size:14px}
@media print{
  header.top,nav,.no-print{display:none !important}
  .container{margin:0;max-width:none;padding:0}
  .card{border:0;padding:0;margin:0}
  .sheet{border:0}
  @page{size:A4 portrait;margin:8mm}
  .sheet.landscape~*, .landscape-page{}
}

/* ============================================================
   Mobile / small-screen layout
   ============================================================ */
@media (max-width:820px){
  /* Header: let it wrap onto multiple lines instead of squashing.
     Rows end up as: [logo · brand · country], [nav tabs], [user · help · sign-out] */
  header.top{flex-wrap:wrap;gap:8px 10px;padding:8px 12px}
  header.top .brand{font-size:14px;flex:1 1 auto}
  header.top .spacer{display:none}
  header.top nav{width:100%;gap:2px}
  header.top nav button{padding:7px 10px;font-size:13px}
  header.top .who{font-size:12px}
  /* Dropdowns: keep the menu on-screen (stays anchored under its button) */
  .dropdown-menu{max-width:calc(100vw - 24px)}

  .container{margin:12px auto;padding:0 12px}
  .card{padding:14px}
  .card h2{font-size:16px}

  /* Wide tables scroll horizontally inside their card instead of
     blowing out the whole page width */
  .card{overflow-x:auto}
  table{font-size:12px}
  th,td{padding:5px 6px}

  /* Forms stack into a single column, full-width controls */
  .row{gap:10px}
  .row>div{flex:1 1 100%}
  .grid2{grid-template-columns:1fr}
  input,select,textarea{width:100%}
  input[type=number]{width:100%}
  /* 16px prevents iOS Safari from auto-zooming when a field is focused */
  input,select,textarea{font-size:16px}
  .btn{width:100%}
  .btn.sm,a.btn.sm{width:auto}
  /* keep small inline/table buttons and toolbar buttons from going full-width */
  table .btn,.subnav .btn,.row .btn.sm{width:auto}

  /* Sub-navigation and metric tiles wrap comfortably */
  .subnav{gap:6px}
  .subnav button{flex:1 1 auto}
  .metric{min-width:calc(50% - 12px)}
  .tile{min-width:calc(50% - 10px)}

  /* Pagination controls stack tidily */
  .pg-bar{flex-wrap:wrap}

  /* Help drawer takes the full width on a phone */
  .help-drawer{width:100%;max-width:100%}

  /* Warehouse banner: stack the switcher under the name */
  .wh-banner{padding:14px 16px}
  .wh-banner .wh-b-name{font-size:20px}
  .wh-banner select{width:100%}

  /* Lock-points: keep every pod block (header + table) at one shared min width so
     they stay aligned while the card scrolls horizontally, rather than crushing the
     fixed columns on a phone. Checkboxes must not be stretched by the global
     full-width input rule. */
  .lp-pod{min-width:520px}
  .lp-ck{width:auto}
}