@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap');

/* E-FUNDI operations UI — shared by Fundi and Admin dashboards. */
:root {
  --bg: #F4F7FA;
  --bg2: #F4F7FA;
  --bg3: #E8F8FE;
  --glass: #FFFFFF;
  --glass2: #FFFFFF;
  --glass3: #F4F7FA;
  --bdr: #DDE6EC;
  --bdr2: #DDE6EC;
  --bdr-gold: rgba(167, 230, 0, .55);
  --gold: #A7E600;
  --gold2: #A7E600;
  --gold-dim: #F2FFD2;
  --gold-glow: none;
  --blue: #08B8F5;
  --blue-dim: #E8F8FE;
  --cyan: #08B8F5;
  --cyan-glow: none;
  --teal: #00C853;
  --teal-dim: #E8F8EE;
  --green: #00C853;
  --green-dim: #E8F8EE;
  --purple: #7C3AED;
  --red: #D92D20;
  --text: #173042;
  --text2: #5E6D78;
  --text3: #93A1AC;
  --border: #DDE6EC;
  --border-gold: rgba(167, 230, 0, .5);
  --dash-bg: #F4F7FA;
  --dash-surface: #FFFFFF;
  --dash-surface-2: #F4F7FA;
  --dash-line: #DDE6EC;
  --dash-line-strong: #C8D8E2;
  --dash-text: #173042;
  --dash-muted: #5E6D78;
  --dash-faint: #93A1AC;
  --dash-orange: #08B8F5;
  --dash-orange-2: #009DD8;
  --dash-lime: #A7E600;
  --dash-green: #00C853;
  --dash-blue: #08B8F5;
  --dash-red: #D92D20;
  --dash-teal: #00C853;
}

html { background: #F4F7FA !important; }
body {
  min-height: 100vh !important;
  background: #F4F7FA !important;
  background-image: radial-gradient(circle at 90% -5%, rgba(8, 184, 245, .14), transparent 32%) !important;
  color: #173042 !important;
  font-family: 'Poppins', ui-sans-serif, system-ui, sans-serif !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
}
body *, body *::before, body *::after { font-family: inherit !important; text-shadow: none !important; }
body h1, body h2, body h3, body h4, body .mono { color: #173042 !important; letter-spacing: -.025em !important; }

.auth-orbs, .auth-orb, .auth-grid, .hero-glow-bg, .hero-glow-bg2, #cursor-glow { display: none !important; }

/* Login surfaces */
#loginPage, #loginScreen, .auth-page {
  min-height: 100vh !important;
  background: linear-gradient(135deg, #F4F7FA 0%, #FFFFFF 55%, #E8F8FE 100%) !important;
}
.auth-bg, .auth-grid { background: transparent !important; }
.auth-box, #loginScreen { position: relative !important; z-index: 1; }
.auth-logo-wrap { margin-bottom: 20px !important; }
.auth-logo-img { width: auto !important; height: 66px !important; margin: 0 auto 10px !important; filter: none !important; animation: none !important; }
.auth-brand, .auth-logo-img-fallback { color: #009DD8 !important; font-size: 15px !important; font-weight: 800 !important; }
.auth-brand-sub, .auth-card-sub { color: #5E6D78 !important; text-transform: none !important; letter-spacing: 0 !important; }
.auth-card, .login-card {
  background: #FFFFFF !important;
  border: 1px solid #DDE6EC !important;
  border-radius: 20px !important;
  box-shadow: 0 18px 48px rgba(23, 48, 66, .10) !important;
  backdrop-filter: none !important;
}
.auth-card-title { font-size: 21px !important; color: #173042 !important; }
.form-label { color: #173042 !important; font-size: 12px !important; font-weight: 700 !important; text-transform: none !important; letter-spacing: 0 !important; }
.form-input, input, textarea, select, .search-input {
  background: #FFFFFF !important;
  border: 1px solid #DDE6EC !important;
  border-radius: 12px !important;
  color: #173042 !important;
  box-shadow: none !important;
}
.form-input:focus, input:focus, textarea:focus, select:focus, .search-input:focus {
  border-color: #08B8F5 !important;
  outline: 3px solid rgba(8, 184, 245, .18) !important;
  box-shadow: none !important;
}

/* Buttons and small controls */
.btn, button, .tb-action, .notif-btn, .sb-toggle {
  border-radius: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
}
.btn-primary, .btn-gold, .send-btn, .dispatch-btn {
  background: #08B8F5 !important;
  color: #FFFFFF !important;
  border-color: #08B8F5 !important;
  box-shadow: 0 8px 20px rgba(8, 184, 245, .22) !important;
}
.btn-primary:hover, .btn-gold:hover, .send-btn:hover { background: #009DD8 !important; box-shadow: 0 10px 24px rgba(8, 184, 245, .28) !important; }
.btn-ghost, .tb-action, .notif-btn, .back-btn, .tabs, .tab, .qs-chip, .sb-user {
  background: #FFFFFF !important;
  border: 1px solid #DDE6EC !important;
  color: #173042 !important;
}
.btn-accept, .btn-success { background: #E8F8EE !important; border-color: #00C853 !important; color: #087A39 !important; }
.btn-complete { background: #E8F8FE !important; border-color: #08B8F5 !important; color: #009DD8 !important; }
.btn-reject, .btn-danger { background: #FFF0EE !important; border-color: #F4B4AE !important; color: #D92D20 !important; }
.btn-warn { background: #F2FFD2 !important; border-color: #A7E600 !important; color: #3B5D00 !important; }

/* Fundi dashboard */
#mainApp { min-height: 100vh !important; padding-bottom: 36px; }
.topbar {
  height: 72px !important;
  padding: 0 max(24px, calc((100% - 1180px) / 2)) !important;
  background: rgba(255,255,255,.94) !important;
  border-bottom: 1px solid #DDE6EC !important;
  box-shadow: 0 3px 16px rgba(23, 48, 66, .05) !important;
  backdrop-filter: blur(16px) !important;
}
.topbar img { filter: none !important; max-width: 190px !important; }
.tb-action, .notif-btn { width: 42px !important; height: 42px !important; }
.tb-avatar { border-color: #08B8F5 !important; background: #E8F8FE !important; color: #009DD8 !important; box-shadow: none !important; }
.notif-dot { background: #D92D20 !important; border-color: #FFFFFF !important; }
.hero {
  width: min(1180px, calc(100% - 48px)) !important;
  max-width: none !important;
  min-height: 0 !important;
  margin: 30px auto 0 !important;
  background: linear-gradient(135deg, #FFFFFF 0%, #FFFFFF 67%, #E8F8FE 100%) !important;
  border: 1px solid #DDE6EC !important;
  border-radius: 24px !important;
  box-shadow: 0 12px 32px rgba(23, 48, 66, .07) !important;
}
.hero::before, .hero::after { display: none !important; }
.hero-inner { padding: 28px 30px !important; }
.hero-top { align-items: center !important; }
.hero-avatar { background: #E8F8FE !important; border: 1px solid #08B8F5 !important; color: #009DD8 !important; box-shadow: none !important; }
.hero-greeting, .hero-stat-lbl, .feat-sub, .stat-lbl, .section-head-text, .panel-head p, .bk-time { color: #5E6D78 !important; }
.hero-name { color: #173042 !important; font-size: clamp(23px, 3vw, 32px) !important; }
.hero-service-badge { background: #F2FFD2 !important; color: #3B5D00 !important; border-color: #A7E600 !important; }
.hero-stats { gap: 12px !important; }
.hero-stat { background: #FFFFFF !important; border: 1px solid #DDE6EC !important; border-radius: 16px !important; }
.hero-stat-val, .stat-val, .s-value { color: #173042 !important; }
.content {
  width: min(1180px, calc(100% - 48px)) !important;
  max-width: none !important;
  margin: 0 auto !important;
  padding: 26px 0 64px !important;
}
.feature-row, .panel, .booking-card, .stat-box, .chart-panel, .profile-card, .trust-card, .review-card, .rv-card, .match-card, .quick-card, .service-card, .empty-state, .empty {
  background: #FFFFFF !important;
  border: 1px solid #DDE6EC !important;
  border-radius: 18px !important;
  box-shadow: 0 8px 22px rgba(23, 48, 66, .05) !important;
}
.feature-row { margin-bottom: 12px !important; }
.feat-icon { background: #E8F8FE !important; border-color: #B5E9FA !important; }
.feat-title, .panel-head h3, .bk-name, .stat-lbl { color: #173042 !important; }
.mini-toggle { background: #DDE6EC !important; border-color: #C8D8E2 !important; }
.mini-toggle.on { background: #A7E600 !important; border-color: #A7E600 !important; }
.mini-thumb { background: #FFFFFF !important; box-shadow: 0 2px 5px rgba(23, 48, 66, .18) !important; }
.stats-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 14px !important; }
.stat-box { min-height: 150px !important; padding: 18px !important; }
.stat-box::before, .stat-card::before { background: #08B8F5 !important; }
.stat-icon { background: #E8F8FE !important; border-radius: 12px !important; padding: 7px !important; }
.badge-pill, .badge-pending { border-radius: 999px !important; background: #F2FFD2 !important; border-color: #A7E600 !important; color: #3B5D00 !important; }
.bp-green, .badge-done { background: #E8F8EE !important; border-color: #9BE3BA !important; color: #087A39 !important; }
.bp-blue { background: #E8F8FE !important; border-color: #B5E9FA !important; color: #009DD8 !important; }
.bp-red, .badge-hidden { background: #FFF0EE !important; border-color: #F4B4AE !important; color: #D92D20 !important; }
.section-head { border-color: #DDE6EC !important; }
.bottom-nav { display: none !important; }

/* Admin desktop dashboard */
.dash { grid-template-columns: 258px minmax(0, 1fr) !important; background: #F4F7FA !important; }
.dash.collapsed { grid-template-columns: 74px minmax(0, 1fr) !important; }
.sidebar {
  background: #173042 !important;
  border-right: 0 !important;
  box-shadow: 4px 0 18px rgba(23, 48, 66, .08) !important;
}
.sidebar::before { background: linear-gradient(180deg, transparent, #08B8F5, transparent) !important; }
.sb-header, .sb-footer { border-color: rgba(255,255,255,.12) !important; }
.sb-logo { filter: none !important; }
.sb-brand-name { color: #FFFFFF !important; font-size: 14px !important; }
.sb-brand-sub, .sb-section-label { color: rgba(255,255,255,.60) !important; }
.sb-toggle { background: rgba(255,255,255,.10) !important; border-color: rgba(255,255,255,.18) !important; color: #FFFFFF !important; }
.sb-item { color: rgba(255,255,255,.76) !important; border: 1px solid transparent !important; }
.sb-item:hover { background: rgba(255,255,255,.09) !important; color: #FFFFFF !important; }
.sb-item.active { background: rgba(167,230,0,.16) !important; border-color: rgba(167,230,0,.28) !important; color: #D9FF55 !important; }
.sb-item.active::before { background: #A7E600 !important; box-shadow: none !important; }
.sb-user { background: rgba(255,255,255,.08) !important; border-color: rgba(255,255,255,.12) !important; color: #FFFFFF !important; }
.sb-avatar { background: #08B8F5 !important; border-color: transparent !important; color: #FFFFFF !important; }
.main { min-width: 0 !important; background: transparent !important; }
.main .topbar { padding: 0 34px !important; position: sticky !important; }
.topbar-left h2 { color: #173042 !important; font-size: 20px !important; }
.topbar-left p, .status-text { color: #5E6D78 !important; }
.main .content { width: auto !important; max-width: none !important; padding: 30px 34px 54px !important; }
.main .stats-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
.stat-card { background: #FFFFFF !important; border: 1px solid #DDE6EC !important; border-radius: 18px !important; box-shadow: 0 8px 22px rgba(23, 48, 66, .05) !important; }
.stat-card:hover { border-color: #08B8F5 !important; transform: translateY(-2px) !important; }
.s-label, .s-sub { color: #5E6D78 !important; }
.c-gold, .c-blue, .c-cyan { color: #009DD8 !important; }
.c-green { color: #087A39 !important; }
.c-red { color: #D92D20 !important; }
.c-purple { color: #7C3AED !important; }
.table, .fundi-row, .admin-row { border-color: #DDE6EC !important; background: #FFFFFF !important; }
.table-head { background: #F4F7FA !important; color: #5E6D78 !important; }
.modal-box, .notif-panel { background: #FFFFFF !important; color: #173042 !important; border-color: #DDE6EC !important; box-shadow: 0 20px 52px rgba(23,48,66,.18) !important; }

@media (max-width: 980px) {
  .stats-grid, .main .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .dash, .dash.collapsed { grid-template-columns: 74px minmax(0, 1fr) !important; }
  .sidebar { padding-inline: 10px !important; }
  .sb-brand, .sb-label, .sb-badge, .sb-section-label, .sb-user-info, .btn-label { display: none !important; }
  .main .content { padding-inline: 22px !important; }
}

@media (max-width: 700px) {
  .topbar, .main .topbar { height: 64px !important; padding-inline: 16px !important; }
  .hero, .content { width: min(100% - 28px, 1180px) !important; }
  .hero { margin-top: 18px !important; border-radius: 20px !important; }
  .hero-inner { padding: 20px !important; }
  .hero-stats { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; margin-top: 18px !important; }
  .hero-stat { min-height: 80px !important; }
  .content { padding-bottom: 100px !important; }
  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .stat-box { min-height: 124px !important; padding: 14px !important; }
  #mainApp .bottom-nav { display: flex !important; background: #FFFFFF !important; border-top: 1px solid #DDE6EC !important; box-shadow: 0 -6px 18px rgba(23,48,66,.08) !important; }
  .bn-item { color: #5E6D78 !important; }
  .bn-item.active { color: #009DD8 !important; background: #E8F8FE !important; border: 0 !important; }
  .auth-card, .login-card { padding: 26px 20px !important; border-radius: 18px !important; }
  .dash, .dash.collapsed { display: block !important; }
  .sidebar { display: none !important; }
  .main .content { padding: 22px 16px 42px !important; }
  .main .topbar { padding-inline: 16px !important; }
  .topbar-left p { display: none !important; }
}