/* ============================================================================
   JUST4DESI — ADMIN / DASHBOARD DESIGN SYSTEM
   Surfaces: Admin (999) · Vendor/Business (777) · User (333) · Team/Franchisee (555)
   Login, error pages and every page after authentication share this system.
   Palette : Royal Purple (structure) + Marigold Orange (action) + Red (discount/danger)
   Fonts   : Poppins (headings/numbers) · Inter (body/UI)
   Source  : Documents/Design-System/BRAND-GUIDELINES.md + BACKEND-GUIDE.md Part D
   ============================================================================ */

:root {
  /* ---- Purple (brand / structure) ---- */
  --jd-purple-900:#34134f;
  --jd-purple-800:#3f1a63;
  --jd-purple-700:#54227f;   /* primary action */
  --jd-purple-600:#6a2d9e;

  /* ---- Orange (savings / energy) ---- */
  --jd-orange-600:#e8780f;
  --jd-orange-500:#f4901e;   /* accent action */
  --jd-orange-100:#fdecd6;

  /* ---- Red (discount values / danger only) ---- */
  --jd-red-600:#cc3355;

  /* ---- Neutrals & surfaces ---- */
  --jd-cream:#fdf7ec;
  --jd-gray-900:#22202a;
  --jd-gray-600:#6b6776;
  --jd-gray-300:#e4e0ea;
  --jd-gray-100:#f7f5fa;
  --jd-white:#ffffff;

  /* ---- Status ---- */
  --jd-status-active:#2fa84f;
  --jd-status-pending:#e8780f;
  --jd-status-suspended:#cc3355;
  --jd-status-draft:#6a2d9e;

  /* ---- Type ---- */
  --font-head:'Poppins',sans-serif;
  --font-body:'Inter',sans-serif;

  /* ---- Shape / elevation ---- */
  --jd-card-radius:14px;
  --jd-sm-radius:8px;
  --jd-pill-radius:20px;
  --jd-shadow-card:0 14px 32px rgba(52,19,79,.14);
  --jd-shadow-sm:0 4px 16px rgba(52,19,79,.08);
  --jd-shadow-lg:0 20px 50px rgba(52,19,79,.22);

  /* ---- Layout ---- */
  --sidebar-w:248px;
  --topbar-h:68px;
  --card-radius:14px;

  /* ---- Legacy aliases — keep any not-yet-migrated selector on-brand ---- */
  --terracotta:var(--jd-purple-700);
  --terracotta-dk:var(--jd-purple-800);
  --rust:var(--jd-red-600);
  --marigold:var(--jd-orange-500);
  --linen:var(--jd-gray-100);
  --charcoal:var(--jd-gray-900);
  --navy:var(--jd-purple-900);
  --navy-2:var(--jd-purple-800);
  --teal:var(--jd-status-active);
  --terra-tint:var(--jd-orange-100);
  --terra-soft:#f1e3fb;
  --line:var(--jd-gray-300);
  --muted:var(--jd-gray-600);
  --green:var(--jd-status-active);
  --indigo:var(--jd-purple-700);
  --slate:var(--jd-purple-900);
}

/* ════════════════════════════════════════════════════════════════════════
   BASE
════════════════════════════════════════════════════════════════════════ */
body.gd-admin-body, body.bg-linen {
  font-family: var(--font-body);
  background: var(--jd-gray-100);
  color: var(--jd-gray-900);
  font-size: 14px;
  margin: 0;
}
.gd-admin-body *, .bg-linen * { box-sizing: border-box; }
.gd-admin-body h1, .gd-admin-body h2, .gd-admin-body h3, .gd-admin-body h4, .gd-admin-body h5, .gd-admin-body h6,
.bg-linen h1, .bg-linen h2, .bg-linen h3, .bg-linen h4, .bg-linen h5, .bg-linen h6,
.gd-admin-body .font-head, .bg-linen .font-head {
  font-family: var(--font-head);
  font-weight: 700;
  color: var(--jd-gray-900);
  letter-spacing: 0;
  text-transform: none;
}
.gd-admin-body a, .bg-linen a { color: var(--jd-purple-700); }
.gd-admin-body a:hover, .bg-linen a:hover { color: var(--jd-purple-800); }

/* Prevent global anchor color from clobbering button/sidebar-item anchors */
.gd-admin-body a.btn-brand-primary, .bg-linen a.btn-brand-primary,
.gd-admin-body a.ad-btn-primary,     .bg-linen a.ad-btn-primary     { color: #fff; }
.gd-admin-body a.btn-brand-primary:hover, .bg-linen a.btn-brand-primary:hover,
.gd-admin-body a.ad-btn-primary:hover,    .bg-linen a.ad-btn-primary:hover   { color: #fff; }

.gd-admin-body a.btn-brand-accent, .bg-linen a.btn-brand-accent,
.gd-admin-body a.ad-btn-accent,    .bg-linen a.ad-btn-accent    { color: #fff; }
.gd-admin-body a.btn-brand-accent:hover, .bg-linen a.btn-brand-accent:hover { color: #fff; }

.gd-admin-body a.btn-brand-secondary, .bg-linen a.btn-brand-secondary,
.gd-admin-body a.ad-btn-outline,      .bg-linen a.ad-btn-outline      { color: var(--jd-gray-900); }

.gd-admin-body a.btn-brand-outline, .bg-linen a.btn-brand-outline { color: var(--jd-purple-700); }
.gd-admin-body a.btn-brand-outline:hover, .bg-linen a.btn-brand-outline:hover { color: #fff; }

.gd-admin-body a.btn-brand-danger, .bg-linen a.btn-brand-danger { color: var(--jd-red-600); }
.gd-admin-body a.btn-brand-danger:hover, .bg-linen a.btn-brand-danger:hover { color: #fff; }

.gd-admin-body a.ad-btn-dark, .bg-linen a.ad-btn-dark { color: #fff; }
.gd-admin-body a.ad-btn-dark:hover, .bg-linen a.ad-btn-dark:hover { color: #fff; }

.gd-admin-body a.sidebar-item, .bg-linen a.sidebar-item { color: rgba(255,255,255,.95); }
.gd-admin-body a.sidebar-item:hover, .bg-linen a.sidebar-item:hover { color: #fff; }
.gd-admin-body a.sidebar-item.active, .bg-linen a.sidebar-item.active { color: #fff; }

/* Two-tone wordmark, per Brand Guidelines §2 — never recolor to a single flat color */
.jd-logo { font-family: var(--font-head); font-weight: 800; font-size: 1.2rem; letter-spacing: -.2px; white-space: nowrap; text-decoration: none; }
.jd-logo .jd-just { color: var(--jd-purple-800); }
.jd-logo .jd-desi  { color: var(--jd-orange-500); }
.jd-logo.on-dark .jd-just { color: #fff; }
.jd-logo.on-dark .jd-desi { color: var(--jd-orange-500); }
.jd-logo-tag { display: block; font-family: var(--font-body); font-weight: 500; font-size: .62rem; letter-spacing: .04em; color: var(--jd-gray-600); margin-top: 1px; }
.jd-logo.on-dark + .jd-logo-tag, .on-dark .jd-logo-tag { color: rgba(255,255,255,.65); }

/* ════════════════════════════════════════════════════════════════════════
   LAYOUT SHELL
════════════════════════════════════════════════════════════════════════ */
.gd-shell { display: flex; min-height: 100vh; }

/* ---- Sidebar — purple 900→700 gradient (Part D.2) ---- */
.gd-sidebar {
  width: var(--sidebar-w);
  background: linear-gradient(180deg, var(--jd-purple-900), var(--jd-purple-700));
  background-image:
    radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(180deg, var(--jd-purple-900), var(--jd-purple-700));
  background-size: 22px 22px, 100% 100%;
  flex-shrink: 0;
  display: flex; flex-direction: column;
  position: fixed; top: 0; left: 0; bottom: 0;
  z-index: 1040;
  overflow-y: auto;
  transition: transform .25s ease;
}
.gd-sidebar::-webkit-scrollbar { width: 6px; }
.gd-sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 3px; }

.gd-sidebar-brand {
  display: flex; align-items: center; gap: 10px;
  padding: 20px 22px 16px; text-decoration: none;
  position: sticky; top: 0; z-index: 2;
  background: var(--jd-purple-900);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.gd-sidebar-brand .brand-dot {
  width: 38px; height: 38px; border-radius: 10px;
  background: var(--jd-orange-500);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(0,0,0,.25);
}
.gd-sidebar-brand .brand-dot span { color: var(--jd-purple-900); font-size: 17px; font-weight: 800; font-family: var(--font-head); }
.gd-sidebar-brand .brand-name { font-family: var(--font-head); font-weight: 800; font-size: 18px; line-height: 1.15; }
.gd-sidebar-brand .brand-name .jd-just { color: #fff; }
.gd-sidebar-brand .brand-name .jd-desi { color: var(--jd-orange-500); }
.gd-sidebar-brand .brand-role { display: block; font-family: var(--font-body); font-size: .66rem; font-weight: 600; letter-spacing: .04em; color: rgba(255,255,255,.55); text-transform: uppercase; margin-top: 1px; }

.sidebar-section-label {
  font-family: var(--font-body);
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.6px;
  color: rgba(255,255,255,.4); padding: 18px 22px 6px; display: block;
}
.sidebar-item {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 18px; margin: 2px 12px;
  border-radius: var(--jd-sm-radius); text-decoration: none;
  color: rgba(255,255,255,.95); font-size: 13.5px; font-weight: 600;
  font-family: var(--font-body);
  transition: background .2s, color .2s; cursor: pointer;
  border: none; background: none; width: calc(100% - 24px); text-align: left;
  position: relative;
}
.sidebar-item i:not(.caret) { font-size: 17px; width: 22px; text-align: center; flex-shrink: 0; }
.sidebar-item:hover { background: rgba(255,255,255,.08); color: #fff; }
.sidebar-item.active {
  background: rgba(255,255,255,.08); color: #fff;
  box-shadow: inset 3px 0 0 0 var(--jd-orange-500);
}
.sidebar-item.active i:not(.caret) { color: var(--jd-orange-500); }
.sidebar-item .caret { margin-left: auto; font-size: 13px; transition: transform .2s; opacity: .6; }
.sidebar-item[aria-expanded="true"] .caret { transform: rotate(180deg); }

.sidebar-sub { padding: 0 14px; margin-bottom: 4px; }
.sidebar-sub a {
  display: block; padding: 7px 16px 7px 52px; border-radius: var(--jd-sm-radius);
  color: rgba(255,255,255,.82); font-size: 12.5px; font-weight: 600;
  font-family: var(--font-body);
  text-decoration: none; transition: color .2s, background .2s;
}
.sidebar-sub a:hover { color: #fff; background: rgba(255,255,255,.06); }
.sidebar-sub a.active { color: var(--jd-orange-500); background: rgba(255,255,255,.06); }

.sidebar-badge {
  margin-left: auto; background: var(--jd-orange-500);
  color: #fff; font-size: 10px; font-weight: 800;
  border-radius: var(--jd-pill-radius); padding: 2px 8px; min-width: 22px; text-align: center;
}
.sidebar-divider { height: 1px; background: rgba(255,255,255,.08); margin: 14px 22px; }

/* ---- Content column ---- */
.gd-content { flex: 1; min-width: 0; margin-left: var(--sidebar-w); display: flex; flex-direction: column; }

/* ---- Topbar — white, Gray 300 border (Part D.2) ---- */
.gd-topbar {
  background: #fff; height: var(--topbar-h);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 24px;
  position: sticky; top: 0; z-index: 1030; border-bottom: 1px solid var(--jd-gray-300);
}
.topbar-left { display: flex; align-items: center; gap: 16px; min-width: 0; }
.topbar-toggle {
  background: none; border: none; cursor: pointer;
  width: 38px; height: 38px; display: flex; flex-direction: column;
  justify-content: center; gap: 5px; padding: 8px; border-radius: var(--jd-sm-radius);
  transition: background .2s; flex-shrink: 0;
}
.topbar-toggle:hover { background: var(--jd-gray-100); }
.topbar-toggle span { display: block; height: 2px; background: var(--jd-gray-900); border-radius: 2px; width: 100%; }
.topbar-toggle span:nth-child(2) { width: 70%; }

.breadcrumb-custom { display: flex; gap: 6px; align-items: center; font-size: 12px; color: var(--jd-gray-600); font-family: var(--font-body); min-width: 0; }
.breadcrumb-custom a { color: var(--jd-purple-700); text-decoration: none; }
.breadcrumb-custom a:hover { color: var(--jd-purple-800); text-decoration: underline; }
.breadcrumb-sep { color: var(--jd-gray-300); }

.topbar-search {
  display: flex; align-items: center; gap: 8px;
  background: var(--jd-gray-100); border-radius: var(--jd-pill-radius);
  padding: 8px 16px; width: 260px; border: 1px solid var(--jd-gray-300);
  transition: border-color .2s, box-shadow .2s;
}
.topbar-search:focus-within { border-color: var(--jd-purple-600); box-shadow: 0 0 0 3px rgba(106,45,158,.12); }
.topbar-search i { color: var(--jd-gray-600); font-size: 14px; }
.topbar-search input { border: none; background: none; outline: none; font-size: 13px; width: 100%; color: var(--jd-gray-900); font-family: var(--font-body); }

.topbar-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.topbar-icon-btn {
  width: 40px; height: 40px; border-radius: 12px; border: none;
  background: var(--jd-gray-100); color: var(--jd-gray-600);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 17px; position: relative; transition: background .2s, color .2s;
  text-decoration: none;
}
.topbar-icon-btn:hover { background: var(--jd-orange-100); color: var(--jd-orange-600); }
.notif-dot { width: 8px; height: 8px; background: var(--jd-red-600); border-radius: 50%; position: absolute; top: 7px; right: 7px; border: 2px solid #fff; }
.topbar-avatar {
  width: 40px; height: 40px; border-radius: 12px;
  background: var(--jd-purple-900); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 14px; cursor: pointer; font-family: var(--font-head);
  text-decoration: none; border: none;
}

/* ---- Main ---- */
.gd-main { flex: 1; padding: 28px; }

/* ---- Footer ---- */
.gd-dash-footer, footer.footer {
  background: #fff; border-top: 1px solid var(--jd-gray-300);
  padding: 18px 28px; font-family: var(--font-body);
}
.gd-dash-footer .text-slate, footer.footer .text-slate { color: var(--jd-purple-800); font-weight: 700; }
.gd-dash-footer a, footer.footer a.hover-indigo { color: var(--jd-gray-600); }
.gd-dash-footer a:hover, footer.footer a.hover-indigo:hover { color: var(--jd-purple-700); }

/* ---- Backdrop (mobile sidebar) ---- */
.gd-backdrop { display: none; position: fixed; inset: 0; background: rgba(34,32,42,.5); z-index: 1035; }

/* ════════════════════════════════════════════════════════════════════════
   PAGE HEADER
════════════════════════════════════════════════════════════════════════ */
.page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; flex-wrap: wrap; gap: 12px; }
.page-header-left h3 { font-size: 24px; font-weight: 700; color: var(--jd-gray-900); margin: 0 0 2px; font-family: var(--font-head); }

/* ════════════════════════════════════════════════════════════════════════
   STAT CARDS — KPI tiles (Part D.3)
════════════════════════════════════════════════════════════════════════ */
.stat-card {
  background: #fff; border-radius: var(--jd-card-radius);
  padding: 20px; border: 1px solid var(--jd-gray-300);
  display: flex; align-items: center; gap: 16px;
  box-shadow: var(--jd-shadow-sm);
  transition: box-shadow .2s, transform .2s; height: 100%;
}
.stat-card:hover { box-shadow: var(--jd-shadow-card); transform: translateY(-4px); }
.stat-icon { width: 54px; height: 54px; border-radius: var(--jd-sm-radius); display: flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0; }
.stat-icon.terra, .stat-icon.purple { background: #f1e3fb; color: var(--jd-purple-700); }
.stat-icon.marigold, .stat-icon.orange { background: var(--jd-orange-100); color: var(--jd-orange-600); }
.stat-icon.navy { background: #ece4f4; color: var(--jd-purple-900); }
.stat-icon.teal, .stat-icon.green { background: #e3f5e6; color: var(--jd-status-active); }
.stat-body h4 { font-family: var(--font-head); font-size: 26px; font-weight: 800; color: var(--jd-gray-900); margin: 0; }
.stat-body p { font-size: 12px; color: var(--jd-gray-600); margin: 0; font-weight: 500; font-family: var(--font-body); }
.stat-trend { margin-left: auto; font-size: 11px; font-weight: 700; display: flex; align-items: center; gap: 3px; font-family: var(--font-body); }
.stat-trend.up { color: var(--jd-status-active); }
.stat-trend.down { color: var(--jd-red-600); }

/* legacy compact stat-card (.lbl/.val/.delta/.accent-bar) kept for pages not yet migrated to the markup above */
.stat-card .lbl { font-size: .74rem; color: var(--jd-gray-600); font-weight: 600; text-transform: uppercase; letter-spacing: .5px; }
.stat-card .val { font-family: var(--font-head); font-weight: 800; font-size: 1.9rem; color: var(--jd-gray-900); line-height: 1.1; margin-top: 4px; }
.stat-card .delta { font-size: .76rem; font-weight: 600; margin-top: 2px; }
.stat-card .accent-bar { height: 3px; width: 34px; background: var(--jd-orange-500); border-radius: 2px; margin-top: 10px; }

/* ════════════════════════════════════════════════════════════════════════
   MANAGER / TABLE CARD + FILTERS BAR (Part D.3)
════════════════════════════════════════════════════════════════════════ */
.manager-card { background: #fff; border-radius: var(--jd-card-radius); border: 1px solid var(--jd-gray-300); box-shadow: var(--jd-shadow-sm); overflow: hidden; }
.manager-card-header { padding: 20px 24px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--jd-gray-300); flex-wrap: wrap; gap: 12px; }
.manager-card-header h4 { font-size: 19px; font-weight: 700; color: var(--jd-gray-900); margin: 0; font-family: var(--font-head); }
.manager-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.filters-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 16px 24px; background: var(--jd-gray-100); border-bottom: 1px solid var(--jd-gray-300); }
.filters-bar .tbl-filter, .filters-bar .tbl-search { background: #fff; }

.tbl-search { display: flex; align-items: center; gap: 8px; background: var(--jd-gray-100); border-radius: var(--jd-pill-radius); padding: 8px 14px; border: 1px solid var(--jd-gray-300); width: 230px; transition: border-color .2s; }
.tbl-search:focus-within { border-color: var(--jd-purple-600); }
.tbl-search i { color: var(--jd-gray-600); font-size: 13px; }
.tbl-search input { border: none; background: none; outline: none; font-size: 13px; width: 100%; font-family: var(--font-body); }

.tbl-filter { padding: 8px 16px; border-radius: var(--jd-pill-radius); border: 1px solid var(--jd-gray-300); background: #fff; font-size: 13px; color: var(--jd-gray-900); outline: none; cursor: pointer; font-family: var(--font-body); }
.tbl-filter:focus { border-color: var(--jd-purple-600); }

/* ════════════════════════════════════════════════════════════════════════
   BUTTONS — radius 8px, weight 600 (Brand Guidelines §5)
════════════════════════════════════════════════════════════════════════ */
.btn-brand-primary, .ad-btn-primary {
  background: var(--jd-purple-700); color: #fff; border: 1px solid var(--jd-purple-700);
  padding: .65rem 1.5rem; border-radius: var(--jd-sm-radius); font-size: 13.5px; font-weight: 600;
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  transition: background .2s, transform .2s, border-color .2s; text-decoration: none; font-family: var(--font-body);
}
.btn-brand-primary:hover, .ad-btn-primary:hover { background: var(--jd-purple-800); border-color: var(--jd-purple-800); color: #fff; }

.btn-brand-accent, .ad-btn-accent {
  background: var(--jd-orange-500); color: #fff; border: 1px solid var(--jd-orange-500);
  padding: .65rem 1.5rem; border-radius: var(--jd-sm-radius); font-size: 13.5px; font-weight: 600;
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  transition: background .2s, transform .2s; text-decoration: none; font-family: var(--font-body);
}
.btn-brand-accent:hover, .ad-btn-accent:hover { background: var(--jd-orange-600); color: #fff; }

.btn-brand-secondary, .ad-btn-outline {
  background: #fff; color: var(--jd-gray-900); border: 1.5px solid var(--jd-gray-300);
  padding: .6rem 1.45rem; border-radius: var(--jd-sm-radius); font-size: 13.5px; font-weight: 600;
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  transition: background .2s, color .2s, border-color .2s; text-decoration: none; font-family: var(--font-body);
}
.btn-brand-secondary:hover, .ad-btn-outline:hover { border-color: var(--jd-purple-700); color: var(--jd-purple-700); background: var(--jd-gray-100); }

.btn-brand-outline {
  background: transparent; color: var(--jd-purple-700); border: 1.5px solid var(--jd-purple-700);
  padding: .6rem 1.45rem; border-radius: var(--jd-sm-radius); font-size: 13.5px; font-weight: 600;
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  transition: background .2s, color .2s; text-decoration: none; font-family: var(--font-body);
}
.btn-brand-outline:hover { background: var(--jd-purple-700); color: #fff; }

.btn-brand-danger, .ad-btn-danger {
  background: #fff; color: var(--jd-red-600); border: 1.5px solid rgba(204,51,85,.4);
  padding: .6rem 1.45rem; border-radius: var(--jd-sm-radius); font-size: 13.5px; font-weight: 600;
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  transition: background .2s, color .2s; text-decoration: none; font-family: var(--font-body);
}
.btn-brand-danger:hover, .ad-btn-danger:hover { background: var(--jd-red-600); border-color: var(--jd-red-600); color: #fff; }

.ad-btn-dark { background: var(--jd-purple-900); color: #fff; border: 1px solid var(--jd-purple-900); padding: .65rem 1.5rem; border-radius: var(--jd-sm-radius); font-size: 13.5px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 7px; text-decoration: none; font-family: var(--font-body); transition: background .2s; }
.ad-btn-dark:hover { background: #000; color: #fff; }
.ad-btn { font-family: var(--font-body); font-weight: 600; font-size: .88rem; border-radius: var(--jd-sm-radius); padding: .65rem 1.2rem; border: 1px solid transparent; transition: filter .15s, background .15s; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }

.btn-sm.btn-brand-primary, .btn-sm.btn-brand-secondary, .btn-sm.btn-brand-outline, .btn-sm.btn-brand-accent { padding: .4rem 1rem; font-size: 12.5px; border-radius: 7px; }

.action-btn { width: 34px; height: 34px; border-radius: var(--jd-sm-radius); border: none; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; cursor: pointer; transition: filter .2s, background .2s; text-decoration: none; }
.action-btn.view   { background: #f1e3fb; color: var(--jd-purple-700); }
.action-btn.edit   { background: var(--jd-orange-100); color: var(--jd-orange-600); }
.action-btn.toggle { background: #e3f5e6; color: var(--jd-status-active); }
.action-btn.delete { background: #fbe1e8; color: var(--jd-red-600); }
.action-btn:hover  { filter: brightness(.94); }

/* ════════════════════════════════════════════════════════════════════════
   VERIFY TOGGLE — switch styled for is_verified flow (Part D.3)
════════════════════════════════════════════════════════════════════════ */
.verify-toggle { position: relative; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; }
.verify-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.verify-toggle .track { width: 40px; height: 22px; border-radius: 20px; background: var(--jd-gray-300); transition: background .2s; position: relative; flex-shrink: 0; }
.verify-toggle .track::after { content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform .2s; }
.verify-toggle input:checked + .track { background: var(--jd-status-active); }
.verify-toggle input:checked + .track::after { transform: translateX(18px); }
.verify-toggle .vt-label { font-size: 12px; font-weight: 600; color: var(--jd-gray-600); }
.verify-toggle input:checked ~ .vt-label { color: var(--jd-status-active); }

/* ════════════════════════════════════════════════════════════════════════
   TABLES — striped, sticky header, status pills (Part D.3)
════════════════════════════════════════════════════════════════════════ */
.admin-table, .ad-table { width: 100%; border-collapse: collapse; background: #fff; font-size: .86rem; }
.admin-table thead th, .ad-table th {
  padding: 13px 16px; text-align: left;
  font-family: var(--font-body);
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 1px; color: var(--jd-gray-600) !important;
  background: var(--jd-gray-100) !important; border-bottom: 1px solid var(--jd-gray-300);
  white-space: nowrap; position: sticky; top: 0; z-index: 1;
}
.admin-table thead th:first-child, .ad-table th:first-child { padding-left: 24px; }
.admin-table thead th:last-child, .ad-table th:last-child { padding-right: 24px; }
.admin-table tbody tr, .ad-table tbody tr { border-bottom: 1px solid var(--jd-gray-300); transition: background .15s; }
.admin-table tbody tr:nth-child(even), .ad-table tbody tr:nth-child(even) { background: #fbfafd; }
.admin-table tbody tr:last-child, .ad-table tbody tr:last-child td { border-bottom: none; }
.admin-table tbody tr:hover, .ad-table tbody tr:hover { background: #f1e3fb; }
.admin-table td, .ad-table td { padding: 14px 16px; vertical-align: middle; font-size: 13px; color: var(--jd-gray-900); }
.admin-table td:first-child, .ad-table td:first-child { padding-left: 24px; }
.admin-table td:last-child, .ad-table td:last-child { padding-right: 24px; }

.td-thumb { width: 46px; height: 46px; border-radius: var(--jd-sm-radius); object-fit: cover; border: 1px solid var(--jd-gray-300); }
.td-avatar { width: 46px; height: 46px; border-radius: var(--jd-sm-radius); flex-shrink: 0; background: var(--jd-purple-900); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 16px; font-family: var(--font-head); }
.td-title { font-family: var(--font-body); font-weight: 700; color: var(--jd-gray-900); display: block; }
.td-sub { font-size: 11px; color: var(--jd-gray-600); margin-top: 2px; display: block; }

/* ---- Status pills — rounded 20px (Part D.2 status colors) ---- */
.badge-status, .ad-badge { display: inline-flex; align-items: center; gap: 5px; padding: 5px 12px; border-radius: var(--jd-pill-radius); font-size: 11px; font-weight: 700; font-family: var(--font-body); }
.badge-status::before, .ad-badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.badge-active, .ad-badge.s-active     { background: #e3f5e6; color: var(--jd-status-active); }
.badge-pending, .ad-badge.s-pending   { background: var(--jd-orange-100); color: var(--jd-orange-600); }
.badge-inactive, .ad-badge.s-draft    { background: #f1e3fb; color: var(--jd-purple-700); }
.badge-blocked, .ad-badge.s-expired   { background: #fbe1e8; color: var(--jd-red-600); }
.badge-blocked, .ad-badge.s-suspended { background: #fbe1e8; color: var(--jd-red-600); }

.chip { display: inline-block; padding: 5px 12px; border-radius: var(--jd-pill-radius); font-size: 11px; font-weight: 700; font-family: var(--font-body); background: var(--jd-orange-100); color: var(--jd-orange-600); border: 1px solid #fbdcb4; }
.chip.purple, .chip.navy { background: #ece4f4; color: var(--jd-purple-900); border-color: #ddccea; }
.chip.marigold { background: var(--jd-orange-100); color: var(--jd-orange-600); border-color: #fbdcb4; }

.tbl-check { accent-color: var(--jd-purple-700); width: 15px; height: 15px; cursor: pointer; }

/* ════════════════════════════════════════════════════════════════════════
   PAGINATION — tinted purple (Part D.3)
════════════════════════════════════════════════════════════════════════ */
.pagination-wrap { display: flex; align-items: center; justify-content: space-between; padding: 16px 24px; border-top: 1px solid var(--jd-gray-300); flex-wrap: wrap; gap: 12px; }
.pagination-info { font-size: 12px; color: var(--jd-gray-600); font-family: var(--font-body); }
.pagination-controls { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.page-btn { min-width: 36px; height: 36px; border-radius: var(--jd-pill-radius); border: 1px solid var(--jd-gray-300); background: #fff; color: var(--jd-gray-900); font-size: 13px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: all .2s; text-decoration: none; padding: 0 10px; font-family: var(--font-body); }
.page-btn:hover { border-color: var(--jd-purple-600); color: var(--jd-purple-700); background: #f1e3fb; }
.page-btn.active { background: var(--jd-purple-700); color: #fff; border-color: var(--jd-purple-700); box-shadow: 0 4px 12px rgba(84,34,127,.35); }
.page-btn.disabled { opacity: .4; cursor: not-allowed; pointer-events: none; }

/* ════════════════════════════════════════════════════════════════════════
   FORMS — floating labels, section cards (Part D.3)
════════════════════════════════════════════════════════════════════════ */
.form-card { background: #fff; border-radius: var(--jd-card-radius); border: 1px solid var(--jd-gray-300); overflow: hidden; box-shadow: var(--jd-shadow-sm); }
.form-card-header { padding: 22px 28px; border-bottom: 1px solid var(--jd-gray-300); display: flex; align-items: center; gap: 14px; background: linear-gradient(135deg, var(--jd-purple-900), var(--jd-purple-700)); background-image: radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(135deg, var(--jd-purple-900), var(--jd-purple-700)); background-size: 20px 20px, 100% 100%; }
.form-card-header h4 { font-size: 20px; font-weight: 700; color: #fff; margin: 0; font-family: var(--font-head); }
.form-card-header p { font-size: 12px; color: rgba(255,255,255,.7); margin: 2px 0 0; font-family: var(--font-body); }
.form-card-header .header-icon { width: 46px; height: 46px; border-radius: 12px; background: var(--jd-orange-500); display: flex; align-items: center; justify-content: center; font-size: 20px; color: #fff; flex-shrink: 0; }
.form-card-body { padding: 28px; }
.form-section-title { font-family: var(--font-body); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 1.5px; color: var(--jd-purple-700); margin: 26px 0 16px; padding-bottom: 8px; border-bottom: 1px solid var(--jd-gray-300); display: block; }
.form-section-title:first-child { margin-top: 0; }
.form-group-admin { margin-bottom: 18px; }
.form-label-admin { display: block; font-family: var(--font-body); font-size: 12px; font-weight: 700; color: var(--jd-gray-900); margin-bottom: 7px; }
.form-label-admin .req { color: var(--jd-red-600); margin-left: 2px; }
.form-control-admin { width: 100%; padding: 11px 16px; border-radius: 10px; border: 1.5px solid var(--jd-gray-300); background: #fff; font-size: 13px; color: var(--jd-gray-900); outline: none; transition: border-color .2s, box-shadow .2s; font-family: var(--font-body); }
.form-control-admin:focus { border-color: var(--jd-purple-600); box-shadow: 0 0 0 3px rgba(106,45,158,.15); }
.form-control-admin.is-invalid { border-color: var(--jd-red-600); }
.form-control-admin::placeholder { color: #aaa6b4; }
textarea.form-control-admin { height: 110px; resize: vertical; line-height: 1.6; }
.form-hint { font-size: 11px; color: var(--jd-gray-600); margin-top: 5px; display: block; font-family: var(--font-body); }
.form-error { font-size: 11px; color: var(--jd-red-600); margin-top: 5px; display: block; font-weight: 600; }
.form-footer { padding: 20px 28px; border-top: 1px solid var(--jd-gray-300); display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: var(--jd-gray-100); }
.form-footer-left { margin-left: auto; display: flex; gap: 10px; flex-wrap: wrap; }

.ad-label { font-size: .8rem; font-weight: 600; color: var(--jd-gray-600); margin-bottom: 5px; display: block; }
.ad-input { width: 100%; background: #fff; border: 1.5px solid var(--jd-gray-300); border-radius: 10px; padding: 9px 13px; font-size: .88rem; color: var(--jd-gray-900); transition: border-color .15s, box-shadow .15s; }
.ad-input:focus { outline: none; border-color: var(--jd-purple-600); box-shadow: 0 0 0 3px rgba(106,45,158,.15); }

/* ════════════════════════════════════════════════════════════════════════
   ALERTS
════════════════════════════════════════════════════════════════════════ */
.admin-alert, .ad-alert { display: flex; align-items: flex-start; gap: 12px; padding: 14px 18px; border-radius: 10px; margin-bottom: 12px; font-size: 13px; font-weight: 500; font-family: var(--font-body); border: 1px solid transparent; }
.admin-alert i, .ad-alert i { font-size: 18px; flex-shrink: 0; margin-top: 1px; }
.admin-alert.success, .ad-alert.al-success { background: #e3f5e6; color: #1f7a44; border-color: rgba(47,168,79,.3); border-left: 4px solid var(--jd-status-active); }
.admin-alert.warning, .ad-alert.al-warning { background: var(--jd-orange-100); color: #9a5300; border-color: rgba(232,120,15,.3); border-left: 4px solid var(--jd-orange-500); }
.admin-alert.error, .ad-alert.al-danger { background: #fbe1e8; color: #a8264a; border-color: rgba(204,51,85,.3); border-left: 4px solid var(--jd-red-600); }
.admin-alert.info, .ad-alert.al-info { background: #f1e3fb; color: var(--jd-purple-800); border-color: rgba(84,34,127,.25); border-left: 4px solid var(--jd-purple-700); }

/* ════════════════════════════════════════════════════════════════════════
   MODALS — confirm destructive + create/edit + slide-over (Part D.3)
════════════════════════════════════════════════════════════════════════ */
.gd-modal .modal-content, .modal-content { border: none; border-radius: var(--jd-card-radius); overflow: hidden; box-shadow: var(--jd-shadow-lg); }
.gd-modal .modal-header, .modal-header {
  background: linear-gradient(135deg, var(--jd-purple-900), var(--jd-purple-700));
  padding: 18px 24px; border: none;
}
.gd-modal .modal-header .modal-title, .modal-header .modal-title { color: #fff; font-size: 17px; font-weight: 700; font-family: var(--font-head); }
.gd-modal .modal-header .btn-close, .modal-header .btn-close { filter: invert(1) brightness(2); opacity: .75; }
.gd-modal .modal-body, .modal-body { padding: 24px; font-size: 13.5px; color: var(--jd-gray-900); font-family: var(--font-body); line-height: 1.6; }
.gd-modal .modal-footer, .modal-footer { padding: 16px 24px; border-top: 1px solid var(--jd-gray-300); background: var(--jd-gray-100); gap: 10px; }

/* Destructive-confirm variant: red header instead of purple */
.modal-confirm-danger .modal-header { background: var(--jd-red-600); }

/* Slide-over variant (create/edit) — anchors the dialog to the right edge */
.modal.modal-slideover .modal-dialog { position: fixed; top: 0; right: 0; bottom: 0; margin: 0; width: 440px; max-width: 92vw; transform: translateX(100%); transition: transform .3s ease; }
.modal.modal-slideover.show .modal-dialog { transform: translateX(0); }
.modal.modal-slideover .modal-content { height: 100%; border-radius: 0; }
.modal.modal-slideover .modal-body { overflow-y: auto; flex: 1; }

/* ════════════════════════════════════════════════════════════════════════
   AUTH / LOGIN PAGES
════════════════════════════════════════════════════════════════════════ */
.auth-shell { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--jd-cream); background-image: radial-gradient(rgba(232,120,15,.12) 1.5px, transparent 1.5px); background-size: 24px 24px; padding: 32px 16px; font-family: var(--font-body); }
.auth-card { width: 100%; max-width: 440px; background: #fff; border-radius: var(--jd-card-radius); box-shadow: var(--jd-shadow-card); padding: 40px 36px; }
.auth-card-wide { max-width: 920px; display: grid; grid-template-columns: 1fr 1fr; padding: 0; overflow: hidden; }
.auth-side { background: linear-gradient(160deg, var(--jd-purple-900), var(--jd-purple-700)); background-image: radial-gradient(rgba(255,255,255,.08) 1.5px, transparent 1.5px), linear-gradient(160deg, var(--jd-purple-900), var(--jd-purple-700)); background-size: 22px 22px, 100% 100%; color: #fff; padding: 44px 38px; display: flex; flex-direction: column; justify-content: center; }
.auth-side h2 { font-family: var(--font-head); font-weight: 800; font-size: 1.6rem; margin-bottom: 10px; color: #fff; }
.auth-side p { color: rgba(255,255,255,.78); font-size: .92rem; line-height: 1.6; }
.auth-side ul { list-style: none; padding: 0; margin: 22px 0 0; }
.auth-side ul li { display: flex; gap: 10px; align-items: flex-start; font-size: .86rem; color: rgba(255,255,255,.85); margin-bottom: 12px; }
.auth-side ul li i { color: var(--jd-orange-500); margin-top: 2px; }
.auth-form-pane { padding: 44px 38px; }
.auth-logo-wrap { text-align: center; margin-bottom: 22px; }
.auth-logo-wrap .jd-logo { font-size: 1.6rem; }
.auth-heading { text-align: center; margin-bottom: 26px; }
.auth-heading h3 { font-family: var(--font-head); font-weight: 700; font-size: 1.3rem; margin-bottom: 4px; color: var(--jd-gray-900); }
.auth-heading p { font-size: .86rem; color: var(--jd-gray-600); margin: 0; }
.auth-divider { display: flex; align-items: center; gap: 10px; color: var(--jd-gray-600); font-size: .76rem; margin: 18px 0; text-transform: uppercase; letter-spacing: .05em; }
.auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--jd-gray-300); }
.auth-footnote { text-align: center; margin-top: 20px; font-size: .86rem; color: var(--jd-gray-600); }
.auth-footnote a { color: var(--jd-purple-700); font-weight: 600; }
.btn-auth-primary { width: 100%; background: var(--jd-purple-700); border: 1px solid var(--jd-purple-700); color: #fff; font-weight: 600; padding: .75rem 1.5rem; border-radius: var(--jd-sm-radius); font-family: var(--font-body); transition: background .2s; }
.btn-auth-primary:hover { background: var(--jd-purple-800); color: #fff; }
.auth-social-btn { width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px; padding: .65rem 1rem; border-radius: var(--jd-sm-radius); border: 1.5px solid var(--jd-gray-300); background: #fff; color: var(--jd-gray-900); font-weight: 600; font-size: .88rem; text-decoration: none; transition: border-color .2s, background .2s; }
.auth-social-btn:hover { border-color: var(--jd-purple-700); background: var(--jd-gray-100); color: var(--jd-gray-900); }

/* Floating-label inputs (auth + general forms reusing Bootstrap form-floating) */
.auth-form-pane .form-floating > .form-control,
.auth-form-pane .form-floating > .form-select {
  border-radius: var(--jd-sm-radius); border: 1.5px solid var(--jd-gray-300); height: 3.4rem;
}
.auth-form-pane .form-floating > .form-control:focus {
  border-color: var(--jd-purple-600); box-shadow: 0 0 0 3px rgba(106,45,158,.15);
}
.auth-form-pane .form-check-input:checked { background-color: var(--jd-purple-700); border-color: var(--jd-purple-700); }

/* ════════════════════════════════════════════════════════════════════════
   ERROR PAGES (403 / 404 / 500)
════════════════════════════════════════════════════════════════════════ */
.err-shell { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--jd-cream); padding: 40px 20px; font-family: var(--font-body); position: relative; overflow: hidden; }
.err-pattern { position: absolute; inset: 0; background-image: radial-gradient(rgba(232,120,15,.14) 1.5px, transparent 1.5px); background-size: 26px 26px; pointer-events: none; }
.err-card { position: relative; z-index: 1; text-align: center; max-width: 560px; }
.err-code { font-family: var(--font-head); font-weight: 800; font-size: clamp(5rem, 16vw, 8.5rem); line-height: 1; color: var(--jd-purple-800); letter-spacing: -2px; }
.err-code .accent { color: var(--jd-orange-500); }
.err-card h1.err-title { font-family: var(--font-head); font-weight: 700; font-size: clamp(1.4rem, 3vw, 1.9rem); color: var(--jd-gray-900); margin: 6px 0 12px; }
.err-card p.err-sub { color: var(--jd-gray-600); font-size: .98rem; line-height: 1.6; margin-bottom: 28px; }
.err-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: 26px; }
.err-quicklinks { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.err-quicklinks a { display: inline-flex; align-items: center; gap: 6px; padding: 7px 16px; border-radius: var(--jd-pill-radius); background: #fff; border: 1px solid var(--jd-gray-300); color: var(--jd-gray-900); font-size: .82rem; font-weight: 600; text-decoration: none; transition: border-color .2s, color .2s; }
.err-quicklinks a:hover { border-color: var(--jd-purple-700); color: var(--jd-purple-700); }
.err-footer { margin-top: 30px; font-size: .76rem; color: var(--jd-gray-600); }
.err-burst { position: absolute; opacity: .5; }
.err-logo-wrap { margin-bottom: 28px; }
.err-logo-wrap .jd-logo { font-size: 1.45rem; }
.err-badge { display: inline-flex; align-items: center; gap: 7px; background: var(--jd-orange-100); border: 1px solid rgba(232,120,15,.3); color: var(--jd-orange-600); border-radius: var(--jd-pill-radius); padding: 6px 16px; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 22px; }
.err-actions a.btn-brand-primary, .err-actions a.btn-brand-outline, .err-actions a.btn-brand-accent { padding: .7rem 1.6rem; }

/* ════════════════════════════════════════════════════════════════════════
   RESPONSIVE
════════════════════════════════════════════════════════════════════════ */
@media (max-width: 991.98px) {
  .gd-sidebar { transform: translateX(-100%); }
  .gd-shell.sidebar-open .gd-sidebar { transform: translateX(0); }
  .gd-shell.sidebar-open .gd-backdrop { display: block; }
  .gd-content { margin-left: 0; }
  .topbar-search { display: none; }
  .auth-card-wide { grid-template-columns: 1fr; max-width: 460px; }
  .auth-side { display: none; }
}
@media (max-width: 575.98px) {
  .gd-main { padding: 16px; }
  .manager-card-header { flex-direction: column; align-items: stretch; }
  .tbl-search { width: 100%; }
  .auth-card, .auth-form-pane { padding: 28px 22px; }
}

/* ════════════════════════════════════════════════════════════════════════
   BOOTSTRAP COMPONENT OVERRIDES
   Safety net so any page/Livewire/partial using stock Bootstrap classes
   (not yet migrated to the .gd-/.ad- component classes above) still
   renders in Just4Desi purple/orange rather than default Bootstrap blue.
════════════════════════════════════════════════════════════════════════ */
.gd-admin-body .btn-primary, .bg-linen .btn-primary,
.gd-admin-body .btn-indigo, .bg-linen .btn-indigo {
  background: var(--jd-purple-700) !important; border-color: var(--jd-purple-700) !important; color: #fff !important;
  font-weight: 600; border-radius: var(--jd-sm-radius); padding: .6rem 1.4rem; font-family: var(--font-body);
}
.gd-admin-body .btn-primary:hover, .bg-linen .btn-primary:hover,
.gd-admin-body .btn-indigo:hover, .bg-linen .btn-indigo:hover {
  background: var(--jd-purple-800) !important; border-color: var(--jd-purple-800) !important; color: #fff !important;
}
.gd-admin-body .text-indigo, .bg-linen .text-indigo, .gd-admin-body .text-terracotta, .bg-linen .text-terracotta { color: var(--jd-purple-700) !important; }
.gd-admin-body .font-playfair, .bg-linen .font-playfair, .gd-admin-body [class*="playfair"], .bg-linen [class*="playfair"] { font-family: var(--font-head) !important; text-transform: none; }
.gd-admin-body .font-nunito, .bg-linen .font-nunito { font-family: var(--font-body) !important; }

.gd-admin-body .btn-secondary, .bg-linen .btn-secondary {
  background: #f1e3fb !important; border-color: #e1c7f4 !important; color: var(--jd-purple-800) !important;
  font-weight: 600; border-radius: var(--jd-sm-radius); font-family: var(--font-body);
}
.gd-admin-body .btn-success, .bg-linen .btn-success {
  background: var(--jd-orange-500) !important; border-color: var(--jd-orange-500) !important; color: #fff !important;
  font-weight: 600; border-radius: var(--jd-sm-radius); font-family: var(--font-body);
}
.gd-admin-body .btn-success:hover, .bg-linen .btn-success:hover { background: var(--jd-orange-600) !important; border-color: var(--jd-orange-600) !important; }
.gd-admin-body .btn-danger, .bg-linen .btn-danger {
  background: #fff !important; border-color: rgba(204,51,85,.4) !important; color: var(--jd-red-600) !important;
  font-weight: 600; border-radius: var(--jd-sm-radius); font-family: var(--font-body);
}
.gd-admin-body .btn-danger:hover, .bg-linen .btn-danger:hover { background: var(--jd-red-600) !important; border-color: var(--jd-red-600) !important; color: #fff !important; }
.gd-admin-body .btn-outline-primary, .bg-linen .btn-outline-primary {
  background: transparent !important; border: 1.5px solid var(--jd-purple-700) !important; color: var(--jd-purple-700) !important;
  font-weight: 600; border-radius: var(--jd-sm-radius); font-family: var(--font-body);
}
.gd-admin-body .btn-outline-primary:hover, .bg-linen .btn-outline-primary:hover { background: var(--jd-purple-700) !important; color: #fff !important; }
.gd-admin-body .btn-outline-secondary, .bg-linen .btn-outline-secondary {
  border: 1.5px solid var(--jd-gray-300) !important; color: var(--jd-gray-900) !important; border-radius: var(--jd-sm-radius); font-family: var(--font-body); font-weight: 600;
}
.gd-admin-body .btn-outline-secondary:hover, .bg-linen .btn-outline-secondary:hover { border-color: var(--jd-purple-700) !important; color: var(--jd-purple-700) !important; background: var(--jd-gray-100) !important; }

/* Forms */
.gd-admin-body .form-control, .bg-linen .form-control,
.gd-admin-body .form-select, .bg-linen .form-select,
.gd-admin-body textarea.form-control, .bg-linen textarea.form-control {
  padding: 11px 16px; border-radius: 10px; border: 1.5px solid var(--jd-gray-300); background: #fff;
  font-size: 13px; color: var(--jd-gray-900); font-family: var(--font-body); box-shadow: none; transition: border-color .2s, box-shadow .2s;
}
.gd-admin-body .form-control:focus, .bg-linen .form-control:focus,
.gd-admin-body .form-select:focus, .bg-linen .form-select:focus,
.gd-admin-body textarea.form-control:focus, .bg-linen textarea.form-control:focus {
  border-color: var(--jd-purple-600); box-shadow: 0 0 0 3px rgba(106,45,158,.15); outline: none; background: #fff;
}
.gd-admin-body .form-control::placeholder, .bg-linen .form-control::placeholder { color: #aaa6b4; font-size: 13px; }
.gd-admin-body .form-label, .bg-linen .form-label { font-size: 12px; font-weight: 700; color: var(--jd-gray-900); font-family: var(--font-body); margin-bottom: 6px; display: block; text-transform: uppercase; letter-spacing: .5px; }
.gd-admin-body .form-text, .bg-linen .form-text { font-size: 11px; color: var(--jd-gray-600); font-family: var(--font-body); }
.gd-admin-body .invalid-feedback, .bg-linen .invalid-feedback { font-size: 11px; font-weight: 600; color: var(--jd-red-600); }
.gd-admin-body .form-control.is-invalid, .bg-linen .form-control.is-invalid,
.gd-admin-body .form-select.is-invalid, .bg-linen .form-select.is-invalid { border-color: var(--jd-red-600); box-shadow: 0 0 0 3px rgba(204,51,85,.12); }
.gd-admin-body .form-check-input:checked, .bg-linen .form-check-input:checked { background-color: var(--jd-purple-700); border-color: var(--jd-purple-700); }
.gd-admin-body .form-check-input:focus, .bg-linen .form-check-input:focus { box-shadow: 0 0 0 3px rgba(106,45,158,.18); border-color: var(--jd-purple-600); }
.gd-admin-body .form-check-label, .bg-linen .form-check-label { font-size: 13px; color: var(--jd-gray-900); font-family: var(--font-body); }

/* form-control-admin inside form-floating (replicate Bootstrap floating-label behaviour) */
.form-floating > .form-control-admin { height: calc(3.5rem + 2px); line-height: 1.25; padding: 1rem 16px; }
.form-floating > textarea.form-control-admin { height: auto; min-height: 7rem; padding: 1rem 16px; }
.form-floating > .form-control-admin::placeholder { color: transparent; }
.form-floating > .form-control-admin:focus, .form-floating > .form-control-admin:not(:placeholder-shown),
.form-floating > textarea.form-control-admin:focus, .form-floating > textarea.form-control-admin:not(:placeholder-shown) { padding-top: 1.625rem; padding-bottom: .625rem; }
.form-floating > .form-control-admin:focus ~ label, .form-floating > .form-control-admin:not(:placeholder-shown) ~ label,
.form-floating > textarea.form-control-admin:focus ~ label, .form-floating > textarea.form-control-admin:not(:placeholder-shown) ~ label,
.form-floating > select.form-control-admin ~ label { opacity: .75; transform: scale(.85) translateY(-.5rem) translateX(.15rem); color: var(--jd-purple-700); }

.gd-admin-body .form-floating > .form-control, .bg-linen .form-floating > .form-control,
.gd-admin-body .form-floating > .form-select, .bg-linen .form-floating > .form-select { height: 3.5rem; padding-top: 1.5rem; padding-bottom: .5rem; padding-left: 16px; padding-right: 16px; }
.gd-admin-body .form-floating > textarea.form-control, .bg-linen .form-floating > textarea.form-control { height: auto; min-height: 7rem; padding-top: 1.5rem; padding-bottom: .5rem; }
.gd-admin-body .form-floating > label, .bg-linen .form-floating > label { padding: 1rem 16px; font-size: 13px; color: #9c97a6; font-family: var(--font-body); font-weight: 400; text-transform: none; letter-spacing: 0; }
.gd-admin-body .form-floating > .form-control:focus ~ label, .gd-admin-body .form-floating > .form-control:not(:placeholder-shown) ~ label,
.bg-linen .form-floating > .form-control:focus ~ label, .bg-linen .form-floating > .form-control:not(:placeholder-shown) ~ label,
.gd-admin-body .form-floating > .form-select ~ label, .bg-linen .form-floating > .form-select ~ label { opacity: .75; transform: scale(.85) translateY(-.5rem) translateX(.15rem); color: var(--jd-purple-700); }

/* Cards */
.gd-admin-body .card, .bg-linen .card { border: 1px solid var(--jd-gray-300); border-radius: 12px; box-shadow: var(--jd-shadow-sm); }
.gd-admin-body .card-header, .bg-linen .card-header { background: var(--jd-purple-900); color: #fff; border-bottom: none; border-radius: 12px 12px 0 0 !important; padding: 16px 24px; font-family: var(--font-head); font-size: 16px; font-weight: 700; }
.gd-admin-body .card-body, .bg-linen .card-body { padding: 24px; background: #fff; }
.gd-admin-body .card-footer, .bg-linen .card-footer { background: var(--jd-gray-100); border-top: 1px solid var(--jd-gray-300); padding: 16px 24px; border-radius: 0 0 12px 12px !important; }

/* Input groups */
.gd-admin-body .input-group-text, .bg-linen .input-group-text { background: var(--jd-gray-100); border: 1.5px solid var(--jd-gray-300); color: var(--jd-gray-600); font-size: 13px; border-radius: 10px 0 0 10px; flex-shrink: 0; }
.gd-admin-body .input-group .form-control, .bg-linen .input-group .form-control,
.gd-admin-body .input-group > .form-control-admin, .bg-linen .input-group > .form-control-admin,
.gd-admin-body .input-group > .form-select, .bg-linen .input-group > .form-select {
  position: relative;
  flex: 1 1 auto;
  width: 1%;
  min-width: 0;
  border-radius: 0 10px 10px 0;
}
/* Bootstrap only auto-sizes children with the .form-control/.form-select class inside
   a flex .input-group; our custom .form-control-admin class was missing that rule, so
   file inputs (which have a wide intrinsic content width) overflowed the row and the
   group wrapped onto a second line. */

/* Tables inside cards */
.gd-admin-body .table, .bg-linen .table { font-size: 13px; color: var(--jd-gray-900); }
.gd-admin-body .table thead th, .bg-linen .table thead th, .gd-admin-body th, .bg-linen th { background: var(--jd-gray-100) !important; color: var(--jd-gray-600) !important; font-family: var(--font-body); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; border-bottom: 1px solid var(--jd-gray-300); padding: 12px 16px; }
.gd-admin-body .table tbody tr:hover, .bg-linen .table tbody tr:hover { background: #f1e3fb; }
.gd-admin-body .table td, .bg-linen .table td { padding: 12px 16px; border-color: var(--jd-gray-300); vertical-align: middle; }

/* Pagination */
.gd-admin-body .page-link, .bg-linen .page-link { color: var(--jd-purple-700); border-color: var(--jd-gray-300); font-family: var(--font-body); font-weight: 600; }
.gd-admin-body .page-item.active .page-link, .bg-linen .page-item.active .page-link { background: var(--jd-purple-700); border-color: var(--jd-purple-700); color: #fff; }
.gd-admin-body .page-link:focus, .bg-linen .page-link:focus { box-shadow: 0 0 0 3px rgba(106,45,158,.18); }
.gd-admin-body .page-link:hover, .bg-linen .page-link:hover { color: var(--jd-purple-800); background: var(--jd-gray-100); }

/* Alerts (Bootstrap defaults) */
.gd-admin-body .alert-success, .bg-linen .alert-success { background: #e3f5e6; color: #1f7a44; border-color: rgba(47,168,79,.3); }
.gd-admin-body .alert-warning, .bg-linen .alert-warning { background: var(--jd-orange-100); color: #9a5300; border-color: rgba(232,120,15,.3); }
.gd-admin-body .alert-danger, .bg-linen .alert-danger { background: #fbe1e8; color: #a8264a; border-color: rgba(204,51,85,.3); }
.gd-admin-body .alert-info, .bg-linen .alert-info { background: #f1e3fb; color: var(--jd-purple-800); border-color: rgba(84,34,127,.25); }

/* Dropdowns */
.gd-admin-body .dropdown-menu, .bg-linen .dropdown-menu { border: 1px solid var(--jd-gray-300); border-radius: 10px; box-shadow: var(--jd-shadow-card); padding: 6px; }
.gd-admin-body .dropdown-item, .bg-linen .dropdown-item { border-radius: 8px; font-size: 13px; padding: 8px 12px; font-family: var(--font-body); }
.gd-admin-body .dropdown-item:hover, .bg-linen .dropdown-item:hover { background: var(--jd-gray-100); color: var(--jd-purple-700); }
.gd-admin-body .dropdown-item.active, .bg-linen .dropdown-item.active { background: var(--jd-purple-700); color: #fff; }

/* Badges (Bootstrap defaults used inside legacy partials) */
.gd-admin-body .badge.bg-primary, .bg-linen .badge.bg-primary { background: var(--jd-purple-700) !important; }
.gd-admin-body .badge.bg-success, .bg-linen .badge.bg-success { background: var(--jd-status-active) !important; }
.gd-admin-body .badge.bg-warning, .bg-linen .badge.bg-warning { background: var(--jd-orange-500) !important; }
.gd-admin-body .badge.bg-danger, .bg-linen .badge.bg-danger { background: var(--jd-red-600) !important; }

/* Welcome / dashboard banner helper classes still referenced by some dashboards */
.gd-admin-body .bg-indigo, .bg-linen .bg-indigo {
  background: linear-gradient(135deg, var(--jd-purple-900), var(--jd-purple-700)) !important;
  background-image: radial-gradient(circle at 88% 12%, rgba(244,144,30,.25), transparent 42%), linear-gradient(135deg, var(--jd-purple-900), var(--jd-purple-700)) !important;
  color: #fff !important; border-radius: var(--jd-card-radius);
}
.gd-admin-body .stat-value, .bg-linen .stat-value { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--jd-gray-600); }

/* Nav-pills / tabs */
.gd-admin-body .nav-pills .nav-link.active, .bg-linen .nav-pills .nav-link.active { background: var(--jd-purple-700); }
.gd-admin-body .nav-tabs .nav-link.active, .bg-linen .nav-tabs .nav-link.active { color: var(--jd-purple-700); border-color: var(--jd-gray-300) var(--jd-gray-300) #fff; }
.gd-admin-body .nav-tabs .nav-link, .bg-linen .nav-tabs .nav-link { color: var(--jd-gray-600); font-family: var(--font-body); font-weight: 600; }