/* =====================================================================
InQueue brand override, Coral #FF5A3C, Ink #15171C, Muted #8C887F, Linen #EDEAE3
===================================================================== */
:root{
/* Canonical InQueue brand tokens (CLAUDE.md §2), the single source of
truth for the palette. New components use these; --ot-* / --bs-* below
remain the theme/Bootstrap aliases the framework needs. */
--color-ink: #15171C; /* primary text, dark bars/bands */
--color-coral: #FF5A3C; /* save/confirm/primary, accents, active */
--color-coral-rgb: 255, 90, 60; /* for rgba() coral tints */
--color-cancel: #FFFFFF; /* cancel/secondary buttons (with visible border) */
--color-danger: #C0392B; /* the one and only destructive red */
--color-stone: #8C887F; /* muted text, the logo figures */
--color-linen: #EDEAE3; /* page background, canonical 4th palette color (mirrors --body-bg) */
--ot-primary: #FF5A3C;
--ot-primary-rgb: 255, 90, 60;
--ot-primary-btn: #FF5A3C;
--ot-primary-border: #E2DED6;
--ot-bg-primary: #F7F5F1;
--body-bg: #EDEAE3;
--ot-primary-title: #15171C;
--bs-primary: #FF5A3C;
--bs-primary-rgb: 255, 90, 60;
--bs-link-color: #FF5A3C;
--bs-link-hover-color: #FF5A3C;
}
:root{
/* Full design tokens — THE place to retheme the platform (exact legacy values). */
--iq-coral:#FF5A3C;
--iq-coral-tint:#FAECE7;
--iq-coral-tint2:#FDECE7;
--iq-ink:#15171C;
--iq-ink2:#5B5852;
--iq-muted:#8C887F;
--iq-muted2:#B4B0A8;
--iq-border:#E7E3DB;
--iq-line:#F2EEE7;
--iq-line2:#F0ECE5;
--iq-soft:#F6F4F0;
--iq-paper:#FBFAF8;
--iq-cream:#F7F5F1;
--iq-bg:#EFEBE3;
--iq-linen:#EDEAE3;
--iq-green:#3B8C5A;
--iq-green-tint:#EAF3EC;
--iq-ok:#12855F;
--iq-ok-tint:#E1F5EE;
--iq-red:#C0472F;
--iq-red-tint:#FBEAEA;
--iq-danger:#B43A3A;
--iq-danger2:#A32D2D;
--iq-blue:#3B6FB0;
--iq-blue-tint:#E9F0F8;
--iq-amber:#C9A227;
--iq-amber-ink:#8A6D14;
--iq-amber-tint:#F7F1DC;
--iq-violet:#7A5CC0;
--iq-violet-tint:#EFEAF8;
--iq-mut:var(--iq-muted); --iq-bd:var(--iq-border);
}
.btn-primary-fill,
.btn-primary-fill:focus,
.btn-primary-fill:active{ color: var(--iq-ink) !important; }
.btn-primary-fill:hover{ color: var(--iq-ink) !important; filter: brightness(.96); }
.btn-primary-fill svg,
.btn-primary-fill i{ color: var(--iq-ink) !important; }
.text-danger-soft{ color: var(--iq-coral) !important; }
/* =====================================================================
Button standardization, mirror the QUEUE page buttons exactly.
Queue uses: .btn ~34px tall, 11px radius, 9px 15px padding, 13.5px/600;
coral = solid coral w/ WHITE text; light/cancel = white w/ border + ink.
Re-targets the bespoke per-page button families so every page matches
Queue without editing each view.
===================================================================== */
.csv-btn, .svx-btn, .cfg-btn, .csx-btn, .bx-btn, .dpx-btn, .btn-coral{
display:inline-flex !important; align-items:center; justify-content:center; gap:7px;
padding:9px 15px !important; height:auto !important; min-height:0 !important;
border-radius:11px !important; font-size:13.5px !important; font-weight:600 !important;
box-shadow:none !important; text-transform:none; border:1px solid transparent !important;
}
.csv-btn i, .svx-btn i, .cfg-btn i, .csx-btn i, .bx-btn i, .dpx-btn i, .btn-coral i,
.csv-btn svg, .svx-btn svg, .cfg-btn svg, .csx-btn svg, .bx-btn svg, .dpx-btn svg, .btn-coral svg{ width:16px !important; height:16px !important; }
/* Save / Create / primary = coral bg, WHITE text (like Queue .btn-coral) */
.csv-btn.primary, .svx-btn.primary, .cfg-btn.primary, .csx-btn.primary, .bx-btn.primary, .dpx-btn.primary, .btn-coral{
background:var(--ot-primary) !important; color:#fff !important;
}
.csv-btn.primary:hover, .svx-btn.primary:hover, .cfg-btn.primary:hover, .csx-btn.primary:hover, .bx-btn.primary:hover, .dpx-btn.primary:hover, .btn-coral:hover{
filter:brightness(.96); color:#fff !important;
}
.csv-btn.primary i, .svx-btn.primary i, .cfg-btn.primary i, .csx-btn.primary i, .bx-btn.primary i, .dpx-btn.primary i, .btn-coral i,
.csv-btn.primary svg, .svx-btn.primary svg, .cfg-btn.primary svg, .csx-btn.primary svg, .bx-btn.primary svg, .dpx-btn.primary svg, .btn-coral svg{ color:#fff !important; }
/* Cancel / ghost / light = white bg, border, ink text (like Queue .btn-light) */
.csv-btn.ghost, .svx-btn.ghost, .cfg-btn.ghost, .csx-btn.ghost, .bx-btn.ghost, .dpx-btn.ghost{
background:#fff !important; border:1px solid var(--iq-border) !important; color:var(--iq-ink) !important;
}
.csv-btn.ghost:hover, .svx-btn.ghost:hover, .cfg-btn.ghost:hover, .csx-btn.ghost:hover, .bx-btn.ghost:hover, .dpx-btn.ghost:hover{
background:var(--iq-paper) !important; border-color:#C9C3B8 !important; color:var(--iq-ink) !important;
}
/* Shared theme cancel button → white/ink, Queue radius */
.btn-cancel-soft-fill, .btn-cancel-soft-fill:focus, .btn-cancel-soft-fill:active{
background:#fff !important; border:1px solid var(--iq-border) !important; color:var(--iq-ink) !important; border-radius:11px !important;
}
.btn-cancel-soft-fill:hover{ background:var(--iq-paper) !important; border-color:#C9C3B8 !important; color:var(--iq-ink) !important; }
.btn-cancel-soft-fill span, .btn-cancel-soft-fill i, .btn-cancel-soft-fill svg{ color:var(--iq-ink) !important; }
/* Shared Queue-style buttons for pages that opt in */
.iq-btn{ display:inline-flex; align-items:center; gap:7px; border-radius:11px; padding:9px 15px; font:inherit; font-size:13.5px; font-weight:600; cursor:pointer; border:1px solid transparent; text-decoration:none; white-space:nowrap; }
.iq-btn svg, .iq-btn i{ width:16px; height:16px; }
.iq-btn-coral{ background:var(--iq-coral); color:#fff; } .iq-btn-coral:hover{ filter:brightness(.96); color:#fff; }
.iq-btn-light{ background:#fff; border-color:var(--iq-border); color:var(--iq-ink); } .iq-btn-light:hover{ border-color:#C9C3B8; color:var(--iq-ink); }
/* Shared export dropdown (backend/company/partials/export-menu.blade.php) */
.iq-export{ position:relative; display:inline-block; }
.iq-export > summary{ list-style:none; cursor:pointer; }
.iq-export > summary::-webkit-details-marker{ display:none; }
.iq-export > summary::marker{ content:''; }
.iq-export[open] > summary{ border-color:#C9C3B8; }
.iq-export .cv{ opacity:.6; }
.iq-export-menu{ position:absolute; top:calc(100% + 6px); right:0; min-width:190px; background:#fff; border:1px solid var(--iq-border); border-radius:12px; box-shadow:0 18px 40px -14px rgba(21,23,28,.32); padding:6px; z-index:60; }
.iq-export-menu a{ display:flex; align-items:center; gap:10px; padding:9px 11px; border-radius:8px; font-size:13px; font-weight:600; color:var(--iq-ink); text-decoration:none; white-space:nowrap; }
.iq-export-menu a svg, .iq-export-menu a i{ width:15px; height:15px; color:var(--iq-muted); }
.iq-export-menu a:hover{ background:var(--iq-soft); color:var(--iq-ink); } .iq-export-menu a:hover svg, .iq-export-menu a:hover i{ color:var(--iq-ink); }
/* =====================================================================
InQueue shared page layout, ONE standard for every index page, modelled
on the Queue page. Use these global classes so headers, stat tiles,
filters, and tables line up identically across the console:
.iq-page → page wrapper (sits inside .page-content)
.iq-top → header row (breadcrumb + title + sub on the left, actions right)
.iq-stats → 4-up stat tile grid .iq-stat / .iq-ic / .iq-num / .iq-lbl
.iq-panel → the single white card holding toolbar + table + footer
.iq-toolbar→ filter/search bar (border-bottom inside the panel)
===================================================================== */
.iq-page *{ box-sizing:border-box; }
/* Header, values mirror the Queue page (.tkx/.secx) exactly so every page lines up */
.iq-top{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin:0 0 20px; }
.iq-crumb{ font-size:12px; color:var(--iq-muted); font-weight:600; margin-bottom:4px; }
.iq-crumb a{ color:var(--iq-muted); text-decoration:none; } .iq-crumb a:hover{ color:var(--iq-ink); }
.iq-crumb .here{ color:var(--iq-coral); }
.iq-page .iq-top h1{ font-size:24px; font-weight:800; letter-spacing:-.02em; color:var(--iq-ink); margin:0; }
.iq-sub{ font-size:13px; color:var(--iq-muted); margin-top:4px; }
.iq-actions{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
/* Sub-navigation (tabs/pills) that sits directly under the page header */
.iq-subnav{ display:flex; gap:4px; flex-wrap:wrap; align-items:center; margin:0 0 20px; }
.iq-subnav a{ display:inline-flex; align-items:center; gap:7px; padding:8px 14px; border-radius:10px; font-size:13px; font-weight:600; color:var(--iq-muted); text-decoration:none; transition:.15s; white-space:nowrap; }
.iq-subnav a svg, .iq-subnav a i{ width:15px; height:15px; }
.iq-subnav a:hover{ background:var(--iq-soft); color:var(--iq-ink); }
.iq-subnav a.active{ background:var(--iq-coral-tint); color:var(--iq-coral); }
/* Stat tiles */
.iq-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:20px; }
@media(max-width:1050px){ .iq-stats{ grid-template-columns:1fr 1fr; } }
@media(max-width:520px){ .iq-stats{ grid-template-columns:1fr; } }
.iq-stat{ background:#fff; border:1px solid var(--iq-border); border-radius:15px; padding:16px 18px; display:flex; align-items:center; gap:14px; }
.iq-stat .iq-ic{ width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center; flex:none; }
.iq-stat .iq-ic i, .iq-stat .iq-ic svg{ width:21px; height:21px; }
.iq-ic.coral{ background:var(--iq-coral-tint); color:var(--iq-coral); }
.iq-ic.blue{ background:var(--iq-blue-tint); color:var(--iq-blue); }
.iq-ic.green{ background:var(--iq-green-tint); color:var(--iq-green); }
.iq-ic.violet{ background:var(--iq-violet-tint); color:var(--iq-violet); }
.iq-ic.amber{ background:var(--iq-amber-tint); color:var(--iq-amber-ink); }
.iq-ic.slate{ background:#EDEEF1; color:#4B5563; }
.iq-stat .iq-num{ font-size:23px; font-weight:800; letter-spacing:-.02em; line-height:1; color:var(--iq-ink); }
.iq-stat .iq-lbl{ font-size:11.5px; color:var(--iq-muted); font-weight:500; margin-top:5px; }
/* Panel + toolbar (mirrors .tkx .panel/.toolbar/.search) */
.iq-panel{ background:#fff; border:1px solid var(--iq-border); border-radius:16px; }
/* Panels that hold kebab dropdowns must not clip them (matches Queue) */
.iq-page .panel, .iq-page .iq-panel{ overflow:visible !important; }
/* Right-align action cells so the kebab lines up under a right-aligned "Action" header */
.iq-page table td.ctr{ text-align:right; }
/* Canonical table look inside an .iq-panel — the single source of truth for the
platform table style (matches the company Users/Queue reference). Pages that
use it need no per-page table CSS. */
.iq-panel table{ width:100%; border-collapse:collapse; }
.iq-panel thead th{ text-align:left; font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--iq-muted); padding:12px 18px; background:var(--iq-soft); border-bottom:none; }
.iq-panel tbody td{ padding:13px 18px; border-top:1px solid var(--iq-line); border-bottom:none; font-size:13.5px; vertical-align:middle; }
.iq-panel tbody tr:hover td{ background:#FCFBF9; }
.iq-panel .empty{ text-align:center; color:var(--iq-muted); padding:44px 20px; font-size:13.5px; }
.iq-toolbar{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:15px 18px; border-bottom:1px solid var(--iq-border); }
.iq-search{ flex:1; min-width:190px; max-width:280px; position:relative; }
.iq-search i, .iq-search svg{ position:absolute; left:13px; top:50%; transform:translateY(-50%); color:var(--iq-muted); width:16px; height:16px; pointer-events:none; }
.iq-search input{ width:100%; font-family:inherit; font-size:13.5px; color:var(--iq-ink); background:var(--iq-soft); border:1px solid var(--iq-border); border-radius:11px; padding:10px 14px 10px 36px; }
.iq-search input:focus{ outline:none; border-color:var(--iq-coral); background:#fff; box-shadow:0 0 0 3px rgba(255,90,60,.12); }
.iq-sel{ border:1px solid var(--iq-border); background:#fff; border-radius:10px; padding:9px 30px 9px 12px; font:inherit; font-size:13px; font-weight:600; color:var(--iq-ink); cursor:pointer; -webkit-appearance:none; appearance:none; background-image:url("data:image/svg+xml;utf8,"); background-repeat:no-repeat; background-position:right 11px center; }
.iq-foot{ display:flex; align-items:center; justify-content:space-between; padding:13px 18px; border-top:1px solid var(--iq-border); }
.iq-foot .info{ font-size:12.5px; color:var(--iq-muted); font-weight:500; }
.iq-pg{ display:flex; gap:6px; }
.iq-pg a{ min-width:32px; height:32px; padding:0 10px; border-radius:8px; border:1px solid var(--iq-border); background:#fff; display:flex; align-items:center; justify-content:center; font-size:12.5px; font-weight:600; color:var(--iq-ink); text-decoration:none; }
.iq-pg a.disabled{ opacity:.4; pointer-events:none; }
.iq-pg a.on{ background:var(--iq-coral); border-color:var(--iq-coral); color:#fff; }
.iq-pg a i, .iq-pg a svg{ width:15px; height:15px; }
/* Kebab action menu (mirrors the Queue page action button) */
.iq-acts{ display:flex; justify-content:flex-end; position:relative; }
.iq-kebab{ width:34px; height:34px; border-radius:9px; border:1px solid var(--iq-border); background:#fff; display:flex; align-items:center; justify-content:center; color:var(--iq-muted); cursor:pointer; padding:0; }
.iq-kebab:hover, .iq-kebab.open{ border-color:var(--iq-coral); color:var(--iq-coral); }
.iq-kebab svg, .iq-kebab i{ width:16px; height:16px; }
.iq-menu{ position:absolute; top:40px; right:0; min-width:180px; background:#fff; border:1px solid var(--iq-border); border-radius:12px; box-shadow:0 18px 40px -14px rgba(21,23,28,.32); padding:6px; z-index:30; display:none; }
.iq-menu.show{ display:block; }
.iq-menu a{ display:flex; align-items:center; gap:10px; padding:9px 11px; border-radius:8px; font-size:13px; font-weight:600; color:var(--iq-ink); text-decoration:none; cursor:pointer; }
.iq-menu a svg, .iq-menu a i{ width:15px; height:15px; color:var(--iq-muted); }
/* Toolbar as a