/* ICNA Dawah App — design system ported from the HTML prototype. */
:root{
  --teal:#0E6E5E;
  --teal-dark:#0A4F44;
  --teal-deeper:#073D34;
  --gold:#C99A3C;
  --gold-light:#E4C277;
  --paper:#FAF8F3;
  --paper-dim:#F3EFE5;
  --card:#FFFFFF;
  --sage:#EAF2F0;
  --sage-line:#D7E6E2;
  --ink:#23302D;
  --ink-soft:#5B6B67;
  --ink-faint:#8B988F;
  --danger:#B3473B;
  --shadow: 0 1px 2px rgba(20,40,35,0.04), 0 6px 16px rgba(20,40,35,0.07);
  --radius: 16px;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:'Inter',system-ui,sans-serif;
  background:var(--paper);
  color:var(--ink);
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.serif{font-family:'Lora',Georgia,serif;}
button{font-family:inherit;}
a{color:inherit;}

/*
  The public order flow (Index/hero, Order, Payment, Confirmation) is built to work at any
  width it's given — a full browser tab, or an <iframe> a masjid/partner site embeds at
  whatever width and height they choose for it. There's no JS involved in the sizing: an
  iframe's document has its own viewport matching the iframe's rendered box, so the same
  width-based rules below apply identically whether this is the top-level page or embedded.

  .app-shell is the full-bleed canvas (always fills whatever space it's given).
  .app-shell-inner is the actual content column: full-bleed at phone/narrow-widget widths
  (unchanged from the original mobile design), then becomes a centered, card-like panel with
  room to breathe as the available width grows — so a wide desktop tab or a wide widget embed
  reads as "full screen", not a tiny mobile card floating in empty space.
*/
.app-shell{
  width:100%;
  min-height:100vh;
  min-height:100dvh;
  background:var(--paper);
  position:relative;
  display:flex;
  justify-content:center;
}
@media (min-width:640px){
  .app-shell{
    background:
      radial-gradient(circle at 15% 0%, rgba(14,110,94,0.06), transparent 55%),
      radial-gradient(circle at 100% 100%, rgba(201,154,60,0.07), transparent 45%),
      var(--paper-dim);
    padding:40px 24px;
    align-items:center;
  }
}

.app-shell-inner{
  width:100%;
  max-width:480px;
  min-height:100vh;
  min-height:100dvh;
  background:var(--paper);
  position:relative;
}
@media (min-width:640px){
  .app-shell-inner{
    max-width:600px;
    min-height:0;
    border-radius:22px;
    overflow:hidden;
    box-shadow:0 2px 8px rgba(20,40,35,0.06), 0 24px 60px rgba(10,40,35,0.14);
  }
}
@media (min-width:900px){
  .app-shell-inner{max-width:660px;}
}

/* ---------- hero / poster screen ---------- */
.hero{
  background:var(--teal-deeper);
  color:#fff;
  padding:48px 28px 64px;
  position:relative;
  overflow:hidden;
}
.hero::before{
  content:"";
  position:absolute;
  width:340px; height:340px;
  border:1px solid rgba(255,255,255,0.10);
  border-radius:50%;
  top:-120px; right:-140px;
}
.hero::after{
  content:"";
  position:absolute;
  width:220px; height:220px;
  border:1px solid rgba(255,255,255,0.08);
  border-radius:50%;
  top:-60px; right:-80px;
}
.hero-badge{
  width:56px; height:56px;
  border-radius:50%;
  background:var(--gold);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:28px;
  position:relative; z-index:2;
}
.hero-badge svg{width:28px; height:28px;}
.hero-eyebrow{
  font-size:12px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--gold-light);
  font-weight:600;
  margin:0 0 14px;
  position:relative; z-index:2;
}
.hero h1{
  font-size:30px;
  line-height:1.28;
  font-weight:600;
  margin:0 0 16px;
  position:relative; z-index:2;
  max-width:340px;
}
.hero p{
  font-size:15px;
  line-height:1.6;
  color:rgba(255,255,255,0.72);
  margin:0 0 32px;
  max-width:320px;
  position:relative; z-index:2;
}
.cta-primary{
  display:inline-flex;
  align-items:center;
  gap:10px;
  background:var(--gold);
  color:#2B210C;
  border:none;
  padding:15px 24px;
  font-size:15px;
  font-weight:700;
  border-radius:999px;
  cursor:pointer;
  position:relative; z-index:2;
  transition:transform .15s ease, box-shadow .15s ease;
  box-shadow:0 8px 20px rgba(0,0,0,0.18);
  text-decoration:none;
}
.cta-primary:hover{transform:translateY(-1px); box-shadow:0 10px 24px rgba(0,0,0,0.22); color:#2B210C;}
.cta-primary:active{transform:translateY(0px) scale(0.99);}
.cta-primary svg{width:16px; height:16px;}

.hero-qr-wrap{
  margin-top:36px;
  display:flex;
  align-items:center;
  gap:14px;
  position:relative; z-index:2;
}
.hero-qr{
  width:64px; height:64px;
  background:#fff;
  border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.hero-qr img, .hero-qr svg{width:44px; height:44px;}
.hero-qr-text{
  font-size:12.5px;
  color:rgba(255,255,255,0.6);
  line-height:1.5;
}

/* ---------- body content sections ---------- */
.section{padding:32px 28px;}
.section-tight{padding:8px 28px 32px;}
.eyebrow{
  font-size:11.5px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--teal);
  font-weight:700;
  margin:0 0 8px;
}
.section h2{
  font-size:21px;
  font-weight:600;
  color:var(--ink);
  margin:0 0 6px;
  line-height:1.3;
}
.section-sub{
  font-size:13.5px;
  color:var(--ink-soft);
  line-height:1.55;
  margin:0 0 24px;
}

/* ---------- form ---------- */
.field{margin-bottom:18px;}
.field label{
  display:block;
  font-size:13px;
  font-weight:600;
  color:var(--ink);
  margin-bottom:7px;
}
.field .hint{
  font-size:12px;
  color:var(--ink-faint);
  margin-top:6px;
  line-height:1.45;
}
.field input, .field textarea{
  width:100%;
  border:1.5px solid var(--sage-line);
  background:var(--sage);
  border-radius:12px;
  padding:13px 14px;
  font-size:15px;
  font-family:inherit;
  color:var(--ink);
  transition:border-color .15s ease, background .15s ease;
}
.field input::placeholder, .field textarea::placeholder{color:var(--ink-faint);}
.field input:focus, .field textarea:focus{
  outline:none;
  border-color:var(--teal);
  background:#fff;
}
.field input.error, .field textarea.error,
.field input.input-validation-error, .field textarea.input-validation-error{
  border-color:var(--danger);
  background:#FBEFED;
}
.error-msg, .field-validation-error{
  font-size:12px;
  color:var(--danger);
  margin-top:6px;
  display:block;
  font-weight:600;
}
.validation-summary-errors ul{margin:0; padding-left:18px; color:var(--danger); font-size:13px;}

.stepper{
  display:flex;
  align-items:center;
  gap:0;
  border:1.5px solid var(--sage-line);
  background:var(--sage);
  border-radius:12px;
  overflow:hidden;
}
.stepper button{
  width:46px; height:48px;
  border:none;
  background:transparent;
  font-size:20px;
  color:var(--teal);
  cursor:pointer;
  font-weight:600;
  flex-shrink:0;
}
.stepper button:hover{background:var(--sage-line);}
.stepper button:disabled{color:var(--ink-faint); cursor:not-allowed;}
.stepper-display{
  flex:1;
  text-align:center;
  font-size:17px;
  font-weight:700;
  color:var(--ink);
}
.stepper-display span{
  font-size:12px;
  font-weight:500;
  color:var(--ink-soft);
  display:block;
  margin-top:1px;
}

.progress-row{
  display:flex;
  gap:6px;
  margin-bottom:28px;
}
.progress-dot{
  height:4px;
  flex:1;
  border-radius:99px;
  background:var(--sage-line);
}
.progress-dot.done{background:var(--teal);}

.btn-block{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  background:var(--teal);
  color:#fff;
  border:none;
  padding:16px 20px;
  font-size:15px;
  font-weight:700;
  border-radius:12px;
  cursor:pointer;
  transition:background .15s ease, transform .1s ease;
  text-decoration:none;
}
.btn-block:hover{background:var(--teal-dark); color:#fff;}
.btn-block:active{transform:scale(0.99);}
.btn-block:disabled{opacity:0.6; cursor:not-allowed;}
.btn-block svg{width:16px; height:16px;}
.btn-ghost{
  width:100%;
  background:transparent;
  color:var(--ink-soft);
  border:none;
  padding:14px;
  font-size:14px;
  font-weight:600;
  cursor:pointer;
  margin-top:4px;
  text-decoration:none;
  display:block;
  text-align:center;
}
.btn-ghost:hover{color:var(--ink);}

/* ---------- order summary card ---------- */
.summary-card{
  background:var(--sage);
  border:1px solid var(--sage-line);
  border-radius:14px;
  padding:18px 20px;
  margin-bottom:22px;
}
.summary-row{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  padding:9px 0;
  font-size:14px;
}
.summary-row + .summary-row{border-top:1px solid var(--sage-line);}
.summary-label{color:var(--ink-soft);}
.summary-value{font-weight:600; color:var(--ink); text-align:right; max-width:62%;}

.price-card{
  background:var(--teal-deeper);
  border-radius:14px;
  padding:20px;
  color:#fff;
  margin-bottom:22px;
}
.price-row{
  display:flex;
  justify-content:space-between;
  font-size:13.5px;
  color:rgba(255,255,255,0.65);
  padding:6px 0;
}
.price-row.total{
  border-top:1px solid rgba(255,255,255,0.18);
  margin-top:8px;
  padding-top:14px;
  font-size:16px;
  font-weight:700;
  color:#fff;
}
.price-row.total .price-value{color:var(--gold-light);}

.badge-demo{
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:#FDF3DC;
  color:#8A6310;
  font-size:11px;
  font-weight:700;
  padding:5px 11px;
  border-radius:999px;
  margin-bottom:18px;
}
.badge-live{
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:#E1F0E8;
  color:#1D6A45;
  font-size:11px;
  font-weight:700;
  padding:5px 11px;
  border-radius:999px;
  margin-bottom:18px;
}

/* ---------- Stripe payment element host ---------- */
#payment-element{
  margin-bottom:18px;
}
.secure-note{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  color:var(--ink-faint);
  justify-content:center;
  margin-top:14px;
}
.secure-note svg{width:14px; height:14px; flex-shrink:0;}
#payment-message{
  font-size:13px;
  color:var(--danger);
  font-weight:600;
  margin:0 0 14px;
  display:none;
}
#payment-message.show{display:block;}

/* ---------- confirmation screen ---------- */
.confirm-wrap{
  text-align:center;
  padding:56px 28px 40px;
}
.ripple-wrap{
  position:relative;
  width:160px; height:160px;
  margin:0 auto 32px;
  display:flex; align-items:center; justify-content:center;
}
.ripple-ring{
  position:absolute;
  border-radius:50%;
  border:1.5px solid var(--sage-line);
}
.ripple-ring.r1{width:160px; height:160px;}
.ripple-ring.r2{width:120px; height:120px;}
.ripple-ring.r3{width:80px; height:80px; border-color:var(--sage-line);}
.ripple-center{
  width:64px; height:64px;
  border-radius:50%;
  background:var(--teal);
  display:flex; align-items:center; justify-content:center;
  position:relative; z-index:2;
  box-shadow:0 8px 20px rgba(14,110,94,0.25);
}
.ripple-center.failed{background:var(--danger); box-shadow:0 8px 20px rgba(179,71,59,0.25);}
.ripple-center svg{width:30px; height:30px;}
.confirm-wrap h2{
  font-size:24px;
  margin:0 0 10px;
}
.confirm-wrap p{
  font-size:14.5px;
  color:var(--ink-soft);
  line-height:1.6;
  max-width:320px;
  margin:0 auto 28px;
}
.order-id-pill{
  display:inline-block;
  background:var(--sage);
  border:1px solid var(--sage-line);
  color:var(--ink-soft);
  font-size:12.5px;
  font-weight:600;
  padding:8px 16px;
  border-radius:999px;
  margin-bottom:28px;
  font-family:'Inter',monospace;
}

/* ---------- admin login ---------- */
.login-shell{
  max-width:400px;
  margin:64px auto;
  padding:36px 32px;
  background:#fff;
  border:1px solid var(--sage-line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.login-shell h2{margin:0 0 6px;}
.login-shell .section-sub{margin-bottom:24px;}

/* ---------- admin view ---------- */
/* Wrapper used only for the unauthenticated (Login) page, which has no sidebar. */
.admin-page{
  max-width:1080px;
  margin:0 auto;
  padding:0 28px;
  font-family:'DM Sans','Inter',system-ui,sans-serif;
}

.role-pill{
  font-size:10.5px;
  font-weight:700;
  letter-spacing:.02em;
  text-transform:uppercase;
  padding:4px 9px;
  border-radius:999px;
  background:var(--sage);
  color:var(--ink-soft);
  white-space:nowrap;
}
.role-pill.super{background:#FBF1DD; color:#8A6310;}
.user-avatar{
  display:flex;
  align-items:center;
  justify-content:center;
  width:28px;
  height:28px;
  border-radius:50%;
  background:var(--teal);
  color:#fff;
  font-size:12px;
  font-weight:700;
  font-family:'Lora',serif;
  flex-shrink:0;
}

/* ---------- admin: left navigation shell ---------- */
.admin-shell{
  display:flex;
  align-items:stretch;
  min-height:100vh;
  font-family:'DM Sans','Inter',system-ui,sans-serif;
}
.admin-sidebar{
  width:220px;
  flex-shrink:0;
  display:flex;
  flex-direction:column;
  background:var(--card);
  border-right:1px solid var(--sage-line);
  padding:20px 16px;
  position:sticky;
  top:0;
  height:100vh;
  overflow-y:auto;
}
.sidebar-brand{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:700;
  font-family:'Lora',serif;
  font-size:15.5px;
  color:var(--ink);
  padding:2px 8px 18px;
  margin-bottom:10px;
  border-bottom:1px solid var(--sage-line);
}
.sidebar-brand .dot{width:10px; height:10px; border-radius:50%; background:var(--teal); flex-shrink:0;}

.sidebar-nav{
  display:flex;
  flex-direction:column;
  gap:2px;
  flex:1;
}
.sidebar-link{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:10px;
  font-size:13.5px;
  font-weight:600;
  color:var(--ink-soft);
  text-decoration:none;
}
.sidebar-link svg{width:16px; height:16px; flex-shrink:0;}
.sidebar-link:hover{color:var(--ink); background:var(--sage);}
.sidebar-link.active{color:var(--teal); background:var(--sage);}

.sidebar-user{
  display:flex;
  align-items:center;
  gap:10px;
  border-top:1px solid var(--sage-line);
  padding-top:16px;
  margin-top:12px;
}
.sidebar-user-info{display:flex; flex-direction:column; gap:4px; flex:1; min-width:0;}
.sidebar-user-name{
  font-size:12.5px;
  font-weight:600;
  color:var(--ink);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.sidebar-user .role-pill{align-self:flex-start;}
.sidebar-signout{
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:center;
  width:30px;
  height:30px;
  border-radius:9px;
  border:1.5px solid var(--sage-line);
  background:#fff;
  color:var(--ink-soft);
}
.sidebar-signout:hover{border-color:var(--danger); color:var(--danger); background:#FBEFED;}
.sidebar-signout svg{width:15px; height:15px;}

.admin-main{
  flex:1;
  min-width:0;
  max-width:1100px;
  padding:28px 32px 60px;
}
/* The dashboard is a data-dense page that benefits from the whole screen — every other
   admin page keeps the 1100px reading-width cap above. */
.admin-main-full{max-width:none;}

.admin-wrap{padding:0;}
.admin-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:12px;
  margin-bottom:4px;
}
.admin-header h2{font-size:20px; margin:0;}
.admin-stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin:18px 0 22px;
}
.stat-box{
  background:var(--card);
  border:1px solid var(--sage-line);
  border-radius:12px;
  padding:14px 12px;
  text-align:center;
}
.stat-box .num{font-size:22px; font-weight:700; color:var(--teal); font-family:'Lora',serif;}
.stat-box .lbl{font-size:11px; color:var(--ink-soft); margin-top:2px; font-weight:600;}

.order-card{
  background:var(--card);
  border:1px solid var(--sage-line);
  border-radius:14px;
  padding:16px 16px;
  margin-bottom:12px;
}
.order-card-top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  margin-bottom:10px;
}
.order-name{font-weight:700; font-size:14.5px; color:var(--ink);}
.order-date{font-size:11.5px; color:var(--ink-faint); margin-top:2px;}
.status-pill{
  font-size:11px;
  font-weight:700;
  padding:4px 10px;
  border-radius:999px;
  white-space:nowrap;
}
.status-pill.pending{background:#FDF3DC; color:#8A6310;}
.status-pill.fulfilled{background:#E1F0E8; color:#1D6A45;}
.status-pill.awaitingpayment{background:#F1EEE7; color:#8B7E5E;}
.status-pill.paymentfailed{background:#FBEFED; color:var(--danger);}
.order-detail-row{
  display:flex;
  justify-content:space-between;
  font-size:13px;
  padding:4px 0;
  color:var(--ink-soft);
}
.order-detail-row strong{color:var(--ink); font-weight:600;}
.order-actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:12px;
}
.order-actions .btn-sm{flex:1; min-width:90px;}
.btn-sm{
  display:inline-block;
  padding:9px 14px;
  font-size:12.5px;
  font-weight:700;
  text-align:center;
  text-decoration:none;
  border-radius:9px;
  border:1.5px solid var(--sage-line);
  background:#fff;
  color:var(--ink-soft);
  cursor:pointer;
}
.btn-sm.primary{
  background:var(--teal);
  border-color:var(--teal);
  color:#fff;
}
.btn-sm.primary:hover{background:var(--teal-dark);}
.btn-sm:hover{border-color:var(--ink-faint);}

.staff-actions{
  display:flex;
  justify-content:flex-end;
  flex-wrap:wrap;
  gap:8px;
  margin-top:12px;
}
.staff-actions form{margin:0;}
.btn-xs{
  display:inline-block;
  padding:6px 12px;
  font-size:12px;
  font-weight:700;
  text-align:center;
  text-decoration:none;
  border-radius:8px;
  border:1.5px solid var(--sage-line);
  background:#fff;
  color:var(--ink-soft);
  cursor:pointer;
  white-space:nowrap;
}
.btn-xs:hover{border-color:var(--ink-faint); background:var(--sage);}
.btn-xs.danger{color:var(--danger); border-color:var(--danger);}
.btn-xs.danger:hover{background:#FBEFED;}
.address-edit-panel{margin-top:10px;}
.address-edit-panel textarea{
  width:100%;
  border:1.5px solid var(--sage-line);
  background:var(--sage);
  border-radius:12px;
  padding:10px 12px;
  font-size:13.5px;
  font-family:inherit;
  color:var(--ink);
  resize:vertical;
}
.address-edit-panel textarea:focus{outline:none; border-color:var(--teal);}

.neighbour-list{
  margin-top:14px;
  padding-top:12px;
  border-top:1px dashed var(--sage-line);
}
.neighbour-item{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:12.5px;
  padding:5px 0;
}
.neighbour-address{flex:1; color:var(--ink); font-weight:600;}
.neighbour-distance{white-space:nowrap; color:var(--ink-faint); font-size:11.5px;}
.neighbour-remove{
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:center;
  width:30px;
  height:30px;
  padding:0;
  border-radius:50%;
  border:1.5px solid var(--sage-line);
  background:#fff;
  color:var(--ink-faint);
  font-size:19px;
  line-height:1;
  cursor:pointer;
}
.neighbour-remove:hover{border-color:var(--danger); color:var(--danger); background:#FBEFED;}

.empty-state{
  text-align:center;
  padding:60px 20px;
  color:var(--ink-faint);
}
.empty-state svg{width:40px; height:40px; margin-bottom:14px; opacity:0.5;}
.empty-state p{font-size:13.5px; margin:0;}

@media (max-width:380px){
  .hero h1{font-size:26px;}
  .section{padding:28px 20px;}
}

/* A little extra breathing room once .app-shell-inner has widened past the original
   phone-width design — same components, just given more room instead of stretching the
   phone layout edge-to-edge. */
@media (min-width:640px){
  .hero{padding:56px 40px 72px;}
  .hero h1{font-size:34px; max-width:400px;}
  .hero p{max-width:380px;}
  .section{padding:36px 40px;}
  .section-tight{padding:8px 40px 36px;}
  .confirm-wrap{padding:64px 40px 48px;}
}

/* ---------- admin: responsive ---------- */
@media (max-width:900px){
  .admin-page{padding:0 20px;}
}

/* Below this width the fixed-width left sidebar becomes a horizontal top bar instead —
   there isn't room to give up 220px of a phone/tablet screen to a rail. */
@media (max-width:860px){
  .admin-shell{flex-direction:column;}
  .admin-sidebar{
    width:100%;
    height:auto;
    position:static;
    flex-direction:row;
    align-items:center;
    flex-wrap:wrap;
    gap:10px 16px;
    border-right:none;
    border-bottom:1px solid var(--sage-line);
    padding:14px 20px;
  }
  .sidebar-brand{border-bottom:none; margin:0; padding:0;}
  .sidebar-nav{flex-direction:row; flex:0 1 auto; flex-wrap:wrap; gap:4px;}
  .sidebar-user{border-top:none; margin:0 0 0 auto; padding:0;}
  .sidebar-user-info{display:none;}
  .admin-main{max-width:none; padding:20px 20px 48px;}
}
@media (max-width:600px){
  .admin-page{padding:0 16px;}
  .sidebar-brand{font-size:14.5px;}
  .admin-stats{grid-template-columns:repeat(3,1fr); gap:8px;}
  .stat-box{padding:12px 8px;}
  .stat-box .num{font-size:18px;}
  .stat-box .lbl{font-size:10px;}
}
@media (max-width:480px){
  .admin-header{flex-direction:column; align-items:stretch;}
  .admin-header > a.btn-sm,
  .admin-header > button.btn-sm{width:100%;}
  .admin-sidebar{padding:12px 14px;}
  .sidebar-link{padding:8px 10px; font-size:12.5px;}
}

/* ---------- admin: dashboard ---------- */
.dash-section{margin-bottom:32px;}
.dash-section-title{
  font-family:'Lora',Georgia,serif;
  font-size:15px;
  font-weight:700;
  color:var(--ink);
  margin:0 0 14px;
}
.dash-section-sub{
  font-family:'Inter',system-ui,sans-serif;
  font-size:12px;
  font-weight:500;
  color:var(--ink-faint);
}

/* -- KPI tiles -- */
.kpi-row{display:grid; grid-template-columns:repeat(5,1fr); gap:12px;}
.kpi-row-3{grid-template-columns:repeat(3,1fr);}
.kpi-tile{
  background:var(--card);
  border:1px solid var(--sage-line);
  border-radius:14px;
  padding:16px 16px;
}
.kpi-tile-attention{border-color:var(--gold-light); background:#FDF8EE;}
.kpi-label{
  font-size:11.5px;
  font-weight:700;
  color:var(--ink-soft);
  text-transform:uppercase;
  letter-spacing:.02em;
  margin-bottom:8px;
}
.kpi-value{
  font-family:'Inter','DM Sans',system-ui,sans-serif;
  font-size:24px;
  font-weight:700;
  color:var(--ink);
  line-height:1.1;
}
.kpi-tile-attention .kpi-value{color:#8A6310;}
.kpi-sub{font-size:11px; color:var(--ink-faint); margin-top:6px; line-height:1.4;}

/* -- period table -- */
.table-card{
  background:var(--card);
  border:1px solid var(--sage-line);
  border-radius:14px;
  overflow-x:auto;
}
.period-table, .data-table{width:100%; border-collapse:collapse; font-size:13px;}
.period-table th, .data-table th{
  text-align:left;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.02em;
  color:var(--ink-soft);
  font-weight:700;
  padding:12px 16px;
  border-bottom:1px solid var(--sage-line);
  background:var(--sage);
  white-space:nowrap;
}
.period-table td, .data-table td{
  padding:11px 16px;
  border-bottom:1px solid var(--sage-line);
  color:var(--ink);
  white-space:nowrap;
}
.period-table tr:last-child td, .data-table tr:last-child td{border-bottom:none;}
.period-label{font-weight:600;}
.period-table td:not(:first-child), .data-table td:not(:first-child){
  font-variant-numeric:tabular-nums;
  font-weight:600;
}

/* -- trend charts: one full-width card per row -- */
.trend-grid{display:grid; grid-template-columns:1fr; gap:18px; margin-bottom:14px;}
.trend-card{
  background:var(--card);
  border:1px solid var(--sage-line);
  border-radius:14px;
  padding:22px 26px 18px;
}
.trend-card-head{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  flex-wrap:wrap;
  gap:6px 10px;
  margin-bottom:20px;
}
.trend-title{
  font-size:14px;
  font-weight:700;
  color:var(--ink);
  text-transform:uppercase;
  letter-spacing:.02em;
}
.trend-current{font-size:12.5px; color:var(--ink-soft); font-weight:600; white-space:nowrap;}

.bar-chart{
  display:flex;
  align-items:flex-end;
  gap:3px;
  height:120px;
  padding-top:20px; /* headroom for the direct value label above the tallest bar(s) */
}
/* Bigger variant used by the full-width trend cards. */
.bar-chart-lg{height:260px; padding-top:28px; gap:4px;}
.bar-col{
  flex:1;
  min-width:0;
  height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-end;
  position:relative;
  cursor:default;
}
.bar-col:focus{outline:none;}
.bar-value{
  font-size:10px;
  font-weight:700;
  color:var(--ink);
  margin-bottom:4px;
  white-space:nowrap;
}
.bar-chart-lg .bar-value{font-size:12px;}
.bar{
  width:100%;
  max-width:18px;
  min-height:2px;
  background:var(--bar-color, var(--teal));
  border-radius:4px 4px 0 0;
  transition:filter .1s ease;
}
.bar-chart-lg .bar{max-width:24px; border-radius:5px 5px 0 0;}
.bar-col:hover .bar{filter:brightness(0.88);}
.bar-col:focus-visible .bar{box-shadow:0 0 0 2px #fff, 0 0 0 4px var(--bar-color, var(--teal));}
.bar-chart-axis{
  display:flex;
  justify-content:space-between;
  font-size:10.5px;
  color:var(--ink-faint);
  margin-top:6px;
  font-weight:600;
}

.trend-table-toggle{margin-top:6px;}
.trend-table-toggle summary{
  cursor:pointer;
  font-size:12.5px;
  font-weight:600;
  color:var(--teal);
  padding:8px 2px;
  list-style:none;
}
.trend-table-toggle summary::-webkit-details-marker{display:none;}
.trend-table-toggle summary::before{content:"▸ "; font-size:10px;}
.trend-table-toggle[open] summary::before{content:"▾ ";}
.trend-table-toggle .table-card{margin-top:8px;}

/* -- shared chart tooltip -- */
.chart-tooltip{
  position:fixed;
  z-index:1000;
  background:var(--ink);
  color:#fff;
  padding:8px 12px;
  border-radius:8px;
  font-size:12px;
  pointer-events:none;
  box-shadow:0 6px 16px rgba(20,40,35,0.25);
  max-width:220px;
}
.chart-tooltip[hidden]{display:none;}
.tooltip-value{font-weight:700; font-size:13px; font-variant-numeric:tabular-nums;}
.tooltip-label{color:rgba(255,255,255,0.7); font-size:11px; margin-top:2px;}

/* -- order status breakdown (stacked bar + legend) -- */
.status-bar{
  display:flex;
  height:26px;
  border-radius:8px;
  overflow:hidden;
  background:var(--sage-line);
}
.status-seg{height:100%;}
.status-seg + .status-seg{border-left:2px solid var(--card);}
.status-legend{display:flex; flex-wrap:wrap; gap:12px 22px; margin-top:14px;}
.status-legend-item{
  display:flex;
  align-items:center;
  gap:7px;
  font-size:12.5px;
  color:var(--ink-soft);
  font-weight:600;
}
.status-legend-item strong{color:var(--ink); font-weight:700; font-variant-numeric:tabular-nums;}
.status-legend-swatch{width:10px; height:10px; border-radius:3px; flex-shrink:0;}

/* -- date filter bar -- */
.dash-filter-bar{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:10px 16px;
  margin:18px 0 8px;
}
.dash-filter-chips{display:flex; flex-wrap:wrap; gap:6px;}
.dash-chip{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:7px 14px;
  border-radius:999px;
  border:1.5px solid var(--sage-line);
  background:var(--card);
  color:var(--ink-soft);
  font-size:12.5px;
  font-weight:600;
  text-decoration:none;
  cursor:pointer;
  transition:border-color .12s ease, color .12s ease, background .12s ease;
}
.dash-chip:hover{border-color:var(--teal); color:var(--teal);}
.dash-chip.active{background:var(--teal); border-color:var(--teal); color:#fff;}
.dash-chip-custom svg{width:12px; height:12px;}
.dash-custom-form{
  display:flex;
  align-items:flex-end;
  gap:10px;
  background:var(--card);
  border:1.5px solid var(--sage-line);
  border-radius:12px;
  padding:10px 14px;
  flex-wrap:wrap;
}
.dash-custom-field{
  display:flex;
  flex-direction:column;
  gap:4px;
  font-size:11px;
  font-weight:700;
  color:var(--ink-soft);
  text-transform:uppercase;
  letter-spacing:.02em;
}
.dash-custom-field input[type="date"]{
  border:1.5px solid var(--sage-line);
  background:var(--sage);
  border-radius:8px;
  padding:7px 10px;
  font-size:13px;
  font-family:inherit;
  color:var(--ink);
}
.dash-custom-field input[type="date"]:focus{outline:none; border-color:var(--teal);}
.dash-custom-apply{
  padding:8px 16px;
  font-size:12.5px;
  font-weight:700;
  border-radius:8px;
  border:none;
  background:var(--teal);
  color:#fff;
  cursor:pointer;
}
.dash-custom-apply:hover{background:var(--teal-dark);}
.dash-filter-note{font-size:12px; color:var(--ink-faint); margin:0 0 26px; line-height:1.5;}

/* -- dashboard: responsive -- */
@media (max-width:900px){
  .kpi-row{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:600px){
  .kpi-row, .kpi-row-3{grid-template-columns:1fr 1fr;}
  .kpi-value{font-size:20px;}
  .kpi-tile{padding:13px 14px;}
  .period-table th, .data-table th, .period-table td, .data-table td{padding:9px 12px; font-size:12.5px;}
  .bar-chart-lg{height:190px;}
  .trend-card{padding:16px 16px 14px;}
  .dash-filter-bar{flex-direction:column;}
  .dash-custom-form{width:100%;}
}

/* ---------- admin: orders table ---------- */
.orders-table-card{margin-top:18px;}
.orders-table{width:100%; border-collapse:collapse; font-size:13.5px;}
.orders-table th{
  text-align:left;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.02em;
  color:var(--ink-soft);
  font-weight:700;
  padding:12px 14px;
  border-bottom:1px solid var(--sage-line);
  background:var(--sage);
  white-space:nowrap;
}
.orders-th-chevron{width:32px;}
.orders-th-actions{text-align:right;}
.orders-table td{
  padding:13px 14px;
  border-bottom:1px solid var(--sage-line);
  color:var(--ink);
  vertical-align:middle;
}
.orders-table tbody tr.orders-detail-row:last-child td{border-bottom:none;}

.order-row{cursor:pointer; transition:background .1s ease;}
.order-row:hover{background:var(--sage);}
.order-row:focus-visible{outline:2px solid var(--teal); outline-offset:-2px;}
.order-row.expanded{background:var(--sage);}
.orders-td-chevron{width:32px;}
.chevron-icon{width:15px; height:15px; color:var(--ink-faint); transition:transform .15s ease;}
.order-row.expanded .chevron-icon{transform:rotate(90deg); color:var(--teal);}
.orders-td-address{max-width:280px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.orders-td-nowrap{white-space:nowrap; font-variant-numeric:tabular-nums;}

.order-row-actions{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
  white-space:nowrap;
}
.row-action-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:42px;
  height:42px;
  flex-shrink:0;
  border-radius:10px;
  border:1.5px solid var(--sage-line);
  background:#fff;
  color:var(--ink-soft);
  cursor:pointer;
  transition:border-color .12s ease, color .12s ease, background .12s ease;
}
.row-action-btn svg{width:19px; height:19px;}
.row-action-btn:hover{border-color:var(--ink-faint); color:var(--ink);}
.row-action-btn.primary{background:var(--teal); border-color:var(--teal); color:#fff;}
.row-action-btn.primary:hover{background:var(--teal-dark); border-color:var(--teal-dark);}
.row-action-btn:disabled{opacity:0.55; cursor:not-allowed;}

.orders-detail-row td{background:var(--sage);}
.order-detail-panel{padding:14px 18px 18px;}

.orders-pagination{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:10px;
  margin-top:14px;
}
.orders-pagination-info{font-size:12.5px; color:var(--ink-soft); margin:0;}
.orders-pagination-controls{display:flex; align-items:center; gap:4px; flex-wrap:wrap;}
.page-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:32px;
  height:32px;
  padding:0 8px;
  border-radius:8px;
  border:1.5px solid var(--sage-line);
  background:#fff;
  color:var(--ink-soft);
  font-size:12.5px;
  font-weight:600;
  text-decoration:none;
  cursor:pointer;
  font-variant-numeric:tabular-nums;
}
.page-btn svg{width:14px; height:14px;}
.page-btn:hover{border-color:var(--teal); color:var(--teal);}
.page-btn.active{background:var(--teal); border-color:var(--teal); color:#fff; cursor:default;}
.page-btn.disabled{opacity:0.4; pointer-events:none;}
.page-ellipsis{color:var(--ink-faint); padding:0 4px; font-size:12.5px;}

@media (max-width:700px){
  .orders-td-address{max-width:140px;}
  .orders-table th, .orders-table td{padding:10px 10px;}
}
@media (max-width:480px){
  .orders-pagination{flex-direction:column; align-items:flex-start;}
}