/* ============================================================
   Dashboard – layout, sidebar, content panel
   Uses CSS logical properties for full RTL/LTR support.
   ============================================================ */

/* ── Variables ──────────────────────────────────────────────
   All colour tokens come from variables.css which is loaded
   first. Only sidebar-specific sizing values live here.      */
:root {
  --db-sidebar-w:          270px;
  --db-sidebar-w-collapsed: 72px;
  --db-sidebar-bg:         var(--clr-white);
  --db-sidebar-border:     var(--clr-border-mid);
  --db-nav-item-h:         48px;
  --db-nav-icon-size:      20px;
  --db-collapse-speed:     0.28s;
  --db-active-bar-w:       3px;
}

/* ── Section wrapper ─────────────────────────────────────── */

.dashboard-section {
  padding-top: 40px;
  padding-bottom: 80px;
  background: var(--clr-bg-soft);
  min-height: 100vh;
}

.page-title {
  font-size: 28px;
  font-weight: 700;
  color: var(--clr-text-dark);
  margin-bottom: 24px;
}

/* ── Flex layout ─────────────────────────────────────────── */

.flex-content {
  display: flex;
  gap: 24px;
  align-items: flex-start;
}

.content-right {
  flex: 1;
  min-width: 0; /* prevent overflow in flex child */
}

/* ── Sidebar shell ───────────────────────────────────────── */

.side_nav {
  flex: 0 0 var(--db-sidebar-w);
  width: var(--db-sidebar-w);
  transition: flex var(--db-collapse-speed) ease,
              width var(--db-collapse-speed) ease;
  position: relative;
}

.dashboard-sidebar {
  background: var(--db-sidebar-bg);
  border: 1px solid var(--db-sidebar-border);
  border-radius: var(--radius-lg);
  padding: 8px 0 16px;
  overflow: hidden;
  transition: width var(--db-collapse-speed) ease,
              border-radius var(--db-collapse-speed) ease;
  box-shadow: var(--shadow-blue-sm);
  position: relative;
  width: 100%;
}

/* ── Customer user header ────────────────────────────────── */

.sidebar-user-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px 14px;
  border-block-end: 1px solid var(--clr-border-mid);
  margin-block-end: 8px;
  overflow: hidden;
}

.sidebar-avatar {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--clr-blue);
  color: var(--clr-white);
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0.03em;
  flex-shrink: 0;
}

.sidebar-user-info {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: opacity var(--db-collapse-speed) ease,
              max-width var(--db-collapse-speed) ease;
}

.sidebar-user-name {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--clr-text-dark);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-user-role {
  font-size: 11px;
  font-weight: 500;
  color: var(--clr-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* hide text labels in collapsed state */
.is-folded .sidebar-user-info {
  opacity: 0;
  max-width: 0;
  overflow: hidden;
  pointer-events: none;
}

/* ── Nav separator (before logout) ──────────────────────── */

.nav-separator {
  height: 1px;
  background: var(--clr-border-mid);
  margin: 8px 16px;
}

/* ── Logout item ─────────────────────────────────────────── */

.dash-nav-logout .dashboard-nav-item:hover {
  background: rgba(239, 68, 68, 0.08);
  color: #ef4444;
}

.dash-nav-logout .dashboard-nav-item:hover .nav-icon {
  color: #ef4444;
  transform: scale(1.1);
}

/* ── Settings accordion ──────────────────────────────────── */

.db-accordion-btn {
  background: transparent;
  border: none;
  width: 100%;
  text-align: start;
  color: inherit;
  font: inherit;
  padding: 0;
  cursor: pointer;
}

.nav-chevron {
  margin-inline-start: auto;
  display: flex;
  align-items: center;
  font-size: 16px;
  color: var(--clr-text-muted);
  transition: transform var(--db-collapse-speed) ease;
  flex-shrink: 0;
}

.nav-chevron.open {
  transform: rotate(180deg);
}

.is-folded .nav-chevron {
  display: none;
}

.nav-submenu {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--db-collapse-speed) ease;
}

.nav-submenu--open {
  max-height: 200px;
}

/* ── Store / account name block ──────────────────────────── */

.store_name_box {
  padding: 16px 20px 12px;
  border-block-end: 1px solid var(--clr-border-mid);
  margin-block-end: 8px;
  overflow: hidden;
  white-space: nowrap;
}

.Test_store_name {
  font-size: 14px;
  font-weight: 700;
  color: var(--clr-text-dark);
  margin: 0;
  transition: opacity var(--db-collapse-speed) ease;
}

.TestStore_name_title,
.Folded_TestStore_name_title {
  display: block;
  font-size: 11px;
  font-weight: 500;
  color: var(--clr-text-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-block-end: 4px;
  transition: opacity var(--db-collapse-speed) ease;
}

/* ── Sidebar store picker ────────────────────────────────── */

.sb-store-picker {
  padding: 0;
  white-space: normal;
}

.sb-store-picker__btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px 12px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: start;
  transition: background var(--trans-fast);
}

.sb-store-picker__btn:hover {
  background: var(--clr-blue-hover);
}

.sb-store-picker__icon {
  font-size: 18px;
  color: var(--clr-blue);
  flex-shrink: 0;
  display: flex;
}

.sb-store-picker__name {
  flex: 1;
  font-size: 14px;
  font-weight: 700;
  color: var(--clr-text-dark);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: opacity var(--db-collapse-speed);
}

.sb-store-picker__chevron {
  font-size: 16px;
  color: var(--clr-text-muted);
  flex-shrink: 0;
  display: flex;
  transition: transform var(--trans-fast);
}

.sb-store-picker__chevron.open {
  transform: rotate(180deg);
}

.sb-store-picker__list {
  display: none;
  flex-direction: column;
  padding: 2px 12px 12px;
  gap: 2px;
}

.sb-store-picker.is-open .sb-store-picker__list {
  display: flex;
}

.sb-store-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--clr-text-muted);
  text-align: start;
  transition: background var(--trans-fast), color var(--trans-fast);
}

.sb-store-item:hover {
  background: var(--clr-blue-hover);
  color: var(--clr-navy);
}

.sb-store-item.active {
  background: var(--clr-blue-light);
  color: var(--clr-blue);
}

.sb-store-item--shop-dash {
  border-bottom: 1px solid var(--clr-border);
  margin-bottom: 4px;
  padding-bottom: 8px;
  font-weight: 500;
}

.sb-store-item__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--clr-border-mid);
  flex-shrink: 0;
  transition: background var(--trans-fast);
}

.sb-store-item.active .sb-store-item__dot {
  background: var(--clr-blue);
}

/* Collapsed sidebar: show only the icon */
.is-folded .sb-store-picker__name,
.is-folded .sb-store-picker__chevron {
  display: none;
}

.is-folded .sb-store-picker__btn {
  justify-content: center;
  padding: 12px 8px;
}

.is-folded .sb-store-picker.is-open .sb-store-picker__list {
  display: none;
}

/* ── Navigation list ─────────────────────────────────────── */

.dashboard-nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  border: none;
  border-radius: 0;
  background: transparent;
}

/* ── Nav item row ────────────────────────────────────────── */

.dash-nav-li {
  padding: 0 16px;
  border-bottom: none;
  position: relative;
}

/* ── Nav link ────────────────────────────────────────────── */

.dashboard-nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 16px;
  height: var(--db-nav-item-h);
  border-radius: 0;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--clr-text-base);
  text-decoration: none;
  cursor: pointer;
  position: relative;
  transition: background var(--trans-fast),
              color var(--trans-fast),
              padding-inline-start var(--db-collapse-speed);
  white-space: nowrap;
  overflow: hidden;

  /* Remove the old absolute SVG positioning */
  padding-inline-start: 20px;
}

/* icon slot – keep consistent size */
.dashboard-nav-item .nav-icon {
  flex: 0 0 var(--db-nav-icon-size);
  width: var(--db-nav-icon-size);
  height: var(--db-nav-icon-size);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--clr-text-muted);
  font-size: var(--db-nav-icon-size);
  transition: color var(--trans-fast), transform var(--trans-fast);
}

/* label */
.dashboard-nav-item .nav-label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: opacity var(--db-collapse-speed) ease,
              max-width var(--db-collapse-speed) ease;
  opacity: 1;
  max-width: 200px;
}

/* logout button – reset browser defaults */
.db-logout-btn {
  background: transparent;
  border: none;
  width: 100%;
  text-align: start;
  color: inherit;
  font: inherit;
  padding: 0;
}

/* hover state */
.dash-nav-li:not(.active) .dashboard-nav-item:hover {
  background: var(--clr-blue-hover);
  color: var(--clr-blue);
}

.dash-nav-li:not(.active) .dashboard-nav-item:hover .nav-icon {
  color: var(--clr-blue);
  transform: scale(1.1);
}

/* active state */
.dash-nav-li.active .dashboard-nav-item {
  background: var(--clr-blue-light);
  color: var(--clr-blue);
  font-weight: 600;
}

.dash-nav-li.active .nav-icon {
  color: var(--clr-blue);
}

/* active indicator bar (inline-start edge) */
.dash-nav-li.active::before {
  content: "";
  position: absolute;
  inset-block: 6px;
  inset-inline-start: 0;
  width: var(--db-active-bar-w);
  background: var(--clr-orange);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

/* ── Tooltip on collapsed sidebar ───────────────────────── */

.nav-tooltip {
  position: absolute;
  inset-inline-start: calc(var(--db-sidebar-w-collapsed) + 8px);
  top: 50%;
  transform: translateY(-50%);
  background: var(--clr-navy);
  color: var(--clr-white);
  font-size: 12.5px;
  font-weight: 500;
  padding: 5px 11px;
  border-radius: var(--radius-sm);
  pointer-events: none;
  white-space: nowrap;
  opacity: 0;
  transition: opacity var(--trans-fast);
  z-index: 200;
}

.nav-tooltip::before {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  inset-inline-end: 100%;
  border: 5px solid transparent;
  border-inline-end-color: var(--clr-navy);
}

/* ── Collapse / expand toggle button ────────────────────── */

.db-toggle-btn {
  position: absolute;
  inset-inline-end: -14px;
  top: 35px;
  transform: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--clr-orange);
  border: 2px solid var(--clr-white);
  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  transition: background var(--trans-fast);
  color: var(--clr-white);
  font-size: 13px;
}

.db-toggle-btn:hover {
  background: var(--clr-orange-dark);
}

/* arrow rotates when collapsed */
.db-toggle-btn .toggle-arrow {
  transition: transform var(--db-collapse-speed) ease;
  display: flex;
}

/* hide submenu when sidebar is collapsed */
.is-folded .nav-submenu {
  display: none;
}

/* ── COLLAPSED state (.is-folded on parent .app div) ─────── */

.is-folded .side_nav {
  flex: 0 0 var(--db-sidebar-w-collapsed);
  width: var(--db-sidebar-w-collapsed);
}

.is-folded .dashboard-sidebar {
  border-radius: var(--radius-md);
}

/* hide text / labels */
.is-folded .nav-label,
.is-folded .Test_store_name,
.is-folded .TestStore_name_title,
.is-folded .Folded_TestStore_name_title {
  opacity: 0;
  max-width: 0;
  overflow: hidden;
  pointer-events: none;
}

/* centre icons */
.is-folded .dashboard-nav-item {
  justify-content: center;
  padding-inline-start: 0;
  padding-inline-end: 0;
  gap: 0;
}

.is-folded .nav-icon {
  margin: 0 auto;
}

/* show tooltip on hover when collapsed */
.is-folded .dash-nav-li:hover .nav-tooltip {
  opacity: 1;
}

/* active bar stays visible */
.is-folded .dash-nav-li.active::before {
  inset-block: 8px;
}

/* flip arrow */
.is-folded .db-toggle-btn .toggle-arrow {
  transform: rotate(180deg);
}

.is-folded .store_name_box {
  padding: 12px 8px;
}

/* ── Mobile drawer ───────────────────────────────────────── */

.dashboard-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 900;
  cursor: pointer;
}

@media (max-width: 991.98px) {
  /* Remove from flex layout but keep it rendered so fixed children work */
  .side_nav {
    width: 0 !important;
    flex: 0 0 0 !important;
    overflow: visible;
    pointer-events: none;
  }

  .side_nav.mobile-show {
    pointer-events: auto;
  }

  /* Drawer panel — always fixed, off-screen by default */
  .dashboard-sidebar {
    position: fixed;
    inset-block: 0;
    inset-inline-start: -300px;
    width: 270px !important;
    height: 100dvh;
    border-radius: 0;
    overflow-y: auto;
    z-index: 950;
    transition: inset-inline-start var(--db-collapse-speed) ease,
                box-shadow var(--db-collapse-speed) ease;
    border: none;
    box-shadow: none;
  }

  /* Slide in when parent has mobile-show */
  .side_nav.mobile-show .dashboard-sidebar {
    inset-inline-start: 0;
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.22);
  }

  .dashboard-overlay.visible {
    display: block;
  }

  /* No toggle button on mobile */
  .db-toggle-btn {
    display: none;
  }

  /* Tooltip not needed on mobile */
  .nav-tooltip {
    display: none;
  }

  body.scroll-off {
    overflow: hidden;
  }
}

/* ── Right content panel ─────────────────────────────────── */

.dashboard-right {
  background: var(--clr-white);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-xl);
  padding: 32px 36px;
  box-shadow: var(--shadow-blue-sm);
}

.MyProLambor_Wrapper .dashboard-right {
  padding: 36px 44px;
}

/* ── Profile card ────────────────────────────────────────── */

.profile-card {
  display: flex;
  align-items: center;
  gap: 32px;
  margin-block-end: 40px;
}

.profile-box {
  height: 100px;
  width: 100px;
  flex: 0 0 auto;
  border-radius: 50%;
  border: 3px solid var(--clr-blue-light);
  overflow: hidden;
}

.profile-img {
  height: 100%;
  width: 100%;
  border-radius: 50%;
  object-fit: contain;
}

.edit-details .profile-card {
  margin-block-end: 20px;
}

/* ── Form inputs ─────────────────────────────────────────── */

.content-form .all-input {
  width: 100%;
  background: var(--clr-bg-input);
  border: 1px solid var(--clr-border-mid);
  border-radius: var(--radius-sm);
  padding: 11px 14px;
  font-weight: 500;
  font-size: 15px;
  color: var(--clr-text-base);
  transition: border-color var(--trans-fast), box-shadow var(--trans-fast);
}

.content-form .all-input:focus {
  outline: none;
  border-color: var(--clr-blue-mid);
  box-shadow: 0 0 0 3px rgba(37, 99, 156, 0.12);
}

.content-form .form-select {
  display: block;
  border-radius: var(--radius-sm);
  padding: 11px 14px;
  font-weight: 500;
  font-size: 15px;
  color: var(--clr-text-base);
  background-color: var(--clr-bg-input);
  border: 1px solid var(--clr-border-mid);
}

/* ── Save / Discard buttons ──────────────────────────────── */

.save-btn {
  background: var(--clr-orange);
  margin-inline-end: 16px;
}

.save-btn:hover,
.save-btn:active {
  background: var(--grad-orange);
  color: var(--clr-white);
}

.discard-btn {
  background-color: var(--clr-badge-navy);
}

.discard-btn:hover {
  background: var(--grad-orange);
  color: var(--clr-white);
}

.save-discard-block button {
  padding: 11px 36px;
  color: var(--clr-white);
  border-radius: var(--radius-sm);
  border: none;
  font-weight: 600;
  font-size: 14.5px;
  min-width: 120px;
  transition: background var(--trans-fast), opacity var(--trans-fast);
}

.save-discard-block {
  margin-block-start: 32px;
}

.save-discard-block.text-end.pay-row {
  margin: 28px 0 -16px;
  border-block-start: 1px solid var(--clr-border-mid);
  padding: 24px 0 0;
}

a.discard-btn.download-btn.btn {
  color: var(--clr-white);
}

/* ── Page / card headings ────────────────────────────────── */

.card-top-block {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-block-end: 24px;
}

.card-profile-heading {
  font-size: 22px;
  font-weight: 700;
  color: var(--clr-text-dark);
  margin-block-end: 28px;
}

/* ── Edit profile picture ────────────────────────────────── */

.edit-profile {
  cursor: pointer;
  background: var(--clr-bg-muted);
  border: 1px solid var(--clr-border-mid);
  padding: 10px 20px;
  color: var(--clr-text-base);
  border-radius: var(--radius-sm);
  font-size: 14.5px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background var(--trans-fast), color var(--trans-fast),
              border-color var(--trans-fast);
}

.edit-profile:hover {
  background: var(--clr-blue);
  color: var(--clr-white);
  border-color: var(--clr-blue);
}

/* ── Recent / stats ──────────────────────────────────────── */

.dash_RecentTitle {
  color: var(--clr-text-dark);
  font-size: 20px;
  font-weight: 700;
  margin: 0;
  padding-block-end: 24px;
  display: block;
}

.Dash_RecentBlocks {
  margin-block-start: 40px;
}

/* ── Submenu (settings accordion items) ──────────────────── */

.submenu-Toggle .dash-nav-li {
  padding: 0 0 0 0;
  border-bottom: none;
  padding-inline-start: 52px;
}

.submenu-Toggle .dash-nav-li .dashboard-nav-item {
  padding-inline-start: 12px;
  font-size: 13.5px;
  height: 38px;
  position: relative;
}

.submenu-Toggle .dash-nav-li .dashboard-nav-item::before {
  content: "\f111";
  position: absolute;
  font-weight: 600;
  top: 13px;
  inset-inline-start: 0;
  font-family: "Font-Awesome-5-Pro";
  font-size: 6px;
  color: var(--clr-text-muted);
}

/* ── Folded sidebar extra labels ─────────────────────────── */

.is-folded .Test_store_name {
  font-size: 10px;
  text-align: center;
  position: relative;
  inset-inline-start: 0;
}

/* ============================================================
   Responsive overrides
   ============================================================ */

/* ── ≥ 1400px ── */
@media (min-width: 1400px) {
  :root { --db-sidebar-w: 300px; }
}

/* ── 1200px – 1399.98px ── */
@media (min-width: 1200px) and (max-width: 1399.98px) {
  :root {
    --db-sidebar-w: 240px;
    --db-sidebar-w-collapsed: 72px;
  }

  .dashboard-right {
    padding: 26px 24px;
  }

  .content-form .all-input {
    font-size: 14px;
  }

  .dash_RecentTitle {
    font-size: 18px;
    padding-block-end: 20px;
  }

  .dashboard-nav-item {
    font-size: 13.5px;
  }
}

/* ── ≥ 992px  (enable collapse/expand) ── */
@media (min-width: 992px) {
  .side_nav {
    display: block; /* ensure visible on desktop */
    flex: 0 0 var(--db-sidebar-w);
    max-width: var(--db-sidebar-w);
    transition: flex var(--db-collapse-speed) ease,
                max-width var(--db-collapse-speed) ease;
  }

  .is-folded .side_nav {
    flex: 0 0 var(--db-sidebar-w-collapsed);
    max-width: var(--db-sidebar-w-collapsed);
  }

  .is-folded .theiaStickySidebar {
    width: var(--db-sidebar-w-collapsed) !important;
  }

  .content-right {
    flex: 1;
  }
}

/* ── 992px – 1199.98px ── */
@media (min-width: 992px) and (max-width: 1199.98px) {
  :root {
    --db-sidebar-w: 220px;
    --db-sidebar-w-collapsed: 68px;
  }

  .dashboard-right {
    padding: 24px 20px;
  }

  .dashboard-nav-item {
    font-size: 13px;
  }

  .dash-nav-li {
    padding: 0;
  }

  .submenu-Toggle .dash-nav-li {
    padding-inline-start: 44px;
  }

  .submenu-Toggle .dash-nav-li .dashboard-nav-item {
    font-size: 13px;
  }

  .submenu-Toggle .dash-nav-li .dashboard-nav-item::before {
    top: 11px;
  }
}

/* ── ≤ 991.98px ── */
@media (max-width: 991.98px) {
  .dashboard-section {
    padding-top: 28px;
    padding-bottom: 40px;
    height: auto;
  }

  .dashboard-right {
    padding: 24px 20px;
  }

  .card-profile-heading {
    font-size: 20px;
    margin-block-end: 24px;
  }

  .save-discard-block {
    margin-block-start: 4px;
  }

  .profile-box {
    height: 76px;
    width: 76px;
  }

  .page-title {
    font-size: 24px;
    margin-block-end: 16px;
  }

  .MyProLambor_Wrapper .dashboard-right {
    padding: 20px;
  }
}

/* ── ≤ 767.98px ── */
@media (max-width: 767.98px) {
  .flex-content {
    flex-direction: column;
  }

  .content-right {
    width: 100%;
  }

  .dash_RecentTitle {
    font-size: 18px;
    padding-block-end: 16px;
  }

  .MyProLambor_Wrapper .dashboard-right {
    padding: 16px 16px;
  }

  .profile-card {
    gap: 16px;
    margin-block-end: 24px;
  }

  .profile-box {
    height: 64px;
    width: 64px;
  }

  .edit-profile {
    padding: 9px 14px;
    font-size: 13.5px;
  }

  .dashboard-right {
    border-radius: var(--radius-md);
    padding: 24px 18px;
  }
}

/* ── ≤ 575.98px ── */
@media (max-width: 575.98px) {
  .save-discard-block button {
    padding: 10px 24px;
    min-width: unset;
  }

  .save-btn {
    margin-inline-end: 8px;
  }
}

/* ── ≤ 479.98px ── */
@media (max-width: 479.98px) {
  .edit-profile {
    font-size: 13px;
    padding: 8px 12px;
  }
}

/* ============================================================
   Sidebar – Dark Theme Redesign
   ============================================================ */

/* ── Shell ── */
.dashboard-sidebar {
  background: #0a1435;
  border-color: rgba(255, 255, 255, 0.06);
  box-shadow: 0 4px 28px rgba(0, 0, 0, 0.32);
  display: flex;
  flex-direction: column;
}

/* ── Brand area at top ── */
.db-sidebar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 16px 16px;
  border-block-end: 1px solid rgba(255, 255, 255, 0.07);
  flex-shrink: 0;
  overflow: hidden;
  white-space: nowrap;
}

.db-sidebar-brand-icon {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: linear-gradient(135deg, #ff6c2c 0%, #ff8c54 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  font-weight: 900;
  color: #fff;
  letter-spacing: -0.5px;
  box-shadow: 0 2px 10px rgba(255, 108, 44, 0.35);
}

.db-sidebar-brand-name {
  font-size: 16px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.4px;
  overflow: hidden;
  max-width: 200px;
  opacity: 1;
  transition: opacity var(--db-collapse-speed) ease,
              max-width var(--db-collapse-speed) ease;
}

.is-folded .db-sidebar-brand-name {
  opacity: 0;
  max-width: 0;
}

/* ── Nav grows to fill available space ── */
.dashboard-nav-list {
  flex: 1;
  padding-block-start: 8px;
}

/* ── Section groups ── */
.db-nav-section {
  margin-block-start: 16px;
}

.db-nav-section:first-child {
  margin-block-start: 4px;
}

.db-nav-section-label {
  display: block;
  padding: 0 20px 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.28);
  white-space: nowrap;
  overflow: hidden;
  max-width: 200px;
  opacity: 1;
  transition: opacity var(--db-collapse-speed) ease,
              max-width var(--db-collapse-speed) ease;
}

.is-folded .db-nav-section-label {
  opacity: 0;
  max-width: 0;
}

/* ── Store/account name block ── */
.store_name_box {
  border-block-end-color: rgba(255, 255, 255, 0.07);
}

.Test_store_name {
  color: rgba(255, 255, 255, 0.88);
}

.TestStore_name_title,
.Folded_TestStore_name_title {
  color: rgba(255, 255, 255, 0.30);
}

/* ── Store picker – dark theme overrides ── */
.sb-store-picker__btn:hover {
  background: rgba(255, 255, 255, 0.06);
}

.sb-store-picker__icon {
  color: rgba(255, 255, 255, 0.5);
}

.sb-store-picker__name {
  color: rgba(255, 255, 255, 0.88);
}

.sb-store-picker__chevron {
  color: rgba(255, 255, 255, 0.35);
}

.sb-store-item {
  color: rgba(255, 255, 255, 0.5);
}

.sb-store-item:hover {
  background: rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.88);
}

.sb-store-item.active {
  background: rgba(37, 99, 156, 0.35);
  color: var(--clr-blue-mid);
}

.sb-store-item--shop-dash {
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

.sb-store-item__dot {
  background: rgba(255, 255, 255, 0.2);
}

.sb-store-item.active .sb-store-item__dot {
  background: var(--clr-blue-mid);
}

/* ── Nav items on dark ── */
.dashboard-nav-item {
  color: rgba(255, 255, 255, 0.60);
}

.dashboard-nav-item .nav-icon {
  color: rgba(255, 255, 255, 0.38);
}

/* Hover */
.dash-nav-li:not(.active) .dashboard-nav-item:hover {
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.90);
}

.dash-nav-li:not(.active) .dashboard-nav-item:hover .nav-icon {
  color: rgba(255, 255, 255, 0.72);
  transform: none;
}

/* Active */
.dash-nav-li.active .dashboard-nav-item {
  background: rgba(255, 108, 44, 0.13);
  color: var(--clr-orange);
  font-weight: 600;
}

.dash-nav-li.active .nav-icon {
  color: var(--clr-orange);
}

.dash-nav-li.active::before {
  background: var(--clr-orange);
}

/* ── Separator ── */
.nav-separator {
  background: rgba(255, 255, 255, 0.07);
}

/* ── Logout ── */
.dash-nav-logout .dashboard-nav-item {
  color: rgba(255, 255, 255, 0.42);
}

.dash-nav-logout .dashboard-nav-item .nav-icon {
  color: rgba(255, 255, 255, 0.30);
}

.dash-nav-logout .dashboard-nav-item:hover {
  background: rgba(239, 68, 68, 0.10);
  color: #f87171;
}

.dash-nav-logout .dashboard-nav-item:hover .nav-icon {
  color: #f87171;
  transform: none;
}

/* ── Accordion on dark ── */
.db-accordion-btn {
  color: rgba(255, 255, 255, 0.60);
}

.nav-chevron {
  color: rgba(255, 255, 255, 0.30);
}

.dash-nav-accordion.active .db-accordion-btn {
  color: var(--clr-orange);
}

.dash-nav-accordion.active .nav-chevron {
  color: var(--clr-orange);
}

/* ── Submenu ── */
.submenuToggle .dashboard-nav-item {
  color: rgba(255, 255, 255, 0.48);
}

.submenuToggle.active .dashboard-nav-item {
  color: var(--clr-orange);
}

/* ── Tooltip ── */
.nav-tooltip {
  background: #1a2858;
}

.nav-tooltip::before {
  border-inline-end-color: #1a2858;
}

/* ── User footer ── */
.sidebar-user-header {
  border-block-end: none;
  border-block-start: 1px solid rgba(255, 255, 255, 0.07);
  margin-block-end: 0;
  margin-block-start: auto;
  flex-shrink: 0;
  padding: 14px 20px 14px;
}

.sidebar-avatar {
  background: linear-gradient(135deg, #ff6c2c 0%, #ff8c54 100%);
  color: #fff;
  box-shadow: 0 2px 8px rgba(255, 108, 44, 0.32);
}

.sidebar-user-name {
  color: rgba(255, 255, 255, 0.88);
}

.sidebar-user-role {
  color: rgba(255, 255, 255, 0.34);
}

/* ── Mobile dark drawer ── */
@media (max-width: 991.98px) {
  .dashboard-sidebar {
    background: #0a1435;
    box-shadow: 4px 0 32px rgba(0, 0, 0, 0.45);
  }
}

/* ── Mobile-only nav section (main links in sidebar) ── */
.db-nav-section--mobile-only {
  display: none;
}

@media (max-width: 991.98px) {
  .db-nav-section--mobile-only {
    display: block;
    border-block-end: 1px solid rgba(255, 255, 255, 0.07);
    padding-block-end: 8px;
    margin-block-end: 8px;
  }
}

.db-section-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--clr-text-muted);
  margin: 0 0 14px;
}

/* ============================================================
   Dashboard – Stat Cards Grid
   ============================================================ */

.db-cards-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 32px;
}

/* ── Base card – gradient background, horizontal layout ── */
.db-stat-card {
  background: var(--db-card-gradient);
  border-radius: var(--radius-lg);
  border: none;
  padding: 20px 18px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16px;
  box-shadow: 0 4px 20px var(--db-card-shadow, rgba(0,0,0,0.18));
  transition: transform var(--trans-normal), box-shadow var(--trans-normal);
  position: relative;
  overflow: hidden;
}

/* decorative circle – top-right */
.db-stat-card::before {
  content: '';
  position: absolute;
  right: -18px;
  top: -22px;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.10);
  pointer-events: none;
}

/* decorative circle – bottom */
.db-stat-card::after {
  content: '';
  position: absolute;
  right: 24px;
  bottom: -28px;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.07);
  pointer-events: none;
}

.db-stat-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 32px var(--db-card-shadow, rgba(0,0,0,0.25));
}

/* ── Icon container ── */
.db-stat-card__icon-wrap {
  width: 54px;
  height: 54px;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.20);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.db-stat-card__icon-wrap img,
.db-stat-card__icon-wrap svg {
  width: 30px !important;
  height: 30px !important;
  display: block;
  flex-shrink: 0;
}

/* ── Value + label ── */
.db-stat-card__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.db-stat-card__value {
  font-size: 28px;
  font-weight: 800;
  color: #ffffff;
  line-height: 1;
  letter-spacing: -0.5px;
  display: block;
}

.db-stat-card__label {
  font-size: 11.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.78);
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Gradient themes ── */
.db-stat-card--amber {
  --db-card-gradient: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  --db-card-shadow:   rgba(245, 158, 11, 0.42);
}
.db-stat-card--orange {
  --db-card-gradient: linear-gradient(135deg, #ff6c2c 0%, #ee3824 100%);
  --db-card-shadow:   rgba(255, 108, 44, 0.42);
}
.db-stat-card--navy {
  --db-card-gradient: linear-gradient(135deg, #2d3a72 0%, #0f1630 100%);
  --db-card-shadow:   rgba(15, 22, 48, 0.50);
}
.db-stat-card--blue {
  --db-card-gradient: linear-gradient(135deg, #2e7ab8 0%, #0052b4 100%);
  --db-card-shadow:   rgba(46, 122, 184, 0.42);
}
.db-stat-card--green {
  --db-card-gradient: linear-gradient(135deg, #27ae60 0%, #1a7940 100%);
  --db-card-shadow:   rgba(39, 174, 96, 0.42);
}
.db-stat-card--purple {
  --db-card-gradient: linear-gradient(135deg, #9b59b6 0%, #7d3c98 100%);
  --db-card-shadow:   rgba(155, 89, 182, 0.42);
}
.db-stat-card--teal {
  --db-card-gradient: linear-gradient(135deg, #0e7490 0%, #0a5570 100%);
  --db-card-shadow:   rgba(14, 116, 144, 0.42);
}
.db-stat-card--indigo {
  --db-card-gradient: linear-gradient(135deg, #4338ca 0%, #3730a3 100%);
  --db-card-shadow:   rgba(67, 56, 202, 0.42);
}
.db-stat-card--red {
  --db-card-gradient: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%);
  --db-card-shadow:   rgba(239, 68, 68, 0.42);
}

/* ════════════════════════════════════════════════════════════
   Recent Bookings  (rb-*)
   ════════════════════════════════════════════════════════════ */

.rb-section {
  margin-top: 28px;
}

/* ── Card ─────────────────────────────────────────────────── */
.rb-card {
  display: flex;
  gap: 20px;
  background: var(--clr-white);
  border: 1px solid var(--clr-border-blue);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 20px;
  margin-bottom: 16px;
  transition: box-shadow var(--trans-normal);
}

.rb-card:hover {
  box-shadow: var(--shadow-card-hover);
}

/* ── Image column ─────────────────────────────────────────── */
.rb-card__img-col {
  position: relative;
  flex: 0 0 180px;
}

.rb-card__img {
  width: 100%;
  height: 150px;
  border-radius: var(--radius-md);
  overflow: hidden;
  margin: 0;
  background: var(--clr-bg-card-alt);
}

.rb-card__img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* ── Status badge ─────────────────────────────────────────── */
.rb-card__badge {
  position: absolute;
  top: 10px;
  left: 10px;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  letter-spacing: 0.02em;
  text-transform: capitalize;
  line-height: 1.4;
}

.rb-card__badge--pending  { background: var(--clr-orange-light); color: var(--clr-orange-dark); }
.rb-card__badge--cancelled { background: var(--clr-error-bg);    color: var(--clr-error); }
.rb-card__badge--completed { background: #edf9f2;                color: var(--clr-success); }
.rb-card__badge--ongoing  { background: var(--clr-blue-light);   color: var(--clr-blue); }

/* ── Body ─────────────────────────────────────────────────── */
.rb-card__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ── Header row ───────────────────────────────────────────── */
.rb-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.rb-card__title-group { flex: 1; min-width: 0; }

.rb-card__title {
  font-size: 15px;
  font-weight: 700;
  color: var(--clr-text-dark);
  margin: 0 0 6px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.rb-card__type-tag {
  font-size: 11px;
  font-weight: 500;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  background: var(--clr-blue-light);
  color: var(--clr-blue);
}

.rb-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.rb-card__meta-chip {
  font-size: 12px;
  color: var(--clr-text-mid);
  background: var(--clr-bg-subtle);
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

/* ── Specs row ────────────────────────────────────────────── */
.rb-card__specs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.rb-card__spec {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--clr-text-mid);
  background: var(--clr-bg-muted);
  border: 1px solid var(--clr-border-mid);
  padding: 5px 12px;
  border-radius: var(--radius-pill);
}

.rb-card__spec img,
.rb-card__spec svg {
  width: 15px;
  height: 15px;
  object-fit: contain;
  flex-shrink: 0;
}

/* ── Details grid (locations + payment) ───────────────────── */
.rb-card__details {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--clr-border-light);
}

/* ── Locations ────────────────────────────────────────────── */
.rb-card__locations {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.rb-card__loc {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.rb-card__loc-connector {
  width: 2px;
  height: 14px;
  background: var(--clr-border-mid);
  margin-left: 7px;
}

.rb-card__loc-pin {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  margin-top: 3px;
  border: 2px solid;
}

.rb-card__loc-pin--pickup { background: #d1fae5; border-color: var(--clr-success); }
.rb-card__loc-pin--drop   { background: var(--clr-error-bg); border-color: var(--clr-error); }

.rb-card__loc-info { flex: 1; min-width: 0; }

.rb-card__loc-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--clr-text-dark);
  display: block;
  margin-bottom: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rb-card__loc-time {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 11.5px;
  color: var(--clr-text-muted);
}

.rb-card__loc-time i { margin-right: 3px; color: var(--clr-blue-mid); }

/* ── Payment panel ────────────────────────────────────────── */
.rb-card__payment {
  background: var(--clr-blue-bg);
  border: 1px solid var(--clr-border-blue);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.rb-card__payment-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}

.rb-card__payment-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--clr-blue);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.rb-card__pick-type {
  font-size: 12px;
  color: var(--clr-text-mid);
}

.rb-card__fare-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.rb-card__fare-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.rb-card__fare-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--clr-text-dark);
}

.rb-card__fare-method {
  font-size: 11px;
  color: var(--clr-text-muted);
}

.rb-card__amount {
  font-size: 22px;
  font-weight: 800;
  color: var(--clr-orange);
  letter-spacing: -0.01em;
}

.rb-card__pay-date {
  font-size: 11.5px;
  color: var(--clr-text-muted);
}

.rb-card__pay-date strong { color: var(--clr-text-base); }

/* ── Empty state ──────────────────────────────────────────── */
.rb-empty {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 28px 32px;
  margin-top: 12px;
  background: var(--clr-blue-bg, #f4f7fb);
  border: 1.5px dashed var(--clr-border-blue, #e0eaf3);
  border-radius: var(--radius-lg, 16px);
}

.rb-empty__visual {
  flex-shrink: 0;
  width: 110px;
  height: 110px;
  background: var(--clr-white, #fff);
  border-radius: var(--radius-md, 12px);
  box-shadow: var(--shadow-blue-sm, 0 2px 12px rgba(37,99,156,0.07));
  display: flex;
  align-items: center;
  justify-content: center;
}

.rb-empty__img {
  width: 80px;
  height: 80px;
  object-fit: contain;
  opacity: 0.9;
}

.rb-empty__content {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.rb-empty__title {
  font-size: 15px;
  font-weight: 700;
  color: var(--clr-text-dark, #1a1a2e);
  margin: 0;
}

.rb-empty__sub {
  font-size: 13px;
  color: var(--clr-text-muted, #888);
  margin: 0;
  line-height: 1.5;
  max-width: 420px;
}

@media (max-width: 480px) {
  .rb-empty {
    flex-direction: column;
    text-align: center;
    padding: 24px 16px;
  }
  .rb-empty__sub { max-width: 100%; }
}

/* ── Load more ────────────────────────────────────────────── */
.rb-load-more {
  display: flex;
  justify-content: center;
  padding: 8px 0 4px;
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 991.98px) {
  .rb-card { flex-direction: column; }
  .rb-card__img-col { flex: none; width: 100%; }
  .rb-card__img { height: 200px; }
  .rb-card__details { grid-template-columns: 1fr; }
}

@media (max-width: 575.98px) {
  .rb-card { padding: 14px; gap: 14px; }
  .rb-card__title { font-size: 14px; }
  .rb-card__amount { font-size: 18px; }
}

/* ── Responsive ── */
@media (max-width: 1199.98px) {
  .db-cards-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 767.98px) {
  .db-cards-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .db-stat-card__value {
    font-size: 22px;
  }

  .db-stat-card__label {
    font-size: 10.5px;
  }
}

@media (max-width: 479.98px) {
  .db-cards-grid {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .db-stat-card {
    padding: 14px 12px;
    gap: 10px;
  }

  .db-stat-card__value {
    font-size: 20px;
  }

  .db-stat-card__icon-wrap {
    width: 42px;
    height: 42px;
  }

  .db-stat-card__icon-wrap img,
  .db-stat-card__icon-wrap svg {
    width: 22px !important;
    height: 22px !important;
  }
}