/* ==========================================================================
   DASHBOARD - customer dashboard and admin dashboard specific layouts
   and components.
   ========================================================================== */

.dash-header {
  background: var(--black);
  color: var(--white);
  padding: 20px 0;
}

/* .nav-toggle's default color: var(--text) flips with the site theme,
   which is correct for .site-header (which also flips backgrounds), but
   .dash-header always has a solid black background regardless of theme -
   so in light mode that left the hamburger rendering black-on-black,
   invisible but still clickable. Force it white here specifically. */
.dash-header .nav-toggle {
  color: var(--white);
}

.dash-header .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
}

.dash-shell {
  max-width: 1080px;
  margin: 0 auto;
  padding: 44px 24px 90px;
}

/* ---------- customer account dashboard ---------- */
.account-shell {
  max-width: 1180px;
  margin: 0 auto;
  padding: 32px 24px 90px;
}

.account-grid {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 28px;
  align-items: start;
  width: 100%;
}

.profile-card,
.account-content {
  min-width: 0;
  max-width: 100%;
}

.dash-nav {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
}

.dash-nav-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 11px 14px;
  border-radius: 10px;
  border: none;
  background: transparent;
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.dash-nav-item:hover {
  background: var(--off-white);
}

.dash-nav-item.is-active {
  background: var(--black);
  color: var(--white);
}

.dash-panel {
  display: none;
}

.dash-panel.is-active {
  display: block;
}

.account-date {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--grey);
  margin: 0 0 4px;
}

.stat-card {
  background: var(--surface);
  border: 1px solid var(--surface-border);
  border-left: 4px solid var(--yellow);
  border-radius: 12px;
  padding: 18px;
  min-width: 0;
}

.dash-hero {
  background: var(--black);
  color: var(--white);
  border-radius: var(--radius);
  padding: 24px 22px;
  margin-bottom: 18px;
}

.dash-hero-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.dash-hero-greeting {
  color: rgba(255, 255, 255, 0.6);
  margin: 0;
}

.dash-hero-name {
  font-family: var(--font-display);
  font-size: 20px;
  margin: 4px 0 2px;
  overflow-wrap: break-word;
}

.dash-hero-phone {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.55);
  margin: 0;
}

.dash-hero-actions {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  margin-top: 20px;
}

.dash-hero-actions .btn {
  flex: 1 1 0;
  min-width: 0;
  padding-left: 10px;
  padding-right: 10px;
  white-space: nowrap;
  text-align: center;
}

.dash-hero-ghost-btn {
  border-color: rgba(255, 255, 255, 0.3) !important;
  color: var(--white) !important;
}

.dash-hero-strip {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
}

.wallet-highlight-card {
  background: var(--surface);
  border: 1px solid var(--surface-border);
  border-left: 4px solid var(--yellow);
  border-radius: var(--radius);
  padding: 18px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 18px;
}

.wallet-highlight-value {
  display: block;
  font-family: var(--font-numeric);
  font-size: 24px;
  font-weight: 700;
  margin-top: 2px;
}

.dash-section-title {
  font-size: 16px;
  margin: 32px 0 14px;
}

.dash-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 32px 0 14px;
}

.dash-view-all {
  background: none;
  border: none;
  color: var(--yellow-dark);
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
}

.dash-card {
  background: var(--surface);
  border: 1px solid var(--surface-border);
  border-radius: 16px;
  padding: 26px;
  margin-bottom: 24px;
}

.dash-card h2 {
  font-size: 19px;
  margin-bottom: 4px;
}

/* ---------- centered responsive order layouts ---------- */
#ordersWrap,
#recentOrdersPreview,
#ordersTableWrap,
#socialOrdersWrap {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin-inline: auto;
}

.table-scroll {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin-inline: auto;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.order-mobile-list {
  width: 100%;
  max-width: 760px;
  margin-inline: auto;
  display: none;
  gap: 10px;
}

.order-mobile-card {
  width: 100%;
  max-width: 760px;
  min-width: 0;
  margin-inline: auto;
  overflow: hidden;
  border: 1px solid var(--surface-border);
  background: var(--surface);
  border-radius: 14px;
  padding: 14px;
  display: grid;
  gap: 10px;
}

.order-mobile-top > div {
  min-width: 0;
  max-width: 100%;
}

.order-mobile-title,
.order-mobile-meta,
.order-mobile-card * {
  overflow-wrap: anywhere;
  word-break: break-word;
}

@media (min-width: 801px) {
  #ordersTableWrap,
  #socialOrdersWrap {
    overflow: hidden;
  }
}

.dash-card .sub {
  color: var(--grey);
  font-size: 13.5px;
  margin-bottom: 20px;
}

table.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

table.data-table th {
  text-align: left;
  font-family: var(--font-mono);
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--grey);
  padding: 10px 12px;
  border-bottom: 1.5px solid #eee;
}

table.data-table td {
  padding: 12px;
  border-bottom: 1px solid #f0eee5;
  vertical-align: middle;
}

table.data-table tr:last-child td {
  border-bottom: none;
}

/* admin-specific */
.admin-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 30px;
  flex-wrap: wrap;
}

.admin-tab {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  padding: 10px 18px;
  border-radius: 10px;
  border: none;
  background: var(--charcoal);
  color: #cfcfd2;
  cursor: pointer;
}

.admin-tab.is-active {
  background: var(--yellow);
  color: var(--black);
}

.admin-panel { display: none; }

.admin-panel.is-active { display: block; }

.data-table .delivery-update {
  margin-top: 8px;
  max-width: 320px;
}

/* ---------- Wallet panel (account dashboard) ---------- */
.wallet-balance-card {
  background: linear-gradient(135deg, var(--black), var(--charcoal-2));
  border-radius: 16px;
  padding: 26px 28px;
  color: var(--white);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.wallet-balance-card span {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: #cfcfd2;
}

.wallet-balance-card strong {
  font-family: var(--font-numeric);
  font-size: 34px;
  font-weight: 700;
  color: var(--yellow);
}

:root[data-theme="dark"] .data-table th {
  color: var(--grey);
  border-color: var(--surface-border);
}

:root[data-theme="dark"] .data-table td {
  border-color: var(--surface-border);
  color: var(--text);
}


/* ---------- Responsive dashboard selectors + order detail sheets ---------- */
.admin-dashboard-selector{display:none;margin-bottom:18px}
.admin-dashboard-selector label{display:block;font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--grey);margin-bottom:7px}
.admin-dashboard-selector select{width:100%;box-sizing:border-box;padding:13px 14px;border:1px solid var(--surface-border);border-radius:12px;background:var(--surface);color:var(--text);font:600 14px var(--font-body,Inter,sans-serif)}
.order-mobile-top{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.order-mobile-title{font-weight:800;line-height:1.25;overflow-wrap:anywhere}
.order-mobile-meta{font-size:12px;color:var(--grey);line-height:1.45}
.order-mobile-actions{display:flex;gap:8px;flex-wrap:wrap}
.pw-modal[hidden]{display:none}
.pw-modal{position:fixed;inset:0;z-index:10000;display:flex;align-items:center;justify-content:center;padding:18px}
.pw-modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.58);backdrop-filter:blur(4px)}
.pw-modal-panel{position:relative;width:min(620px,100%);max-height:min(84vh,760px);overflow:auto;background:var(--surface);color:var(--text);border:1px solid var(--surface-border);border-radius:22px;box-shadow:0 28px 80px rgba(0,0,0,.28);padding:24px}
.pw-modal-close{position:absolute;right:14px;top:12px;width:38px;height:38px;border:1px solid var(--surface-border);border-radius:50%;background:transparent;color:var(--text);font-size:27px;line-height:1;cursor:pointer}
.pw-modal-kicker{font:700 11px var(--font-mono);letter-spacing:.08em;color:var(--grey);margin:0 0 5px}
.pw-modal-panel h2{font-family:var(--font-display);font-size:22px;margin:0 48px 18px 0}
.detail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.detail-item{background:var(--off-white);border:1px solid var(--surface-border);border-radius:12px;padding:11px 12px;min-width:0}
.detail-item span{display:block;color:var(--grey);font:600 10px var(--font-mono);text-transform:uppercase;letter-spacing:.05em;margin-bottom:4px}
.detail-item strong,.detail-item div{display:block;overflow-wrap:anywhere;line-height:1.35}
:root[data-theme="dark"] .detail-item{background:#111;border-color:#2b2b2b}
@media(max-width:800px){
  .admin-dashboard-selector{display:block}
  .admin-tabs{display:none}
  .dash-card{padding:18px;border-radius:14px}
  .data-table.responsive-order-table{display:none}
  .order-mobile-list{display:grid}
  .detail-grid{grid-template-columns:1fr}
  .pw-modal{align-items:flex-end;padding:0}
  .pw-modal-panel{width:100%;max-height:88vh;border-radius:22px 22px 0 0;padding:22px 18px 28px}
}
@media(min-width:801px){
  .order-mobile-list{display:none!important}
}

/* ---------- order history: stable desktop + mobile layout ---------- */
.table-scroll .responsive-order-table {
  width: 100%;
  table-layout: fixed;
}

.table-scroll .responsive-order-table th,
.table-scroll .responsive-order-table td {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.table-scroll .responsive-order-table th:nth-child(1),
.table-scroll .responsive-order-table td:nth-child(1) { width: 11%; }
.table-scroll .responsive-order-table th:nth-child(2),
.table-scroll .responsive-order-table td:nth-child(2) { width: 20%; }
.table-scroll .responsive-order-table th:nth-child(3),
.table-scroll .responsive-order-table td:nth-child(3) { width: 20%; }
.table-scroll .responsive-order-table th:nth-child(4),
.table-scroll .responsive-order-table td:nth-child(4) { width: 11%; white-space: nowrap; }
.table-scroll .responsive-order-table th:nth-child(5),
.table-scroll .responsive-order-table td:nth-child(5) { width: 13%; }
.table-scroll .responsive-order-table th:nth-child(6),
.table-scroll .responsive-order-table td:nth-child(6) { width: 14%; }
.table-scroll .responsive-order-table th:nth-child(7),
.table-scroll .responsive-order-table td:nth-child(7) { width: 11%; }

.order-mobile-top .pill,
.data-table .pill {
  white-space: nowrap;
  word-break: normal;
  overflow-wrap: normal;
}

.order-mobile-card .order-mobile-actions .btn,
.order-mobile-card .order-mobile-actions a {
  flex: 0 0 auto;
}

@media (min-width: 801px) {
  #ordersWrap .table-scroll,
  #ordersTableWrap .table-scroll,
  #socialOrdersWrap .table-scroll {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
  }

  #ordersWrap .responsive-order-table,
  #ordersTableWrap .data-table,
  #socialOrdersWrap .data-table {
    max-width: 100%;
  }
}

@media (max-width: 800px) {
  #ordersWrap,
  #recentOrdersPreview,
  #ordersTableWrap,
  #socialOrdersWrap {
    width: 100%;
    max-width: 100%;
    overflow: visible;
  }

  .order-mobile-list {
    width: 100%;
    max-width: 100%;
    margin-inline: auto;
  }

  .order-mobile-card {
    width: 100%;
    box-sizing: border-box;
  }
}