/* WindowBilling Tracker portal — HardwareZone grey/orange theme.
   Orange accent #f47b20 (brand) on grey neutrals; layout family follows the
   JFM customer portal (header band, nav, cards, KPI grid, pill controls). */

:root {
  --hw-orange: #f47b20;
  --hw-orange-dark: #e06a10;
  --hw-grey-900: #333;
  --hw-grey-700: #555;
  --hw-grey-600: #666;
  --hw-grey-300: #e0e0e0;
  --hw-grey-200: #e9ecef;
  --hw-grey-100: #f2f3f5;
  --hw-grey-050: #f8f9fa;
  --hw-white: #fff;
  /* legacy aliases */
  --jfm-orange: #f47b20;
  --jfm-orange-dark: #e06a10;
  --jfm-dark: #44484d;
  --jfm-dark-2: #5a5f66;
  --jfm-light: #f2f3f5;
  --jfm-border: #e0e0e0;
  --jfm-text: #333;
  --jfm-muted: #666;
  --jfm-white: #fff;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--hw-grey-100);
  color: var(--hw-grey-900);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

a { color: var(--hw-orange-dark); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------- header band (white, grey/orange) ---------- */
.portal-header {
  background: var(--hw-white);
  border-bottom: 1px solid var(--hw-grey-300);
}
.portal-inner { max-width: 1760px; margin: 0 auto; padding: 0 22px; }
.portal-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  padding-top: 8px;
  padding-bottom: 8px;
}
.brand { display: inline-flex; align-items: center; text-decoration: none; }
.brand:hover { text-decoration: none; opacity: .92; }
.brand-logo { height: 44px; width: auto; display: block; }

.portal-nav { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.portal-nav a {
  color: var(--hw-grey-700);
  font-size: .95em;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 6px;
  text-decoration: none;
}
.portal-nav a:hover { background: var(--hw-grey-100); color: var(--hw-orange-dark); }
.portal-nav a.active { background: rgba(244, 123, 32, .12); color: var(--hw-orange-dark); }
.portal-nav .nav-separator { flex: 1 1 auto; min-width: 12px; }
.portal-nav .who { color: #999; font-size: .82em; }

/* ---------- main content ---------- */
.portal-main { flex: 1; }
.portal-container { max-width: 1760px; margin: 0 auto; padding: 22px 22px 60px; }

.page-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.page-head h1 { margin: 0; font-size: 1.35em; font-weight: 700; color: var(--jfm-dark); }
.page-sub { color: var(--jfm-muted); font-size: .9em; }

/* ---------- KPI grid (as in JFM) ---------- */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 16px; }
.kpi {
  background: var(--jfm-white);
  border: 1px solid var(--jfm-border);
  border-radius: 8px;
  padding: 12px 16px;
}
.kpi .label { font-size: .75em; color: var(--jfm-muted); text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }
.kpi .value { font-size: 1.45em; font-weight: 700; color: var(--jfm-dark); margin-top: 4px; font-variant-numeric: tabular-nums; }
.kpi .value .accent { color: var(--jfm-orange-dark); }
.kpi .hint { font-size: .78em; color: var(--jfm-muted); margin-top: 2px; }

/* ---------- cards ---------- */
.card {
  background: var(--jfm-white);
  border: 1px solid var(--jfm-border);
  border-radius: 8px;
  padding: 16px 18px;
  margin-bottom: 18px;
}
.card h2 { margin: 0 0 12px; font-size: 1em; font-weight: 700; color: var(--jfm-dark); }
.count {
  display: inline-block;
  background: var(--jfm-orange);
  color: #fff;
  border-radius: 10px;
  font-size: .72em;
  padding: 2px 9px;
  vertical-align: 2px;
}

/* ---------- buttons ---------- */
.btn {
  display: inline-block;
  background: var(--jfm-orange);
  color: #fff !important;
  border: 1px solid var(--jfm-orange);
  border-radius: 6px;
  padding: 6px 14px;
  font-size: .9em;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
}
.btn:hover { background: var(--jfm-orange-dark); border-color: var(--jfm-orange-dark); text-decoration: none; }
.btn.ghost { background: #e9ecef; border-color: #e9ecef; color: var(--jfm-text) !important; }
.btn.ghost:hover { background: #dfe2e6; }
.btn.small { padding: 4px 12px; font-size: .8em; }
td.act { text-align: right; white-space: nowrap; }

/* ---------- tables ---------- */
.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: #c3c8cf #eef0f3;
}
.table-wrap::-webkit-scrollbar { height: 12px; }
.table-wrap::-webkit-scrollbar-track { background: #eef0f3; border-radius: 6px; }
.table-wrap::-webkit-scrollbar-thumb { background: #c3c8cf; border-radius: 6px; border: 2px solid #eef0f3; }
.table-wrap::-webkit-scrollbar-thumb:hover { background: var(--hw-orange); }
table.grid { border-collapse: collapse; width: 100%; font-size: .9em; }
.grid th {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--jfm-border);
  font-size: .92em;
  color: var(--jfm-muted);
  font-weight: 600;
  background: #f6f7f9;
  white-space: nowrap;
  position: sticky;
  top: 0;
}
.grid th a { color: var(--jfm-text); }
.grid th a:hover { color: var(--jfm-orange-dark); text-decoration: none; }
.grid td { padding: 8px 12px; border-bottom: 1px solid var(--jfm-border); vertical-align: top; word-break: break-word; }
.grid tbody tr:hover { background: #fff7f0; }
.grid td.num, .grid th.num { text-align: right; font-variant-numeric: tabular-nums; }
td.cell { max-width: 480px; }
td .extra { color: var(--jfm-muted); font-size: .85em; }
td .null { color: #aaa; font-style: italic; }
.muted { color: var(--jfm-muted); }
code { background: #eef0f3; border-radius: 4px; padding: 1px 5px; font-size: .88em; }
code.tbl { background: rgba(244, 123, 32, .12); color: var(--jfm-orange-dark); font-weight: 600; }
.grid.schema td { white-space: nowrap; }
.grid.schema td:first-child code { background: var(--jfm-dark); color: #fff; }

/* ---------- Session Review grid ---------- */
.grid.review { border-collapse: separate; border-spacing: 0; }
.grid.review th, .grid.review td { padding: 6px 8px; white-space: nowrap; vertical-align: middle; }
.grid.review td.cell { max-width: 280px; white-space: normal; }
.grid.review td.cat { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.grid.review td.sel, .grid.review th.sel { width: 30px; text-align: center; padding: 0 2px; }
tr.row-nonbill td { background: #fcfcfd; color: #555; }
/* Sticky right action column — the per-row Save button stays on screen and clickable
   no matter how far the grid is scrolled sideways. Backgrounds are restated per row
   state so scrolled cells never show through the pinned column. */
.grid.review thead th:last-child {
  position: sticky;
  right: 0;
  z-index: 2;
  background: #f6f7f9;
  box-shadow: inset 1px 0 0 var(--jfm-border);
  text-align: right;
  min-width: 92px;
}
.grid.review tbody td.act {
  position: sticky;
  right: 0;
  z-index: 1;
  background: var(--jfm-white);
  box-shadow: inset 1px 0 0 var(--jfm-border);
  text-align: right;
}
.grid.review tbody tr:hover td { background: #fff7f0; }
.grid.review tbody tr.row-nonbill td.act { background: #fcfcfd; }
.grid.review tbody tr.row-nonbill:hover td.act { background: #fff7f0; }
input.client-input {
  font-size: .88em;
  width: 160px;
  padding: 4px 7px;
  border: 1px solid var(--jfm-border);
  border-radius: 5px;
}
input.client-input:focus { border-color: var(--jfm-orange); outline: none; }
input.billcb, input.selrow { cursor: pointer; width: 15px; height: 15px; }
td.nowrap { white-space: nowrap; }

/* ---------- filters ---------- */
.filters { display: flex; gap: 14px; align-items: end; flex-wrap: wrap; margin: 0; }
.filters label { font-size: .8em; color: var(--jfm-muted); display: flex; flex-direction: column; gap: 4px; }
.filters input[type="search"],
.filters input[type="text"],
.filters input[type="date"],
.filters select {
  font-size: .9em;
  padding: 5px 9px;
  border: 1px solid var(--jfm-border);
  border-radius: 6px;
  min-width: 220px;
  background: #fff;
}
.filters input[type="date"] { min-width: 150px; }
.filters select { min-width: auto; }
.filters .export { margin-left: auto; }
.note { color: var(--jfm-muted); font-size: .85em; margin: 10px 0 0; }

/* ---------- date presets (pill row, as in JFM) ---------- */
.presets { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.presets a {
  padding: 4px 13px;
  border: 1px solid var(--jfm-border);
  border-radius: 14px;
  color: var(--jfm-muted);
  font-size: .85em;
  font-weight: 600;
  text-decoration: none;
}
.presets a:hover { border-color: var(--jfm-orange); color: var(--jfm-orange-dark); }
.presets a.active { background: var(--jfm-orange); border-color: var(--jfm-orange); color: #fff; }

/* ---------- bulk actions bar ---------- */
.bulkbar {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  background: #fff7ef;
  border: 1px solid #f5d9bd;
  border-radius: 8px;
  padding: 8px 12px;
  margin-bottom: 12px;
  font-size: .88em;
}
.bulkbar input[type="text"] {
  font-size: .88em;
  padding: 5px 9px;
  border: 1px solid var(--jfm-border);
  border-radius: 6px;
  min-width: 240px;
}
.bulkbar select {
  font-size: .88em;
  padding: 5px 8px;
  border: 1px solid var(--jfm-border);
  border-radius: 6px;
}

/* ---------- flash ---------- */
.flash { background: #d4edda; color: #155724; padding: 12px 16px; border-radius: 4px; margin-bottom: 16px; font-size: .92em; }

/* ---------- pagination (JFM style) ---------- */
.pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: 14px; }
.pager .btn.ghost { border: 1px solid var(--jfm-border); background: #fff; color: var(--jfm-text) !important; }
.pager .btn.ghost:hover { border-color: var(--jfm-orange); color: var(--jfm-orange-dark) !important; background: #fff; }
.pageinfo { color: var(--jfm-muted); font-size: .85em; }

/* ---------- misc ---------- */
.empty { color: var(--jfm-muted); font-size: .95em; padding: 12px 0; }
.footnote { color: var(--jfm-muted); font-size: .8em; margin: 4px 2px; }
.portal-footer {
  border-top: 1px solid var(--jfm-border);
  padding: 14px 22px;
  color: var(--jfm-muted);
  font-size: .8em;
  background: #fff;
}
.nav-links { display: flex; gap: 10px; margin: 0 0 18px; flex-wrap: wrap; }

/* ---------- clients/users directories & 365 pages ---------- */
form.inline { display: inline; margin: 0; }
.tag {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 10px;
  font-size: .74em;
  font-weight: 600;
  color: var(--jfm-muted);
  background: #e9ecef;
  white-space: nowrap;
}
.tag.on { background: rgba(244, 123, 32, .12); color: var(--jfm-orange-dark); }
.m365-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  font-size: .95em;
}
.m365-bar form { margin: 0; }
.m365-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: #2e9e44;
  display: inline-block;
}
.m365-code-head { margin: 6px 0; font-size: .95em; }
.m365-code {
  font-size: 2.1em;
  font-weight: 800;
  letter-spacing: 6px;
  color: var(--jfm-orange-dark);
  background: #fff7ef;
  border: 1px dashed #f5d9bd;
  border-radius: 8px;
  padding: 8px 18px;
  display: inline-block;
  margin: 4px 0 14px;
  font-variant-numeric: tabular-nums;
}

/* ---------- Session Review billing grid (compact, 1080p friendly) ---------- */
.btn.xs { padding: 2px 9px; font-size: .74em; border-radius: 5px; }
.card h2 { display: flex; align-items: center; flex-wrap: wrap; column-gap: 10px; }
.card h2 .count { flex: 0 0 auto; }
.h2-right {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .72em;
  font-weight: 600;
  color: var(--jfm-muted);
}
.grid.review { font-size: .86em; }
.grid.review th, .grid.review td { padding: 5px 6px; }
.grid.review td.cell { max-width: 240px; }
.cliptext {
  max-width: 170px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.grid.review .sub { font-size: .72em; color: #8a8f96; font-weight: 600; white-space: nowrap; }
.grid.review input.client-input,
.grid.review select.cat-sel,
.grid.review input.desc-input {
  font-size: .86em;
  padding: 3px 6px;
  border: 1px solid var(--jfm-border);
  border-radius: 5px;
  background: #fff;
}
.grid.review input.client-input { width: 150px; }
.grid.review select.cat-sel { width: 130px; }
.grid.review input.desc-input { width: 185px; }
.grid.review input.client-input:focus,
.grid.review select.cat-sel:focus,
.grid.review input.desc-input:focus { border-color: var(--jfm-orange); outline: none; }
.flash.setup { background: #fff3cd; color: #856404; }
.grid.review thead th:last-child { min-width: 62px; }
.btn.tile { padding: 11px 24px; font-size: .98em; border-radius: 8px; }
tr.client-editor td, tr.editor-row td { background: #fff7ef; border-bottom: 1px solid #f5d9bd; }
tr.client-editor .filters, tr.editor-row .filters { margin: 6px 0 0; }
label.chk { flex-direction: row; align-items: center; gap: 6px; padding-bottom: 8px; }
label.chk input { margin: 0; }

tr.row-ign td, tr.row-ign td.act { background: #f2f3f5 !important; color: #9aa0a6; }
tr.row-ign td input, tr.row-ign td select { opacity: .6; }
tr.row-ign:hover td { background: #eef0f3 !important; }

.runas-bar {
  background: #f47b20;
  color: #fff;
  padding: 8px 18px;
  text-align: center;
  font-size: .9em;
}
.runas-bar a { color: #fff; font-weight: 700; text-decoration: underline; }

/* ---------- responsive ---------- */
@media (max-width: 1200px) {
  .grid.review td.cell { max-width: 200px; }
  .grid.review td.cat { max-width: 140px; }
  .grid.review .client-input { width: 140px; }
}
@media (max-width: 960px) {
  .portal-header-inner { flex-direction: column; align-items: flex-start; gap: 8px; }
  .portal-nav { width: 100%; }
  .portal-nav .nav-separator { display: none; }
}
@media (max-width: 720px) {
  .portal-container { padding: 16px 12px 50px; }
  .filters input[type="search"] { min-width: 100%; }
  .grid.review .client-input { width: 120px; }
}