/* SkubiQ branding for CrewX - mirrors the SkubiQ WMS UI (SkubiQ_UI/src/index.css).
   Loaded after app.css so it overrides the earlier palette: indigo textured sidebar, flat white
   header, grey page, square cards with a soft shadow, grey table headers, WMS red for primary actions. */

:root {
  --sq-basic: #4251ab;
  --sq-basic-dark: #343f8a;
  --sq-accent: #EB0B1F;
  --sq-accent-hover: #c40a1a;
  --sq-bg: #e7e7e7;
  --sq-card: #ffffff;
  --sq-text-soft: #737373;
  --sq-border: #d9d9d9;
  --sq-thead: #f1f1f1;
  --sq-stripe: #fafafa;
  --sq-hover: #ebebeb;

  --navy: var(--sq-basic);
  --navy-deep: var(--sq-basic-dark);
  --blue: var(--sq-basic);
  --gold: wheat;
  --text: #212121;
  --muted: var(--sq-text-soft);
  --line: var(--sq-border);
  --background: var(--sq-bg);
  --heading: 'Poppins', sans-serif;
  --body: 'Poppins', sans-serif;
}

html, body, button, input, select, textarea, h1, h2, h3, h4, h5, h6 { font-family: 'Poppins', sans-serif !important; }
body { background: var(--sq-bg) !important; color: var(--text); }
a:hover { color: var(--sq-basic-dark); }

/* ─── Sidebar: indigo with the WMS texture ─────────── */
.sidebar {
  background: var(--sq-basic) url('img/bg_side_bar.webp') center / cover no-repeat !important;
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.18) !important;
  padding: 0 !important;
  color: #fff !important;
  scrollbar-width: none;
}
.sidebar::-webkit-scrollbar { width: 0; }
.sidebar .account-brand {
  margin: 0 0 12px !important;
  padding: 14px 16px !important;
  min-height: 62px;
  background: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  color: #2A2424 !important;
}
.sidebar .brand-mark { color: var(--sq-basic) !important; }
.sidebar .brand-x { color: var(--sq-accent) !important; }
.sidebar .brand small { color: var(--sq-text-soft) !important; }

.workspace-label {
  margin: 0 12px 10px !important;
  background: rgba(0, 0, 0, 0.18) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 6px !important;
  color: #fff !important;
}
.workspace-label small, .workspace-label .muted { color: rgba(255, 255, 255, 0.75) !important; }
.workspace-icon { color: #fff !important; }
.nav-label { color: rgba(255, 255, 255, 0.7) !important; padding-left: 16px; letter-spacing: 0.08em; }

.nav-item {
  background: transparent !important;
  color: #fff !important;
  border: 0 !important;
  border-left: 3px solid transparent !important;
  border-radius: 0 !important;
  margin: 2px 0 !important;
  padding: 0.6rem 1rem !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  text-transform: uppercase;
  box-shadow: 0 2px 2px 0 rgb(0 0 0 / 16%), 0 0 0 1px rgb(0 0 0 / 8%) !important;
}
.nav-item svg, .nav-item i { color: #fff !important; }
.nav-item:hover { background: rgba(255, 255, 255, 0.12) !important; }
.nav-item.active {
  background: rgb(0 0 0 / 20%) !important;
  border-left: 3px solid wheat !important;
  box-shadow: none !important;
}
.nav-count { background: var(--sq-accent) !important; color: #fff !important; }
.sidebar-footer { color: rgba(255, 255, 255, 0.75) !important; padding-left: 16px; }
.connection-dot { background: wheat !important; }

/* ─── Top header: flat white bar ───────────────────── */
.topbar {
  background: #fff !important;
  border-bottom: 1px solid var(--sq-border) !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12) !important;
  backdrop-filter: none !important;
}
.breadcrumb { color: var(--sq-text-soft) !important; }
.breadcrumb strong { color: var(--sq-basic) !important; font-weight: 600; }
.sidebar-toggle, .icon-button { color: var(--sq-basic) !important; }
.top-avatar, .avatar { background: var(--sq-accent) !important; color: #fff !important; }
.topbar-user strong { color: #2A2424 !important; }
.auth-action, .logout-action {
  border-radius: 4px !important;
  border: 1px solid var(--sq-border) !important;
  background: #fff !important;
  color: var(--sq-basic) !important;
}
.auth-action:hover, .logout-action:hover { background: var(--sq-basic) !important; color: #fff !important; }
.notification span { background: var(--sq-accent) !important; }

/* ─── Page heading + filters ───────────────────────── */
.page-heading h1 { color: var(--sq-basic) !important; font-weight: 600; letter-spacing: 0; }
.eyebrow { color: var(--sq-text-soft) !important; letter-spacing: 0.08em; }
.live-dot { background: var(--sq-accent) !important; box-shadow: none !important; }
.demo-label { background: var(--sq-accent) !important; color: #fff !important; border-radius: 3px !important; }
.tenant-switch, .filter-bar {
  border: 0 !important;
  border-radius: 4px !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12) !important;
}
.filter-title, .tenant-symbol { color: var(--sq-basic) !important; }

/* ─── Cards, panels, KPIs ──────────────────────────── */
.panel, .kpi-card, .trend-highlight, .account-banner {
  background: #fff !important;
  border: 0 !important;
  border-radius: 4px !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12) !important;
}
.panel:hover, .kpi-card:hover { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.16) !important; }
.panel-heading h2 { color: #2A2424 !important; font-weight: 600 !important; }
.panel-icon { color: var(--sq-basic) !important; }
.metric-icon { background: rgba(66, 81, 171, 0.1) !important; color: var(--sq-basic) !important; }
.metric-value { color: var(--sq-basic) !important; font-weight: 600 !important; }
.text-link { color: var(--sq-basic) !important; }

/* ─── Buttons ──────────────────────────────────────── */
.button { border-radius: 4px !important; font-weight: 500; border-color: var(--sq-border); color: var(--sq-basic); }
.button:hover { background: var(--sq-hover) !important; }
.button.primary, .button.refresh-button, .auth-submit {
  background: var(--sq-accent) !important;
  border: 1px solid var(--sq-accent) !important;
  color: #fff !important;
}
.button.primary:hover, .button.refresh-button:hover, .auth-submit:hover {
  background: var(--sq-accent-hover) !important;
  border-color: var(--sq-accent-hover) !important;
}
.button.ghost { background: transparent !important; }

/* ─── Forms ────────────────────────────────────────── */
input, select, textarea { border: 1px solid var(--sq-border) !important; border-radius: 4px !important; box-shadow: none !important; }
input:focus, select:focus, textarea:focus {
  outline: 0 !important;
  border-color: var(--sq-basic) !important;
  box-shadow: 0 0 0 2px rgba(66, 81, 171, 0.15) !important;
}

/* ─── Tables: grey header, striped rows ────────────── */
table thead th {
  background: var(--sq-thead) !important;
  color: #000 !important;
  border-bottom: 1px solid var(--sq-border) !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
table tbody tr:nth-child(even) { background: var(--sq-stripe); }
table tbody tr:hover { background: var(--sq-hover) !important; }
.table-panel { border-radius: 4px !important; }
.progress-track > * { background: var(--sq-basic) !important; }
.section-tabs a.active, .section-tabs button.active { color: var(--sq-basic) !important; border-color: var(--sq-basic) !important; }
.form-dialog { border: 0 !important; border-radius: 4px !important; box-shadow: 0 0 20px rgb(46 36 36 / 30%) !important; }
.dialog-heading { background: #efefef; border-bottom: 1px solid var(--sq-border); }
.toast { border-radius: 4px !important; }
.main-footer { color: var(--sq-text-soft); }

/* ─── Login / register: WMS card on the blue background ─ */
.auth-shell { min-height: 100dvh; background: #163988 url('img/LoginBG.png'); display: flex; align-items: center; justify-content: center; padding: 4vh 0; }
.auth-page {
  width: min(960px, 92vw);
  max-width: none;
  min-height: 0;
  background: #fff !important;
  box-shadow: 0 0 20px rgb(46 36 36 / 30%);
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto 1fr auto;
}
.auth-top {
  grid-column: 1; grid-row: 1 / 4;
  flex-direction: column; justify-content: center; align-items: flex-start; gap: 18px;
  padding: 40px !important;
  border: 0 !important;
  background: var(--sq-basic) url('img/bg_side_bar.webp') center / cover no-repeat;
  color: #fff;
}
.auth-top .auth-brand, .auth-top .brand-mark, .auth-top .brand-mark svg { color: #fff !important; }
.auth-top .brand-x { color: wheat !important; }
.auth-top .brand small { color: rgba(255, 255, 255, 0.8) !important; }
.auth-top > span { color: rgba(255, 255, 255, 0.85) !important; font-size: 11px; letter-spacing: 0.12em !important; }
.auth-top-right { display: flex; gap: 8px; }
.auth-top-right .auth-action { background: transparent !important; color: #fff !important; border-color: rgba(255, 255, 255, 0.5) !important; }
.auth-top-right .auth-action.primary { background: var(--sq-accent) !important; border-color: var(--sq-accent) !important; }
.auth-content { grid-column: 2; grid-row: 1 / 3; width: auto; max-width: none; margin: 0; padding: 40px; }
.auth-footer { grid-column: 2; grid-row: 3; padding: 14px 40px; color: var(--sq-text-soft); }
.auth-heading h1 { color: #2A2424; font-size: 1.5rem; font-weight: 700; }
.auth-heading .eyebrow { color: var(--sq-basic) !important; }
.auth-form input { height: 40px; }
.auth-form .auth-submit, .demo-button { border-radius: 30px !important; }
.auth-form .auth-submit { text-transform: uppercase; background-image: linear-gradient(to left, #5c1a87, #FF1010) !important; border: 0 !important; }
.auth-switch a { color: var(--sq-basic); }
@media (max-width: 800px) {
  .auth-page { grid-template-columns: 1fr; }
  .auth-top { grid-row: 1; grid-column: 1; padding: 20px !important; }
  .auth-content, .auth-footer { grid-column: 1; grid-row: auto; padding-left: 24px; padding-right: 24px; }
}

/* Day plan: a compact header so the hourly Gantt chart has room */
main.page-dayplan .page-heading { margin: 0 0 6px !important; padding: 0 !important; align-items: center !important; min-height: 0 !important; }
main.page-dayplan .page-heading .eyebrow, main.page-dayplan .page-heading p { display: none !important; }
main.page-dayplan .page-heading h1 { font-size: 20px !important; line-height: 1.2 !important; margin: 0 !important; }
main.page-dayplan .tenant-switch { padding: 3px 10px !important; min-height: 0 !important; box-shadow: none !important; }
main.page-dayplan .tenant-switch .tenant-symbol { width: 24px !important; height: 24px !important; }
main.page-dayplan .tenant-switch select { padding-top: 2px !important; padding-bottom: 2px !important; min-height: 26px !important; }
main.page-dayplan .filter-bar { padding: 4px 12px !important; margin: 0 0 6px !important; min-height: 0 !important; gap: 10px !important; }
main.page-dayplan .filter-bar select, main.page-dayplan .filter-bar input, main.page-dayplan .filter-bar .button { min-height: 28px !important; height: 28px !important; padding-top: 0 !important; padding-bottom: 0 !important; font-size: 12px !important; }
main.page-dayplan .mini-stats { margin: 0 0 6px !important; padding: 0 !important; gap: 0 !important; }
main.page-dayplan .mini-stats > div { padding: 4px 14px !important; min-height: 0 !important; display: flex !important; align-items: baseline !important; gap: 8px !important; flex-wrap: wrap; }
main.page-dayplan .mini-stats > div > span { font-size: 11px !important; margin: 0 !important; }
main.page-dayplan .mini-stats > div > strong { font-size: 16px !important; margin: 0 !important; line-height: 1.2 !important; }
main.page-dayplan #whatif { margin-bottom: 6px !important; padding: 6px 14px !important; }
main.page-dayplan .section-toolbar { margin-bottom: 4px !important; }
main.page-dayplan .mini-stats.gantt-summaries { padding: 8px 12px !important; margin: 0 !important; }
main.page-dayplan .mini-stats.gantt-summaries > div { display: block !important; padding: 6px 12px !important; }
main.page-dayplan .mini-stats.gantt-summaries > div > strong { font-size: 18px !important; }

/* Day plan: the what-if analysis is a right-hand drawer, 20% of the width when open */
details.whatif-drawer { position: fixed; top: 56px; right: 0; bottom: 0; width: 20vw; min-width: 280px; z-index: 35; background: var(--surface, #fff); border-left: 1px solid #dfe3ee; box-shadow: -6px 0 18px rgba(20, 30, 60, .12); overflow-y: auto; padding: 0 14px 14px; margin: 0; }
details.whatif-drawer > summary { position: sticky; top: 0; z-index: 1; background: inherit; cursor: pointer; font-weight: 600; padding: 12px 0 10px; border-bottom: 1px solid #e5e8ef; margin-bottom: 8px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
details.whatif-drawer > summary::after { content: "\2715"; margin-left: auto; color: #6b7d8f; font-size: 13px; }
details.whatif-drawer:not([open]) { width: auto; min-width: 0; bottom: auto; top: 38%; padding: 0; border-radius: 8px 0 0 8px; overflow: visible; background: #4251ab; border: 0; }
details.whatif-drawer:not([open]) > summary { writing-mode: vertical-rl; transform: rotate(180deg); padding: 14px 9px; margin: 0; border: 0; color: #fff; display: block; }
details.whatif-drawer:not([open]) > summary::after { content: ""; }
details.whatif-drawer:not([open]) > summary .badge { display: none; }
details.whatif-drawer form fieldset { width: 100%; box-sizing: border-box; }
details.whatif-drawer form fieldset input[type=number] { width: 80px !important; }
details.whatif-drawer { font-size: 11px; line-height: 1.4; }
details.whatif-drawer *:not(svg):not(path) { font-size: 11px !important; }
details.whatif-drawer .muted, details.whatif-drawer small, details.whatif-drawer p { font-size: 10px !important; }
details.whatif-drawer > summary, details.whatif-drawer legend { font-size: 12px !important; }
details.whatif-drawer input, details.whatif-drawer select, details.whatif-drawer .button { height: 26px !important; min-height: 0 !important; padding: 0 6px !important; }
details.whatif-drawer input[type=checkbox] { flex: 0 0 14px; width: 14px !important; min-width: 14px !important; height: 14px !important; padding: 0 !important; margin: 2px 0 0 !important; }
details.whatif-drawer table th, details.whatif-drawer table td { padding: 3px 4px !important; }
details.whatif-drawer input[type=time] { width: 90px; }
main.page-dayplan .mini-stats.gantt-summaries > div > small { display: block !important; font-size: 9px !important; line-height: 1.35 !important; margin: 0 !important; }
main.page-dayplan .gantt .gantt-label, main.page-dayplan .gantt .gantt-label *:not(svg):not(path) { font-size: 9px !important; }
main.page-dayplan .gantt .gantt-label small, main.page-dayplan .gantt .gantt-label .muted { font-size: 8px !important; }
main.page-dayplan .gantt .gantt-hour, main.page-dayplan .gantt .gantt-band, main.page-dayplan .gantt .gantt-date { font-size: 8px !important; }
main.page-dayplan .gantt .gantt-bar, main.page-dayplan .gantt .gantt-bar span { font-size: 8px !important; }
main.page-dayplan .gantt .gantt-head .gantt-label { font-size: 9px !important; }
.filter-bar .crew-check { display: inline-flex; align-items: center; gap: 6px; flex-direction: row !important; white-space: nowrap; cursor: pointer; }
.filter-bar .crew-check input[type=checkbox] { width: 15px !important; min-width: 15px !important; height: 15px !important; padding: 0 !important; margin: 0 !important; flex: 0 0 15px; }
.filter-bar .crew-check span { font-size: 12px; font-weight: 600; }