:root {
  --bg: #f7f9ff;
  --ink: #18305f;
  --muted: #6a7591;
  --accent: #ffc61a;
  --accent-dark: #d89f00;
  --panel: rgba(255, 255, 255, 0.92);
  --line: rgba(31, 79, 191, 0.12);
  --sidebar: #1f4fbf;
  --sidebar-soft: rgba(255, 255, 255, 0.12);
  --brand-blue-deep: #15357f;
  --brand-blue-soft: #e8f0ff;
  --brand-yellow-soft: #fff4bf;
}

html {
  font-size: 15px;
  min-height: 100%;
}

body {
  min-height: 100vh;
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at top right, rgba(255, 198, 26, 0.28), transparent 28%),
    radial-gradient(circle at bottom left, rgba(31, 79, 191, 0.16), transparent 32%),
    var(--bg);
  font-family: "Plus Jakarta Sans", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased;
}

.app-shell {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  min-height: 100vh;
}

.sidebar {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: 1.5rem;
  background: linear-gradient(180deg, #15357f 0%, #102a66 100%);
  color: #fff;
}

.brand-block {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 0.9rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px;
  color: #fff;
  text-decoration: none;
  background: rgba(255, 255, 255, 0.04);
  transition: background 0.2s;
}

.brand-block:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.brand-logo {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  border-radius: 12px;
  font-size: 1.6rem;
  color: #fff;
  flex-shrink: 0;
}

.brand-text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.brand-text strong {
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.1;
}

.brand-kicker,
.eyebrow {
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.72rem;
  font-weight: 700;
}

.brand-text .brand-kicker {
  font-size: 0.68rem;
  opacity: 0.7;
}

.nav-stack {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  border-radius: 14px;
  color: #e7f3f0;
  text-decoration: none;
  background: transparent;
  transition: background-color 0.2s ease;
  font-weight: 500;
}

.nav-icon {
  font-size: 1.25rem;
  flex-shrink: 0;
  opacity: 0.85;
}

.nav-item.active .nav-icon {
  opacity: 1;
}

.nav-item:hover,
.nav-item:focus {
  background: var(--sidebar-soft);
  color: #fff;
}

.nav-item.active {
  background: rgba(255, 255, 255, 0.15);
  color: #ffffff;
  font-weight: 700;
  position: relative;
}

.nav-item.active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  bottom: 12px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--accent);
}

.sidebar-footer {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.sidebar-version {
  padding: 0.75rem 0.9rem;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.06);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.85rem;
}

.sidebar-version span {
  opacity: 0.65;
}

.content-shell {
  padding: 1.5rem;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
  padding: 0.75rem 1rem;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid var(--line);
  border-radius: 18px;
  backdrop-filter: blur(8px);
  position: relative;
  z-index: 200;
}

.topbar-left {
  min-width: 0;
}

.topbar-eyebrow {
  margin: 0;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
}

.topbar-title {
  margin: 0.15rem 0 0;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--ink);
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.topbar-date {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.9rem;
  border-radius: 12px;
  background: rgba(31, 79, 191, 0.08);
  color: var(--sidebar);
  font-size: 0.85rem;
  font-weight: 500;
  text-transform: capitalize;
}

.topbar-date i {
  font-size: 1rem;
}

.topbar-icon-btn {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  cursor: pointer;
  font-size: 1.15rem;
  transition: background 0.15s;
}

.topbar-icon-btn:hover {
  background: rgba(31, 79, 191, 0.08);
  color: var(--brand-blue-deep);
}

.topbar-badge-dot {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(255, 198, 26, 0.22);
}

.topbar-user {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.user-avatar {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #1f4fbf, #15357f);
  color: #fff;
  font-size: 0.9rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}

.user-meta {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.user-meta strong {
  font-size: 0.9rem;
  line-height: 1.1;
}

.user-meta span {
  color: var(--muted);
  font-size: 0.8rem;
}

.dev-mode-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.75rem;
  border-radius: 999px;
  background: rgba(232, 186, 107, 0.18);
  color: #f5c97a;
  font-size: 0.75rem;
  font-weight: 600;
  align-self: flex-start;
}

.page-body {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.hero-shell,
.page-shell {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.hero-shell {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(260px, 0.9fr);
  gap: 1.25rem;
}

.hero-copy,
.hero-panel,
.panel-card {
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--panel);
  box-shadow: 0 18px 40px rgba(16, 24, 40, 0.08);
}

.hero-copy {
  padding: 2rem;
}

.hero-copy h1,
.page-header h1 {
  margin: 0.35rem 0 0.75rem;
}

.hero-text,
.muted {
  color: var(--muted);
}

.hero-panel {
  display: grid;
  gap: 0.9rem;
  padding: 1.5rem;
}

.mini-stat,
.panel-card {
  padding: 1.2rem 1.25rem;
}

.mini-label {
  display: block;
  color: var(--muted);
  margin-bottom: 0.35rem;
}

.hero-actions {
  display: flex;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.btn-accent {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.btn-accent:hover,
.btn-accent:focus {
  background: var(--accent-dark);
  border-color: var(--accent-dark);
  color: #fff;
}

.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.status-pill {
  align-self: flex-start;
  padding: 0.55rem 0.85rem;
  border-radius: 999px;
  background: rgba(184, 80, 66, 0.12);
  color: var(--accent-dark);
  font-weight: 700;
}

.placeholder-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.panel-card h2 {
  margin-top: 0;
  font-size: 1rem;
}

.panel-card h3 {
  margin: 0;
  font-size: 0.95rem;
}

.big-value {
  margin: 0.6rem 0;
  font-size: 1.3rem;
  font-weight: 700;
}

.inventory-page {
  gap: 1rem;
}

.debt-page {
  gap: 1rem;
}

.sales-page,
.forecast-page {
  gap: 1rem;
}

.inventory-toolbar,
.timeline-card,
.summary-card,
.alert-card,
.serial-card,
.debt-card,
.order-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.inventory-search-form,
.move-form,
.order-form {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.inventory-search-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.75rem;
}

.quick-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
}

.quick-chip-label {
  color: var(--muted);
  font-weight: 600;
}

.quick-chip {
  padding: 0.45rem 0.8rem;
  border-radius: 999px;
  border: 1px solid rgba(24, 58, 55, 0.12);
  background: rgba(24, 58, 55, 0.06);
  color: var(--sidebar);
  text-decoration: none;
  font-weight: 600;
}

.quick-chip:hover,
.quick-chip:focus {
  background: rgba(184, 80, 66, 0.14);
  color: var(--accent-dark);
}

.inventory-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(320px, 0.95fr);
  gap: 1rem;
}

.debt-grid,
.order-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(320px, 0.95fr);
  gap: 1rem;
}

.sales-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(320px, 0.95fr);
  gap: 1rem;
}

.sidebar-stack {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.card-section-heading {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
}

.serial-headline {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: flex-start;
}

.serial-product {
  margin: 0.3rem 0;
  font-size: 1.15rem;
  font-weight: 700;
}

.serial-badges {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: flex-end;
}

.inventory-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.45rem 0.75rem;
  border-radius: 999px;
  font-weight: 700;
}

.badge-status {
  background: rgba(184, 80, 66, 0.12);
  color: var(--accent-dark);
}

.badge-location {
  background: rgba(24, 58, 55, 0.12);
  color: var(--sidebar);
}

.serial-stats-grid,
.summary-grid,
.move-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.current-note,
.summary-box,
.inventory-alert-item,
.timeline-content,
.mini-stat {
  border-radius: 18px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.7);
}

.debt-table th {
  color: var(--muted);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.debt-table td {
  background: transparent;
}

.detail-stat-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
}

.debt-entry-list,
.alert-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.debt-entry-card,
.order-result-box {
  flex: 1 1 240px;
  padding: 1rem;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.72);
}

.alert-chip-row .alert-badge {
  margin-bottom: 0;
}

.alert-badge-danger {
  background: rgba(184, 80, 66, 0.16);
  color: var(--accent-dark);
}

.form-help {
  margin: -0.2rem 0 0;
  color: var(--muted);
  font-size: 0.92rem;
}

.current-note {
  padding: 1rem;
}

.current-note p {
  margin: 0.35rem 0 0;
}

.summary-box {
  padding: 1rem;
}

.summary-box span {
  display: block;
  color: var(--muted);
  margin-bottom: 0.4rem;
}

.summary-box strong {
  font-size: 1.5rem;
}

.alert-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
}

.inventory-alert-item {
  padding: 0.9rem;
  margin-top: 0.65rem;
}

.inventory-alert-item p {
  margin: 0.45rem 0 0;
  color: var(--muted);
}

.alert-badge {
  display: inline-flex;
  margin-bottom: 0.55rem;
  padding: 0.3rem 0.55rem;
  border-radius: 999px;
  background: rgba(16, 24, 40, 0.08);
  color: var(--ink);
  font-size: 0.74rem;
  font-weight: 700;
}

.alert-badge-warm {
  background: rgba(232, 186, 107, 0.26);
  color: #8a5a05;
}

.timeline-list {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.timeline-item {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 0.85rem;
  align-items: start;
}

.timeline-dot {
  width: 14px;
  height: 14px;
  margin-top: 1rem;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 6px rgba(184, 80, 66, 0.12);
}

.timeline-content {
  padding: 1rem;
}

.timeline-meta {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  color: var(--muted);
  margin-bottom: 0.45rem;
}

.timeline-route {
  margin: 0 0 0.45rem;
  font-weight: 700;
}

.inventory-toast {
  margin-bottom: 0;
}

.route-card,
.forecast-card,
.stop-detail-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.route-map {
  position: relative;
  min-height: 320px;
  border-radius: 24px;
  border: 1px solid var(--line);
  background:
    radial-gradient(circle at 22% 24%, rgba(184, 80, 66, 0.16), transparent 0 24%),
    radial-gradient(circle at 78% 52%, rgba(24, 58, 55, 0.2), transparent 0 28%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(232, 239, 236, 0.92));
  overflow: hidden;
}

.route-path {
  position: absolute;
  inset: auto;
  border-top: 3px dashed rgba(24, 58, 55, 0.35);
  transform-origin: left center;
}

.route-path-one {
  left: 16%;
  top: 25%;
  width: 48%;
  transform: rotate(14deg);
}

.route-path-two {
  left: 41%;
  top: 52%;
  width: 32%;
  transform: rotate(-22deg);
}

.route-map-label {
  position: absolute;
  left: 8%;
  bottom: 10%;
  color: rgba(24, 58, 55, 0.72);
  font-weight: 700;
}

.route-map-label-east {
  left: auto;
  right: 10%;
  top: 15%;
}

.route-map-label-south {
  left: auto;
  right: 14%;
  bottom: 15%;
}

.route-pin {
  position: absolute;
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  box-shadow: 0 12px 24px rgba(16, 24, 40, 0.14);
}

.route-pin-done {
  background: #15357f;
}

.route-pin-pending {
  background: #f59e0b;
}

.route-pin-active {
  outline: 4px solid rgba(255, 198, 26, 0.55);
}

.route-stop-list,
.ranking-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.route-stop-item,
.ranking-item {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
  padding: 0.95rem 1rem;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.72);
  color: var(--ink);
  text-decoration: none;
}

.route-stop-item-active {
  border-color: rgba(184, 80, 66, 0.28);
  background: rgba(184, 80, 66, 0.08);
}

.ranking-score {
  text-align: right;
  font-weight: 700;
}

.ranking-score small {
  display: block;
  color: var(--muted);
}

.stop-photo {
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-radius: 20px;
  border: 1px solid var(--line);
  background: rgba(24, 58, 55, 0.08);
}

.forecast-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.forecast-card-head,
.forecast-metrics {
  display: grid;
  gap: 0.75rem;
}

.forecast-card-head {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
}

.forecast-card h2,
.forecast-product {
  margin: 0;
}

.forecast-product {
  font-size: 1.1rem;
  font-weight: 700;
}

.forecast-metrics {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus {
  box-shadow: 0 0 0 0.1rem #fff, 0 0 0 0.25rem rgba(184, 80, 66, 0.25);
}

.task-summary-grid,
.task-layout-grid {
  display: grid;
  gap: 1rem;
}

.task-summary-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 1rem;
}

.task-layout-grid {
  grid-template-columns: minmax(0, 2fr) minmax(320px, 1fr);
  margin-bottom: 1rem;
}

.section-title-row,
.bot-action-row,
.kpi-card,
.activity-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.task-table-shell {
  overflow-x: auto;
}

.task-table {
  width: 100%;
  border-collapse: collapse;
}

.task-table th,
.task-table td {
  padding: 0.85rem 0.75rem;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

.task-table th {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.status-badge,
.source-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 700;
}

.status-open {
  background: rgba(245, 158, 11, 0.14);
  color: #b45309;
}

.status-done {
  background: rgba(22, 163, 74, 0.12);
  color: #15803d;
}

.status-overdue {
  background: rgba(220, 38, 38, 0.12);
  color: #b91c1c;
}

.source-mockbot,
.source-zalo {
  background: rgba(31, 79, 191, 0.1);
  color: var(--sidebar);
}

.source-systemalert {
  background: rgba(245, 158, 11, 0.14);
  color: #b45309;
}

.source-manual {
  background: rgba(21, 53, 127, 0.1);
  color: var(--brand-blue-deep);
}

.kpi-stack,
.bot-hint-list,
.activity-feed {
  display: grid;
  gap: 0.85rem;
}

.demo-console-page .kpi-card,
.demo-console-page .bot-reply-card,
.demo-console-page .activity-row {
  padding: 0.95rem 1rem;
  border-radius: 18px;
  background: rgba(11, 21, 38, 0.68);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(231, 243, 240, 0.92);
}

.demo-console-page .kpi-card .muted,
.demo-console-page .bot-reply-card .muted,
.demo-console-page .activity-row .muted {
  color: rgba(231, 243, 240, 0.55);
}

.kpi-card,
.activity-row {
  padding: 0.95rem 1rem;
  border-radius: 18px;
  background: var(--panel);
  border: 1px solid var(--line);
  color: var(--ink);
}

.activity-row {
  align-items: flex-start;
  justify-content: flex-start;
}

.activity-dot {
  width: 0.75rem;
  height: 0.75rem;
  margin-top: 0.35rem;
  border-radius: 999px;
  background: linear-gradient(135deg, #ffc61a, #1f4fbf);
  flex: 0 0 auto;
}

.task-row-highlight {
  animation: task-highlight 4.5s ease-out;
}

.bot-form .form-label {
  font-weight: 700;
}

.bot-command-input {
  min-height: 8.5rem;
  margin-bottom: 1rem;
}

.bot-reply-success {
  border-color: rgba(124, 240, 188, 0.42);
}

.bot-reply-warning {
  border-color: rgba(255, 194, 134, 0.42);
}

@keyframes task-highlight {
  0% {
    background: rgba(124, 240, 188, 0.26);
  }

  100% {
    background: transparent;
  }
}

/* ===== CEO Dashboard ===== */

.ceo-page {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  max-width: 640px;
}

.ceo-top-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.ceo-greeting {
  margin: 0.2rem 0 0;
  font-size: 1.35rem;
}

.ceo-refresh-btn {
  flex-shrink: 0;
  margin-top: 0.35rem;
}

.ceo-hero-metric {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 1.5rem 1.75rem;
  background: linear-gradient(135deg, rgba(24, 58, 55, 0.94) 0%, rgba(16, 40, 37, 0.96) 100%);
  color: #fff;
  border-color: transparent;
}

.ceo-metric-label {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}

.ceo-hero-metric .ceo-metric-label {
  color: rgba(255, 255, 255, 0.65);
}

.ceo-hero-value {
  margin: 0.25rem 0 0;
  font-size: 2.4rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #fff;
  line-height: 1.1;
}

.ceo-metric-unit {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.55);
}

.ceo-hero-metric .ceo-metric-unit {
  color: rgba(255, 255, 255, 0.5);
}

.ceo-metrics-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem;
}

.ceo-metric-card {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 1.1rem 1.25rem;
}

.ceo-metric-card .ceo-metric-label {
  color: var(--muted);
}

.ceo-metric-card .ceo-metric-unit {
  font-size: 0.78rem;
  color: var(--muted);
}

.ceo-metric-value {
  margin: 0.15rem 0 0;
  font-size: 1.55rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.15;
  color: var(--ink);
}

.ceo-card-alert {
  border-color: rgba(184, 80, 66, 0.35);
  background: rgba(184, 80, 66, 0.07);
}

.ceo-card-alert .ceo-metric-value {
  color: var(--accent-dark);
}

.ceo-chart-card {
  padding: 1.25rem 1.5rem;
}

.ceo-chart-title {
  margin: 0 0 1rem;
  font-size: 1rem;
  font-weight: 700;
}

.ceo-chart-wrapper {
  position: relative;
  height: 200px;
}

.ceo-notification-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem 1.25rem;
  border-radius: 24px;
  border: 1px solid rgba(232, 186, 107, 0.5);
  background: rgba(232, 186, 107, 0.12);
  color: var(--ink);
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.ceo-notification-card:hover,
.ceo-notification-card:focus {
  background: rgba(232, 186, 107, 0.22);
  color: var(--ink);
}

.ceo-notif-dot {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  border-radius: 50%;
  background: #e8ba6b;
  box-shadow: 0 0 0 6px rgba(232, 186, 107, 0.28);
}

.ceo-notif-body {
  flex: 1;
  min-width: 0;
}

.ceo-notif-body strong {
  display: block;
  font-weight: 700;
}

.ceo-notif-body p {
  margin: 0.2rem 0 0;
  font-size: 0.88rem;
  color: var(--muted);
}

.ceo-notif-arrow {
  font-size: 1.2rem;
  flex-shrink: 0;
  color: var(--muted);
}

/* CEO Report page */

.ceo-report-hero-grid,
.ceo-report-stats-grid {
  display: grid;
  gap: 1rem;
}

.ceo-report-hero-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ceo-report-stats-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ceo-report-big-value {
  margin: 0.25rem 0 0.5rem;
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.ceo-stat-value {
  margin: 0.25rem 0 0;
  font-size: 1.35rem;
  font-weight: 700;
}

.ceo-trend-up {
  background: rgba(100, 206, 161, 0.14);
  color: #2d7a5d;
}

.ceo-trend-down {
  background: rgba(184, 80, 66, 0.12);
  color: var(--accent-dark);
}

.ceo-report-table-shell {
  overflow-x: auto;
}

.ceo-report-table th {
  color: var(--muted);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

.ceo-report-today-row td {
  font-weight: 700;
  background: rgba(232, 186, 107, 0.1);
}

/* ===== END CEO Dashboard ===== */

@media (max-width: 991.98px) {
  .app-shell {
    grid-template-columns: 1fr;
  }

  .sidebar {
    gap: 1rem;
  }

  .topbar-right {
    width: 100%;
    justify-content: space-between;
  }

  .hero-shell,
  .placeholder-grid,
  .inventory-grid,
  .debt-grid,
  .order-grid,
  .sales-grid,
  .forecast-grid,
  .alert-columns,
  .task-summary-grid,
  .task-layout-grid {
    grid-template-columns: 1fr;
  }

  .stock-legend {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 575.98px) {
  html {
    font-size: 14px;
  }

  .content-shell,
  .sidebar {
    padding: 1rem;
  }

  .topbar-date,
  .user-meta {
    display: none;
  }

  .topbar-right {
    width: auto;
    gap: 0.75rem;
    justify-content: flex-end;
  }

  .ceo-hero-value {
    font-size: 1.9rem;
  }

  .ceo-report-hero-grid {
    grid-template-columns: 1fr;
  }

  .topbar,
  .page-header,
  .hero-actions,
  .serial-headline,
  .card-section-heading,
  .timeline-meta,
  .inventory-search-row,
  .forecast-card-head,
  .route-stop-item,
  .ranking-item,
  .section-title-row,
  .bot-action-row,
  .kpi-card,
  .activity-row {
    flex-direction: column;
    align-items: stretch;
  }

  .serial-badges {
    align-items: flex-start;
  }

  .serial-stats-grid,
  .summary-grid,
  .move-grid,
  .detail-stat-grid,
  .forecast-metrics {
    grid-template-columns: 1fr;
  }
}

/* ============ OVERVIEW (HOMEPAGE) ============ */
.overview-page {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.overview-greeting {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.5rem 1.75rem;
}

.overview-greeting h1 {
  margin: 0.25rem 0 0.4rem;
  font-size: 1.5rem;
}

.overview-greeting-icon {
  font-size: 3rem;
  color: var(--accent);
  opacity: 0.85;
}

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}

.overview-kpi-card {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 1.25rem 1.35rem;
  border-radius: 20px;
  border: 1px solid var(--line);
  background: var(--panel);
  box-shadow: 0 12px 28px rgba(16, 24, 40, 0.06);
  text-decoration: none;
  color: var(--ink);
  transition: transform 0.15s, box-shadow 0.15s;
  position: relative;
  overflow: hidden;
}

.overview-kpi-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 38px rgba(16, 24, 40, 0.12);
  color: var(--ink);
}

.overview-kpi-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(24, 58, 55, 0.08);
  color: var(--sidebar);
  font-size: 1.4rem;
}

.overview-kpi-card-primary .overview-kpi-icon {
  background: rgba(184, 80, 66, 0.14);
  color: var(--accent-dark);
}

.overview-kpi-card-alert {
  border-color: rgba(184, 80, 66, 0.35);
}

.overview-kpi-card-alert .overview-kpi-icon {
  background: rgba(184, 80, 66, 0.16);
  color: var(--accent-dark);
}

.overview-kpi-label {
  font-size: 0.78rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}

.overview-kpi-value {
  margin: 0;
  font-size: 1.6rem;
  font-weight: 800;
  line-height: 1.1;
  color: var(--ink);
}

.overview-kpi-value small {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--muted);
  margin-left: 0.25rem;
}

.overview-kpi-trend {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.78rem;
  color: var(--muted);
  font-weight: 600;
}

.overview-kpi-trend-up {
  color: #1b873f;
}

.overview-kpi-trend-down {
  color: var(--accent-dark);
}

.overview-bottom-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
  gap: 1rem;
}

.quick-access-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  margin-top: 0.75rem;
}

.quick-access-tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 1rem;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.65);
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
  transition: all 0.15s;
}

.quick-access-tile:hover {
  background: rgba(184, 80, 66, 0.08);
  border-color: rgba(184, 80, 66, 0.3);
  color: var(--accent-dark);
}

.quick-access-tile i {
  font-size: 1.5rem;
  color: var(--accent);
}

/* ============ METRIC CARDS (CEO) ============ */
.metric-card {
  position: relative;
  padding: 1.25rem 1.35rem;
  border-radius: 20px;
  border: 1px solid var(--line);
  background: var(--panel);
  box-shadow: 0 12px 28px rgba(16, 24, 40, 0.06);
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  overflow: hidden;
}

.metric-card::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--accent);
}

.metric-card-revenue::after { background: var(--accent); }
.metric-card-inventory::after { background: var(--sidebar); }
.metric-card-tasks::after { background: #0ea5e9; }
.metric-card-visits::after { background: #16a34a; }
.metric-card-alert::after { background: #dc2626; }

.metric-icon {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(184, 80, 66, 0.12);
  color: var(--accent-dark);
  font-size: 1.25rem;
}

.metric-card-inventory .metric-icon {
  background: rgba(24, 58, 55, 0.12);
  color: var(--sidebar);
}

.metric-card-tasks .metric-icon {
  background: rgba(14, 165, 233, 0.14);
  color: #0369a1;
}

.metric-card-visits .metric-icon {
  background: rgba(22, 163, 74, 0.14);
  color: #15803d;
}

.metric-card-alert .metric-icon {
  background: rgba(220, 38, 38, 0.14);
  color: #b91c1c;
}

.metric-label {
  font-size: 0.78rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}

.metric-value {
  margin: 0;
  font-size: 1.7rem;
  font-weight: 800;
  color: var(--ink);
  line-height: 1.05;
}

.metric-value-hero {
  font-size: 2.6rem;
}

.metric-unit {
  font-size: 0.75rem;
  color: var(--muted);
  font-weight: 600;
}

.metric-card-hero {
  padding: 1.75rem 2rem;
}

.metric-card-hero::after {
  background: var(--accent);
  width: 6px;
}

.link-muted {
  color: var(--muted);
  font-size: 0.85rem;
  text-decoration: none;
  font-weight: 600;
}

.link-muted:hover {
  color: var(--accent-dark);
}

@media (max-width: 1199.98px) {
  .kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767.98px) {
  .kpi-grid {
    grid-template-columns: 1fr;
  }

  .overview-bottom-grid {
    grid-template-columns: 1fr;
  }
}

/* ============ ENHANCED TABLES ============ */
.debt-table tbody tr {
  transition: background 0.15s;
}

.debt-table tbody tr:hover {
  background: rgba(184, 80, 66, 0.04);
  cursor: pointer;
}

.debt-table tr.row-urgent td:first-child {
  position: relative;
}

.debt-table tr.row-urgent td:first-child::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--accent);
}

.debt-table tr.row-urgent {
  background: rgba(184, 80, 66, 0.035);
}

.debt-table tr.row-spotlight {
  background: rgba(232, 186, 107, 0.06);
}

.dealer-cell {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  min-width: 0;
}

.dealer-avatar {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--sidebar), #1f5552);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.95rem;
  flex-shrink: 0;
}

.due-cell {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--ink);
  white-space: nowrap;
}

.due-cell i {
  color: var(--muted);
}

.credit-cell {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 140px;
}

.credit-cell small {
  font-size: 0.72rem;
  color: var(--muted);
}

.credit-bar {
  height: 6px;
  border-radius: 3px;
  background: rgba(16, 24, 40, 0.08);
  overflow: hidden;
}

.credit-bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.4s ease;
}

.bar-ok { background: linear-gradient(90deg, #22c55e, #16a34a); }
.bar-warn { background: linear-gradient(90deg, #f59e0b, #d97706); }
.bar-danger { background: linear-gradient(90deg, #f97316, var(--accent)); }

/* ============ STOCK BREAKDOWN BAR ============ */
.stock-breakdown {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.stock-bar-stacked {
  display: flex;
  height: 14px;
  border-radius: 7px;
  overflow: hidden;
  background: rgba(16, 24, 40, 0.06);
}

.stock-seg {
  height: 100%;
  transition: width 0.5s ease;
}

.stock-seg-new { background: linear-gradient(90deg, #22c55e, #16a34a); }
.stock-seg-warranty { background: linear-gradient(90deg, #f59e0b, #d97706); }
.stock-seg-delivering { background: linear-gradient(90deg, #0ea5e9, #0369a1); }

.stock-legend {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
}

.stock-legend-item {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.7rem 0.85rem;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.6);
}

.stock-legend-item strong {
  display: block;
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1;
}

.stock-legend-item small {
  color: var(--muted);
  font-size: 0.72rem;
}

.legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.dot-new { background: #16a34a; }
.dot-warranty { background: #d97706; }
.dot-delivering { background: #0369a1; }

.stock-legend-total {
  background: rgba(24, 58, 55, 0.08);
  border-color: rgba(24, 58, 55, 0.18);
}

/* ============ BADGE PILL SYSTEM ============ */
.badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}

.badge-pill i { font-size: 0.85rem; }

.badge-pill-danger {
  background: rgba(220, 38, 38, 0.12);
  color: #b91c1c;
}

.badge-pill-warn {
  background: rgba(245, 158, 11, 0.14);
  color: #b45309;
}

.badge-pill-ok {
  background: rgba(34, 197, 94, 0.14);
  color: #15803d;
}

.badge-pill-neutral {
  background: rgba(16, 24, 40, 0.06);
  color: var(--ink);
}

.badge-pill-info {
  background: rgba(24, 58, 55, 0.1);
  color: var(--sidebar);
}

.btn-icon-action {
  display: inline-flex;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: #fff;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  text-decoration: none;
  transition: all 0.15s;
}

.btn-icon-action:hover {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

/* ============ RANK BADGES ============ */
.rank-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.75rem;
  border-radius: 10px;
  font-weight: 700;
  font-size: 0.9rem;
  white-space: nowrap;
}

.rank-badge i { font-size: 1.1rem; }

.rank-gold {
  background: linear-gradient(135deg, #fde68a, #f59e0b);
  color: #78350f;
}

.rank-silver {
  background: linear-gradient(135deg, #e5e7eb, #9ca3af);
  color: #1f2937;
}

.rank-bronze {
  background: linear-gradient(135deg, #fed7aa, #c2410c);
  color: #fff;
}

.rank-default {
  background: rgba(16, 24, 40, 0.06);
  color: var(--muted);
}

/* ============ MINI PROGRESS BAR ============ */
.progress-cell {
  min-width: 180px;
}

.progress-bar-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.mini-bar {
  flex: 1;
  height: 8px;
  border-radius: 4px;
  background: rgba(16, 24, 40, 0.08);
  overflow: hidden;
}

.mini-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent-dark));
  border-radius: 4px;
  transition: width 0.5s ease;
}

/* ============ EMPTY STATES ============ */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 2.5rem 1.5rem;
  gap: 0.75rem;
}

.empty-state-icon {
  width: 72px;
  height: 72px;
  border-radius: 18px;
  background: rgba(184, 80, 66, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.2rem;
  color: var(--accent);
}

.empty-state h3 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
}

.empty-state p {
  max-width: 380px;
  margin: 0;
}

/* ============ MICRO-INTERACTIONS ============ */
.panel-card {
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.panel-card:hover {
  box-shadow: 0 22px 42px rgba(16, 24, 40, 0.1);
}

.kpi-card,
.quick-access-tile,
.metric-card {
  cursor: pointer;
}

*:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 8px;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(16, 24, 40, 0.15);
  border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(16, 24, 40, 0.25);
}

.page-body > * {
  animation: fadeUpSubtle 0.35s ease both;
}

@keyframes fadeUpSubtle {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.page-body > *:nth-child(2) {
  animation-delay: 0.05s;
}

.page-body > *:nth-child(3) {
  animation-delay: 0.1s;
}

.page-body > *:nth-child(4) {
  animation-delay: 0.15s;
}

/* ============ FORM CONTROLS ============ */
.form-control,
.form-select {
  border-radius: 12px;
  border: 1px solid var(--line);
  padding: 0.65rem 0.85rem;
  font-size: 0.95rem;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(184, 80, 66, 0.12);
}

.form-control-lg {
  padding: 0.85rem 1rem;
  font-size: 1rem;
}

.form-label {
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--ink);
  margin-bottom: 0.4rem;
}

.btn {
  border-radius: 12px;
  font-weight: 600;
  padding: 0.6rem 1.1rem;
  transition: transform 0.1s, box-shadow 0.15s;
}

.btn:active {
  transform: translateY(1px);
}

.btn-accent {
  box-shadow: 0 6px 16px rgba(184, 80, 66, 0.25);
}

.btn-accent:hover {
  box-shadow: 0 10px 22px rgba(184, 80, 66, 0.32);
}

/* ============ DEV OVERLAY ============ */
.dev-fab {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1f2937, #0f172a);
  color: #fbbf24;
  border: 2px solid rgba(251, 191, 36, 0.4);
  font-size: 1.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  z-index: 9999;
  transition: transform 0.15s ease;
}

.dev-fab:hover {
  transform: scale(1.08);
}

.dev-panel {
  position: fixed;
  right: 24px;
  bottom: 92px;
  width: 320px;
  max-height: 70vh;
  overflow-y: auto;
  background: #1f2937;
  color: #f3f4f6;
  border-radius: 18px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
  z-index: 9998;
  transform-origin: bottom right;
  transform: scale(0.9);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.18s ease, opacity 0.18s ease;
}

.dev-panel.open {
  transform: scale(1);
  opacity: 1;
  pointer-events: auto;
}

.dev-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.2rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.dev-panel-header strong {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.95rem;
}

.dev-panel-close {
  background: transparent;
  border: 0;
  color: #9ca3af;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}

.dev-panel-close:hover {
  color: #fff;
}

.dev-panel-body {
  display: flex;
  flex-direction: column;
  padding: 0.6rem;
  gap: 0.3rem;
}

.dev-panel-link {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.75rem 0.9rem;
  border-radius: 12px;
  text-decoration: none;
  color: #e5e7eb;
  background: transparent;
  border: 0;
  text-align: left;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s ease;
}

.dev-panel-link:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}

.dev-panel-link i {
  font-size: 1.3rem;
  color: #fbbf24;
  flex-shrink: 0;
}

.dev-panel-link strong {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
}

.dev-panel-link small {
  display: block;
  color: #9ca3af;
  font-size: 0.75rem;
  margin-top: 0.1rem;
}

.dev-panel-link-danger i {
  color: #f87171;
}

.dev-panel-link-danger:hover {
  background: rgba(248, 113, 113, 0.1);
}

@media (max-width: 575.98px) {
  .dev-fab {
    right: 16px;
    bottom: 16px;
  }

  .dev-panel {
    right: 16px;
    left: 16px;
    bottom: 84px;
    width: auto;
  }
}

/* ============ DAI PHAT BRAND REFRESH ============ */
body {
  background:
    radial-gradient(circle at top right, rgba(255, 198, 26, 0.3), transparent 28%),
    radial-gradient(circle at bottom left, rgba(31, 79, 191, 0.18), transparent 32%),
    linear-gradient(180deg, rgba(232, 240, 255, 0.72) 0%, rgba(255, 255, 255, 0) 32%),
    var(--bg);
}

.sidebar {
  background:
    radial-gradient(circle at top left, rgba(255, 198, 26, 0.22), transparent 24%),
    linear-gradient(180deg, #2a63d4 0%, #15357f 100%);
}

.brand-logo {
  width: 56px;
  height: 56px;
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 24px rgba(6, 26, 71, 0.18);
}

.brand-logo-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #fff;
  padding: 0.2rem;
}

.topbar-date {
  background: rgba(31, 79, 191, 0.08);
}

.topbar-icon-btn:hover {
  background: rgba(255, 198, 26, 0.18);
  color: var(--brand-blue-deep);
}

.topbar-badge-dot {
  box-shadow: 0 0 0 3px rgba(255, 198, 26, 0.2);
}

.user-avatar {
  background: linear-gradient(135deg, #2a63d4, #15357f);
}

.status-pill {
  background: rgba(255, 198, 26, 0.22);
  color: var(--brand-blue-deep);
}

.btn-accent {
  background: linear-gradient(135deg, #ffd44d, #f6b800);
  border-color: #f6b800;
  color: #16346f;
  box-shadow: 0 6px 16px rgba(31, 79, 191, 0.18);
}

.btn-accent:hover,
.btn-accent:focus {
  background: linear-gradient(135deg, #ffe17c, #ffc61a);
  border-color: #ffc61a;
  color: #102554;
  box-shadow: 0 10px 22px rgba(21, 53, 127, 0.22);
}

.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus {
  box-shadow: 0 0 0 0.1rem #fff, 0 0 0 0.25rem rgba(31, 79, 191, 0.22);
}

.overview-greeting {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(232, 240, 255, 0.92)),
    var(--panel);
}

.overview-brand-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.9rem 1rem;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(255, 198, 26, 0.16), rgba(31, 79, 191, 0.12));
  border: 1px solid rgba(31, 79, 191, 0.12);
  min-width: 260px;
}

.overview-brand-image {
  width: 88px;
  height: 88px;
  object-fit: contain;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(21, 53, 127, 0.12);
  flex-shrink: 0;
}

.overview-brand-copy {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.overview-brand-copy strong {
  font-size: 0.95rem;
  line-height: 1.35;
  color: var(--brand-blue-deep);
}

.overview-kpi-icon {
  background: rgba(31, 79, 191, 0.1);
}

.overview-kpi-card-primary .overview-kpi-icon,
.overview-kpi-card-alert .overview-kpi-icon,
.metric-icon,
.empty-state-icon {
  background: rgba(255, 198, 26, 0.18);
  color: var(--brand-blue-deep);
}

.overview-kpi-card-alert {
  border-color: rgba(255, 198, 26, 0.45);
}

.quick-access-tile:hover {
  background: rgba(255, 198, 26, 0.12);
  border-color: rgba(31, 79, 191, 0.22);
  color: var(--brand-blue-deep);
}

.quick-access-tile i {
  color: var(--sidebar);
}

.debt-table tbody tr:hover {
  background: rgba(31, 79, 191, 0.04);
}

.debt-table tr.row-urgent {
  background: rgba(255, 198, 26, 0.08);
}

.debt-table tr.row-spotlight {
  background: rgba(255, 198, 26, 0.12);
}

.form-control:focus,
.form-select:focus {
  border-color: var(--sidebar);
  box-shadow: 0 0 0 3px rgba(31, 79, 191, 0.12);
}

@media (max-width: 575.98px) {
  .overview-brand-chip {
    min-width: 0;
    width: 100%;
  }

  .overview-brand-image {
    width: 72px;
    height: 72px;
  }
}

/* ============ SPRINT 8 FOUNDATION ============ */
.overview-weather-card {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 300px;
  padding: 1rem 1.1rem;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(255, 198, 26, 0.18), rgba(31, 79, 191, 0.12));
  border: 1px solid rgba(31, 79, 191, 0.12);
}

.overview-weather-card strong {
  font-size: 1rem;
  color: var(--brand-blue-deep);
}

.overview-weather-card p {
  color: var(--ink);
}

.overview-weather-trend {
  color: var(--brand-blue-deep);
  font-weight: 700;
}

@media (max-width: 767.98px) {
  .overview-weather-card {
    min-width: 0;
    width: 100%;
  }
}

/* ============ PERSONA SWITCHER ============ */
.persona-switcher {
  position: relative;
}

.persona-switcher-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  background: transparent;
  border: 1px solid var(--line);
  padding: 0.5rem 0.85rem;
  border-radius: 14px;
  cursor: pointer;
  color: var(--ink);
}

.persona-switcher-btn:hover {
  background: rgba(31, 79, 191, 0.05);
}

.persona-switcher-caret {
  font-size: 1rem;
  color: var(--muted);
}

.persona-switcher-menu {
  min-width: 320px;
  padding: 0.5rem;
  border-radius: 16px;
  border: 1px solid var(--line);
}

.persona-switcher-header {
  padding: 0.6rem 0.8rem;
  font-size: 0.75rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
}

.persona-switcher-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.7rem;
  border-radius: 12px;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
  color: var(--ink);
}

.persona-switcher-item:hover {
  background: rgba(31, 79, 191, 0.07);
}

.persona-switcher-item.active {
  background: rgba(255, 198, 26, 0.18);
}

.persona-switcher-item small {
  color: var(--muted);
}

.persona-switcher-avatar {
  width: 36px;
  height: 36px;
  font-size: 0.78rem;
}

/* ============ BELL NOTIFICATION ============ */
.bell-notification {
  position: relative;
}

.bell-popover {
  width: 360px;
  padding: 0;
  border-radius: 16px;
  border: 1px solid var(--line);
}

.bell-popover-header {
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.bell-popover-body {
  max-height: 420px;
  overflow-y: auto;
  padding: 0.4rem;
}

.bell-popover-item {
  display: flex;
  gap: 0.75rem;
  padding: 0.75rem;
  border-radius: 12px;
  text-decoration: none;
  color: var(--ink);
}

.bell-popover-item:hover {
  background: rgba(31, 79, 191, 0.06);
  color: var(--ink);
}

.bell-popover-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-top: 0.5rem;
  flex-shrink: 0;
}

.bell-sev-info .bell-popover-dot {
  background: #2a63d4;
}

.bell-sev-warn .bell-popover-dot {
  background: #f59e0b;
}

.bell-sev-danger .bell-popover-dot {
  background: #dc2626;
}

/* ============ TOAST ============ */
.toast-stack {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  pointer-events: none;
}

.toast-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1.1rem;
  border-radius: 14px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 16px 36px rgba(16, 24, 40, 0.16);
  min-width: 280px;
  pointer-events: auto;
  animation: toast-in 0.25s ease-out;
}

.toast-item i {
  font-size: 1.4rem;
}

.toast-success {
  border-left: 4px solid #16a34a;
}

.toast-success i {
  color: #16a34a;
}

.toast-info {
  border-left: 4px solid #2a63d4;
}

.toast-info i {
  color: #2a63d4;
}

.toast-warn {
  border-left: 4px solid #f59e0b;
}

.toast-warn i {
  color: #f59e0b;
}

.toast-danger {
  border-left: 4px solid #dc2626;
}

.toast-danger i {
  color: #dc2626;
}

.toast-out {
  animation: toast-out 0.5s ease-in forwards;
}

@keyframes toast-in {
  from {
    transform: translateX(20px);
    opacity: 0;
  }

  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes toast-out {
  to {
    transform: translateX(20px);
    opacity: 0;
  }
}

/* ============ INVENTORY NAV ============ */
.nav-group { display: flex; flex-direction: column; gap: 0.25rem; }
.nav-group-toggle { width: 100%; justify-content: flex-start; }
.nav-group-caret { margin-left: auto; font-size: 0.95rem; transition: transform 0.2s ease; }
.nav-group-toggle[aria-expanded="true"] .nav-group-caret { transform: rotate(180deg); }
.nav-submenu-item {
  display: block;
  padding: 0.5rem 1rem 0.5rem 3rem;
  border-radius: 10px;
  color: rgba(231, 243, 240, 0.78);
  text-decoration: none;
  font-size: 0.88rem;
}
.nav-submenu-item:hover { background: var(--sidebar-soft); color: #fff; }
.nav-submenu-item.active { color: #fff; font-weight: 700; background: rgba(255, 255, 255, 0.12); }

/* ============ INVENTORY S9 ============ */
.inventory-breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 1rem;
  color: var(--muted);
  font-size: 0.9rem;
}
.inventory-breadcrumb a { color: var(--sidebar); text-decoration: none; }
.inventory-breadcrumb a:hover { text-decoration: underline; }

.inventory-kpi-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1rem;
  margin-bottom: 1rem;
}
.inventory-kpi-card { position: relative; overflow: hidden; min-height: 132px; }
.inventory-kpi-card strong { display: block; font-size: 1.65rem; margin-top: 0.35rem; color: var(--ink); }
.inventory-kpi-card .metric-label { display: block; color: var(--muted); font-weight: 600; }
.inventory-kpi-card a { color: var(--sidebar); text-decoration: none; }
.inventory-kpi-card a:hover { text-decoration: underline; }
.inventory-kpi-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 0.35rem 0.75rem;
  font-size: 0.78rem;
  font-weight: 700;
  width: fit-content;
}
.inventory-kpi-badge.info { background: rgba(14, 165, 233, 0.12); color: #0369a1; }
.inventory-kpi-badge.danger { background: rgba(220, 38, 38, 0.12); color: #b91c1c; }

.inventory-sparkline,
.inventory-brand-trend,
.inventory-chart {
  position: relative;
  width: 100%;
  height: 220px;
  display: block;
}
.inventory-sparkline canvas,
.inventory-brand-trend canvas,
.inventory-chart canvas {
  position: absolute !important;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
}
.inventory-sparkline { height: 52px; margin-top: 0.75rem; }
.inventory-brand-trend { height: 72px; margin-top: 0.75rem; }
.inventory-chart-tall { height: 280px; }
.inventory-map {
  width: 100%;
  height: 320px;
  border-radius: 18px;
  overflow: hidden;
}

.inventory-overview-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(320px, 1fr);
  gap: 1rem;
  margin-bottom: 1rem;
}
.inventory-breakdown-table { display: flex; flex-direction: column; gap: 0.65rem; margin-top: 1rem; }
.inventory-breakdown-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 0.9rem 1rem;
  background: rgba(255,255,255,0.7);
  color: var(--ink);
  text-decoration: none;
}
.inventory-breakdown-row:hover { border-color: rgba(31,79,191,0.25); color: var(--ink); }
.inventory-breakdown-row small { display: block; color: var(--muted); }

.inventory-alert-list { display: flex; flex-direction: column; gap: 0.75rem; }
.inventory-overview-alert {
  display: block;
  text-decoration: none;
  color: var(--ink);
  border-radius: 18px;
  padding: 1rem 1.05rem;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.76);
}
.inventory-overview-alert:hover { color: var(--ink); border-color: rgba(31,79,191,0.25); }
.inventory-overview-alert p { margin: 0.35rem 0 0; color: var(--muted); }
.inventory-alert-danger { border-left: 4px solid #dc2626; }
.inventory-alert-warn { border-left: 4px solid #f59e0b; }
.inventory-alert-info { border-left: 4px solid #1f4fbf; }

.inventory-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
}
.inventory-warehouse-card,
.inventory-brand-card,
.inventory-category-card {
  text-decoration: none;
  color: var(--ink);
}
.inventory-warehouse-card:hover,
.inventory-brand-card:hover,
.inventory-category-card:hover { color: var(--ink); transform: translateY(-1px); }

.inventory-warehouse-card-head,
.inventory-brand-hero,
.inventory-product-hero-left {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}
.inventory-warehouse-icon {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(31,79,191,0.1);
  color: var(--sidebar);
  font-size: 1.35rem;
}
.inventory-warehouse-icon.large {
  width: 62px;
  height: 62px;
  border-radius: 18px;
  font-size: 1.7rem;
}
.inventory-warehouse-card h2,
.inventory-brand-card h2,
.inventory-category-card h2 { font-size: 1.08rem; margin: 0.7rem 0 0.25rem; }
.inventory-warehouse-card-stats,
.inventory-warehouse-hero-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  margin-top: 1rem;
}
.inventory-warehouse-hero-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.inventory-warehouse-card-stats span,
.inventory-warehouse-hero-stats span {
  display: block;
  color: var(--muted);
  font-size: 0.78rem;
}
.inventory-warehouse-card-stats strong,
.inventory-warehouse-hero-stats strong { font-size: 1rem; color: var(--ink); }
.inventory-progress {
  width: 100%;
  height: 8px;
  border-radius: 999px;
  background: rgba(31,79,191,0.08);
  margin-top: 0.9rem;
  overflow: hidden;
}
.inventory-progress span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #1f4fbf, #2a63d4);
}
.inventory-topsku-list {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin-top: 1rem;
}
.inventory-topsku-item {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.9rem;
  color: var(--muted);
}
.inventory-topsku-item strong { color: var(--ink); }

.inventory-brand-logo {
  width: 120px;
  height: 40px;
  object-fit: contain;
}
.inventory-brand-logo.large { width: 140px; height: 48px; }
.inventory-brand-detail-header { align-items: flex-start; }

.inventory-filter-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.inventory-table td,
.inventory-table th { vertical-align: middle; }
.inventory-row-alert { background: rgba(245,158,11,0.09); }

.inventory-warehouse-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.inventory-transfer-summary {
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 0.9rem 1rem;
  margin-bottom: 1rem;
  background: rgba(31,79,191,0.04);
}

.inventory-product-hero { margin-bottom: 1rem; }
.inventory-product-placeholder {
  width: 88px;
  height: 88px;
  border-radius: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(31,79,191,0.12), rgba(255,198,26,0.18));
  color: var(--sidebar);
  font-size: 2rem;
}
.inventory-pagination {
  display: flex;
  gap: 0.45rem;
  margin-top: 1rem;
}
.inventory-pagination a {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  border: 1px solid var(--line);
  color: var(--ink);
  text-decoration: none;
}
.inventory-pagination a.active {
  background: var(--sidebar);
  color: #fff;
  border-color: var(--sidebar);
}
.inventory-suggestion-card { margin-top: 1rem; }
.inventory-inline-link { margin-top: 0.9rem; }
.inventory-inline-link a { color: var(--sidebar); text-decoration: none; font-weight: 600; }
.inventory-inline-link a:hover { text-decoration: underline; }
.inventory-tab-nav { margin-bottom: 1rem; gap: 0.35rem; border-bottom: 0; }
.inventory-tab-nav .nav-link {
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink);
  background: rgba(255,255,255,0.7);
}
.inventory-tab-nav .nav-link.active {
  border-color: rgba(31,79,191,0.22);
  background: rgba(31,79,191,0.08);
  color: var(--sidebar);
  font-weight: 700;
}
.inventory-insight-card {
  margin-top: 1rem;
  padding: 1rem 1.05rem;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(255,198,26,0.16), rgba(31,79,191,0.08));
  border: 1px solid var(--line);
}

@media (max-width: 1199.98px) {
  .inventory-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .inventory-overview-grid { grid-template-columns: 1fr; }
  .inventory-filter-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767.98px) {
  .inventory-kpi-grid { grid-template-columns: 1fr; }
  .inventory-filter-row { grid-template-columns: 1fr; }
  .inventory-warehouse-hero,
  .inventory-product-hero-left { flex-direction: column; align-items: flex-start; }
  .inventory-warehouse-card-stats,
  .inventory-warehouse-hero-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ============ SALES / CRM S10 ============ */
.sales-s10-page {
  gap: 1rem;
}

.sales-leaflet-map {
  width: 100%;
  height: 460px;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid var(--line);
}

.route-pin-leaflet {
  background: transparent;
  border: 0;
}

.route-pin-inner {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  box-shadow: 0 6px 16px rgba(16, 24, 40, 0.3);
  border: 2px solid #fff;
}

.sales-grid-s10 {
  align-items: start;
}

.sales-stop-meta,
.sales-badge-stack,
.sales-batch-bar,
.sales-inline-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.sales-filter-toolbar {
  display: grid;
  grid-template-columns: minmax(220px, 1.2fr) repeat(2, minmax(160px, 0.8fr)) auto;
  gap: 0.75rem;
}

.sales-click-row {
  cursor: pointer;
}

.sales-click-row:hover {
  background: rgba(31, 79, 191, 0.04);
}

.dealer-cell-lg {
  align-items: center;
}

.dealer-avatar-lg {
  width: 64px;
  height: 64px;
  border-radius: 18px;
  font-size: 1.4rem;
}

.lead-kanban-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1rem;
}

.lead-kanban-stage {
  min-height: 320px;
}

.lead-kanban-col {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-height: 220px;
}

.lead-card {
  padding: 0.9rem 1rem;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 8px 20px rgba(16, 24, 40, 0.06);
  cursor: grab;
}

.lead-card:active {
  cursor: grabbing;
}

.sales-inline-form {
  display: flex;
  align-items: center;
}

.sales-inline-actions {
  min-width: 240px;
  justify-content: flex-end;
}

@media (max-width: 1199.98px) {
  .lead-kanban-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sales-filter-toolbar {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 767.98px) {
  .lead-kanban-grid,
  .sales-filter-toolbar {
    grid-template-columns: 1fr;
  }

  .sales-leaflet-map {
    height: 360px;
  }
}

/* ============ TASKS S11 ============ */
.role-banner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.25rem 1.5rem;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(255, 198, 26, 0.16), rgba(31, 79, 191, 0.12));
  border: 1px solid var(--line);
  margin-bottom: 1rem;
}

.role-banner h1 {
  margin: 0.2rem 0 0.4rem;
  font-size: 1.3rem;
}

.task-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}

.task-kpi-card {
  display: block;
  padding: 1rem 1.05rem;
  border-radius: 20px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink);
  text-decoration: none;
  box-shadow: 0 14px 30px rgba(16, 24, 40, 0.06);
}

.task-kpi-card:hover {
  color: var(--ink);
  transform: translateY(-1px);
}

.task-kpi-card strong {
  display: block;
  margin-top: 0.35rem;
  font-size: 1.55rem;
}

.task-kpi-card small,
.task-kpi-label {
  color: var(--muted);
}

.task-kpi-danger {
  border-left: 4px solid #dc2626;
}

.task-kpi-warn {
  border-left: 4px solid #f59e0b;
}

.task-kpi-info {
  border-left: 4px solid #1f4fbf;
}

.task-kpi-success {
  border-left: 4px solid #16a34a;
}

.quick-action-stack {
  display: grid;
  gap: 0.75rem;
}

.quick-action-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.9rem 1rem;
  border-radius: 16px;
  text-decoration: none;
  border: 1px solid var(--line);
  color: var(--ink);
  background: rgba(255, 255, 255, 0.82);
}

.quick-action-item:hover {
  color: var(--ink);
  border-color: rgba(31, 79, 191, 0.24);
}

.quick-action-item i {
  font-size: 1.2rem;
}

.quick-action-accent {
  background: linear-gradient(135deg, rgba(255, 198, 26, 0.2), rgba(31, 79, 191, 0.08));
}

.task-row-link {
  display: block;
  color: var(--ink);
  text-decoration: none;
}

.task-row-link:hover {
  color: var(--sidebar);
}

.task-row-link-static:hover {
  color: var(--ink);
}

.tasks-dashboard-page .task-table tbody tr:hover {
  background: rgba(31, 79, 191, 0.04);
}

.tasks-dashboard-page .activity-feed {
  margin-top: 0.75rem;
}

@media (max-width: 1199.98px) {
  .task-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767.98px) {
  .task-kpi-grid,
  .task-layout-grid {
    grid-template-columns: 1fr;
  }
}

/* ============ S12 — GLOBAL SEARCH ============ */
.global-search-overlay {
  position: fixed; inset: 0; background: rgba(16, 24, 40, 0.4);
  backdrop-filter: blur(4px); z-index: 11000;
  display: flex; justify-content: center; align-items: flex-start;
  padding-top: 8vh;
}
.global-search-modal {
  width: 100%; max-width: 860px; background: #fff;
  border-radius: 20px; box-shadow: 0 30px 60px rgba(16, 24, 40, 0.3);
  overflow: hidden;
}
.global-search-input-row {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 1rem 1.25rem; border-bottom: 1px solid var(--line);
}
.global-search-input-row i { font-size: 1.4rem; color: var(--muted); }
.global-search-input-row input {
  flex: 1; border: 0; outline: none; font-size: 1.05rem; padding: 0.4rem 0;
}
.global-search-input-row kbd {
  background: rgba(16, 24, 40, 0.08); padding: 0.25rem 0.5rem;
  border-radius: 6px; font-size: 0.75rem; color: var(--muted);
}
.global-search-results { max-height: 60vh; overflow-y: auto; padding: 0.5rem; }
.global-search-hint { padding: 1rem; text-align: center; }
.global-search-group-header {
  padding: 0.6rem 0.8rem; font-size: 0.72rem; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700;
}
.global-search-item {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.65rem 0.8rem; border-radius: 10px;
  text-decoration: none; color: var(--ink); cursor: pointer;
}
.global-search-item:hover, .global-search-item.active {
  background: rgba(31, 79, 191, 0.08);
}
.global-search-item i { font-size: 1.3rem; color: var(--sidebar); }
.global-search-item small { display: block; color: var(--muted); font-size: 0.78rem; }

/* ============ S12 — TOPBAR SEARCH BUTTON ============ */
.topbar-search-btn { gap: 0.4rem; width: auto; padding-inline: 0.75rem; }
.topbar-search-kbd {
  background: rgba(31, 79, 191, 0.1); padding: 0.2rem 0.45rem;
  border-radius: 5px; font-size: 0.7rem; color: var(--sidebar); font-family: inherit;
  border: 1px solid var(--line);
}

/* ============ S12 — SPARKLINE ============ */
.overview-kpi-sparkline {
  position: relative; margin-top: 0.5rem; height: 36px;
}
.overview-kpi-sparkline canvas { position: absolute !important; inset: 0; width: 100% !important; height: 100% !important; }

/* ============ DEALER PATTERN ANALYSIS ============ */
.dealer-pattern-card { margin-bottom: 1rem; }

.dealer-pattern-header {
  display: flex; align-items: center; gap: 0.875rem;
  padding-bottom: 0.875rem; border-bottom: 1px solid var(--line);
  margin-bottom: 0.5rem;
}

.dealer-pattern-avatar {
  width: 40px; height: 40px; border-radius: 12px;
  background: rgba(31, 79, 191, 0.1); display: flex;
  align-items: center; justify-content: center;
  font-size: 1.25rem; color: var(--sidebar); flex-shrink: 0;
}

.dealer-pattern-rows { display: flex; flex-direction: column; gap: 0.5rem; }

.dealer-pattern-row {
  display: grid; grid-template-columns: 1fr auto auto auto;
  align-items: center; gap: 1rem;
  padding: 0.65rem 0.75rem; border-radius: 10px;
  background: rgba(31, 79, 191, 0.03);
  border-left: 3px solid transparent;
}
.dealer-pattern-row.dealer-pattern-overdue { border-left-color: var(--danger, #dc3545); background: rgba(220, 53, 69, 0.04); }
.dealer-pattern-row.dealer-pattern-soon    { border-left-color: #f59e0b; background: rgba(245, 158, 11, 0.04); }
.dealer-pattern-row.dealer-pattern-ok      { border-left-color: var(--sidebar); }

.dealer-pattern-sku strong { display: block; font-size: 0.9rem; }
.dealer-pattern-sku small  { color: var(--muted); font-size: 0.78rem; }

.dealer-pattern-cycle,
.dealer-pattern-since {
  text-align: center; min-width: 80px;
}
.dealer-pattern-cycle .eyebrow,
.dealer-pattern-since .eyebrow { display: block; font-size: 0.68rem; }
.dealer-pattern-cycle strong,
.dealer-pattern-since strong { font-size: 1rem; }

@media (max-width: 767.98px) {
  .dealer-pattern-row {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
  }
  .dealer-pattern-badge { grid-column: span 2; }
}

/* ============ S12 — CEO DASHBOARD WIDER ============ */
.ceo-page {
  display: flex; flex-direction: column;
  gap: 1.25rem;
  max-width: 100%;
}

@media (min-width: 1200px) {
  .ceo-page {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(360px, 1fr);
    gap: 1.5rem;
  }
  .ceo-page > .ceo-top-row,
  .ceo-page > .metric-card-hero,
  .ceo-page > .ceo-chart-card {
    grid-column: 1;
  }
  .ceo-page > .ceo-metrics-grid,
  .ceo-page > .ceo-notification-card {
    grid-column: 2;
    align-self: start;
  }
}

/* ============ S12 — FORECAST PRIORITY ============ */
.forecast-card-hot { border-color: #f59e0b; box-shadow: 0 12px 28px rgba(245, 158, 11, 0.18); }
.forecast-card-dim { opacity: 0.82; }
.forecast-hot-badge {
  display: inline-flex; align-items: center; gap: 0.3rem;
  padding: 0.35rem 0.7rem; border-radius: 999px;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #fff; font-weight: 700; font-size: 0.78rem;
  margin-bottom: 0.5rem;
}

/* ============ S12 — LOGO SIDEBAR REFRESH ============ */
.brand-text strong { font-size: 1.2rem; font-weight: 700; }
.brand-text .brand-kicker { font-size: 0.6rem; }

/* ============ S12 — MOBILE DRAWER ============ */
.mobile-drawer-toggle {
  display: none;
  width: 40px; height: 40px; border-radius: 10px;
  border: 1px solid var(--line); background: #fff;
  align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0;
}
.mobile-drawer-toggle i { font-size: 1.3rem; color: var(--ink); }

#mobile-drawer-backdrop {
  position: fixed; inset: 0; background: rgba(16,24,40,0.45);
  z-index: 1099; display: none;
}
#mobile-drawer-backdrop.open { display: block; }

@media (max-width: 991.98px) {
  .app-shell {
    grid-template-columns: 1fr;
  }
  .sidebar {
    position: fixed; top: 0; left: 0; bottom: 0; width: 280px;
    transform: translateX(-100%); transition: transform 0.25s;
    z-index: 1100;
  }
  .sidebar-open { transform: translateX(0); }
  .mobile-drawer-toggle { display: inline-flex; }
}