/* =============================================================
   GRANTAURA DASHBOARD V2 — UNIVERSAL DESIGN SYSTEM
   Mobile-first. Layered on top of existing dashboard.css.
   Prefix: .gd2-

   Architecture:
     1. Design tokens (CSS vars)
     2. Page shell (sidebar + bottom nav)
     3. Universal panel header  (.gd2-panel-head)
     4. Section separator       (.gd2-section-head)
     5. Card system             (.gd2-card, .gd2-card-row, .gd2-card-action)
     6. Stat / metric grid      (.gd2-stat-grid, .gd2-stat-item)
     7. Empty state             (.gd2-empty)
     8. Button system           (.gd2-btn)
     9. Form controls           (.gd2-field)
    10. Badge / pill / tag      (.gd2-badge, .gd2-pill, .gd2-tag)
    11. Alert / notice          (.gd2-alert)
    12. Progress ring            (.gd2-ring)
    13. Avatar                  (.gd2-avatar)
    14. Skeleton loaders        (.gd2-skel)
    15. Utility overrides
   ============================================================= */

/* ── 1. DESIGN TOKENS ─────────────────────────────────────── */
:root {
  /* Surface */
  --gd2-bg:            #F4F2F8;   /* page background — faint branded lavender */
  --gd2-surface:       #FFFFFF;   /* card / panel surface */
  --gd2-surface-alt:   #F9F8FC;   /* alternate surface (form rows, code blocks) */
  --gd2-surface-hover: #F3F0FA;   /* hover tint on interactive surfaces */

  /* Sidebar */
  --gd2-nav-bg:        #FFFFFF;
  --gd2-nav-border:    #EAE6F3;
  --gd2-nav-w:         240px;
  --gd2-nav-w-collapsed: 68px;

  /* Brand */
  --gd2-purple:        #5A3B8C;
  --gd2-purple-dark:   #472D6F;
  --gd2-purple-light:  #7650A9;
  --gd2-purple-tint:   rgba(90, 59, 140, 0.08);   /* icon tile bg */
  --gd2-purple-tint-md:rgba(90, 59, 140, 0.14);   /* hover icon tile */
  --gd2-orange:        #FF914D;
  --gd2-orange-dark:   #E07030;
  --gd2-orange-light:  #FFA366;
  --gd2-orange-tint:   rgba(255, 145, 77, 0.12);

  /* Text */
  --gd2-text:          #1F2937;
  --gd2-text-mid:      #4B5563;
  --gd2-text-muted:    #6B7280;
  --gd2-text-faint:    #9CA3AF;
  --gd2-text-inv:      #FFFFFF;

  /* Border */
  --gd2-border:        #E8E4F0;   /* card borders — purple-tinted */
  --gd2-border-mid:    #D1D5DB;
  --gd2-border-focus:  var(--gd2-purple);

  /* Shadow */
  --gd2-shadow-xs: 0 1px 3px rgba(90, 59, 140, 0.06);
  --gd2-shadow-sm: 0 2px 8px rgba(90, 59, 140, 0.08);
  --gd2-shadow-md: 0 4px 16px rgba(90, 59, 140, 0.10);
  --gd2-shadow-lg: 0 8px 32px rgba(90, 59, 140, 0.12);

  /* Radius */
  --gd2-r-xs:  6px;
  --gd2-r-sm:  8px;
  --gd2-r:    12px;
  --gd2-r-md: 14px;
  --gd2-r-lg: 16px;
  --gd2-r-xl: 20px;
  --gd2-r-pill: 999px;

  /* Spacing */
  --gd2-space-2:   2px;
  --gd2-space-4:   4px;
  --gd2-space-8:   8px;
  --gd2-space-12: 12px;
  --gd2-space-16: 16px;
  --gd2-space-20: 20px;
  --gd2-space-24: 24px;
  --gd2-space-32: 32px;
  --gd2-space-40: 40px;
  --gd2-space-48: 48px;

  /* Panel */
  --gd2-panel-px:  20px;         /* horizontal panel padding mobile */
  --gd2-panel-pt:  24px;         /* top panel padding */

  /* Typography */
  --gd2-font-xs:  0.72rem;
  --gd2-font-sm:  0.82rem;
  --gd2-font-md:  0.92rem;
  --gd2-font-body: 0.95rem;
  --gd2-font-lg:  1.05rem;
  --gd2-font-xl:  1.25rem;
  --gd2-font-2xl: 1.5rem;
  --gd2-font-3xl: 1.85rem;

  /* Motion */
  --gd2-ease:     cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --gd2-dur-fast: 140ms;
  --gd2-dur:      220ms;
  --gd2-dur-slow: 360ms;

  /* Bottom nav */
  --gd2-bottom-nav-h: 64px;
  --gd2-bottom-nav-safe: env(safe-area-inset-bottom, 0px);

  /* Status */
  --gd2-green:       #059669;
  --gd2-green-tint:  #ECFDF5;
  --gd2-green-border:#A7F3D0;
  --gd2-amber:       #D97706;
  --gd2-amber-tint:  #FFFBEB;
  --gd2-amber-border:#FDE68A;
  --gd2-red:         #DC2626;
  --gd2-red-tint:    #FEF2F2;
  --gd2-red-border:  #FCA5A5;
  --gd2-blue:        #2563EB;
  --gd2-blue-tint:   #EFF6FF;
  --gd2-blue-border: #BFDBFE;
}

/* ── Keyframes ────────────────────────────────────────────── */
@keyframes gd2FadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes gd2FadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes gd2Pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.45; }
}

@keyframes gd2SkelShimmer {
  from { background-position: -600px 0; }
  to   { background-position: 600px 0; }
}


/* ─────────────────────────────────────────────────────────────
   2. PAGE SHELL — New sidebar + layout wrapper
   ───────────────────────────────────────────────────────────── */

/* Shell root — takes over from .gud-shell */
.gd2-shell {
  display: flex;
  min-height: 100vh;
  background: var(--gd2-bg);
}

/* ── Sidebar ──────────────────────────────────────────────── */
.gd2-sidebar {
  display: none;                    /* hidden mobile; shown ≥768 */
  flex-shrink: 0;
  width: var(--gd2-nav-w);
  background: var(--gd2-nav-bg);
  border-right: 1px solid var(--gd2-nav-border);
  box-shadow: 2px 0 12px rgba(90, 59, 140, 0.05);
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  transition: width var(--gd2-dur) var(--gd2-ease);
  z-index: 100;
}

/* Collapsed state */
.gd2-sidebar--collapsed {
  width: var(--gd2-nav-w-collapsed);
}

.gd2-sidebar--collapsed .gd2-sidebar__brand-name,
.gd2-sidebar--collapsed .gd2-sidebar__identity-text,
.gd2-sidebar--collapsed .gd2-sidebar__nav-label,
.gd2-sidebar--collapsed .gd2-sidebar__nav-text,
.gd2-sidebar--collapsed .gd2-sidebar__group-label,
.gd2-sidebar--collapsed .gd2-sidebar__trust-text,
.gd2-sidebar--collapsed .gd2-sidebar__identity-credits {
  display: none;
}

.gd2-sidebar--collapsed .gd2-sidebar__identity {
  justify-content: center;
  padding: 12px 0;
}

.gd2-sidebar--collapsed .gd2-sidebar__nav-item {
  justify-content: center;
}

.gd2-sidebar--collapsed .gd2-sidebar__nav-tile {
  margin-right: 0;
}

/* Brand row */
.gd2-sidebar__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 20px 18px 16px;
  flex-shrink: 0;
  text-decoration: none !important;
  cursor: pointer;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
}

.gd2-sidebar__brand-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: var(--gd2-purple);
  border-radius: 11px;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(90, 59, 140, 0.35);
  transition: transform var(--gd2-dur-fast) var(--gd2-ease);
}

.gd2-sidebar__brand-mark:hover {
  transform: scale(1.05);
}

.gd2-sidebar__brand-mark svg,
.gd2-sidebar__brand-mark i {
  color: #FFFFFF !important;
  font-size: 1.15rem;
}

.gd2-sidebar__brand-name {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--gd2-purple-dark) !important;
  letter-spacing: -0.01em;
  line-height: 1;
  transition: opacity var(--gd2-dur) var(--gd2-ease);
}

/* Identity card */
.gd2-sidebar__identity {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px 14px;
  margin: 0 10px 4px;
  border-radius: var(--gd2-r);
  background: var(--gd2-surface-alt);
  border: 1px solid var(--gd2-border);
  cursor: pointer;
  transition: background var(--gd2-dur-fast) var(--gd2-ease);
  text-decoration: none !important;
}

.gd2-sidebar__identity:hover {
  background: var(--gd2-purple-tint);
}

.gd2-sidebar__identity-text {
  min-width: 0;
  flex: 1;
}

.gd2-sidebar__identity-name {
  display: block;
  font-size: var(--gd2-font-sm);
  font-weight: 700;
  color: var(--gd2-text) !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gd2-sidebar__identity-credits {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
  font-size: var(--gd2-font-xs);
  font-weight: 700;
  color: var(--gd2-orange) !important;
}

.gd2-sidebar__identity-credits i { font-size: 0.7rem; }

/* Nav group label */
.gd2-sidebar__group-label {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--gd2-text-faint) !important;
  padding: 16px 18px 6px;
}

/* Nav separator */
.gd2-sidebar__sep {
  height: 1px;
  background: var(--gd2-border);
  margin: 8px 14px;
}

/* Nav list */
.gd2-sidebar__nav {
  list-style: none;
  margin: 0;
  padding: 0 8px;
  flex: 1;
}

/* Nav item */
.gd2-sidebar__nav-item {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0;
  border-radius: var(--gd2-r-sm);
  margin-bottom: 2px;
  text-decoration: none !important;
  color: var(--gd2-text-muted) !important;
  font-size: var(--gd2-font-md);
  font-weight: 600;
  transition: background var(--gd2-dur-fast) var(--gd2-ease),
              color var(--gd2-dur-fast) var(--gd2-ease),
              border-color var(--gd2-dur-fast) var(--gd2-ease);
  border-left: 3px solid transparent;
  position: relative;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.gd2-sidebar__nav-item:hover {
  background: var(--gd2-surface-hover);
  color: var(--gd2-purple) !important;
}

.gd2-sidebar__nav-item--active {
  background: var(--gd2-purple-tint);
  color: var(--gd2-purple) !important;
  border-left-color: var(--gd2-orange);
  font-weight: 700;
}

/* Icon tile inside nav item */
.gd2-sidebar__nav-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: transparent;
  flex-shrink: 0;
  margin: 6px 10px 6px 8px;
  transition: background var(--gd2-dur-fast) var(--gd2-ease);
  font-size: 0.9rem;
}

.gd2-sidebar__nav-item:hover .gd2-sidebar__nav-tile,
.gd2-sidebar__nav-item--active .gd2-sidebar__nav-tile {
  background: var(--gd2-purple-tint-md);
}

.gd2-sidebar__nav-text {
  flex: 1;
  min-width: 0;
  line-height: 1.2;
}

/* Badge on nav item */
.gd2-sidebar__nav-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  background: var(--gd2-red);
  color: #fff !important;
  font-size: 0.6rem;
  font-weight: 800;
  padding: 0 4px;
  margin-right: 8px;
  flex-shrink: 0;
}

/* Logout nav item */
.gd2-sidebar__nav-item--logout {
  color: var(--gd2-red) !important;
  margin-top: 4px;
}

.gd2-sidebar__nav-item--logout:hover {
  background: var(--gd2-red-tint);
  color: var(--gd2-red) !important;
}

/* Trust anchor */
.gd2-sidebar__trust {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 18px 20px;
  flex-shrink: 0;
}

.gd2-sidebar__trust i {
  font-size: 0.7rem;
  color: var(--gd2-green) !important;
}

.gd2-sidebar__trust-text {
  font-size: var(--gd2-font-xs);
  color: var(--gd2-text-faint) !important;
}

/* ── Main content area ──────────────────────────────────────── */
.gd2-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* ── Bottom navigation (mobile) ─────────────────────────────── */
.gd2-bottom-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 200;
  background: var(--gd2-nav-bg);
  border-top: 1px solid var(--gd2-nav-border);
  box-shadow: 0 -4px 20px rgba(90, 59, 140, 0.10);
  height: calc(var(--gd2-bottom-nav-h) + var(--gd2-bottom-nav-safe));
  padding-bottom: var(--gd2-bottom-nav-safe);
  align-items: stretch;
}

.gd2-bottom-nav__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  text-decoration: none !important;
  color: var(--gd2-text-muted) !important;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 8px 4px;
  position: relative;
  -webkit-tap-highlight-color: transparent;
  transition: color var(--gd2-dur-fast) var(--gd2-ease);
}

.gd2-bottom-nav__item::after {
  content: '';
  position: absolute;
  top: 0;
  left: 20%;
  right: 20%;
  height: 2px;
  background: var(--gd2-orange);
  border-radius: 0 0 3px 3px;
  transform: scaleX(0);
  transition: transform var(--gd2-dur-fast) var(--gd2-ease);
}

.gd2-bottom-nav__item--active {
  color: var(--gd2-purple) !important;
}

.gd2-bottom-nav__item--active::after {
  transform: scaleX(1);
}

.gd2-bottom-nav__tile {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: transparent;
  transition: background var(--gd2-dur-fast) var(--gd2-ease);
  font-size: 1rem;
  position: relative;
}

.gd2-bottom-nav__item--active .gd2-bottom-nav__tile {
  background: var(--gd2-purple-tint);
}

.gd2-bottom-nav__label {
  font-size: 0.62rem;
  line-height: 1;
  white-space: nowrap;
}

.gd2-bottom-nav__dot {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gd2-red);
  border: 2px solid #fff;
}

/* ── Breakpoints ────────────────────────────────────────────── */
@media (max-width: 767px) {
  .gd2-sidebar   { display: none !important; }
  .gd2-bottom-nav { display: flex; }
  .gd2-main {
    padding-bottom: calc(var(--gd2-bottom-nav-h) + var(--gd2-bottom-nav-safe) + 8px);
  }
  :root { --gd2-panel-px: 16px; }
}

@media (min-width: 768px) {
  .gd2-sidebar   { display: flex; }
  .gd2-bottom-nav { display: none !important; }
  :root { --gd2-panel-px: 28px; }
}

@media (min-width: 1200px) {
  :root { --gd2-panel-px: 36px; }
}


/* ─────────────────────────────────────────────────────────────
   3. UNIVERSAL PANEL HEADER   .gd2-panel-head
   Every tab/view starts with this exact same structural header.
   ───────────────────────────────────────────────────────────── */

.gd2-panel {
  padding: var(--gd2-panel-pt) var(--gd2-panel-px);
  animation: gd2FadeUp var(--gd2-dur-slow) var(--gd2-ease) both;
}

.gd2-panel-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--gd2-border);
}

.gd2-panel-head__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border-radius: 14px;
  background: var(--gd2-purple-tint);
  color: var(--gd2-purple) !important;
  font-size: 1.3rem;
  box-shadow: 0 0 0 4px rgba(90, 59, 140, 0.06);
}

.gd2-panel-head__icon--orange {
  background: var(--gd2-orange-tint);
  color: var(--gd2-orange) !important;
  box-shadow: 0 0 0 4px rgba(255, 145, 77, 0.07);
}

.gd2-panel-head__icon--green {
  background: rgba(5, 150, 105, 0.08);
  color: var(--gd2-green) !important;
}

.gd2-panel-head__text {
  flex: 1;
  min-width: 0;
}

.gd2-panel-head__title {
  margin: 0 0 3px;
  font-size: clamp(1.35rem, 3.5vw, 1.7rem);
  font-weight: 800;
  color: var(--gd2-text) !important;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.gd2-panel-head__sub {
  margin: 0;
  font-size: var(--gd2-font-md);
  color: var(--gd2-text-muted) !important;
  line-height: 1.45;
}

.gd2-panel-head__action {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  padding-top: 4px;
}

/* Compact panel head variant (for sub-views) */
.gd2-panel-head--compact {
  margin-bottom: 16px;
  padding-bottom: 14px;
}

.gd2-panel-head--compact .gd2-panel-head__icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  font-size: 1rem;
}

.gd2-panel-head--compact .gd2-panel-head__title {
  font-size: 1.1rem;
}


/* ─────────────────────────────────────────────────────────────
   4. SECTION SEPARATOR   .gd2-section-head
   ───────────────────────────────────────────────────────────── */

.gd2-section {
  margin-bottom: 24px;
}

.gd2-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  gap: 12px;
}

.gd2-section-head__label {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gd2-purple-light) !important;
  display: flex;
  align-items: center;
  gap: 6px;
}

.gd2-section-head__label::before {
  content: '';
  display: inline-block;
  width: 12px;
  height: 2px;
  background: var(--gd2-orange);
  border-radius: 1px;
  flex-shrink: 0;
}

.gd2-section-head__action {
  font-size: var(--gd2-font-sm);
  font-weight: 700;
  color: var(--gd2-purple) !important;
  text-decoration: none !important;
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  transition: color var(--gd2-dur-fast) var(--gd2-ease);
}

.gd2-section-head__action:hover {
  color: var(--gd2-orange) !important;
}


/* ─────────────────────────────────────────────────────────────
   5. CARD SYSTEM
   ───────────────────────────────────────────────────────────── */

/* Base card */
.gd2-card {
  background: var(--gd2-surface);
  border: 1px solid var(--gd2-border);
  border-radius: var(--gd2-r);
  box-shadow: var(--gd2-shadow-xs);
  padding: 18px 20px;
  transition: box-shadow var(--gd2-dur) var(--gd2-ease),
              transform var(--gd2-dur) var(--gd2-ease);
}

/* Interactive card */
.gd2-card--action {
  cursor: pointer;
}

.gd2-card--action:hover {
  box-shadow: var(--gd2-shadow-md);
  transform: translateY(-1px);
}

/* Flat card (no shadow) */
.gd2-card--flat {
  box-shadow: none;
}

/* Accented left border card */
.gd2-card--accent {
  border-left: 3px solid var(--gd2-purple);
}

.gd2-card--accent-orange {
  border-left: 3px solid var(--gd2-orange);
}

/* Card header */
.gd2-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.gd2-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--gd2-purple-tint);
  color: var(--gd2-purple) !important;
  font-size: 0.95rem;
  flex-shrink: 0;
}

.gd2-card__icon--orange {
  background: var(--gd2-orange-tint);
  color: var(--gd2-orange) !important;
}

.gd2-card__icon--green {
  background: rgba(5, 150, 105, 0.09);
  color: var(--gd2-green) !important;
}

.gd2-card__title {
  margin: 0;
  font-size: var(--gd2-font-body);
  font-weight: 700;
  color: var(--gd2-text) !important;
  line-height: 1.3;
}

.gd2-card__desc {
  margin: 4px 0 0;
  font-size: var(--gd2-font-sm);
  color: var(--gd2-text-muted) !important;
  line-height: 1.5;
}

.gd2-card__footer {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--gd2-border);
  flex-wrap: wrap;
}

/* Card grid */
.gd2-card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

@media (min-width: 480px) {
  .gd2-card-grid--2 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 768px) {
  .gd2-card-grid--3 { grid-template-columns: repeat(3, 1fr); }
  .gd2-card-grid--2 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .gd2-card-grid--4 { grid-template-columns: repeat(4, 1fr); }
}

/* Row card (icon + content + optional action arrow) */
.gd2-card-row {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--gd2-surface);
  border: 1px solid var(--gd2-border);
  border-radius: var(--gd2-r);
  box-shadow: var(--gd2-shadow-xs);
  padding: 14px 16px;
  text-decoration: none !important;
  color: var(--gd2-text) !important;
  transition: background var(--gd2-dur-fast) var(--gd2-ease),
              box-shadow var(--gd2-dur) var(--gd2-ease),
              transform var(--gd2-dur) var(--gd2-ease);
  cursor: pointer;
}

.gd2-card-row:hover {
  background: var(--gd2-surface-hover);
  box-shadow: var(--gd2-shadow-sm);
  transform: translateX(2px);
}

.gd2-card-row__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: var(--gd2-purple-tint);
  color: var(--gd2-purple) !important;
  font-size: 1rem;
  flex-shrink: 0;
}

.gd2-card-row__icon--orange {
  background: var(--gd2-orange-tint);
  color: var(--gd2-orange) !important;
}

.gd2-card-row__body {
  flex: 1;
  min-width: 0;
}

.gd2-card-row__title {
  font-size: var(--gd2-font-md);
  font-weight: 700;
  color: var(--gd2-text) !important;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gd2-card-row__sub {
  font-size: var(--gd2-font-sm);
  color: var(--gd2-text-muted) !important;
  margin-top: 2px;
  line-height: 1.4;
}

.gd2-card-row__arrow {
  color: var(--gd2-text-faint) !important;
  font-size: 0.8rem;
  flex-shrink: 0;
  transition: transform var(--gd2-dur-fast) var(--gd2-ease),
              color var(--gd2-dur-fast) var(--gd2-ease);
}

.gd2-card-row:hover .gd2-card-row__arrow {
  transform: translateX(3px);
  color: var(--gd2-purple) !important;
}

/* List of row cards */
.gd2-card-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}


/* ─────────────────────────────────────────────────────────────
   6. STAT / METRIC GRID
   ───────────────────────────────────────────────────────────── */

.gd2-stat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 24px;
}

@media (min-width: 480px) {
  .gd2-stat-grid { grid-template-columns: repeat(4, 1fr); }
}

.gd2-stat {
  background: var(--gd2-surface);
  border: 1px solid var(--gd2-border);
  border-radius: var(--gd2-r);
  box-shadow: var(--gd2-shadow-xs);
  padding: 14px 16px;
  text-align: center;
}

.gd2-stat__number {
  display: block;
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--gd2-purple) !important;
  letter-spacing: -0.03em;
  line-height: 1;
  margin-bottom: 4px;
}

.gd2-stat__number--orange { color: var(--gd2-orange) !important; }
.gd2-stat__number--green  { color: var(--gd2-green)  !important; }

.gd2-stat__label {
  font-size: var(--gd2-font-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--gd2-text-muted) !important;
  text-transform: uppercase;
  line-height: 1.3;
}


/* ─────────────────────────────────────────────────────────────
   7. EMPTY STATE
   ───────────────────────────────────────────────────────────── */

.gd2-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 40px 24px;
  background: var(--gd2-surface);
  border: 1px dashed var(--gd2-border);
  border-radius: var(--gd2-r-lg);
}

.gd2-empty__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: var(--gd2-purple-tint);
  color: var(--gd2-purple) !important;
  font-size: 1.5rem;
  margin-bottom: 16px;
}

.gd2-empty__title {
  margin: 0 0 6px;
  font-size: var(--gd2-font-lg);
  font-weight: 700;
  color: var(--gd2-text) !important;
}

.gd2-empty__text {
  margin: 0 0 20px;
  font-size: var(--gd2-font-md);
  color: var(--gd2-text-muted) !important;
  max-width: 30ch;
  line-height: 1.5;
}


/* ─────────────────────────────────────────────────────────────
   8. BUTTON SYSTEM
   ───────────────────────────────────────────────────────────── */

.gd2-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border-radius: var(--gd2-r-sm);
  font-size: var(--gd2-font-md);
  font-weight: 700;
  line-height: 1;
  padding: 10px 18px;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none !important;
  transition: background var(--gd2-dur-fast) var(--gd2-ease),
              box-shadow var(--gd2-dur-fast) var(--gd2-ease),
              transform var(--gd2-dur-fast) var(--gd2-ease);
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}

.gd2-btn:active {
  transform: scale(0.97);
}

/* Primary (purple) */
.gd2-btn--primary {
  background: var(--gd2-purple);
  color: var(--gd2-text-inv) !important;
  box-shadow: 0 2px 8px rgba(90, 59, 140, 0.30);
}

.gd2-btn--primary:hover {
  background: var(--gd2-purple-dark);
  box-shadow: 0 4px 14px rgba(90, 59, 140, 0.40);
}

/* CTA (orange) */
.gd2-btn--cta {
  background: var(--gd2-orange);
  color: var(--gd2-text-inv) !important;
  box-shadow: 0 2px 8px rgba(255, 145, 77, 0.30);
}

.gd2-btn--cta:hover {
  background: var(--gd2-orange-dark);
  box-shadow: 0 4px 14px rgba(255, 145, 77, 0.40);
}

/* Outline */
.gd2-btn--outline {
  background: transparent;
  border-color: var(--gd2-border-mid);
  color: var(--gd2-text-mid) !important;
}

.gd2-btn--outline:hover {
  background: var(--gd2-surface-hover);
  border-color: var(--gd2-purple);
  color: var(--gd2-purple) !important;
}

/* Ghost */
.gd2-btn--ghost {
  background: transparent;
  color: var(--gd2-purple) !important;
  border-color: transparent;
}

.gd2-btn--ghost:hover {
  background: var(--gd2-purple-tint);
}

/* Danger */
.gd2-btn--danger {
  background: var(--gd2-red-tint);
  border-color: var(--gd2-red-border);
  color: var(--gd2-red) !important;
}

.gd2-btn--danger:hover {
  background: var(--gd2-red);
  color: #fff !important;
}

/* Sizes */
.gd2-btn--sm {
  font-size: var(--gd2-font-sm);
  padding: 7px 13px;
  border-radius: var(--gd2-r-xs);
  gap: 5px;
}

.gd2-btn--lg {
  font-size: var(--gd2-font-lg);
  padding: 14px 28px;
  border-radius: var(--gd2-r);
  gap: 9px;
}

.gd2-btn--full {
  width: 100%;
}

/* Loading state */
.gd2-btn--loading {
  pointer-events: none;
  opacity: 0.7;
}


/* ─────────────────────────────────────────────────────────────
   9. FORM CONTROLS
   ───────────────────────────────────────────────────────────── */

.gd2-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}

.gd2-field__label {
  font-size: var(--gd2-font-sm);
  font-weight: 700;
  color: var(--gd2-text) !important;
  display: flex;
  align-items: center;
  gap: 4px;
}

.gd2-field__req {
  color: var(--gd2-red) !important;
  font-size: 0.85em;
}

.gd2-field__input,
.gd2-field__select,
.gd2-field__textarea {
  width: 100%;
  padding: 10px 13px;
  border: 1px solid var(--gd2-border-mid);
  border-radius: var(--gd2-r-sm);
  background: var(--gd2-surface);
  color: var(--gd2-text) !important;
  font-size: var(--gd2-font-body);
  line-height: 1.4;
  transition: border-color var(--gd2-dur-fast) var(--gd2-ease),
              box-shadow var(--gd2-dur-fast) var(--gd2-ease);
}

.gd2-field__input:focus,
.gd2-field__select:focus,
.gd2-field__textarea:focus {
  outline: none;
  border-color: var(--gd2-purple);
  box-shadow: 0 0 0 3px rgba(90, 59, 140, 0.12);
}

.gd2-field__hint {
  font-size: var(--gd2-font-xs);
  color: var(--gd2-text-faint) !important;
}

.gd2-field__error {
  font-size: var(--gd2-font-xs);
  color: var(--gd2-red) !important;
  font-weight: 600;
}

.gd2-field--error .gd2-field__input,
.gd2-field--error .gd2-field__select {
  border-color: var(--gd2-red);
}


/* ─────────────────────────────────────────────────────────────
   10. BADGE / PILL / TAG
   ───────────────────────────────────────────────────────────── */

.gd2-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border-radius: var(--gd2-r-pill);
  font-size: var(--gd2-font-xs);
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 3px 10px;
  line-height: 1.4;
  white-space: nowrap;
}

.gd2-badge--purple {
  background: var(--gd2-purple-tint);
  color: var(--gd2-purple-dark) !important;
}

.gd2-badge--orange {
  background: var(--gd2-orange-tint);
  color: var(--gd2-orange-dark) !important;
}

.gd2-badge--green {
  background: var(--gd2-green-tint);
  color: var(--gd2-green) !important;
}

.gd2-badge--amber {
  background: var(--gd2-amber-tint);
  color: var(--gd2-amber) !important;
}

.gd2-badge--red {
  background: var(--gd2-red-tint);
  color: var(--gd2-red) !important;
}

.gd2-badge--blue {
  background: var(--gd2-blue-tint);
  color: var(--gd2-blue) !important;
}

.gd2-badge--gray {
  background: var(--gd2-surface-alt);
  color: var(--gd2-text-muted) !important;
  border: 1px solid var(--gd2-border);
}

/* Match tier badges (grant cards) */
.gd2-badge--eligible { background: #DCFCE7; color: #15803D !important; }
.gd2-badge--strong   { background: var(--gd2-blue-tint); color: var(--gd2-blue) !important; }
.gd2-badge--good     { background: var(--gd2-amber-tint); color: var(--gd2-amber) !important; }


/* ─────────────────────────────────────────────────────────────
   11. ALERT / NOTICE
   ───────────────────────────────────────────────────────────── */

.gd2-alert {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  border-radius: var(--gd2-r);
  padding: 13px 16px;
  border: 1px solid transparent;
  font-size: var(--gd2-font-sm);
  line-height: 1.5;
  margin-bottom: 14px;
}

.gd2-alert__icon {
  font-size: 1rem;
  flex-shrink: 0;
  margin-top: 1px;
}

.gd2-alert__body { flex: 1; min-width: 0; }

.gd2-alert__title {
  font-weight: 700;
  font-size: var(--gd2-font-md);
  display: block;
  margin-bottom: 2px;
}

.gd2-alert--info {
  background: var(--gd2-blue-tint);
  border-color: var(--gd2-blue-border);
  color: #1E40AF !important;
}

.gd2-alert--success {
  background: var(--gd2-green-tint);
  border-color: var(--gd2-green-border);
  color: #065F46 !important;
}

.gd2-alert--warning {
  background: var(--gd2-amber-tint);
  border-color: var(--gd2-amber-border);
  color: #92400E !important;
}

.gd2-alert--error {
  background: var(--gd2-red-tint);
  border-color: var(--gd2-red-border);
  color: #7F1D1D !important;
}

.gd2-alert--promo {
  background: linear-gradient(135deg, rgba(90,59,140,0.08) 0%, rgba(255,145,77,0.06) 100%);
  border-color: var(--gd2-border);
  color: var(--gd2-text) !important;
}


/* ─────────────────────────────────────────────────────────────
   12. PROGRESS RING   .gd2-ring
   ───────────────────────────────────────────────────────────── */

.gd2-ring {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
}

.gd2-ring__svg {
  position: absolute;
  top: 0; left: 0;
  transform: rotate(-90deg);
}

.gd2-ring__track {
  fill: none;
  stroke: var(--gd2-border);
  stroke-width: 3;
}

.gd2-ring__fill {
  fill: none;
  stroke: var(--gd2-orange);
  stroke-width: 3;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.5s var(--gd2-ease);
}

.gd2-ring__pct {
  font-size: 0.58rem;
  font-weight: 800;
  color: var(--gd2-purple) !important;
  line-height: 1;
}


/* ─────────────────────────────────────────────────────────────
   13. AVATAR
   ───────────────────────────────────────────────────────────── */

.gd2-avatar {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--gd2-purple-tint);
  color: var(--gd2-purple) !important;
  font-weight: 700;
  flex-shrink: 0;
  overflow: hidden;
  border: 2px solid #fff;
  box-shadow: 0 0 0 2px var(--gd2-border);
}

.gd2-avatar--sm  { width: 32px; height: 32px; font-size: 0.75rem; }
.gd2-avatar--md  { width: 40px; height: 40px; font-size: 0.9rem;  }
.gd2-avatar--lg  { width: 52px; height: 52px; font-size: 1.1rem;  }
.gd2-avatar--xl  { width: 68px; height: 68px; font-size: 1.4rem;  }

.gd2-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

/* Online dot */
.gd2-avatar__dot {
  position: absolute;
  bottom: 1px;
  right: 1px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--gd2-green);
  border: 2px solid #fff;
}


/* ─────────────────────────────────────────────────────────────
   14. SKELETON LOADERS
   ───────────────────────────────────────────────────────────── */

.gd2-skel {
  background: linear-gradient(
    90deg,
    var(--gd2-border) 0px,
    #EDE9F5 80px,
    var(--gd2-border) 160px
  );
  background-size: 600px 100%;
  animation: gd2SkelShimmer 1.5s infinite linear;
  border-radius: var(--gd2-r-xs);
}

.gd2-skel-line {
  height: 14px;
  margin-bottom: 8px;
}

.gd2-skel-line--sm  { height: 10px; }
.gd2-skel-line--md  { height: 18px; }
.gd2-skel-line--lg  { height: 28px; }
.gd2-skel-line--short { width: 60%; }
.gd2-skel-line--mid   { width: 80%; }

.gd2-skel-card {
  background: var(--gd2-surface);
  border: 1px solid var(--gd2-border);
  border-radius: var(--gd2-r);
  padding: 18px 20px;
  display: grid;
  gap: 10px;
}


/* ─────────────────────────────────────────────────────────────
   15. UTILITY OVERRIDES
   ───────────────────────────────────────────────────────────── */

/* Divider */
.gd2-divider {
  height: 1px;
  background: var(--gd2-border);
  margin: 20px 0;
}

/* Two-column layout */
.gd2-two-col {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

@media (min-width: 900px) {
  .gd2-two-col { grid-template-columns: 1fr 1fr; }
  .gd2-two-col--sidebar { grid-template-columns: 1fr 320px; }
}

/* Scroll container */
.gd2-scroll-x {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.gd2-scroll-x::-webkit-scrollbar { display: none; }

/* Visibility */
.gd2-hidden { display: none !important; }

/* Text helpers */
.gd2-text-muted { color: var(--gd2-text-muted) !important; }
.gd2-text-purple { color: var(--gd2-purple) !important; }
.gd2-text-orange { color: var(--gd2-orange) !important; }
.gd2-text-sm  { font-size: var(--gd2-font-sm)  !important; }
.gd2-text-xs  { font-size: var(--gd2-font-xs)  !important; }
.gd2-fw-700   { font-weight: 700 !important; }
.gd2-fw-800   { font-weight: 800 !important; }

/* Spacers */
.gd2-mt-0  { margin-top: 0    !important; }
.gd2-mt-8  { margin-top: 8px  !important; }
.gd2-mt-16 { margin-top: 16px !important; }
.gd2-mt-24 { margin-top: 24px !important; }
.gd2-mb-0  { margin-bottom: 0    !important; }
.gd2-mb-8  { margin-bottom: 8px  !important; }
.gd2-mb-16 { margin-bottom: 16px !important; }
.gd2-mb-24 { margin-bottom: 24px !important; }


/* ─────────────────────────────────────────────────────────────
   COMPONENT: Announcement banner
   ───────────────────────────────────────────────────────────── */

.gd2-announce {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px var(--gd2-panel-px);
  background: linear-gradient(90deg, rgba(90,59,140,0.07) 0%, rgba(255,145,77,0.05) 100%);
  border-bottom: 1px solid var(--gd2-border);
  font-size: var(--gd2-font-sm);
}

.gd2-announce__icon {
  font-size: 1rem;
  color: var(--gd2-orange) !important;
  flex-shrink: 0;
}

.gd2-announce__text {
  flex: 1;
  color: var(--gd2-text-mid) !important;
  font-weight: 600;
}

.gd2-announce__dismiss {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--gd2-text-faint) !important;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--gd2-r-xs);
  transition: background var(--gd2-dur-fast) var(--gd2-ease);
}

.gd2-announce__dismiss:hover {
  background: var(--gd2-purple-tint);
  color: var(--gd2-purple) !important;
}


/* ─────────────────────────────────────────────────────────────
   COMPONENT: Grant card (universal, used in Home + Discover)
   ───────────────────────────────────────────────────────────── */

.gd2-grant-card {
  background: var(--gd2-surface);
  border: 1px solid var(--gd2-border);
  border-radius: var(--gd2-r);
  box-shadow: var(--gd2-shadow-xs);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: box-shadow var(--gd2-dur) var(--gd2-ease),
              transform var(--gd2-dur) var(--gd2-ease);
  cursor: pointer;
  text-decoration: none !important;
}

.gd2-grant-card:hover {
  box-shadow: var(--gd2-shadow-md);
  transform: translateY(-2px);
}

.gd2-grant-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.gd2-grant-card__title {
  font-size: var(--gd2-font-body);
  font-weight: 700;
  color: var(--gd2-text) !important;
  line-height: 1.35;
  flex: 1;
  min-width: 0;
}

.gd2-grant-card__amount {
  font-size: var(--gd2-font-sm);
  font-weight: 800;
  color: var(--gd2-purple) !important;
  white-space: nowrap;
  background: var(--gd2-purple-tint);
  padding: 3px 9px;
  border-radius: var(--gd2-r-pill);
}

.gd2-grant-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.gd2-grant-card__org {
  font-size: var(--gd2-font-xs);
  color: var(--gd2-text-muted) !important;
  font-weight: 600;
}

.gd2-grant-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--gd2-border);
}

.gd2-grant-card__deadline {
  font-size: var(--gd2-font-xs);
  color: var(--gd2-text-muted) !important;
  display: flex;
  align-items: center;
  gap: 4px;
}

.gd2-grant-card__deadline--urgent {
  color: var(--gd2-red) !important;
  font-weight: 700;
}


/* ─────────────────────────────────────────────────────────────
   COMPONENT: Business context switcher
   ───────────────────────────────────────────────────────────── */

.gd2-biz-ctx:not(.gud-business-context) {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px var(--gd2-panel-px);
  background: var(--gd2-surface);
  border-bottom: 1px solid var(--gd2-border);
  flex-wrap: wrap;
}

.gd2-biz-ctx:not(.gud-business-context) .gd2-biz-ctx__label {
  font-size: var(--gd2-font-xs);
  font-weight: 700;
  color: var(--gd2-text-faint) !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.gd2-biz-ctx:not(.gud-business-context) .gd2-biz-ctx__select {
  flex: 1;
  min-width: 160px;
  max-width: 280px;
  padding: 7px 10px;
  border: 1px solid var(--gd2-border-mid);
  border-radius: var(--gd2-r-sm);
  background: var(--gd2-surface-alt);
  color: var(--gd2-text) !important;
  font-size: var(--gd2-font-sm);
  font-weight: 600;
}

.gd2-biz-ctx:not(.gud-business-context) .gd2-biz-ctx__status {
  font-size: var(--gd2-font-xs);
  color: var(--gd2-text-muted) !important;
}


/* ─────────────────────────────────────────────────────────────
   COMPONENT: Profile completion nudge
   ───────────────────────────────────────────────────────────── */

.gd2-nudge {
  display: flex;
  align-items: center;
  gap: 14px;
  background: linear-gradient(135deg, rgba(90,59,140,0.05) 0%, rgba(255,145,77,0.04) 100%);
  border: 1px solid var(--gd2-border);
  border-radius: var(--gd2-r);
  padding: 14px 18px;
  margin-bottom: 20px;
}

.gd2-nudge--complete {
  background: var(--gd2-green-tint);
  border-color: var(--gd2-green-border);
}

.gd2-nudge__ring {
  flex-shrink: 0;
}

.gd2-nudge__body {
  flex: 1;
  min-width: 0;
}

.gd2-nudge__title {
  font-size: var(--gd2-font-sm);
  font-weight: 700;
  color: var(--gd2-text) !important;
  margin: 0 0 3px;
}

.gd2-nudge__text {
  font-size: var(--gd2-font-xs);
  color: var(--gd2-text-muted) !important;
  margin: 0;
  line-height: 1.45;
}

.gd2-nudge__cta {
  font-size: var(--gd2-font-xs);
  font-weight: 700;
  color: var(--gd2-purple) !important;
  text-decoration: none !important;
  white-space: nowrap;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 3px;
}

.gd2-nudge__cta:hover { color: var(--gd2-orange) !important; }


/* ─────────────────────────────────────────────────────────────
   RESPONSIVE TWEAKS
   ───────────────────────────────────────────────────────────── */

@media (max-width: 479px) {
  .gd2-panel-head {
    flex-wrap: wrap;
  }

  .gd2-panel-head__action {
    width: 100%;
    padding-top: 0;
  }

  .gd2-stat-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .gd2-card {
    padding: 14px 16px;
  }
}

/* Sidebar override (dashboard v2 layer). */
@media (min-width: 768px) {
  #dsb-nav.dsb-nav.gd2-sidebar {
    display: flex !important;
    overflow: hidden !important;
    background: var(--grantaura-white, #FFFFFF) !important;
    border-right: 1px solid var(--grantaura-gray-200, #E5E7EB) !important;
    box-shadow: none !important;
  }
}