/* AMES Interface v0.3A — UI skin (Figma-aligned)
   Timestamp: 2026-01-22 03:35 (GMT)
*/
:root{
  /* 3-blue system (tokens only)
     - Page background
     - Header bar
     - Inner container background
  */
  --bg: var(--blueDark);
  --headerBar: var(--panelDark);
  --ink: var(--textOnLight);
  /* UI Pool token binding (preferred). ui_pool.css defines these tokens. */
  --panel: var(--blue);
  --panel2: var(--panelDark);
  --panelLite: var(--panelLight);
  --accent: var(--red);
  --paper: var(--textOnDark);
  --line:color-mix(in srgb, var(--textOnLight) 18%, transparent);
  --shadow:0 10px 28px color-mix(in srgb, var(--textOnLight) 18%, transparent);
  --radius:14px;
}
*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  background:var(--bg);
  color:var(--textOnDark);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;
}
/* ==========================================================
   Shared UI components — centralized styles (canon-aligned)
   NOTE: Frozen reference pages define the look; these classes
   simply expose that look for every other page.
   ========================================================== */

/* Panel: blue shell with white text */
.ames-panel{
  background:var(--panel);
  color:var(--textOnDark);
  border-radius:18px;
  box-shadow:var(--shadow);
  padding:18px;
  margin:18px auto;
  /* Remove outer border (prevents "double dark border"); keep inner borders only */
  border:none;
}

/* Light inner panel (canon: light blue work surface used inside blue panels/modals) */
.ames-light-panel{
  background: var(--panelLite);
  color: var(--ink);
  border-radius: 14px;
  border: 1px solid var(--blueDark);
  padding: 10px 12px;
  box-shadow:none;
}

/* Card: paper/white interior */
.ames-card{
  background:var(--textOnDark);
  color:var(--ink);
  border-radius:16px;
  padding:12px;
  box-shadow:var(--shadow);
}

/* Modal */
.ames-modal-backdrop{
  position:fixed;
  inset:0;
  background:color-mix(in srgb, var(--textOnLight) 45%, transparent);
  display:none;
  align-items:center;
  justify-content:center;
  padding:18px;
  z-index:9999;
}
.ames-modal-backdrop.show{display:flex}
.ames-modal{ max-width:760px; width:100%; }

/* Button variants (legacy names normalized) */
.btn-red{ background:var(--accent); color:var(--textOnDark); border:none; border-radius:12px; padding:10px 14px; font-weight:900; cursor:pointer; box-shadow:none; }
.btn-red:active{ transform:translateY(1px); }

.btn-ghost{
  background:color-mix(in srgb, var(--textOnDark) 14%, transparent);
  color:var(--textOnDark);
  border:1px solid color-mix(in srgb, var(--textOnDark) 28%, transparent);
  border-radius:12px;
  padding:10px 14px;
  font-weight:900;
  cursor:pointer;
}
.btn-ghost:hover{ filter:brightness(1.05); }
.btn-ghost:active{ transform:translateY(1px); }
.btn-ghost.active{outline:2px solid color-mix(in srgb, var(--textOnDark) 25%, transparent);background:color-mix(in srgb, var(--textOnDark) 15%, transparent)}

/* Inputs */
.ames-input,
input[type="text"], input[type="search"], input[type="date"], input[type="number"], select, textarea{
  border:1px solid var(--line);
  border-radius:12px;
  padding:10px 12px;
  font-size:14px;
}

/* ========================================================== */



/* Layout */
.ames-shell{min-height:100vh;display:flex;flex-direction:column;}
.ames-top{
  background:var(--headerBar);
  padding:24px 22px 10px;
}
.ames-top-inner{max-width:1200px;margin:0 auto;}
.ames-title{
  margin-left:12px;
  font-weight:900;
  letter-spacing:0.5px;
  font-size:56px;
  line-height:1;
}
.ames-subbar{
  display:grid;
  grid-template-columns: 1fr auto 1fr;
  align-items:center;
  gap:12px;
  margin-top:10px;
}
.ames-tabs{display:flex;gap:10px;flex-wrap:wrap;}

.ames-left{display:flex;align-items:center;justify-content:flex-start;}
.ames-right{display:flex;align-items:center;justify-content:flex-end;gap:14px;}
.right-tabs{justify-content:flex-end;}

.ames-hub{display:flex;justify-content:center;align-items:center;min-width:160px;}

.hub-link{
  display:inline-flex;align-items:center;justify-content:center;
  height:70px;min-width:240px;padding:0 40px;
  border-radius:16px;
  background:var(--accent);
  border:3px solid color-mix(in srgb, var(--textOnLight) 8%, transparent);
  color:var(--textOnDark);text-decoration:none;
  font-weight:900;letter-spacing:0.5px;
  box-shadow:var(--shadow);
}
.hub-link:hover{filter:brightness(1.05);}
.hub-link.active{filter:brightness(1.05);border-color:var(--textOnDark);}

@media (max-width:640px){
  .ames-subbar{grid-template-columns: 1fr; gap:10px;}
  .ames-hub{justify-content:center;}
  .ames-right{justify-content:space-between;}
  .hub-link{width:100%;min-width:0;}
}

.circle-link{
  width:62px;height:62px;border-radius:999px;
  background:var(--accent);
  display:flex;align-items:center;justify-content:center;
  color:var(--textOnDark);text-decoration:none;
  font-weight:900;font-size:14px;
  box-shadow:var(--shadow);
  border:3px solid color-mix(in srgb, var(--textOnLight) 8%, transparent);
}
.circle-link:hover{filter:brightness(1.05)}

.ames-userpill{
  display:flex;align-items:center;gap:10px;
  background:var(--textOnDark);
  border:1px solid var(--line);
  border-radius:999px;
  padding:10px 12px;
  box-shadow:0 6px 16px color-mix(in srgb, var(--textOnLight) 10%, transparent);
}
.ames-userpill .dot{width:10px;height:10px;border-radius:999px;background:var(--panel)}
.ames-userpill .muted{opacity:.7;font-size:12px}

.ames-main{flex:1;}
.ames-main-inner{max-width:1200px;margin:0 auto;padding:14px 22px 30px;}

/* Panels */
.panel{
  background:var(--panel);
  color:var(--textOnDark);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:16px;
}
.panel h1,.panel h2,.panel h3{margin:0 0 10px}
.panel .muted{opacity:.8}

.card{
  /* Canon interior surface: light-blue everywhere (UI Pool panelLight) */
  background:var(--panelLite);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:0 10px 24px color-mix(in srgb, var(--textOnLight) 10%, transparent);
  padding:14px;
}

/* Transparent card for forms placed inside blue panels */
.card.card-clear{
  background:transparent;
  border:none;
  box-shadow:none;
  padding:0;
  color:var(--textOnDark);
}
.card.card-clear label{opacity:.9}
.card.card-clear h3,
.card.card-clear h4{color:var(--textOnDark)}

/* Usage page: keep the left form in the same blue language as panels */
.usage-card{
  background:var(--panel);
  color:var(--textOnDark);
  border:1px solid var(--panelLight);
}
.usage-card label{opacity:.9}
.usage-card input,
.usage-card select,
.usage-card textarea{
  background:var(--textOnDark);
  color:var(--textOnLight);
}

/* Company Settings: Figma-like blue cards (scoped so other pages are not affected) */
.manager-page .card{
  background:var(--panel);
  color:var(--textOnDark);
  border:1px solid var(--panelLight);
}
.manager-page .card label{opacity:.9}
.manager-page .muted{opacity:.85}

/* Keep form fields readable on blue cards */
.manager-page input,
.manager-page select,
.manager-page textarea{
  background:var(--textOnDark);
  color:var(--textOnLight);
}

/* Tables sit on a white surface inside blue cards */
.manager-page .table-wrap{
  background:var(--textOnDark);
  border:1px solid var(--panelLight);
  border-radius:14px;
  padding:10px;
}
.manager-page .table{color:var(--textOnLight);}
.manager-page .table th{color:var(--textOnLight);}
.manager-page .table td{color:var(--textOnLight);}

.grid{display:grid;gap:14px;}
.grid.two{grid-template-columns:1fr 1fr;}
@media(max-width:980px){.grid.two{grid-template-columns:1fr;}.ames-title{font-size:44px}}

/* Forms */
label{display:block;font-size:12px;opacity:.85;margin:10px 0 6px;}
input:not([type="checkbox"]):not([type="radio"]),select,textarea{
  width:100%;
  padding:11px 12px;
  border-radius:12px;
  border:1px solid var(--line);
  outline:none;
  background:var(--textOnDark);
}
textarea{min-height:90px;resize:vertical}
input:focus,select:focus,textarea:focus{border-color:var(--panelDark);box-shadow:0 0 0 4px color-mix(in srgb, var(--panelDark) 12%, transparent)}


/* ==========================================================
   CANONICAL CHECKMARKS (Equipment-style)
   - One checkbox look everywhere
   - Enforces: size, padding reset, alignment, min hit-box
   ========================================================== */

:root{
  --cb-size: 30px;
  --cb-radius: 10px;
  --cb-border: 2px;
  --cb-shadow: 0 6px 14px color-mix(in srgb, var(--textOnLight) 18%, transparent);
  --cb-focus: 0 0 0 4px color-mix(in srgb, var(--red) 20%, transparent), 0 6px 14px color-mix(in srgb, var(--textOnLight) 18%, transparent);
  --cb-check-svg: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M20%206L9%2017l-5-5%27%20fill%3D%27none%27%20stroke%3D%27%23fff%27%20stroke-width%3D%274%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27/%3E%3C/svg%3E");
}

/* Base checkbox input */
input[type="checkbox"]{
  appearance:none;
  -webkit-appearance:none;
  width: var(--cb-size);
  height: var(--cb-size);
  padding:0;               /* critical: prevent global input padding distortions */
  margin:0;
  border-radius: var(--cb-radius);
  border: var(--cb-border) solid var(--accent);
  background:var(--textOnDark);
  cursor:pointer;
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  box-shadow: var(--cb-shadow);
  vertical-align:middle;
  flex: 0 0 var(--cb-size);
}
input[type="checkbox"]::after{
  content:'';
  width: 18px;
  height: 18px;
  background-image: var(--cb-check-svg);
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  opacity:0;
  transform: translateY(-1px);
}
input[type="checkbox"]:checked{
  background:var(--accent);
  border-color:var(--accent);
}
input[type="checkbox"]:checked::after{ opacity:1; }
input[type="checkbox"]:focus{ outline:none; box-shadow: var(--cb-focus); }

/* Any legacy 'small' variants are neutralized for guide consistency */
.cb-small,
input[type="checkbox"].small{
  width: var(--cb-size) !important;
  height: var(--cb-size) !important;
  border-radius: var(--cb-radius) !important;
}

/* Checkbox container used by metric-pill toggles (same visual as input checkbox) */
.metric-cbbox{
  width: var(--cb-size);
  height: var(--cb-size);
  border-radius: var(--cb-radius);
  border: var(--cb-border) solid var(--accent);
  background:var(--textOnDark);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex: 0 0 var(--cb-size);
  box-shadow: var(--cb-shadow);
}
.metric-cbbox::after{
  content:'';
  width: 18px;
  height: 18px;
  background-image: var(--cb-check-svg);
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  opacity:0;
  transform: translateY(-1px);
}
.metric-cb:checked + .metric-cbbox{
  background:var(--accent);
  border-color:var(--accent);
}
.metric-cb:checked + .metric-cbbox::after{ opacity:1; }

/* ==========================================================
   BASE CHECKLIST ITEM (metric-pill)
   - One pill look everywhere
   - Ensures checkbox area never shrinks (text can wrap)
   - Removes “double checkbox” by hiding the real input when a visual box exists
   ========================================================== */

/* When using the metric-pill pattern (input.metric-cb + span.metric-cbbox):
   hide the real checkbox input so only ONE box is visible. */
.metric-pill{ position:relative; display:flex; align-items:center; gap:12px; }
.metric-pill .metric-cb{
  position:absolute;
  opacity:0;
  width:1px;
  height:1px;
  margin:0;
  padding:0;
  pointer-events:none;
}
/* Safety override: prevent native checkbox box/check from rendering (stops double boxes/checks in some browsers). */
.metric-pill .metric-cb{
  -webkit-appearance:none !important;
  appearance:none !important;
  background:transparent !important;
  border:0 !important;
}
.metric-pill .metric-cb::after{ content:none !important; }


/* Canonical pill sizing (matches “good” screenshots) */
.metric-pill{
  padding:8px 12px;
  border-radius:18px;
  border:1px solid color-mix(in srgb, var(--textOnDark) 22%, transparent);
  background:color-mix(in srgb, var(--textOnDark) 8%, transparent);
  min-height:48px;
  cursor:pointer;
  user-select:none;
}

/* Keep checkbox size locked even when text wraps */
.metric-pill .metric-cbbox{ flex:0 0 var(--cb-size); }

.metric-pill .metric-label{
  font-weight:900;
  letter-spacing:.01em;
  line-height:1.05;
  color:var(--textOnDark)fff;
}

/* When metric pills appear inside light panels/cards (e.g., Equipment edit modal),
   match the canon “light board” look: dark text + subtle grey pill. */
.card .metric-pill,
.ames-light-panel .metric-pill,
.panel-light .metric-pill,
.info-light .metric-pill,
.card-light .metric-pill,
.ames-modal-body .metric-pill{
  background: color-mix(in srgb, var(--textOnLight) 3%, transparent);
  border-color: color-mix(in srgb, var(--textOnLight) 10%, transparent);
}
.card .metric-pill .metric-label,
.ames-light-panel .metric-pill .metric-label,
.panel-light .metric-pill .metric-label,
.info-light .metric-pill .metric-label,
.card-light .metric-pill .metric-label,
.ames-modal-body .metric-pill .metric-label{
  color:var(--textOnLight);
}

/* Equipment page "Tracked Metrics" readability */
.metrics-box .metric-pill .metric-label,
.metrics-box .metric-pill .metric-unit{
  color:var(--textOnLight);
}

/* Equipment page tracked metrics live inside .metrics-box (not always a .card).
   Force dark text there so it’s readable against the light pill background. */
.metrics-box .metric-pill{
  background: color-mix(in srgb, var(--textOnLight) 3%, transparent);
  border-color: color-mix(in srgb, var(--textOnLight) 10%, transparent);
}
.metrics-box .metric-label{ color:var(--textOnLight); }

/* Focus state: when the hidden input receives focus, highlight the visual box */
.metric-pill .metric-cb:focus + .metric-cbbox{ box-shadow: var(--cb-focus); }

/* Mini checkbox row (Inspection builder flags, small toggles)
   Uses SAME checkbox box (metric-cbbox) + SAME check icon + SAME size tokens.
   Hides the real input to prevent double boxes. */
.cb-mini{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:10px;
  user-select:none;
  cursor:pointer;
  white-space:nowrap;
}
.cb-mini .metric-cb{
  position:absolute;
  opacity:0;
  width:1px;
  height:1px;
  margin:0;
  padding:0;
  pointer-events:none;
}
.cb-mini .metric-cbbox{ flex:0 0 var(--cb-size); }
.cb-mini .cb-label{ font-weight:900; letter-spacing:.01em; }


.cb-mini .metric-cbbox{
  flex:0 0 var(--cb-size);
}
.cb-mini .cb-label{
  font-weight:900;
  font-size:13px;
  line-height:1.05;
  color:var(--textOnLight);
}
/* On dark/blue surfaces, cb-mini label text should be white */
.panel .cb-mini .cb-label,
.jobs-panel .cb-mini .cb-label,
.inv-panel .cb-mini .cb-label,
.ames-blue .cb-mini .cb-label{
  color:var(--textOnDark);
}




.btn{
  background:var(--accent);
  color:var(--textOnDark);
  border:none;
  border-radius:12px;
  padding:10px 14px;
  font-weight:900;
  cursor:pointer;
  box-shadow:none;
}
.btn.secondary{background:var(--textOnDark);color:var(--textOnLight);border:1px solid var(--line);box-shadow:none}
.btn.blue{background:var(--panel)}
.btn:active{transform:translateY(1px)}

.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}

/* Tables */
/* Canon: tables should sit on the same light-blue work surface used across Equipment/Inspections. */
.table-wrap{
  overflow:auto;
  border-radius:14px;
  border:none;
  background: var(--panelLite);
  padding:0;
}
.table{
  width:100%;
  border-collapse:collapse;
  min-width:760px;
  font-size:13px;
  color: var(--ink);
}
.table th,.table td{padding:10px 10px;border-bottom:1px solid color-mix(in srgb, var(--textOnLight) 12%, transparent);vertical-align:top}
.table th{font-weight:900;text-align:left;opacity:.95}
.table tr:hover td{background:color-mix(in srgb, var(--textOnLight) 3%, transparent)}

/* Bigger tables for readability (equipment list, etc.) */
.table-big{font-size:16px;}
.table-big th,.table-big td{padding:14px 12px;}


.notice{border-radius:12px;padding:10px 12px;border:1px solid var(--line);background:var(--textOnDark)}
.notice.good{border-color:var(--blue)}
.notice.bad{border-color:var(--red)}

/* Auth layout */
.auth-wrap{max-width:980px;margin:0 auto;}
.auth-panel{display:grid;grid-template-columns:1.2fr .8fr;gap:14px}
@media(max-width:980px){.auth-panel{grid-template-columns:1fr}}

.tabs{display:flex;gap:10px;margin:0 0 12px}
.tab{display:inline-flex;align-items:center;justify-content:center;padding:10px 16px;border-radius:16px 16px 0 0;background:var(--panelLight);color:var(--textOnLight);font-weight:900;cursor:pointer;user-select:none;border:2px solid color-mix(in srgb, var(--textOnLight) 15%, transparent);border-bottom:none;box-shadow:0 2px 8px color-mix(in srgb, var(--textOnLight) 10%, transparent)}
.tab.active{background:var(--red);color:var(--textOnDark);}

.footer{opacity:.7;font-size:12px;margin-top:14px}

/* Auth card overrides (match frozen pages: blue shell + light-blue interior) */
.auth-panel .card{
  background: var(--panelLite);
  color:var(--textOnLight);
  border: 1px solid color-mix(in srgb, var(--textOnLight) 8%, transparent);
}
.auth-panel .card label{ color:var(--textOnLight); opacity:1; }
.auth-panel .card h3, .auth-panel .card h4{ color:var(--textOnLight); }
.auth-panel .card .muted{ color: color-mix(in srgb, var(--textOnLight) 65%, transparent); }

/* Utilities */
.hidden{display:none !important}



/* Header actions (sign out only) */
.ames-actions{display:flex;align-items:center;gap:10px}

/* Hub (customer-ready) */
.hub-wrap{max-width:1200px;margin:0 auto;padding:14px 22px 30px;}
.hub-hero{background:var(--panel);color:var(--textOnDark);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px;}
.hub-hero h2{margin:0;font-size:44px;letter-spacing:.5px}
.hub-hero .sub{opacity:.85;margin-top:6px}
.hub-circles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:26px;margin-top:22px;}
@media(max-width:1050px){.hub-circles{grid-template-columns:repeat(3,1fr)}}
@media(max-width:780px){.hub-circles{grid-template-columns:repeat(2,1fr);gap:18px}.hub-hero h2{font-size:34px}}
.hub-circle{
  width:160px;height:160px;border-radius:999px;
  background:var(--accent);
  display:flex;align-items:center;justify-content:center;
  color:var(--textOnDark);text-decoration:none;
  font-weight:900;
  box-shadow:var(--shadow);
  border:4px solid color-mix(in srgb, var(--textOnLight) 8%, transparent);
  margin:0 auto;
  text-align:center;
  padding:18px;
  line-height:1.05;
}
.hub-circle span{display:block;font-size:22px}
.hub-circle small{display:block;font-size:13px;opacity:.92;margin-top:6px;font-weight:700}
.hub-circle:hover{filter:brightness(1.05)}


.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:780px){.grid2{grid-template-columns:1fr}}
.hr{height:1px;background:color-mix(in srgb, var(--textOnDark) 25%, transparent);margin:12px 0}
.card h3{margin:0 0 10px 0}
.card .section-title{font-weight:900;margin:0 0 10px 0}
.pill{display:inline-block;background:color-mix(in srgb, var(--textOnDark) 18%, transparent);border:1px solid color-mix(in srgb, var(--textOnDark) 22%, transparent);padding:4px 10px;border-radius:999px;font-weight:800}
.help{font-size:12px;color:color-mix(in srgb, var(--textOnLight) 35%, transparent);margin-top:6px}
input[type="time"]{padding:10px 12px;border-radius:12px;border:1px solid var(--line);background:var(--textOnDark);width:100%}

/* Header mini profile */
.ames-mini{display:flex;align-items:center;gap:10px}
.ames-mini-avatar{width:34px;height:34px;border-radius:999px;border:2px solid color-mix(in srgb, var(--textOnLight) 8%, transparent);object-fit:cover;background:var(--panelLight)}
.ames-mini-text{display:flex;flex-direction:column;line-height:1.1}
.ames-mini-name{font-weight:900;font-size:13px}
.ames-mini-sub{font-size:11px;color:color-mix(in srgb, var(--textOnLight) 35%, transparent)}
@media(max-width:620px){
  .ames-mini-text{display:none}
}


/* Settings page header */
.settings-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.btn.admin-btn{background:var(--red);border:1px solid var(--blueDark);color:var(--textOnDark);border-radius:10px;padding:12px 16px;font-weight:700;text-decoration:none}
.btn.admin-btn:hover{filter:brightness(1.05)}

.circle-link.big{width:92px;height:92px;font-size:16px;}

/* Jobs page (v0.3A) */
.jobs-panel{background:var(--panel);color:var(--textOnDark);border-radius:18px;box-shadow:var(--shadow);padding:18px;margin:18px auto;max-width:1100px}
.jobs-panel h1{margin:0;font-size:34px;letter-spacing:.5px}
.jobs-panel .sub{opacity:.9;margin-top:6px;margin-bottom:12px}
.jobs-topbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.jobs-card{background:var(--panelLite);border-radius:16px;padding:12px;box-shadow:0 10px 28px color-mix(in srgb, var(--textOnLight) 14%, transparent);color:var(--textOnLight);margin-top:12px;overflow:auto;border:1px solid color-mix(in srgb, var(--textOnLight) 10%, transparent)}
/* Jobs tables must use shared .table/.table-wrap standards. Keep these as non-overriding aliases only. */
.jobs-table{width:100%;}
.jobs-table th,.jobs-table td{vertical-align:top}

/* Jobs list: EQ / INV / DOC link pills */
.jobs-flaglink{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:6px 10px;border-radius:10px;font-weight:900;letter-spacing:.02em;text-decoration:underline;cursor:pointer;user-select:none;line-height:1;}
.jobs-flaglink:hover{filter:brightness(0.98)}
.jobs-flaglink.has-items{background:var(--red);color:var(--textOnDark);text-decoration:none;border:1px solid color-mix(in srgb, var(--textOnDark) 65%, transparent);box-shadow:0 6px 18px color-mix(in srgb, var(--textOnLight) 18%, transparent)}
.jobs-flaglink.has-items:hover{filter:brightness(1.02)}

/* Jobs list: keep Edit/Send/Close on one row (no row-height growth) */
.jobs-actions-row{
  display:flex;
  gap:8px;
  flex-wrap:nowrap;
  justify-content:flex-end;
  align-items:center;
}
.jobs-actions-row .btn,
.jobs-actions-row .btn-red{
  padding:8px 10px;
  font-size:12px;
  line-height:1;
  white-space:nowrap;
}

/* Jobs list: ensure actions cell never wraps */
.jobs-table td:last-child{ white-space:nowrap; }
.jobs-table td:last-child .jobs-actions-row{ flex-wrap:nowrap; }


/* Jobs modal */
.jobs-modal-backdrop{position:fixed;inset:0;background:color-mix(in srgb, var(--textOnLight) 45%, transparent);display:none;align-items:center;justify-content:center;padding:18px;z-index:9999}
.jobs-modal-backdrop.show{display:flex}
.jobs-modal{
  background:var(--panel);
  color:var(--textOnDark);
  border-radius:22px;
  box-shadow:var(--shadow);
  max-width:760px;
  width:100%;
  padding:18px;
  border:1px solid color-mix(in srgb, var(--textOnDark) 18%, transparent);
}
.jobs-modal h2{margin:0 0 6px 0}
.jobs-modal .sub{margin:0 0 10px 0;color:color-mix(in srgb, var(--textOnDark) 85%, transparent)}
.jobs-modal input[type="text"],
.jobs-modal input[type="date"],
.jobs-modal textarea{width:100%;border:1px solid var(--line);border-radius:12px;padding:10px 12px;font-size:14px}
.jobs-modal textarea{min-height:90px;resize:vertical}

/* Work Orders modals should match AMES panel scheme (blue shell, paper interior) */
.wo-modal{
  background: var(--panel);
  color: var(--textOnDark);
  border-radius: 22px;
  padding: 18px;
  border: 1px solid color-mix(in srgb, var(--textOnDark) 18%, transparent);
}
.wo-modal h2{ color:var(--textOnDark); }
.wo-modal .sub{ color: color-mix(in srgb, var(--textOnDark) 85%, transparent); }

/* Certify checkbox in Close/Reopen modals uses canonical big red checkbox */
.wo-cert-cb{flex:0 0 auto; margin-right:8px;}
.jobs-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:12px;flex-wrap:wrap}


/* Buttons: active state (tabs) */
.btn-ghost.active{outline:2px solid color-mix(in srgb, var(--textOnDark) 25%, transparent);background:color-mix(in srgb, var(--textOnDark) 15%, transparent)}


/* --- Inspections page layout + accessibility --- */
.insp-page{
  background:var(--panelDark);
  padding:14px;
}
.insp-panel{
  max-width:1200px;
  margin:0 auto;
}
.insp-toprow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  /* Tabs should feel attached to the work window, not floating above it. */
  margin-bottom:-14px;
  padding-left:14px;
  position:relative;
  z-index:5;
}

.insp-tabs{ display:flex; gap:10px; }
/* Inspections tab buttons are styled by UI Pool (.ames-tab). Only neutralize native button chrome. */
.insp-tabbtn{
  border:none;
  background:transparent;
  padding:0;
  font:inherit;
}
.insp-grid{
  display:grid;
  grid-template-columns: 1fr 1fr; /* 50/50 */
  gap:14px; /* gray gutter shows through */
}
.insp-card{
  background:var(--panelLight); /* work window light */
  border-radius:14px;
  padding:14px;
  box-shadow:0 6px 16px color-mix(in srgb, var(--textOnLight) 15%, transparent);
}
.insp-card h3,
.insp-card h4{color:var(--ink);}
.insp-card h3{ font-size:30px; font-weight:1000; letter-spacing:.5px; }
.insp-card h4{ font-size:20px; font-weight:900; letter-spacing:.3px; }
.whitebox{
  background:var(--textOnDark);
  border:1px solid color-mix(in srgb, var(--textOnLight) 12%, transparent);
  border-radius:12px;
  padding:12px;
}
.insp-card label{display:block;margin:10px 0 6px;font-weight:800;color:var(--ink);}
.insp-card .mutedw{ color:color-mix(in srgb, var(--textOnLight) 75%, transparent); }
.insp-card .muted{ color:color-mix(in srgb, var(--textOnLight) 65%, transparent); } /* for small helper text inside white inputs area if any */

/* Metric toggle pills sit on a light panel – force readable dark text */
.insp-card .metric-label{ color:var(--textOnLight) !important; }
.insp-card .metric-pill{
  background: color-mix(in srgb, var(--textOnLight) 4%, transparent);
  border: 1px solid var(--blueDark);
}
.insp-card .metric-pill:hover{ background: color-mix(in srgb, var(--textOnLight) 6%, transparent); }

.insp-card .inp{
  background:var(--textOnDark);
  color:var(--textOnLight);
  border-radius:10px;
  border:1px solid color-mix(in srgb, var(--textOnLight) 15%, transparent);
  padding:10px 12px;
  font-size:16px;
}
.step-one-row{
  display:flex;
  align-items:flex-end;
  gap:10px;
  flex-wrap:wrap;
}
.step-num{ width:80px; }
.step-short{ flex:1; min-width:220px; }

/* Inspection Builder checkbox rows - use canonical big red checkboxes */
.ames-checkrow{
  display:flex;
  align-items:center;
  gap:10px;
  cursor:pointer;
  user-select:none;
  margin:0;
  padding:8px 10px;
  border-radius:14px;
  border:1px solid color-mix(in srgb, var(--textOnDark) 18%, transparent);
  background: color-mix(in srgb, var(--textOnDark) 8%, transparent);
  color:var(--textOnDark);
  font-weight:800;
  font-size:14px;
  white-space:nowrap;
}
.ames-checkrow input[type="checkbox"]{ margin:0; }

.steps-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.step-editor{
  border:1px solid color-mix(in srgb, var(--textOnDark) 22%, transparent);
  border-radius:12px;
  padding:12px;
  background:color-mix(in srgb, var(--textOnDark) 8%, transparent);
}
.step-editor-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}
.step-editor-title{ color:var(--textOnDark); font-weight:800; }
.step-editor-grid{
  display:grid;
  grid-template-columns: 160px 1fr;
  gap:10px;
}

@media (max-width: 980px){
  .insp-grid{ grid-template-columns: 1fr; }
}


/* === 10d Header / Hub sizing === */
.ames-top{padding:20px 22px 20px;}
.ames-title{font-size:48px;text-align:center;margin-left:0;}
.ames-subbar{grid-template-columns: auto 1fr auto;}

.ames-hub{
  flex-direction:column;
  gap:12px;
}

.hub-link{
  min-width:360px;
  height:68px;
  font-size:22px;
  letter-spacing:3px;
}

.circle-link{
  width:72px;
  height:72px;
  font-size:16px;
}

.ames-right .btn.secondary{
  height:44px;
  font-size:14px;
}


/* === 10e Header refinement: single HUB, right-side circles, top-right signout === */
.ames-top{padding:18px 22px 18px;}
.ames-top-inner{position:relative;}
.ames-title{font-size:52px;text-align:center;margin-left:0;}

.ames-signout{
  position:absolute;
  top:6px;
  right:0;
}

.ames-subbar{
  grid-template-columns: 1fr auto 1fr;
  align-items:center;
  gap:16px;
  margin-top:10px;
}

.ames-left{justify-content:flex-start;}
.ames-hub{justify-content:center;}
.ames-right{justify-content:flex-end;gap:16px;}

/* Bigger circles for Pings / MSG / User */
.circle-link.big{width:112px;height:112px;font-size:18px;}

/* Single HUB centered and strong */
.hub-link{
  min-width:420px;
  width:min(92vw, 520px);
  height:72px;
  font-size:22px;
  letter-spacing:3px;
}

/* Keep signout modest */
.ames-signout .btn.secondary{
  height:44px;
  padding:0 14px;
  font-size:14px;
}

/* Mobile */
@media (max-width:640px){
  .ames-signout{position:static; display:flex; justify-content:flex-end; margin-top:6px;}
  .hub-link{width:100%;min-width:0;}
  .circle-link.big{width:92px;height:92px;font-size:16px;}
}


/* === 11a Header layout: right-side vertical stack, larger circles, tighter spacing === */
.ames-top{padding:14px 22px 10px;}
.ames-title{font-size:56px;text-align:center;margin-left:0;}

.ames-subbar{
  margin-top:6px;
  grid-template-columns: 1fr auto 1fr;
  align-items:start;
}

/* Right stack becomes vertical */
.right-tabs{
  flex-direction:column;
  align-items:flex-end;
  gap:18px;
}

/* Bigger circles */
.circle-link.big{
  width:140px;
  height:140px;
  font-size:19px;
}

/* Keep hub centered and prominent */
.hub-link{
  width:min(92vw, 620px);
  height:76px;
  font-size:23px;
  letter-spacing:4px;
}

/* Sign out stays top-right */
.ames-signout{top:0; right:0;}


/* === 11b FROZEN SHELL: fixed header 260px, console layout ===
   Timestamp: 2026-01-25 08:10 (GMT)
*/
:root{
 --header-bg: var(--bg);
 --main-bg: color-mix(in srgb, var(--textOnLight) 18%, transparent); /* slightly darker than header */
}

/* Shell sizing */
.ames-shell{min-height:100vh;}
.ames-top{
 background:var(--header-bg);
 height:260px;
 padding:14px 22px;
 box-sizing:border-box;
}
.ames-top-inner{
 height:100%;
 position:relative;
 display:flex;
 flex-direction:column;
 justify-content:flex-start;
 max-width:1200px;
 margin:0 auto;
}

/* Title */
.ames-title{
 margin:0;
 font-weight:900;
 letter-spacing:2px;
 font-size:56px;
 line-height:1;
 text-align:center;
 margin-top:2px;
}

/* Signout utility */
.ames-signout{
 position:absolute;
 top:10px;
 right:0;
}
.ames-signout .btn.secondary{
 height:44px;
 padding:0 14px;
 font-size:14px;
}

/* Row under title */
.ames-subbar{
 margin-top:14px;
 display:grid;
 grid-template-columns: 1fr auto 1fr;
 align-items:center;
 gap:18px;
}

/* Left/Right zones */
.ames-left{display:flex;justify-content:flex-start;align-items:center;}
.ames-right{display:flex;justify-content:flex-end;align-items:center;gap:18px;}
.ames-hub{display:flex;justify-content:center;align-items:center;}

/* Circles */
.ames-tabs{display:flex;gap:18px;flex-wrap:nowrap;}
.right-tabs{justify-content:flex-end;}

.circle-link.big{
 width:220px;
 height:220px;
 border-radius:999px;
 font-size:34px;
 letter-spacing:1px;
}
.circle-link.mid{
 width:140px;
 height:140px;
 border-radius:999px;
 font-size:30px;
 letter-spacing:1px;
}

/* HUB */
.hub-link{
 width:min(92vw, 520px);
 height:86px;
 min-width:0;
 padding:0 26px;
 border-radius:14px;
 background:var(--accent);
 color:var(--textOnDark);
 font-weight:900;
 font-size:40px;
 letter-spacing:4px;
 text-decoration:none;
 display:inline-flex;
 align-items:center;
 justify-content:center;
 box-shadow:var(--shadow);
 border:3px solid color-mix(in srgb, var(--textOnLight) 8%, transparent);
}
.hub-link.active{border-color:var(--textOnDark);}

/* Main work zone */
.ames-main{
 flex:1;
 background:var(--main-bg);
 min-height:0; /* allow flex children to size */
}
.ames-main-inner{
 height:100%;
 max-width:1200px;
 margin:0 auto;
 padding:14px 22px 22px;
 box-sizing:border-box;
}
#page-body{
 height:100%;
 min-height:0;
}

/* Mobile: keep intent, scale down */
@media (max-width:640px){
 .ames-top{height:auto; padding:12px 14px;}
 .ames-top-inner{height:auto;}
 .ames-signout{position:static; display:flex; justify-content:flex-end; margin-top:8px;}
 .ames-subbar{grid-template-columns:1fr; justify-items:center; gap:14px;}
 .ames-left,.ames-right{justify-content:center;}
 .ames-tabs{justify-content:center; flex-wrap:wrap;}
 .circle-link.big{width:160px;height:160px;font-size:26px;}
 .circle-link.mid{width:120px;height:120px;font-size:22px;}
 .hub-link{width:100%;height:74px;font-size:34px;}
}


/* === 11c Fine-tune per feedback === */

/* Ping a bit smaller */
.circle-link.big{
  width:120px;
  height:120px;
  font-size:18px;
}

/* HUB skinnier */
.hub-link{
  height:56px;
  font-size:20px;
}

/* MSG + User side by side */
.ames-right .right-tabs{
  flex-direction:row;
  gap:18px;
  align-items:center;
}



/* === 11d Proportion tuning === */

/* HUB: taller, less wide */
.hub-link{
  width:min(70vw, 420px);
  height:78px;
  font-size:22px;
  letter-spacing:4px;
}

/* Pings bigger again */
.circle-link.big{
  width:150px;
  height:150px;
  font-size:20px;
}



/* === 12d Inventory consistency pass === */
.inv-panel{
  max-width:1200px;
  margin:0 auto;
  background:color-mix(in srgb, var(--textOnLight) 18%, transparent); /* single grey board */
  padding:18px;
  border-radius:0;
  box-shadow:none;
}

/* Main blue workbox should fit viewport and scroll internally */
.inv-workbox{
  background:var(--blueDark);           /* primary blue */
  border-radius:18px;
  padding:18px;
  height:calc(100vh - 260px - 36px); /* header + outer padding */
  overflow:hidden;               /* contain inner scroll */
  box-shadow:0 10px 22px color-mix(in srgb, var(--textOnLight) 18%, transparent);
}

/* Secondary (bottom) box lighter blue */
.inv-subbox{
  /* Remove the "extra window" look: no second blue frame inside inventory. */
  background:transparent;
  border-radius:0;
  padding:0;
  overflow:auto;
  max-height:calc(100% - 84px);
}

/* Ensure the table card doesn't force page scroll */
.inv-workbox .inventory-card{
  max-height:100%;
  overflow:auto;
}

/* Kill any remaining subtext globally in inventory */
.inv-panel .subtext,
.inv-panel .muted,
.inv-panel .hint{
  display:none !important;
}

/* === 12h Jobs: Active-on date picker control === */
.jobs-activeon-control{ display:inline-flex; align-items:center; gap:10px; }
.jobs-activeon-label{ font-weight:800; letter-spacing:.02em; }
.jobs-activeon-date{
  height:38px;
  padding:0 12px;
  border-radius:10px;
  border:2px solid color-mix(in srgb, var(--textOnDark) 55%, transparent);
  background:color-mix(in srgb, var(--textOnDark) 92%, transparent);
  font-weight:800;
}
/* if placed inside a right-side header cell */
.jobs-activeon-fallback{ text-align:right; margin-top:-6px; margin-bottom:10px; font-weight:800; }


/* Jobs toolbar filter checkbox (reuse metric-cbbox styles) */
.jobs-filter-cbbox{ margin-left: 14px; }
.jobs-filter-cbbox .metric-cbbox__label{ font-size: 12px; letter-spacing: 1px; }

/* === 12k Jobs: Ended-only toggle in toolbar === */
.jobs-endedonly{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-left:18px;
}
.jobs-endedonly-label{
  font-weight:900;
  letter-spacing:.02em;
  color:var(--textOnDark)fff;
  text-shadow:0 1px 0 color-mix(in srgb, var(--textOnLight) 25%, transparent);
  user-select:none;
}

/* Shared: metric toggle is visually identical to metric-pill */
.metric-toggle{ 
  position:relative;
  display:flex;
  gap:12px;
  align-items:center;
  padding:10px 12px;
  border:1px solid color-mix(in srgb, var(--textOnDark) 22%, transparent);
  border-radius:14px;
  background:color-mix(in srgb, var(--textOnDark) 8%, transparent);
  cursor:pointer;
  user-select:none;
}


/* === 12k Jobs: Send button === */
.send-btn{
  margin-left:8px;
  padding:6px 10px;
  border-radius:8px;
  border:2px solid color-mix(in srgb, var(--textOnLight) 25%, transparent);
  background:var(--red);
  color:var(--textOnDark);
  font-weight:900;
  cursor:pointer;
}
.send-btn:hover{ filter:brightness(1.05); }
.send-btn:disabled{
  opacity:.45;
  cursor:not-allowed;
  filter:none;
}


/* Jobs page: date pill + search + filter pills */
.jobs-date-pill{
  display:flex;
  align-items:center;
  gap:12px;
  /* Surface is enforced by .ames-light-panel (UI pool) */
}
.jobs-date-label{
  font-weight:900;
  letter-spacing:2px;
  font-size:12px;
  line-height:12px;
  opacity:0.8;
  text-transform:uppercase;
}
.jobs-date-pill input[type="date"]{
  border:1px solid color-mix(in srgb, var(--textOnLight) 18%, transparent);
  border-radius:12px;
  padding:10px 12px;
  font-weight:800;
}
.jobs-filter-pill{
  display:flex;
  align-items:center;
  gap:10px;
  user-select:none;
  cursor:pointer;
  padding:6px 10px;
  border-radius:14px;
}
.jobs-filter-text{
  font-weight:800;
  font-size:13px;
  opacity:0.85;
}
.jobs-search{
  border:1px solid color-mix(in srgb, var(--textOnLight) 18%, transparent);
  border-radius:18px;
  padding:12px 16px;
  width:300px;
  max-width:34vw;
  font-weight:800;
}
.btn.btn-send{
  /* Send should be a primary red action (white text) */
  background:var(--accent);
  color:var(--textOnDark)fff;
  border:1px solid color-mix(in srgb, var(--textOnLight) 12%, transparent);
}


/* Jobs checkbox: canonical checkbox only */
.jobs-checkbox input[type="checkbox"]{ margin:0; }

/* --- Customer Book (Jobs tab) polish --- */
.
.jobs-tabs-wrap{
  display:flex;
  gap:12px;
  margin: 0 0 14px 0;
}
.jobs-tab{
  padding: 12px 18px;
  border-radius: 12px;
  background: var(--panelLite);
  color: var(--ink);
  font-weight: 800;
  letter-spacing: 0.08em;
  cursor: pointer;
  user-select: none;
  border: 1px solid color-mix(in srgb, var(--textOnLight) 14%, transparent);
}
.jobs-tab.active{
  background: var(--accent);
  color: var(--textOnDark);
  border-color: color-mix(in srgb, var(--textOnLight) 18%, transparent);
}
.jobs-head{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.jobs-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.jobs-box{
  background: var(--blueDark);
  border-radius: 18px;
  padding: 18px;
  color: var(--textOnDark);
  box-shadow: 0 10px 20px color-mix(in srgb, var(--textOnLight) 15%, transparent);
}

/* UI Pool enforcement: when a Jobs box is marked as a light work surface,
   it MUST render like the Equipment light-blue interior. */
.jobs-box.ames-light-panel{
  background: var(--panelLite);
  color: var(--ink);
  border: 1px solid var(--blueDark);
  box-shadow:none;
}
.jobs-box.ames-light-panel .jobs-box-title{ color: var(--ink); }
.jobs-box-title{
  font-weight: 900;
  font-size: 22px;
  margin: 0 0 10px 0;
}
.jobs-list{
  background: color-mix(in srgb, var(--textOnDark) 8%, transparent);
  border-radius: 12px;
  padding: 10px;
  max-height: 220px;
  overflow-y: auto;
}

/* When inside a light work surface, list surfaces must be subtle grey (not translucent white-on-blue). */
.jobs-box.ames-light-panel .jobs-list{
  background: color-mix(in srgb, var(--textOnLight) 3%, transparent);
}
.jobs-box.ames-light-panel .jobs-list .row:hover{ background: color-mix(in srgb, var(--textOnLight) 5%, transparent); }
.jobs-box.ames-light-panel .jobs-list .row.active{ background: color-mix(in srgb, var(--textOnLight) 6%, transparent); }
.jobs-list .row{
  padding: 10px 10px;
  border-radius: 10px;
  cursor: pointer;
}
.jobs-list .row:hover{
  background: color-mix(in srgb, var(--textOnDark) 8%, transparent);
}
.jobs-list .row.active{
  background: color-mix(in srgb, var(--textOnDark) 14%, transparent);
}
.jobs-detail{
  background: color-mix(in srgb, var(--textOnDark) 92%, transparent);
  border-radius: 12px;
  padding: 14px;
  color: var(--textOnLight);
}
.jobs-detail h3,
.jobs-detail .section-title{
  color:var(--textOnLight);
}
.jobs-detail *{
  color:var(--textOnLight);
}
.save-row{
  display:flex;
  align-items:center;
  gap: 10px;
}
.save-status{
  font-weight: 800;
  color: var(--textOnDark);
  opacity: 0.0;
  transition: opacity 160ms ease-in-out;
}
.save-status.show{
  opacity: 1.0;
}

/* --- Company Settings: Inventory Units --- */
.units-grid{ display:block; }
.units-group{ background:color-mix(in srgb, var(--textOnDark) 12%, transparent); border-radius:14px; padding:12px; }
.units-group-title{ font-weight:900; letter-spacing:.06em; text-transform:uppercase; opacity:.9; margin-bottom:10px; }

/* chip layout (replaces checkbox grid for cleaner alignment) */
.units-chips{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.unit-chip-wrap{ position:relative; display:inline-flex; }
.unit-chip{
  border:1px solid color-mix(in srgb, var(--textOnDark) 22%, transparent);
  background: color-mix(in srgb, var(--textOnLight) 14%, transparent);
  color:var(--textOnDark)fff;
  border-radius:999px;
  padding:10px 14px;
  font-weight:900;
  letter-spacing:.02em;
  cursor:pointer;
  white-space:nowrap;
  line-height:1;
}
.unit-chip.on{ background: var(--red); border-color: var(--red); }
.unit-chip.off{ opacity:0.88; }
.unit-chip:hover{ filter: brightness(1.05); }
.unit-chip-x{
  position:absolute;
  right:-6px;
  top:-6px;
  width:22px;
  height:22px;
  border-radius:999px;
  border:2px solid color-mix(in srgb, var(--textOnDark) 92%, transparent);
  background: color-mix(in srgb, var(--textOnLight) 25%, transparent);
  color:var(--textOnDark)fff;
  font-weight:900;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}
.unit-chip-x:hover{ background: var(--red); border-color: var(--red); }

/* grid of unit toggles (compact; many per row) */
.units-items{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap:10px 12px;
}

.units-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:12px;
  background:color-mix(in srgb, var(--textOnLight) 14%, transparent);
  border:1px solid color-mix(in srgb, var(--textOnDark) 18%, transparent);
}

/* unit toggles: use canonical checkbox; only alignment helpers */
.units-item input[type="checkbox"]{ margin:0; }
.units-text{
  font-weight:800;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.units-del{
  padding:8px 10px;
  border-radius:10px;
}

.units-item-row{
  display:flex;
  align-items:center;
  gap:10px;
}

.inline-status{ font-weight:900; color:var(--blue); text-shadow:0 1px 0 color-mix(in srgb, var(--textOnLight) 25%, transparent); }


/* Fix metric label visibility inside white cards */
.card .metric-label{ color:var(--textOnLight); }
.card .metric-pill{ background: color-mix(in srgb, var(--textOnLight) 3%, transparent); border-color: color-mix(in srgb, var(--textOnLight) 10%, transparent); }

/* Maintenance Tracking styles */
.mt-page{
  display:grid;
  grid-template-columns: 330px 1fr;
  gap:16px;
  padding:16px;
}
.mt-left,.mt-right{
  background: var(--panel);
  color:var(--textOnDark);
}
.mt-grid{
  /* Clean, seamless work surface (no debug red borders / extra window frames) */
  background:transparent;
  border:none;
  border-radius:0;
  padding:0;
  overflow:auto;
  min-height:520px;
}
.mt-table{
  width:100%;
  border-collapse:collapse;
  color:var(--textOnDark);
  font-size:14px;
}
.mt-table th,.mt-table td{
  border:1px solid color-mix(in srgb, var(--textOnDark) 14%, transparent);
  padding:8px 10px;
  text-align:left;
  white-space:nowrap;
}
.mt-table th{
  background:var(--blueDark);
  color:var(--textOnDark);
  font-weight:900;
  font-size:16px;
  letter-spacing:.04em;
}
.mt-table tr.due{ background:color-mix(in srgb, var(--red) 22%, transparent); color:var(--textOnDark); }
.mt-table tr.upcoming{ background:color-mix(in srgb, var(--blue) 18%, transparent); color:var(--textOnDark); }


/* Maintenance Tracking table body: use the same light-blue work surface everywhere */
.mt-table tbody td{ background: color-mix(in srgb, var(--textOnDark) 10%, transparent); }

/* Keep due/upcoming readable on blue surface (no pale cell backgrounds) */
.mt-table tr.due td{ background: color-mix(in srgb, var(--red) 22%, transparent); }
.mt-table tr.upcoming td{ background: color-mix(in srgb, var(--blue) 18%, transparent); }


/* === Work Orders (WO-1) style-only pass === */

/* Force left create panel to blue like other pages */
body[data-page="work-orders"] .left-panel,
body[data-page="work-orders"] .panel.left,
body[data-page="work-orders"] .wo-left,
body[data-page="work-orders"] .card.left {
  background: var(--panel);
  color: var(--textOnDark);
}

/* Remove helper/subtext on Work Orders page */
body[data-page="work-orders"] .muted,
body[data-page="work-orders"] .subtext,
body[data-page="work-orders"] .helper {
  display: none !important;
}

/* Align header controls visually (no JS) */
body[data-page="work-orders"] .wo-header,
body[data-page="work-orders"] .page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}



/* === Work Orders (14h) — structural + filters === */
body[data-page="work-orders"] .wo-header-controls{
  display:flex;
  align-items:center;
  gap:10px;
}
body[data-page="work-orders"] .wo-header-controls .wo-filter{
  width:200px;
}
body[data-page="work-orders"] .wo-header-controls input[type="date"]{
  width:160px;
}

body[data-page="work-orders"] .wo-right .wo-close-btn{
  padding:6px 10px;
  font-size:13px;
  line-height:1;
  border-radius:12px;
  font-weight:900;
}
body[data-page="work-orders"] .wo-right td:last-child{ white-space:nowrap; }
body[data-page="work-orders"] .wo-right table.table tr.wo-row td{ line-height:1.2; }

/* WO modal: Maintenance items grid (matches AMES blue + red check scheme) */
.wo-maint-grid{
  display:grid;
  /* Dense chips: aim for 3-per-row on desktop */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:8px;
  padding-right:4px;
}

@media (max-width: 900px){
  .wo-maint-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 520px){
  .wo-maint-grid{ grid-template-columns: repeat(1, minmax(0,1fr)); }
}

.wo-maint-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:8px 10px;
  border-radius:12px;
  cursor:pointer;
  user-select:none;
  /* White cards like the rest of AMES controls; selection adds blue tint. */
  background:var(--panelLight);
  border:1px solid color-mix(in srgb, var(--blue) 28%, transparent);
  min-height:38px;
}

.wo-maint-item:hover{
  background: color-mix(in srgb, var(--blue) 14%, transparent);
  border-color: color-mix(in srgb, var(--blue) 38%, transparent);
}

.wo-maint-name{
  font-weight:900;
  line-height:1.15;
  flex: 1 1 auto;
  min-width:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  color:var(--textOnLight);
}

.wo-maint-controls{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap: 10px;
}

.wo-inspect-btn{
  background: var(--red);
  color: var(--textOnDark);
  border: none;
  border-radius: 10px;
  padding: 8px 12px;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 2px 0 color-mix(in srgb, var(--textOnLight) 25%, transparent);
}

.wo-inspect-btn:active{ transform: translateY(1px); }

/* Small red/white checkbox (same language as units toggles, but smaller) */
.wo-maint-cb{
  appearance:none;
  -webkit-appearance:none;
  width:28px;
  height:28px;
  border-radius:10px;
  border:2px solid var(--red);
  background: var(--textOnDark);
  cursor:pointer;
  position:relative;
  flex: 0 0 auto;
  box-shadow: 0 2px 0 color-mix(in srgb, var(--textOnLight) 15%, transparent);
}

/* Close/Reopen certify checkbox (same look as maintenance item check) */
.wo-cert-cb{
  appearance:none;
  -webkit-appearance:none;
  width:28px;
  height:28px;
  /* square-ish to match the "one check" system */
  border-radius:6px;
  border:2px solid var(--red);
  background:var(--textOnDark)fff;
  cursor:pointer;
  position:relative;
  flex: 0 0 auto;
}
.wo-cert-cb:checked{
  background: var(--red) !important;
  border-color: var(--red) !important;
}
.wo-cert-cb:checked::after{
  content:"";
  position:absolute;
  inset:0;
  background-repeat:no-repeat;
  background-position:center;
  background-size:18px 18px;
  /* inline white check svg */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9.0 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E");
}

.wo-maint-cb:checked{
  background: var(--red);
  border-color: var(--red);
}

.wo-maint-cb:checked::after{
  content:"";
  position:absolute;
  left:9px;
  top:5px;
  width:6px;
  height:12px;
  border:solid var(--textOnDark);
  border-width:0 4px 4px 0;
  transform:rotate(45deg);
}

.wo-maint-controls{
  display:flex;
  align-items:center;
  gap:10px;
  flex: 0 0 auto;
}

.wo-inspect-btn{
  border:2px solid var(--red);
  background: var(--textOnDark);
  color:var(--textOnLight);
  font-weight:900;
  border-radius:12px;
  padding:6px 10px;
  cursor:pointer;
}
.wo-inspect-btn:hover{ filter:brightness(0.98); }
.wo-inspect-btn:disabled{ opacity:0.6; cursor:not-allowed; }

/* Give a stronger selected feel on the whole chip */
.wo-maint-item:has(.wo-maint-cb:checked){
  background: color-mix(in srgb, var(--blue) 18%, transparent);
  border-color: color-mix(in srgb, var(--red) 75%, transparent);
}

/* WO modal styling: match AMES panel scheme (blue shell + paper interior) */
.wo-modal{
  background: var(--panel);
  color: var(--textOnDark);
  border-radius: 22px;
  padding: 18px;
  box-shadow: var(--shadow);
}
.wo-modal h2{ color:var(--textOnDark); margin:0 0 6px 0; letter-spacing:1px; }
.wo-modal .sub{ color: color-mix(in srgb, var(--textOnDark) 90%, transparent); margin:0 0 10px 0; }

/* Paper section boxes inside WO modal */
.wo-modal .wo-modal-box{
  background: var(--paper);
  color: var(--ink);
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--textOnLight) 14%, transparent);
  padding: 12px;
}



/* AMES red/white checkbox (used across modals + cards) */
.ames-check{
  -webkit-appearance:none;
  appearance:none;
  width:26px;
  height:26px;
  border:2px solid var(--accent);
  border-radius:8px;
  background:transparent;
  display:inline-grid;
  place-content:center;
  cursor:pointer;
}
.ames-check:checked{
  background:var(--accent);
  border-color:var(--accent);
}
.ames-check:checked::after{
  content:"";
  width:10px;
  height:16px;
  border-right:4px solid var(--textOnDark);
  border-bottom:4px solid var(--textOnDark);
  transform:rotate(45deg);
  margin-top:-2px;
}
.ames-check:focus{
  outline:none;
  box-shadow:0 0 0 3px color-mix(in srgb, var(--textOnDark) 25%, transparent);
}

.wo-maint-card{ background: var(--panelLite); }


/* =========================
   WORK ORDERS – MAINT GRID
   ========================= */

.wo-maint-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

@media (max-width: 900px){
  .wo-maint-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px){
  .wo-maint-grid{ grid-template-columns: 1fr; }
}

.wo-item-pill{
  background: var(--panelLight); /* light-blue inner fill */
  border: 2px solid color-mix(in srgb, var(--blue) 35%, transparent);
  border-radius: 18px;
  padding: 10px 12px;
  min-height: 56px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
}

.wo-item-pill.is-selected{
  border-color: var(--red);
}

.wo-item-name{
  font-weight: 900;
  color: var(--textOnLight);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1 1 auto;
  min-width: 0;
}

.wo-item-actions{
  display:flex;
  align-items:center;
  gap: 10px;
  flex: 0 0 auto;
}

.wo-item-inspect-btn{
  background: var(--red);
  color:var(--textOnDark);
  border:0;
  border-radius: 14px;
  padding: 8px 12px;
  font-weight: 900;
  cursor:pointer;
  box-shadow: 0 2px 0 color-mix(in srgb, var(--textOnLight) 25%, transparent);
}

.wo-item-inspect-btn:active{ transform: translateY(1px); }

.wo-maint-cbwrap .cb{
  width: 34px;
  height: 34px;
  border-radius: 12px;
}
.wo-maint-cbwrap .cb:after{
  left: 11px;
  top: 5px;
  width: 9px;
  height: 16px;
  border-width: 0 4px 4px 0;
}

/* inspection step checkbox (same look) */
.wo-insp-cbwrap .cb{
  width: 34px;
  height: 34px;
  border-radius: 12px;
}
.wo-insp-cbwrap .cb:after{
  left: 11px;
  top: 5px;
  width: 9px;
  height: 16px;
  border-width: 0 4px 4px 0;
}


/* =========================================================
   CANON UI: Checkbox + Modal baselines
   Goal: match Equipment / Maint Tracking frozen UI everywhere
   ========================================================= */

/* Light-blue inner panels (for the “info layout” blocks) */
.ames-light-panel,
.panel-light,
.info-light,
.card-light{
  background: var(--ames-light-blue, var(--panelLight));
  border: 1px solid var(--blueDark);
  border-radius: 18px;
}

/* Modal baseline: if a page uses `.ames-modal` / `.ames-modal-card` it will match canon */
.ames-modal{
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  background: color-mix(in srgb, var(--textOnLight) 45%, transparent);
  z-index: 9999;
}

.ames-modal-card{
  width: min(900px, 95vw);
  border-radius: 22px;
  background: var(--ames-blue, var(--blueDark));
  color: var(--textOnDark);
  box-shadow: 0 20px 50px color-mix(in srgb, var(--textOnLight) 35%, transparent);
  padding: 22px;
}

.ames-modal-card .ames-modal-body{
  margin-top: 12px;
  background: var(--ames-light-blue, var(--panelLight));
  color: var(--textOnLight);
  border-radius: 18px;
  padding: 16px;
}

/* ==========================================================
   UI STANDARDIZATION — FINAL PASS (Checkbox + Modal Enforcement)
   Timestamp (UTC): 2026-01-27 20:52 (UTC)
   Rules:
   - One checkbox style everywhere
   - One modal style everywhere
   - No page-level overrides
   ========================================================== */

:root{
  --ames-cb-size: 32px;
  --ames-cb-radius: 10px;
}

/* Checklist rows — optional helper class (safe even if unused) */
.ames-checkrow{
  display:flex;
  align-items:flex-start;
  gap:10px;
}
.ames-checkrow > input[type="checkbox"]{ margin-top:2px; }

/* MODAL — enforce globally across all legacy class names */
.modal-backdrop,
.ames-modal-backdrop,
.jobs-modal-backdrop{
  position:fixed !important;
  inset:0 !important;
  background:color-mix(in srgb, var(--textOnLight) 45%, transparent) !important;
  display:none;
  align-items:center;
  justify-content:center;
  padding:18px !important;
  z-index:9999 !important;
}
.modal-backdrop.show,
.ames-modal-backdrop.show,
.jobs-modal-backdrop.show{ display:flex !important; }

.modal,
.ames-modal,
.jobs-modal{
  position:relative !important;
  inset:auto !important;
  display:block !important;
  background:var(--panel) !important;
  color:var(--textOnDark) !important;
  border-radius:22px !important;
  box-shadow:var(--shadow) !important;
  max-width:760px !important;
  width:100% !important;
  max-height:90vh !important;
  overflow:auto !important;
  padding:18px !important;
  border:1px solid color-mix(in srgb, var(--textOnDark) 18%, transparent) !important;
}

/* Modal internals (works for legacy head/body structures) */
.modal .head,
.ames-modal .head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:0 0 10px 0;
  margin:0 0 10px 0;
  border-bottom:1px solid color-mix(in srgb, var(--textOnDark) 18%, transparent);
}
.modal .body,
.ames-modal .body{ padding:0; }

.modal label,
.ames-modal label,
.jobs-modal label{ color:color-mix(in srgb, var(--textOnDark) 90%, transparent) !important; }

/* ==========================================================
   WP1E-R1 — Modal Label Readability (Deterministic)
   Timestamp (UTC): 2026-02-16 23:03:24Z
   Goal: ensure labels + small headings on LIGHT modal surfaces are dark.
   Scope: CSS only. No layout or JS changes.
   ========================================================== */

/* Light surfaces inside modals (cards + light panels + modal bodies) */
.modal .card label,
.ames-modal .card label,
.jobs-modal .card label,
.modal .ames-light-panel label,
.ames-modal .ames-light-panel label,
.jobs-modal .ames-light-panel label,
.modal .ames-modal-body label,
.ames-modal .ames-modal-body label,
.jobs-modal .ames-modal-body label{ color:#111 !important; }

.modal .card .u-fw-900,
.ames-modal .card .u-fw-900,
.jobs-modal .card .u-fw-900,
.modal .ames-light-panel .u-fw-900,
.ames-modal .ames-light-panel .u-fw-900,
.jobs-modal .ames-light-panel .u-fw-900,
.modal .ames-modal-body .u-fw-900,
.ames-modal .ames-modal-body .u-fw-900,
.jobs-modal .ames-modal-body .u-fw-900{ color:#111 !important; }

.modal .card h1, .modal .card h2, .modal .card h3, .modal .card h4, .modal .card h5, .modal .card h6,
.ames-modal .card h1, .ames-modal .card h2, .ames-modal .card h3, .ames-modal .card h4, .ames-modal .card h5, .ames-modal .card h6,
.jobs-modal .card h1, .jobs-modal .card h2, .jobs-modal .card h3, .jobs-modal .card h4, .jobs-modal .card h5, .jobs-modal .card h6{ color:#111 !important; }


.modal input,
.modal select,
.modal textarea,
.ames-modal input,
.ames-modal select,
.ames-modal textarea,
.jobs-modal input,
.jobs-modal select,
.jobs-modal textarea{
  background:var(--textOnDark) !important;
  color:var(--textOnLight) !important;
}

/* Ghost buttons inside modals should match canon */
.modal .btn-ghost,
.ames-modal .btn-ghost,
.jobs-modal .btn-ghost{
  background:color-mix(in srgb, var(--textOnDark) 14%, transparent) !important;
  color:var(--textOnDark) !important;
  border:1px solid color-mix(in srgb, var(--textOnDark) 28%, transparent) !important;
}

/* Attachment overlay must sit above everything */
.att-overlay{z-index:2147483647 !important;}



/* --- UI pool enforcement: settings page tightening (2026-01-28 UTC) --- */
.settings-panel label{margin:6px 0 6px}
.settings-panel .help{margin-top:4px}
.settings-panel input[type="file"]{
  width:100%;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--line);
  background:var(--textOnDark);
}

/* --- User Settings: match AMES scheme (blue panel + clean, no instructional subtext) --- */
.settings-panel .card{
  background: var(--panel) !important;
  color:var(--textOnDark) !important;
  border-radius:18px !important;
  border:1px solid color-mix(in srgb, var(--textOnDark) 18%, transparent) !important;
  box-shadow: var(--shadow) !important;
}
.settings-panel h3{ font-size:22px; font-weight:900; margin:0; }
.settings-panel .pill{ background:color-mix(in srgb, var(--textOnDark) 14%, transparent); border:1px solid color-mix(in srgb, var(--textOnDark) 22%, transparent); color:var(--textOnDark); }

/* Remove paragraph-style help/subtext on settings (keep only labels) */
.settings-panel .muted,
.settings-panel .help{ display:none !important; }

/* Inputs already render white; make labels readable on blue */
.settings-panel label{ color:color-mix(in srgb, var(--textOnDark) 92%, transparent) !important; font-weight:900; }



/* --- Inspections screen readability + tab contrast (Pool pass) --- */
.insp-tabbtn{
  background: var(--panelLite);
  color: var(--textOnLight);
  border: 1px solid color-mix(in srgb, var(--textOnLight) 18%, transparent);
}
.insp-tabbtn.active{
  background: var(--accent);
  color: var(--textOnDark);
  border-color: color-mix(in srgb, var(--textOnLight) 22%, transparent);
}
.insp-card .whitebox{
  background: var(--panelLite);
  border: 1px solid color-mix(in srgb, var(--textOnLight) 14%, transparent);
}
.insp-card label{display:block;margin:10px 0 6px;font-weight:800;color:var(--ink);}
.insp-card .listTable{
  width:100%;
  border-collapse: collapse;
  background: transparent;
  color: var(--textOnLight);
}
.insp-card .listTable th,
.insp-card .listTable td{
  padding: 10px 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--textOnLight) 12%, transparent);
  text-align: left;
  vertical-align: top;
}
.insp-card .listTable th{
  background: color-mix(in srgb, var(--textOnLight) 6%, transparent);
  font-weight: 800;
}
.insp-card .listTable tr:last-child td{
  border-bottom: none;
}
.insp-card .mutedw{
  color: color-mix(in srgb, var(--textOnDark) 85%, transparent);
}

/* Force-hide native checkbox rendering for metric pills (prevents double-box/double-check). */
input.metric-cb{
  position:absolute !important;
  opacity:0 !important;
  appearance:none !important;
  -webkit-appearance:none !important;
  -moz-appearance:none !important;
  background:transparent !important;
  border:0 !important;
}
input.metric-cb::after{ content:none !important; }

/* --- UI readability fixes (light panels) --- */
.ames-light-panel, .ames-light-panel *{
  color: var(--ink) !important;
}
.ames-light-panel h1, .ames-light-panel h2, .ames-light-panel h3{
  color: var(--ink) !important;
}
.ames-light-panel .sub, .ames-light-panel small, .ames-light-panel .muted, .ames-light-panel .hint{
  color: var(--ink) !important;
  opacity: .85 !important;
}
.ames-light-panel input, .ames-light-panel select, .ames-light-panel textarea{
  color: var(--ink) !important;
}
.ames-light-panel ::placeholder{
  color: color-mix(in srgb, var(--textOnLight) 55%, transparent) !important;
}
/* Work Order confirmation modals: use scheme */
.wo-modal .ames-light-panel{
  /* NOTE: variable is --panelLite (light blue). --panelLight was a typo that made this look dark/flat */
  background: var(--panelLite) !important;
  border: 1px solid color-mix(in srgb, var(--textOnLight) 8%, transparent) !important;
  border-radius: 14px !important;
  padding: 14px 16px !important;
}
.wo-modal .sub{ opacity: .85; }

/* WO modal: optional per-item Inspect button should not be shown (confusing/misleading in selection grid) */
.wo-item-inspect-btn{ display:none !important; }
/* Hide legacy hint/subtext blocks we don't want in production UI */
.hide-ui-hint{ display:none !important; }




/* Row hover affordance (pointer + subtle highlight) */
.table tbody tr:hover,
.listTable tbody tr:hover,
.mt-table tbody tr:hover{
  cursor:pointer;
  filter: brightness(1.05);
}

/* Inspections: make template rows visibly clickable (stronger than brightness filter) */
.insp-card .listTable tbody tr:hover{
  background: color-mix(in srgb, var(--textOnDark) 35%, transparent);
}

/* === Inspection Templates hover + steps title fix (UI polish) === */
.templates-table tr,
.templates-steps-table tr {
  cursor: pointer;
  transition: background-color 0.12s ease, box-shadow 0.12s ease;
}

.templates-table tr:hover,
.templates-steps-table tr:hover {
  background-color: color-mix(in srgb, var(--textOnDark) 35%, transparent);
}

.templates-table tr.selected,
.templates-steps-table tr.selected {
  background-color: color-mix(in srgb, var(--textOnDark) 60%, transparent);
  font-weight: 600;
}

.steps-panel-title,
.steps-title,
.steps-header {
  color: var(--textOnLight) !important;
}


/* Jobs table quick links */
.job-link{font-weight:900;text-decoration:underline;cursor:pointer;color:var(--textOnLight);}
.job-link.has-items{color:var(--blueDark);}



/* ============================================================
   UI POOL (CANON) — enforced button variants
   Timestamp (GMT): 2026-02-04 22:52:19 (GMT)
   Rule: all buttons must resolve to ONE of these variants.
   ============================================================ */

:root{
  /* Canon semantic tokens (single source of truth) */
  --red: var(--accent);
  --blue: var(--panel);
  --blueDark: var(--blueDark); /* dark-blue variant used for dense screens */
  --textOnDark: var(--textOnDark);
}

/* Shared button base */
.btn,
.btn-red,
.btn-dark,
.btn-blue,
.btn-white,
a.btn,
a.btn-red,
a.btn-dark,
a.btn-blue,
a.btn-white{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border-radius:12px;
  padding:10px 14px;
  font-weight:900;
  cursor:pointer;
  text-decoration:none;
  border:none;
}

/* BTN_PRIMARY_RED — commit / write / destructive */
.btn,
.btn-red,
.btn.primary,
.btn.primary-red,
.btn.commit,
.btn.save,
.btn.create,
.btn.log,
.btn.delete,
.btn.archive,
.btn.send{
  background:var(--red);
  color:var(--textOnDark) !important;
  box-shadow:none;
}

/* BTN_PRIMARY_RED_BLACKTEXT — rare red variant w/ black text (explicit use only) */
.btn-red-black{
  background:var(--red) !important;
  color:var(--textOnLight) !important;
  box-shadow:none;
}

/* BTN_PRIMARY_DARKBLUE — primary non-destructive (dense screens) */
.btn-dark,
.btn.dark,
.btn.view,
.btn.manage,
.btn.open,
.btn.details,
.btn.edit{
  background:var(--blueDark);
  color:var(--textOnDark);
  box-shadow:none;
}

/* BTN_SECONDARY_BLUE — cancel / close / back (non-writing) */
.btn-blue,
.btn.blue,
.btn.cancel,
.btn.close,
.btn.back{
  background:var(--blue);
  color:var(--textOnDark);
  box-shadow:none;
}

/* BTN_RARE_WHITE — rare utility (e.g., Refresh) */
.btn-white,
.btn.white,
.btn.secondary,
.btn.refresh{
  background:var(--textOnDark) !important;
  color:var(--textOnLight) !important;
  /* avoid "extra border" look — keep the white button clean */
  border:1px solid color-mix(in srgb, var(--textOnLight) 10%, transparent);
  box-shadow:0 6px 14px color-mix(in srgb, var(--textOnLight) 10%, transparent);
}

/* Active state */
.btn:active,
.btn-red:active,
.btn-dark:active,
.btn-blue:active,
.btn-white:active{
  transform:translateY(1px);
}

/* Disabled */
button:disabled,
a.btn[aria-disabled="true"]{
  opacity:.55;
  cursor:not-allowed;
  box-shadow:none;
  transform:none;
}


/* =========================================================
   CANON TABS
   Visual styling is owned by ui_pool.css. Keep layout-only rules here.
   ========================================================= */

.ames-tabbar,
.jobs-tabs-wrap,
.tabs,
.insp-tabs{
  display:flex;
  gap:12px;
  align-items:flex-end;
  flex-wrap:wrap;
  margin:10px 0 0 0;
}

/* --- Inspections: force readable text inside cards --- */
.insp-card, .insp-card *{color:var(--ink);}
.insp-card input, .insp-card select, .insp-card textarea{color:var(--ink);}
.inspections-panel .tab{ text-transform:none; }


/* ---------------- Manager Tools ---------------- */
.panel-head{display:flex;align-items:center;gap:16px;margin-bottom:14px;}
.panel-head .panel-title{font-size:28px;letter-spacing:1px;color:#fff;font-weight:800;}
.panel-head .admin-btn{margin-left:auto;}

.panel-card{background:#dbe7ff;border-radius:22px;padding:18px;box-shadow:0 10px 22px rgba(0,0,0,0.25);}

/* Tabs live on the work window edge (like Jobs) */
.manager-tabs-wrap{display:flex;gap:10px;align-items:flex-end;margin:0 0 14px 0;padding-left:0;}
.manager-card{padding-top:0;}
#managerWork.manager-card{padding-top:0;}
#managerWork .manager-tabs-wrap{margin:0;padding:0 18px;}
#managerWork .manager-tab-body{padding:14px 18px 18px 18px;}
.manager-tabs.ames-tabs{gap:10px;}
.manager-tabs .ames-tab{padding:10px 16px;border-radius:10px;text-transform:none;letter-spacing:0;font-size:15px;}
.manager-tabs .ames-tab.active{background:#e31a1a;color:#fff;}

/* Explorer controls */
.ex-actions .UI_INPUT{height:42px;}
.ex-actions .UI_BTN{height:42px;min-width:92px;}
.ex-actions .btn,
.ex-actions .btn-white,
.ex-actions .btn-red-black{height:42px;min-width:92px;}
.ex-actions .ex-export-type{width:130px;max-width:130px;}