/* ════════════════════════════════════════════════════════════════════════════
   FloorFocused Console — ADD-ON CONSOLE SKIN
   Loaded LAST on every page, so it wins.

   The Add-On Console is the house style: a black brand bar, a white tabbed
   menubar, and cards on a light grey ground. It is calmer than the dark gold
   chrome this replaces, and calm is the point — warehouse staff use this all
   day and the console should get out of the way.

   Restyle the whole console by editing THIS FILE. The structure underneath is
   untouched: same markup, same dropdown behaviour, same class names. That is
   deliberate — a re-skin that also rewrites markup is a re-skin you cannot back
   out of. (`git checkout pre-rehab-2026-07-26 -- realfloors-hub-cloud/public`.)

   !important appears throughout because the rules being overridden use it too.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── 1. Tokens ────────────────────────────────────────────────────────────── */
:root{
  --navy:#1f3a5f; --navy2:#274b78; --red:#c8102e; --gold:#c8a24b;
  --ink:#1c2433; --muted:#6a7686; --line:#dbe0e8; --bg:#eceff3; --card:#fff;
  --ok:#128a4c; --okbg:#e7f6ee; --err:#b42318; --errbg:#fdeceb;
  --radius:6px; --shadow:0 1px 2px rgba(16,24,40,.08);
  /* Cards get a STRONGER line than --line. --line also draws table row
     dividers, where a heavy rule turns a list into a grid; a card edge has to
     survive white-on-light-grey and needs more contrast than a divider does. */
  --cardline:#c3ccda; --cardshadow:0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.10);
  --bar:#000; --barline:#303338; --barsoft:#17181c; --bartext:#e6e9ee;
  --menu:#fff; --menuline:#d5dbe3; --menuhover:#eef2f7; --menutext:#28313d;
  --rowhover:#f6f8fb;
  /* Table headers are LIGHT GREY, in both themes and on every page including the
     schedule board — which previously ran a near-black bar of its own. A dark
     bar on every table competes with the black brand bar for attention; grey
     lets the data lead and keeps one table looking like the next. */
  --thead:#eef1f6; --theadtext:#4a5568;
}
:root[data-theme=dark]{
  --ink:#e6e9ee; --muted:#9aa4b2; --line:#333944; --bg:#0e1014; --card:#1d2027;
  --okbg:#10261a; --errbg:#2a1414;
  --shadow:0 1px 2px rgba(0,0,0,.4);
  --bar:#000; --barline:#303338; --barsoft:#17181c;
  --menu:#171a20; --menuline:#2a2f38; --menuhover:#22262e; --menutext:#c9d1dc;
  --rowhover:#22262e; --thead:#252a33; --theadtext:#c3ccda;
  --cardline:#3a4150; --cardshadow:0 1px 2px rgba(0,0,0,.35), 0 1px 3px rgba(0,0,0,.45);
}

/* ── 2. Ground ────────────────────────────────────────────────────────────── */
html,body{
  background:var(--bg) !important; color:var(--ink) !important;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif !important;
  font-size:15px !important;
}
/* No tickers. Number-input spinners are banned everywhere, standing rule. */
input[type=number]{-moz-appearance:textfield !important}
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none !important;margin:0 !important}

/* ── 3. Brand bar — black, the Insight-style top strip ───────────────────── */
.appbar{
  background:var(--bar) !important; color:#fff !important;
  height:64px !important; padding:0 18px !important;
  border-bottom:0 !important; box-shadow:none !important;
}
.appbar .appbar-brand .brand-real,
.appbar .appbar-brand .brand-floors{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif !important;
  font-size:19px !important; letter-spacing:-.2px !important; color:#fff !important;
}
.appbar .appbar-brand .brand-real{font-weight:400 !important}
.appbar .appbar-brand .brand-floors{font-weight:800 !important}
.appbar .appbar-sub{
  font-family:inherit !important; color:#8b929c !important;
  font-size:9.5px !important; letter-spacing:.14em !important; font-weight:600 !important;
}
.appbar .appbar-title{
  font-family:inherit !important; font-weight:600 !important; font-size:14.5px !important;
  color:#cbd0d8 !important; letter-spacing:0 !important; text-transform:none !important;
}
.appbar .appbar-right{font-family:inherit !important; color:#cbd0d8 !important; font-size:12.5px !important}
/* Icon buttons + the user chip: dark pills on black, per the Add-On topbar. */
.appbar .nav-toggle,.appbar .iconbtn{
  background:var(--barsoft) !important; border:1px solid var(--barline) !important;
  color:var(--bartext) !important; border-radius:5px !important; padding:6px 9px !important;
}
.appbar .nav-toggle:hover,.appbar .iconbtn:hover{background:#26282e !important; color:#fff !important}
.appbar select{
  background:var(--barsoft) !important; color:var(--bartext) !important;
  border:1px solid var(--barline) !important; border-radius:5px !important; font-size:12.5px !important;
}

/* ── 4. Menubar — white, tabbed, red active underline ────────────────────── */
.topmenu{
  top:64px !important; background:var(--menu) !important;
  border-bottom:1px solid var(--menuline) !important;
  box-shadow:0 1px 3px rgba(16,24,40,.06) !important; padding:0 8px !important;
}
.topmenu .sidebar-nav{gap:0 !important; background:transparent !important}
/* Descendant selectors, NOT `>`. A grouped tab lives inside .nav-group, so it is
   a grandchild of .sidebar-nav and a child combinator silently misses it — which
   left the active tab wearing its old gold highlight. The .sidebar-nav in the
   selector is there to out-specify `.sidebar-nav .nav-btn.active !important`
   from the shell's own stylesheet. */
.topmenu .sidebar-nav .nav-btn,
.topmenu .dropdown-toggle{
  background:transparent !important; border:0 !important;
  border-bottom:3px solid transparent !important; border-radius:0 !important;
  color:var(--menutext) !important; font-weight:600 !important; font-size:14px !important;
  height:auto !important; padding:11px 15px 8px !important; text-transform:none !important;
  box-shadow:none !important;
}
.topmenu .sidebar-nav .nav-btn:hover,
.topmenu .dropdown-toggle:hover{background:var(--menuhover) !important; color:var(--menutext) !important}
.topmenu .sidebar-nav .nav-btn.active,
.topmenu .sidebar-nav .dropdown-toggle.active,
.topmenu .sidebar-nav .dropdown-toggle.open{
  background:transparent !important; color:var(--red) !important;
  border-left:0 !important; border-bottom:3px solid var(--red) !important; box-shadow:none !important;
}
/* Icons inherit the tab colour instead of each having their own. The rainbow
   made the bar read as decoration; one colour makes it read as navigation. */
.topmenu .nav-btn .nav-icon,.topmenu .dropdown-toggle .nav-icon,
.topmenu .nav-btn[data-color] .nav-icon{color:currentColor !important; opacity:.75}
.topmenu .nav-btn.active .nav-icon,.topmenu .dropdown-toggle.open .nav-icon{opacity:1}
.topmenu .caret{opacity:.55}

/* ── 5. Dropdowns — white cards, not dark panels ─────────────────────────── */
.topmenu .dropdown-menu{
  background:var(--card) !important; border:1px solid var(--line) !important;
  border-radius:9px !important; box-shadow:0 8px 24px rgba(16,24,40,.14) !important;
  padding:6px !important; margin-top:2px !important;
}
.topmenu .nav-child{
  background:transparent !important; color:var(--ink) !important;
  border:0 !important; border-radius:6px !important;
  padding:9px 11px !important; font-size:13.5px !important; font-weight:500 !important;
}
.topmenu .nav-child:hover{background:var(--menuhover) !important; color:var(--navy) !important}
.topmenu .nav-child.active{
  background:var(--menuhover) !important; color:var(--red) !important; font-weight:700 !important;
}
.topmenu .nav-child .sub-icon{color:var(--muted) !important; opacity:.8}
.topmenu .nav-child:hover .sub-icon{color:var(--navy2) !important}

/* ── 6. Content: cards on a grey ground ──────────────────────────────────── */
/* Every card-shaped surface, including the portal dashboards' own .kpi tiles
   and the Command Center's panels. Listed together so one edge colour governs
   the whole console rather than each page drifting. */
.card,.panel,.box,.tile,.section-card,.kpi,
.btile,.act,.stat,.op,.hlp-card,.hero-panel,.scan-panel,
.cc-bar,.cc-card,.cc-link,.cc-panel,.cc-tile{
  background:var(--card) !important; border:1px solid var(--cardline) !important;
  border-radius:var(--radius) !important; box-shadow:var(--cardshadow) !important;
}
h1,h2,h3{color:var(--navy) !important; font-family:inherit !important}
:root[data-theme=dark] h1,:root[data-theme=dark] h2,:root[data-theme=dark] h3{color:#cbd8e8 !important}
h2{font-size:19px !important} h3{font-size:16px !important}
.sub,.muted,.hint,.note{color:var(--muted) !important}
a{color:var(--navy2)}
:root[data-theme=dark] a{color:#8fb3e0}

/* ── 7. Forms ────────────────────────────────────────────────────────────── */
input:not([type=checkbox]):not([type=radio]),select,textarea{
  background:var(--card) !important; color:var(--ink) !important;
  border:1px solid var(--line) !important; border-radius:9px !important;
  padding:10px 12px !important; font:inherit !important;
}
input:focus,select:focus,textarea:focus{
  border-color:var(--navy2) !important; box-shadow:0 0 0 3px rgba(39,75,120,.14) !important; outline:none !important;
}
label,.fld>span{color:var(--muted)}

/* ── 8. Buttons ──────────────────────────────────────────────────────────── */
button.primary,.btn-primary,button[type=submit]:not(.nav-btn):not(.nav-child){
  background:var(--red) !important; color:#fff !important; border:0 !important;
  border-radius:9px !important; font-weight:700 !important;
  box-shadow:0 2px 6px rgba(200,16,46,.28) !important;
}
button.primary:hover,.btn-primary:hover{background:#a90d27 !important}
button.ghost,.btn-ghost,.btn-secondary{
  background:var(--card) !important; border:1px solid var(--line) !important;
  color:var(--navy) !important; border-radius:9px !important; font-weight:600 !important;
}
button.ghost:hover,.btn-ghost:hover{background:var(--menuhover) !important}

/* ── 9. Tables — kept full-bleed, which is why they were widened originally ── */
/* Tables get a real grid: an outer edge, a rule under the header, and column
   separators. On a wide inventory table with a dozen columns, horizontal rules
   alone leave the eye to guess which figure belongs to which heading. */
table{
  background:var(--card) !important;
  border:1px solid var(--cardline) !important;
  border-collapse:collapse !important;
}
thead th{
  background:var(--thead) !important; color:var(--theadtext) !important;
  border-bottom:2px solid var(--cardline) !important;
  border-right:1px solid var(--line) !important;
  font-size:12px !important; font-weight:700 !important;
  letter-spacing:.04em !important; text-transform:uppercase !important;
  /* Headers stay put while the body scrolls. These tables run to hundreds of
     rows inside their own scroller, and without this you end up reading
     "328.12 SY · $1,988" with nothing left on screen to say which column is
     which. A solid background is required — a transparent sticky header lets
     rows slide up underneath it. */
  position:sticky !important; top:0 !important; z-index:5 !important;
}
tbody td{
  border-bottom:1px solid var(--line) !important;
  border-right:1px solid var(--line) !important;
  color:var(--ink) !important;
}
/* Results tables must always fill their panel.
   The results tables (inventory search, aging, transfers) use table-layout:fixed
   with a colgroup where a couple of columns are `auto`. When those columns have
   nothing to size against — no rows yet, or an empty state — they collapse to
   content-minimum and the whole table shrinks to the sum of its FIXED widths.
   On inventory search that is 966px of fixed columns plus two collapsed ones,
   about 1046px, which is why the header bar stopped short of the panel edge and
   left a band of white. min-width pins it: with rows it changes nothing (the
   table is already 100%), and with none it stops the collapse. */
.tablewrap > table,.tablewrap table{min-width:100% !important}

/* The schedule board carries its own `.tablewrap thead th` rules with a
   near-black bar. Those out-specify a bare `thead th` (0,2,1 beats 0,0,1), so
   matching their specificity is what actually makes the schedule obey. */
.tablewrap thead th,table thead th{
  background:var(--thead) !important; color:var(--theadtext) !important;
  border-bottom:2px solid var(--cardline) !important;
}
/* No rule hanging off the last column — that reads as a stray mark. */
thead th:last-child,tbody td:last-child{border-right:0 !important}
tbody tr:last-child td{border-bottom:0 !important}
tbody tr:hover{background:var(--rowhover) !important}

/* ── 10. Command Center ──────────────────────────────────────────────────────
   The dashboard carries its own --cc-* token set rather than the page's, so it
   is re-pointed here rather than fought selector by selector. The accent hues
   (crimson / gold / green / amber) are kept — they are how a tile is read at a
   glance — but darkened enough to stay legible on a light ground. */
:root,body{
  --cc-bg:#eceff3 !important; --cc-p:#ffffff !important;
  --cc-t:#1c2433 !important; --cc-mut:#6a7686 !important; --cc-mut2:#98a2b3 !important;
  --cc-line:#dbe0e8 !important; --cc-line2:#c9d2de !important;
  --cc-crim:#c8102e !important; --cc-gold:#a8801f !important;
  --cc-grn:#128a4c !important; --cc-amb:#b5771a !important; --cc-red:#b42318 !important;
}
:root[data-theme=dark],:root[data-theme=dark] body{
  --cc-bg:#0e1014 !important; --cc-p:#1d2027 !important;
  --cc-t:#e6e9ee !important; --cc-mut:#9aa4b2 !important; --cc-mut2:#6b7686 !important;
  --cc-line:#2a2f38 !important; --cc-line2:#3a4150 !important;
  --cc-crim:#ff3355 !important; --cc-gold:#e0b64a !important;
  --cc-grn:#37c26e !important; --cc-amb:#e6a92f !important; --cc-red:#f0475a !important;
}
/* A handful of Command Center rules hardcode their darks instead of using the
   tokens above, so those are named explicitly. Translucent-white fills
   (rgba(255,255,255,.04)) are the giveaway — they only work on a dark ground
   and turn invisible on a light one. */
.cc-bar,.cc-card,.cc-link,.cc-panel,.cc-tile{
  background:var(--card) !important; border:1px solid var(--cardline) !important;
  border-radius:var(--radius) !important;
}
.cc-refresh,.cc-btn{
  background:var(--card) !important; border:1px solid var(--line) !important;
  color:var(--navy) !important;
}
.cc-refresh:hover,.cc-btn:hover{background:var(--rowhover) !important}
.cc-btn.prime{background:var(--red) !important; border-color:var(--red) !important; color:#fff !important}
.cc-store{
  background:var(--card) !important; color:var(--ink) !important;
  border:1px solid var(--line) !important;
}
.cc-t th{color:var(--muted) !important}

/* Every panel in the shell was a dark gradient with a glow blob and a lift on
   hover. Flat cards with a quiet hover read better across a room and match the
   rest of the console. Listed exhaustively rather than guessed at — these are
   all the rules in index.html whose background is a dark hex. */
.btile,.act,.stat,.op,.hlp-card,.hero-panel,.scan-panel{
  background:var(--card) !important; background-image:none !important;
  border:1px solid var(--cardline) !important;
  border-radius:var(--radius) !important; box-shadow:var(--cardshadow) !important;
}
.btile:hover,.act:hover,.stat:hover,.op:hover{
  transform:none !important; border-color:var(--navy2) !important;
  box-shadow:0 4px 14px rgba(16,24,40,.10) !important;
}
.btile::after,.act::after,.stat::after{display:none !important}   /* corner glow */
/* The tile accent (--ac) and the label colour were both picked for a dark
   ground — light text and translucent-white fills. On white they vanish, so
   both are re-pointed. The per-tile accent hues survive as the left bar and the
   icon chip; only the text goes to ink. */
#dashboard .act,#dashboard .btile,#dashboard .stat{
  --ac:var(--navy) !important;
  --acbg:rgba(31,58,95,.07) !important;
  --acbd:rgba(31,58,95,.20) !important;
  --acglow:transparent !important;
}
.al,.bl,.sl,.act .al,.btile .al{color:var(--ink) !important}
.act .ai,.btile .ai{background:var(--acbg) !important; color:var(--ac) !important}
:root[data-theme=dark] #dashboard .act,
:root[data-theme=dark] #dashboard .btile,
:root[data-theme=dark] #dashboard .stat{
  --ac:#cbd8e8 !important;
  --acbg:rgba(255,255,255,.07) !important;
  --acbd:rgba(255,255,255,.18) !important;
}
:root[data-theme=dark] .al,:root[data-theme=dark] .bl,:root[data-theme=dark] .sl{color:var(--ink) !important}
/* Grounds. .main and .sidebar set theirs with !important, hence the specificity. */
.main-wrap,.shell,main.main,.page,.sidebar{background:var(--bg) !important}
.iconrail{
  background:var(--card) !important;
  border-right:1px solid var(--line) !important;
}

/* ── The four rail buttons ───────────────────────────────────────────────────
   Each already carries its own accent in --rc-h (blue / orange / green /
   purple); flattening those to grey was a loss, so they come back — but as
   raised physical buttons rather than glowing tiles.

   The 3-D is three layers doing separate jobs, not one drop shadow:
     inset 0 1px 0 white   a lit top edge, as if light falls from above
     0 2px 0 <darker>      the button's own THICKNESS — this is what sells it
     0 4px 10px            the shadow it casts on the rail
   On hover the accent floods the whole badge, the button rises, and the cast
   shadow lengthens because it has moved further from the surface. On press it
   sinks below its resting position with the highlight inverted, so a click
   feels like a click. */
.iconrail .ri-badge{
  background:linear-gradient(180deg,#fff,#eaeef4) !important;
  border:1px solid color-mix(in srgb, var(--rc-h, #5b9bf7) 38%, var(--line)) !important;
  box-shadow:inset 0 1px 0 #fff,
             0 2px 0 rgba(16,24,40,.13),
             0 4px 10px rgba(16,24,40,.10) !important;
  transition:transform .13s ease, box-shadow .13s ease, background .13s ease !important;
}
/* Lucide draws with STROKE, not fill or color. The rail's own stylesheet sets a
   near-white stroke for the old dark background, so setting `color` alone left
   white icons on white badges — present, 30x30, and invisible. */
.iconrail .ri-badge i,.iconrail .ri-badge svg{
  color:var(--rc-h,#5b9bf7) !important; stroke:var(--rc-h,#5b9bf7) !important;
}
.iconrail .ri-lbl{color:var(--muted) !important; transition:color .13s ease}

.iconrail .rail-ico:hover .ri-badge{
  /* white sheen over the accent: lit at the top, shaded at the bottom, so the
     face still reads as curved once it is brightly coloured */
  background:linear-gradient(180deg,rgba(255,255,255,.30),rgba(0,0,0,.12)),
             var(--rc-h,#5b9bf7) !important;
  border-color:var(--rc-h,#5b9bf7) !important;
  transform:translateY(-3px) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),
             0 5px 0 rgba(16,24,40,.16),
             0 12px 22px var(--rc-g, rgba(91,155,247,.42)) !important;
}
.iconrail .rail-ico:hover .ri-badge i,
.iconrail .rail-ico:hover .ri-badge svg{color:#fff !important; stroke:#fff !important}
.iconrail .rail-ico:hover .ri-lbl{color:var(--rc-h,#5b9bf7) !important; font-weight:700}

.iconrail .rail-ico:active .ri-badge{
  transform:translateY(1px) !important;
  box-shadow:inset 0 2px 5px rgba(0,0,0,.22),
             0 1px 0 rgba(16,24,40,.12) !important;
}

/* The page you are on stays lit, so the rail always says where you are. */
.iconrail .rail-ico.active .ri-badge{
  background:linear-gradient(180deg,rgba(255,255,255,.26),rgba(0,0,0,.10)),
             var(--rc-h,#5b9bf7) !important;
  border-color:var(--rc-h,#5b9bf7) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.40),
             0 2px 0 rgba(16,24,40,.16),
             0 6px 14px var(--rc-g, rgba(91,155,247,.35)) !important;
}
.iconrail .rail-ico.active .ri-badge i,
.iconrail .rail-ico.active .ri-badge svg{color:#fff !important; stroke:#fff !important}
.iconrail .rail-ico.active .ri-lbl{color:var(--rc-h,#5b9bf7) !important; font-weight:700}

:root[data-theme=dark] .iconrail .ri-badge{
  background:linear-gradient(180deg,#272b34,#1b1e25) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),
             0 2px 0 rgba(0,0,0,.5),
             0 4px 10px rgba(0,0,0,.45) !important;
}
.dash-section-label{color:var(--muted) !important}

/* ── 11. The "not yet" card, borrowed wholesale from the Add-On ──────────── */
.soon{
  margin-top:18px; padding:44px; text-align:center; color:var(--muted);
  font-size:18px; font-weight:600; background:var(--rowhover);
  border:1px dashed var(--line); border-radius:10px;
}

/* ── customer branding ──────────────────────────────────────────────────────
   The customer's logo leads; our name is the credit beside it, carrying our
   mark so it reads at a glance rather than as four small words.

   The company NAME is not repeated next to the logo — the logo already says who
   they are, and "REAL FLOORS INC" beside "Real Floors" is the same fact twice. */
/* flex-direction is NOT optional here: the console's own stylesheet sets
   .appbar-brand{flex-direction:column} to stack its wordmark over "Cloud
   Console". Setting display:flex without overriding the direction left the
   credit stacked under the logo and spilling out of the 64px bar. */
.appbar-brand.hasLogo,.brand.hasLogo,.acct-brand.hasLogo{
  display:flex !important;flex-direction:row !important;align-items:center;gap:12px}
.appbar-brand.hasLogo .mark,.brand.hasLogo .mark,.acct-brand.hasLogo .mark{
  width:auto;height:42px;flex:none}
.appbar-brand.hasLogo .mark img,.brand.hasLogo .mark img,.acct-brand.hasLogo .mark img{
  height:42px;width:auto;display:block}

/* The company name, now redundant beside their own logo. */
.brand.hasLogo .sub,.appbar-brand.hasLogo .appbar-sub{display:none}

/* "Powered by FloorFOCUSED" — deliberately quiet. It is a credit, not a header. */
.appbar-brand.hasLogo .appbar-word,
.brand.hasLogo .wordmark,.acct-brand.hasLogo .wordmark{
  display:inline-flex !important;align-items:center;gap:6px;
  font-size:10px !important;letter-spacing:.13em !important;text-transform:uppercase;
  font-weight:600 !important;color:#8b929c !important;white-space:nowrap;line-height:1}
.appbar-brand.hasLogo .appbar-word b,
.brand.hasLogo .wordmark b,.acct-brand.hasLogo .wordmark b{font-weight:800;color:#aeb4bd}
.appbar-brand.hasLogo .appbar-word .brand-real,
.appbar-brand.hasLogo .appbar-word .brand-floors{font-size:10px !important}
.pbmark{width:15px;height:15px;flex:none;color:#8b929c;display:block}
.pbmark svg{width:100%;height:100%;display:block}
@media(max-width:640px){
  .appbar-brand.hasLogo .mark,.brand.hasLogo .mark,
  .appbar-brand.hasLogo .mark img,.brand.hasLogo .mark img{height:32px}
}