/* HORECA Wholesale Pro — Executive / admin UI (reference-aligned) */

:root {
  --primary: #10b981;
  --primary-dark: #059669;
  --primary-deep: #047857;
  --sidebar-bg-1: #061826;
  --sidebar-bg-2: #082033;
  --sidebar-bg-3: #0b2436;
  --page-bg: #f8fafc;
  --card-bg: #ffffff;
  --text-dark: #0f172a;
  --text-main: #1e293b;
  --text-muted: #64748b;
  --text-light: #94a3b8;
  --border: #e5e7eb;
  --soft-border: #eef2f7;
  --blue: #3b82f6;
  --purple: #8b5cf6;
  --orange: #f59e0b;
  --red: #ef4444;
  --cyan: #06b6d4;
  --shadow-card: 0 8px 24px rgba(15, 23, 42, 0.06);
  --shadow-soft: 0 4px 14px rgba(15, 23, 42, 0.05);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

.horeca-admin-body {
  margin: 0;
  background: var(--page-bg);
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--text-dark);
  font-size: 14px;
}

.admin-app,
.horeca-app {
  min-height: 100vh;
}

a {
  color: inherit;
  text-decoration: none;
}

/* ——— Sidebar ——— */
.admin-sidebar {
  width: 280px;
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  height: 100vh;
  z-index: 50;
  display: flex;
  flex-direction: column;
  padding: 14px;
  background: linear-gradient(180deg, #061826 0%, #082033 50%, #061826 100%);
  border-right: 1px solid rgba(255, 255, 255, 0.04);
}

.admin-sidebar__brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 70px;
  padding-bottom: 12px;
  margin-bottom: 8px;
  border-bottom: 1px solid #173246;
}

.admin-sidebar__brand-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.25);
  color: #10b981;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 18px;
}

.admin-sidebar__brand-copy {
  flex: 1;
  min-width: 0;
}

.admin-sidebar__horeca {
  font-size: 22px;
  font-weight: 800;
  color: #fff;
  line-height: 1;
  letter-spacing: 0.06em;
}

.admin-sidebar__pro {
  font-size: 15px;
  font-weight: 700;
  color: #10b981;
  margin-top: 4px;
  line-height: 1.15;
}

.admin-sidebar__collapse-btn {
  flex-shrink: 0;
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.45);
  padding: 8px;
  cursor: pointer;
  font-size: 16px;
}

.admin-sidebar__collapse-btn:hover {
  color: #fff;
}

.admin-sidebar__nav {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0;
}

.admin-sidebar__link {
  height: 46px;
  padding: 0 14px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 6px;
  font-size: 14px;
  font-weight: 600;
  color: #cbd5e1;
  transition: background 0.14s ease, color 0.14s ease, box-shadow 0.14s ease;
}

.admin-sidebar__link-icon {
  width: 18px;
  height: 18px;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.admin-sidebar__link-label {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
}

.admin-sidebar__link:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}

.admin-sidebar__link.is-active {
  background: linear-gradient(135deg, #0f766e 0%, #059669 100%);
  color: #fff;
  box-shadow: 0 10px 24px rgba(5, 150, 105, 0.22);
}

.admin-sidebar__badge {
  margin-left: auto;
  background: #10b981;
  color: #fff;
  border-radius: 999px;
  height: 22px;
  min-width: 26px;
  padding: 0 8px;
  font-size: 12px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.admin-sidebar__chevron {
  font-size: 12px;
  opacity: 0.55;
}

.admin-sidebar__link--btn {
  width: 100%;
  border: none;
  cursor: pointer;
  background: transparent;
  font-family: inherit;
  text-align: left;
}

.admin-sidebar__logout {
  padding-top: 4px;
}

.admin-sidebar__upgrade {
  margin-top: auto;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.04));
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 18px;
}

.admin-sidebar__upgrade-icon-wrap {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(16, 185, 129, 0.2);
  color: #10b981;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  margin-bottom: 10px;
}

.admin-sidebar__upgrade-title {
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 6px;
}

.admin-sidebar__upgrade-sub {
  color: rgba(255, 255, 255, 0.6);
  font-size: 12px;
  line-height: 1.45;
  margin-bottom: 14px;
}

.btn-upgrade-now {
  width: 100%;
  height: 40px;
  border: none;
  border-radius: 10px;
  background: #10b981;
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  font-family: inherit;
}

.btn-upgrade-now:hover {
  background: #059669;
}

.admin-sidebar__overlay {
  display: none;
}

/* ——— Main shell ——— */
.admin-main {
  margin-left: 280px;
  min-height: 100vh;
  background: var(--page-bg);
}

.admin-topbar,
.horeca-topbar {
  height: 78px;
  background: #fff;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  padding: 0 28px;
}

.admin-topbar__inner {
  display: flex;
  align-items: center;
  gap: 20px;
  width: 100%;
}

.admin-topbar__left {
  flex-shrink: 0;
}

.admin-page-title {
  font-size: 24px;
  font-weight: 900;
  color: var(--text-dark);
  margin: 0;
  line-height: 1.2;
}

.admin-page-subtitle {
  margin: 6px 0 0;
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.3;
}

.admin-topbar__center {
  flex: 1;
  display: flex;
  justify-content: center;
  min-width: 0;
}

.admin-search {
  position: relative;
  width: 100%;
  max-width: 520px;
}

.admin-search__input {
  width: 100%;
  height: 44px;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 0 92px 0 40px;
  font-family: inherit;
  font-size: 14px;
  background: #fff;
}

.admin-search__input::placeholder {
  color: var(--text-light);
}

.admin-search__icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-light);
  pointer-events: none;
}

.admin-search__kbd {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 11px;
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 2px 7px;
  background: #f9fafb;
}

.admin-topbar__right {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}

.admin-notify {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: #fff;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-main);
}

.admin-notify__dot {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 18px;
  height: 18px;
  border-radius: 999px;
  background: var(--red);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
}

.admin-notify__ping {
  position: absolute;
  top: 7px;
  right: 10px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--red);
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.25);
}

.admin-user {
  display: flex;
  align-items: center;
  gap: 10px;
}

.admin-user__avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: linear-gradient(135deg, #10b981, #2563eb);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
}

.admin-user__name {
  font-weight: 600;
  font-size: 13px;
  color: var(--text-dark);
  line-height: 1.2;
}

.admin-user__role {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1;
}

.admin-user__chev {
  font-size: 12px;
  color: var(--text-muted);
}

.btn-premium-gradient {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 46px;
  padding: 0 20px;
  border-radius: 12px;
  background: linear-gradient(135deg, #10b981, #059669);
  color: #fff !important;
  border: none;
  font-weight: 700;
  font-size: 14px;
  box-shadow: 0 10px 22px rgba(16, 185, 129, 0.25);
  white-space: nowrap;
}

.admin-content.horeca-content {
  padding: 22px 28px 28px;
  max-width: 100%;
  overflow-x: hidden;
}

/* ——— Alerts ——— */
.admin-bootstrap-alert-danger {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #991b1b;
  border-radius: 14px;
  font-size: 14px;
}

.horeca-alert--lime {
  border-radius: 12px;
  padding: 12px 16px;
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.2);
  color: var(--primary-deep);
  font-size: 14px;
}

/* ——— Page action row ——— */
.page-action-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
  gap: 16px;
  flex-wrap: wrap;
}

.page-action-row__greet .greet-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-main);
}

.page-action-row__greet .greet-sub {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 4px;
}

.page-action-row__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.btn-date-chip {
  height: 42px;
  padding: 0 16px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: #fff;
  font-family: inherit;
  font-weight: 600;
  font-size: 13px;
  color: var(--text-dark);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.drop-new-order {
  box-shadow: 0 10px 22px rgba(16, 185, 129, 0.25);
  border-radius: 12px;
  overflow: visible;
  flex-shrink: 0;
}

.drop-new-order.btn-group {
  background: transparent;
}

.btn-split-new-order__main {
  height: 48px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 18px;
  border: none !important;
  border-radius: 12px 0 0 12px !important;
  background: linear-gradient(135deg, #10b981, #059669) !important;
  color: #fff !important;
  font-weight: 700;
  font-size: 14px;
}

.btn-split-new-order__caret {
  height: 48px;
  padding: 0 12px !important;
  margin: 0 !important;
  border: none !important;
  border-radius: 0 12px 12px 0 !important;
  background: linear-gradient(135deg, #0ea271, #04895f) !important;
  color: #fff !important;
  border-left: 1px solid rgba(255, 255, 255, 0.22) !important;
}

.drop-new-order .dropdown-toggle-split::after,
.btn-split-new-order__caret::after {
  display: inline-block;
  margin-inline-start: 0;
}

.drop-new-order .dropdown-menu {
  margin-top: 8px !important;
  border-radius: 12px !important;
}

/* ——— KPI ——— */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: clamp(12px, 2vw, 18px);
  margin-bottom: 20px;
  align-items: stretch;
}

.kpi-card-ref {
  min-height: 112px;
  height: auto;
  box-sizing: border-box;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--shadow-card);
  padding: 16px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.kpi-card-ref__meta {
  flex: 1;
  min-width: 0;
}

.kpi-icon-soft {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}

.kpi-icon-soft--mint {
  background: #d1fae5;
  color: #059669;
}
.kpi-icon-soft--purple {
  background: #ede9fe;
  color: #8b5cf6;
}
.kpi-icon-soft--orange {
  background: #ffedd5;
  color: #f59e0b;
}
.kpi-icon-soft--blue {
  background: #dbeafe;
  color: #3b82f6;
}

.kpi-label-ref {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  line-height: 1.2;
}

.kpi-value-ref {
  font-size: 26px;
  font-weight: 800;
  color: var(--text-dark);
  line-height: 1.1;
  margin-top: 3px;
}

.kpi-change-ref {
  margin-top: 4px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.kpi-change-ref.is-up {
  color: var(--primary-dark);
}
.kpi-change-ref.is-down {
  color: var(--red);
}

/* ——— Cards ——— */
.premium-card,
.horeca-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.card-inner {
  padding: 18px;
}

.card-inner-flush-head {
  padding-bottom: 0 !important;
}

.card-header-clean {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  gap: 12px;
  flex-wrap: wrap;
}

.card-title {
  font-size: 15px;
  font-weight: 800;
  color: var(--text-dark);
  margin: 0;
}

.card-count {
  min-width: 24px;
  height: 22px;
  padding: 0 8px;
  background: #f1f5f9;
  color: #475569;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.card-subtitle {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 3px;
}

.exec-card-sales {
  min-height: 290px;
}
.exec-card-donut,
.exec-card-cats {
  min-height: 290px;
}

.dashboard-card-tools {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ref-select-mini {
  height: 32px;
  border-radius: 8px;
  border: 1px solid var(--border);
  font-size: 12px;
  font-weight: 600;
  padding: 0 10px;
  background: #fff;
  font-family: inherit;
}

.ref-pill-mini {
  height: 32px;
  padding: 0 14px;
  border-radius: 8px;
  border: none;
  background: rgba(16, 185, 129, 0.12);
  color: var(--primary-dark);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
}

.ref-info {
  font-size: 14px !important;
}

/* ——— Rows ——— */
.dashboard-row-main {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1.1fr) minmax(0, 1.3fr);
  gap: clamp(14px, 2vw, 20px);
  margin-bottom: 20px;
}

.dashboard-row-second,
.dashboard-row-third {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) minmax(0, 1.2fr);
  gap: clamp(14px, 2vw, 20px);
  margin-bottom: 20px;
}

.dashboard-row-main > *,
.dashboard-row-second > *,
.dashboard-row-third > * {
  min-width: 0;
}

.dashboard-row-third {
  margin-bottom: 0;
}

/* Charts */
.chart-box {
  position: relative;
  width: 100%;
}
.chart-sales {
  height: 205px;
}
.chart-donut {
  height: 170px;
}
.chart-segment-ref {
  height: 170px;
}

.donut-layout {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 4px;
}
.donut-chart-wrap {
  position: relative;
  flex-shrink: 0;
  width: 170px;
}
.donut-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.donut-center strong {
  font-size: 22px;
  font-weight: 800;
  color: var(--text-dark);
  line-height: 1;
}
.donut-center span {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  margin-top: 4px;
}

.custom-legend {
  flex: 1;
  min-width: 0;
}
.custom-legend__row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  margin-bottom: 8px;
  color: var(--text-main);
}
.custom-legend__dot {
  width: 9px;
  height: 9px;
  border-radius: 3px;
  flex-shrink: 0;
}
.custom-legend__label {
  flex: 1;
  font-weight: 600;
}
.custom-legend__pct {
  font-weight: 700;
  color: var(--text-dark);
}
.custom-legend__cnt {
  color: var(--text-muted);
  font-weight: 600;
}

.wa-strip-mini {
  margin-top: 12px;
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(16, 185, 129, 0.1);
  color: var(--primary-deep);
  font-size: 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Categories rows */
.cat-row-ref__hdr {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}
.cat-row-ref__name {
  font-weight: 600;
  color: var(--text-dark);
}
.cat-row-ref__amt {
  font-weight: 700;
  color: var(--text-dark);
  font-variant-numeric: tabular-nums;
}
.cat-row-ref__pct {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
}
.cat-row-ref__icon {
  color: var(--primary);
  font-size: 16px;
  margin-top: 2px;
}
.cat-row-ref {
  display: flex;
  gap: 10px;
  margin-bottom: 12px;
}
.cat-bar-ref {
  height: 7px;
  border-radius: 99px;
  background: var(--border);
  margin-top: 6px;
  overflow: hidden;
}
.cat-bar-ref span {
  display: block;
  height: 100%;
  background: var(--primary);
  border-radius: inherit;
}

.ref-muted-link {
  color: #059669;
  font-weight: 700;
  font-size: 12px;
  text-decoration: none;
}
.ref-muted-link:hover {
  text-decoration: underline;
}

/* Recent orders */
.recent-table-scroll {
  overflow-x: auto;
}
.recent-orders-table {
  border-collapse: collapse;
}
.recent-orders-table thead th {
  padding: 0 14px;
  height: 36px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  border-bottom: 1px solid var(--soft-border);
  white-space: nowrap;
  text-align: left;
}
.recent-orders-table tbody td {
  padding: 0 14px;
  height: 38px;
  font-size: 12px;
  border-bottom: 1px solid var(--soft-border);
  white-space: nowrap;
}
.recent-orders-table tbody tr:hover {
  background: #fafafb;
}
.ord-cell {
  font-weight: 700;
  color: var(--text-dark);
}
.muted-cell {
  color: var(--text-muted);
}
.tc-src {
  text-align: center;
}

/* Receivables */
.recv-head-split {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}
.recv-total {
  font-size: 28px;
  font-weight: 800;
  color: var(--red);
  line-height: 1.1;
}
.recv-label {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 600;
  margin-top: 4px;
}
.recv-pill-rise {
  display: inline-flex;
  margin-top: 8px;
  font-size: 11px;
  font-weight: 700;
  color: var(--red);
}
.recv-aging {
  flex: 1;
  margin-left: auto;
}
.recv-aging__row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-main);
  margin-bottom: 8px;
}
.recv-aging__amt {
  color: var(--text-dark);
  font-variant-numeric: tabular-nums;
}
.btn-receive-outline {
  height: 42px;
  border-radius: 10px;
  border: 1px solid rgba(16, 185, 129, 0.45);
  background: #fff;
  color: var(--primary-dark);
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  font-family: inherit;
}
.btn-receive-outline:hover {
  background: rgba(16, 185, 129, 0.06);
}

/* Status badges reference */
.status-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
}
.status-badge--confirmed {
  background: #d1fae5;
  color: #047857;
}
.status-badge--packed,
.status-badge--pending {
  background: #fef3c7;
  color: #b45309;
}
.status-badge--low {
  background: #fee2e2;
  color: #b91c1c;
}
.status-badge--open {
  background: #dbeafe;
  color: #1d4ed8;
}
.status-badge--ontrack {
  background: #d1fae5;
  color: #047857;
}
.status-badge--filling {
  background: #ffedd5;
  color: #c2410c;
}

/* Low stock */
.low-stock-thumb {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: #f1f5f9;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  color: var(--text-muted);
  flex-shrink: 0;
}
.low-stock-row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.low-stock-name {
  font-weight: 700;
  font-size: 13px;
  color: var(--text-dark);
}
.low-stock-meta {
  font-size: 11px;
  color: var(--text-muted);
  margin: 2px 0 8px;
}

.slot-mini-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}
.slot-mini-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
  background: #fff;
}
.slot-mini-head {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-dark);
  line-height: 1.35;
}
.slot-mini-count {
  font-size: 12px;
  font-weight: 700;
  margin-top: 6px;
  color: var(--text-muted);
}
.slot-mini-pct {
  font-size: 12px;
  font-weight: 800;
  color: var(--text-dark);
  margin-top: 4px;
}
.mini-bar-rel {
  height: 7px;
  border-radius: 99px;
  background: var(--border);
  margin-top: 8px;
  overflow: hidden;
}
.mini-bar-rel span {
  display: block;
  height: 100%;
  background: var(--blue);
  border-radius: inherit;
}

/* Quick actions pastel */
.qa-grid-ref {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.qa-tile {
  text-align: center;
  padding: 8px;
  border-radius: 14px;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.qa-tile:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-soft);
}
.qa-tile-icon {
  width: 42px;
  height: 42px;
  margin: 0 auto 8px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}
.qa-tile-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-main);
}
.qa-tile--mint .qa-tile-icon {
  background: #d1fae5;
  color: var(--primary-deep);
}
.qa-tile--snow .qa-tile-icon {
  background: #e0f2fe;
  color: #0369a1;
}
.qa-tile--sand .qa-tile-icon {
  background: #fef3c7;
  color: #b45309;
}
.qa-tile--lav .qa-tile-icon {
  background: #ede9fe;
  color: #6d28d9;
}
.qa-tile--sky .qa-tile-icon {
  background: #dbeafe;
  color: #1d4ed8;
}
.qa-tile--peach .qa-tile-icon {
  background: #ffedd5;
  color: #c2410c;
}
.qa-tile--mint2 .qa-tile-icon {
  background: #dcfcdf;
  color: #059669;
}
.qa-tile--mug .qa-tile-icon {
  background: #f1f5f9;
  color: var(--text-muted);
}

/* Mobile sidebar */
.h-sidebar-toggle {
  display: none;
  position: fixed;
  bottom: 18px;
  right: 18px;
  z-index: 60;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, #10b981, #059669);
  color: #fff;
}

@media (max-width: 1400px) {
  .dashboard-row-main {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 1200px) {
  .dashboard-row-second,
  .dashboard-row-third {
    grid-template-columns: minmax(0, 1fr);
  }
  .slot-mini-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

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

  .page-action-row {
    align-items: stretch;
    flex-direction: column;
  }

  .page-action-row__actions {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  .btn-date-chip {
    justify-content: center;
    width: 100%;
  }

  .drop-new-order.btn-group {
    width: 100%;
    display: flex;
  }

  .drop-new-order .btn-split-new-order__main {
    flex: 1;
    justify-content: center;
    border-radius: 12px 0 0 12px !important;
  }

  .admin-content.horeca-content {
    padding: 16px 16px 24px;
  }

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

@media (max-width: 992px) {
  .admin-sidebar {
    transform: translateX(-103%);
    transition: transform 0.2s ease;
  }
  .admin-sidebar.is-open {
    transform: translateX(0);
    z-index: 55;
    box-shadow: var(--shadow-card);
  }
  .admin-main {
    margin-left: 0;
  }
  .admin-sidebar__overlay.is-open {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 45;
    background: rgba(6, 24, 38, 0.5);
  }
  .admin-topbar {
    flex-wrap: wrap;
    height: auto;
    min-height: 78px;
  }
  .admin-topbar__center {
    order: 5;
    width: 100%;
    justify-content: flex-start;
  }
  .admin-search {
    max-width: none;
  }
  .h-sidebar-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

/* ——— LEGACY COMPONENTS (catalog, analytics, whatsapp, etc.) ——— */
.horeca-page-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.horeca-btn-primary,
.horeca-btn {
  border-radius: 12px;
  font-weight: 600;
}
.horeca-btn-primary {
  height: 44px;
  padding: 0 18px;
  background: linear-gradient(135deg, #10b981, #059669);
  color: #fff;
  border: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.horeca-btn-secondary {
  height: 40px;
  padding: 0 14px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-weight: 600;
  color: var(--text-dark);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: inherit;
}
.horeca-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-bottom: 20px;
}
.horeca-grid-3 .span-2 {
  grid-column: span 2;
}
.horeca-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.horeca-card__header {
  padding: 18px;
  padding-bottom: 10px;
  display: flex;
  justify-content: space-between;
}
.horeca-card__title {
  font-size: 15px;
  font-weight: 800;
}
.horeca-card__body {
  padding: 18px;
  padding-top: 0;
}
.table.horeca-table thead th {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  padding: 12px 16px;
  border-bottom: 1px solid var(--soft-border);
}
.table.horeca-table tbody td {
  padding: 12px 16px;
  font-size: 13px;
  border-bottom: 1px solid var(--soft-border);
}
.horeca-kpi-grid,
.dashboard-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}
.kpi-card-compact.horeca-card {
  height: auto;
}
.horeca-progress {
  height: 8px;
  border-radius: 999px;
  background: var(--border);
}
.horeca-progress__bar {
  height: 100%;
  background: var(--primary);
  border-radius: inherit;
}
.horeca-muted {
  color: var(--text-muted);
}
.whatsapp-layout,
.catalog-layout {
  display: grid;
  gap: 20px;
}
@media (min-width: 993px) {
  .whatsapp-layout {
    grid-template-columns: 320px minmax(0, 1fr) 420px;
  }
  .catalog-layout {
    grid-template-columns: 280px minmax(0, 1fr);
    align-items: start;
  }
}
.horeca-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
}
.horeca-badge--success {
  background: #d1fae5;
  color: #047857;
}
.horeca-badge--warning {
  background: #fef3c7;
  color: #b45309;
}
.horeca-badge--purple {
  background: #ede9fe;
  color: #6d28d9;
}

/* ═══ CATALOG page — appended after Bootstrap + shell (premium, scoped) ═══ */

.catalog-page .btn-soft,
.catalog-page .btn-primary-green-split,
.catalog-page .btn-primary-green-main,
.catalog-page .btn-primary-green-caret,
.catalog-page .tool-btn,
.catalog-page .table-action,
.catalog-page .page-btn {
  font-family: inherit;
  box-sizing: border-box;
}

.catalog-page .premium-card.categories-card,
.catalog-page .premium-card.products-card,
.catalog-page .premium-card.pricing-rules-card,
.catalog-page .premium-card.price-list-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--shadow-card);
}

.catalog-page .categories-card,
.catalog-page .pricing-rules-card {
  overflow: hidden;
}

.catalog-page .products-card,
.catalog-page .price-list-card {
  overflow: visible !important;
}

.catalog-page .catalog-table-scroll {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.catalog-page .catalog-action-row {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.catalog-page button.btn-soft,
.catalog-page a.btn-soft {
  height: 44px;
  padding: 0 16px;
  border: 1px solid var(--border);
  background: #fff;
  border-radius: 12px;
  box-shadow: var(--shadow-soft);
  color: var(--text-dark);
  font-size: 14px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  text-decoration: none;
  margin: 0;
  line-height: 1.15;
  -webkit-appearance: none;
  appearance: none;
}

.catalog-page button.btn-soft:hover,
.catalog-page a.btn-soft:hover {
  background: #f8fafc;
  border-color: #dbeafe;
}

.catalog-page .btn-primary-green-split {
  display: inline-flex;
  border-radius: 12px;
  overflow: visible;
  box-shadow: 0 10px 22px rgba(16, 185, 129, 0.25);
}

.catalog-page .btn-primary-green-main {
  height: 48px;
  min-width: 160px;
  padding: 0 22px;
  border: none;
  margin: 0;
  background: linear-gradient(135deg, #10b981, #059669);
  color: #fff !important;
  font-size: 14px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  cursor: pointer;
  line-height: 1.15;
  -webkit-appearance: none;
  appearance: none;
  border-radius: 12px 0 0 12px;
}

.catalog-page .btn-primary-green-main:hover {
  filter: brightness(1.03);
}

.catalog-page .btn-primary-green-caret {
  height: 48px;
  width: 44px;
  margin: 0;
  padding: 0;
  border: none;
  border-left: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  -webkit-appearance: none;
  appearance: none;
  border-radius: 0 12px 12px 0;
}

.catalog-page .btn-primary-green-caret.dropdown-toggle::after {
  display: none !important;
}

.catalog-page .catalog-dd-menu {
  margin-top: 8px !important;
  padding: 6px !important;
  border-radius: 12px !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow-card) !important;
}

.catalog-page .catalog-kpi-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 18px !important;
  margin-bottom: 20px !important;
}

.catalog-page .kpi-card {
  height: 112px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--shadow-card);
  padding: 18px;
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 16px;
}

.catalog-page .kpi-card-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.catalog-page .kpi-icon {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  flex-shrink: 0;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  font-size: 22px;
}

.catalog-page .kpi-icon.green {
  background: #d1fae5;
  color: #059669;
}

.catalog-page .kpi-icon.purple {
  background: #ede9fe;
  color: #8b5cf6;
}

.catalog-page .kpi-icon.orange {
  background: #ffedd5;
  color: #f59e0b;
}

.catalog-page .kpi-icon.blue {
  background: #dbeafe;
  color: #3b82f6;
}

.catalog-page .kpi-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.catalog-page .kpi-value {
  font-size: 26px;
  font-weight: 800;
  color: var(--text-dark);
  line-height: 1.1;
  margin-bottom: 5px;
}

.catalog-page .kpi-change {
  font-size: 12px;
  font-weight: 700;
  color: #059669;
}

.catalog-page .kpi-change.red {
  color: #ef4444;
}

.catalog-page .catalog-main-grid {
  display: grid !important;
  grid-template-columns: 300px minmax(0, 1fr) !important;
  gap: 20px !important;
  margin-bottom: 20px !important;
  align-items: start !important;
}

.catalog-page .categories-stack {
  display: flex !important;
  flex-direction: column !important;
}

.catalog-page .category-row {
  height: 42px;
  border-radius: 12px;
  padding: 0 12px;
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  border: 1px solid var(--soft-border);
  background: #fff;
  text-decoration: none;
  color: inherit;
}

.catalog-page a.category-row:hover {
  background: #fafafa;
  border-color: #e2e8f0;
}

.catalog-page .category-row.active {
  background: #ecfdf5;
  border-color: #d1fae5;
}

.catalog-page .category-left {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.catalog-page .category-icon {
  width: 28px;
  height: 28px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
}

.catalog-page .category-name {
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text-main);
}

.catalog-page .category-count {
  font-size: 13px;
  font-weight: 700;
  color: #475569;
}

.catalog-page .card-link-row {
  text-align: center;
  padding-top: 14px;
}

.catalog-page .card-link {
  color: #059669;
  font-size: 13px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
}

.catalog-page .card-header-clean {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  gap: 12px;
}

.catalog-page .card-title {
  font-size: 15px;
  font-weight: 800;
  color: var(--text-dark);
  margin: 0;
}

.catalog-page .card-count {
  min-width: 24px;
  height: 22px;
  padding: 0 8px;
  background: #f1f5f9;
  color: #475569;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.catalog-page .products-header {
  min-height: 64px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.catalog-page .products-title-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}

.catalog-page .products-tools {
  display: flex !important;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.catalog-page .product-search-wrap {
  position: relative;
  width: 320px;
  max-width: 100%;
}

.catalog-page .product-search-wrap > i.bi {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-light);
  font-size: 15px;
  pointer-events: none;
}

.catalog-page .product-search {
  width: 100%;
  height: 40px;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0 12px 0 38px;
  font-size: 13px;
  margin: 0;
  box-sizing: border-box;
}

.catalog-page .tool-btn {
  width: 40px;
  height: 40px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
  color: #334155;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  -webkit-appearance: none;
  appearance: none;
}

.catalog-page .tool-btn:hover {
  background: #f8fafc;
}

.catalog-page .tool-btn.dropdown-toggle::after {
  display: none !important;
}

.catalog-page .premium-table {
  width: 100%;
  margin: 0;
  border-collapse: separate !important;
  border-spacing: 0;
}

.catalog-page table.premium-table thead th {
  height: 42px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  color: #475569 !important;
  background: #f8fafc !important;
  border-bottom: 1px solid var(--border);
  padding: 0 14px !important;
  text-align: left;
  vertical-align: middle;
}

.catalog-page table.premium-table tbody td {
  height: 58px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--text-main) !important;
  border-bottom: 1px solid var(--soft-border);
  padding: 0 14px !important;
  vertical-align: middle !important;
}

.catalog-page .th-check {
  width: 42px;
}

.catalog-page .th-actions {
  text-align: right;
  width: 104px;
}

.catalog-page .td-check input[type='checkbox'] {
  margin: 0;
  accent-color: #10b981;
  cursor: pointer;
}

.catalog-page .product-cell {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  min-width: 0 !important;
}

.catalog-page .product-img {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  border: 1px solid var(--soft-border);
  background: #f8fafc;
  flex-shrink: 0;
}

.catalog-page .product-img--ph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #cbd5e1;
  font-size: 18px;
}

.catalog-page .product-name {
  font-size: 13px;
  font-weight: 800;
  color: var(--text-dark);
  margin: 0 0 4px;
}

.catalog-page .badge-pill-visible {
  display: inline-flex;
  height: 20px;
  padding: 0 8px;
  align-items: center;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  background: #d1fae5;
  color: #047857;
}

.catalog-page .td-muted {
  color: var(--text-muted) !important;
}

.catalog-page .td-strong {
  font-weight: 700 !important;
  color: var(--text-dark) !important;
}

.catalog-page .stock-amt {
  font-weight: 600;
}

.catalog-page .stock-good {
  color: #059669;
  font-size: 12px;
  font-weight: 800;
}

.catalog-page .stock-low {
  color: #ea580c;
  font-size: 12px;
  font-weight: 800;
}

.catalog-page .status-active {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
}

.catalog-page .catalog-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #059669;
  flex-shrink: 0;
}

.catalog-page .table-actions {
  display: inline-flex;
  gap: 8px;
  justify-content: flex-end;
  width: 100%;
}

.catalog-page .table-action {
  width: 34px;
  height: 34px;
  border: 1px solid var(--soft-border);
  border-radius: 10px;
  background: #fff;
  padding: 0;
  margin: 0;
  cursor: pointer;
  color: #334155 !important;
  text-decoration: none !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  line-height: 1;
  -webkit-appearance: none;
  appearance: none;
}

.catalog-page .table-action:hover {
  background: #f8fafc;
}

.catalog-page .table-action.dropdown-toggle::after {
  display: none !important;
}

.catalog-page .table-footer {
  padding: 12px 18px;
  border-top: 1px solid var(--soft-border);
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.catalog-page .table-muted {
  font-size: 13px;
  color: var(--text-muted);
  font-weight: 600;
}

.catalog-page .pagination-wrap {
  display: flex !important;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.catalog-page button.page-btn {
  min-width: 36px;
  height: 36px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
  color: #334155;
  font-weight: 700;
  cursor: pointer;
  margin: 0;
}

.catalog-page .page-btn.active {
  border-color: #10b981;
  background: #ecfdf5;
  color: #059669;
}

.catalog-page .page-gap {
  color: var(--text-light);
  font-weight: 700;
  font-size: 13px;
}

.catalog-page .page-size {
  height: 36px;
  margin-left: 6px;
  padding: 0 10px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: #fff;
  font-size: 12px;
  font-weight: 700;
  font-family: inherit;
  color: #475569;
}

.catalog-page .catalog-bottom-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 20px !important;
}

.catalog-page .pricing-head {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.catalog-page .pricing-head-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.catalog-page .info-icon-btn {
  padding: 0;
  margin: 0;
  border: none;
  background: none;
  color: var(--text-light);
  cursor: pointer;
  line-height: 1;
}

.catalog-page .view-all-link {
  color: #059669;
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
}

.catalog-page .pricing-rules-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  border-top: 1px solid var(--soft-border);
  margin: 0 -18px -18px;
}

.catalog-page .pricing-rule {
  padding: 18px 14px 20px;
  text-align: center;
  border-right: 1px solid var(--soft-border);
}

.catalog-page .pricing-rule:last-child {
  border-right: none;
}

.catalog-page .pricing-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  font-size: 22px;
}

.catalog-page .pricing-title {
  font-size: 13px;
  font-weight: 800;
  color: var(--text-dark);
  margin-bottom: 6px;
}

.catalog-page .pricing-desc {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.45;
  margin: 0 0 12px;
}

.catalog-page .rule-badge {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
}

.catalog-page .rule-badge--green {
  background: #d1fae5;
  color: #047857;
}

.catalog-page .rule-badge--orange {
  background: #ffedd5;
  color: #c2410c;
}

.catalog-page table.price-list-table thead th {
  height: 44px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  color: #475569 !important;
  background: #f8fafc !important;
  border-bottom: 1px solid var(--border);
  padding: 0 14px !important;
  text-align: left;
}

.catalog-page table.price-list-table tbody td {
  height: 44px !important;
  font-size: 12px !important;
  padding: 0 14px !important;
  border-bottom: 1px solid var(--soft-border);
  vertical-align: middle !important;
}

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

  .catalog-page .catalog-main-grid,
  .catalog-page .catalog-bottom-grid {
    grid-template-columns: 1fr !important;
  }

  .catalog-page .pricing-rules-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .catalog-page .pricing-rule:nth-child(2n) {
    border-right: none;
  }

  .catalog-page .pricing-rule {
    border-bottom: 1px solid var(--soft-border);
  }

  .catalog-page .pricing-rule:nth-last-child(-n + 2) {
    border-bottom: none;
  }
}

@media (max-width: 768px) {
  .catalog-page .catalog-kpi-grid {
    grid-template-columns: 1fr !important;
  }
}

.catalog-page .catalog-card-heading {
  font-size: 15px;
  font-weight: 800;
  color: var(--text-dark);
  margin: 0;
}

.catalog-page .catalog-footer-pagination {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.catalog-page .btn-primary-green-split.btn-group {
  gap: 0 !important;
  flex-wrap: nowrap !important;
}

/* ═══ ANALYTICS & REPORTS — HORECA reference ═══ */

.analytics-page .btn-soft,
.analytics-page button.btn-soft {
  height: 44px;
  padding: 0 16px;
  border: 1px solid var(--border);
  background: #fff;
  border-radius: 12px;
  box-shadow: var(--shadow-soft);
  color: var(--text-dark);
  font-size: 14px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  text-decoration: none;
  margin: 0;
  line-height: 1.15;
  appearance: none;
  -webkit-appearance: none;
  font-family: inherit;
}

.analytics-page .btn-soft:hover {
  background: #f8fafc;
  border-color: #dbeafe;
}

.analytics-filter-row {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.analytics-filter-select {
  height: 44px;
  padding: 0 36px 0 16px;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%2364748b' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-dark);
  font-family: inherit;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  box-shadow: var(--shadow-soft);
}

.analytics-filter-select:hover {
  border-color: #cbd5e1;
}

.analytics-filter-select:focus-visible {
  outline: 2px solid rgba(16, 185, 129, 0.35);
  outline-offset: 1px;
}

.btn-analytics-export {
  height: 44px;
  padding: 0 18px;
  border-radius: 12px;
  border: none;
  background: linear-gradient(180deg, #0f172a 0%, #1e293b 100%);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-family: inherit;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.18);
}

.btn-analytics-export:hover {
  filter: brightness(1.06);
}

.btn-analytics-export .bi-download {
  font-size: 16px;
  opacity: 0.95;
}

.analytics-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin-bottom: 20px;
}

.analytics-kpi-card {
  height: 104px;
  background: var(--card-bg);
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.05);
  padding: 18px;
  display: flex;
  align-items: center;
  gap: 16px;
  position: relative;
  overflow: hidden;
}

.analytics-kpi-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.analytics-kpi-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.analytics-kpi-value {
  font-size: 25px;
  font-weight: 800;
  color: var(--text-dark);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.analytics-kpi-change {
  font-size: 12px;
  font-weight: 700;
  color: #059669;
  margin-top: 4px;
}

.analytics-kpi-icon {
  width: 52px;
  height: 52px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}

.analytics-kpi-icon--green {
  background: #d1fae5;
  color: #059669;
}

.analytics-kpi-icon--purple {
  background: #ede9fe;
  color: #8b5cf6;
}

.analytics-kpi-icon--blue {
  background: #dbeafe;
  color: #3b82f6;
}

.analytics-kpi-icon--orange {
  background: #ffedd5;
  color: #f59e0b;
}

.analytics-sparkline {
  flex-shrink: 0;
  width: 110px;
  height: 34px;
  margin-left: auto;
}

.analytics-chart-card.analytics-card-row1:not(.analytics-table-card) {
  min-height: 272px;
}

.analytics-chart-card.analytics-card-row1.analytics-table-card {
  min-height: auto;
}

.analytics-chart-card.analytics-card-row2 {
  min-height: 236px;
}

.analytics-chart-card.analytics-card-row3 {
  min-height: 256px;
}

.analytics-page .premium-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.05);
  overflow: hidden;
}

.analytics-page .premium-card.analytics-chart-card {
  overflow: visible;
}

.analytics-page .premium-card.analytics-chart-card .card-inner {
  overflow: visible;
}

.analytics-page .card-inner {
  padding: 18px;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.analytics-page .card-inner:has(.analytics-segment-chart) {
  padding-inline-end: 20px;
}

.analytics-page .card-header-clean {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  gap: 10px;
}

.analytics-page .card-header-clean-left {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.analytics-page .card-title {
  font-size: 15px;
  font-weight: 800;
  color: var(--text-dark);
  margin: 0;
}

.analytics-card-select {
  height: 32px;
  padding: 0 10px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: #fff;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-main);
  font-family: inherit;
  cursor: pointer;
}

.analytics-page .info-icon-btn {
  padding: 0;
  margin: 0;
  border: none;
  background: none;
  color: var(--text-light);
  cursor: pointer;
  line-height: 1;
}

.section-heading {
  font-size: 18px;
  font-weight: 800;
  color: var(--text-dark);
  margin: 6px 0 14px;
}

.analytics-row-one {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(200px, 1.05fr) minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 20px;
  margin-bottom: 20px;
  align-items: stretch;
}

.analytics-row-two {
  display: grid;
  grid-template-columns: 1.25fr 1.2fr 1.3fr;
  gap: 20px;
  margin-bottom: 22px;
}

.analytics-row-three {
  display: grid;
  grid-template-columns: 1.2fr 1.25fr 1.3fr;
  gap: 20px;
  align-items: stretch;
}

.chart-box {
  position: relative;
  width: 100%;
}

.chart-box canvas {
  display: block;
}

.chart-130 {
  height: 130px;
}

.chart-150 {
  height: 150px;
}

.chart-155 {
  height: 155px;
}

.chart-170 {
  height: 170px;
}

.chart-190 {
  height: 190px;
}

.chart-segment-d {
  width: 150px;
  height: 150px;
  margin: auto;
}

.analytics-segment-chart {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  flex: 1;
  min-height: 176px;
  min-width: 0;
}

.analytics-donut-wrap--segment {
  flex: 0 0 auto;
  width: 154px;
  height: 154px;
}

.analytics-donut-wrap--segment .chart-segment-d {
  width: 100%;
  height: 100%;
  margin: 0;
}

.analytics-donut-wrap--segment .analytics-donut-center {
  direction: ltr;
  unicode-bidi: isolate;
  padding-bottom: 2px;
  padding-inline: 14px;
  box-sizing: border-box;
}

.analytics-donut-wrap--segment .analytics-donut-total--stacked {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  max-width: 100%;
  text-align: center;
}

.analytics-donut-wrap--segment .analytics-donut-total__num {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.12;
  color: var(--text-dark);
}

.analytics-donut-wrap--segment .analytics-donut-total__sym {
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  color: var(--text-muted);
}

.analytics-donut-wrap--segment .analytics-donut-sub {
  margin-top: 6px;
  font-size: 11px;
  font-weight: 700;
}

.analytics-legend-stack--segment {
  flex: 1 1 140px;
  min-width: 112px;
  justify-content: center;
  gap: 10px;
  overflow: visible;
  padding-inline-end: 2px;
  box-sizing: border-box;
}

.analytics-legend-row--segment {
  display: grid;
  grid-template-columns: 10px minmax(96px, 1fr) auto;
  column-gap: 10px;
  align-items: center;
  row-gap: 0;
  direction: ltr;
  unicode-bidi: isolate;
}

.analytics-legend-row--segment .analytics-dot {
  justify-self: start;
}

.analytics-legend-row--segment .analytics-legend-name {
  padding-right: 6px;
  font-weight: 700;
  font-size: 12px;
  line-height: 1.3;
  word-break: normal;
  overflow-wrap: break-word;
  hyphens: none;
}

.analytics-legend-pct {
  text-align: right;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.analytics-legend-row--segment .analytics-legend-metrics {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 3px;
  flex-shrink: 0;
  max-width: 100%;
}

.analytics-legend-row--segment .analytics-legend-pct {
  font-size: 11px;
  line-height: 1;
}

.analytics-legend-row--segment .analytics-legend-val {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: baseline;
  justify-content: flex-end;
  gap: 6px;
  font-variant-numeric: tabular-nums;
  font-size: 10px;
  font-weight: 800;
  color: var(--text-dark);
  line-height: 1.2;
  text-align: right;
  white-space: nowrap;
}

.analytics-legend-val__sym {
  font-size: 9px;
  font-weight: 700;
  color: var(--text-muted);
  flex-shrink: 0;
}

.analytics-legend-val__num {
  font-weight: 800;
}

.analytics-donut-row {
  display: flex;
  gap: 12px;
  align-items: center;
}

.analytics-donut-row--narrow {
  gap: 8px;
}

.analytics-donut-wrap {
  position: relative;
  flex-shrink: 0;
  width: 150px;
  height: 150px;
}

.analytics-donut-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  pointer-events: none;
  padding-bottom: 4px;
}

.analytics-donut-center--compact {
  justify-content: center;
}

.analytics-donut-total {
  font-size: 16px;
  font-weight: 800;
  color: var(--text-dark);
  line-height: 1;
}

.analytics-donut-sub {
  margin-top: 4px;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
}

.analytics-legend-stack {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.analytics-legend-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-main);
  justify-content: space-between;
}

.analytics-legend-row--tight {
  gap: 6px;
}

.analytics-legend-name {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.analytics-legend-muted {
  color: var(--text-muted);
  font-weight: 700;
}

.analytics-legend-val {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.analytics-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  flex-shrink: 0;
}

.analytics-dot--green {
  background: #10b981;
}

.analytics-dot--blue {
  background: #3b82f6;
}

.analytics-dot--amber {
  background: #f59e0b;
}

.analytics-dot--purple {
  background: #8b5cf6;
}

.analytics-dot--red {
  background: #ef4444;
}

.analytics-dot--slate {
  background: #94a3b8;
}

.analytics-card-select:focus {
  outline: 2px solid rgba(16, 185, 129, 0.28);
}

.card-link-row-alt {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--soft-border);
}

.analytics-page .card-link {
  color: #059669;
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.analytics-table-scroll {
  flex: 1;
  overflow: auto;
  margin: -2px -4px 0;
}

.analytics-page .premium-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

.analytics-page .premium-table thead th {
  height: 36px;
  font-size: 11px;
  font-weight: 800;
  color: #475569;
  background: var(--page-bg);
  border-bottom: 1px solid var(--border);
  padding: 0 12px;
  text-align: left;
  white-space: nowrap;
}

.analytics-page .premium-table tbody td {
  height: 36px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-main);
  border-bottom: 1px solid var(--soft-border);
  padding: 0 12px;
  vertical-align: middle;
  white-space: nowrap;
}

.analytics-page .premium-table tbody tr:last-child td {
  border-bottom: none;
}

.analytics-growth {
  font-weight: 800;
  color: #059669;
}

.analytics-aging-total {
  font-size: 22px;
  font-weight: 800;
  color: var(--text-dark);
}

.analytics-aging-sub {
  margin-top: 3px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  margin-bottom: 12px;
}

.analytics-aging-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.analytics-aging-label {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-main);
}

.analytics-aging-amt {
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.analytics-aging-bar {
  height: 8px;
  border-radius: 999px;
  background: var(--page-bg);
  overflow: hidden;
  margin-top: 6px;
}

.analytics-aging-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
}

.analytics-aging-fill.bar-g {
  background: linear-gradient(90deg, #10b981, #059669);
}

.analytics-aging-fill.bar-o {
  background: linear-gradient(90deg, #f59e0b, #ea580c);
}

.analytics-aging-fill.bar-r2 {
  background: linear-gradient(90deg, #fbbf24 0%, #eab308 100%);
}

.analytics-aging-fill.bar-r {
  background: linear-gradient(90deg, #ef4444, #b91c1c);
}

.analytics-aging-row {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.analytics-aging-pct {
  margin-top: 4px;
  font-size: 11px;
  font-weight: 800;
  color: var(--text-muted);
  text-align: right;
}

.analytics-combo-card .analytics-combo-legend {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  flex-wrap: wrap;
}

.analytics-combo-card .analytics-combo-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.analytics-combo-card .card-header-clean {
  flex-wrap: wrap;
}

.analytics-combo-card .chart-box {
  margin-top: -4px;
}

.analytics-gauge-stage {
  position: relative;
  flex: 0 0 min(154px, 42%);
  width: 154px;
  max-width: 100%;
  height: 128px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
}

.chart-gauge {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  height: 110px;
  width: 154px;
}

.chart-gauge canvas {
  display: block;
}

.analytics-gauge-center {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  width: calc(100% - 16px);
  text-align: center;
  pointer-events: none;
  z-index: 1;
}

.analytics-gauge-pct {
  font-size: 20px;
  font-weight: 800;
  color: var(--text-dark);
  line-height: 1.1;
}

.analytics-gauge-sub {
  margin-top: 4px;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  line-height: 1.2;
}

.analytics-delivery-split {
  display: flex;
  gap: 16px;
  align-items: center;
}

.analytics-delivery-meta {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
  justify-content: center;
}

.analytics-meta-block {
  padding: 0;
}

.analytics-meta-line {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: nowrap;
}

.analytics-meta-label {
  flex: 1;
  min-width: 0;
  font-weight: 600;
  font-size: 13px;
  color: var(--text-main);
}

.analytics-meta-pct {
  font-weight: 800;
  font-size: 13px;
  color: var(--text-dark);
  font-variant-numeric: tabular-nums;
}

.analytics-meta-sub {
  margin-top: 5px;
  padding-left: 18px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
}

.analytics-meta-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.analytics-meta-strong {
  font-weight: 800;
  margin-left: auto;
}

.analytics-meta-muted {
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.analytics-rep-cell {
  display: flex;
  align-items: center;
  gap: 10px;
}

.analytics-avatar {
  width: 26px;
  height: 26px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 800;
  color: #fff;
  flex-shrink: 0;
}

.analytics-avatar--1 {
  background: linear-gradient(135deg, #10b981, #059669);
}

.analytics-avatar--2 {
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
}

.analytics-avatar--3 {
  background: linear-gradient(135deg, #f59e0b, #d97706);
}

.analytics-avatar--4 {
  background: linear-gradient(135deg, #ec4899, #db2777);
}

.analytics-avatar--5 {
  background: linear-gradient(135deg, #8b5cf6, #6d28d9);
}

.analytics-avatar--6 {
  background: linear-gradient(135deg, #06b6d4, #0891b2);
}

.analytics-avatar--7 {
  background: linear-gradient(135deg, #14b8a6, #0f766e);
}

@media (max-width: 1500px) {
  .analytics-row-one {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .analytics-row-two {
    grid-template-columns: 1fr;
  }

  .analytics-row-three {
    grid-template-columns: 1fr;
  }

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

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

  .analytics-filter-row {
    justify-content: flex-start;
  }

  .analytics-sparkline {
    display: none;
  }

  .analytics-delivery-split {
    flex-direction: column;
    align-items: center;
  }

  .analytics-gauge-stage {
    flex-basis: auto;
  }

  .analytics-delivery-meta {
    width: 100%;
    max-width: 280px;
  }

  .analytics-segment-chart {
    flex-wrap: wrap;
    justify-content: center;
    text-align: left;
    min-height: 0;
  }

  .analytics-legend-stack--segment {
    width: min(100%, 260px);
    padding-inline-end: 10px;
  }
}

/* Customer Insights — HORECA reference (append) */

.chart-180 {
  height: 180px;
}
/* Customer Insights — HORECA reference (scoped) */

.insights-page {
  max-width: 100%;
  overflow-x: clip;
  min-width: 0;
}

.insights-page .btn-soft {
  height: 44px;
  padding: 0 16px;
  border: 1px solid var(--border);
  background: #f8fafc;
  border-radius: 12px;
  box-shadow: var(--shadow-soft);
  color: var(--text-dark);
  font-size: 14px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-family: inherit;
  line-height: 1.15;
  appearance: none;
  -webkit-appearance: none;
}

.insights-page .btn-soft:hover:not(:disabled) {
  background: #f8fafc;
  border-color: #dbeafe;
}

.insights-page .btn-soft:disabled {
  opacity: 0.95;
  cursor: default;
  background: #fff;
}

.insights-filter-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.insights-filter-customer-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  justify-content: flex-end;
  flex: 1 1 260px;
  min-width: 0;
}

.insights-filter-customer-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-muted);
  white-space: nowrap;
}

.insights-customer-select {
  flex: 1 1 220px;
  min-width: min(100%, 220px);
  max-width: 100%;
  height: 42px;
  border-radius: 10px;
  border: 1px solid var(--border);
  padding: 0 12px;
  font-family: inherit;
  font-weight: 600;
  font-size: 13px;
  background: #fff;
  color: var(--text-dark);
}

.insights-clear-customer {
  flex-shrink: 0;
}

.insights-filter-banner {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-main);
  line-height: 1.45;
  margin: 0 0 12px;
  padding: 10px 12px;
  background: linear-gradient(135deg, #ecfdf5 0%, #f0fdf4 100%);
  border: 1px solid #bbf7d0;
  border-radius: 10px;
}

.insights-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: clamp(12px, 2vw, 18px);
  margin-bottom: 20px;
}

.insights-kpi-card {
  min-height: 112px;
  height: auto;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(15, 23, 42, 0.04);
  padding: 18px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.insights-kpi-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}

.insights-kpi-icon--green {
  background: #d1fae5;
  color: #059669;
}

.insights-kpi-icon--purple {
  background: #ede9fe;
  color: #8b5cf6;
}

.insights-kpi-icon--orange {
  background: #ffedd5;
  color: #f59e0b;
}

.insights-kpi-icon--red {
  background: #fee2e2;
  color: #ef4444;
}

.insights-kpi-body {
  min-width: 0;
}

.insights-kpi-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-muted);
}

.insights-kpi-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
}

.insights-kpi-info {
  border: none;
  background: transparent;
  padding: 0;
  color: var(--text-light);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  flex-shrink: 0;
}

.insights-kpi-value {
  font-size: 25px;
  font-weight: 800;
  color: var(--text-dark);
  line-height: 1.15;
  margin-top: 2px;
}

.insights-kpi-change {
  font-size: 12px;
  font-weight: 700;
  margin-top: 4px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.insights-kpi-change--good {
  color: #059669;
}

.insights-kpi-change--bad {
  color: #ef4444;
}

.insights-row-one {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1.35fr) minmax(0, 1.45fr);
  gap: 20px;
  margin-bottom: 20px;
  min-width: 0;
}

.insights-row-two {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 1.42fr) minmax(0, 0.92fr);
  gap: 16px;
  align-items: stretch;
  min-width: 0;
}

.insights-page .premium-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(15, 23, 42, 0.04);
  overflow: hidden;
}

.insights-page .card-inner {
  padding: 18px;
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
}

.insights-fixed-h {
  min-height: 300px;
}

.insights-fixed-h-xl {
  min-height: 390px;
}

.insights-card-head-split {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.insights-card-foot-center {
  text-align: center;
  padding-top: 12px;
  margin-top: auto;
  border-top: 1px solid var(--soft-border);
}

.insights-card-foot-center .card-link {
  color: #059669;
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.insights-page .card-title {
  font-size: 15px;
  font-weight: 800;
  color: var(--text-dark);
  margin: 0;
}

.insights-page .card-subtitle {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 3px;
}

.card-header-clean-left-inline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.insights-mini-select {
  height: 32px;
  padding: 0 28px 0 10px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: #fff;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-main);
  font-family: inherit;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' fill='%2364748b' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
}

.insights-select-tr {
  margin-left: auto;
  flex-shrink: 0;
}

.insights-grow-meta {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.insights-grow-strong {
  font-size: 22px;
  font-weight: 800;
  color: var(--text-dark);
  line-height: 1;
}

.insights-grow-sub {
  margin-top: 4px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
}

.insights-grow-diff {
  font-size: 13px;
  font-weight: 800;
  color: #059669;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.insights-grow-diff.neg {
  color: #ef4444;
}

.insights-seg-layout {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1;
  min-height: 190px;
}

.insights-donut-wrap {
  position: relative;
  flex: 0 0 200px;
  width: 200px;
  max-width: 46%;
}

.insights-donut-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  text-align: center;
  padding-bottom: 6px;
}

.insights-donut-center strong {
  font-size: 20px;
  font-weight: 800;
  color: var(--text-dark);
  line-height: 1.1;
}

.insights-donut-center span {
  margin-top: 4px;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
}

.insights-legend-stack {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  justify-content: center;
  min-width: 0;
}

.insights-legend-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
}

.insights-legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  flex-shrink: 0;
}

.insights-legend-name {
  flex: 1;
  min-width: 0;
  font-weight: 700;
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.insights-legend-p {
  font-weight: 800;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.insights-legend-c {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.insights-matrix-scroll {
  flex: 1;
  overflow: auto;
  margin: -2px -4px 0;
}

.insights-matrix-table {
  margin: 0;
}

.insights-matrix-cat {
  font-weight: 700;
}

.insights-matrix-val {
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 4px;
}

.insights-bar-track {
  height: 6px;
  border-radius: 999px;
  background: #f1f5f9;
  overflow: hidden;
}

.insights-bar-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  min-width: 2px;
}

.insights-bar-track .bar-rest {
  background: #10b981;
}

.insights-bar-track .bar-hot {
  background: #3b82f6;
}

.insights-bar-track .bar-cafe {
  background: #f59e0b;
}

.insights-bar-track .bar-cater {
  background: #8b5cf6;
}

.insights-mini-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  min-width: 0;
}

.insights-mini-card {
  min-height: 168px;
  height: auto;
  max-height: 210px;
  min-width: 0;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(15, 23, 42, 0.04);
  padding: 12px 14px 10px;
  display: flex;
  flex-direction: column;
}

.insights-mini-city {
  min-height: 180px;
  max-height: none;
}

.insights-mini-title {
  font-size: 13px;
  font-weight: 800;
  color: var(--text-dark);
}

.insights-gauge-wrap {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 0;
}

.insights-gauge-label {
  margin-top: 2px;
  font-size: 12px;
  font-weight: 800;
  color: var(--text-main);
}

.chart-gauge-mini {
  height: 100px;
  width: 100%;
  max-width: 178px;
}

.insights-mini-muted {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  margin-top: 4px;
}

.insights-mini-diff {
  font-size: 12px;
  font-weight: 700;
  margin-top: auto;
  padding-top: 6px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.insights-mini-diff.neg {
  color: #ef4444;
}

.insights-mini-diff--good {
  color: #059669;
}

.insights-mini-icon-grn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #d1fae5;
  color: #059669;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  margin: 10px 0 6px;
}

.insights-mini-icon-star {
  margin: 6px 0 4px;
  color: #0f172a;
  font-size: 17px;
  line-height: 1;
}

.insights-mini-icon-support {
  margin: 6px 0 4px;
  color: #475569;
  font-size: 18px;
  line-height: 1;
}
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #ede9fe;
  color: #8b5cf6;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  margin: 10px 0 6px;
}

.insights-loy-score {
  font-size: 17px;
  font-weight: 800;
  color: var(--text-dark);
}

.insights-loy-num {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.insights-loy-slash {
  font-size: 15px;
  font-weight: 600;
  color: #64748b;
}

.insights-loy-score .muted-soft {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-muted);
  margin-left: 6px;
}

.insights-mini-strong {
  font-size: 16px;
  font-weight: 800;
  color: var(--text-dark);
  margin-top: 6px;
}

.insights-city-split {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 10px;
  flex: 1;
  flex-wrap: wrap;
  min-height: 0;
  min-width: 0;
}

.insights-city-split .chart-box.chart-150 {
  flex: 0 1 118px;
  width: 118px;
  min-width: 90px;
  max-width: 45%;
}

.insights-legend-city {
  gap: 5px;
  flex: 1 1 100px;
  min-width: 0;
}

.insights-row-two > .premium-card {
  min-width: 0;
}

.insights-churn-line {
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  color: #334155;
  margin: 0;
  padding: 4px 4px 0;
  line-height: 1.35;
}

.insights-churn-line strong {
  font-weight: 800;
  color: #0f172a;
}

.insights-churn-line .insights-churn-severity {
  font-weight: 800;
}

.insights-churn-line.is-high .insights-churn-severity {
  color: #dc2626;
}

.insights-legend-city .insights-city-leg-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 4px;
}

.insights-city-leg-meta {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
}

.insights-city-leg-row .insights-legend-p {
  font-size: 12px;
  font-weight: 800;
  color: var(--text-dark);
  line-height: 1.2;
  margin: 0;
}

.insights-city-leg-row .insights-legend-city-name {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.insights-row-two .insights-table-scroll {
  max-width: 100%;
}

.insights-row-two .premium-table {
  table-layout: fixed;
  width: 100%;
}

.insights-row-two .premium-table thead th,
.insights-row-two .premium-table tbody td {
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
  padding-left: 8px;
  padding-right: 8px;
}

.insights-mini-link {
  margin-top: 8px;
  align-self: flex-start;
}

.insights-table-scroll {
  flex: 1;
  overflow: auto;
  margin: 0 -4px;
  min-height: 0;
}

.insights-page .premium-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

.insights-page .premium-table thead th {
  height: 36px;
  font-size: 11px;
  font-weight: 800;
  color: #475569;
  background: #f8fafc;
  border-bottom: 1px solid var(--border);
  padding: 0 12px;
  text-align: left;
  white-space: nowrap;
}

.insights-page .premium-table tbody td {
  height: 42px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-main);
  border-bottom: 1px solid var(--soft-border);
  padding: 0 12px;
  vertical-align: middle;
  white-space: nowrap;
}

.insights-muted-td {
  text-align: center;
  padding: 18px !important;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  white-space: normal !important;
}

.insights-page .badge-pill {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
}

.insights-page .badge-green {
  background: #d1fae5;
  color: #047857;
}

.insights-page .badge-purple {
  background: #ede9fe;
  color: #6d28d9;
}

.insights-page .badge-orange {
  background: #ffedd5;
  color: #c2410c;
}

.insights-page .badge-blue {
  background: #dbeafe;
  color: #1d4ed8;
}

.insights-page .badge-red {
  background: #fee2e2;
  color: #b91c1c;
}

.insights-user-cell {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.insights-avatar {
  flex-shrink: 0;
}

.insights-avatar-img {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--soft-border);
}

.insights-avatar-ph {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, #10b981, #059669);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.insights-page .profile-btn {
  height: 36px;
  padding: 0 12px;
  border: 1px solid var(--border);
  background: #fff;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 800;
  color: var(--text-dark);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  cursor: pointer;
  font-family: inherit;
}

.insights-page .profile-btn:hover {
  background: #f8fafc;
}
.insights-profile-card .card-inner {
  padding-bottom: 14px;
}

.insights-profile-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.insights-profile-ident {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex: 1 1 200px;
}

.insights-profile-logo {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--border);
}

.insights-profile-logo-ph {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #e5e7eb;
  color: #6b7280;
  border: none;
  font-size: 15px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.insights-profile-title-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.insights-profile-name {
  font-size: 17px;
  font-weight: 800;
  color: var(--text-dark);
}

.insights-profile-sub {
  font-size: 13px;
  font-weight: 600;
}

.insights-profile-sub.muted {
  color: var(--text-muted);
}

.insights-profile-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 1;
  min-width: 0;
  flex-wrap: wrap;
}

.insights-profile-card .insights-profile-title-row .badge-pill.badge-green {
  background: #10b981;
  color: #fff;
}

.insights-icon-plain {
  border: none;
  background: none;
  color: var(--text-muted);
  font-size: 18px;
  cursor: pointer;
  padding: 4px;
  line-height: 1;
}

.insights-profile-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
  margin-bottom: 12px;
  min-width: 0;
}

.insights-info-panel,
.insights-metric-panel {
  border: 1px solid var(--soft-border);
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 12px;
  background: #fafbfc;
  min-width: 0;
}

.insights-info-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid var(--soft-border);
}

.insights-info-row:last-child {
  border-bottom: none;
}

.insights-info-row .lab {
  color: var(--text-muted);
  font-weight: 700;
}

.insights-info-row .val {
  text-align: right;
  font-weight: 700;
  color: var(--text-main);
  max-width: 58%;
}

.insights-info-row .val .muted {
  font-weight: 600;
}

.text-risk {
  color: #ef4444 !important;
}

.insights-preferred {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.insights-preferred .badge-pill.badge-blue {
  background: #fff;
  border: 1px solid #bfdbfe;
  color: #2563eb;
}

.insights-page .info-icon-btn {
  padding: 0;
  border: none;
  background: none;
  color: var(--text-light);
  cursor: pointer;
}
@media (max-width: 1400px) {
  .insights-row-one {
    grid-template-columns: 1fr;
  }

  .insights-row-two {
    grid-template-columns: 1fr;
  }

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

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

@media (max-width: 900px) {
  .insights-filter-row {
    justify-content: flex-start;
  }

  .insights-kpi-grid {
    grid-template-columns: 1fr;
  }

  .insights-mini-grid {
    grid-template-columns: 1fr;
  }

  .insights-profile-grid {
    grid-template-columns: 1fr;
  }

  .insights-city-split {
    flex-direction: column;
  }

  .insights-seg-layout {
    flex-wrap: wrap;
    justify-content: center;
  }
}

/* =====================================================================
   Orders Management (reference UI)
   ===================================================================== */

.orders-management-page {
  padding-bottom: 8px;
}

.orders-filter-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.orders-filter-left,
.orders-filter-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.orders-kpi-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 18px;
  margin-bottom: 20px;
}

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

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

.orders-kpi-card {
  height: 112px;
  background: var(--card-bg);
  border: 1px solid #e5e7eb;
  border-radius: 18px;
  box-shadow: var(--shadow-card);
  padding: 18px;
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}

.orders-kpi-icon {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}

.orders-kpi-icon--orders {
  background: #d1fae5;
  color: #059669;
}
.orders-kpi-icon--pending {
  background: #ffedd5;
  color: #f59e0b;
}
.orders-kpi-icon--confirmed {
  background: #d1fae5;
  color: #059669;
}
.orders-kpi-icon--revenue {
  background: #dbeafe;
  color: #3b82f6;
}
.orders-kpi-icon--aov {
  background: #ede9fe;
  color: #8b5cf6;
}

.orders-kpi-label {
  font-size: 13px;
  font-weight: 700;
  color: #64748b;
  margin: 0;
}
.orders-kpi-value {
  margin: 2px 0 0;
  font-size: 25px;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.05;
}
.orders-kpi-delta {
  margin: 6px 0 0;
  font-size: 12px;
  font-weight: 700;
  color: #059669;
}

.btn-soft {
  height: 44px;
  padding: 0 16px;
  border: 1px solid #e5e7eb;
  background: #fff;
  border-radius: 12px;
  color: #0f172a;
  font-size: 14px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.05);
  cursor: pointer;
  font-family: inherit;
}

.btn-soft--sm {
  height: 40px;
  padding: 0 14px;
  font-size: 13px;
}

.btn-soft--icon {
  width: 40px;
  padding: 0;
  justify-content: center;
}

.btn-primary-green {
  height: 48px;
  padding: 0 22px;
  border: none;
  background: linear-gradient(135deg, #10b981, #059669);
  color: #fff;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 10px 22px rgba(16, 185, 129, 0.25);
  cursor: pointer;
  font-family: inherit;
}

.btn-soft.is-dropdown-toggle::after,
.btn-primary-green.is-dropdown-toggle::after {
  display: inline-block;
  margin-inline-start: 4px;
  vertical-align: 0.2em;
  content: '';
  border: 4px solid transparent;
  border-top-color: currentColor;
}

.orders-table-header {
  min-height: 64px;
  padding: 14px 18px;
  border-bottom: 1px solid #e5e7eb;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.orders-title-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.orders-tools {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.orders-search-wrap {
  position: relative;
}

.orders-search {
  width: 360px;
  max-width: 100%;
  height: 40px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #fff;
  padding: 0 12px 0 36px;
  font-size: 13px;
  outline: none;
  font-family: inherit;
}

.orders-search-wrap .bi-search {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
  pointer-events: none;
  font-size: 14px;
}

.orders-tool-btn {
  width: 40px;
  height: 40px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  font-size: 16px;
  color: #334155;
}

.premium-table.orders-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

.premium-table.orders-table thead th {
  height: 42px;
  font-size: 11px;
  font-weight: 800;
  color: #475569;
  background: #f8fafc;
  border-bottom: 1px solid #e5e7eb;
  padding: 0 14px;
  text-align: left;
  white-space: nowrap;
}

.premium-table.orders-table tbody td {
  height: 62px;
  font-size: 13px;
  font-weight: 500;
  color: #1e293b;
  border-bottom: 1px solid #eef2f7;
  padding: 0 14px;
  vertical-align: middle;
  white-space: nowrap;
}

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

.table-checkbox {
  width: 38px;
  text-align: center;
}

.orders-order-muted {
  font-size: 11px;
  color: #94a3b8;
  font-weight: 600;
}

.orders-customer-avatar {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: linear-gradient(135deg, #e2e8f0, #f1f5f9);
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 800;
  color: #475569;
  flex-shrink: 0;
}

.orders-actions-cell .orders-action-btn {
  width: 34px;
  height: 34px;
  border: 1px solid #eef2f7;
  border-radius: 10px;
  background: #fff;
  padding: 0;
  font-size: 14px;
  color: #334155;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.orders-actions-cell {
  display: flex;
  gap: 6px;
}

.table-footer.orders-table-footer {
  min-height: 58px;
  padding: 12px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  border-top: 1px solid #e5e7eb;
}

.pagination-wrap.orders-pagination-bootstrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.orders-pagination-bootstrap .pagination {
  margin: 0;
  gap: 8px;
  flex-wrap: wrap;
}

.orders-pagination-bootstrap .page-link {
  min-width: 36px;
  height: 36px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #fff;
  color: #334155;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  padding: 0 10px;
}

.orders-pagination-bootstrap .page-item.active .page-link {
  border-color: #10b981;
  background: #ecfdf5;
  color: #059669;
}

.orders-pagination-bootstrap .page-item.disabled .page-link {
  opacity: 0.45;
}

.orders-per-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: #64748b;
}

.orders-per-select {
  height: 36px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 0 10px;
  font-size: 13px;
  font-weight: 700;
}

.orders-bottom-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1.15fr;
  gap: 20px;
  margin-top: 20px;
  /* Match each card height to its content; default stretch duplicates the tallest card’s height under the donut cards */
  align-items: start;
}

@media (max-width: 1200px) {
  .orders-bottom-grid {
    grid-template-columns: 1fr;
  }
}

.orders-analytics-split {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  min-height: 0;
}

.orders-bottom-grid .premium-card > .card-inner {
  display: flex;
  flex-direction: column;
}

.orders-bottom-grid .premium-card .card-link {
  margin-top: 14px;
}

.orders-donut-side {
  position: relative;
  flex: 0 0 48%;
  min-width: 160px;
  max-width: 220px;
}

.chart-box {
  position: relative;
  width: 100%;
}

.chart-180 {
  height: 180px;
}

.orders-donut-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.orders-donut-center-num {
  font-size: 18px;
  font-weight: 800;
  color: #0f172a;
  line-height: 1;
}
.orders-donut-center-lab {
  font-size: 11px;
  font-weight: 700;
  color: #64748b;
  margin-top: 6px;
}

.orders-legend {
  flex: 1;
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 12px;
}

.orders-legend li {
  display: flex;
  align-items: center;
  gap: 8px;
}

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

.orders-legend-meta {
  margin-inline-start: auto;
  font-weight: 700;
  color: #475569;
}

.orders-activities {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.orders-activities li {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
}

.orders-act-icon {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: #f1f5f9;
  display: grid;
  place-items: center;
  font-size: 15px;
  color: #334155;
}
.orders-act-icon--green {
  background: #ecfdf5;
  color: #059669;
}
.orders-act-icon--blue {
  background: #eff6ff;
  color: #2563eb;
}
.orders-act-icon--purple {
  background: #f5f3ff;
  color: #7c3aed;
}

.orders-act-icon--slate {
  background: #f1f5f9;
  color: #64748b;
}

.orders-act-icon--red {
  background: #fef2f2;
  color: #dc2626;
}

.orders-act-msg {
  font-size: 13px;
  font-weight: 600;
  color: #1e293b;
  margin: 0;
}
.orders-act-meta {
  font-size: 11px;
  color: #94a3b8;
}
.orders-act-time {
  font-size: 11px;
  font-weight: 700;
  color: #94a3b8;
}

.card-link {
  color: #059669;
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
}

.badge-pill {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
}

.badge-green {
  background: #d1fae5;
  color: #047857;
}

.badge-blue {
  background: #dbeafe;
  color: #1d4ed8;
}

.badge-purple {
  background: #ede9fe;
  color: #6d28d9;
}

.badge-orange {
  background: #ffedd5;
  color: #c2410c;
}

.badge-red {
  background: #fee2e2;
  color: #b91c1c;
}

.badge-gray {
  background: #f1f5f9;
  color: #475569;
}

.badge-slate {
  background: #e2e8f0;
  color: #475569;
}

.orders-kpi-delta--neg {
  color: #ef4444;
}

.orders-filter-select {
  height: 44px;
  padding: 0 16px;
  border: 1px solid #e5e7eb;
  background: #fff;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 700;
  color: #0f172a;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.05);
  font-family: inherit;
  cursor: pointer;
}

.orders-date-range {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  padding: 0 14px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.05);
}

.orders-date-range input[type='date'] {
  border: none;
  background: transparent;
  font-size: 13px;
  font-weight: 700;
  color: #0f172a;
  font-family: inherit;
  max-width: 122px;
}

.orders-date-range-dash {
  color: #cbd5e1;
  font-weight: 700;
}

.orders-mgmt-select {
  min-width: 140px;
}

.orders-mgmt-table-select {
  min-width: 150px;
}

/* —— Inventory Management (HORECA) —— */
.inventory-filter-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.inventory-filter-left,
.inventory-filter-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.inventory-toggle--active,
.inventory-toggle.inventory-toggle--active {
  border-color: #10b981;
  box-shadow:
    0 0 0 1px rgba(16, 185, 129, 0.2),
    0 8px 20px rgba(16, 185, 129, 0.12);
  background: linear-gradient(to bottom, #ecfdf5, #ffffff);
}

.inventory-toggle-clear {
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.05);
}

.inventory-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: clamp(12px, 2vw, 18px);
  margin-bottom: 20px;
  align-items: stretch;
}

.inventory-kpi-grid > * {
  min-width: 0;
}

.inventory-kpi-card {
  min-height: 112px;
  height: auto;
  box-sizing: border-box;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 18px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
  padding: 16px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.inventory-kpi-card > div:last-child {
  flex: 1;
  min-width: 0;
}

.inventory-kpi-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 22px;
  flex-shrink: 0;
}

.inventory-kpi-icon--prod {
  background: #d1fae5;
  color: #059669;
}

.inventory-kpi-icon--layers {
  background: #dbeafe;
  color: #3b82f6;
}

.inventory-kpi-icon--low {
  background: #ffedd5;
  color: #f59e0b;
}

.inventory-kpi-icon--oos {
  background: #fee2e2;
  color: #ef4444;
}

.inventory-kpi-icon--val {
  background: #ede9fe;
  color: #8b5cf6;
}

.inventory-kpi-label {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: #64748b;
}

.inventory-kpi-val {
  margin: 0;
  font-size: clamp(1.125rem, 2.6vw, 25px);
  font-weight: 800;
  color: #0f172a;
  line-height: 1.2;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.inventory-kpi-card .orders-kpi-delta {
  overflow-wrap: anywhere;
  line-height: 1.35;
}

.inventory-table-header {
  min-height: 64px;
  padding: 14px 18px;
  border-bottom: 1px solid #e5e7eb;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.inventory-title-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}

.inv-table-title-pill {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 16px;
  border-radius: 10px;
  background: linear-gradient(180deg, #eff6ff 0%, #dbeafe 100%);
  border: 1px solid #bfdbfe;
  font-size: 14px;
  font-weight: 800;
  color: #2563eb;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.inv-table-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 28px;
  padding: 0 10px;
  border-radius: 8px;
  background: linear-gradient(180deg, #1e3a8a 0%, #172554 100%);
  font-size: 12px;
  font-weight: 800;
  color: #fff;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.12);
}

.inventory-tools {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.inventory-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.inventory-search-wrap .bi-search {
  position: absolute;
  left: 12px;
  color: #94a3b8;
  pointer-events: none;
  font-size: 14px;
}

.inventory-search {
  width: 360px;
  max-width: 100%;
  height: 40px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #fff;
  padding: 0 14px 0 38px;
  font-size: 13px;
  outline: none;
  font-weight: 600;
  color: #0f172a;
}

.inventory-tool-btn {
  width: 40px;
  height: 40px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #fff;
  display: grid;
  place-items: center;
  color: #475569;
  cursor: pointer;
}

.inventory-tool-btn.dropdown-toggle::after {
  display: none;
}

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

.inventory-table .table-checkbox {
  width: 44px;
  text-align: center;
}

.inventory-management-page .premium-table.inventory-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

.inventory-management-page .premium-table.inventory-table thead th {
  height: 44px;
  font-size: 11px;
  font-weight: 800;
  color: #475569;
  background: #f8fafc;
  border-bottom: 1px solid #e5e7eb;
  padding: 0 14px;
  text-align: left;
  white-space: nowrap;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.inventory-management-page .premium-table.inventory-table thead th.table-checkbox {
  text-transform: none;
  letter-spacing: 0;
  font-size: 14px;
}

.inventory-management-page .premium-table.inventory-table tbody td {
  height: 64px;
  font-size: 13px;
  font-weight: 500;
  color: #1e293b;
  border-bottom: 1px solid #eef2f7;
  padding: 0 14px;
  vertical-align: middle;
  white-space: nowrap;
}

.inventory-product-cell {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  max-width: min(340px, 36vw);
}

.inventory-prod-avatar {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  background: linear-gradient(145deg, #f1f5f9 0%, #e2e8f0 100%);
  border: 1px solid #e5e7eb;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 800;
  color: #64748b;
  flex-shrink: 0;
}

.inventory-prod-name {
  font-size: 14px;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.25;
  white-space: normal;
}

.inventory-prod-meta {
  margin-top: 3px;
  font-size: 11px;
  font-weight: 600;
  color: #94a3b8;
  line-height: 1.2;
  white-space: normal;
}

.inv-cell-sku {
  font-size: 13px;
  font-weight: 500;
  color: #475569;
  letter-spacing: 0.01em;
}

.inventory-actions-cell {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  align-items: center;
}

.inventory-actions-cell .orders-action-btn {
  width: 34px;
  height: 34px;
  border: 1px solid #eef2f7;
  border-radius: 10px;
  background: #fff;
  padding: 0;
  font-size: 14px;
  color: #334155;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.inventory-pagination-nav .pagination {
  margin: 0;
  gap: 8px;
  flex-wrap: wrap;
}

.inventory-pagination-nav .page-link {
  min-width: 36px;
  height: 36px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #fff;
  color: #334155;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  padding: 0 10px;
}

.inventory-pagination-nav .page-item.active .page-link {
  border-color: #10b981;
  background: #ecfdf5;
  color: #059669;
}

.inventory-pagination-nav .page-item.disabled .page-link {
  opacity: 0.45;
}

.table-footer.orders-table-footer .horeca-muted {
  color: #64748b;
  font-weight: 600;
}

.inv-avail-ok {
  color: #047857 !important;
}

.inv-avail-warn {
  color: #c2410c !important;
}

.inv-avail-danger {
  color: #b91c1c !important;
}

.inventory-bottom-grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr 1fr 1.15fr;
  gap: 20px;
  margin-top: 20px;
  align-items: start;
}

@media (max-width: 1400px) {
  .inventory-bottom-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 900px) {
  .inventory-bottom-grid {
    grid-template-columns: 1fr;
  }
}

.inventory-bottom-grid > .premium-card > .card-inner {
  display: flex;
  flex-direction: column;
}

.inventory-bottom-grid .card-link {
  margin-top: 14px;
}

.orders-donut-center-num-sm {
  font-size: 17px;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.05;
}

.inventory-low-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}

.inv-view-all-link {
  font-size: 13px;
  font-weight: 800;
  color: #059669;
  text-decoration: none;
  white-space: nowrap;
}

.inv-view-all-link:hover {
  text-decoration: underline;
}

.inventory-low-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.inventory-low-row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.inventory-low-thumb {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  object-fit: cover;
  border: 1px solid #eef2f7;
}

.inventory-low-thumb-ph {
  background: #f1f5f9;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 800;
}

.inventory-low-title {
  font-weight: 800;
  color: #0f172a;
  font-size: 14px;
}

.inventory-low-qty {
  font-weight: 800;
  color: #c2410c;
  white-space: nowrap;
}

.inventory-move-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
}

.chart-170 {
  height: 170px;
}

.inventory-move-mini-legend {
  display: flex;
  gap: 16px;
  font-size: 12px;
  font-weight: 700;
  color: #475569;
  margin: 12px 0 0;
}

.inv-leg-in {
  color: #10b981;
}

.inv-leg-out {
  color: #ef4444;
}

/* =====================================================================
   Invoice Management page (reference-aligned)
   ===================================================================== */

.invoices-management-page {
  padding-bottom: 12px;
}

.invoices-filter-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.invoices-filter-left,
.invoices-filter-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.invoices-kpi-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 18px;
  margin-bottom: 20px;
}

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

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

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

.invoices-kpi-card {
  height: 112px;
  background: var(--card-bg);
  border: 1px solid #e5e7eb;
  border-radius: 18px;
  box-shadow: var(--shadow-card);
  padding: 18px;
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}

.invoices-kpi-icon {
  width: 52px;
  height: 52px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}

.invoices-kpi-icon--doc,
.invoices-kpi-icon--check {
  background: #d1fae5;
  color: #059669;
}

.invoices-kpi-icon--clock {
  background: #ffedd5;
  color: #f59e0b;
}

.invoices-kpi-icon--alert {
  background: #fee2e2;
  color: #ef4444;
}

.invoices-kpi-icon--currency {
  background: #ede9fe;
  color: #8b5cf6;
}

.invoices-kpi-icon--rupee {
  background: #ede9fe;
  color: #8b5cf6;
}

.invoices-kpi-label {
  font-size: 13px;
  font-weight: 700;
  color: #64748b;
  margin: 0;
}

.invoices-kpi-val {
  margin: 2px 0 0;
  font-size: 25px;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.05;
}

.invoices-kpi-delta {
  margin: 6px 0 0;
  font-size: 12px;
  font-weight: 700;
  color: #059669;
}

.invoices-kpi-delta--neg {
  color: #ef4444;
}

.invoices-table-header {
  min-height: 64px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.invoices-title-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.invoices-tools {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.invoices-search-wrap {
  position: relative;
}

.invoices-search-wrap .bi-search {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
  pointer-events: none;
  font-size: 14px;
}

.invoices-search {
  width: 360px;
  max-width: 100%;
  height: 40px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #fff;
  padding: 0 12px 0 38px;
  font-size: 13px;
  outline: none;
  font-family: inherit;
}

.invoices-tool-btn {
  width: 40px;
  height: 40px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  font-size: 16px;
  color: #334155;
}

.invoices-tool-btn--split {
  gap: 0;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  line-height: 1;
}

.invoices-tool-btn--split .bi-chevron-down {
  font-size: 11px;
  margin-top: -2px;
}

.premium-table.invoices-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

.premium-table.invoices-table thead th {
  height: 42px;
  font-size: 11px;
  font-weight: 800;
  color: #475569;
  background: #f8fafc;
  border-bottom: 1px solid #e5e7eb;
  padding: 0 14px;
  text-align: left;
  white-space: nowrap;
}

.premium-table.invoices-table tbody td {
  height: 62px;
  font-size: 13px;
  font-weight: 500;
  color: #1e293b;
  border-bottom: 1px solid #eef2f7;
  padding: 0 14px;
  vertical-align: middle;
  white-space: nowrap;
}

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

.invoices-inv-cell {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.invoices-inv-icon-square {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: #ecfdf5;
  color: #059669;
  display: grid;
  place-items: center;
  font-size: 16px;
  flex-shrink: 0;
}

.invoices-customer-avatar {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: linear-gradient(135deg, #e2e8f0, #f1f5f9);
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 800;
  color: #475569;
  flex-shrink: 0;
}

.invoices-customer-avatar--img {
  padding: 0;
  border: none;
  object-fit: cover;
}

.invoices-creator-avatar {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: #eef2ff;
  color: #4338ca;
  font-size: 10px;
  font-weight: 800;
  display: grid;
  place-items: center;
}

.invoices-actions-cell {
  display: inline-flex;
  gap: 6px;
}

.invoices-action-btn {
  width: 34px;
  height: 34px;
  border: 1px solid #eef2f7;
  border-radius: 10px;
  background: #fff;
  padding: 0;
  font-size: 14px;
  color: #334155;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  text-decoration: none;
}

.invoices-order-link {
  color: #059669 !important;
  text-decoration: none;
}

.invoices-order-link:hover {
  text-decoration: underline;
}

.invoices-sub-muted {
  font-size: 11px;
  color: #94a3b8;
  font-weight: 600;
}

.invoices-due-hint {
  font-size: 11px;
  font-weight: 700;
}

.invoices-due-hint--safe {
  color: #059669;
}

.invoices-due-hint--warn {
  color: #f59e0b;
}

.invoices-due-hint--danger {
  color: #ef4444;
}

.invoices-due-hint--muted {
  color: #94a3b8;
}

.table-footer.invoices-table-footer {
  min-height: 58px;
  padding: 12px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  border-top: 1px solid #e5e7eb;
}

.invoices-bottom-grid {
  display: grid;
  grid-template-columns: 1fr 1.08fr 1fr 1.15fr;
  gap: 20px;
  margin-top: 20px;
  align-items: start;
}

@media (max-width: 1200px) {
  .invoices-bottom-grid {
    grid-template-columns: 1fr;
  }
}

.invoices-analytics-split {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.invoices-donut-side {
  position: relative;
  flex: 0 0 48%;
  min-width: 160px;
  max-width: 220px;
}

.invoices-donut-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.invoices-donut-center-num {
  font-size: 17px;
  font-weight: 800;
  color: #0f172a;
  line-height: 1;
}

.invoices-donut-center-lab {
  margin-top: 6px;
  font-size: 11px;
  font-weight: 700;
  color: #64748b;
}

.invoices-legend {
  flex: 1;
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 12px;
}

.invoices-legend li {
  display: flex;
  align-items: center;
  gap: 8px;
}

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

.invoices-legend-meta {
  margin-inline-start: auto;
  font-weight: 700;
  color: #475569;
}

.invoices-overdue-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.invoices-overdue-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.invoices-mini-avatar {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: #f1f5f9;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 12px;
  color: #475569;
  overflow: hidden;
}

.invoices-mini-link {
  color: #059669;
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
}

.show-timeline strong {
  color: #0f172a;
}

.invoices-inv-label {
  font-size: 11px;
  letter-spacing: 0.06em;
  font-weight: 800;
  text-transform: uppercase;
  color: #64748b;
}

/* =====================================================================
   Premium admin forms (global — `.horeca-form-control` was undefined)
   ===================================================================== */

:is(.admin-main, .modal) .form-label,
:is(.admin-main, .modal) label.form-label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: #475569;
  margin-bottom: 8px;
  letter-spacing: 0.01em;
}

:is(.admin-main, .modal) .form-label.fw-semibold {
  font-weight: 800;
  color: #334155;
}

:is(.admin-main, .modal) .horeca-form-control,
:is(.admin-main, .modal) select.horeca-form-control,
:is(.admin-main, .modal) textarea.horeca-form-control,
:is(.admin-main, .modal) input.horeca-form-control:not([type='checkbox']):not([type='radio']),
:is(.admin-main, .modal) .form-control:not(.form-check-input):not(.horeca-no-premium):not(.form-control-premium),
:is(.admin-main, .modal) .form-select:not(.horeca-no-premium):not(.form-select-premium) {
  width: 100%;
  max-width: 100%;
  min-height: 44px;
  padding: 10px 14px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--text-dark);
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.03);
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

:is(.admin-main, .modal) textarea.horeca-form-control,
:is(.admin-main, .modal) textarea.form-control:not(.horeca-no-premium):not(.form-textarea-premium) {
  min-height: 112px;
  resize: vertical;
}

:is(.admin-main, .modal) select.horeca-form-control,
:is(.admin-main, .modal) select.form-select:not(.horeca-no-premium):not(.form-select-premium) {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='%2364748b' viewBox='0 0 16 16'%3E%3Cpath d='M8 11 3 6h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 40px;
}

:is(.admin-main, .modal) input[type='file'].horeca-form-control,
:is(.admin-main, .modal) input[type='file'].form-control:not(.horeca-no-premium) {
  min-height: 48px;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 600;
  color: #475569;
}

:is(.admin-main, .modal) .horeca-form-control::placeholder,
:is(.admin-main, .modal) .form-control::placeholder {
  color: #94a3b8;
  font-weight: 500;
}

:is(.admin-main, .modal) .horeca-form-control:hover:not(:disabled):not(:focus):not(.is-invalid),
:is(.admin-main, .modal) .form-control:hover:not(:disabled):not(:focus):not(.is-invalid):not(.form-control-premium),
:is(.admin-main, .modal) .form-select:hover:not(:disabled):not(:focus):not(.is-invalid):not(.form-select-premium) {
  border-color: #cbd5e1;
}

:is(.admin-main, .modal) .horeca-form-control:focus,
:is(.admin-main, .modal) .form-control:focus:not(.horeca-no-premium):not(.form-control-premium),
:is(.admin-main, .modal) .form-select:focus:not(.horeca-no-premium):not(.form-select-premium) {
  outline: none;
  border-color: rgba(16, 185, 129, 0.65);
  box-shadow:
    0 0 0 3px rgba(16, 185, 129, 0.18),
    0 4px 14px rgba(15, 23, 42, 0.06);
}

:is(.admin-main, .modal) .horeca-form-control:disabled,
:is(.admin-main, .modal) .form-control:disabled:not(.form-control-premium),
:is(.admin-main, .modal) .form-select:disabled:not(.form-select-premium) {
  background: #f8fafc;
  color: #94a3b8;
  cursor: not-allowed;
  opacity: 0.92;
}

:is(.admin-main, .modal) .horeca-form-control.is-invalid,
:is(.admin-main, .modal) .form-control.is-invalid:not(.form-control-premium),
:is(.admin-main, .modal) .form-select.is-invalid:not(.form-select-premium) {
  border-color: #f87171;
  box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.15);
}

:is(.admin-main, .modal) .invalid-feedback {
  font-size: 12px;
  font-weight: 600;
  margin-top: 6px;
}

/* Checkboxes / switches inside forms */
:is(.admin-main, .modal) .form-check:not(.form-switch) .form-check-input {
  width: 18px;
  height: 18px;
  border-radius: 6px;
  border: 1px solid #cbd5e1;
  margin-top: 0.15em;
}

:is(.admin-main, .modal) .form-check:not(.form-switch) .form-check-input:checked {
  background-color: var(--primary);
  border-color: var(--primary-dark);
}

:is(.admin-main, .modal) .form-switch .form-check-input {
  width: 2.6rem;
  height: 1.35rem;
  border-radius: 999px;
  border: 1px solid #cbd5e1;
}

:is(.admin-main, .modal) .form-switch .form-check-input:checked {
  background-color: var(--primary);
  border-color: var(--primary-dark);
}

:is(.admin-main, .modal) .form-check-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-main);
  padding-left: 4px;
}

/* Compact panel used on Settings etc. */
.horeca-slot-card {
  background: linear-gradient(180deg, #ffffff 0%, #fafbfc 100%);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 22px;
  box-shadow: var(--shadow-card);
}

/* Primary actions on legacy forms — closer to btn-primary-green */
.horeca-btn-primary {
  box-shadow: 0 8px 18px rgba(16, 185, 129, 0.22);
  font-weight: 700;
  cursor: pointer;
  transition:
    transform 0.08s ease,
    box-shadow 0.15s ease;
}

.horeca-btn-primary:hover:not(:disabled) {
  filter: brightness(1.03);
  box-shadow: 0 10px 22px rgba(16, 185, 129, 0.28);
}

.horeca-btn-primary:active:not(:disabled) {
  transform: translateY(1px);
}

.horeca-btn-secondary:hover {
  border-color: #cbd5e1;
  box-shadow: var(--shadow-soft);
}

/* Modal polish (Bootstrap moves dialogs under body — fields styled via :is(..., .modal) above) */
.modal-content .modal-header.border-0 {
  padding-bottom: 8px;
}

.modal-content .modal-title {
  font-size: 17px;
  font-weight: 800;
  color: var(--text-dark);
}

.modal-content .modal-body .form-label.small {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #64748b;
}

.modal-content .modal-body small.text-muted {
  font-size: 12px;
  font-weight: 500;
  color: #94a3b8 !important;
}

/* ============================================================
   Premium admin form design system (.form-page + controls)
   ============================================================ */

.form-page {
  max-width: 1280px;
  margin: 0 auto;
}

.form-page .form-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 8px;
}

.form-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 20px;
}

.form-header-title {
  font-size: 24px;
  font-weight: 800;
  color: #0f172a;
  margin: 0;
}

.form-header-subtitle {
  font-size: 14px;
  color: #64748b;
  margin-top: 4px;
}

.form-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.form-layout-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 20px;
  align-items: start;
}

.form-main-column {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.form-side-column {
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: sticky;
  top: 98px;
}

.form-card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 18px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
  overflow: hidden;
}

.form-card-header {
  padding: 18px 22px;
  border-bottom: 1px solid #eef2f7;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.form-card-title {
  font-size: 16px;
  font-weight: 800;
  color: #0f172a;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.form-card-subtitle {
  font-size: 13px;
  color: #64748b;
  margin-top: 4px;
}

.form-card-body {
  padding: 22px;
}

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

.form-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.form-page .form-group {
  margin-bottom: 18px;
}

.form-page .form-group:last-child {
  margin-bottom: 0;
}

.required-star {
  color: #ef4444;
}

.form-help {
  font-size: 12px;
  color: #64748b;
  margin-top: 6px;
}

.form-control-premium,
.form-select-premium,
.form-textarea-premium {
  width: 100%;
  border: 1px solid #e5e7eb;
  background: #ffffff;
  color: #0f172a;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 500;
  outline: none;
  transition: all 0.18s ease;
  font-family: inherit;
}

select.form-select-premium {
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='%2364748b' viewBox='0 0 16 16'%3E%3Cpath d='M8 11 3 6h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}

select.form-select-premium::-ms-expand {
  display: none;
}

.form-control-premium,
.form-select-premium {
  height: 46px;
  padding: 0 14px;
}

.form-textarea-premium {
  min-height: 110px;
  padding: 14px;
  resize: vertical;
}

.form-control-premium::placeholder,
.form-textarea-premium::placeholder {
  color: #94a3b8;
}

.form-control-premium:focus,
.form-select-premium:focus,
.form-textarea-premium:focus {
  border-color: #10b981;
  box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.12);
}

.form-control-premium.is-invalid,
.form-select-premium.is-invalid,
.form-textarea-premium.is-invalid {
  border-color: #ef4444;
}

.form-error {
  margin-top: 6px;
  font-size: 12px;
  font-weight: 600;
  color: #ef4444;
}

.input-with-icon {
  position: relative;
}

.input-with-icon .input-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
  width: 18px;
  height: 18px;
}

.input-with-icon .form-control-premium,
.input-with-icon .form-select-premium {
  padding-left: 42px;
}

.form-page .btn-primary-green {
  height: 46px;
  padding: 0 20px;
  justify-content: center;
  text-decoration: none;
}

.form-page .btn-primary-green:hover {
  color: #ffffff;
}

.form-page .btn-soft {
  justify-content: center;
  text-decoration: none;
}

.form-page .btn-soft:hover {
  background: #f8fafc;
  color: #0f172a;
}

.btn-danger-soft {
  height: 44px;
  padding: 0 16px;
  border: 1px solid #fecaca;
  background: #fef2f2;
  border-radius: 12px;
  color: #b91c1c;
  font-size: 14px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  font-family: inherit;
}

.form-footer-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding: 18px 22px;
  border-top: 1px solid #eef2f7;
  background: #f8fafc;
}

.summary-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  font-size: 14px;
  border-bottom: 1px solid #eef2f7;
}

.summary-row:last-child {
  border-bottom: none;
}

.summary-label {
  color: #64748b;
  font-weight: 600;
}

.summary-value {
  color: #0f172a;
  font-weight: 800;
}

.summary-total {
  font-size: 20px;
  font-weight: 900;
  color: #059669;
}

.premium-divider {
  height: 1px;
  background: #eef2f7;
  margin: 18px 0;
}

.line-items-wrap {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.line-item-row {
  display: grid;
  grid-template-columns: minmax(260px, 1.5fr) 140px 110px 140px 44px;
  gap: 12px;
  align-items: end;
  padding: 14px;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  background: #f8fafc;
}

.line-item-product {
  display: flex;
  flex-direction: column;
}

.line-total-box {
  height: 46px;
  border-radius: 12px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  display: flex;
  align-items: center;
  padding: 0 14px;
  font-weight: 800;
  color: #0f172a;
}

.line-unit-price.form-control-premium {
  background: #f1f5f9;
  color: #475569;
}

.remove-line-btn {
  width: 44px;
  height: 44px;
  border: 1px solid #fecaca;
  background: #fef2f2;
  color: #b91c1c;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  font-family: inherit;
}

.upload-box {
  border: 2px dashed #d1d5db;
  border-radius: 16px;
  padding: 24px;
  text-align: center;
  background: #f8fafc;
  position: relative;
  cursor: pointer;
  transition:
    border-color 0.18s ease,
    background 0.18s ease;
}

.upload-box:hover {
  border-color: #10b981;
  background: #ecfdf5;
}

.upload-box input[type='file'] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.upload-box-inner {
  pointer-events: none;
}

.customer-preview-empty {
  font-size: 14px;
  color: #64748b;
  font-weight: 600;
  text-align: center;
  padding: 18px 8px;
}

.customer-preview-grid {
  display: grid;
  gap: 10px;
}

.customer-preview-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 13px;
}

.customer-preview-row dt {
  margin: 0;
  color: #64748b;
  font-weight: 700;
}

.customer-preview-row dd {
  margin: 0;
  font-weight: 800;
  color: #0f172a;
  text-align: right;
}

.form-switch-premium {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #ffffff;
}

.form-switch-premium .form-check-input {
  width: 2.75rem;
  height: 1.35rem;
  cursor: pointer;
}

.alert-premium {
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 18px;
  font-size: 14px;
  font-weight: 700;
  border: 1px solid;
}

.alert-success-premium {
  background: #ecfdf5;
  color: #047857;
  border-color: #d1fae5;
}

.alert-error-premium {
  background: #fef2f2;
  color: #b91c1c;
  border-color: #fecaca;
}

.quick-tip-list {
  margin: 0;
  padding-left: 18px;
  font-size: 13px;
  color: #475569;
  font-weight: 600;
  line-height: 1.55;
}

.quick-tip-list li + li {
  margin-top: 8px;
}

@media (max-width: 991px) {
  .form-layout-grid {
    grid-template-columns: 1fr;
  }

  .form-side-column {
    position: static;
  }
}

@media (max-width: 768px) {
  .form-grid-2,
  .form-grid-3 {
    grid-template-columns: 1fr;
  }

  .form-header-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .form-actions {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .line-item-row {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .remove-line-btn {
    width: 100%;
    height: 46px;
  }
}

.modal-body .form-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 8px;
}

/* Premium forms inside admin shell — beats Bootstrap reboot / stray .form-control rules */
.admin-main .form-page .form-card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 18px;
  box-shadow: var(--shadow-card);
}

.admin-main .form-page select.form-select-premium {
  background-color: #ffffff;
}

.admin-main .form-page .line-item-row {
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  background: #f8fafc;
}

/* ========= Deliveries management (reference-aligned) ========= */
.admin-deliveries-body .admin-search__input {
  border-radius: 999px;
}

.horeca-topbar .btn-primary-green {
  height: 46px;
  min-height: 46px;
  padding: 0 20px;
}

.deliveries-management-page {
  max-width: 100%;
}

.deliveries-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: clamp(12px, 2vw, 20px);
  margin-bottom: 20px;
  align-items: stretch;
}

.deliveries-kpi-grid > * {
  min-width: 0;
}

.deliveries-kpi-card {
  position: relative;
  min-height: 126px;
  height: auto;
  box-sizing: border-box;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 18px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
  padding: 18px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 16px;
  overflow: hidden;
}

.deliveries-kpi-card__main {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  flex: 1 1 200px;
}

.deliveries-kpi-card__icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}

.deliveries-kpi-card__icon--green {
  background: #d1fae5;
  color: #059669;
}

.deliveries-kpi-card__icon--blue {
  background: #dbeafe;
  color: #3b82f6;
}

.deliveries-kpi-card__icon--purple {
  background: #ede9fe;
  color: #8b5cf6;
}

.deliveries-kpi-card__icon--red {
  background: #fee2e2;
  color: #ef4444;
}

.deliveries-kpi-card__copy {
  min-width: 0;
}

.deliveries-kpi-card__label {
  font-size: 13px;
  font-weight: 800;
  color: #334155;
  line-height: 1.2;
}

.deliveries-kpi-card__value {
  margin-top: 4px;
  font-size: clamp(1.25rem, 3.2vw, 30px);
  font-weight: 900;
  color: #0f172a;
  line-height: 1.1;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.deliveries-kpi-card__delta {
  margin-top: 6px;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.deliveries-kpi-card__delta--up {
  color: #059669;
}

.deliveries-kpi-card__delta--down {
  color: #dc2626;
}

.deliveries-kpi-card__delta--exceptions {
  color: #ef4444;
}

.deliveries-kpi-card__meta {
  margin-top: 6px;
  font-size: 13px;
  font-weight: 800;
  color: #64748b;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.deliveries-kpi-card__meta--purple {
  color: #7c3aed;
}

.deliveries-kpi-spark {
  flex-shrink: 0;
  width: 110px;
  height: 40px;
  opacity: 0.95;
  align-self: center;
  margin-left: auto;
}

.deliveries-main-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}

.deliveries-bottom-grid {
  display: grid;
  grid-template-columns: minmax(0, 2.1fr) 390px;
  gap: 20px;
  align-items: stretch;
}

.deliveries-card.deliveries-card--gauge .deliveries-card-inner,
.deliveries-card.deliveries-card--drivers .deliveries-card-inner {
  padding: 22px;
}

.deliveries-card-header {
  margin-bottom: 16px;
}

.deliveries-management-page .premium-card.deliveries-card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 18px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
  overflow: hidden;
}

.deliveries-management-page .card-title {
  font-size: 16px;
  font-weight: 900;
  color: #0f172a;
  margin: 0;
}

.deliveries-management-page .card-link {
  height: 34px;
  padding: 0 12px;
  border: 1px solid #e5e7eb;
  background: #ffffff;
  border-radius: 10px;
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 0;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.05);
}

.deliveries-management-page .icon-btn {
  width: 36px;
  height: 36px;
  border: 1px solid #e5e7eb;
  background: #ffffff;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #64748b;
  cursor: pointer;
  padding: 0;
}

.deliveries-management-page .icon-btn--compact {
  width: 32px;
  height: 32px;
}

.deliveries-management-page .icon-btn:hover {
  background: #f8fafc;
  color: #0f172a;
}

.deliveries-management-page .badge-pill {
  height: 24px;
  padding: 0 10px;
}

.delivery-gauge-content {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 28px;
  align-items: center;
}

.chart-box.delivery-gauge-chart {
  position: relative;
  width: 230px;
  height: 230px;
  flex-shrink: 0;
}

.chart-box.delivery-gauge-chart .donut-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  text-align: center;
}

.chart-box.delivery-gauge-chart canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

.donut-center--deliveries strong {
  font-size: 34px;
  font-weight: 900;
  color: #0f172a;
  line-height: 1;
}

.donut-center--deliveries span {
  margin-top: 8px;
  font-size: 14px;
  font-weight: 700;
  color: #64748b;
}

.delivery-gauge-legend-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  font-weight: 800;
  margin-bottom: 18px;
  color: #0f172a;
}

.delivery-gauge-legend-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.delivery-gauge-callout {
  margin-top: 8px;
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  padding: 14px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.delivery-gauge-callout__icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: #d1fae5;
  color: #059669;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}

.delivery-gauge-callout__title {
  font-weight: 900;
  font-size: 14px;
  color: #0f172a;
}

.delivery-gauge-callout__sub {
  font-size: 13px;
  font-weight: 700;
  color: #64748b;
  margin-top: 2px;
}

.deliveries-management-page table.premium-table.deliveries-table {
  width: 100%;
  border-collapse: collapse;
}

.deliveries-table-scroll {
  overflow-x: auto;
}

.deliveries-management-page table.premium-table.deliveries-table thead th {
  height: 42px;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #64748b;
  background: #ffffff;
  border-bottom: 1px solid #e5e7eb;
  vertical-align: middle;
}

.deliveries-management-page table.premium-table.deliveries-table tbody td {
  height: 48px;
  font-size: 13px;
  border-bottom: 1px solid #eef2f7;
  vertical-align: middle;
}

.deliveries-driver-cell {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.deliveries-avatar {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 900;
  color: #1e293b;
  background: linear-gradient(135deg, #e0f2fe, #dbeafe);
  flex-shrink: 0;
}

.deliveries-avatar--sm {
  width: 28px;
  height: 28px;
  font-size: 10px;
}

.deliveries-driver-name {
  font-weight: 800;
  color: #0f172a;
}

.deliveries-fleet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 64px;
  padding: 18px 20px;
  border-bottom: 1px solid #e5e7eb;
}

.deliveries-fleet-head-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.deliveries-fleet-title {
  margin: 0;
  font-size: 16px;
  font-weight: 900;
  color: #0f172a;
}

.deliveries-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 800;
  color: #059669;
  padding: 4px 10px;
  border-radius: 999px;
  background: #ecfdf5;
  border: 1px solid #bbf7d0;
}

.deliveries-live-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #10b981;
  box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.18);
}

.deliveries-live-dot--row {
  box-shadow: none;
  margin-right: 8px;
  flex-shrink: 0;
}

.deliveries-order-cell {
  display: inline-flex;
  align-items: center;
  font-weight: 900;
  color: #0f172a;
}

.deliveries-fleet-tools {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.deliveries-table-scroll--fleet {
  padding: 0 20px 16px;
}

.deliveries-col-actions {
  width: 72px;
  text-align: right;
}

.deliveries-pagination {
  padding: 12px 20px 18px;
  border-top: 1px solid #eef2f7;
}

.deliveries-pagination .pagination {
  margin-bottom: 0;
  gap: 6px;
}

.deliveries-pagination .page-link {
  border-radius: 10px;
  border: 1px solid #e5e7eb;
  color: #475569;
  font-weight: 700;
  font-size: 13px;
}

.deliveries-card-inner--alerts {
  padding: 22px;
}

.deliveries-alerts-title-wrap {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.deliveries-alert-count {
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border-radius: 999px;
  background: #fee2e2;
  color: #b91c1c;
  font-size: 11px;
  font-weight: 900;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.dispatch-alerts-list {
  margin-top: 4px;
}

.dispatch-alert-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border-radius: 14px;
  margin-bottom: 10px;
  border: 1px solid transparent;
  cursor: default;
}

.dispatch-alert-row__icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}

.dispatch-alert-row__body {
  flex: 1;
  min-width: 0;
}

.dispatch-alert-row__title {
  font-size: 14px;
  font-weight: 900;
  color: #0f172a;
}

.dispatch-alert-row__sub {
  font-size: 12px;
  font-weight: 700;
  color: #64748b;
  margin-top: 2px;
}

.dispatch-alert-row__pill {
  height: 26px;
  min-width: 36px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.dispatch-alert-row__chev {
  color: #94a3b8;
  font-size: 14px;
}

.dispatch-alert-row--red {
  background: #fef2f2;
  border-color: #fecaca;
}

.dispatch-alert-row--red .dispatch-alert-row__icon {
  background: #fee2e2;
  color: #dc2626;
}

.dispatch-alert-row--red .dispatch-alert-row__pill {
  background: #fee2e2;
  color: #991b1b;
}

.dispatch-alert-row--orange {
  background: #fff7ed;
  border-color: #fed7aa;
}

.dispatch-alert-row--orange .dispatch-alert-row__icon {
  background: #ffedd5;
  color: #ea580c;
}

.dispatch-alert-row--orange .dispatch-alert-row__pill {
  background: #ffedd5;
  color: #9a3412;
}

.dispatch-alert-row--amber {
  background: #fffbeb;
  border-color: #fde68a;
}

.dispatch-alert-row--amber .dispatch-alert-row__icon {
  background: #fef3c7;
  color: #d97706;
}

.dispatch-alert-row--amber .dispatch-alert-row__pill {
  background: #fef3c7;
  color: #92400e;
}

.dispatch-alert-row--blue {
  background: #eff6ff;
  border-color: #bfdbfe;
}

.dispatch-alert-row--blue .dispatch-alert-row__icon {
  background: #dbeafe;
  color: #2563eb;
}

.dispatch-alert-row--blue .dispatch-alert-row__pill {
  background: #dbeafe;
  color: #1e40af;
}

.dispatch-alert-row--green {
  background: #ecfdf5;
  border-color: #bbf7d0;
}

.dispatch-alert-row--green .dispatch-alert-row__icon {
  background: #d1fae5;
  color: #059669;
}

.dispatch-alert-row--green .dispatch-alert-row__pill {
  background: #d1fae5;
  color: #065f46;
}

.dispatch-alerts-footer {
  margin-top: 6px;
  padding-top: 14px;
  border-top: 1px solid #eef2f7;
  font-size: 12px;
  font-weight: 700;
  color: #64748b;
  display: flex;
  align-items: center;
  gap: 8px;
}

.deliveries-card--gauge .deliveries-card-inner {
  min-height: 300px;
}

.deliveries-card--drivers .deliveries-card-inner {
  min-height: 300px;
}

@media (max-width: 1400px) {
  .deliveries-bottom-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1100px) {
  .deliveries-main-grid {
    grid-template-columns: 1fr;
  }

  .delivery-gauge-content {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }

  .delivery-gauge-side {
    width: min(100%, 420px);
  }

  .delivery-gauge-legend-row {
    justify-content: space-between;
  }
}

@media (max-width: 640px) {
  .deliveries-kpi-spark {
    display: none;
  }

  .deliveries-kpi-card {
    padding: 16px;
  }

  .deliveries-fleet-tools {
    flex-wrap: wrap;
    justify-content: flex-end;
  }
}