/* ==========================================================================
   SAVIRA CRM — Ultra-Modern Executive UI Theme (Frosted Glass & Spacious Layout)
   Faithfully Matched to Design Reference (Image 2 & Jobgio Glassmorphism Image 3)
   ========================================================================== */

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

:root {
  /* Typography */
  --font: 'Outfit', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Surfaces & Ambient Lighting (Image 2 Palette) */
  --bg-page: #D5D5D9;
  --bg-canvas: #EEEEF1;
  --bg-shell: rgba(244, 244, 247, 0.95);
  --bg-card: rgba(255, 255, 255, 0.78);
  --bg-card-hover: rgba(255, 255, 255, 0.92);
  --bg-subtle: rgba(246, 246, 248, 0.75);
  --bg-pill: #F0F0F2;

  /* Executive Jet-Black Brand Tokens */
  --dark-grad: linear-gradient(180deg, #2D2D31 0%, #101012 100%);
  --dark-pure: #000000;
  --dark-surface: #0B0B0C;
  --dark-soft: #1B1B1E;

  /* Text Colors (High Contrast & Refined Hierarchy) */
  --txt: #0B0B0C;
  --txt-main: #0B0B0C;
  --txt-body: #3A3A3F;
  --txt-sec: #55555B;
  --txt-muted: #71717A;
  --txt-subtle: #8E8E93;

  /* Glass Borders & Highlights */
  --glass-border: rgba(255, 255, 255, 0.95);
  --glass-border-subtle: rgba(255, 255, 255, 0.75);
  --border-light: rgba(0, 0, 0, 0.06);

  /* Status Tokens */
  --green-bg: #E6F4EA;
  --green-txt: #067647;
  --green-dot: #16A34A;
  --red-bg: #FEE4E2;
  --red-txt: #B42318;
  --red-dot: #DC2626;

  /* Radii Tokens */
  --r-pill: 99px;
  --r-card: 32px;
  --r-stat: 28px;
  --r-shell: 38px;
  --r-in: 18px;
  --r-box: 22px;
  --r-full: 99px;

  /* Legacy Bridge Variables */
  --p: #0B0B0C;
  --p-hover: #000000;
  --p-light: #F0F0F2;
  --mut: #71717A;
  --sb-bg: rgba(255, 255, 255, 0.85);
  --sb-border: rgba(255, 255, 255, 0.8);
  --sb-txt: #3A3A3F;
  --sb-txt-muted: #71717A;
  --sb-active-bg: var(--dark-grad);
  --sb-active-txt: #FFFFFF;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 14px;
}

/* Page Canvas: Studio Neutral Grey with Ambient Glow & Breathing Outer Space */
body {
  margin: 0;
  padding: 16px 20px;
  /* Space sedikit di pinggir luar (tidak nempel layar) */
  background: #D5D5D9;
  background-image:
    radial-gradient(circle at 18% 10%, #EAEAEF 0%, transparent 48%),
    radial-gradient(circle at 85% 90%, #C7C8CE 0%, transparent 48%);
  font-family: var(--font);
  color: var(--txt-main);
  height: 100vh;
  max-height: 100vh;
  overflow: hidden;
  /* Mencegah window luar scroll, menjaga sudut bawah frame selalu terlihat persis seperti Gambar 2 */
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  display: flex;
  justify-content: center;
  align-items: stretch;
  box-sizing: border-box;
}

a {
  color: #0B0B0C;
  text-decoration: none;
  transition: all 0.15s ease;
}

a:hover {
  color: #000000;
}

button {
  font-family: inherit;
}

/* Hide redundant floating status badge */
#dbStatusBadge {
  display: none !important;
}

/* ==========================================================================
   APP SHELL CONTAINER (.shell / .app)
   "Di-full-kan tapi ada space sedikit" — Widescreen Fluid with Outer Margin
   ========================================================================== */
.shell,
.app {
  width: 100%;
  max-width: 1780px;
  /* Lebar maksimal widescreen tanpa mepet */
  margin: 0 auto;
  display: flex;
  background: var(--bg-shell);
  border-radius: var(--r-shell);
  overflow: hidden;
  box-shadow:
    0 25px 70px rgba(0, 0, 0, 0.12),
    0 4px 14px rgba(0, 0, 0, 0.04);
  border: 3.5px solid rgba(255, 255, 255, 0.95);
  height: 100%;
  max-height: calc(100vh - 32px);
  position: relative;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-sizing: border-box;
}

/* Mobile backdrop */
.ov {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(4px);
  z-index: 999;
}

.ov.open {
  display: block;
}

/* ==========================================================================
   SIDEBAR (.side / .sb)
   Frosted Clean White with Pill Nav Links
   ========================================================================== */
.side,
.sb {
  flex: 0 0 270px;
  width: 270px;
  height: 100%;
  max-height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 30px 20px 26px;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(26px) saturate(160%);
  -webkit-backdrop-filter: blur(26px) saturate(160%);
  border-right: 1.5px solid rgba(255, 255, 255, 0.9);
  position: relative;
  z-index: 100;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  box-sizing: border-box;
}

/* Logo Box */
.logo {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 6px 4px;
  cursor: pointer;
  text-decoration: none;
}

.logo-box {
  width: 48px;
  height: 48px;
  border-radius: 18px;
  background: linear-gradient(180deg, #2D2D31 0%, #0B0B0C 100%);
  color: #ffffff;
  font-weight: 600;
  font-size: 17px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 48px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.logo-text {
  min-width: 0;
}

.logo-text b {
  display: block;
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.2;
  color: #0B0B0C;
  letter-spacing: -0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.logo-text small {
  font-size: 12px;
  color: #71717A;
  display: block;
  margin-top: 1px;
}

/* Sidebar Section Labels */
.nav-sec-label,
.sb-sec-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: #8E8E93;
  padding: 0 12px 6px;
  text-transform: uppercase;
}

/* Nav Links (.ni / .nav a) */
.nav {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ni,
.nav a {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 6px 14px 6px 8px;
  border-radius: 99px;
  font-size: 14.5px;
  font-weight: 500;
  color: #3A3A3F;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

.ni .ic,
.nav a i {
  width: 38px;
  height: 38px;
  border-radius: 99px;
  background: #F0F0F2;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #55555B;
  flex: 0 0 38px;
  font-size: 15px;
  transition: all 0.2s ease;
}

.ni:hover,
.nav a:hover {
  background: rgba(255, 255, 255, 0.95);
  color: #000000;
  transform: translateX(2px);
}

.ni.on,
.nav a.on {
  background: linear-gradient(180deg, #2D2D31 0%, #101012 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.24);
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.ni.on .ic,
.nav a.on i {
  background: #ffffff !important;
  color: #000000 !important;
}

/* Sidebar Slot Status Box */
.brands {
  border-radius: 24px;
  background: rgba(246, 246, 248, 0.75);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.9);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.brand-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 13px;
}

.brand-item b {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: #0B0B0C;
}

.brand-item i {
  width: 8px;
  height: 8px;
  border-radius: 99px;
  display: inline-block;
  flex-shrink: 0;
}

.brand-item span {
  font-size: 12px;
  color: #71717A;
  font-variant-numeric: tabular-nums;
}

/* Sidebar Profile Footer */
.prof {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding-top: 6px;
  text-align: center;
  cursor: pointer;
}

.prof .av {
  width: 60px;
  height: 60px;
  border-radius: 99px;
  background: linear-gradient(180deg, #4A4A4F, #111111);
  color: #ffffff;
  font-weight: 600;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
  border: 1.5px solid rgba(255, 255, 255, 0.2);
}

.prof b {
  font-size: 15px;
  font-weight: 600;
  color: #0B0B0C;
  line-height: 1.3;
}

.prof small {
  font-size: 11px;
  text-transform: uppercase;
  color: #71717A;
}

/* ==========================================================================
   CONTENT PANEL (.pad / .main)
   Spacious Canvas (No Cramping!) with Frosted Header
   ========================================================================== */
.pad,
.main {
  flex: 1 1 0%;
  min-width: 0;
  height: 100%;
  max-height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 34px 40px 44px;
  /* Ample breathing room */
  display: flex;
  flex-direction: column;
  gap: 28px;
  /* Generous vertical rhythm */
  background: #EEEEF1;
  background-image:
    radial-gradient(circle at 10% 5%, rgba(255, 255, 255, 0.7) 0%, transparent 40%),
    radial-gradient(circle at 90% 90%, rgba(220, 220, 225, 0.5) 0%, transparent 40%);
  box-sizing: border-box;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.15) transparent;
}

/* Sleek Minimalist Executive Scrollbar */
.main::-webkit-scrollbar,
.side::-webkit-scrollbar,
.cl-list::-webkit-scrollbar,
.msgs::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.main::-webkit-scrollbar-track,
.side::-webkit-scrollbar-track,
.cl-list::-webkit-scrollbar-track,
.msgs::-webkit-scrollbar-track {
  background: transparent;
}

.main::-webkit-scrollbar-thumb,
.side::-webkit-scrollbar-thumb,
.cl-list::-webkit-scrollbar-thumb,
.msgs::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.14);
  border-radius: 99px;
}

.main::-webkit-scrollbar-thumb:hover,
.side::-webkit-scrollbar-thumb:hover,
.cl-list::-webkit-scrollbar-thumb:hover,
.msgs::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.28);
}

/* ==========================================================================
   MAIN SPA VIEW CONTAINER (#view, main#view)
   Strict Vertical Rhythm: 28px Gap Between All Sections & Cards
   Permanently eliminates all touching / colliding cards across all pages!
   ========================================================================== */
#view,
main#view {
  display: flex !important;
  flex-direction: column !important;
  gap: 28px !important;
  width: 100% !important;
  min-width: 0 !important;
}

#view>* {
  min-width: 0 !important;
  width: 100% !important;
}

#view>*+* {
  margin-top: 0 !important;
  /* flex gap handles 28px spacing cleanly */
}

/* Margin utilities & adjacent sibling safeguards for non-flex blocks */
.mt,
.card.mt,
.g.mt,
section.mt {
  margin-top: 28px !important;
}

.card+.card,
.card+.g,
.g+.card,
.g+.g,
section+section,
section+.card,
.card+section,
.g+section,
section+.g {
  margin-top: 28px !important;
}

/* ==========================================================================
   PAGE HEADERS (.ph, .ph h1, .ph p, .pa)
   Executive Typography & Action Bar (Image 2 & 3 Standard)
   ========================================================================== */
.ph {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  gap: 20px !important;
  margin-bottom: 2px !important;
  width: 100% !important;
}

.ph>div:first-child {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  min-width: 0 !important;
  flex: 1 1 380px !important;
}

.ph h1 {
  margin: 0 !important;
  font-size: clamp(26px, 3.2vw, 40px) !important;
  line-height: 1.15 !important;
  font-weight: 600 !important;
  letter-spacing: -0.025em !important;
  color: #0B0B0C !important;
}

.ph p {
  margin: 0 !important;
  font-size: 14px !important;
  color: #71717A !important;
  line-height: 1.5 !important;
}

.pa {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 12px !important;
}

/* ==========================================================================
   CARD HEADERS (.ch, .ch-left)
   Frosted Header Bar for Cards & Tables
   ========================================================================== */
.ch {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  padding: 24px 32px !important;
  border-bottom: 1.5px solid rgba(0, 0, 0, 0.05) !important;
}

.ch-left {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.ch-left h3 {
  margin: 0 !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  color: #0B0B0C !important;
  letter-spacing: -0.015em !important;
}

.ch-left i {
  font-size: 18px !important;
  color: #0B0B0C !important;
}

/* Topbar Header (Frosted Glass Pill Bar) */
header.top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 8px 18px 8px 10px;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1.5px solid rgba(255, 255, 255, 0.95);
  border-radius: 99px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);
  flex-shrink: 0;
  position: sticky;
  top: 0;
  z-index: 90;
}
}

.tb-menu {
  width: 44px;
  height: 44px;
  border-radius: 99px;
  border: 1px solid rgba(255, 255, 255, 0.9);
  background: #ffffff;
  color: #0B0B0C;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex: 0 0 44px;
  transition: all 0.18s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

.tb-menu:hover {
  background: #F4F4F5;
  transform: scale(1.04);
}

/* ==========================================================================
   BUTTONS (.btn, .btn-k, .btn-s)
   Refined Pill Buttons with Subtle Glass Effects
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 22px;
  border-radius: 99px;
  border: 1.5px solid rgba(255, 255, 255, 0.95);
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: #0B0B0C;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  font-family: var(--font);
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.03),
    inset 0 1px 1px rgba(255, 255, 255, 0.95);
}

.btn:hover {
  background: #ffffff;
  border-color: #ffffff;
  color: #000000;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
  transform: translateY(-1px);
}

.btn-k,
.btn.p {
  background: linear-gradient(180deg, #2D2D31 0%, #0D0D0F 100%) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.2) !important;
  color: #ffffff !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18) !important;
}

.btn-k:hover,
.btn.p:hover {
  background: #000000 !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
  color: #ffffff !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28) !important;
  transform: translateY(-1.5px);
}

.btn-s,
.btn.sm {
  min-height: 42px;
  padding: 0 18px;
  font-size: 13px;
  border-radius: 99px;
}

/* ==========================================================================
   FROSTED GLASS CARDS (.card, article.card, section.card)
   Authentic Glassmorphism (Jobgio Inspiration Image 3)
   ========================================================================== */
.card,
article.card,
section.card {
  background: var(--bg-card) !important;
  backdrop-filter: blur(24px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
  border: 1.5px solid var(--glass-border) !important;
  border-radius: var(--r-card) !important;
  box-shadow:
    0 16px 36px -4px rgba(0, 0, 0, 0.04),
    0 4px 12px rgba(0, 0, 0, 0.02),
    inset 0 1px 1.5px rgba(255, 255, 255, 1) !important;
  position: relative;
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

.card:hover {
  background: var(--bg-card-hover) !important;
  border-color: #ffffff !important;
  box-shadow:
    0 22px 48px -4px rgba(0, 0, 0, 0.07),
    0 6px 16px rgba(0, 0, 0, 0.03),
    inset 0 1px 1.5px rgba(255, 255, 255, 1) !important;
  transform: translateY(-2px);
}

/* ==========================================================================
   KPI STATS GRID (.stats & .stat)
   Spacious 6-Col Grid with Frosted Glass & Dark Hero Stat
   ========================================================================== */
.stats {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
}

.stat,
.card.sc {
  background: var(--bg-card) !important;
  backdrop-filter: blur(24px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
  border: 1.5px solid var(--glass-border) !important;
  border-radius: 20px !important;
  padding: 16px 14px 14px !important;
  min-height: 162px;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
  box-shadow:
    0 12px 28px -4px rgba(0, 0, 0, 0.04),
    0 3px 10px rgba(0, 0, 0, 0.02),
    inset 0 1px 1.5px rgba(255, 255, 255, 1) !important;
  min-width: 0;
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
}

.stat:hover,
.card.sc:hover {
  background: var(--bg-card-hover) !important;
  border-color: #ffffff !important;
  box-shadow:
    0 18px 36px -4px rgba(0, 0, 0, 0.07),
    0 4px 12px rgba(0, 0, 0, 0.03),
    inset 0 1px 1.5px rgba(255, 255, 255, 1) !important;
  transform: translateY(-2px);
}

.stat .ic,
.card.sc .ico,
.card.sc .sct i {
  width: 38px;
  height: 38px;
  border-radius: 99px;
  background: rgba(240, 240, 242, 0.85);
  backdrop-filter: blur(10px);
  color: #1B1B1E;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
  font-size: 15px;
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.02);
}

.stat .val,
.card.sc .scv,
.card.sc b {
  font-size: 22px;
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #0B0B0C;
  margin: 1px 0;
  font-variant-numeric: tabular-nums;
}

.stat .ttl,
.card.sc .l,
.card.sc .sct h4 {
  font-size: 12.5px;
  font-weight: 600;
  color: #0B0B0C;
  line-height: 1.25;
}

.stat .sub,
.card.sc .sub,
.card.sc .sct p {
  font-size: 11px;
  color: #71717A;
  line-height: 1.3;
}

.stat .foot,
.card.sc .scs {
  margin-top: auto;
  padding-top: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.stat-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 600;
  background: rgba(240, 240, 242, 0.85);
  color: #3A3A3F;
  border: 1px solid rgba(255, 255, 255, 0.9);
  transition: all 0.15s ease;
  white-space: nowrap;
}

.stat-pill.success {
  background: #E6F4EA;
  color: #067647;
  border-color: rgba(167, 243, 208, 0.6);
}

.stat.dk .stat-pill {
  background: rgba(255, 255, 255, 0.15);
  color: #FFFFFF;
  border-color: rgba(255, 255, 255, 0.25);
}

.stat.dk .stat-pill.success {
  background: rgba(22, 163, 74, 0.25);
  color: #86EFAC;
  border-color: rgba(134, 239, 172, 0.35);
}

/* 1st Stat Card: Frosted Jet-Black Hero Card (Image 2 & 3) */
.stat.dk {
  background: linear-gradient(165deg, rgba(44, 44, 48, 0.96) 0%, rgba(14, 14, 16, 0.98) 100%) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.22) !important;
  box-shadow:
    0 16px 36px rgba(0, 0, 0, 0.22),
    inset 0 1px 1.5px rgba(255, 255, 255, 0.28) !important;
  color: #ffffff !important;
}

.stat.dk:hover {
  background: linear-gradient(165deg, rgba(54, 54, 60, 0.98) 0%, rgba(18, 18, 22, 1) 100%) !important;
  border-color: rgba(255, 255, 255, 0.35) !important;
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.28) !important;
}

.stat.dk .val,
.stat.dk .ttl {
  color: #ffffff !important;
}

.stat.dk .sub {
  color: rgba(255, 255, 255, 0.72) !important;
}

.stat.dk .ic {
  background: rgba(255, 255, 255, 0.14) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
}

/* Fallback & standardization for legacy .sct structure in stats */
.card.sc .sct {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  gap: 4px;
  width: 100%;
}

.card.sc .sct > div {
  text-align: center;
}

/* ==========================================================================
   2 WHATSAPP SLOTS GRID (.slots)
   Spacious 2-Col Frosted Glass Cards
   ========================================================================== */
.slots {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.slots article.card,
.slot-card {
  padding: 22px 24px !important;
  border-radius: 24px !important;
  display: flex;
  flex-direction: column;
  gap: 14px;
  height: 100%;
  box-sizing: border-box;
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

.slots article.card:hover,
.slot-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 36px -6px rgba(0, 0, 0, 0.07);
}

/* Inner Details Box inside Slots */
.slots article.card>div:nth-child(3),
.slot-info-box {
  background: rgba(246, 246, 248, 0.75) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border: 1px solid rgba(255, 255, 255, 0.95) !important;
  border-radius: 16px !important;
  padding: 12px 16px !important;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.8) !important;
}

/* ==========================================================================
   GOOGLE SPREADSHEET CARD (#spreadsheet)
   Spacious Frosted Integration Banner
   ========================================================================== */
#spreadsheet.card {
  padding: 22px 26px !important;
  border-radius: 24px !important;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 0 !important;
}

/* ==========================================================================
   LIST ROWS FOR FILES & LEADS (.row)
   Frosted Secondary Glass Rows
   ========================================================================== */
.row {
  background: rgba(246, 246, 248, 0.75) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.9) !important;
  border-radius: 24px !important;
  padding: 14px 22px !important;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.02),
    inset 0 1px 1px rgba(255, 255, 255, 0.8) !important;
  transition: all 0.2s ease;
  margin-bottom: 12px;
}

.row:hover {
  background: rgba(255, 255, 255, 0.95) !important;
  border-color: #ffffff !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05) !important;
  transform: translateX(2px);
}

/* ==========================================================================
   BADGES & STATUS PILLS (.st, .badge)
   Clean High-Contrast Pills
   ========================================================================== */
.st,
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px;
  border-radius: 99px;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1;
}

.st.connected,
.st-green,
.badge-ok {
  background: #E6F4EA !important;
  color: #067647 !important;
  border: 1px solid rgba(22, 163, 74, 0.15) !important;
}

.st.disconnected,
.st-red,
.badge-err {
  background: #FEE4E2 !important;
  color: #B42318 !important;
  border: 1px solid rgba(220, 38, 38, 0.15) !important;
}

.st.neutral,
.st-gray {
  background: #F0F0F2 !important;
  color: #0B0B0C !important;
  border: 1px solid rgba(0, 0, 0, 0.05) !important;
}

/* ==========================================================================
   FORM INPUTS & SELECTS (.in, .sel, textarea)
   ========================================================================== */
.in,
select.sel,
textarea {
  font-family: var(--font);
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(10px);
  border: 1.5px solid rgba(255, 255, 255, 0.95);
  border-radius: 18px;
  padding: 13px 20px;
  font-size: 14px;
  color: #0B0B0C;
  transition: all 0.18s ease;
  width: 100%;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.02);
}

.in:focus,
select.sel:focus,
textarea:focus {
  outline: none;
  background: #ffffff;
  border-color: #0B0B0C;
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.08);
}

/* ==========================================================================
   MODAL DIALOG (.modal, .mb, .mf)
   ========================================================================== */
.modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 1100;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.modal.open {
  display: flex;
}

.modal>div,
.modal .card {
  background: rgba(255, 255, 255, 0.92) !important;
  backdrop-filter: blur(30px) !important;
  -webkit-backdrop-filter: blur(30px) !important;
  border-radius: 36px !important;
  box-shadow: 0 35px 90px rgba(0, 0, 0, 0.28) !important;
  border: 3px solid rgba(255, 255, 255, 0.95) !important;
  max-width: 620px;
  width: 100%;
  overflow: hidden;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
}

.mh,
.mhead {
  padding: 26px 32px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.mh h3 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: #0B0B0C;
}

.mb {
  padding: 26px 32px;
  overflow-y: auto;
  line-height: 1.6;
}

.mf {
  padding: 20px 32px;
  background: rgba(246, 246, 248, 0.7);
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}

/* Toast Notifications */
#toasts {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 1200;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}

.toast {
  pointer-events: auto;
  background: #0B0B0C;
  color: #ffffff;
  padding: 13px 22px;
  border-radius: 99px;
  font-size: 13.5px;
  font-weight: 500;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
  display: flex;
  align-items: center;
  gap: 10px;
  animation: toastIn 0.25s ease;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.toast.suc {
  background: #067647;
}

.toast.err {
  background: #B42318;
}

.toast.inf {
  background: #0B0B0C;
}

@keyframes toastIn {
  from {
    transform: translateY(16px);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* ==========================================================================
   TABLES (.tw, table)
   ========================================================================== */
.tw {
  width: 100%;
  overflow-x: auto;
  padding: 12px 28px 28px;
}

table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13.5px;
}

table th {
  text-align: left;
  padding: 14px 18px;
  font-size: 12px;
  font-weight: 600;
  color: #71717A;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-bottom: 1.5px solid rgba(0, 0, 0, 0.06);
}

table td {
  padding: 16px 18px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
  color: #0B0B0C;
}

table tr:hover td {
  background: rgba(255, 255, 255, 0.6);
}

/* ==========================================================================
   EXECUTIVE WHATSAPP LIVE CHAT LAYOUT (.chat, .cl, .cw, .cwh, .msgs, .cinp)
   Refined Frosted Glass Web Chat Matching Image 2 & Jobgio Reference
   ========================================================================== */
.chat {
  display: flex !important;
  background: var(--bg-card) !important;
  backdrop-filter: blur(28px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(180%) !important;
  border-radius: var(--r-card) !important;
  border: 1.5px solid var(--glass-border) !important;
  box-shadow:
    0 20px 48px -6px rgba(0, 0, 0, 0.05),
    0 4px 16px rgba(0, 0, 0, 0.02),
    inset 0 1px 1.5px rgba(255, 255, 255, 1) !important;
  height: 740px !important;
  min-height: 600px !important;
  max-height: calc(100vh - 180px) !important;
  overflow: hidden !important;
  width: 100% !important;
  position: relative !important;
}

/* Left Sidebar: Conversation Threads List (.cl) */
.cl {
  width: 360px !important;
  min-width: 320px !important;
  flex: 0 0 360px !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  background: rgba(246, 246, 248, 0.8) !important;
  backdrop-filter: blur(14px) !important;
  border-right: 1.5px solid rgba(0, 0, 0, 0.05) !important;
  overflow: hidden !important;
}

.cl-search {
  padding: 16px 20px 14px !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04) !important;
  background: rgba(255, 255, 255, 0.6) !important;
  flex-shrink: 0 !important;
}

.cl-list {
  flex: 1 1 0% !important;
  overflow-y: auto !important;
  padding: 10px 8px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

/* Individual Conversation Item (.ci) */
.ci {
  padding: 14px 16px !important;
  border-radius: 20px !important;
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  cursor: pointer !important;
  transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1) !important;
  border: 1.5px solid transparent !important;
  background: transparent !important;
  margin: 2px 4px !important;
}

.ci:hover {
  background: rgba(255, 255, 255, 0.8) !important;
  border-color: rgba(255, 255, 255, 0.9) !important;
  transform: translateX(2px) !important;
}

.ci.on {
  background: rgba(255, 255, 255, 0.95) !important;
  border-color: #FFFFFF !important;
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.04),
    inset 0 1px 1px rgba(255, 255, 255, 1) !important;
}

.ci .av {
  width: 48px !important;
  height: 48px !important;
  border-radius: 99px !important;
  background: linear-gradient(180deg, #2D2D31 0%, #101012 100%) !important;
  color: #FFFFFF !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 48px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

/* Right Main Pane: Active Conversation Window (.cw) */
.cw,
.cm {
  flex: 1 1 0% !important;
  min-width: 0 !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  background: rgba(255, 255, 255, 0.5) !important;
  backdrop-filter: blur(14px) !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Chat Header (.cwh) */
.cwh {
  flex: 0 0 auto !important;
  padding: 18px 26px !important;
  background: rgba(255, 255, 255, 0.9) !important;
  backdrop-filter: blur(20px) !important;
  border-bottom: 1.5px solid rgba(0, 0, 0, 0.05) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02) !important;
}

.cwh .av {
  width: 46px !important;
  height: 46px !important;
  border-radius: 99px !important;
  background: linear-gradient(180deg, #2D2D31 0%, #101012 100%) !important;
  color: #FFFFFF !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 46px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12) !important;
}

/* Scrollable Messages Container (.msgs) */
.msgs {
  flex: 1 1 0% !important;
  min-height: 0 !important;
  height: auto !important;
  overflow-y: auto !important;
  padding: 24px 28px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  background: rgba(244, 244, 247, 0.55) !important;
}

/* Message Bubbles (.wa-bubble) */
.wa-bubble {
  padding: 14px 18px !important;
  line-height: 1.55 !important;
  font-size: 13.5px !important;
  position: relative !important;
  transition: all 0.15s ease !important;
}

.wa-bubble.cust {
  align-self: flex-start !important;
  max-width: 72% !important;
  background: #FFFFFF !important;
  color: #0B0B0C !important;
  border: 1.5px solid rgba(255, 255, 255, 0.95) !important;
  border-radius: 20px 20px 20px 6px !important;
  box-shadow:
    0 3px 12px rgba(0, 0, 0, 0.03),
    inset 0 1px 1px rgba(255, 255, 255, 1) !important;
}

.wa-bubble.bot {
  align-self: flex-end !important;
  max-width: 72% !important;
  background: linear-gradient(165deg, #2D2D31 0%, #101012 100%) !important;
  color: #FFFFFF !important;
  border: 1.5px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 20px 20px 6px 20px !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18) !important;
}

.wa-bubble.agent {
  align-self: flex-end !important;
  max-width: 72% !important;
  background: rgba(240, 240, 242, 0.95) !important;
  color: #0B0B0C !important;
  border: 1.5px solid rgba(255, 255, 255, 0.95) !important;
  border-radius: 20px 20px 6px 20px !important;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.03) !important;
}

/* Chat Input Bar (.cinp) */
.cinp {
  flex: 0 0 auto !important;
  margin-top: auto !important;
  padding: 16px 24px !important;
  background: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-top: 1.5px solid rgba(0, 0, 0, 0.05) !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.02) !important;
}

@media (max-width: 900px) {
  .chat {
    height: 600px !important;
  }

  .cl {
    width: 100% !important;
    flex: 1 1 100% !important;
  }

  .chat.open .cl {
    display: none !important;
  }

  .cw {
    display: none !important;
  }

  .chat.open .cw {
    display: flex !important;
  }
}

/* ==========================================================================
   AI SIMULATOR VIEW (.sim-grid, .phone-mockup)
   ========================================================================== */
.sim-grid {
  display: grid;
  grid-template-columns: minmax(320px, 420px) minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}

.phone-mockup {
  background: #0B0B0C;
  border-radius: 44px;
  padding: 14px;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.22);
  border: 3px solid rgba(255, 255, 255, 0.85);
}

.phone-screen {
  background: #FFFFFF;
  border-radius: 32px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.chip-btn {
  font-family: inherit;
  cursor: pointer;
  transition: all 0.15s ease;
}

.chip-btn:hover {
  background: #0B0B0C !important;
  color: #FFFFFF !important;
  border-color: #0B0B0C !important;
}

.sync-panel {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* ==========================================================================
   GRID UTILITIES (.g, .g2, .g3, .g4, .g6)
   ========================================================================== */
.g {
  display: grid;
  gap: 24px;
}

.g2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.g3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.g4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.g6 {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

/* ==========================================================================
   SUPER RESPONSIVE MOBILE OVERHAUL
   Compact, Proportional, and Pixel-Perfect Across All Mobile Screen Sizes
   ========================================================================== */
@media (max-width: 1280px) {
  .stats,
  .g6 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 1100px) {
  .slots,
  .g2,
  .sim-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .pad,
  .main {
    padding: 28px 24px 36px;
  }
}

@media (max-width: 900px) {
  html, body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    position: relative;
    padding: 0 !important;
    margin: 0 !important;
    height: auto !important;
    min-height: 100vh !important;
    max-height: none !important;
    background: #EEEEF1 !important;
    -webkit-text-size-adjust: 100%;
  }

  .shell,
  .app {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 100vh !important;
    max-height: none !important;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    overflow-x: hidden !important;
  }

  /* Sleek Modern Mobile Drawer Sidebar */
  .side,
  .sb {
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 280px !important;
    max-width: 85vw !important;
    height: 100vh !important;
    background: #FFFFFF !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35) !important;
    z-index: 1000 !important;
    transform: translateX(-105%) !important;
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1) !important;
    padding: 24px 18px 20px !important;
    gap: 16px !important;
  }

  .side.open,
  .sb.open {
    transform: translateX(0) !important;
  }

  /* Dimmed Backdrop */
  .ov {
    position: fixed !important;
    inset: 0 !important;
    background: rgba(11, 11, 12, 0.6) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
    z-index: 999 !important;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease !important;
  }

  .ov.open {
    opacity: 1 !important;
    pointer-events: auto !important;
    display: block !important;
  }

  /* Mobile Content Padding & Spacing */
  .pad,
  .main {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    overflow-y: visible !important;
    overflow-x: hidden !important;
    padding: 12px 14px 28px !important;
    gap: 14px !important;
    box-sizing: border-box !important;
  }

  #view,
  main#view {
    width: 100% !important;
    max-width: 100% !important;
    gap: 14px !important;
    overflow-x: hidden !important;
  }

  /* Sticky Top Header on Mobile */
  header.top {
    position: sticky !important;
    top: 8px !important;
    margin: 0 0 12px 0 !important;
    padding: 8px 14px !important;
    border-radius: 99px !important;
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255, 255, 255, 0.9) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
  }

  .tb-menu {
    width: 38px !important;
    height: 38px !important;
    flex: 0 0 38px !important;
    border-radius: 99px !important;
    background: #F4F4F6 !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    color: #0B0B0C !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 15px !important;
  }

  /* Infrastructure Status Banner on Mobile */
  .card.mt[style*="#0F172A"] {
    padding: 14px 16px !important;
    border-radius: 16px !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
    margin-bottom: 12px !important;
  }

  .card.mt[style*="#0F172A"] > div:last-child {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
    gap: 8px !important;
  }

  .card.mt[style*="#0F172A"] > div:last-child span {
    font-size: 11px !important;
    padding: 5px 8px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* Live Chat WhatsApp layout on mobile */
  .chat {
    height: calc(100vh - 120px) !important;
    min-height: 480px !important;
    border-radius: 16px !important;
  }

  .cl {
    width: 100% !important;
    flex: 1 1 100% !important;
  }

  .chat.open .cl {
    display: none !important;
  }

  .cw {
    display: none !important;
  }

  .chat.open .cw {
    display: flex !important;
    width: 100% !important;
  }

  .chat.open .chat-back-btn {
    display: inline-flex !important;
  }
}

@media (max-width: 768px) {
  /* Page Titles & Headers */
  h1,
  .ph h1 {
    font-size: 19px !important;
    line-height: 1.25 !important;
  }

  .ph {
    gap: 10px !important;
    margin-bottom: 0 !important;
  }

  .ph > div:first-child {
    flex: 1 1 100% !important;
    gap: 4px !important;
  }

  .ph > div:last-child {
    width: 100% !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  .ph > div:last-child .btn {
    flex: 1 1 calc(50% - 4px) !important;
    justify-content: center !important;
    font-size: 12px !important;
    min-height: 38px !important;
    height: 38px !important;
    padding: 0 10px !important;
  }

  /* Compact Symmetrical 2-Col KPI Stats Grid */
  .stats,
  .g6 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    width: 100% !important;
  }

  .stat,
  .card.sc {
    padding: 14px 10px 12px !important;
    min-height: 125px !important;
    height: auto !important;
    border-radius: 16px !important;
    gap: 2px !important;
  }

  .stat .ic,
  .card.sc .ico,
  .card.sc .sct i {
    width: 32px !important;
    height: 32px !important;
    font-size: 13px !important;
    margin-bottom: 2px !important;
  }

  .stat .val,
  .card.sc .scv,
  .card.sc b {
    font-size: 18px !important;
    margin: 1px 0 !important;
  }

  .stat .ttl,
  .card.sc .l,
  .card.sc .sct h4 {
    font-size: 11.5px !important;
    line-height: 1.2 !important;
  }

  .stat .sub,
  .card.sc .sub,
  .card.sc .sct p {
    display: none !important;
  }

  .stat .foot,
  .card.sc .scs {
    padding-top: 4px !important;
  }

  .stat-pill {
    font-size: 9.5px !important;
    padding: 2px 7px !important;
    gap: 4px !important;
  }

  /* Cards Padding Reduction */
  .card,
  article.card,
  section.card {
    padding: 16px 14px !important;
    border-radius: 18px !important;
    gap: 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Card Header */
  .ch {
    padding: 14px 16px !important;
    gap: 10px !important;
  }

  .ch-left h3 {
    font-size: 15px !important;
  }

  /* Slot Cards */
  .slots {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
    width: 100% !important;
  }

  .slots article.card,
  .slot-card {
    padding: 16px 14px !important;
    border-radius: 18px !important;
    gap: 12px !important;
  }

  .slot-card h3,
  .slot-card > div:nth-child(2) > div:last-child > div:first-child {
    font-size: 15px !important;
  }

  .slot-card .slot-info-box {
    padding: 10px 12px !important;
    border-radius: 12px !important;
    font-size: 11.5px !important;
    gap: 6px !important;
  }

  .slot-card > div:last-child {
    flex-direction: column !important;
    gap: 8px !important;
  }

  .slot-card > div:last-child .btn {
    width: 100% !important;
    justify-content: center !important;
    min-height: 38px !important;
    height: 38px !important;
  }

  /* Spreadsheet Banner */
  #spreadsheet.card {
    padding: 16px 14px !important;
    border-radius: 18px !important;
    gap: 12px !important;
  }

  #spreadsheet.card > div:last-child {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  #spreadsheet.card > div:last-child .btn {
    width: 100% !important;
    justify-content: center !important;
    font-size: 11.5px !important;
    padding: 0 8px !important;
    min-height: 36px !important;
    height: 36px !important;
  }

  /* Grid Utilities */
  .g2,
  .g3,
  .g4 {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
    width: 100% !important;
  }

  /* Tables Scrollable Wrapper */
  .tw {
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    display: block !important;
    padding: 0 !important;
  }

  .tw table {
    min-width: 500px !important;
    font-size: 12px !important;
    width: 100% !important;
  }

  .tw th,
  .tw td {
    padding: 10px 10px !important;
    white-space: nowrap !important;
  }

  /* Buttons */
  .btn {
    min-height: 38px;
    height: 38px;
    padding: 0 14px;
    font-size: 12px;
  }

  /* Form Inputs */
  .in,
  .sel {
    height: 38px !important;
    padding: 0 12px !important;
    font-size: 12.5px !important;
  }

  /* Modals on Mobile */
  .modal {
    padding: 12px !important;
    align-items: flex-end !important;
  }

  .modal .card {
    width: 100% !important;
    max-width: 100% !important;
    padding: 18px 16px !important;
    border-radius: 24px 24px 16px 16px !important;
    max-height: 85vh !important;
  }

  /* Simulator Phone on Mobile */
  .phone-mockup {
    max-width: 100% !important;
    width: 100% !important;
    border-radius: 20px !important;
  }

  .phone-screen {
    border-radius: 16px !important;
  }
}

@media (max-width: 440px) {
  .pad,
  .main {
    padding: 10px 10px 20px !important;
    gap: 12px !important;
  }

  .top-title {
    max-width: 130px !important;
  }

  .db-status-pill {
    padding: 0 8px !important;
    font-size: 11px !important;
    min-height: 32px !important;
  }

  .db-status-text {
    display: none;
  }

  h1,
  .ph h1 {
    font-size: 17px !important;
  }

  .stat .val,
  .card.sc .scv,
  .card.sc b {
    font-size: 17px !important;
  }

  .stat .ttl,
  .card.sc .l,
  .card.sc .sct h4 {
    font-size: 10.5px !important;
  }

  .stat-pill {
    font-size: 8.5px !important;
    padding: 2px 6px !important;
  }

  #spreadsheet.card > div:last-child {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* =========================================================================
   Responsive Grid Helpers for Settings & Account Management
   ========================================================================= */
@media (max-width: 900px) {
  .settings-grid {
    grid-template-columns: 1fr !important;
  }
}
@media (max-width: 640px) {
  .two-col-mobile,
  .three-col-mobile {
    grid-template-columns: 1fr !important;
  }
}