/* ═══════════════════════════════════════════════════════════════
   ALLOVE DASHBOARD STYLESHEET
   Version: v11 (LOCKED)
   Scope: Customer / Branch / Mall (theme via .dash-* class)
   Notes:
     - All class names prefixed with .ad- to avoid collisions
     - Desktop: 4-hub grid · Mobile: pills stack 1-column
     - Pills inherit column color (no special accents)
   ═══════════════════════════════════════════════════════════════ */

/* ─── ROOT TOKENS ─── */
.ad-root {
  --ad-radius-sm: 7px;
  --ad-radius-md: 10px;
  --ad-radius-lg: 14px;
  --ad-shadow-sm: 0 1px 3px rgba(0, 0, 0, .06);
  --ad-shadow-md: 0 2px 6px rgba(0, 0, 0, .08);
  --ad-text-primary: #0f172a;
  --ad-text-secondary: #64748b;
  --ad-border: #e2e8f0;
  --ad-bg: #f8fafc;
  font-family: 'Sarabun', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: var(--ad-text-primary);
  background: var(--ad-bg);
  min-height: 100vh;
  padding: 14px;
  box-sizing: border-box;
}

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

.ad-frame {
  max-width: 1200px;
  margin: 0 auto;
  border: 0.5px solid var(--ad-border);
  border-radius: var(--ad-radius-lg);
  padding: 14px;
  background: #fff;
}

/* ─── HEADER (ID BAR) — themed per system ─── */
.ad-id-bar {
  padding: 13px 16px;
  border-radius: var(--ad-radius-md);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: #fff;
  position: relative;
}
.ad-id-left { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.ad-id-status { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.ad-id-name { font-size: 19px; font-weight: 700; letter-spacing: 1px; line-height: 1.1; }
.ad-id-user {
  background: rgba(255, 255, 255, .18);
  padding: 6px 12px;
  border-radius: var(--ad-radius-sm);
  font-size: 11.5px;
  font-weight: 500;
  white-space: nowrap;
}

/* CUSTOMER theme — burgundy */
.dash-customer .ad-id-bar { background: linear-gradient(135deg, #4a0e1a 0%, #8B1A2B 100%); }
.dash-customer .ad-id-status { background: #4ade80; box-shadow: 0 0 0 3px rgba(74, 222, 128, .3); }

/* BRANCH theme — gold */
.dash-branch .ad-id-bar {
  background: linear-gradient(135deg, #8B6914 0%, #B8860B 35%, #C9A961 65%, #92700c 100%);
  color: #2C1810;
  border: 1px solid rgba(146, 112, 12, .4);
  box-shadow: 0 4px 14px rgba(146, 112, 12, .3),
              inset 0 1px 0 rgba(255, 255, 255, .35),
              inset 0 -1px 0 rgba(0, 0, 0, .15);
}
.dash-branch .ad-id-status { background: #16a34a; box-shadow: 0 0 0 3px rgba(22, 163, 74, .4), 0 0 0 4px rgba(255, 255, 255, .3); }
.dash-branch .ad-id-name { text-shadow: 0 1px 0 rgba(255, 255, 255, .25); }
.dash-branch .ad-id-user {
  background: rgba(44, 24, 16, .85);
  color: #fff;
  border: 1px solid rgba(201, 169, 97, .5);
}

/* MALL theme — luxury navy */
.dash-mall .ad-id-bar {
  background: linear-gradient(135deg, #0a1530 0%, #142141 50%, #1c2a55 100%);
  padding: 14px 18px;
  border: 1px solid rgba(201, 169, 97, .3);
  box-shadow: 0 4px 14px rgba(10, 21, 48, .45),
              inset 0 1px 0 rgba(201, 169, 97, .15);
  overflow: hidden;
}
.dash-mall .ad-id-bar::before,
.dash-mall .ad-id-bar::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  background: linear-gradient(90deg, transparent 5%, #C9A961 50%, transparent 95%);
}
.dash-mall .ad-id-bar::before { top: 0; height: 1px; opacity: .7; }
.dash-mall .ad-id-bar::after  { bottom: 0; height: 2px; opacity: .8; }
.dash-mall .ad-id-status { background: #C9A961; box-shadow: 0 0 0 3px rgba(201, 169, 97, .3), 0 0 12px rgba(201, 169, 97, .6); }
.dash-mall .ad-id-name {
  background: linear-gradient(135deg, #fff 0%, #C9A961 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.dash-mall .ad-id-user {
  background: rgba(201, 169, 97, .15);
  color: #C9A961;
  border: 1px solid rgba(201, 169, 97, .4);
}

/* ─── ACTION ROW ─── */
.ad-actrow { display: flex; gap: 6px; margin-bottom: 10px; flex-wrap: wrap; }
.ad-act {
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 11.5px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 6px;
  color: #fff;
  text-decoration: none;
  border: 0;
  cursor: pointer;
  transition: filter .15s ease;
}
.ad-act:hover { filter: brightness(1.1); }
.ad-act-store { background: #16a34a; }
.ad-act-team  { background: #7c3aed; }
.ad-act-hero  { background: #C9A961; color: #2C1810; }

.ad-act-support {
  background: linear-gradient(135deg, #0c4a6e 0%, #075985 100%);
  font-weight: 600;
  border: 1.5px solid #38bdf8;
  box-shadow: 0 2px 6px rgba(7, 89, 133, .3);
  position: relative;
  padding-right: 14px;
}
.ad-act-support::before {
  content: '✓';
  position: absolute;
  top: -5px; right: -5px;
  width: 14px; height: 14px;
  background: #16a34a;
  font-size: 9px;
  font-weight: 700;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid #fff;
}

.ad-act-notif {
  background: linear-gradient(135deg, #15803d 0%, #16a34a 100%);
  font-weight: 500;
  position: relative;
  padding-right: 18px;
}
.ad-act-notif .ad-badge {
  position: absolute;
  top: -5px; right: -3px;
  min-width: 16px; height: 16px;
  background: #ef4444;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  border: 1.5px solid #fff;
}

.ad-act-out {
  background: linear-gradient(135deg, #b91c1c 0%, #dc2626 100%);
  font-weight: 600;
  border: 1.5px solid #fca5a5;
  box-shadow: 0 2px 4px rgba(220, 38, 38, .25);
}

/* ─── PROMO STRIP (Branch + Mall) ─── */
.ad-promo {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-bottom: 10px;
}
.ad-promo-btn {
  background: #fef3c7;
  border: 1px solid #fcd34d;
  border-radius: var(--ad-radius-sm);
  padding: 8px 10px;
  font-size: 10.5px;
  color: #78350f;
  font-weight: 500;
  text-align: center;
  line-height: 1.3;
  text-decoration: none;
  transition: background .15s ease;
  cursor: pointer;
}
.ad-promo-btn:hover { background: #fde68a; }
.ad-promo-btn b {
  display: block;
  font-size: 11.5px;
  font-weight: 500;
  color: #451a03;
  margin-top: 2px;
}

/* ─── HUB GRID ─── */
.ad-hub-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 10px;
}
.ad-hub {
  display: block;
  border-radius: var(--ad-radius-lg);
  padding: 11px;
  border: 2.5px solid;
  background: #fff;
}
.ad-hub-head {
  display: flex;
  align-items: center;
  gap: 9px;
  padding-bottom: 6px;
  margin-bottom: 6px;
  border-bottom: 1.5px solid rgba(0, 0, 0, .06);
}
.ad-hub-bigi {
  width: 38px; height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  color: #fff;
  flex-shrink: 0;
}
.ad-hub-title { font-size: 13px; font-weight: 500; line-height: 1.15; }
.ad-hub-en { font-size: 9.5px; font-weight: 400; opacity: .7; margin-top: 1px; }

.ad-hub-pills { display: flex; flex-direction: column; gap: 4px; }
.ad-pill {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 9px;
  border-radius: var(--ad-radius-sm);
  border: 1.2px solid;
  background: #fff;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  transition: filter .15s ease, transform .1s ease;
}
.ad-pill:hover { filter: brightness(.97); transform: translateX(2px); }
.ad-pi {
  width: 22px; height: 22px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: #fff;
  flex-shrink: 0;
}

/* HUB color themes (UNIFIED — pills inherit column color) */
.ad-c-red { background: #fef2f2; border-color: #dc2626; }
.ad-c-red .ad-hub-bigi, .ad-c-red .ad-pi { background: #dc2626; }
.ad-c-red .ad-hub-title, .ad-c-red .ad-hub-en, .ad-c-red .ad-pill { color: #7f1d1d; }
.ad-c-red .ad-pill { border-color: #fca5a5; }

.ad-c-amber { background: #fffbeb; border-color: #d97706; }
.ad-c-amber .ad-hub-bigi, .ad-c-amber .ad-pi { background: #d97706; }
.ad-c-amber .ad-hub-title, .ad-c-amber .ad-hub-en, .ad-c-amber .ad-pill { color: #78350f; }
.ad-c-amber .ad-pill { border-color: #fcd34d; }

.ad-c-blue { background: #eff6ff; border-color: #2563eb; }
.ad-c-blue .ad-hub-bigi, .ad-c-blue .ad-pi { background: #2563eb; }
.ad-c-blue .ad-hub-title, .ad-c-blue .ad-hub-en, .ad-c-blue .ad-pill { color: #1e3a8a; }
.ad-c-blue .ad-pill { border-color: #93c5fd; }

.ad-c-green { background: #f0fdf4; border-color: #16a34a; }
.ad-c-green .ad-hub-bigi, .ad-c-green .ad-pi { background: #16a34a; }
.ad-c-green .ad-hub-title, .ad-c-green .ad-hub-en, .ad-c-green .ad-pill { color: #14532d; }
.ad-c-green .ad-pill { border-color: #86efac; }

/* ─── STATS ─── */
.ad-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
.ad-stat {
  background: #fff;
  border: 1px solid var(--ad-border);
  border-radius: 9px;
  padding: 9px 11px;
  display: flex;
  align-items: center;
  gap: 9px;
}
.ad-stat-icon {
  width: 32px; height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: #fff;
  flex-shrink: 0;
}
.ad-stat-text { display: flex; flex-direction: column; min-width: 0; }
.ad-stat-l { font-size: 10px; color: var(--ad-text-secondary); line-height: 1.2; }
.ad-stat-v {
  font-size: 15px;
  font-weight: 600;
  color: var(--ad-text-primary);
  margin-top: 1px;
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE — viewport ≤ 768px
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .ad-root { padding: 8px; }
  .ad-frame { padding: 10px; }

  /* ID bar — title 1 line, user badge below */
  .ad-id-bar {
    flex-direction: column;
    align-items: flex-start;
    padding: 11px 13px;
  }
  .ad-id-left { width: 100%; }
  .ad-id-name { font-size: 15px; letter-spacing: .5px; }
  .ad-id-user {
    margin-top: 6px;
    align-self: flex-start;
    font-size: 10.5px;
    padding: 4px 9px;
  }

  /* Action row — wraps */
  .ad-act {
    padding: 6px 10px;
    font-size: 10.5px;
  }

  /* Promo strip — 2x2 */
  .ad-promo { grid-template-columns: 1fr 1fr; }

  /* Hubs — single column stack, pills stay 1-column inside */
  .ad-hub-grid { grid-template-columns: 1fr; }
  .ad-hub-bigi { width: 32px; height: 32px; font-size: 16px; }
  .ad-hub-title { font-size: 12px; }
  .ad-pill { font-size: 11px; padding: 7px 9px; }

  /* Stats — 2x2 */
  .ad-stats { grid-template-columns: 1fr 1fr; }
}

/* ═══════════════════════════════════════════════════════════════
   ACCESSIBILITY
   ═══════════════════════════════════════════════════════════════ */
.ad-pill:focus-visible,
.ad-act:focus-visible,
.ad-promo-btn:focus-visible {
  outline: 2px solid #0ea5e9;
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .ad-pill, .ad-act, .ad-promo-btn { transition: none; }
}