/* 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; }
}