/* =====================================================
   A2Z Billing – style.css
   Custom styles complementing Tailwind CDN
   Phase 2 – Landing Page Hero & Nav
   ===================================================== */

/* ── Custom Properties ─────────────────────────────── */
:root {
  --brand-dark:    #0F1117;
  --brand-ink:     #1A1D27;
  --brand-gold:    #C9993A;
  --brand-gold-lt: #E8B85A;
  --brand-steel:   #2A2E3F;
  --brand-slate:   #8892A4;
  --brand-mist:    #F4F6FA;
  --brand-white:   #FFFFFF;
  --font-display:  'Syne', sans-serif;
  --font-body:     'Inter', sans-serif;
}

/* ── Google Fonts import ───────────────────────────── */
/* ── Base ──────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--brand-dark);
  color: var(--brand-white);
  -webkit-font-smoothing: antialiased;
}

/* ── Typography helpers ────────────────────────────── */
.display-font { font-family: var(--font-display); }

/* ── Gold gradient text ────────────────────────────── */
.text-gold-grad {
  background: linear-gradient(135deg, var(--brand-gold) 0%, var(--brand-gold-lt) 60%, #F5D07A 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Navbar ────────────────────────────────────────── */
#navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  transition: background 0.3s ease, box-shadow 0.3s ease;
  padding: 1.25rem 0;
}

#navbar.scrolled {
  background: rgba(15, 17, 23, 0.96);
  backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 rgba(255,255,255,0.06);
  padding: 0.75rem 0;
}

.nav-logo {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  text-decoration: none;
  color: var(--brand-white);
}

.nav-logo span { color: var(--brand-gold); }

.nav-link {
  color: rgba(255,255,255,0.72);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  transition: color 0.2s;
}

.nav-link:hover { color: var(--brand-white); }

.btn-nav-login {
  display: inline-flex;
  align-items: center;
  padding: 0.45rem 1.1rem;
  border: 1.5px solid rgba(201, 153, 58, 0.55);
  border-radius: 6px;
  color: var(--brand-gold-lt);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.btn-nav-login:hover {
  background: var(--brand-gold);
  border-color: var(--brand-gold);
  color: var(--brand-dark);
}

/* Mobile menu */
#mobile-menu {
  background: rgba(15, 17, 23, 0.98);
  backdrop-filter: blur(16px);
  z-index: 200;
}

/* ── Hero Section ──────────────────────────────────── */
#hero {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  padding: 8rem 1.5rem 5rem;
  text-align: center;
}

/* Scissors + comb grid pattern – the signature texture */
.hero-grid-bg {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(201,153,58,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201,153,58,0.04) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, black 30%, transparent 100%);
  pointer-events: none;
}

/* Glowing orb behind headline */
.hero-orb {
  position: absolute;
  width: 600px;
  height: 600px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -60%);
  background: radial-gradient(circle, rgba(201,153,58,0.14) 0%, transparent 70%);
  pointer-events: none;
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: rgba(201,153,58,0.12);
  border: 1px solid rgba(201,153,58,0.25);
  border-radius: 100px;
  padding: 0.3rem 0.9rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brand-gold-lt);
  margin-bottom: 1.75rem;
}

.hero-eyebrow .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--brand-gold);
  animation: pulse-dot 2s infinite;
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.5; transform: scale(0.8); }
}

.hero-headline {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 6.5vw, 5rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin: 0 0 1.5rem;
  max-width: 820px;
}

.hero-sub {
  font-size: clamp(1rem, 2vw, 1.18rem);
  color: var(--brand-slate);
  max-width: 560px;
  line-height: 1.7;
  margin: 0 auto 2.5rem;
}

/* ── Buttons ───────────────────────────────────────── */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--brand-gold);
  color: var(--brand-dark);
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 700;
  padding: 0.8rem 1.8rem;
  border-radius: 8px;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s;
  letter-spacing: 0.01em;
}

.btn-primary:hover {
  background: var(--brand-gold-lt);
  transform: translateY(-1px);
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: transparent;
  color: var(--brand-white);
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  padding: 0.8rem 1.8rem;
  border-radius: 8px;
  text-decoration: none;
  border: 1.5px solid rgba(255,255,255,0.18);
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, transform 0.15s;
}

.btn-secondary:hover {
  border-color: rgba(255,255,255,0.4);
  background: rgba(255,255,255,0.05);
  transform: translateY(-1px);
}

/* ── Trust bar ─────────────────────────────────────── */
.trust-bar {
  margin-top: 3.5rem;
  padding-top: 2.5rem;
  border-top: 1px solid rgba(255,255,255,0.07);
  display: flex;
  gap: 2.5rem;
  justify-content: center;
  flex-wrap: wrap;
}

.trust-stat {
  text-align: center;
}

.trust-stat .number {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--brand-gold-lt);
  display: block;
}

.trust-stat .label {
  font-size: 0.78rem;
  color: var(--brand-slate);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ── Hero mockup card ──────────────────────────────── */
.hero-mockup {
  margin-top: 4rem;
  position: relative;
  max-width: 780px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.mockup-card {
  background: var(--brand-ink);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  padding: 1.5rem;
  box-shadow:
    0 0 0 1px rgba(201,153,58,0.12),
    0 40px 80px rgba(0,0,0,0.6),
    0 0 120px rgba(201,153,58,0.06);
  text-align: left;
}

.mockup-topbar {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.mockup-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
}

.mockup-title-bar {
  flex: 1;
  height: 10px;
  background: rgba(255,255,255,0.06);
  border-radius: 4px;
  margin-left: 0.5rem;
}

.mockup-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.mockup-stat-box {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
  padding: 0.85rem;
}

.mockup-stat-box .mslabel {
  font-size: 0.65rem;
  color: var(--brand-slate);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.35rem;
}

.mockup-stat-box .msvalue {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--brand-white);
}

.mockup-stat-box.gold .msvalue {
  color: var(--brand-gold-lt);
}

.mockup-bill-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 0.85rem;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 8px;
  margin-bottom: 0.5rem;
}

.mockup-bill-row .customer {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.85);
  font-weight: 500;
}

.mockup-bill-row .service {
  font-size: 0.72rem;
  color: var(--brand-slate);
}

.mockup-bill-row .amount {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--brand-gold-lt);
}

.mockup-bill-row .status-badge {
  font-size: 0.65rem;
  font-weight: 600;
  padding: 0.2rem 0.5rem;
  border-radius: 100px;
}

.status-paid {
  background: rgba(34,197,94,0.15);
  color: #4ADE80;
  border: 1px solid rgba(34,197,94,0.25);
}

.status-pending {
  background: rgba(201,153,58,0.15);
  color: var(--brand-gold-lt);
  border: 1px solid rgba(201,153,58,0.25);
}

/* ── Utility ───────────────────────────────────────── */
.container-wide {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* ── Responsive ────────────────────────────────────── */
@media (max-width: 640px) {
  .hero-headline { font-size: 2.25rem; }
  .trust-bar { gap: 1.5rem; }
  .mockup-row { grid-template-columns: 1fr 1fr; }
}

/* ── Scroll-triggered fade in ──────────────────────── */
.fade-up {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}


/* =====================================================
   Phase 3 – Features, How It Works, Pricing
   ===================================================== */

/* ── Section shared layout ─────────────────────────── */
.section-gap {
  padding: 6rem 1.5rem;
  border-top: 1px solid rgba(255,255,255,0.06);
}

.section-header {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 4rem;
}

.section-eyebrow {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand-gold);
  margin-bottom: 1rem;
}

.section-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.5vw, 3.2rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.025em;
  margin: 0 0 1.25rem;
}

.section-sub {
  font-size: 1.05rem;
  color: var(--brand-slate);
  line-height: 1.7;
  margin: 0;
}

/* ── Feature cards ─────────────────────────────────── */
.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.feature-card {
  background: var(--brand-ink);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 16px;
  padding: 2rem 1.75rem;
  transition: border-color 0.25s, transform 0.25s, box-shadow 0.25s;
}

.feature-card:hover {
  border-color: rgba(201,153,58,0.3);
  transform: translateY(-3px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.35), 0 0 0 1px rgba(201,153,58,0.1);
}

.feature-icon-wrap {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(201,153,58,0.1);
  border: 1px solid rgba(201,153,58,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-gold-lt);
  margin-bottom: 1.25rem;
  flex-shrink: 0;
}

.feature-title {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0 0 0.6rem;
  color: var(--brand-white);
}

.feature-desc {
  font-size: 0.9rem;
  color: var(--brand-slate);
  line-height: 1.65;
  margin: 0;
}

/* ── How It Works ──────────────────────────────────── */
.hiw-section {
  background: linear-gradient(180deg, transparent 0%, rgba(201,153,58,0.025) 50%, transparent 100%);
}

.hiw-steps {
  display: flex;
  align-items: flex-start;
  gap: 0;
  justify-content: center;
  max-width: 960px;
  margin: 0 auto;
}

.hiw-step {
  flex: 1;
  text-align: center;
  padding: 0 1.5rem;
  position: relative;
}

.hiw-step-num {
  font-family: var(--font-display);
  font-size: 3.5rem;
  font-weight: 800;
  line-height: 1;
  color: rgba(201,153,58,0.12);
  margin-bottom: 1.25rem;
  letter-spacing: -0.04em;
}

.hiw-icon-wrap {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(201,153,58,0.08);
  border: 1px solid rgba(201,153,58,0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-gold-lt);
  margin: 0 auto 1.25rem;
  box-shadow: 0 0 32px rgba(201,153,58,0.1);
}

.hiw-title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  margin: 0 0 0.6rem;
  color: var(--brand-white);
}

.hiw-desc {
  font-size: 0.9rem;
  color: var(--brand-slate);
  line-height: 1.7;
  margin: 0;
}

/* Dashed connector line between steps */
.hiw-connector {
  width: 80px;
  height: 1px;
  border-top: 2px dashed rgba(201,153,58,0.22);
  flex-shrink: 0;
  margin-top: 4.5rem;
  align-self: flex-start;
}

/* ── Pricing ───────────────────────────────────────── */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  align-items: start;
  max-width: 1060px;
  margin: 0 auto;
}

.pricing-card {
  background: var(--brand-ink);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 20px;
  padding: 2.25rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
}

.pricing-card-pro {
  border-color: rgba(201,153,58,0.4);
  background: linear-gradient(160deg, rgba(201,153,58,0.07) 0%, var(--brand-ink) 50%);
  box-shadow:
    0 0 0 1px rgba(201,153,58,0.2),
    0 24px 64px rgba(0,0,0,0.4),
    0 0 80px rgba(201,153,58,0.06);
  transform: scale(1.03);
}

.pricing-popular-badge {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--brand-gold);
  color: var(--brand-dark);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.25rem 0.9rem;
  border-radius: 100px;
  white-space: nowrap;
}

.pricing-plan-name {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  margin-bottom: 1rem;
}

.pricing-price {
  display: flex;
  align-items: baseline;
  gap: 0.2rem;
  margin-bottom: 0.75rem;
}

.price-currency {
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--brand-white);
  margin-top: 0.3rem;
}

.price-amount {
  font-family: var(--font-display);
  font-size: 3.2rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--brand-white);
  line-height: 1;
}

.price-period {
  font-size: 0.85rem;
  color: var(--brand-slate);
}

.pricing-tagline {
  font-size: 0.875rem;
  color: var(--brand-slate);
  line-height: 1.6;
  margin: 0 0 1.75rem;
}

.pricing-features {
  list-style: none;
  margin: 0 0 2rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  flex: 1;
}

.pf-item {
  font-size: 0.875rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0;
}

.pf-item::before {
  content: '';
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: inline-flex;
  background-size: 10px;
  background-position: center;
  background-repeat: no-repeat;
}

.pf-yes {
  color: rgba(255,255,255,0.82);
}

.pf-yes::before {
  background-color: rgba(34,197,94,0.15);
  border: 1px solid rgba(34,197,94,0.35);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' fill='none' stroke='%234ADE80' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='2,5 4.5,7.5 8,3'/%3E%3C/svg%3E");
}

.pf-no {
  color: rgba(255,255,255,0.28);
}

.pf-no::before {
  background-color: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' fill='none' stroke='rgba(255,255,255,0.2)' stroke-width='2' stroke-linecap='round'%3E%3Cline x1='2' y1='2' x2='8' y2='8'/%3E%3Cline x1='8' y1='2' x2='2' y2='8'/%3E%3C/svg%3E");
}

.pricing-note {
  text-align: center;
  font-size: 0.82rem;
  color: var(--brand-slate);
  margin-top: 2.5rem;
  line-height: 1.7;
}

/* ── Responsive: Phase 3 ───────────────────────────── */
@media (max-width: 900px) {
  .features-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .pricing-grid {
    grid-template-columns: 1fr;
    max-width: 440px;
  }
  .pricing-card-pro {
    transform: none;
  }
  .hiw-steps {
    flex-direction: column;
    align-items: center;
    gap: 2rem;
  }
  .hiw-connector {
    width: 2px;
    height: 40px;
    border-top: none;
    border-left: 2px dashed rgba(201,153,58,0.22);
    margin-top: 0;
    align-self: auto;
  }
}

@media (max-width: 640px) {
  .features-grid {
    grid-template-columns: 1fr;
  }
  .section-gap {
    padding: 4rem 1.25rem;
  }
}


/* =====================================================
   Phase 4 – Testimonials, Contact, Footer
   ===================================================== */

/* ── Testimonials ──────────────────────────────────── */
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.testi-card {
  background: var(--brand-ink);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 16px;
  padding: 2rem 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  transition: border-color 0.25s, transform 0.25s;
}

.testi-card:hover {
  border-color: rgba(201,153,58,0.25);
  transform: translateY(-2px);
}

.testi-card-featured {
  border-color: rgba(201,153,58,0.3);
  background: linear-gradient(160deg, rgba(201,153,58,0.06) 0%, var(--brand-ink) 60%);
}

.testi-stars {
  color: var(--brand-gold);
  font-size: 0.9rem;
  letter-spacing: 0.1em;
}

.testi-quote {
  font-size: 0.935rem;
  color: rgba(255,255,255,0.8);
  line-height: 1.75;
  margin: 0;
  flex: 1;
  font-style: italic;
}

.testi-author {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-top: auto;
}

.testi-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(201,153,58,0.3) 0%, rgba(201,153,58,0.1) 100%);
  border: 1px solid rgba(201,153,58,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--brand-gold-lt);
  flex-shrink: 0;
  letter-spacing: 0.04em;
}

.testi-name {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--brand-white);
  margin-bottom: 0.15rem;
}

.testi-role {
  font-size: 0.775rem;
  color: var(--brand-slate);
}

/* ── Contact Section ───────────────────────────────── */
.contact-section {
  background: linear-gradient(180deg, transparent 0%, rgba(201,153,58,0.02) 50%, transparent 100%);
}

.contact-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: start;
  max-width: 980px;
  margin: 0 auto;
}

.contact-info {
  padding-top: 0.5rem;
}

.whatsapp-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: #25D366;
  color: #fff;
  font-size: 0.9rem;
  font-weight: 700;
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  text-decoration: none;
  transition: background 0.2s, transform 0.15s;
  margin-bottom: 1.75rem;
}

.whatsapp-btn:hover {
  background: #1EBE5A;
  transform: translateY(-1px);
}

.contact-details {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.contact-detail-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.875rem;
  color: var(--brand-slate);
}

.contact-detail-item svg {
  color: var(--brand-gold);
  flex-shrink: 0;
}

/* Contact Form */
.contact-form-wrap {
  background: var(--brand-ink);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 20px;
  padding: 2.5rem 2rem;
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.form-label {
  font-size: 0.82rem;
  font-weight: 600;
  color: rgba(255,255,255,0.65);
  letter-spacing: 0.02em;
}

.form-input {
  background: rgba(255,255,255,0.04);
  border: 1.5px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  color: var(--brand-white);
  font-family: var(--font-body);
  font-size: 0.9rem;
  padding: 0.75rem 1rem;
  outline: none;
  transition: border-color 0.2s, background 0.2s;
  width: 100%;
  box-sizing: border-box;
}

.form-input::placeholder {
  color: rgba(255,255,255,0.2);
}

.form-input:focus {
  border-color: rgba(201,153,58,0.5);
  background: rgba(201,153,58,0.04);
}

.form-textarea {
  resize: vertical;
  min-height: 130px;
}

.contact-success {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  background: rgba(34,197,94,0.1);
  border: 1px solid rgba(34,197,94,0.25);
  border-radius: 12px;
  padding: 1.25rem 1.5rem;
  color: #4ADE80;
  font-size: 0.9rem;
  line-height: 1.6;
}

.contact-error {
  background: rgba(239,68,68,0.1);
  border: 1px solid rgba(239,68,68,0.25);
  border-radius: 8px;
  padding: 0.85rem 1rem;
  color: #FCA5A5;
  font-size: 0.875rem;
  margin-bottom: 0.5rem;
}

/* ── Footer ────────────────────────────────────────── */
#footer {
  border-top: 1px solid rgba(255,255,255,0.07);
  padding: 4rem 1.5rem 2rem;
  background: var(--brand-ink);
}

.footer-top {
  display: grid;
  grid-template-columns: 1.4fr 2fr;
  gap: 4rem;
  margin-bottom: 3.5rem;
  padding-bottom: 3.5rem;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.footer-brand {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.footer-tagline {
  font-size: 0.875rem;
  color: var(--brand-slate);
  line-height: 1.65;
  margin: 0;
}

.footer-social {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.social-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-slate);
  text-decoration: none;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.social-icon:hover {
  background: rgba(201,153,58,0.12);
  border-color: rgba(201,153,58,0.3);
  color: var(--brand-gold-lt);
}

.footer-links-group {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.footer-col-title {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.35);
  margin-bottom: 1rem;
}

.footer-link-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.footer-link-list a {
  font-size: 0.875rem;
  color: var(--brand-slate);
  text-decoration: none;
  transition: color 0.2s;
}

.footer-link-list a:hover {
  color: var(--brand-white);
}

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.footer-copy {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.3);
  margin: 0;
}

.footer-copy a {
  color: var(--brand-gold);
  text-decoration: none;
}

.footer-copy a:hover { text-decoration: underline; }

.footer-made {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.2);
  margin: 0;
}

/* ── Utility helpers (used in pricing + contact) ───── */
.w-full  { width: 100%; }
.mt-auto { margin-top: auto; }
.justify-center { justify-content: center; }

/* ── Responsive: Phase 4 ───────────────────────────── */
@media (max-width: 900px) {
  .testimonials-grid {
    grid-template-columns: 1fr;
    max-width: 480px;
    margin: 0 auto;
  }
  .contact-inner {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
  .footer-top {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .footer-links-group {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 640px) {
  .footer-links-group {
    grid-template-columns: 1fr 1fr;
  }
  .footer-bottom {
    flex-direction: column;
    text-align: center;
  }
}


/* =====================================================
   Bright Design Refresh
   Visual-only layer inspired by the supplied green SaaS
   landing page and bright admin dashboard references.
   ===================================================== */

:root {
  --brand-dark: #edf4ff;
  --brand-ink: #ffffff;
  --brand-gold: #10b981;
  --brand-gold-lt: #06b68f;
  --brand-steel: #d8e4f4;
  --brand-slate: #6f82a0;
  --brand-mist: #f6fbff;
  --brand-white: #101a2f;
  --brand-navy: #101a2f;
  --brand-green: #10b981;
  --brand-green-dark: #059669;
  --brand-green-soft: #d8f8ef;
  --brand-blue-soft: #edf4ff;
  --brand-card: #ffffff;
  --brand-line: #dce7f6;
  --font-display: 'Inter', sans-serif;
  --font-body: 'Inter', sans-serif;
}

html {
  background: #edf4ff;
}

body {
  background:
    radial-gradient(circle at 12% 12%, rgba(16,185,129,0.13), transparent 26rem),
    linear-gradient(180deg, #f7fbff 0%, #edf4ff 44%, #eaf3ff 100%) !important;
  color: var(--brand-navy) !important;
  font-family: var(--font-body) !important;
}

.display-font,
.nav-logo,
.hero-headline,
.section-title,
.feature-title,
.hiw-title,
.pricing-plan-name,
.price-amount,
.page-title,
.stat-value,
.panel-title,
.table-card-header,
.brand-logo-text,
.topbar-logo {
  font-family: var(--font-display) !important;
}

.text-gold-grad {
  background: linear-gradient(135deg, #12c993 0%, #078b70 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* Landing page */
#navbar {
  position: sticky !important;
  top: 0 !important;
  background: rgba(247,251,255,0.9) !important;
  border-bottom: 1px solid rgba(126,148,178,0.18) !important;
  box-shadow: 0 16px 48px rgba(39,72,113,0.06) !important;
  backdrop-filter: blur(18px) !important;
  padding: 1.05rem 0 !important;
}

#navbar.scrolled {
  background: rgba(247,251,255,0.94) !important;
  padding: 0.85rem 0 !important;
}

.container-wide {
  max-width: 1500px !important;
  padding-left: clamp(1.25rem, 4vw, 3rem) !important;
  padding-right: clamp(1.25rem, 4vw, 3rem) !important;
}

.nav-logo {
  color: var(--brand-navy) !important;
  font-size: 1.32rem !important;
  font-weight: 900 !important;
  letter-spacing: -0.03em !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0 !important;
}

.nav-logo::before {
  content: "SB";
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: inline-grid;
  place-items: center;
  background: linear-gradient(145deg, #16c99b 0%, #059669 100%);
  color: #fff;
  font-size: 0.82rem;
  font-weight: 900;
  letter-spacing: 0;
  box-shadow: 0 16px 36px rgba(16,185,129,0.28);
  margin-right: 0.65rem;
}

.nav-logo span {
  color: var(--brand-green-dark) !important;
}

.nav-link {
  color: #53657f !important;
  font-weight: 700 !important;
  font-size: 0.95rem !important;
}

.nav-link:hover {
  color: var(--brand-green-dark) !important;
}

.btn-nav-login,
.btn-secondary {
  background: rgba(255,255,255,0.72) !important;
  color: #344761 !important;
  border: 1px solid rgba(126,148,178,0.24) !important;
  box-shadow: 0 10px 28px rgba(33,55,92,0.06) !important;
}

.btn-nav-login:hover,
.btn-secondary:hover {
  background: #fff !important;
  color: var(--brand-green-dark) !important;
  border-color: rgba(16,185,129,0.28) !important;
}

.btn-primary,
.btn-action.gold,
.btn-gold {
  background: linear-gradient(135deg, #16c99b 0%, #059669 100%) !important;
  color: #ffffff !important;
  border-color: transparent !important;
  box-shadow: 0 18px 42px rgba(16,185,129,0.28) !important;
  border-radius: 11px !important;
  font-weight: 900 !important;
}

.btn-primary:hover,
.btn-action.gold:hover,
.btn-gold:hover {
  transform: translateY(-1px);
  box-shadow: 0 22px 48px rgba(16,185,129,0.34) !important;
}

#mobile-menu {
  background: rgba(247,251,255,0.98) !important;
  color: var(--brand-navy) !important;
}

#mobile-menu a {
  color: var(--brand-navy) !important;
}

#hero {
  min-height: calc(100vh - 82px) !important;
  background:
    radial-gradient(circle at 9% 18%, rgba(30,214,169,0.16), transparent 24rem),
    radial-gradient(circle at 78% 22%, rgba(54,116,255,0.08), transparent 28rem),
    linear-gradient(135deg, #eef8ff 0%, #f7fbff 48%, #edf4ff 100%) !important;
  overflow: hidden !important;
  padding: clamp(4.5rem, 8vw, 7rem) 0 clamp(3.5rem, 6vw, 5rem) !important;
  text-align: left !important;
}

#hero .hero-grid-bg {
  background-image:
    linear-gradient(rgba(28,59,92,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(28,59,92,0.035) 1px, transparent 1px) !important;
  background-size: 56px 56px !important;
  mask-image: none !important;
}

#hero .hero-orb {
  width: 680px !important;
  height: 680px !important;
  background: radial-gradient(circle, rgba(16,185,129,0.16), transparent 68%) !important;
  left: 68% !important;
  top: 50% !important;
}

#hero > .container-wide {
  display: grid !important;
  grid-template-columns: minmax(0, 0.98fr) minmax(440px, 0.92fr) !important;
  align-items: center !important;
  column-gap: clamp(3rem, 6vw, 6rem) !important;
  row-gap: 1.2rem !important;
}

#hero .hero-eyebrow,
#hero .hero-headline,
#hero .hero-sub,
#hero .flex.flex-wrap.justify-center {
  grid-column: 1 !important;
  justify-self: start !important;
}

#hero .hero-mockup {
  grid-column: 2 !important;
  grid-row: 1 / span 4 !important;
  margin: 0 !important;
  max-width: 680px !important;
}

#hero .trust-bar {
  grid-column: 1 / -1 !important;
}

.hero-eyebrow,
.section-eyebrow,
.pricing-popular-badge,
.role-badge,
.phase-chip,
.pending-chip {
  background: rgba(221,250,241,0.82) !important;
  border: 1px solid rgba(16,185,129,0.28) !important;
  color: #04795f !important;
  box-shadow: 0 12px 32px rgba(16,185,129,0.10) !important;
}

.hero-eyebrow {
  padding: 0.55rem 1.05rem !important;
  margin-bottom: 2rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.08em !important;
}

.hero-eyebrow .dot,
.section-eyebrow::before {
  background: #10b981 !important;
}

.hero-headline {
  max-width: 760px !important;
  color: var(--brand-navy) !important;
  font-size: clamp(3.2rem, 5.4vw, 5.8rem) !important;
  line-height: 1.04 !important;
  letter-spacing: -0.055em !important;
  font-weight: 900 !important;
  margin-bottom: 1.65rem !important;
}

.hero-sub {
  max-width: 650px !important;
  color: #40536d !important;
  font-size: clamp(1.05rem, 1.45vw, 1.28rem) !important;
  line-height: 1.82 !important;
  margin: 0 0 2.8rem !important;
}

#hero .flex.flex-wrap.justify-center {
  justify-content: flex-start !important;
}

.hero-mockup {
  filter: drop-shadow(0 32px 70px rgba(16,185,129,0.24)) !important;
}

.mockup-card {
  background: #ffffff !important;
  border: 1px solid rgba(16,185,129,0.24) !important;
  border-radius: 24px !important;
  padding: 1.45rem !important;
  box-shadow:
    0 30px 80px rgba(41,76,120,0.16),
    0 0 0 1px rgba(16,185,129,0.12) !important;
}

.mockup-topbar {
  background: #13243b !important;
  border: none !important;
  border-radius: 20px 20px 0 0 !important;
  margin: -1.45rem -1.45rem 1.35rem !important;
  padding: 1.15rem 1.35rem !important;
}

.mockup-title-bar {
  background: rgba(255,255,255,0.16) !important;
}

.mockup-stat-box,
.mockup-bill-row {
  background: #ffffff !important;
  border: 1px solid #e5edf8 !important;
  box-shadow: 0 16px 36px rgba(31,58,95,0.08) !important;
}

#hero .fade-up,
.section-gap .fade-up {
  opacity: 1 !important;
  transform: none !important;
}

.mockup-stat-box {
  border-radius: 16px !important;
  padding: 1rem !important;
}

.mockup-stat-box .mslabel,
.mockup-bill-row .service {
  color: #7d8fa8 !important;
}

.mockup-stat-box .msvalue,
.mockup-bill-row .customer {
  color: var(--brand-navy) !important;
}

.mockup-bill-row {
  border-radius: 14px !important;
}

.mockup-bill-row .amount {
  color: #07906f !important;
}

.trust-bar {
  margin-top: clamp(3rem, 6vw, 5rem) !important;
  padding-top: 0 !important;
  border-top: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 1.2rem !important;
}

.trust-stat {
  text-align: left !important;
  background: rgba(255,255,255,0.92) !important;
  border: 1px solid rgba(16,185,129,0.22) !important;
  border-left: 4px solid #10b981 !important;
  border-radius: 18px !important;
  padding: 1.35rem 1.5rem !important;
  box-shadow: 0 18px 50px rgba(32,65,104,0.09) !important;
}

.trust-stat .number {
  color: #08a67d !important;
  font-size: clamp(2.2rem, 3.6vw, 3.6rem) !important;
  letter-spacing: -0.06em !important;
  line-height: 0.92 !important;
}

.trust-stat .label {
  color: #526780 !important;
  font-size: 0.86rem !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-weight: 700 !important;
}

.section-gap {
  background: #edf4ff !important;
  border-top: 0 !important;
  padding: clamp(4.5rem, 8vw, 7rem) 0 !important;
}

.section-header {
  max-width: 920px !important;
  margin-bottom: clamp(3rem, 5vw, 4.6rem) !important;
}

.section-eyebrow {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.55rem !important;
  width: auto !important;
  border-radius: 999px !important;
  padding: 0.55rem 1.1rem !important;
  font-size: 0.78rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.12em !important;
}

.section-eyebrow::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 999px;
  display: inline-block;
  box-shadow: 0 0 0 6px rgba(16,185,129,0.12);
}

.section-title {
  color: var(--brand-navy) !important;
  font-size: clamp(2.35rem, 4.8vw, 4.05rem) !important;
  line-height: 1.08 !important;
  letter-spacing: -0.055em !important;
  font-weight: 900 !important;
}

.section-sub {
  color: #415670 !important;
  font-size: clamp(1.05rem, 1.55vw, 1.28rem) !important;
  line-height: 1.7 !important;
}

.features-grid,
.testimonials-grid {
  gap: 1.6rem !important;
}

.feature-card,
.testi-card,
.pricing-card,
.contact-form-wrap {
  background: rgba(255,255,255,0.94) !important;
  border: 1px solid #dfeaf8 !important;
  border-radius: 18px !important;
  box-shadow: 0 18px 50px rgba(29,56,92,0.08) !important;
}

.feature-card {
  min-height: 245px !important;
  padding: 2rem 1.8rem !important;
}

.feature-card:hover,
.testi-card:hover,
.pricing-card:hover {
  border-color: rgba(16,185,129,0.34) !important;
  box-shadow: 0 24px 64px rgba(16,185,129,0.12) !important;
}

.feature-card:nth-child(2),
.pricing-card-pro,
.testi-card-featured {
  background: linear-gradient(145deg, rgba(246,255,252,0.98), rgba(255,255,255,0.94)) !important;
  border-color: rgba(16,185,129,0.34) !important;
}

.feature-icon-wrap,
.hiw-icon-wrap,
.testi-avatar,
.social-icon {
  background: linear-gradient(145deg, #effff9, #e0fbf2) !important;
  border: 1px solid rgba(16,185,129,0.22) !important;
  color: #07906f !important;
  box-shadow: 0 15px 34px rgba(16,185,129,0.10) !important;
}

.feature-title,
.hiw-title,
.testi-name,
.pricing-plan-name,
.panel-title,
.section-title,
.feature-desc strong {
  color: var(--brand-navy) !important;
}

.feature-desc,
.hiw-desc,
.testi-quote,
.testi-role,
.pricing-tagline,
.pricing-note,
.footer-tagline,
.contact-detail-item,
.footer-link-list a {
  color: #526780 !important;
}

.hiw-section,
.contact-section {
  background: #ffffff !important;
}

.hiw-steps {
  max-width: 1250px !important;
  align-items: flex-start !important;
}

.hiw-step-num {
  width: 68px !important;
  height: 68px !important;
  border-radius: 999px !important;
  border: 2px solid #10b981 !important;
  display: grid !important;
  place-items: center !important;
  margin: 0 auto 1.65rem !important;
  color: #07906f !important;
  background: #ffffff !important;
  font-size: 1.55rem !important;
  font-weight: 900 !important;
  box-shadow: 0 0 0 12px rgba(16,185,129,0.10), 0 16px 34px rgba(16,185,129,0.12) !important;
  letter-spacing: 0 !important;
}

.hiw-step:nth-of-type(3) .hiw-step-num,
.hiw-step:hover .hiw-step-num {
  background: #10b981 !important;
  color: #ffffff !important;
}

.hiw-icon-wrap {
  display: none !important;
}

.hiw-connector {
  border-top: 2px solid rgba(16,185,129,0.32) !important;
  width: 120px !important;
  margin-top: 2.1rem !important;
}

.pricing-card {
  border-radius: 22px !important;
}

.pricing-card-pro {
  transform: scale(1.02) !important;
  box-shadow: 0 26px 70px rgba(16,185,129,0.14) !important;
}

.price-currency,
.price-amount {
  color: var(--brand-navy) !important;
}

.price-period,
.pf-yes {
  color: #4b617b !important;
}

.pf-no {
  color: #a0aec2 !important;
}

.contact-inner {
  gap: clamp(2.5rem, 5vw, 5rem) !important;
}

.form-label,
.auth-label {
  color: #6f82a0 !important;
}

.form-input,
.auth-input,
.input,
.select,
textarea,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="search"],
select {
  background: #f8fbff !important;
  border: 1px solid #dce7f6 !important;
  color: var(--brand-navy) !important;
  border-radius: 10px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.65) !important;
}

.form-input:focus,
.auth-input:focus,
.input:focus,
.select:focus,
textarea:focus,
input:focus,
select:focus {
  border-color: rgba(16,185,129,0.56) !important;
  box-shadow: 0 0 0 4px rgba(16,185,129,0.10) !important;
}

.form-input::placeholder,
.auth-input::placeholder,
.input::placeholder {
  color: #8a9bb2 !important;
}

#footer {
  background: #ffffff !important;
  border-top: 1px solid #dfeaf8 !important;
}

.footer-top {
  border-bottom: 1px solid #e4edf8 !important;
}

.footer-col-title,
.footer-copy,
.footer-made {
  color: #7d8fa8 !important;
}

/* Auth screens */
.auth-card {
  background: rgba(255,255,255,0.95) !important;
  border: 1px solid #dce7f6 !important;
  border-radius: 22px !important;
  box-shadow: 0 24px 72px rgba(31,58,95,0.13) !important;
}

.alert-success {
  background: #dcfce7 !important;
  color: #047857 !important;
  border-color: #a7f3d0 !important;
}

.alert-error,
.contact-error {
  background: #fff1f2 !important;
  color: #be123c !important;
  border-color: #fecdd3 !important;
}

/* Bright dashboard and app shell */
.topbar {
  background: rgba(255,255,255,0.92) !important;
  border-bottom: 1px solid #dce7f6 !important;
  box-shadow: 0 12px 36px rgba(31,58,95,0.06) !important;
  color: var(--brand-navy) !important;
  backdrop-filter: blur(16px) !important;
}

.brand-logo-text,
.topbar-logo,
.user-info-name,
.shop-label,
.topbar-name,
.page-title {
  color: var(--brand-navy) !important;
}

.brand-logo-text span,
.topbar-logo span {
  color: var(--brand-green-dark) !important;
}

.brand-logo-img {
  border-color: rgba(16,185,129,0.22) !important;
  box-shadow: 0 10px 24px rgba(16,185,129,0.15) !important;
}

.layout {
  background: #edf4ff !important;
}

.sidebar {
  background: #ffffff !important;
  border-right: 1px solid #dce7f6 !important;
  box-shadow: 18px 0 48px rgba(31,58,95,0.05) !important;
}

.sidebar-label,
.user-info-role,
.stat-label,
.td-muted,
.muted,
.page-subtitle,
.page-date,
.section-link,
.panel-link,
.empty,
.empty-state,
.panel-empty {
  color: #7386a3 !important;
}

.nav-item {
  color: #687a98 !important;
  border: 1px solid transparent !important;
}

.nav-item svg,
.nav-icon {
  color: currentColor !important;
}

.nav-item:hover {
  background: #eefaf6 !important;
  color: #06866a !important;
}

.nav-item.active {
  background: #e5f8f2 !important;
  border-color: rgba(16,185,129,0.18) !important;
  color: #059669 !important;
  box-shadow: 0 12px 28px rgba(16,185,129,0.12) !important;
}

.nav-item.locked,
.nav-item.disabled {
  opacity: 0.55 !important;
}

.sidebar-divider {
  border-top-color: #e4edf8 !important;
}

.main {
  background:
    radial-gradient(circle at 12% 0%, rgba(16,185,129,0.08), transparent 30rem),
    #edf4ff !important;
  color: var(--brand-navy) !important;
}

.page-title {
  font-weight: 900 !important;
  letter-spacing: -0.04em !important;
}

.page-subtitle {
  font-size: 0.9rem !important;
}

.stat-card,
.stat,
.panel,
.table-card,
.action-card,
.menu-card,
.category-card,
.profile,
.modal,
.settings-card,
.summary-card {
  background: rgba(255,255,255,0.96) !important;
  border: 1px solid #dfeaf8 !important;
  color: var(--brand-navy) !important;
  box-shadow: 0 16px 44px rgba(31,58,95,0.08) !important;
}

.stat-card,
.stat {
  border-radius: 18px !important;
}

.stat-card::before,
.stat-card-accent {
  background: linear-gradient(90deg, #10b981, #5ea8ff) !important;
  height: 3px !important;
}

.stat-value,
.stat-value.gold,
.stat-value.green,
.stat-value.orange,
.stat .stat-value {
  color: var(--brand-navy) !important;
  font-weight: 900 !important;
  letter-spacing: -0.045em !important;
}

.stat:nth-child(2),
.stat-card:nth-child(2) {
  border-top: 3px solid #4f7cff !important;
}

.stat:nth-child(3),
.stat-card:nth-child(3) {
  border-top: 3px solid #ffb020 !important;
}

.stat:nth-child(4),
.stat-card:nth-child(4) {
  border-top: 3px solid #a855f7 !important;
}

.panel,
.table-card {
  border-radius: 18px !important;
  overflow: hidden !important;
}

.panel-header,
.table-card-header,
.filters,
.modal-header,
.modal-footer {
  background: rgba(248,251,255,0.78) !important;
  border-color: #e4edf8 !important;
}

.panel-title,
.section-title,
.table-card-header,
.customer-name,
.top-item-name,
.value,
.value.gold,
.invoice-num,
.sales-table td,
.customer-table td,
.history-table td,
.bills-table td,
table.data-table tbody td {
  color: var(--brand-navy) !important;
}

.invoice-num {
  color: #04795f !important;
  font-weight: 900 !important;
}

table,
.sales-table,
.customer-table,
.history-table,
.bills-table,
table.data-table {
  background: transparent !important;
}

.sales-table th,
.customer-table th,
.history-table th,
.bills-table th,
table.data-table thead th {
  background: #f4f8ff !important;
  color: #7386a3 !important;
  border-bottom: 1px solid #e4edf8 !important;
  font-weight: 900 !important;
}

.sales-table td,
.customer-table td,
.history-table td,
.bills-table td,
table.data-table tbody td {
  border-bottom-color: #edf2fa !important;
}

.sales-table tr:hover td,
.customer-table tr:hover td,
.history-table tr:hover td,
.bills-table tr:hover td,
table.data-table tbody tr:hover {
  background: #f7fbff !important;
}

.btn,
.btn-action,
.btn-muted,
.page-link,
.section-link,
.panel-link {
  border-radius: 11px !important;
  font-weight: 800 !important;
}

.btn-muted,
.btn-action,
.page-link {
  background: #f8fbff !important;
  border: 1px solid #dce7f6 !important;
  color: #40536d !important;
}

.btn-muted:hover,
.btn-action:hover,
.page-link:hover {
  background: #eefaf6 !important;
  color: #04795f !important;
  border-color: rgba(16,185,129,0.28) !important;
}

.page-link.active {
  background: #dff8ef !important;
  color: #04795f !important;
  border-color: rgba(16,185,129,0.35) !important;
}

.btn-danger {
  background: #fff1f2 !important;
  color: #be123c !important;
  border-color: #fecdd3 !important;
}

.status-pill,
.badge,
.plan-chip,
.delta,
.role-badge {
  border-radius: 999px !important;
  font-weight: 900 !important;
}

.status-paid,
.badge-active,
.delta.up {
  background: #dcfce7 !important;
  color: #047857 !important;
  border-color: #a7f3d0 !important;
}

.status-pending,
.badge-suspended {
  background: #fff7ed !important;
  color: #c2410c !important;
  border-color: #fed7aa !important;
}

.status-void,
.plan-chip.none {
  background: #f1f5f9 !important;
  color: #64748b !important;
  border-color: #dbe5ef !important;
}

.plan-chip {
  background: #e0f2fe !important;
  color: #2563eb !important;
  border-color: #bfdbfe !important;
}

.user-pill {
  background: #f7fbff !important;
  border-color: #dce7f6 !important;
}

.user-avatar {
  background: linear-gradient(135deg, #10b981, #4f7cff) !important;
  color: #fff !important;
  box-shadow: 0 10px 26px rgba(16,185,129,0.20) !important;
}

.notif-btn,
.mobile-menu-btn {
  background: #f7fbff !important;
  border: 1px solid #dce7f6 !important;
  color: #53657f !important;
}

.notif-panel {
  background: #ffffff !important;
  border-color: #dce7f6 !important;
  box-shadow: 0 24px 72px rgba(31,58,95,0.16) !important;
}

.notif-header,
.notif-item,
.notif-item strong {
  color: var(--brand-navy) !important;
  border-color: #e4edf8 !important;
}

.flash-success {
  background: #dcfce7 !important;
  color: #047857 !important;
  border-color: #a7f3d0 !important;
}

.flash-error {
  background: #fff1f2 !important;
  color: #be123c !important;
  border-color: #fecdd3 !important;
}

.modal-overlay {
  background: rgba(15,26,47,0.36) !important;
  backdrop-filter: blur(6px) !important;
}

.invoice-toolbar {
  background: rgba(255,255,255,0.86) !important;
  color: var(--brand-navy) !important;
  border: 1px solid #dce7f6 !important;
  border-radius: 16px !important;
  padding: 0.8rem !important;
  box-shadow: 0 18px 48px rgba(31,58,95,0.10) !important;
}

.invoice-toolbar a,
.invoice-toolbar button {
  background: #f8fbff !important;
  color: #40536d !important;
  border-color: #dce7f6 !important;
}

.invoice-toolbar .primary {
  background: linear-gradient(135deg, #16c99b, #059669) !important;
  color: #fff !important;
}

@media (max-width: 1100px) {
  #hero > .container-wide {
    grid-template-columns: 1fr !important;
    text-align: center !important;
  }
  #hero .hero-eyebrow,
  #hero .hero-headline,
  #hero .hero-sub,
  #hero .flex.flex-wrap.justify-center,
  #hero .hero-mockup,
  #hero .trust-bar {
    grid-column: 1 !important;
    grid-row: auto !important;
    justify-self: center !important;
  }
  #hero .flex.flex-wrap.justify-center {
    justify-content: center !important;
  }
  #hero .hero-sub {
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .trust-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 900px) {
  .features-grid,
  .pricing-grid,
  .testimonials-grid {
    grid-template-columns: 1fr !important;
  }
  .hiw-steps {
    flex-direction: column !important;
    gap: 2rem !important;
  }
  .hiw-connector {
    width: 2px !important;
    height: 42px !important;
    border-top: 0 !important;
    border-left: 2px solid rgba(16,185,129,0.32) !important;
    margin: 0 auto !important;
  }
}

@media (max-width: 640px) {
  .nav-logo::before {
    width: 38px;
    height: 38px;
    border-radius: 12px;
  }
  .hero-headline {
    font-size: clamp(2.45rem, 13vw, 3.3rem) !important;
  }
  .trust-bar {
    grid-template-columns: 1fr !important;
  }
  .section-title {
    font-size: clamp(2.1rem, 11vw, 3rem) !important;
  }
}

/* =====================================================
   A2Z Billing final design polish
   ===================================================== */
:root {
  --a2z-navy: #17234c;
  --a2z-blue: #4fa5e8;
  --a2z-orange: #f26722;
  --a2z-yellow: #ffc20a;
  --a2z-green: #10b981;
  --a2z-green-dark: #058a6a;
}

@keyframes a2z-heading-glow {
  0%, 100% {
    text-shadow:
      0 0 10px rgba(16,185,129,0.12),
      0 0 24px rgba(79,165,232,0.08);
  }
  50% {
    text-shadow:
      0 0 20px rgba(16,185,129,0.34),
      0 0 52px rgba(79,165,232,0.22),
      0 0 86px rgba(16,185,129,0.10);
  }
}

@keyframes a2z-soft-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

.nav-logo,
.topbar-logo,
.brand-logo-text {
  gap: 0.55rem !important;
  letter-spacing: 0 !important;
}

.nav-logo::before {
  content: "A2Z" !important;
  background:
    radial-gradient(circle at 34% 72%, var(--a2z-orange) 0 5px, transparent 6px),
    radial-gradient(circle at 58% 28%, var(--a2z-yellow) 0 5px, transparent 6px),
    linear-gradient(145deg, var(--a2z-navy), #21346c) !important;
  color: #ffffff !important;
  box-shadow: 0 16px 36px rgba(23,35,76,0.22), 0 0 0 1px rgba(79,165,232,0.18) !important;
}

.topbar-logo::before {
  content: "A2Z";
  width: 34px;
  height: 34px;
  border-radius: 11px;
  display: inline-grid;
  place-items: center;
  margin-right: 0.55rem;
  background: linear-gradient(145deg, var(--a2z-navy), #21346c);
  color: #fff;
  font-size: 0.67rem;
  font-weight: 900;
  vertical-align: middle;
  box-shadow: 0 10px 26px rgba(23,35,76,0.16);
}

.nav-logo span,
.topbar-logo span,
.brand-logo-text span {
  color: var(--a2z-green-dark) !important;
}

.hero-headline,
.section-gap > .container-wide > .section-header .section-title,
.page-title,
.main .section-title,
.panel-title,
.feature-title,
.hiw-title,
.pricing-plan-name {
  animation: a2z-heading-glow 3.8s ease-in-out infinite !important;
  letter-spacing: 0 !important;
}

.hero-headline,
.section-title {
  letter-spacing: 0 !important;
}

.trust-bar {
  max-width: 1420px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  gap: 1.45rem !important;
}

.trust-stat {
  min-height: 148px !important;
  display: grid !important;
  grid-template-columns: 70px minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  align-items: center !important;
  column-gap: 1rem !important;
  border-radius: 18px !important;
  border: 1px solid rgba(16,185,129,0.26) !important;
  border-left: 4px solid var(--a2z-green) !important;
  background: rgba(255,255,255,0.96) !important;
  box-shadow: 0 22px 56px rgba(31,58,95,0.08) !important;
}

.trust-stat::before {
  width: 56px;
  height: 56px;
  border-radius: 15px;
  grid-row: 1 / span 2;
  display: inline-grid;
  place-items: center;
  align-self: center;
  background: linear-gradient(145deg, #effff9, #e1fbf2);
  border: 1px solid rgba(16,185,129,0.25);
  color: var(--a2z-green-dark);
  font-weight: 900;
  box-shadow: 0 14px 34px rgba(16,185,129,0.12);
}

.trust-stat:nth-child(1)::before { content: "A2Z"; }
.trust-stat:nth-child(2)::before { content: "Rs"; }
.trust-stat:nth-child(3)::before { content: "10"; }
.trust-stat:nth-child(4)::before { content: "*"; }

.trust-stat .number {
  grid-column: 2;
  align-self: end;
  font-size: clamp(2.5rem, 4vw, 4.1rem) !important;
}

.trust-stat .label {
  grid-column: 2;
  align-self: start;
  font-size: 0.92rem !important;
}

.feature-card,
.testi-card,
.pricing-card,
.contact-form-wrap,
.trust-stat,
.mockup-card,
.mockup-stat-box,
.mockup-bill-row,
.stat-card,
.stat,
.panel,
.table-card,
.action-card,
.menu-card,
.category-card,
.profile,
.modal,
.settings-card,
.summary-card {
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease, background 0.22s ease !important;
}

.feature-card:hover,
.testi-card:hover,
.pricing-card:hover,
.contact-form-wrap:hover,
.trust-stat:hover,
.mockup-card:hover,
.mockup-stat-box:hover,
.mockup-bill-row:hover,
.stat-card:hover,
.stat:hover,
.panel:hover,
.table-card:hover,
.action-card:hover,
.menu-card:hover,
.category-card:hover,
.profile:hover,
.settings-card:hover,
.summary-card:hover {
  transform: translateY(-5px) !important;
  border-color: rgba(16,185,129,0.46) !important;
  box-shadow:
    0 28px 76px rgba(16,185,129,0.15),
    0 0 42px rgba(79,165,232,0.12) !important;
}

.hiw-step:nth-of-type(3) .hiw-step-num {
  background: #ffffff !important;
  color: #07906f !important;
}

.hiw-step:hover .hiw-step-num {
  background: var(--a2z-green) !important;
  color: #ffffff !important;
  box-shadow: 0 0 0 14px rgba(16,185,129,0.12), 0 18px 42px rgba(16,185,129,0.2) !important;
}

#pricing {
  padding-bottom: clamp(2.6rem, 4vw, 3.5rem) !important;
}

.pricing-note {
  margin-top: 2.1rem !important;
  margin-bottom: 0 !important;
}

#testimonials {
  padding-top: clamp(2.7rem, 4vw, 3.75rem) !important;
}

#footer {
  background: var(--a2z-navy) !important;
  border-top: 0 !important;
  color: #ffffff !important;
}

#footer .footer-top {
  border-bottom: 1px solid rgba(255,255,255,0.14) !important;
}

#footer .nav-logo,
#footer .footer-col-title {
  color: #ffffff !important;
}

#footer .footer-tagline,
#footer .footer-copy,
#footer .footer-made {
  color: rgba(255,255,255,0.72) !important;
}

#footer .footer-link-list a {
  color: rgba(224,236,255,0.82) !important;
}

#footer .footer-link-list a:hover,
#footer .footer-copy a {
  color: #8fdcff !important;
}

#footer .social-icon {
  background: rgba(255,255,255,0.08) !important;
  border-color: rgba(255,255,255,0.16) !important;
  color: #ffffff !important;
}

#footer .social-icon:hover {
  background: rgba(79,165,232,0.2) !important;
  border-color: rgba(79,165,232,0.42) !important;
}

.main {
  padding: clamp(1.35rem, 2.3vw, 2.25rem) !important;
}

.page-header {
  margin-bottom: 1.45rem !important;
}

.page-title {
  font-size: clamp(1.55rem, 2.2vw, 2rem) !important;
  line-height: 1.18 !important;
}

.main .section-header {
  max-width: none !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.main .section-title,
.table-card .section-title,
.panel .section-title,
.table-card-header .section-title {
  font-size: 1.02rem !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
  font-weight: 900 !important;
  color: var(--a2z-navy) !important;
}

.table-card-header {
  padding: 1rem 1.25rem !important;
}

.stats-grid {
  align-items: stretch !important;
  gap: 1.05rem !important;
}

.stat-card {
  min-height: 126px !important;
  padding: 1.28rem 1.35rem !important;
}

.stat-icon {
  opacity: 0.12 !important;
  color: #526780 !important;
}

.stat-icon svg {
  width: 46px !important;
  height: 46px !important;
  stroke-width: 1.45 !important;
}

.quick-actions {
  margin-bottom: 1.35rem !important;
}

.bottom-grid {
  align-items: start !important;
}

table.data-table thead th {
  font-size: 0.72rem !important;
}

table.data-table tbody td {
  font-size: 0.84rem !important;
}

.dashboard-updates {
  padding: 1.1rem 1.25rem 1.25rem;
  display: grid;
  gap: 0.75rem;
}

.dashboard-update-item {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 0.75rem;
  align-items: start;
  padding: 0.85rem;
  border: 1px solid #e4edf8;
  border-radius: 13px;
  background: #f8fbff;
}

.dashboard-update-icon {
  width: 34px;
  height: 34px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  background: #e5f8f2;
  color: var(--a2z-green-dark);
  font-weight: 900;
  box-shadow: 0 10px 24px rgba(16,185,129,0.12);
}

.dashboard-update-title {
  color: var(--a2z-navy);
  font-size: 0.9rem;
  font-weight: 900;
  margin-bottom: 0.18rem;
}

.dashboard-update-text {
  color: #61738f;
  font-size: 0.8rem;
  line-height: 1.5;
}

.demo-login-note {
  margin-top: 1rem;
  padding: 0.75rem 0.85rem;
  border-radius: 12px;
  background: #effff9;
  border: 1px solid rgba(16,185,129,0.22);
  color: #04795f;
  font-size: 0.8rem;
  line-height: 1.45;
  text-align: center;
}

.demo-login-note strong {
  color: var(--a2z-navy);
}

@media (max-width: 1100px) {
  .trust-stat {
    min-height: 132px !important;
  }
}

/* Exact homepage/dashboard selector polish after final markup review */
.trust-bar {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  align-items: stretch !important;
  padding-top: 3.25rem !important;
}

.trust-stat {
  text-align: left !important;
  padding: 1.45rem 1.55rem !important;
}

.trust-stat .number {
  color: var(--a2z-green) !important;
  font-weight: 900 !important;
  line-height: 0.98 !important;
  letter-spacing: 0 !important;
}

.trust-stat .label {
  color: #445773 !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

.trust-stat:nth-child(2)::before { content: "Rs" !important; }
.trust-stat:nth-child(4)::before { content: "★" !important; }

.hiw-steps .hiw-step .hiw-step-num {
  background: #ffffff !important;
  color: var(--a2z-green-dark) !important;
  border-color: var(--a2z-green) !important;
}

.hiw-steps .hiw-step:hover .hiw-step-num {
  background: var(--a2z-green) !important;
  color: #ffffff !important;
  box-shadow:
    0 0 0 14px rgba(16,185,129,0.13),
    0 18px 46px rgba(16,185,129,0.24) !important;
}

.hiw-step-content,
.feature-card,
.pricing-card,
.testi-card,
.contact-form-wrap,
.table-card,
.panel {
  will-change: transform, box-shadow;
}

.bottom-grid .table-card {
  min-height: 280px !important;
}

@media (max-width: 980px) {
  .trust-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 640px) {
  .trust-bar {
    grid-template-columns: 1fr !important;
  }

  .trust-stat {
    grid-template-columns: 58px minmax(0, 1fr) !important;
  }
}

/* Phase 16 final UI repair: bright forms, color icons, menu controls */
select,
.select,
.filter-select,
.form-select,
.form-input,
.input,
.form-textarea,
.textarea {
  background-color: #f8fbff !important;
  border: 1px solid #d7e5f6 !important;
  color: var(--a2z-navy) !important;
  box-shadow: none !important;
}

select:hover,
.select:hover,
.filter-select:hover,
.form-select:hover,
.form-input:hover,
.input:hover,
.form-textarea:hover,
.textarea:hover {
  border-color: rgba(16,185,129,0.38) !important;
  background-color: #ffffff !important;
  color: var(--a2z-navy) !important;
}

select:focus,
.select:focus,
.filter-select:focus,
.form-select:focus,
.form-input:focus,
.input:focus,
.form-textarea:focus,
.textarea:focus {
  outline: none !important;
  border-color: var(--a2z-green) !important;
  box-shadow: 0 0 0 4px rgba(16,185,129,0.12) !important;
}

select option,
.select option,
.filter-select option,
.form-select option {
  background: #ffffff !important;
  color: var(--a2z-navy) !important;
}

.stat-card .stat-icon,
.stat .stat-icon {
  opacity: 1 !important;
  top: 1.1rem !important;
  right: 1.15rem !important;
  bottom: auto !important;
  width: 46px !important;
  height: 46px !important;
  padding: 0.62rem !important;
  border-radius: 15px !important;
  background: #e5f8f2 !important;
  color: var(--a2z-green-dark) !important;
  box-shadow: 0 14px 30px rgba(16,185,129,0.14) !important;
}

.stat-card:nth-child(2) .stat-icon,
.stat:nth-child(2) .stat-icon {
  background: #eaf1ff !important;
  color: #2563eb !important;
  box-shadow: 0 14px 30px rgba(37,99,235,0.12) !important;
}

.stat-card:nth-child(3) .stat-icon,
.stat:nth-child(3) .stat-icon {
  background: #fff7e0 !important;
  color: #d97706 !important;
  box-shadow: 0 14px 30px rgba(217,119,6,0.12) !important;
}

.stat-card:nth-child(4) .stat-icon,
.stat:nth-child(4) .stat-icon {
  background: #f5edff !important;
  color: #9333ea !important;
  box-shadow: 0 14px 30px rgba(147,51,234,0.12) !important;
}

.trust-stat::before {
  font-size: 1.05rem !important;
}

.trust-stat:nth-child(1)::before {
  background: #e5f8f2 !important;
  color: #04795f !important;
}

.trust-stat:nth-child(2)::before {
  background: #fff7e0 !important;
  color: #c26a00 !important;
}

.trust-stat:nth-child(3)::before {
  background: #eaf1ff !important;
  color: #2563eb !important;
}

.trust-stat:nth-child(4)::before {
  background: #f5edff !important;
  color: #7e22ce !important;
}

.chart-card,
.rev-card,
.filter-bar,
.form-card,
.bulk-bar,
.empty-state {
  background: rgba(255,255,255,0.96) !important;
  border: 1px solid #dfeaf8 !important;
  color: var(--a2z-navy) !important;
  box-shadow: 0 18px 48px rgba(31,58,95,0.08) !important;
}

.chart-card-title,
.table-card-title,
.rev-plan-name,
.form-section-title,
.form-label,
.filter-label,
.bulk-check,
.tab,
.menu-card-name,
.empty-state-title,
.modal-title {
  color: var(--a2z-navy) !important;
}

.page-subtitle,
.form-hint,
.menu-card-desc,
.rev-cnt,
.period-dates,
.td-muted,
.empty-state-sub,
.panel-sub,
.muted {
  color: #61738f !important;
}

.tab:hover {
  color: #04795f !important;
}

.tab.active {
  color: var(--a2z-green-dark) !important;
  border-bottom-color: var(--a2z-green) !important;
}

.tab-count {
  background: #e8f1fb !important;
  color: #61738f !important;
}

.tab.active .tab-count,
.bulk-count {
  background: #dff8ef !important;
  color: var(--a2z-green-dark) !important;
}

.bulk-bar {
  padding: 0.95rem 1.05rem !important;
}

.bulk-check {
  font-weight: 800 !important;
}

.bulk-check input,
.card-check input,
.status-option input {
  accent-color: var(--a2z-green) !important;
}

.card-check {
  background: #ffffff !important;
  border: 1px solid #cbd8ea !important;
  box-shadow: 0 10px 24px rgba(23,35,76,0.12) !important;
}

.card-check:hover {
  border-color: var(--a2z-green) !important;
}

.menu-grid {
  align-items: stretch !important;
}

.menu-card {
  border-radius: 16px !important;
}

.menu-card:hover {
  border-color: rgba(79,165,232,0.38) !important;
  box-shadow: 0 26px 70px rgba(79,165,232,0.13), 0 0 34px rgba(16,185,129,0.10) !important;
}

.menu-card-img-wrap,
.image-preview {
  background:
    radial-gradient(circle at 50% 15%, rgba(16,185,129,0.15), transparent 6rem),
    #f5f9ff !important;
  border-bottom: 1px solid #edf2fa !important;
}

.menu-card-img-placeholder,
.image-preview-placeholder,
.empty-state-icon {
  color: var(--a2z-green-dark) !important;
  opacity: 1 !important;
}

.menu-card-cat {
  color: var(--a2z-green-dark) !important;
  font-weight: 900 !important;
}

.menu-card-price,
.rev-amount,
.filter-total strong {
  color: var(--a2z-green) !important;
}

.menu-card-footer {
  border-top-color: #edf2fa !important;
}

.icon-btn {
  background: #f7fbff !important;
  border: 1px solid #dce7f6 !important;
  color: #40536d !important;
  box-shadow: 0 8px 20px rgba(31,58,95,0.07) !important;
}

.icon-btn.edit {
  color: #2563eb !important;
  background: #edf4ff !important;
}

.icon-btn.archive,
.icon-btn.restore {
  color: #04795f !important;
  background: #e9fbf4 !important;
}

.icon-btn.delete {
  color: #be123c !important;
  background: #fff1f2 !important;
}

.icon-btn:hover {
  transform: translateY(-1px) !important;
}

.file-input-btn {
  display: inline-flex !important;
  align-items: center !important;
  background: #e9fbf4 !important;
  border: 1px solid rgba(16,185,129,0.28) !important;
  color: var(--a2z-green-dark) !important;
  box-shadow: 0 12px 28px rgba(16,185,129,0.12) !important;
}

.file-input-btn:hover {
  background: #dff8ef !important;
  color: #04795f !important;
}

.image-upload-zone {
  align-items: center !important;
  padding: 0.9rem !important;
  border: 1px dashed rgba(16,185,129,0.28) !important;
  border-radius: 16px !important;
  background: #f8fbff !important;
}

.status-option-card {
  background: #f8fbff !important;
  border-color: #d7e5f6 !important;
  color: #40536d !important;
}

.status-option-card:hover {
  border-color: rgba(16,185,129,0.34) !important;
  color: var(--a2z-green-dark) !important;
}

.status-option input:checked + .status-option-card.active-card {
  background: #e5f8f2 !important;
  color: var(--a2z-green-dark) !important;
}

.status-option input:checked + .status-option-card.archived-card {
  background: #eef3f9 !important;
  color: #526780 !important;
}

.btn-ghost,
.btn-cancel,
.bulk-submit {
  background: #f8fbff !important;
  border: 1px solid #dce7f6 !important;
  color: #40536d !important;
}

.btn-ghost:hover,
.btn-cancel:hover,
.bulk-submit:hover {
  background: #eefaf6 !important;
  color: #04795f !important;
  border-color: rgba(16,185,129,0.32) !important;
}

.btn-gold,
.btn-submit,
.btn-submit:not(.btn-submit-danger) {
  background: linear-gradient(135deg, #18c995, #07906f) !important;
  color: #ffffff !important;
  box-shadow: 0 18px 38px rgba(16,185,129,0.18) !important;
}

.btn-gold:hover,
.btn-submit:hover {
  color: #ffffff !important;
  opacity: 1 !important;
  transform: translateY(-1px) !important;
}

.filter-total,
.success-meta,
.total-row {
  color: #526780 !important;
}

.total-row strong,
.success-title {
  color: var(--a2z-navy) !important;
}

.modal-close {
  background: #f8fbff !important;
  border-color: #dce7f6 !important;
  color: #61738f !important;
}

.modal-close:hover {
  background: #fff1f2 !important;
  color: #be123c !important;
}

/* Phase 16 payment/report/menu polish */
select:not([multiple]),
.select:not([multiple]),
.filter-select:not([multiple]),
.form-select:not([multiple]) {
  appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' viewBox='0 0 24 24' stroke='%2340536d' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 0.85rem center !important;
  background-size: 18px 18px !important;
  padding-right: 2.65rem !important;
}

.payment-summary,
.method-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)) !important;
  gap: 0.9rem !important;
  margin: 0 0 1rem !important;
}

.payment-summary-card,
.method-card {
  background: #ffffff !important;
  border: 1px solid #dfeaf8 !important;
  border-radius: 16px !important;
  padding: 1rem !important;
  box-shadow: 0 18px 45px rgba(31,58,95,0.08) !important;
  display: grid !important;
  gap: 0.45rem !important;
  align-content: start !important;
}

.payment-summary-card:hover,
.method-card:hover {
  border-color: rgba(16,185,129,0.38) !important;
  box-shadow: 0 24px 60px rgba(16,185,129,0.12), 0 0 30px rgba(79,165,232,0.08) !important;
  transform: translateY(-2px) !important;
}

.payment-summary-card strong,
.method-card strong {
  color: var(--a2z-navy) !important;
  font-family: var(--font-display) !important;
  font-size: 1.25rem !important;
  line-height: 1.1 !important;
}

.payment-summary-card small,
.method-card small {
  color: #61738f !important;
  font-weight: 800 !important;
}

.payment-chip {
  --chip-bg: #e5f8f2;
  --chip-fg: #04795f;
  --chip-ring: rgba(16,185,129,0.22);
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.38rem !important;
  width: max-content !important;
  max-width: 100% !important;
  padding: 0.28rem 0.58rem !important;
  border-radius: 999px !important;
  background: var(--chip-bg) !important;
  border: 1px solid var(--chip-ring) !important;
  color: var(--chip-fg) !important;
  font-size: 0.72rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.01em !important;
  white-space: nowrap !important;
}

.payment-chip::before {
  content: "" !important;
  width: 0.5rem !important;
  height: 0.5rem !important;
  border-radius: 999px !important;
  background: currentColor !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 15%, transparent) !important;
}

.payment-cash { --chip-bg: #e5f8f2; --chip-fg: #04795f; --chip-ring: rgba(16,185,129,0.28); }
.payment-upi { --chip-bg: #eff6ff; --chip-fg: #2563eb; --chip-ring: rgba(37,99,235,0.20); }
.payment-card { --chip-bg: #f5f3ff; --chip-fg: #7c3aed; --chip-ring: rgba(124,58,237,0.20); }
.payment-wallet { --chip-bg: #fff7ed; --chip-fg: #ea580c; --chip-ring: rgba(234,88,12,0.22); }
.payment-bank_transfer { --chip-bg: #ecfeff; --chip-fg: #0e7490; --chip-ring: rgba(14,116,144,0.20); }
.payment-net_banking { --chip-bg: #eef2ff; --chip-fg: #4f46e5; --chip-ring: rgba(79,70,229,0.20); }
.payment-cheque { --chip-bg: #f8fafc; --chip-fg: #475569; --chip-ring: rgba(71,85,105,0.18); }
.payment-credit { --chip-bg: #fff1f2; --chip-fg: #be123c; --chip-ring: rgba(190,18,60,0.18); }
.payment-other { --chip-bg: #f0fdf4; --chip-fg: #15803d; --chip-ring: rgba(21,128,61,0.18); }

.chart-wrap {
  min-height: 300px !important;
}

.chart-empty-note {
  position: absolute !important;
  left: 50% !important;
  bottom: 1.15rem !important;
  transform: translateX(-50%) !important;
  width: min(560px, calc(100% - 2rem)) !important;
  padding: 0.78rem 1rem !important;
  border-radius: 14px !important;
  background: rgba(239,246,255,0.92) !important;
  border: 1px solid #dbeafe !important;
  color: #40536d !important;
  font-weight: 800 !important;
  text-align: center !important;
  box-shadow: 0 16px 38px rgba(31,58,95,0.09) !important;
}

.data-table .payment-chip,
.sales-table .payment-chip {
  font-size: 0.68rem !important;
}

.bulk-check,
.bulk-check span,
.bulk-check input + span {
  color: var(--a2z-navy) !important;
}

.bulk-check:hover,
.bulk-check:hover span {
  color: var(--a2z-green-dark) !important;
}

.bulk-actions .select,
.bulk-actions select,
.filter-row .select,
.filter-row select {
  min-height: 44px !important;
}

.menu-card-actions {
  position: relative !important;
  z-index: 6 !important;
}

.icon-btn svg,
.btn svg,
.nav-item svg {
  stroke: currentColor !important;
}

.btn-danger-outline {
  background: #fff1f2 !important;
  border: 1px solid rgba(190,18,60,0.18) !important;
  color: #be123c !important;
}

.btn-danger-outline:hover {
  background: #ffe4e6 !important;
  color: #9f1239 !important;
}

.image-upload-zone .form-hint,
.file-name {
  color: #61738f !important;
}

/* Phase 20 refinement: official branding, focused dashboard and repaired controls */
.nav-logo,
.topbar-logo,
.topbar-brand,
.report-brand {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.7rem !important;
  text-decoration: none !important;
}

.nav-logo::before,
.topbar-logo::before {
  content: none !important;
  display: none !important;
}

.a2z-brand-logo {
  width: 42px !important;
  height: 42px !important;
  object-fit: cover !important;
  border-radius: 11px !important;
  box-shadow: 0 10px 26px rgba(23, 35, 76, 0.16) !important;
  flex: 0 0 auto !important;
}

.a2z-brand-name {
  color: var(--a2z-navy) !important;
  font-family: var(--font-display) !important;
  font-size: 1.12rem !important;
  font-weight: 900 !important;
  letter-spacing: -0.03em !important;
  white-space: nowrap !important;
}

#navbar .a2z-brand-name,
#mobile-menu .a2z-brand-name,
#footer .a2z-brand-name {
  color: var(--a2z-navy) !important;
}

.trust-bar {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 1rem !important;
  width: 100% !important;
  margin-top: 3.25rem !important;
}

.trust-stat {
  min-height: 132px !important;
  display: flex !important;
  align-items: center !important;
  gap: 1rem !important;
  padding: 1.25rem !important;
  background: rgba(255,255,255,.96) !important;
  border: 1px solid #dce8f7 !important;
  border-radius: 20px !important;
  box-shadow: 0 18px 52px rgba(31,58,95,.09) !important;
  text-align: left !important;
}

.trust-stat::before { display: none !important; }
.trust-stat:hover { transform: translateY(-4px) !important; box-shadow: 0 26px 68px rgba(31,58,95,.14) !important; }
.trust-icon { width: 50px !important; height: 50px !important; border-radius: 15px !important; display: grid !important; place-items: center !important; flex: 0 0 auto !important; }
.trust-icon svg { width: 25px !important; height: 25px !important; stroke-width: 1.9 !important; }
.trust-stat-green .trust-icon { background:#e3f8f1 !important; color:#059669 !important; }
.trust-stat-amber .trust-icon { background:#fff4da !important; color:#d97706 !important; }
.trust-stat-blue .trust-icon { background:#e8f0ff !important; color:#2563eb !important; }
.trust-stat-violet .trust-icon { background:#f3eaff !important; color:#7c3aed !important; }
.trust-copy { min-width: 0 !important; display: grid !important; gap: .2rem !important; }
.trust-stat .number { color:var(--a2z-navy) !important; font-size:clamp(1.65rem,2.4vw,2.35rem) !important; font-weight:950 !important; line-height:1 !important; letter-spacing:-.05em !important; }
.trust-stat .label { color:#526780 !important; font-size:.8rem !important; line-height:1.35 !important; font-weight:800 !important; text-transform:none !important; }

.pricing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; max-width: 980px !important; margin-inline: auto !important; }
.pricing-card { min-height: 590px !important; }

.dashboard-focus-grid { display:grid; grid-template-columns:minmax(0,1.75fr) minmax(310px,.75fr); gap:1rem; align-items:stretch; }
.legacy-dashboard-sections { display:none !important; }
.dashboard-focus-main { display:grid; gap:1rem; min-width:0; }
.dashboard-metrics { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }
.dashboard-metric,.dashboard-chart-card,.dashboard-orders-card { background:rgba(255,255,255,.97); border:1px solid #dce8f7; border-radius:18px; box-shadow:0 16px 44px rgba(31,58,95,.08); color:var(--a2z-navy); }
.dashboard-metric { min-height:126px; padding:1.25rem; display:flex; align-items:center; gap:1rem; border-top:4px solid #4f7cff; }
.dashboard-metric.metric-earnings { border-top-color:#10b981; }
.dashboard-metric-icon { width:48px; height:48px; border-radius:14px; display:grid; place-items:center; background:#eaf1ff; color:#2563eb; flex:none; }
.metric-earnings .dashboard-metric-icon { background:#e5f8f2; color:#059669; }
.dashboard-metric-icon svg { width:24px; height:24px; stroke-width:2; }
.dashboard-metric-label { color:#687a98; font-size:.74rem; font-weight:900; text-transform:uppercase; letter-spacing:.055em; }
.dashboard-metric-value { margin-top:.3rem; font-size:1.75rem; line-height:1; font-weight:950; letter-spacing:-.05em; }
.dashboard-metric-meta { margin-top:.4rem; color:#7b8da8; font-size:.77rem; font-weight:700; }
.dashboard-chart-card,.dashboard-orders-card { overflow:hidden; }
.dashboard-card-head { min-height:70px; padding:1rem 1.15rem; display:flex; align-items:center; justify-content:space-between; gap:1rem; border-bottom:1px solid #e5edf8; }
.dashboard-card-head > div:first-child { display:grid; gap:.22rem; }
.dashboard-card-head strong { font-size:.95rem; }
.dashboard-card-head span { color:#7587a2; font-size:.75rem; font-weight:700; }
.dashboard-card-head a { color:#059669; font-size:.76rem; font-weight:900; text-decoration:none; }
.dashboard-chart-total { color:#059669 !important; font-size:1rem !important; font-weight:950 !important; }
.dashboard-chart-wrap { width:100%; height:330px; padding:1rem; }
.dashboard-chart-wrap canvas { display:block; width:100%!important; height:100%!important; }
.dashboard-orders-card { min-height:100%; }
.dashboard-orders-empty { min-height:330px; display:grid; place-items:center; align-content:center; gap:.6rem; padding:1.5rem; text-align:center; color:#71839f; }
.dashboard-orders-empty svg { width:42px; height:42px; stroke:#9cafc5; stroke-width:1.5; }
.dashboard-orders-empty strong { color:var(--a2z-navy); }
.dashboard-orders-empty span { font-size:.78rem; }
.dashboard-order-list { display:grid; }
.dashboard-order { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.9rem 1.1rem; border-bottom:1px solid #edf2f8; text-decoration:none; color:var(--a2z-navy); }
.dashboard-order:hover { background:#f4fbf8; }
.dashboard-order > span { display:grid; gap:.2rem; }
.dashboard-order small { color:#7a8ca6; font-size:.72rem; }
.dashboard-order b { color:#059669; white-space:nowrap; }

.billing-new-page .panel-title,.billing-new-page .service-name,.billing-new-page .cart-name,.billing-new-page .qty-value,.billing-new-page .total-row strong { color:var(--a2z-navy) !important; }
.billing-new-page .label { color:#526780 !important; }
.billing-new-page .service-row,.billing-new-page .cart-row { background:#f8fbff !important; border-color:#dfe8f5 !important; cursor:pointer !important; }
.billing-new-page .service-row:hover,.billing-new-page .service-row:focus-visible { border-color:rgba(16,185,129,.55) !important; background:#f0fbf7 !important; outline:none !important; box-shadow:0 10px 28px rgba(16,185,129,.10) !important; }
.billing-new-page .service-cat,.billing-new-page .service-price,.billing-new-page .cart-line-total { color:#059669 !important; }
.billing-new-page .service-desc,.billing-new-page .cart-meta,.billing-new-page .cart-empty,.billing-new-page .panel-sub { color:#71839f !important; }
.billing-new-page .add-btn { width:auto !important; min-width:68px !important; padding:0 .7rem !important; gap:.35rem !important; background:#e5f8f2 !important; color:#04795f !important; border-color:rgba(16,185,129,.25) !important; font-weight:900 !important; }
.billing-new-page .qty-btn,.billing-new-page .remove-btn { background:#fff !important; color:#40536d !important; border-color:#d7e3f1 !important; }
.customer-combobox { position:relative; }
.customer-suggestions { display:none; position:absolute; z-index:40; left:0; right:0; top:calc(100% + 6px); overflow:hidden; background:#fff; border:1px solid #d7e3f1; border-radius:12px; box-shadow:0 20px 60px rgba(31,58,95,.18); }
.customer-suggestions.open { display:grid; }
.customer-option { appearance:none; border:0; border-bottom:1px solid #edf2f8; background:#fff; padding:.75rem .85rem; text-align:left; display:grid; gap:.2rem; color:var(--a2z-navy); cursor:pointer; }
.customer-option:last-child { border-bottom:0; }
.customer-option:hover { background:#eefaf6; }
.customer-option span { color:#71839f; font-size:.74rem; overflow-wrap:anywhere; }

.tabs { display:inline-flex !important; gap:.55rem !important; padding:.45rem !important; margin-bottom:1rem !important; background:rgba(255,255,255,.96) !important; border:1px solid #dce8f7 !important; border-radius:15px !important; box-shadow:0 12px 32px rgba(31,58,95,.07) !important; }
.tab { display:inline-flex !important; align-items:center !important; gap:.45rem !important; min-height:42px !important; padding:.65rem 1rem !important; border:1px solid transparent !important; border-radius:10px !important; text-decoration:none !important; }
.tab.active { background:#e5f8f2 !important; border-color:rgba(16,185,129,.24) !important; box-shadow:none !important; }
.filter-bar { display:grid !important; grid-template-columns:minmax(260px,1fr) minmax(190px,240px) !important; gap:.75rem !important; align-items:center !important; padding:1rem !important; margin-bottom:1rem !important; border-radius:16px !important; }
.filter-bar .search-box,.filter-bar .search-input,.filter-bar .filter-select { width:100% !important; min-height:46px !important; }

.report-stat-icon svg,.report-nav-icon svg { width:22px; height:22px; stroke-width:1.9; }
.report-nav-icon { display:grid !important; place-items:center !important; }
.report-stats { grid-template-columns:repeat(auto-fit,minmax(210px,1fr)) !important; }

@media (max-width: 1100px) {
  .trust-bar { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
  .dashboard-focus-grid { grid-template-columns:1fr; }
}
@media (max-width: 700px) {
  .a2z-brand-name { display:none !important; }
  .trust-bar,.pricing-grid,.dashboard-metrics { grid-template-columns:1fr !important; }
  .filter-bar { grid-template-columns:1fr !important; }
  .tabs { width:100% !important; display:grid !important; grid-template-columns:repeat(3,1fr) !important; }
  .tab { justify-content:center !important; padding:.55rem .35rem !important; }
}

.export-download-icon { width:16px; height:16px; flex:0 0 auto; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.btn-export,.btn-sm.btn-ghost,.report-btn,.btn.btn-muted { gap:.45rem; }

/* Phase 21 refinement: one consistent client sidebar on every standard page */
nav.sidebar[data-unified="true"]{
  width:246px!important;background:#fff!important;border-right:1px solid #d8e5f4!important;
  color:#101b34!important;box-shadow:none!important;
}
nav.sidebar[data-unified="true"] .unified-client-sidebar{padding:22px 16px!important;}
.unified-sidebar-label{padding:0 10px;margin:4px 0 8px;color:#8294b4;font-size:11px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;}
.unified-sidebar-links{display:grid;gap:4px;}
nav.sidebar[data-unified="true"] .unified-nav-link{
  display:flex!important;align-items:center!important;gap:11px!important;min-height:43px!important;
  padding:9px 11px!important;border-radius:8px!important;color:#526889!important;text-decoration:none!important;
  font-size:14px!important;font-weight:700!important;background:transparent!important;box-shadow:none!important;border:0!important;
}
nav.sidebar[data-unified="true"] .unified-nav-link:hover{background:#f0f6ff!important;color:#0a8d70!important;}
nav.sidebar[data-unified="true"] .unified-nav-link.active{background:#e1f7f1!important;color:#008e6d!important;box-shadow:inset 3px 0 #09b98b!important;}
.unified-nav-icon{width:28px;height:28px;flex:0 0 28px;border-radius:7px;display:grid;place-items:center;background:#e9f0ff;color:#315fc4;}
.unified-nav-icon svg{width:19px!important;height:19px!important;stroke-width:1.9!important;}
.unified-nav-link[data-section="menu"] .unified-nav-icon{background:#e7fbf6;color:#009f78;}
.unified-nav-link[data-section="billing"] .unified-nav-icon{background:#fff4dd;color:#c77b00;}
.unified-nav-link[data-section="customers"] .unified-nav-icon{background:#f2eaff;color:#7b48d7;}
.unified-nav-link[data-section="reports"] .unified-nav-icon{background:#ffeaf4;color:#d33983;}
.unified-nav-link[data-section="messages"] .unified-nav-icon{background:#e9f0ff;color:#315fc4;}

/* Unified metric cards: the Image 2 visual system across client and admin pages */
.stats .stat,
.stats-grid .stat-card,
.dashboard-metric{
  --metric-accent:#10b981;
  min-height:154px!important;
  padding:22px 24px!important;
  position:relative!important;
  overflow:hidden!important;
  display:block!important;
  background:#fff!important;
  border:1px solid #d8e5f4!important;
  border-top:3px solid var(--metric-accent)!important;
  border-radius:14px!important;
  color:#101b34!important;
  box-shadow:0 12px 32px rgba(36,76,125,.07)!important;
}
.stats .stat:nth-child(2),.stats-grid .stat-card:nth-child(2),.dashboard-metric:nth-child(2){--metric-accent:#4f7cff;}
.stats .stat:nth-child(3),.stats-grid .stat-card:nth-child(3){--metric-accent:#f59e0b;}
.stats .stat:nth-child(4),.stats-grid .stat-card:nth-child(4){--metric-accent:#a855f7;}
.stats .stat::before,.stats-grid .stat-card::before,.stats-grid .stat-card-accent{content:none!important;display:none!important;background:none!important;}
.stats .stat:hover,.stats-grid .stat-card:hover,.dashboard-metric:hover{transform:translateY(-2px)!important;border-color:#c8d9eb!important;border-top-color:var(--metric-accent)!important;box-shadow:0 17px 40px rgba(36,76,125,.11)!important;}
.stats .stat-label,.stats-grid .stat-label,.dashboard-metric-label{color:#6d80a0!important;font-size:11px!important;font-weight:900!important;text-transform:uppercase!important;letter-spacing:.08em!important;}
.stats .stat-value,.stats-grid .stat-value,.dashboard-metric-value{margin-top:16px!important;color:#101b34!important;font-size:30px!important;line-height:1.05!important;font-weight:950!important;letter-spacing:-.04em!important;}
.stats .stat-meta,.stats-grid .stat-sub,.dashboard-metric-meta{margin-top:9px!important;color:#7184a3!important;font-size:12px!important;font-weight:500!important;}
.stats .stat-icon,.stats-grid .stat-icon,.dashboard-metric-icon{
  position:absolute!important;top:20px!important;right:21px!important;left:auto!important;
  width:46px!important;height:46px!important;padding:0!important;border-radius:12px!important;
  display:grid!important;place-items:center!important;background:#e3f8f1!important;color:#059669!important;
  opacity:1!important;box-shadow:none!important;
}
.stats .stat:nth-child(2) .stat-icon,.stats-grid .stat-card:nth-child(2) .stat-icon,.dashboard-metric:nth-child(2) .dashboard-metric-icon{background:#e9f0ff!important;color:#3b72f6!important;}
.stats .stat:nth-child(3) .stat-icon,.stats-grid .stat-card:nth-child(3) .stat-icon{background:#fff4df!important;color:#f09a00!important;}
.stats .stat:nth-child(4) .stat-icon,.stats-grid .stat-card:nth-child(4) .stat-icon{background:#f5eefe!important;color:#9333ea!important;}
.stats .stat-icon svg,.stats-grid .stat-icon svg,.dashboard-metric-icon svg{width:23px!important;height:23px!important;stroke-width:1.9!important;}
.dashboard-metric>div{display:block!important;}
@media(max-width:700px){.stats .stat,.stats-grid .stat-card,.dashboard-metric{min-height:142px!important;}}

/* Super Admin now follows the client-dashboard layout and component system */
.unified-nav-link[data-section="clients"] .unified-nav-icon{background:#f2eaff;color:#7b48d7;}
.unified-nav-link[data-section="plans"] .unified-nav-icon{background:#fff4dd;color:#c77b00;}
.unified-nav-link[data-section="logs"] .unified-nav-icon{background:#e9f0ff;color:#315fc4;}
.unified-nav-link[data-section="users"] .unified-nav-icon{background:#f2eaff;color:#7b48d7;}
.unified-nav-link[data-section="settings"] .unified-nav-icon{background:#eef2f7;color:#64748b;}
body.superadmin-unified .main{padding:32px 3vw 60px!important;background:radial-gradient(circle at 8% 0%,rgba(16,185,129,.08),transparent 30rem),#edf4ff!important;}
body.superadmin-unified .page-header{margin-bottom:24px!important;align-items:flex-start!important;}
body.superadmin-unified .page-title{font-size:32px!important;line-height:1.08!important;font-weight:950!important;letter-spacing:-.035em!important;color:#101b34!important;}
body.superadmin-unified .page-subtitle{margin-top:8px!important;font-size:15px!important;line-height:1.5!important;color:#6f83a5!important;}
body.superadmin-unified .stats-grid{gap:14px!important;margin-bottom:20px!important;}
body.superadmin-unified .table-card,
body.superadmin-unified .chart-card,
body.superadmin-unified .filter-bar,
body.superadmin-unified .rev-card,
body.superadmin-unified .method-card,
body.superadmin-unified .plan-card,
body.superadmin-unified .client-card{
  background:#fff!important;border:1px solid #d8e5f4!important;border-radius:14px!important;
  color:#101b34!important;box-shadow:0 12px 32px rgba(36,76,125,.07)!important;
}
body.superadmin-unified .table-card{border-radius:18px!important;overflow:hidden!important;}
body.superadmin-unified .table-card-header{min-height:70px!important;padding:17px 20px!important;border-bottom:1px solid #e1eaf5!important;background:#fff!important;}
body.superadmin-unified .chart-card{padding:0!important;border-radius:18px!important;overflow:hidden!important;box-shadow:0 16px 44px rgba(31,58,95,.08)!important;}
body.superadmin-unified .chart-card-header{min-height:76px!important;margin:0!important;padding:18px 22px!important;border-bottom:1px solid #e1eaf5!important;}
body.superadmin-unified .chart-card-title{font-size:17px!important;font-weight:900!important;color:#101b34!important;}
body.superadmin-unified .chart-wrap{height:330px!important;padding:18px 22px 22px!important;}
body.superadmin-unified .quick-actions{gap:10px!important;margin-bottom:20px!important;}
body.superadmin-unified .bottom-grid{gap:18px!important;}
body.superadmin-unified .data-table th{background:#f4f8fe!important;color:#6f83a4!important;}
body.superadmin-unified .data-table td{color:#1d2b46!important;border-color:#e8eff8!important;}
body.superadmin-unified .data-table tbody tr:hover{background:#f7fbff!important;}
body.superadmin-unified .filter-bar{padding:16px!important;}
body.superadmin-unified .role-badge{background:#e4f8f2!important;border-color:#b6e9da!important;color:#008767!important;}
body.superadmin-unified .topbar{background:#fff!important;border-bottom:1px solid #d8e5f4!important;box-shadow:0 8px 24px rgba(36,76,125,.05)!important;}
body.superadmin-unified .topbar-name{color:#101b34!important;font-weight:700!important;}
.admin-dashboard-focus-grid{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(300px,.75fr);gap:18px;margin-bottom:20px;align-items:stretch;}
.admin-dashboard-focus-grid .chart-card,.admin-dashboard-focus-grid .table-card{margin-bottom:0!important;min-width:0;}
.admin-chart-sub{margin-top:4px;color:#7184a3;font-size:12px;font-weight:650;}
.admin-chart-total{color:#059669;font-size:17px;font-weight:950;white-space:nowrap;}
.admin-payment-activity{min-height:100%;}
.admin-activity-list{display:grid;}.admin-activity-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:15px 18px;border-bottom:1px solid #e8eff8;}.admin-activity-row:last-child{border-bottom:0}.admin-activity-row>span{display:grid;gap:4px;min-width:0}.admin-activity-row strong{color:#101b34;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.admin-activity-row small{color:#7184a3;font-size:11px}.admin-activity-row b{color:#059669;font-size:13px;white-space:nowrap}.admin-activity-empty{min-height:250px;display:grid;place-items:center;padding:24px;color:#7184a3;text-align:center;}
@media(max-width:1100px){.admin-dashboard-focus-grid{grid-template-columns:1fr;}}
@media(max-width:820px){body.superadmin-unified .main{padding:24px 16px 44px!important;}body.superadmin-unified .page-title{font-size:26px!important;}}

/* Super Admin refinements: boxed tabs, plan management, report filters and logs */
body.superadmin-unified .status-tabs{
  display:grid!important;grid-template-columns:repeat(4,minmax(108px,1fr))!important;
  gap:10px!important;max-width:640px!important;margin:0 0 20px!important;
}
body.superadmin-unified .status-tab{
  min-height:48px!important;justify-content:center!important;padding:10px 16px!important;
  background:#fff!important;border:1px solid #d8e5f4!important;border-radius:12px!important;
  color:#607594!important;box-shadow:0 7px 20px rgba(36,76,125,.05)!important;
}
body.superadmin-unified .status-tab:hover{color:#0a8d6b!important;border-color:#aee1d3!important;background:#f5fffb!important;}
body.superadmin-unified .status-tab.active{color:#008767!important;border-color:#88d9c2!important;background:#e9faf5!important;box-shadow:0 8px 22px rgba(16,185,129,.1)!important;}
body.superadmin-unified .status-tab .tab-count{background:#edf3fb!important;color:#607594!important;}
body.superadmin-unified .status-tab.active .tab-count{background:#fff!important;color:#008767!important;}

body.superadmin-unified .page-header-actions{display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-wrap:wrap;}
body.superadmin-unified .page-header-actions .btn-sm{min-height:44px;padding:10px 16px;font-size:13px;border-radius:10px;justify-content:center;}
body.superadmin-unified .btn-payment{background:#fff!important;color:#087f63!important;border:1px solid #9ddfcd!important;box-shadow:0 7px 18px rgba(31,58,95,.06);}
body.superadmin-unified .btn-payment:hover{background:#edfbf7!important;border-color:#67ceb1!important;}
body.superadmin-unified .btn-gold{background:#0bb98c!important;color:#fff!important;border:1px solid #0bb98c!important;box-shadow:0 8px 20px rgba(11,185,140,.18)!important;}
body.superadmin-unified .tabs{width:max-content;max-width:100%;gap:6px!important;margin:0 0 18px!important;padding:6px!important;background:#fff!important;border:1px solid #d8e5f4!important;border-radius:14px!important;box-shadow:0 8px 24px rgba(36,76,125,.05)!important;}
body.superadmin-unified .tab{margin:0!important;padding:10px 16px!important;border:1px solid transparent!important;border-radius:9px!important;color:#536987!important;}
body.superadmin-unified .tab.active{background:#e9faf5!important;border-color:#9ddfcd!important;color:#008767!important;}
body.superadmin-unified .plans-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:18px!important;align-items:stretch!important;}
body.superadmin-unified .plan-card{display:flex!important;flex-direction:column!important;min-width:0!important;padding:22px!important;border-radius:16px!important;}
body.superadmin-unified .plan-card.inactive{opacity:.72!important;background:#f7f9fc!important;}
body.superadmin-unified .plan-card-header{min-height:108px!important;margin-bottom:15px!important;gap:16px!important;}
body.superadmin-unified .plan-name-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
body.superadmin-unified .plan-name{color:#101b34!important;font-size:20px!important;line-height:1.2!important;}
body.superadmin-unified .plan-price{color:#06a97f!important;font-size:26px!important;white-space:nowrap!important;}
body.superadmin-unified .plan-price sup,body.superadmin-unified .plan-price sub{color:#667c9c!important;}
body.superadmin-unified .plan-desc{color:#6d80a0!important;font-size:13px!important;line-height:1.48!important;}
body.superadmin-unified .plan-features{flex:1!important;margin:0 0 18px!important;padding:14px 0!important;border-top:1px solid #edf2f8!important;border-bottom:1px solid #edf2f8!important;}
body.superadmin-unified .plan-feature{color:#31415d!important;font-size:13px!important;line-height:1.4!important;}
body.superadmin-unified .plan-feature svg{color:#08ae83!important;}
body.superadmin-unified .plan-feature.off{color:#98a8bd!important;}
body.superadmin-unified .plan-feature.off svg{color:#a9b5c6!important;opacity:1!important;}
body.superadmin-unified .plan-clients-label{color:#6f83a4!important;font-size:12px!important;line-height:1.6!important;}
body.superadmin-unified .plan-clients-label strong{color:#263a59!important;}
body.superadmin-unified .plan-clients-bar{background:#e8eef7!important;}
body.superadmin-unified .plan-clients-fill{background:linear-gradient(90deg,#0bb98c,#4f7cff)!important;}
body.superadmin-unified .badge-landing{background:#e9f0ff!important;color:#315fc4!important;border:1px solid #c9dafd!important;}
body.superadmin-unified .plan-actions{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(84px,1fr))!important;gap:8px!important;margin-top:auto!important;align-items:stretch!important;}
body.superadmin-unified .plan-actions form{display:flex!important;min-width:0!important;}
body.superadmin-unified .plan-actions .btn-sm{width:100%!important;min-width:0!important;min-height:39px!important;justify-content:center!important;padding:8px 10px!important;white-space:nowrap!important;}
body.superadmin-unified .plan-card .btn-edit{background:#edf3ff!important;color:#3568d4!important;border:1px solid #cedcfa!important;}
body.superadmin-unified .plan-card .btn-toggle-on{background:#fff5e9!important;color:#c97914!important;border:1px solid #f7d3a7!important;}
body.superadmin-unified .plan-card .btn-toggle-off{background:#eafaf4!important;color:#008767!important;border:1px solid #a9e3d2!important;}
body.superadmin-unified .plan-card .btn-danger{background:#fff0f1!important;color:#d83b4b!important;border:1px solid #ffc7cd!important;}

body.superadmin-unified .filter-select,body.superadmin-unified .filter-search{
  min-height:44px!important;width:100%!important;background:#f8fbff!important;border:1px solid #cfdeef!important;
  border-radius:10px!important;color:#243652!important;font-size:13px!important;padding:10px 13px!important;
}
body.superadmin-unified .filter-select option{background:#fff!important;color:#243652!important;}
body.superadmin-unified .filter-search::placeholder{color:#91a1b7!important;}
body.superadmin-unified .report-filter-bar{display:block!important;margin-bottom:18px!important;padding:16px 18px!important;border-radius:16px!important;}
body.superadmin-unified .report-filter-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:12px;}
body.superadmin-unified .report-filter-controls{display:grid;grid-template-columns:150px minmax(170px,1fr) minmax(190px,1.35fr) minmax(190px,1.15fr);gap:10px;}
body.superadmin-unified .filter-label{color:#526884!important;font-weight:850!important;}
body.superadmin-unified .filter-total{color:#6f83a4!important;}
body.superadmin-unified .filter-total strong{color:#008767!important;}
body.superadmin-unified .legacy-report-filter{display:none!important;}

body.superadmin-unified .two-col{gap:18px!important;align-items:stretch!important;}
body.superadmin-unified .info-card{background:#fff!important;border:1px solid #d8e5f4!important;border-radius:16px!important;overflow:hidden!important;box-shadow:0 12px 32px rgba(36,76,125,.07)!important;}
body.superadmin-unified .info-card-header{min-height:62px!important;padding:15px 18px!important;background:#f8fbff!important;border-bottom:1px solid #e1eaf5!important;color:#315fc4!important;}
body.superadmin-unified .info-card-header svg{opacity:1!important;color:#315fc4!important;}
body.superadmin-unified .info-card-title{color:#101b34!important;font-size:15px!important;font-weight:900!important;}
body.superadmin-unified .info-card-body{padding:8px 0!important;}
body.superadmin-unified .info-row{min-height:52px!important;padding:11px 18px!important;border-bottom:1px solid #edf2f8!important;color:#31415d!important;}
body.superadmin-unified .info-row:last-child{border-bottom:0!important;}
body.superadmin-unified .info-row:hover{background:#f7fbff!important;}
body.superadmin-unified .info-card .info-row span{color:#31415d!important;}
body.superadmin-unified .info-card .info-row-val{color:#008767!important;font-weight:800!important;}
body.superadmin-unified .info-card .info-row-val.muted,body.superadmin-unified .info-card .info-row-val span{color:#6f83a4!important;}
body.superadmin-unified .info-card .badge-owner{background:#e9f0ff!important;color:#315fc4!important;border-color:#cbdafd!important;}
body.superadmin-unified .info-card .badge-superadmin{background:#fff4dd!important;color:#b96f00!important;border-color:#f0d49a!important;}
body.superadmin-unified .log-filter-bar{display:grid!important;grid-template-columns:auto 180px 180px minmax(240px,1fr) auto!important;align-items:center!important;gap:10px!important;padding:16px!important;}
body.superadmin-unified .log-filter-bar .filter-spacer{display:none!important;}
body.superadmin-unified .log-filter-bar .filter-count{color:#6f83a4!important;text-align:right!important;}

@media(max-width:1100px){
  body.superadmin-unified .plans-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
  body.superadmin-unified .report-filter-controls{grid-template-columns:repeat(2,minmax(0,1fr));}
  body.superadmin-unified .log-filter-bar{grid-template-columns:auto 1fr 1fr!important;}
  body.superadmin-unified .log-filter-bar .filter-search{grid-column:2/-1;}
}
@media(max-width:720px){
  body.superadmin-unified .status-tabs,body.superadmin-unified .plans-grid,body.superadmin-unified .report-filter-controls{grid-template-columns:1fr!important;max-width:none!important;}
  body.superadmin-unified .page-header-actions{width:100%;justify-content:stretch;}
  body.superadmin-unified .page-header-actions .btn-sm{flex:1;}
  body.superadmin-unified .report-filter-heading{align-items:flex-start;flex-direction:column;}
  body.superadmin-unified .log-filter-bar{grid-template-columns:1fr!important;}
  body.superadmin-unified .log-filter-bar .filter-search{grid-column:auto;}
}

/* Final Super Admin navigation and action treatments */
.legacy-superadmin-sidebar[hidden]{display:none!important;}
body.superadmin-unified .table-card[hidden],body.superadmin-unified .bottom-grid[hidden],body.superadmin-unified .rev-grid[hidden]{display:none!important;}
body.superadmin-unified .clients-table .actions-cell{display:flex!important;align-items:center!important;gap:8px!important;flex-wrap:nowrap!important;}
body.superadmin-unified .clients-table .btn-action-sm{
  min-height:38px!important;padding:8px 12px!important;border-radius:9px!important;
  justify-content:center!important;font-weight:800!important;opacity:1!important;box-shadow:none!important;
}
body.superadmin-unified .clients-table .btn-edit{
  background:#e8f0ff!important;color:#285fc9!important;border:1px solid #bcd0fb!important;
}
body.superadmin-unified .clients-table .btn-edit:hover{background:#dce8ff!important;border-color:#91b1f5!important;}
body.superadmin-unified .clients-table .btn-suspend{
  background:#fff3e3!important;color:#b86806!important;border:1px solid #f5c88d!important;
}
body.superadmin-unified .clients-table .btn-suspend:hover{background:#ffe9cb!important;border-color:#edae5e!important;}
body.superadmin-unified .clients-table .btn-delete{
  background:#ffe9ec!important;color:#c92f42!important;border:1px solid #f7b6bf!important;
}
body.superadmin-unified .clients-table .btn-delete:hover{background:#ffdde2!important;border-color:#ee8f9b!important;}
body.superadmin-unified .btn-logout{
  min-height:42px!important;padding:9px 15px!important;background:#fff0f1!important;
  color:#c92f42!important;border:1px solid #f4abb5!important;border-radius:10px!important;
  font-weight:800!important;opacity:1!important;
}
body.superadmin-unified .btn-logout:hover{background:#ffe3e7!important;border-color:#e98694!important;color:#ae2033!important;}

/* Keep the sign-out action visible on every client and report page. */
body:not(.superadmin-unified) .topbar .btn-logout,
.report-topbar .report-logout{
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  min-height:40px!important;padding:8px 14px!important;border-radius:10px!important;
  background:#fff0f1!important;color:#c92f42!important;border:1px solid #f2a8b2!important;
  font-size:12px!important;font-weight:850!important;text-decoration:none!important;opacity:1!important;
  white-space:nowrap!important;
}
body:not(.superadmin-unified) .topbar .btn-logout:hover,
.report-topbar .report-logout:hover{background:#ffe2e6!important;border-color:#e98694!important;color:#a91f31!important;}

/* Shared command treatment: one green primary language across client and admin. */
.notif-btn{display:none!important;}
.btn-gold,
.btn-add,
.btn-submit:not(.btn-submit-danger),
.message-topup-button,
.topup-button,
button[type="submit"].primary{
  min-height:42px!important;
  padding:9px 16px!important;
  border:1px solid #079b76!important;
  border-radius:8px!important;
  background:#0bb98c!important;
  color:#fff!important;
  font-weight:850!important;
  box-shadow:0 8px 20px rgba(11,185,140,.18)!important;
}
.btn-gold:hover,
.btn-add:hover,
.btn-submit:not(.btn-submit-danger):hover,
.message-topup-button:hover,
.topup-button:hover{background:#079b76!important;color:#fff!important;opacity:1!important;transform:none!important;}
.btn,.btn-sm,.btn-action-sm,.btn-ghost,.btn-cancel,.bulk-submit{border-radius:8px!important;}

@media(max-width:760px){
  .page-header{gap:14px!important;}
  .page-header-actions{width:100%;justify-content:flex-start!important;}
  .topbar-right{gap:8px!important;}
}

/* Canonical client header alerts shared by every dashboard section. */
.topbar,.report-topbar{height:72px!important;min-height:72px!important;padding-left:28px!important;padding-right:28px!important;}
.client-header-alerts{display:flex;align-items:center;justify-content:center;gap:10px;min-width:0;margin-left:auto;margin-right:16px;}
.topbar-right .client-header-alerts{margin-left:0;margin-right:0;}
.client-header-alert{min-height:44px;display:inline-grid;grid-template-columns:auto auto auto;align-items:center;gap:8px;padding:7px 10px;border:1px solid #b9e7d9;border-radius:8px;background:#effbf7;color:#087b61;text-decoration:none;font-size:11px;font-weight:900;white-space:nowrap;}
.client-header-alert span{color:#5f748f;text-transform:uppercase;letter-spacing:.06em;}
.client-header-alert strong{color:#087b61;}
.client-header-alert em{font-style:normal;background:#08ad83;color:#fff;border-radius:7px;padding:6px 8px;}
.client-header-alert.urgent{border-color:#ffc5ce;background:#fff4f5;}
.client-header-alert.urgent strong{color:#c92f42;}
.client-header-alert.urgent em{background:#c92f42;}
@media(max-width:900px){.client-header-alerts{display:none!important}.sidebar{top:72px!important}.topbar,.report-topbar{padding-left:16px!important;padding-right:16px!important}}

/* Canonical client topbar geometry for standalone and report layouts. */
body:not(.superadmin-unified) .topbar>.topbar-right{
  display:flex!important;align-items:center!important;justify-content:flex-end!important;
  gap:12px!important;height:100%!important;min-width:0!important;max-width:calc(100% - 280px)!important;
  flex:0 1 auto!important;flex-wrap:nowrap!important;
}
body:not(.superadmin-unified) .topbar>.topbar-right .client-header-alerts{flex:0 1 auto!important;}
body:not(.superadmin-unified) .topbar>.topbar-right .user-pill{
  width:auto!important;min-width:0!important;height:auto!important;display:flex!important;align-items:center!important;
  gap:12px!important;padding:0!important;border:0!important;border-radius:8px!important;
  background:transparent!important;box-shadow:none!important;flex:0 0 auto!important;
}
body:not(.superadmin-unified) .topbar>.topbar-right .user-avatar{
  width:38px!important;height:38px!important;min-width:38px!important;display:grid!important;place-items:center!important;
  border-radius:50%!important;background:linear-gradient(135deg,#08ad83,#3b72f6)!important;color:#fff!important;
  box-shadow:none!important;font-size:13px!important;font-weight:900!important;line-height:1!important;
}
body:not(.superadmin-unified) .topbar>.topbar-right .user-info{
  width:auto!important;min-width:0!important;display:grid!important;gap:1px!important;line-height:1.2!important;
}
body:not(.superadmin-unified) .topbar>.topbar-right .user-info-name,
body:not(.superadmin-unified) .topbar>.topbar-right .user-info-role{display:block!important;white-space:nowrap!important;}
body:not(.superadmin-unified) .topbar>.topbar-right .user-info-name{color:#101b34!important;font-size:14px!important;font-weight:800!important;letter-spacing:0!important;}
body:not(.superadmin-unified) .topbar>.topbar-right .user-info-role{color:#6f83a5!important;font-size:11px!important;font-weight:800!important;text-transform:uppercase!important;letter-spacing:0!important;}
body:not(.superadmin-unified) .topbar>.topbar-right .btn-logout{flex:0 0 auto!important;}

/* Every export action uses one quiet, work-focused button style. */
a[href*="export="]{
  min-height:42px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;
  gap:7px!important;padding:9px 14px!important;border:1px solid #9ddfcd!important;border-radius:8px!important;
  background:#fff!important;color:#087b61!important;font-size:12px!important;font-weight:850!important;
  line-height:1.2!important;text-decoration:none!important;white-space:nowrap!important;box-shadow:0 6px 16px rgba(31,58,95,.05)!important;
}
a[href*="export="]:hover{background:#effbf7!important;border-color:#67ceb1!important;color:#006f56!important;}
@media(max-width:1050px){
  body:not(.superadmin-unified) .topbar>.topbar-right .user-info{display:none!important;}
}
@media(max-width:900px){
  body:not(.superadmin-unified) .topbar>.topbar-right{max-width:none!important;gap:8px!important;}
  body:not(.superadmin-unified) .topbar>.topbar-right .user-pill{display:none!important;}
}

/* Shared mobile navigation for every Super Admin screen. */
.superadmin-mobile-menu,.superadmin-sidebar-overlay{display:none;}
.superadmin-mobile-menu svg{width:22px;height:22px;stroke-width:2;}
@media(max-width:900px){
  body.superadmin-unified .superadmin-mobile-menu{
    display:grid;place-items:center;position:fixed;left:12px;top:15px;z-index:140;
    width:42px;height:42px;border:1px solid #d6e2f0;border-radius:8px;
    background:#fff;color:#243652;box-shadow:0 7px 20px rgba(31,58,95,.12);cursor:pointer;
  }
  body.superadmin-unified .topbar{padding-left:64px!important;}
  body.superadmin-unified nav.sidebar[data-unified="true"]{
    display:block!important;position:fixed!important;left:0!important;top:72px!important;bottom:0!important;
    z-index:130!important;width:min(280px,85vw)!important;transform:translateX(-102%)!important;
    transition:transform .2s ease!important;box-shadow:18px 0 42px rgba(31,58,95,.18)!important;
  }
  body.superadmin-unified nav.sidebar[data-unified="true"].open{transform:translateX(0)!important;}
  body.superadmin-unified .superadmin-sidebar-overlay{
    position:fixed;inset:72px 0 0;z-index:125;background:rgba(12,28,52,.42);
  }
  body.superadmin-unified .superadmin-sidebar-overlay.show{display:block;}
  body.superadmin-unified .layout{display:block!important;min-width:0!important;}
  body.superadmin-unified .main{width:100%!important;min-width:0!important;}
}
@media(max-width:600px){
  body.superadmin-unified .role-badge,body.superadmin-unified .topbar-name{display:none!important;}
  body.superadmin-unified .topbar-right{gap:8px!important;}
}

:root{
  --report-bg:#edf4ff;
  --report-panel:#ffffff;
  --report-border:#d8e5f4;
  --report-text:#101b34;
  --report-muted:#6f83a5;
  --report-green:#08ad83;
  --report-blue:#3b72f6;
  --report-cyan:#08a4c7;
  --report-amber:#f0a11a;
  --report-pink:#e94b9a;
  --report-purple:#8b5cf6;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body.report-body{margin:0;background:var(--report-bg);color:var(--report-text);font-family:Inter,Arial,sans-serif;min-height:100vh}
.report-topbar{height:72px;background:#fff;border-bottom:1px solid var(--report-border);display:flex;align-items:center;justify-content:space-between;padding:0 28px;position:sticky;top:0;z-index:120}
.report-brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--report-text);font-size:22px;font-weight:900}.report-brand-mark{width:42px;height:42px;display:grid;place-items:center;background:#1d3775;color:#fff;border-radius:8px;font-size:12px;box-shadow:0 8px 22px rgba(29,55,117,.22)}.report-brand span{color:#078c6c}.report-shop{font-size:14px;color:var(--report-muted);font-weight:650;margin-left:10px}
.report-header-alerts{display:flex;align-items:center;justify-content:center;gap:8px;min-width:0;margin:0 18px 0 auto}
.report-header-alert{min-height:42px;display:inline-grid;grid-template-columns:auto auto auto;align-items:center;gap:7px;padding:6px 9px;border:1px solid #b9e7d9;border-radius:8px;background:#effbf7;color:#087b61;text-decoration:none;font-size:11px;font-weight:900;white-space:nowrap}
.report-header-alert span{color:#5f748f;text-transform:uppercase;letter-spacing:.06em}.report-header-alert strong{color:#087b61}.report-header-alert em{font-style:normal;background:#08ad83;color:#fff;border-radius:7px;padding:5px 7px}.report-header-alert.urgent{border-color:#ffc5ce;background:#fff4f5}.report-header-alert.urgent strong{color:#c92f42}.report-header-alert.urgent em{background:#c92f42}
.report-user{display:flex;align-items:center;gap:12px}.report-avatar{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:900;background:linear-gradient(135deg,var(--report-green),var(--report-blue))}.report-user-copy{line-height:1.2}.report-user-copy strong{display:block;font-size:14px}.report-user-copy small{color:var(--report-muted);font-size:11px;font-weight:800;text-transform:uppercase}.report-logout{height:38px;padding:0 13px;display:inline-flex;align-items:center;color:#df4d5e;border:1px solid #ffc7ce;background:#fff4f5;border-radius:8px;text-decoration:none;font-size:13px;font-weight:800}
.report-mobile-menu{display:none;width:40px;height:40px;border:1px solid var(--report-border);background:#fff;border-radius:8px;font-size:20px;color:var(--report-text)}
.report-shell{display:flex;min-height:calc(100vh - 72px)}.report-sidebar{width:246px;background:#fff;border-right:1px solid var(--report-border);padding:22px 16px;position:sticky;top:72px;height:calc(100vh - 72px);overflow:auto;flex:none}.report-nav-label{padding:0 10px;margin:4px 0 8px;color:#8294b4;font-size:11px;font-weight:900;letter-spacing:.12em;text-transform:uppercase}.report-nav{display:grid;gap:4px;margin-bottom:18px}.report-nav a{display:flex;align-items:center;gap:11px;min-height:43px;padding:9px 11px;border-radius:8px;color:#526889;text-decoration:none;font-size:14px;font-weight:700}.report-nav a:hover{background:#f0f6ff;color:#0a8d70}.report-nav a.active{background:#e1f7f1;color:#008e6d;box-shadow:inset 3px 0 #09b98b}.report-nav-icon{width:28px;height:28px;border-radius:7px;display:grid;place-items:center;font-size:14px;background:#e9f0ff;color:#315fc4}.report-nav a:nth-child(2) .report-nav-icon{background:#e7fbf6;color:#009f78}.report-nav a:nth-child(3) .report-nav-icon{background:#fff4dd;color:#c77b00}.report-nav a:nth-child(4) .report-nav-icon{background:#f2eaff;color:#7b48d7}.report-nav a:nth-child(5) .report-nav-icon{background:#ffeaf4;color:#d33983}.report-nav-rule{border:0;border-top:1px solid var(--report-border);margin:18px 4px}.report-phase{margin-left:auto;padding:2px 6px;border-radius:999px;background:#e6faf4;color:#008d6d;font-size:9px;font-weight:900}
.report-main{width:calc(100% - 246px);padding:34px 3vw 60px;min-width:0}.report-header{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:24px}.report-title{margin:0;color:var(--report-text);font-size:32px;line-height:1.08;font-weight:950;letter-spacing:0;animation:reportHeadingGlow 3s ease-in-out infinite}.report-subtitle{margin:8px 0 0;color:var(--report-muted);font-size:15px;line-height:1.6}.report-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}
@keyframes reportHeadingGlow{0%,100%{text-shadow:0 0 0 rgba(8,173,131,0)}50%{text-shadow:0 3px 22px rgba(8,173,131,.22)}}
.report-btn{min-height:42px;padding:0 15px;display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--report-border);border-radius:8px;background:#fff;color:#213453;text-decoration:none;font:800 13px Inter,Arial,sans-serif;cursor:pointer}.report-btn:hover{border-color:#74d8bd;box-shadow:0 8px 24px rgba(8,173,131,.15);color:#007b60}.report-btn.primary{background:#0bb98c;border-color:#079b76;color:#fff;box-shadow:0 8px 20px rgba(11,185,140,.18)}.report-btn.primary:hover{background:#079b76;color:#fff}.report-btn.danger{color:#c53248;border-color:#ffc1ca;background:#fff5f6}.report-btn.icon{width:42px;padding:0;font-size:18px}
.report-tabs{display:flex;gap:5px;background:#e2ebf8;padding:5px;border-radius:8px;width:max-content;max-width:100%;overflow:auto;margin-bottom:22px}.report-tabs a{padding:9px 14px;border-radius:6px;color:#5d7190;text-decoration:none;font-size:13px;font-weight:800;white-space:nowrap}.report-tabs a:hover{color:#078b6d}.report-tabs a.active{background:#fff;color:#078b6d;box-shadow:0 3px 12px rgba(26,50,92,.1)}
.report-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:20px}.report-stat{min-height:145px;background:#fff;border:1px solid var(--report-border);border-top:3px solid var(--accent,var(--report-green));border-radius:8px;padding:21px;position:relative;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;overflow:hidden}.report-stat:hover{transform:translateY(-3px);border-color:var(--accent,var(--report-green));box-shadow:0 14px 34px color-mix(in srgb,var(--accent,var(--report-green)) 18%,transparent)}.report-stat-icon{position:absolute;right:18px;top:18px;width:45px;height:45px;border-radius:8px;display:grid;place-items:center;background:color-mix(in srgb,var(--accent,var(--report-green)) 13%,white);color:var(--accent,var(--report-green));font-size:21px;font-weight:900}.report-stat-label{color:#7286a8;font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.09em}.report-stat-value{margin-top:17px;color:var(--report-text);font-size:31px;line-height:1;font-weight:950}.report-stat-meta{margin-top:9px;color:var(--report-muted);font-size:12px}.report-change{display:inline-flex;margin-top:9px;padding:4px 7px;border-radius:999px;background:#e2f9f1;color:#008764;font-size:11px;font-weight:900}.report-change.down{background:#fff0f2;color:#ce3f56}
.report-grid{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(280px,.85fr);gap:18px;margin-bottom:20px}.report-panel{background:#fff;border:1px solid var(--report-border);border-radius:8px;overflow:hidden;transition:border-color .2s ease,box-shadow .2s ease}.report-panel:hover{border-color:#b4d7d1;box-shadow:0 12px 32px rgba(36,76,125,.08)}.report-panel-head{min-height:70px;padding:17px 20px;display:flex;align-items:center;justify-content:space-between;gap:14px;border-bottom:1px solid var(--report-border)}.report-panel-title{font-size:16px;font-weight:900}.report-panel-sub{margin-top:4px;color:var(--report-muted);font-size:12px}.report-panel-body{padding:20px}.report-chart-wrap{height:310px;position:relative}.report-chart-wrap.small{height:250px}.report-chart-wrap canvas{max-width:100%;max-height:100%}.report-empty-chart{height:100%;display:grid;place-items:center;color:var(--report-muted);text-align:center;background:linear-gradient(180deg,#fbfdff,#f6faff);border:1px dashed #c9d9ec;border-radius:8px}.report-empty-icon{display:block;font-size:34px;margin-bottom:8px}
.report-chart-services-grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(300px,.85fr);gap:18px;margin-bottom:20px;align-items:start}.report-chart-stack{display:grid;gap:18px}.report-chart-services-grid .report-payment-panel{margin:0}.report-top-services-panel{height:100%}.report-top-services-panel .report-top-list{gap:14px}
.report-top-list{display:grid;gap:12px}.report-top-item{display:grid;grid-template-columns:36px minmax(0,1fr) auto;align-items:center;gap:11px}.report-rank{width:34px;height:34px;border-radius:8px;display:grid;place-items:center;background:#eaf8f4;color:#008d6c;font-weight:950}.report-top-name{font-size:13px;font-weight:850}.report-top-meta{font-size:11px;color:var(--report-muted);margin-top:3px}.report-top-value{font-size:13px;font-weight:900;color:#008d6c}.report-progress{height:6px;background:#e8eef8;border-radius:999px;overflow:hidden;margin-top:7px}.report-progress span{display:block;height:100%;background:linear-gradient(90deg,#07ad83,#4c7df6);border-radius:999px}
.report-table-wrap{overflow-x:auto}.report-table{width:100%;border-collapse:collapse;min-width:760px}.report-table th{padding:13px 16px;background:#f4f8fe;border-bottom:1px solid var(--report-border);color:#6f83a4;font-size:10px;font-weight:950;text-align:left;text-transform:uppercase;letter-spacing:.08em}.report-table td{padding:14px 16px;border-bottom:1px solid #e8eff8;color:#1d2b46;font-size:13px;vertical-align:middle}.report-table tbody tr:hover{background:#f7fbff}.report-table tbody tr:last-child td{border-bottom:0}.report-table strong{font-weight:850}.report-muted{color:var(--report-muted);font-size:11px;margin-top:3px}.report-invoice{color:#087e67;font-weight:900;text-decoration:none}.report-pill{display:inline-flex;align-items:center;min-height:24px;padding:2px 8px;border-radius:999px;background:#e4f8f2;color:#008767;font-size:10px;font-weight:900}.report-payment-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(135px,1fr));gap:10px}.report-payment{padding:13px;border:1px solid var(--report-border);border-radius:8px;background:#f9fbff}.report-payment strong{display:block;margin-top:7px;font-size:16px}.report-payment small{color:var(--report-muted)}
.report-filters{display:grid;grid-template-columns:repeat(4,minmax(150px,1fr));gap:13px;align-items:end}.report-field{display:grid;gap:7px}.report-field label{color:#64799a;font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.06em}.report-input,.report-select{width:100%;height:43px;border:1px solid #cad9eb;border-radius:8px;background:#fff;color:#14213b;padding:0 12px;font:600 13px Inter,Arial,sans-serif}.report-input:focus,.report-select:focus{outline:none;border-color:#19bd92;box-shadow:0 0 0 3px rgba(25,189,146,.12)}.report-select option{background:#fff;color:#14213b}.report-form-actions{display:flex;gap:9px;flex-wrap:wrap}.report-preset-bar{display:flex;align-items:center;gap:9px;flex-wrap:wrap}.report-preset{display:inline-flex;align-items:center;gap:7px;padding:7px 9px;border:1px solid #cddcec;border-radius:8px;background:#fff;color:#45617f;text-decoration:none;font-size:12px;font-weight:800}.report-preset:hover{border-color:#21bd94;color:#008767}.report-preset button{border:0;background:transparent;color:#d1455b;cursor:pointer;padding:0;font-weight:900}.report-alert{padding:12px 14px;margin-bottom:16px;border-radius:8px;font-size:13px;font-weight:700}.report-alert.success{background:#e4f9f2;border:1px solid #a8ead6;color:#007b5e}.report-alert.error{background:#fff0f2;border:1px solid #ffc2cb;color:#bd3047}
.report-total-row td{background:#eef8f5;color:#087d63;font-weight:950}.report-overlay{display:none}
.payment-credit{background:#ffe9ee!important;color:#c91d3c!important;border-color:#ffc2ce!important}.payment-other{background:#e5fbf7!important;color:#007e71!important;border-color:#a9eee2!important}.payment-split{background:#fff6db!important;color:#9b6700!important;border-color:#f7d77b!important}
@media(max-width:1150px){.report-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.report-grid,.report-chart-services-grid{grid-template-columns:1fr}.report-filters{grid-template-columns:repeat(2,minmax(150px,1fr))}}
@media(max-width:1020px){.report-header-alerts{order:3;width:100%;margin:6px 0 0;justify-content:flex-start}.report-topbar{height:auto;min-height:72px;flex-wrap:wrap;padding-top:10px;padding-bottom:10px}.report-sidebar{top:92px;height:calc(100vh - 92px)}.report-shell{min-height:calc(100vh - 92px)}}
@media(max-width:820px){.report-topbar{padding:10px 15px}.report-shop,.report-user-copy,.report-logout{display:none}.report-mobile-menu{display:grid;place-items:center}.report-sidebar{position:fixed;left:0;top:92px;bottom:0;height:auto;z-index:110;transform:translateX(-105%);transition:transform .2s ease;box-shadow:12px 0 30px rgba(23,45,82,.18)}.report-sidebar.open{transform:translateX(0)}.report-overlay{position:fixed;inset:92px 0 0;background:rgba(16,27,52,.38);z-index:105}.report-overlay.show{display:block}.report-main{width:100%;padding:24px 16px 44px}.report-title{font-size:26px}.report-header{align-items:stretch}.report-actions{justify-content:flex-start}.report-chart-wrap{height:270px}}
@media(max-width:560px){.report-brand{font-size:18px}.report-brand-mark{width:38px;height:38px}.report-header-alerts{display:grid;grid-template-columns:1fr 1fr;gap:7px}.report-header-alert{grid-template-columns:1fr;justify-items:start;gap:2px;white-space:normal}.report-header-alert em{margin-top:3px}.report-stats{grid-template-columns:1fr}.report-filters{grid-template-columns:1fr}.report-header{display:grid}.report-tabs{width:100%}.report-panel-body{padding:15px}.report-panel-head{padding:14px 15px}.report-chart-wrap{height:235px}.report-btn{flex:1}.report-actions .report-btn.icon{flex:0 0 42px}}
.automation-toggle{height:43px;display:flex!important;align-items:center;gap:9px;text-transform:none!important;letter-spacing:0!important;border:1px solid #cad9eb;border-radius:8px;padding:0 12px;color:#263b59!important;font-size:13px!important;background:#fff}.automation-toggle input{width:17px;height:17px;accent-color:var(--report-green)}
.smtp-security-note{margin-top:14px;padding:12px 14px;border:1px solid #d6e5f4;border-radius:9px;background:#f5f9fe;color:#526780;font-size:12px;line-height:1.55}.smtp-guide{display:grid;gap:13px}.smtp-guide>div{display:grid;grid-template-columns:28px minmax(0,1fr);gap:10px;align-items:start}.smtp-guide>div>span{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;background:#e3f8f1;color:#008867;font-weight:900}.smtp-guide p{margin:1px 0 0;color:#526780;font-size:12px;line-height:1.6}.smtp-guide code{padding:2px 5px;border-radius:5px;background:#eef3fa;color:#1c3d70;font-size:11px}.email-status.sent{background:#e4f8f2;color:#008767}.email-status.failed{background:#fff0f2;color:#c5344b}.email-status.pending{background:#fff6df;color:#a66a00}

/* Dashboard-style report charts and unified Image 2 cards */
.report-stat{min-height:154px;border:1px solid #d8e5f4;border-top:3px solid var(--accent,var(--report-green));border-radius:14px;padding:22px 24px;box-shadow:0 12px 32px rgba(36,76,125,.07)}
.report-stat:nth-child(1){--accent:#10b981!important}.report-stat:nth-child(2){--accent:#4f7cff!important}.report-stat:nth-child(3){--accent:#f59e0b!important}.report-stat:nth-child(4){--accent:#a855f7!important}
.report-stat:hover{transform:translateY(-2px);border-color:#c8d9eb;border-top-color:var(--accent,var(--report-green));box-shadow:0 17px 40px rgba(36,76,125,.11)}
.report-stat-icon{right:21px;top:20px;width:46px;height:46px;border-radius:12px;box-shadow:none}
.report-stat-value{margin-top:16px;font-size:30px;letter-spacing:-.04em}.report-stat-meta{margin-top:9px;font-size:12px}
.report-panel{border:1px solid #d8e5f4;border-radius:14px;box-shadow:0 12px 32px rgba(36,76,125,.06)}
.report-panel:hover{border-color:#c8d9eb;box-shadow:0 16px 38px rgba(36,76,125,.09)}
.report-chart-panel{border-radius:18px;box-shadow:0 16px 44px rgba(31,58,95,.08)}
.report-chart-panel .report-panel-head{min-height:76px;padding:18px 22px}.report-chart-panel .report-panel-title{font-size:17px}.report-chart-panel .report-panel-body{padding:18px 22px 22px}
.report-chart-panel .report-chart-wrap{height:330px}
.report-progress span{background:#10b981}
.report-payment{border-radius:12px;background:#fff;box-shadow:0 7px 20px rgba(36,76,125,.05)}
@media(max-width:560px){.report-chart-panel .report-chart-wrap{height:245px}.report-stat{min-height:142px}}

/* Consistent form typography across client and Super Admin */
input,select,textarea,button{font-family:inherit}textarea{line-height:1.5}
html[data-client-role] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),html[data-client-role] select,html[data-client-role] textarea,body.superadmin-unified input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),body.superadmin-unified select,body.superadmin-unified textarea{font-family:Inter,Arial,sans-serif;font-size:13px;font-weight:600;line-height:1.5;text-align:left}

/* Release 2.3: stable shared header geometry and white form controls. */
html[data-client-role] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
html[data-client-role] select,html[data-client-role] textarea,
body.superadmin-unified input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
body.superadmin-unified select,body.superadmin-unified textarea{background-color:#fff!important}
.client-header-canonical{display:grid!important;grid-template-columns:clamp(530px,calc(100vw - 860px),1060px) auto minmax(240px,1fr)!important;align-items:center!important;column-gap:14px!important;flex-wrap:nowrap!important}
.client-header-primary{display:flex!important;align-items:center!important;gap:12px!important;min-width:0!important;height:100%!important}
.client-header-primary .topbar-brand,.client-header-primary .report-brand{flex:0 1 auto!important;min-width:0!important}
.client-header-primary .client-branch-switcher{margin-left:0!important}
.client-header-canonical>.client-header-tools{margin:0!important;justify-self:end!important}
.client-header-canonical>.topbar-right,.client-header-canonical>.report-user{justify-self:end!important}
@media(max-width:1220px){.client-header-canonical{grid-template-columns:420px auto minmax(190px,1fr)!important}.client-header-primary .a2z-brand-name{max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}
@media(max-width:900px){.client-header-canonical{grid-template-columns:minmax(0,1fr) auto!important;column-gap:10px!important}.client-header-canonical>.client-header-tools{display:none!important}.client-header-primary .a2z-brand-name{display:none!important}.client-header-canonical .report-logout{display:inline-flex!important}.client-header-canonical>.report-user{gap:8px!important}}
@media(max-width:560px){
  .client-header-canonical{height:64px!important;min-height:64px!important;grid-template-columns:minmax(0,1fr) auto!important;grid-template-rows:1fr!important;padding:0 8px!important;column-gap:6px!important;row-gap:0!important}
  .client-header-primary{width:100%!important;justify-content:flex-start!important;gap:5px!important;overflow:visible!important}
  .client-header-primary .a2z-brand-logo{width:32px!important;height:32px!important;min-width:32px!important}
  .client-header-primary .mobile-menu-btn,.client-header-primary .report-mobile-menu{width:34px!important;height:38px!important;min-width:34px!important;padding:0!important}
  .client-header-primary .client-branch-switcher{width:145px!important;min-width:0!important;flex:0 0 145px!important}
  .client-header-canonical>.topbar-right,.client-header-canonical>.report-user{width:auto!important;justify-self:end!important;justify-content:flex-end!important;height:40px!important;gap:5px!important}
  .client-header-canonical>.topbar-right .user-pill{display:flex!important;gap:0!important}.client-header-canonical>.topbar-right .user-info{display:none!important}
  .client-header-canonical .user-avatar,.client-header-canonical .report-avatar{width:32px!important;height:32px!important;min-width:32px!important;font-size:11px!important}
  .client-header-canonical .report-user-copy{display:none!important}
  .client-header-canonical .btn-logout,.client-header-canonical .report-logout{height:38px!important;min-height:38px!important;padding:0 9px!important;font-size:11px!important}
  body:not(.superadmin-unified) .sidebar,.report-sidebar{top:64px!important;height:calc(100vh - 64px)!important}
  .report-overlay{inset:64px 0 0!important}.report-shell{min-height:calc(100vh - 64px)!important}
}
body.superadmin-unified .unified-sidebar-links{display:grid!important;gap:4px!important}
body.superadmin-unified .unified-nav-link{width:100%!important;margin:0!important}

/* Release 2.9.1 requested UI refinements. */
.inventory-file-help{display:block;margin-top:7px;color:#617593;font:500 12px/1.5 Inter,Arial,sans-serif!important;letter-spacing:0;text-transform:none}
.inv-form .report-field>small{font-family:Inter,Arial,sans-serif;font-weight:500;line-height:1.5;color:#617593}
.status-form select,.status-form select option{text-transform:capitalize}
.expense-form-grid .report-field:has(input[name="expense_name"]){grid-column:1/-1;order:-1}
@media(max-width:767px){
  #navbar{padding:10px 0!important;background:rgba(255,255,255,.96)!important;border-bottom:1px solid #d8e5f4!important;box-shadow:0 10px 30px rgba(31,58,95,.10)!important;backdrop-filter:blur(16px)!important}
  #navbar .container-wide{min-height:48px!important}#navbar .nav-logo{gap:10px!important}#navbar .a2z-brand-logo{width:40px!important;height:40px!important;border-radius:11px!important}#navbar .a2z-brand-name{display:inline!important;max-width:190px;overflow:hidden;text-overflow:ellipsis;font-size:1rem!important}
  #menu-toggle{display:grid!important;place-items:center!important;width:44px!important;height:44px!important;min-width:44px!important;padding:0!important;border:1px solid #b7c9dd!important;border-radius:12px!important;background:linear-gradient(180deg,#fff,#f3f8fd)!important;color:#10213d!important;box-shadow:0 8px 22px rgba(31,58,95,.13)!important}
  #menu-toggle:hover,#menu-toggle:focus-visible{background:#eaf8f3!important;border-color:#52c9a8!important;color:#007c60!important;outline:0!important;box-shadow:0 0 0 4px rgba(8,173,131,.14)!important}#menu-toggle svg{display:block!important;width:24px!important;height:24px!important;stroke:currentColor!important;stroke-width:2.4!important}
  #mobile-menu{background:linear-gradient(160deg,#f8fcff 0%,#eef8ff 52%,#e9f8f2 100%)!important;color:#10213d!important;font-family:Inter,Arial,sans-serif!important}#mobile-menu>div:first-child{min-height:72px;padding:10px 16px!important;border-color:#d8e5f4!important;background:rgba(255,255,255,.86)!important}#mobile-menu .nav-logo{display:flex!important;align-items:center!important;gap:10px!important;color:#10213d!important}#mobile-menu .a2z-brand-name{display:inline!important;color:#10213d!important;font-size:1rem!important}
  #menu-close{display:grid!important;place-items:center!important;width:44px!important;height:44px!important;padding:0!important;border:1px solid #b7c9dd!important;border-radius:12px!important;background:#fff!important;color:#10213d!important;box-shadow:0 7px 20px rgba(31,58,95,.1)!important}#menu-close:hover,#menu-close:focus-visible{background:#fff0f2!important;border-color:#f2a8b3!important;color:#b4233a!important;outline:0!important}
  #mobile-menu>nav{gap:10px!important;padding:24px 18px!important}#mobile-menu>nav a{display:flex!important;align-items:center!important;min-height:54px!important;padding:0 16px!important;border:1px solid #d4e1ef!important;border-radius:12px!important;background:rgba(255,255,255,.84)!important;color:#172a46!important;font-size:1rem!important;font-weight:800!important;text-decoration:none!important;box-shadow:0 7px 20px rgba(31,58,95,.05)!important}#mobile-menu>nav a:hover,#mobile-menu>nav a:focus-visible{transform:translateX(4px);border-color:#68cfb2!important;background:#ecfaf5!important;color:#007c60!important;outline:0!important}#mobile-menu>div:last-child{padding:16px 18px 20px!important;border-top:1px solid #d8e5f4!important;background:rgba(255,255,255,.72)!important}#mobile-menu>div:last-child a{min-height:48px!important;font-weight:900!important}
}
@media(max-width:560px){.client-header-primary .mobile-menu-btn,.client-header-primary .report-mobile-menu{display:grid!important;place-items:center!important;width:40px!important;height:40px!important;min-width:40px!important;padding:0!important;border:1px solid #b9cce0!important;border-radius:10px!important;background:linear-gradient(180deg,#fff,#f2f7fc)!important;color:#24405f!important;box-shadow:0 5px 14px rgba(31,58,95,.08)!important;line-height:1!important}.client-header-primary .mobile-menu-btn:hover,.client-header-primary .report-mobile-menu:hover{border-color:#5fcbae!important;background:#eaf9f4!important;color:#007d61!important}.client-header-primary .mobile-menu-btn svg,.client-header-primary .report-mobile-menu svg{display:block!important;width:22px!important;height:22px!important;stroke:currentColor!important;stroke-width:2.2!important;stroke-linecap:round!important;stroke-linejoin:round!important}.client-header-primary .client-branch-switcher{width:142px!important;flex-basis:142px!important}.client-header-canonical .user-avatar,.client-header-canonical .report-avatar{display:none!important}}

/* Release 2.4: one canonical Super Admin visual system on every page. */
body.superadmin-unified{font-family:Inter,Arial,sans-serif!important;color:#101b34!important}
body.superadmin-unified .main h1,body.superadmin-unified .page-title,body.superadmin-unified .page-head h1{font-family:Inter,Arial,sans-serif!important;font-size:34px!important;line-height:1.1!important;font-weight:950!important;letter-spacing:-.02em!important;color:#071b3b!important}
body.superadmin-unified .main>p,body.superadmin-unified .page-subtitle,body.superadmin-unified .page-head p{font-size:15px!important;line-height:1.55!important;color:#617799!important}
body.superadmin-unified .panel-title,body.superadmin-unified .panel-head strong,body.superadmin-unified .head strong{font-family:Inter,Arial,sans-serif!important;font-size:17px!important;line-height:1.25!important;font-weight:900!important;color:#101b34!important}
body.superadmin-unified .panel-sub,body.superadmin-unified .panel-head span,body.superadmin-unified .head small{font-size:12px!important;line-height:1.5!important;color:#6b80a0!important}
body.superadmin-unified .btn.primary,body.superadmin-unified .button.primary,body.superadmin-unified .message-admin-btn{color:#fff!important}
.domain-settings-panel .gateway-form{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:16px!important;align-items:start!important}
.domain-settings-panel .field{align-content:start!important}.domain-settings-panel .field .input{width:100%!important}
.domain-settings-panel .domain-settings-form>.field{margin-top:18px!important}
.domain-settings-panel .actions{display:flex!important;justify-content:flex-end!important;align-items:center!important;gap:10px!important;margin-top:16px!important;flex-wrap:wrap!important}
.domain-settings-panel .actions .btn{min-height:42px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;padding:0 16px!important}
@media(max-width:980px){.domain-settings-panel .gateway-form{grid-template-columns:1fr!important}.domain-settings-panel .actions{justify-content:stretch!important}.domain-settings-panel .actions .btn{flex:1!important}}
/* A2Z Smart Bill 2.8 shared form controls */
input[type="checkbox"]:not(.toggle-native){-webkit-appearance:none;appearance:none;width:22px;height:22px;min-width:22px;margin:0;border:1.5px solid #8fa2b7;border-radius:4px;background:#fff;display:inline-grid;place-content:center;vertical-align:middle;cursor:pointer;transition:background .16s,border-color .16s,box-shadow .16s}
input[type="checkbox"]:not(.toggle-native)::after{content:"";width:10px;height:6px;border-left:3px solid #fff;border-bottom:3px solid #fff;transform:rotate(-45deg) scale(0);transition:transform .12s}
input[type="checkbox"]:not(.toggle-native):checked{background:#08ad83;border-color:#08ad83}
input[type="checkbox"]:not(.toggle-native):checked::after{transform:rotate(-45deg) scale(1)}
input[type="checkbox"]:not(.toggle-native):focus-visible{outline:0;box-shadow:0 0 0 4px rgba(8,173,131,.18)}
input[type="checkbox"]:not(.toggle-native):disabled{opacity:.55;cursor:not-allowed}
input[type="file"]{box-sizing:border-box;width:100%;height:54px;min-height:54px;padding:5px;border:1px solid #cad9eb;border-radius:9px;background:#fff;color:#5f718c;font:600 14px/42px Inter,Arial,sans-serif;cursor:pointer;overflow:hidden}
input[type="file"]::file-selector-button{height:42px;margin:-1px 10px -1px -1px;padding:0 16px;border:0;border-radius:7px;background:#08ad83;color:#fff;font:800 14px/42px Inter,Arial,sans-serif;cursor:pointer;transition:background .18s,transform .18s}
input[type="file"]::file-selector-button:hover{background:#078d6c;transform:translateY(-1px)}

/* Release 2.9.25: one physical header and sidebar specification everywhere. */
.client-header-canonical{
  height:72px!important;min-height:72px!important;width:100%!important;padding:0 28px!important;
  position:sticky!important;top:0!important;z-index:120!important;box-sizing:border-box!important;
  background:#fff!important;border-bottom:1px solid #d8e5f4!important;color:#101b34!important;
  font-family:Inter,Arial,sans-serif!important;box-shadow:none!important;flex-wrap:nowrap!important;
}
.client-header-primary .topbar-brand,.client-header-primary .report-brand{
  display:flex!important;align-items:center!important;gap:12px!important;color:#101b34!important;
  font-size:22px!important;font-weight:900!important;text-decoration:none!important;
}
.client-header-primary .a2z-brand-logo{width:42px!important;height:42px!important;min-width:42px!important;object-fit:contain!important;border-radius:9px!important}
.client-header-canonical>.topbar-right,.client-header-canonical>.report-user{
  display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:12px!important;
  min-width:0!important;height:42px!important;margin:0!important;font-family:Inter,Arial,sans-serif!important;
}
.client-header-canonical .user-pill{display:flex!important;align-items:center!important;gap:12px!important}
.client-header-canonical .user-avatar,.client-header-canonical .report-avatar{
  width:38px!important;height:38px!important;min-width:38px!important;border-radius:50%!important;
  display:grid!important;place-items:center!important;color:#fff!important;font-size:13px!important;font-weight:900!important;
  background:linear-gradient(135deg,#08ad83,#3b72f6)!important;
}
.client-header-canonical .user-info,.client-header-canonical .report-user-copy{display:block!important;line-height:1.2!important;white-space:nowrap!important}
.client-header-canonical .user-info-name,.client-header-canonical .report-user-copy strong{display:block!important;color:#101b34!important;font-size:14px!important;font-weight:850!important}
.client-header-canonical .user-info-role,.client-header-canonical .report-user-copy small{display:block!important;color:#6f83a5!important;font-size:11px!important;font-weight:800!important;text-transform:uppercase!important}
.client-header-canonical .btn-logout,.client-header-canonical .report-logout{
  height:38px!important;min-height:38px!important;padding:0 13px!important;display:inline-flex!important;align-items:center!important;
  justify-content:center!important;border:1px solid #ffc7ce!important;border-radius:8px!important;background:#fff4f5!important;
  color:#cf3348!important;text-decoration:none!important;font:800 13px/1 Inter,Arial,sans-serif!important;
}
nav.sidebar[data-unified="true"]{
  width:246px!important;min-width:246px!important;flex:0 0 246px!important;padding:0!important;margin:0!important;
  position:sticky!important;left:0!important;top:72px!important;height:calc(100vh - 72px)!important;max-height:calc(100vh - 72px)!important;
  overflow-x:hidden!important;overflow-y:auto!important;scrollbar-gutter:stable!important;overscroll-behavior:contain!important;
  background:#fff!important;border-right:1px solid #d8e5f4!important;box-shadow:none!important;z-index:95!important;
}
nav.sidebar[data-unified="true"] .unified-client-sidebar{min-height:max-content!important;padding:22px 16px 34px!important}
nav.sidebar[data-unified="true"] .unified-sidebar-links{display:grid!important;gap:4px!important}
nav.sidebar[data-unified="true"] .unified-nav-link{line-height:1.25!important}
@media(max-width:900px){
  .client-header-canonical{height:64px!important;min-height:64px!important;padding:0 10px!important}
  nav.sidebar[data-unified="true"]{
    position:fixed!important;top:64px!important;bottom:0!important;height:calc(100dvh - 64px)!important;max-height:calc(100dvh - 64px)!important;
    transform:translateX(-105%)!important;transition:transform .2s ease!important;box-shadow:12px 0 30px rgba(23,45,82,.18)!important;z-index:110!important;
  }
  nav.sidebar[data-unified="true"].open{transform:translateX(0)!important}
}
.report-input.file-input{height:54px!important;min-height:54px!important;padding:5px!important;line-height:42px!important}.file-box>label{display:block;margin-bottom:8px;font-family:Inter,Arial,sans-serif}.file-box>label strong{font:800 14px/1.35 Inter,Arial,sans-serif}.file-box>label small{font:500 12px/1.45 Inter,Arial,sans-serif;color:#617593}

/* Release 2.9.2 payroll, mobile-header and landing spacing refinements. */
.client-header-center{display:flex;align-items:center;justify-content:center;gap:7px;min-width:0}
@media(max-width:767px){#hero .hero-sub{margin-bottom:0!important}#hero .trust-bar{display:none!important;margin:0!important;padding:0!important}}
@media(max-width:560px){
  .client-header-canonical{position:relative!important}
  .client-header-primary{position:static!important;display:block!important;width:40px!important;min-width:40px!important;overflow:visible!important}
  .client-header-primary .mobile-menu-btn,.client-header-primary .report-mobile-menu{position:absolute!important;left:8px!important;top:50%!important;transform:translateY(-50%)!important;margin:0!important;z-index:3!important}
  .client-header-center{position:absolute!important;left:50%!important;top:50%!important;transform:translate(-50%,-50%)!important;gap:6px!important;z-index:2!important;max-width:calc(100% - 180px)!important}
  .client-header-center .a2z-brand-logo{width:32px!important;height:32px!important;min-width:32px!important}
  .client-header-center .client-branch-switcher{width:142px!important;min-width:142px!important;flex:0 0 142px!important;margin:0!important}
  .client-header-canonical>.topbar-right,.client-header-canonical>.report-user{position:relative!important;z-index:3!important}
}

/* Release 2.9.4: dependable sidebar scrolling and polished menu selection. */
nav.sidebar[data-unified="true"],.report-sidebar,#superadminSidebar{overflow-x:hidden!important;overflow-y:auto!important;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:#a9bfd8 transparent}
nav.sidebar[data-unified="true"] .unified-client-sidebar,.report-sidebar .report-nav,#superadminSidebar .unified-client-sidebar{min-height:max-content;padding-bottom:34px!important}
nav.sidebar[data-unified="true"]::-webkit-scrollbar,.report-sidebar::-webkit-scrollbar,#superadminSidebar::-webkit-scrollbar{width:7px}nav.sidebar[data-unified="true"]::-webkit-scrollbar-thumb,.report-sidebar::-webkit-scrollbar-thumb,#superadminSidebar::-webkit-scrollbar-thumb{background:#a9bfd8;border-radius:999px}
.menu-card .card-check{width:38px!important;height:38px!important;left:10px!important;top:10px!important;border:1px solid #b7c9dd!important;border-radius:11px!important;background:rgba(255,255,255,.94)!important;box-shadow:0 8px 20px rgba(31,58,95,.14)!important;backdrop-filter:blur(8px)!important;cursor:pointer!important}
.menu-card .card-check input[type="checkbox"]{width:24px!important;height:24px!important;min-width:24px!important;border:2px solid #8ca3bf!important;border-radius:7px!important;background:#fff!important;box-shadow:inset 0 0 0 2px #fff!important}
.menu-card .card-check input[type="checkbox"]:hover{border-color:#08ad83!important;box-shadow:0 0 0 4px rgba(8,173,131,.12)!important}.menu-card .card-check input[type="checkbox"]:checked{border-color:#08ad83!important;background:#08ad83!important;box-shadow:0 0 0 4px rgba(8,173,131,.16)!important}
@media(max-width:820px){nav.sidebar[data-unified="true"],.report-sidebar,#superadminSidebar{bottom:0!important;max-height:calc(100dvh - 64px)!important;height:calc(100dvh - 64px)!important}}

/* Final mobile-header authority: legacy and report shells keep the same
   right-side footprint, so the centered logo/branch control cannot jump. */
@media(max-width:900px){
  .client-header-canonical .user-info,
  .client-header-canonical .report-user-copy{display:none!important}
  .client-header-canonical>.topbar-right,
  .client-header-canonical>.report-user{width:auto!important;min-width:0!important;max-width:max-content!important;height:42px!important;align-self:center!important}
  .client-header-canonical .btn-logout,
  .client-header-canonical .report-logout{width:77px!important;min-width:77px!important;padding-left:0!important;padding-right:0!important}
}

/* Release 2.9.25: Add Menu and Membership share the Staff Details
   header-right sizing exactly, regardless of legacy page CSS order. */
.client-header-canonical>.client-header-tools{align-self:center!important;justify-self:end!important;margin:0!important}
.client-header-canonical>.topbar-right,
.client-header-canonical>.report-user{
  flex:0 0 auto!important;width:auto!important;min-width:0!important;max-width:max-content!important;
  align-self:center!important;justify-self:end!important;padding:0!important;background:transparent!important;border:0!important;box-shadow:none!important;
}
.client-header-canonical>.topbar-right .user-pill,
.client-header-canonical>.report-user{flex-wrap:nowrap!important}

/* Release 2.9.25: make saved/success/error messages readable on light dashboard pages. */
.alert-success,.flash-success,.report-alert.success,.dashboard-alert.success,.marketing-alert.ok,.alert.success,.alert-ok{background:#e8faf4!important;border-color:#a8ead6!important;color:#075f4a!important}
.alert-error,.flash-error,.report-alert.error,.dashboard-alert.error,.marketing-alert.err,.alert.error,.alert-err{background:#fff0f2!important;border-color:#ffc2cb!important;color:#9f2337!important}
.alert-success svg,.flash-success svg,.report-alert.success svg,.dashboard-alert.success svg,.alert-ok svg{color:#087b61!important;stroke:#087b61!important}
.alert-error svg,.flash-error svg,.report-alert.error svg,.dashboard-alert.error svg,.alert-err svg{color:#b82639!important;stroke:#b82639!important}

/* Release 2.9.25: final production stability polish. */
html{scrollbar-gutter:stable!important}
nav.sidebar[data-unified="true"],.report-sidebar,#superadminSidebar{overflow-y:scroll!important;scrollbar-gutter:stable!important}