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

/* ── 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;
  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: 50%;
  transform: translateY(-50%);
  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),
              transform 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) {
  .side_nav {
    display: none; /* hidden by default on mobile */
  }

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

  /* open state (added via JS) */
  .dashboard-sidebar.mobile-show {
    inset-inline-start: 0;
    box-shadow: 4px 0 24px rgba(0,0,0,0.18);
  }

  .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: cover;
}

.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;
  }
}