/* SkubiQ branding for TraxTMS — mirrors the SkubiQ WMS UI (SkubiQ_UI).
   Loaded after enterprise-refresh.css so it overrides the earlier theme. */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

:root {
  /* WMS tokens (SkubiQ_UI/src/index.css) */
  --sq-basic: #4251ab;
  --sq-basic-dark: #343f8a;
  --sq-accent: #EB0B1F;
  --sq-accent-hover: #c40a1a;
  --sq-bg: #e7e7e7;
  --sq-card: #ffffff;
  --sq-text: #000000;
  --sq-text-soft: #737373;
  --sq-border: #d9d9d9;
  --sq-thead: #f1f1f1;
  --sq-stripe: #fafafa;
  --sq-hover: #ebebeb;
  --sq-active: rgb(0 0 0 / 20%);

  /* Re-point the TraxTMS tokens at the SkubiQ palette */
  --app-bg: var(--sq-bg);
  --app-bg-deep: var(--sq-bg);
  --app-surface: var(--sq-card);
  --app-surface-strong: var(--sq-card);
  --app-surface-soft: var(--sq-stripe);
  --app-border: rgba(0, 0, 0, 0.08);
  --app-border-strong: var(--sq-border);
  --app-text: #212121;
  --app-text-soft: var(--sq-text-soft);
  --app-text-muted: #8c8c8c;
  --app-sidebar: var(--sq-basic);
  --app-sidebar-strong: var(--sq-basic-dark);
  --app-primary: var(--sq-basic);
  --app-primary-strong: var(--sq-basic-dark);
  --app-primary-soft: rgba(66, 81, 171, 0.1);
  --app-secondary: var(--sq-accent);
  --app-radius-sm: 4px;
  --app-radius-md: 6px;
  --app-radius-lg: 8px;
  --app-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
  --app-shadow-md: 0 2px 8px rgba(0, 0, 0, 0.12);
  --app-shadow-lg: 0 0 20px rgb(46 36 36 / 30%);

  --primary: var(--sq-basic);
  --primary-hover: var(--sq-basic-dark);
  --primary-light: rgba(66, 81, 171, 0.08);
  --primary-glow: rgba(66, 81, 171, 0.15);
  --bs-primary: var(--sq-basic);
  --bs-primary-rgb: 66, 81, 171;
  --bs-link-color: var(--sq-basic);
  --bs-link-hover-color: var(--sq-basic-dark);
  --bs-body-font-family: 'Poppins', sans-serif;
}

/* ─── Base ──────────────────────────────────────────── */
html, body, button, input, select, textarea,
h1, h2, h3, h4, h5, h6,
.navbar .app-page-heading__title, .orders-hero__title, .kpi-value,
.app-brand__title {
  font-family: 'Poppins', sans-serif !important;
}

body,
body.app-shell-body {
  background: var(--sq-bg) !important;
  color: var(--app-text);
  font-size: 0.85rem;
}

body.app-shell-body::before,
body.app-shell-body::after {
  display: none !important;
}

a { color: var(--sq-basic); }
a:hover { color: var(--sq-basic-dark); }

/* ─── Sidebar: indigo with WMS texture ──────────────── */
#sidebar-wrapper {
  background: var(--sq-basic) url('../img/bg_side_bar.webp') center / cover no-repeat !important;
  border-right: none !important;
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.18) !important;
  scrollbar-width: none;
}
#sidebar-wrapper::-webkit-scrollbar { width: 0; }

.sidebar-heading {
  padding: 0.75rem 1rem !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
  background: #ffffff;
}

.app-brand { gap: 0 !important; }
.app-brand__logo { display: block; height: 40px; max-width: 100%; }
.sidebar-heading__status { display: none !important; }

#sidebar-wrapper .list-group-item {
  background: transparent !important;
  color: #ffffff !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;
  border: 0 !important;
  border-left: 3px solid transparent !important;
  box-shadow: 0 2px 2px 0 rgb(0 0 0 / 16%), 0 0 0 1px rgb(0 0 0 / 8%);
  transform: none !important;
}
#sidebar-wrapper .list-group-item:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  color: #ffffff !important;
}
#sidebar-wrapper .list-group-item i,
.menu-arrow,
.menu-arrow i {
  color: #ffffff !important;
}
#sidebar-wrapper .list-group-item.active {
  background: var(--sq-active) !important;
  border-left: 3px solid wheat !important;
  box-shadow: none;
  color: #ffffff !important;
}
#sidebar-wrapper .collapse .list-group-item,
#sidebar-wrapper .collapse .list-group-item.ps-5 {
  padding-left: 2.6rem !important;
  font-size: 11px !important;
  color: #ffffff !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  text-transform: capitalize;
}
#sidebar-wrapper .collapse .list-group { background: rgba(0, 0, 0, 0.12) !important; }
.sidebar-divider { border-color: rgba(255, 255, 255, 0.15) !important; }

/* Global search in sidebar */
#sidebar-wrapper .sidebar-search-label { color: rgba(255, 255, 255, 0.75); }
#sidebar-wrapper .global-search-group .form-control,
#sidebar-wrapper .global-search-group .input-group-text {
  background: rgba(255, 255, 255, 0.95);
  border-color: transparent;
  border-radius: 4px;
}

/* Sidebar user */
.sidebar-user {
  border-radius: 6px !important;
  background: rgba(0, 0, 0, 0.18) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
}
.sidebar-user-avatar {
  background: var(--sq-accent) !important;
  box-shadow: none !important;
  border-radius: 50% !important;
}
.sidebar-user-role { color: rgba(255, 255, 255, 0.75) !important; }

/* ─── Top header: flat white bar ────────────────────── */
.navbar.app-topbar {
  margin: 0 !important;
  border: 0 !important;
  border-bottom: 1px solid var(--sq-border) !important;
  border-radius: 0 !important;
  background: #ffffff !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12) !important;
  backdrop-filter: none !important;
}
.app-page-heading__eyebrow { color: var(--sq-text-soft); letter-spacing: 0.08em; }
.app-page-heading__title { color: var(--sq-basic) !important; font-weight: 600; letter-spacing: 0; }
.workspace-pill {
  background: var(--primary-light) !important;
  color: var(--sq-basic) !important;
  border: 0 !important;
}
.workspace-pill__dot { background: var(--sq-accent) !important; box-shadow: none !important; }

.workspace-canvas { padding-top: 1rem; }

/* ─── Cards ─────────────────────────────────────────── */
.card {
  background: var(--sq-card) !important;
  border: 0 !important;
  border-radius: 4px !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12) !important;
  transform: none !important;
}
.card::before { display: none !important; }
.card:hover { transform: none !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.16) !important; }
.card-header {
  background: #efefef !important;
  color: #2A2424 !important;
  border-bottom: 1px solid var(--sq-border) !important;
  border-radius: 4px 4px 0 0 !important;
  font-weight: 600;
}
.card-header h6, .card-title { color: #2A2424 !important; }

/* ─── Buttons: WMS red primary actions ──────────────── */
.btn { border-radius: 4px !important; font-weight: 500; }
.btn-primary,
.btn-primary:active {
  background: var(--sq-accent) !important;
  border: 1px solid var(--sq-accent) !important;
  color: #ffffff !important;
  box-shadow: none !important;
}
.btn-primary:hover,
.btn-primary:focus {
  background: var(--sq-accent-hover) !important;
  border-color: var(--sq-accent-hover) !important;
  color: #ffffff !important;
}
.btn-outline-primary {
  color: var(--sq-basic) !important;
  border-color: var(--sq-basic) !important;
  background: transparent !important;
}
.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary.active {
  background: var(--sq-basic) !important;
  color: #ffffff !important;
}
.btn-secondary, .btn-outline-secondary {
  border-color: var(--sq-border) !important;
}
.text-primary { color: var(--sq-basic) !important; }
.bg-primary { background-color: var(--sq-basic) !important; }
.badge.bg-primary { background-color: var(--sq-basic) !important; }

/* ─── Forms ─────────────────────────────────────────── */
.form-control, .form-select {
  border: 1px solid var(--sq-border) !important;
  border-radius: 4px !important;
  box-shadow: none !important;
  font-size: 0.85rem;
}
.form-control:focus, .form-select:focus {
  border-color: var(--sq-basic) !important;
  box-shadow: 0 0 0 2px rgba(66, 81, 171, 0.15) !important;
}
.form-label, label { color: #2A2424; font-weight: 500; }
.form-check-input:checked {
  background-color: var(--sq-basic) !important;
  border-color: var(--sq-basic) !important;
}

/* ─── Tables: WMS grey header, compact rows ─────────── */
.table-wrapper { border-radius: 4px !important; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12) !important; }
.table thead th {
  background: var(--sq-thead) !important;
  color: #000000 !important;
  border-bottom: 1px solid var(--sq-border) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  padding: 8px 15px !important;
}
.table tbody td { padding: 8px 15px !important; font-size: 13px; }
.table tbody td:first-child { font-weight: 500; }
.table tbody tr { transition: none !important; }
.table tbody tr:nth-child(even) { background: var(--sq-stripe) !important; }
.table tbody tr:hover { background: var(--sq-hover) !important; transform: none !important; }

/* ─── Misc ──────────────────────────────────────────── */
.nav-tabs .nav-link.active, .nav-pills .nav-link.active {
  color: var(--sq-basic) !important;
  border-color: var(--sq-basic) !important;
}
.nav-pills .nav-link.active { background: var(--sq-basic) !important; color: #fff !important; }
.page-link { color: var(--sq-basic); }
.page-item.active .page-link { background: var(--sq-basic) !important; border-color: var(--sq-basic) !important; color: #fff; }
.dropdown-menu { border: 0; border-radius: 4px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18); }
.modal-content { border: 0; border-radius: 4px; }
.modal-header { background: #efefef; border-bottom: 1px solid var(--sq-border); }
.progress-bar { background-color: var(--sq-basic); }

/* ─── Dark mode (WMS dark palette) ──────────────────── */
html[data-bs-theme="dark"] body,
html[data-bs-theme="dark"] body.app-shell-body { background: #1a1d21 !important; color: #dfdfdf; }
html[data-bs-theme="dark"] #sidebar-wrapper { background-color: #272e32 !important; }
html[data-bs-theme="dark"] .sidebar-heading { background: #292e32; }
html[data-bs-theme="dark"] .navbar.app-topbar { background: #292e32 !important; border-bottom-color: #5f5f5f !important; }
html[data-bs-theme="dark"] .app-page-heading__title { color: #dfdfdf !important; }
html[data-bs-theme="dark"] .card { background: #2b3034 !important; }
html[data-bs-theme="dark"] .card-header { background: #43484c !important; color: #fff !important; }
html[data-bs-theme="dark"] .table thead th { background: #37393d !important; color: #fff !important; }
html[data-bs-theme="dark"] .table tbody tr:nth-child(even) { background: #343c40 !important; }
html[data-bs-theme="dark"] .table tbody tr:hover { background: #5e6467 !important; }

/* ─── Login / public pages: WMS login card ──────────── */
body.public-shell-body {
  background: #163988 url('../img/LoginBG.png') !important;
  color: #212121;
}
body.public-shell-body::before,
body.public-shell-body::after { display: none !important; }

.auth-shell {
  width: min(960px, 92vw);
  min-height: 0 !important;
  margin: 6vh auto;
  padding: 0 !important;
  gap: 0 !important;
  grid-template-columns: 1fr 1fr !important;
  box-shadow: var(--app-shadow-lg);
  background: #ffffff;
}
.auth-shell__story,
.auth-shell__panel { min-height: 520px !important; }

.auth-shell__story {
  border-radius: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
  background: var(--sq-basic) url('../img/bg_side_bar.webp') center / cover no-repeat !important;
  color: #ffffff;
}
.auth-shell__story::before { display: none !important; }
.auth-brand-lockup__wordmark h1 { color: #ffffff; font-weight: 600; }
.auth-brand-lockup__icon { display: none !important; }
.auth-story-metrics { display: none !important; }
.auth-feature-list li i { color: wheat; }

.auth-panel {
  border-radius: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
  background: #ffffff !important;
  backdrop-filter: none !important;
}
.auth-panel__brand { display: flex; justify-content: center; padding-bottom: 0.5rem; }
.auth-panel__brand img { height: 40px; }
.auth-panel__eyebrow { background: var(--primary-light) !important; color: var(--sq-basic) !important; }
.auth-panel h2 { color: #2A2424 !important; font-size: 1.15rem !important; font-weight: 700; }
.auth-link, .auth-panel__footer a { color: var(--sq-basic) !important; }
.auth-panel .btn-primary {
  border-radius: 30px !important;
  background-image: linear-gradient(to left, #5c1a87, #FF1010) !important;
  border: 0 !important;
  text-transform: uppercase;
}

@media (max-width: 800px) {
  .auth-shell { grid-template-columns: 1fr !important; margin: 0 auto; width: 100%; }
  .auth-shell__story { display: none !important; }
}