@charset "UTF-8";

/* Google Fonts — DM Sans (primary body) + Inter (fallback / legacy) */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

/* =========================================================
   KUMM KUMM — Custom Design Override Stylesheet
   =========================================================
   
   ➤ KAHAN UPLOAD: kumkum.codehouse.pk/kumkum-custom.css
   ➤ FILE PATH:    /public_html/kumkum-custom.css
   
   ➤ KAISE EDIT KARO: 
      cPanel File Manager me jao, ye file edit karo, save karo, 
      phir /index.html me ?v=1 ko ?v=2 (ya next number) karo,
      browser me Ctrl+Shift+R press karo. Done!
      
   ➤ React rebuild ki ZAROORAT NAHI hai is file me changes karne ke liye.

   ⚠️  IMPORTANT — REACT INLINE STYLES OVERRIDE KARNE KE LIYE:
      React har component pe `style={{...}}` use karta hai (inline styles),
      jo CSS rules se HIGHER specificity rakhte hain. Iska matlab:

      ❌ YE KAAM NAHI KAREGA:
         .stat-card { padding: 20px; }

      ✅ YE KAAM KAREGA:
         .stat-card { padding: 20px !important; }

      Toh React (Admin/Customer Portal) ke styles override karne ke liye
      HAMESHA `!important` lagao. Landing/Wizard PHP pages mein normal CSS chalegi.
   
   ➤ STRUCTURE:
      Section 1 — Theme Variables (yahan colors/fonts change karo)
      Section 2 — Global Overrides (universal style fixes)
      Section 3 — Bug Fixes (Settings page ke bugs)
      Section 4 — Landing Page
      Section 5 — Wizard Pages
      Section 6 — Admin Dashboard          ← React (use !important)
      Section 7 — Admin Reservations       ← React (use !important)
      Section 8 — Admin Settings           ← React (use !important)
      Section 9 — Customer Portal          ← React (use !important)
      Section 10 — Modals & Popups         ← React (use !important)
      Section 11 — Mobile / Responsive
   ========================================================= */


/* =========================================================
   🎯 NEW CLASS NAMES REFERENCE (React Admin) — added v2
   =========================================================
   Niche di gayi har class React admin par add ki gayi hai.
   Inhe target karne ke liye HAMESHA !important lagao.

   ── LAYOUT ──
   .kk-sidebar              — Left sidebar <aside>
   .kk-sidebar-logo-wrap    — Logo container in sidebar
   .kk-sidebar-logo         — The logo <img> itself
   .kk-sidebar-menu-label   — "MENU" small text
   .kk-sidebar-nav          — <nav> wrapping menu items
   .kk-nav-item             — Each menu item (Dashboard / Reservations / ...)
   .kk-nav-item-dashboard   — Specific menu item
   .kk-nav-item-reservations
   .kk-nav-item-customers
   .kk-nav-item-catalog
   .kk-nav-item-active      — Currently selected menu item (extra class)
   .kk-shopify-card         — Green "Shopify · Click to manage" card
   .kk-exit-admin           — Exit Admin button at bottom of sidebar
   .kk-topbar               — Top horizontal bar (60px tall, white bg)
   .kk-topbar-title         — Big page title in top bar
   .kk-topbar-right         — Right group (search + bell + profile)
   .kk-search-wrap          — Search input wrapper (260px)
   .kk-search-input         — The search <input> itself
   .kk-bell-btn             — Notification bell button
   .kk-profile-avatar       — Round avatar circle (with "A" letter)
   .kk-main-content         — Scrollable main area (right of sidebar)

   ── DASHBOARD ──
   .kk-eyebrow              — Small uppercase eyebrow text above titles
   .kk-dashboard-eyebrow    — "COMMAND CENTER" specifically
   .kk-page-title           — Big serif page title
   .kk-dashboard-title      — "Active Operations" specifically
   .kk-view-all-btn         — "View All Records" underlined text button
   .kk-stats-grid           — Grid container for 4 stat cards
   .kk-stat-card            — Each individual stat card
   .kk-stat-card-icon       — Coloured icon square (top-left of card)
   .kk-stat-card-value      — Big number (⃁12,450 / 34 / 8 / 142)
   .kk-stat-card-label      — Small label ("TOTAL REVENUE" / "ACTIVE RESERVATIONS")

   ── EVENT MANIFEST (table) ──
   .kk-manifest-card        — Outer white card containing the manifest
   .kk-manifest-header      — Header bar (title + LIVE UPDATES badge)
   .kk-section-title        — Reusable section title style
   .kk-manifest-title       — "Event Manifest" specifically
   .kk-live-updates         — "● LIVE UPDATES" pill
   .kk-live-dot             — Green dot inside the live pill
   .kk-table-head           — Table header row (CLIENT / EVENT, LOGISTICS, ...)
   .kk-manifest-row         — Each data row (also still has 'table-row')
   .kk-status-pill          — Status badge (CONFIRMED / PENDING / COMPLETED)
   .kk-manifest-footer      — "Showing X total operations" footer line

   ── RESERVATION DETAIL ──
   .kk-res-detail           — Outer wrapper (split layout)
   .kk-res-detail-sidebar   — Left 272px panel with tabs
   .kk-back-btn             — "← All Reservations" back button
   .kk-tab-item             — Each tab (Party Setup / Financials / ...)
   .kk-tab-item-setup       — Specific tabs
   .kk-tab-item-financials
   .kk-tab-item-timeline
   .kk-tab-item-checklist
   .kk-tab-item-guests
   .kk-tab-item-wishlist
   .kk-tab-item-comments
   .kk-tab-item-active      — Currently active tab (extra class)

   ── BUTTONS ──
   .kk-save-row             — Row containing Save Changes button (right-aligned)
   .kk-save-btn             — The actual Save Changes <button>

   ── COPY-PASTE EXAMPLES (each ends with !important) ──
   .kk-stat-card { padding: 24px !important; border-radius: 16px !important; }
   .kk-stat-card-value { font-size: 32px !important; color: #4B9D8F !important; }
   .kk-stat-card-label { letter-spacing: 2px !important; }
   .kk-topbar { background: #FAFAF7 !important; box-shadow: 0 1px 4px rgba(0,0,0,.04) !important; }
   .kk-nav-item-active { background: #E5F2F0 !important; border-radius: 8px !important; }
   .kk-status-pill { padding: 4px 12px !important; border-radius: 99px !important; font-weight: 700 !important; }
   .kk-search-input { background: #fff !important; border: 1px solid #E5E2DB !important; }
   .kk-manifest-card { border-radius: 16px !important; box-shadow: 0 2px 12px rgba(0,0,0,.03) !important; }
   .kk-page-title { font-size: 42px !important; }
   ========================================================= */



/* =========================================================
   SECTION 1 — THEME VARIABLES
   ⭐ YEH WALA SECTION EDIT KARO COLORS/FONTS CHANGE KARNE KE LIYE
   ========================================================= */
:root {
  /* ── Brand Colors ── */
  --kk-brand:        #4B9D8F;   /* Main teal — buttons, accents, active states */
  --kk-brand-hover:  #3D8478;   /* Hover state */
  --kk-brand-bg:     #E5F2F0;   /* Light teal background */
  --kk-brand-text:   #FFFFFF;   /* Text on brand color */

  /* ── Layout Colors ── */
  --kk-page-bg:      #F5F3EF;   /* Main page background (beige/cream) */
  --kk-card-bg:      #FFFFFF;   /* Card backgrounds */
  --kk-sidebar-bg:   #EDEBE5;   /* Left sidebar */
  --kk-wizard-bg:    #F9FAF7;   /* Wizard step background */
  --kk-modal-bg:     #FFFFFF;   /* Modal popup */
  --kk-overlay-bg:   rgba(0,0,0,0.5);  /* Dark overlay behind modals */

  /* ── Text Colors ── */
  --kk-text:         #1A1A1A;   /* Main text */
  --kk-text-soft:    #404040;   /* Secondary text */
  --kk-text-muted:   #9A9897;   /* Disabled/hint text */
  --kk-text-light:   #C0BDB6;   /* Very light text */

  /* ── Borders ── */
  --kk-border:       #E5E2DB;   /* Default border */
  --kk-border-soft:  #F0EDE7;   /* Soft separator */
  --kk-border-dark:  #D0CCC4;   /* Hover/active border */

  /* ── Status Colors ── */
  --kk-success:      #10B981;
  --kk-success-bg:   #F0FDF4;
  --kk-warning:      #F59E0B;
  --kk-warning-bg:   #FEF3C7;
  --kk-error:        #EF4444;
  --kk-error-bg:     #FEF2F2;
  --kk-info:         #3B82F6;
  --kk-info-bg:      #EFF6FF;

  /* ── Typography ── */
  --kk-font-sans:    'DM Sans', 'Inter', 'Saudi Riyal', 'SaudiRiyalv2', 'Saudi_Riyal', system-ui, -apple-system, sans-serif;
  --kk-font-serif:   'Playfair Display', 'Saudi Riyal', 'SaudiRiyalv2', 'Saudi_Riyal', Georgia, serif;

  --kk-font-mono:    'JetBrains Mono', Consolas, monospace;

  /* ── Spacing & Sizing ── */
  --kk-radius:       12px;       /* Default border-radius */
  --kk-radius-sm:    8px;
  --kk-radius-lg:    20px;
  --kk-radius-pill:  9999px;

  /* ── Shadows ── */
  --kk-shadow-sm:    0 1px 2px rgba(0,0,0,0.04);
  --kk-shadow:       0 4px 6px rgba(0,0,0,0.04), 0 2px 4px rgba(0,0,0,0.06);
  --kk-shadow-lg:    0 10px 25px rgba(0,0,0,0.08);

  /* ── Transitions ── */
  --kk-transition:   all 0.2s ease;
}


/* =========================================================
   SECTION 2 — GLOBAL OVERRIDES
   Universal cheezein jo har page par lagti hain
   ========================================================= */

/* Body / Page background */
body, .app, #root {
  background-color: var(--kk-page-bg) !important;
  font-family: var(--kk-font-sans) !important;
  color: var(--kk-text) !important;
}

/* ─────────────────────────────────────────────────────────
   GLOBAL FONT OVERRIDE — DM Sans everywhere
   ─────────────────────────────────────────────────────────
   React bundle uses inline `style={{fontFamily: 'Inter,sans-serif'}}`
   on many elements (search input, modals, etc). Inline styles
   beat normal CSS — but `!important` on `*` beats them.

   PRESERVED: .serif class and any element with Playfair Display
   inline (the big serif page titles like "Active Operations").
   ───────────────────────────────────────────────────────── */
*,
*::before,
*::after,
input,
textarea,
select,
button {
  font-family: var(--kk-font-sans) !important;
}

/* Keep serif headings serif */
.serif,
[style*="Playfair Display"] {
  font-family: var(--kk-font-serif) !important;
}

/* Keep monospace where intended */
code, pre, kbd, samp, [style*="monospace"] {
  font-family: var(--kk-font-mono) !important;
}

/* Brand color overrides — attribute selectors target inline styles */
[style*="#4B9D8F"]:not([style*="background"]) {
  color: var(--kk-brand) !important;
}
[style*="background:#4B9D8F"],
[style*="background: #4B9D8F"],
[style*="background-color:#4B9D8F"],
[style*="background-color: #4B9D8F"] {
  background-color: var(--kk-brand) !important;
}
[style*="border:1.5px solid #4B9D8F"],
[style*="border: 1.5px solid #4B9D8F"],
[style*="border-color:#4B9D8F"] {
  border-color: var(--kk-brand) !important;
}

/* Light teal background */
[style*="#E5F2F0"] {
  background-color: var(--kk-brand-bg) !important;
}

/* Card backgrounds */
[style*="#FFFFFF"]:not(button):not(input),
[style*="background:#fff"],
[style*="background: #fff"] {
  background-color: var(--kk-card-bg) !important;
}

/* Page bg / sidebar */
[style*="#F5F3EF"] { background-color: var(--kk-page-bg) !important; }
[style*="#EDEBE5"] { background-color: var(--kk-sidebar-bg) !important; }
[style*="#F9FAF7"] { background-color: var(--kk-wizard-bg) !important; }
[style*="#F0EDE7"] { background-color: var(--kk-border-soft) !important; }

/* Borders */
[style*="#E5E2DB"] { border-color: var(--kk-border) !important; }

/* Text colors */
[style*="color:#1A1A1A"], [style*="color: #1A1A1A"] { color: var(--kk-text) !important; }
[style*="color:#9A9897"], [style*="color: #9A9897"] { color: var(--kk-text-muted) !important; }
[style*="color:#737373"], [style*="color: #737373"] { color: var(--kk-text-soft) !important; }

/* Status colors */
[style*="#10B981"], [style*="#059669"] { color: var(--kk-success) !important; }
[style*="#EF4444"], [style*="#DC2626"] { color: var(--kk-error) !important; }
[style*="#F0FDF4"] { background-color: var(--kk-success-bg) !important; }
[style*="#FEF2F2"] { background-color: var(--kk-error-bg) !important; }

/* Buttons — global */
.btn { transition: var(--kk-transition) !important; }
.btn-dark {
  background: var(--kk-text) !important;
  color: #fff !important;
}
.btn-dark:hover:not(:disabled) {
  background: #333 !important;
  transform: translateY(-1px);
  box-shadow: var(--kk-shadow);
}
.btn-out {
  background: transparent !important;
  border: 1px solid var(--kk-border) !important;
  color: var(--kk-text) !important;
}
.btn-out:hover:not(:disabled) {
  background: var(--kk-border-soft) !important;
  border-color: var(--kk-border-dark) !important;
}

/* Serif headings */
.serif { font-family: var(--kk-font-serif) !important; }

/* Inputs */
input, textarea, select {
  font-family: var(--kk-font-sans) !important;
  transition: var(--kk-transition) !important;
}
input:focus, textarea:focus, select:focus {
  outline: 2px solid var(--kk-brand) !important;
  outline-offset: 1px;
}


/* =========================================================
   SECTION 3 — BUG FIXES (Settings Page)
   Ye sections aapke screenshots me jo bugs the unko fix karta hai
   ========================================================= */

/* ── BUG 1: Enhancements card — Shopify Product Link column squeezed ──
   Original grid: "1fr 1fr 80px 50px" (4 cols)
   Shopify column add hua but grid update nahi hua
   Fix: Override the grid to give Shopify column proper space */
[style*="gridTemplateColumns:\"1fr 1fr 80px 50px\""],
[style*="grid-template-columns:1fr 1fr 80px 50px"],
[style*="grid-template-columns: 1fr 1fr 80px 50px"] {
  grid-template-columns: 1.4fr 1.6fr 90px 1.2fr 50px !important;
  gap: 12px !important;
}

/* "Shopify Product Link" label — make sure it doesn't wrap awkwardly */
*:has(> div[style*="SHOPIFY PRODUCT LINK"]),
[style*="SHOPIFY PRODUCT LINK"] {
  min-width: 140px !important;
}

/* ── BUG 2: Theme cards — emojis floating on right edge ──
   Hide any stray emoji renders outside cards.
   Setup: any select that has lots of emoji options will sometimes
   render preview emojis on the side. We hide them via overflow. */
body > div:not([id]):not([class]) {
  pointer-events: none;
}

/* Settings page main container — ensure overflow contained */
.app > div, [class*="Settings"] {
  overflow-x: hidden;
}

/* Force select dropdowns to use the custom chevron only (kills duplicate native arrow). */
select {
  background-image: none !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
}

/* Hide floating emoji preview that appears outside cards */
body > .__emoji-preview,
.app + div:not(.modal):not(.overlay) {
  display: none !important;
}


/* =========================================================
   SECTION 4 — LANDING PAGE
   ========================================================= */
/* Landing screen background */
.app > div:first-child {
  background: linear-gradient(180deg, var(--kk-page-bg) 0%, #FAF8F4 100%) !important;
}

/* Hero serif heading */
.app h1.serif,
.app h2.serif {
  letter-spacing: -0.02em !important;
}


/* =========================================================
   SECTION 5 — WIZARD PAGES
   ========================================================= */
/* Wizard background */
[style*="background:#F9FAF7"] {
  background-color: var(--kk-wizard-bg) !important;
}

/* Step indicator dots */
[style*="borderRadius:\"50%\""][style*="background:\"#4B9D8F\""] {
  background: var(--kk-brand) !important;
  box-shadow: 0 0 0 4px var(--kk-brand-bg) !important;
}

/* Wizard cards (theme selection, package selection) */
[style*="borderRadius:14"][style*="cursor:\"pointer\""] {
  transition: var(--kk-transition) !important;
}
[style*="borderRadius:14"][style*="cursor:\"pointer\""]:hover {
  transform: translateY(-2px);
  box-shadow: var(--kk-shadow) !important;
  border-color: var(--kk-brand) !important;
}


/* =========================================================
   SECTION 6 — ADMIN DASHBOARD
   ========================================================= */
/* Stats cards */
[style*="borderRadius:18"] {
  transition: var(--kk-transition);
}

/* Sidebar nav */
[style*="background:\"#EDEBE5\""] {
  background-color: var(--kk-sidebar-bg) !important;
  border-right: 1px solid var(--kk-border) !important;
}

/* Active nav item */
[style*="color:\"#4B9D8F\""][style*="fontWeight:600"] {
  background: var(--kk-brand-bg) !important;
  border-radius: var(--kk-radius-sm) !important;
}

/* ─────────────────────────────────────────────────────────
   Stat Card Icon Replacements (Custom SVGs)
   ─────────────────────────────────────────────────────────
   Required files in /public_html/assets/:
     stat-1.svg  → Card 1 (Total Revenue)
     stat-2.svg  → Card 2 (Active Reservations)
     stat-3.svg  → Card 3 (Upcoming Parties)
     stat-4.svg  → Card 4 (Total Records / New Clients)

   How it works:
     - Hide the default lucide-react SVG inside each .kk-stat-card-icon
     - Show custom SVG as background image instead
     - Targeted by card position (nth-child) so no bundle change needed
   ───────────────────────────────────────────────────────── */

/* Hide the default lucide-react icon inside the icon box */
.kk-stats-grid > .kk-stat-card .kk-stat-card-icon > svg {
  display: none !important;
}

/* Common background settings for all 4 icon boxes */
.kk-stats-grid > .kk-stat-card .kk-stat-card-icon {
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 20px 20px !important;
}

/* Individual icon per card (1-indexed) */
.kk-stats-grid > .kk-stat-card:nth-child(1) .kk-stat-card-icon {
  background-image: url('/assets/stat-1.svg') !important;
}
.kk-stats-grid > .kk-stat-card:nth-child(2) .kk-stat-card-icon {
  background-image: url('/assets/stat-2.svg') !important;
}
.kk-stats-grid > .kk-stat-card:nth-child(3) .kk-stat-card-icon {
  background-image: url('/assets/stat-3.svg') !important;
}
.kk-stats-grid > .kk-stat-card:nth-child(4) .kk-stat-card-icon {
  background-image: url('/assets/stat-4.svg') !important;
}
.kk-stat-card-icon {
    background: #F9FAFB !important;
}
.kk-sidebar-logo-wrap img.kk-sidebar-logo {
    height: 25px !important;
}
.kk-stat-card-value {
    font-size: 30px !important;
    font-family: 'Playfair Display' !important;
    font-weight: 400 !important;
}
.kk-stat-card-label {
    font-size: 12px !important;
    font-weight: 500 !important;
}
.kk-manifest-header {
    background: #F9FAFB;
    border-radius: 20px 20px 0px 0px;
}
.kk-manifest-card {
    border-radius: 20px 20px 0px 0px !important;
}
.kk-live-updates {
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-radius: 20px;
    padding: 5px 20px;
}
/* =========================================================
   SECTION 7 — ADMIN RESERVATIONS
   ========================================================= */
/* Reservation rows */
.reservation-row,
[style*="borderBottom"][style*="cursor:\"pointer\""] {
  transition: var(--kk-transition);
}
.reservation-row:hover,
[style*="borderBottom"][style*="cursor:\"pointer\""]:hover {
  background-color: var(--kk-brand-bg) !important;
}


/* =========================================================
   SECTION 8 — ADMIN SETTINGS (Stripe / Packages / Themes / Enhancements)
   ========================================================= */

/* Settings tabs */
[class*="settings-tab"],
.app button.btn[class*="active"] {
  border-radius: var(--kk-radius-pill) !important;
}

/* Aesthetic Theme cards — fix layout, give breathing room */
[style*="Aesthetic Themes"] ~ div [style*="gridTemplateColumns"][style*="repeat(2"],
[style*="grid-template-columns:repeat(2, 1fr)"][style*="gap"] {
  gap: 18px !important;
}

/* Theme card itself */
[style*="border-radius:14"][style*="border:\"1px solid #E5E2DB\""] {
  border-radius: var(--kk-radius) !important;
  padding: 18px !important;
  background: var(--kk-card-bg) !important;
}

/* Shopify Product Link inner box (green-highlighted) */
[style*="SHOPIFY PRODUCT LINK"] {
  background: var(--kk-success-bg) !important;
  border: 1px solid #BBF7D0 !important;
  border-radius: var(--kk-radius-sm) !important;
  padding: 10px 12px !important;
}

/* Better delete buttons */
[style*="background:\"#FEE2E2\""] {
  background: var(--kk-error-bg) !important;
  border: 1px solid #FECACA !important;
  color: var(--kk-error) !important;
  transition: var(--kk-transition) !important;
}
[style*="background:\"#FEE2E2\""]:hover {
  background: #FECACA !important;
  transform: scale(1.05);
}


/* =========================================================
   SECTION 9 — CUSTOMER PORTAL
   ========================================================= */
/* Portal main card */
.portal-card,
[class*="CPDashboard"] [style*="borderRadius:18"] {
  box-shadow: var(--kk-shadow) !important;
}

/* Booking detail cards */
[class*="CPPartyDetail"] {
  background: var(--kk-card-bg);
}


/* =========================================================
   SECTION 10 — MODALS & POPUPS
   ========================================================= */
.overlay {
  background: var(--kk-overlay-bg) !important;
  backdrop-filter: blur(2px);
}
.modal {
  background: var(--kk-modal-bg) !important;
  border-radius: var(--kk-radius-lg) !important;
  box-shadow: var(--kk-shadow-lg) !important;
}

/* Toast notifications */
[style*="position:\"fixed\""][style*="bottom:24"] {
  border-radius: var(--kk-radius) !important;
  box-shadow: var(--kk-shadow-lg) !important;
}


/* =========================================================
   SECTION 11 — RESPONSIVE / MOBILE
   ========================================================= */
@media (max-width: 768px) {
  /* Reduce padding on mobile */
  .app { padding: 12px !important; }

  /* Stack settings grid on mobile */
  [style*="gridTemplateColumns:\"1fr 1fr 80px 50px\""],
  [style*="grid-template-columns:1fr 1fr 80px 50px"] {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  /* Theme cards single column */
  [style*="grid-template-columns:repeat(2, 1fr)"] {
    grid-template-columns: 1fr !important;
  }

  /* Bigger touch targets */
  button, .btn { min-height: 44px !important; }

  /* Modals full screen on mobile */
  .modal {
    max-width: 100% !important;
    margin: 8px !important;
    border-radius: var(--kk-radius) !important;
  }
}


/* =========================================================
   SECTION 12 — HIDE WELCOME BACK SCREEN + LOADING OVERLAY
   ========================================================= */

/* ── 12a. Loading Overlay for Book Wizard flow ──
   Jab user book.php se aata hai, ye overlay sab kuch chupa
   leta hai jab tak wizard kholne ka kaam complete na ho jaye. */
html.kk-loading-wizard,
html.kk-loading-wizard body {
  overflow: hidden !important;
  background: var(--kk-page-bg) !important;
}

html.kk-loading-wizard #root {
  visibility: hidden !important;
}

html.kk-loading-wizard::before {
  content: '';
  position: fixed;
  inset: 0;
  background: var(--kk-page-bg);
  z-index: 99998;
}

html.kk-loading-wizard::after {
  content: "🎉  Opening Your Wizard...";
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  font-family: var(--kk-font-serif);
  font-size: 28px;
  font-weight: 500;
  color: var(--kk-text);
  z-index: 99999;
  pointer-events: none;
  white-space: pre-wrap;
}


/* ── 12b. Hide the 3-tab role selector (Admin/Customer/Book Party) ──
   Multiple selector strategies — kuch bhi match ho, hide ho jaye.
   React inline styles convert ho ke rgb() form me aate hain DOM me. */

/* Strategy 1: Match by background color hex */
[style*="#EDEBE5"][style*="border-radius"][style*="padding: 3"],
[style*="#EDEBE5"][style*="borderRadius"],
[style*="EDEBE5"][style*="padding: 3"] {
  display: none !important;
}

/* Strategy 2: Match by RGB equivalent of #EDEBE5 (browser converts hex to rgb) */
[style*="rgb(237, 235, 229)"][style*="border-radius"],
[style*="rgb(237,235,229)"][style*="border-radius"] {
  display: none !important;
}

/* Strategy 3: Hide by parent structure - the Welcome Back card has width 420 */
.app .card[style*="width: 420"] > div[style*="border-radius: 12"][style*="padding: 3"],
.app .card[style*="width:420"]  > div[style*="border-radius: 12"][style*="padding: 3"] {
  display: none !important;
}


/* ──────────────────────────────────────────────────────────
   12d. AGGRESSIVE HIDE — React's Welcome Back / Admin Login Card
   Trigger: User clicks browser back from admin dashboard
   ────────────────────────────────────────────────────────── */

/* Hide ANY card with width 420 (React's login card) */
.app .card[style*="width: 420"],
.app .card[style*="width:420"],
.app div[style*="max-width: 420"],
.app div[style*="maxWidth: 420"],
.app div[style*="width: 420px"][style*="border-radius"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Hide login-style form structure (input fields + dark Sign In button) */
.app form:has(input[type="password"]):has(button:contains("Sign In")),
.app div:has(> input[type="password"]):has(button[style*="background: rgb(26, 26, 26)"]),
.app div:has(> input[type="password"]):has(button[style*="background:#1A1A1A"]) {
  display: none !important;
}

/* Hide standalone Sign In button text */
.app button:has(svg + text:contains("Sign In as Admin")),
.app button:has(svg + text:contains("Sign In as Customer")) {
  display: none !important;
}

/* Belt & suspenders: hide any large serif "Welcome Back" text */
.app .serif[style*="font-size: 36"]:not([style*="margin"]):empty + *,
.app h2.serif[style*="font-size: 36"] {
  /* This is too risky to blanket-hide — only inside login card */
}

/* When gatekeeper hasn't redirected yet, hide the root content briefly */
html.kk-checking #root {
  visibility: hidden;
}


/* ── 12c. Better Welcome Back card styling (in case it briefly flashes) ──
   Make it less jarring during the brief moment it might appear */
.app .card[style*="width: 420"],
.app .card[style*="width:420"] {
  transition: opacity 0.2s ease;
}


/* =========================================================
   SECTION 13 — MAX-WIDTH FIX + ELEMENT-WISE STYLING GUIDE
   ========================================================= */

/* ── 13a. Remove the max-width: 800px constraint ──
   Settings cards/divs me 800px ka constraint hat gaya */
[style*="max-width: 800px"],
[style*="max-width:800px"],
[style*="maxWidth: 800"],
[style*="maxWidth:800"] {
  max-width: none !important;
  width: 100% !important;
}

/* If you want a SPECIFIC max-width instead of fully removed, use this: */
/* [style*="max-width: 800px"] { max-width: 1200px !important; } */


/* ── 13b. ELEMENT-WISE STYLING GUIDE ──
   React inline styles use karta hai, isliye CSS class nahi hain.
   Lekin aap niche given selectors se HAR element ko style kar sakte ho.

   👉 ADMIN PORTAL ke har section ke liye selector:
*/

/* ─── Admin: Top Header Bar (Search + New Reservation) ─── */
.app > div > div[style*="display: flex"][style*="justify-content: space-between"]:first-of-type {
  /* Apni styling yahan: */
  /* background: #fff !important; */
  /* border-bottom: 1px solid #eee !important; */
}

/* ─── Admin: Left Sidebar ─── */
[style*="rgb(237, 235, 229)"][style*="width: 214"],
[style*="rgb(237, 235, 229)"][style*="width:214"] {
  /* background: #2a2a2a !important; color: #fff !important; */
}

/* ─── Admin: Main Content Container ─── */
.scroll, [class="scroll"] {
  /* padding: 40px !important; */
}

/* ─── Admin: Page Title (Settings, Dashboard, etc.) ─── */
.serif[style*="font-size: 36"],
.serif[style*="font-size:36"] {
  /* color: #4B9D8F !important; font-size: 42px !important; */
}

/* ─── Admin: Stats Cards ─── */
[style*="border-radius: 18"][style*="background: rgb(255, 255, 255)"] {
  /* box-shadow: 0 4px 12px rgba(0,0,0,.05) !important; */
}

/* ─── Admin: Settings Tabs (Stripe, Packages, Themes, Enhancements) ─── */
.app button.btn[style*="border-radius: 999"],
.app .btn[style*="borderRadius: 999"] {
  /* font-weight: 700 !important; */
}

/* ─── Admin: Settings Card (Stripe Configuration, etc) ─── */
.app > div .card[style*="padding: 32"] {
  /* border: 2px solid #E5E2DB !important; */
}

/* ─── Admin: Theme Cards (Princess, Superheroes, etc) ─── */
[style*="grid-template-columns: repeat(2, 1fr)"] > div[style*="border-radius"] {
  /* background: #fafafa !important; */
}

/* ─── Admin: Enhancements Cards (Party Tent, etc) ─── */
[style*="grid-template-columns:1fr 1fr 80px 50px"],
[style*="grid-template-columns: 1.4fr 1.6fr 90px 1.2fr 50px"] {
  /* gap: 20px !important; */
}

/* ─── Admin: Reservation Rows ─── */
[style*="border-bottom"][style*="cursor: pointer"] {
  /* padding: 16px !important; */
}

/* ─── Admin: New Reservation Button (top-right green) ─── */
button[style*="rgb(75, 157, 143)"],
button[style*="rgb(75,157,143)"] {
  /* background: #2a2a2a !important; */
}


/* 👉 BOOKING WIZARD ke har step ka selector: */

/* ─── Wizard: Top Bar (Logo + Step Title) ─── */
[style*="background: rgb(249, 250, 247)"]:first-child {
  /* background: #fff !important; */
}

/* ─── Wizard: Step Indicator (1 of 7, etc.) ─── */
[style*="rgb(75, 157, 143)"][style*="border-radius: 50%"] {
  /* width: 32px !important; height: 32px !important; */
}

/* ─── Wizard: Package Cards (Basic / Standard / Premium) ─── */
[style*="background: linear-gradient"][style*="border-radius"] {
  /* transform: scale(1.02) !important; */
}

/* ─── Wizard: Theme Selection Cards ─── */
[style*="border-radius: 14"][style*="cursor: pointer"] {
  /* border-width: 2px !important; */
}

/* ─── Wizard: Big Rentals & Enhancements Cards ─── */
[style*="border-radius: 14"] [style*="border-radius: 12"] {
  /* border: 1px solid #ccc !important; */
}

/* ─── Wizard: Goodies & Extras Pills ─── */
[style*="border-radius: 999"][style*="cursor: pointer"] {
  /* font-weight: 600 !important; */
}

/* ─── Wizard: Bottom Bar (Back / Total / Next) ─── */
[style*="position: fixed"][style*="bottom: 0"],
[style*="position:fixed"][style*="bottom:0"] {
  /* background: rgba(255,255,255,0.95) !important; backdrop-filter: blur(10px) !important; */
}

/* ─── Wizard: Next Button (black, bottom-right) ─── */
button[style*="background: rgb(26, 26, 26)"] {
  /* background: #4B9D8F !important; */
}


/* 👉 CUSTOMER PORTAL ka har section: */

/* ─── Customer: Header with name + logout ─── */
[class*="CPDashboard"] [style*="display: flex"][style*="justify-content: space-between"] {
  /* padding: 24px !important; */
}

/* ─── Customer: Booking Detail Cards ─── */
[class*="CPPartyDetail"] {
  /* box-shadow: 0 10px 30px rgba(0,0,0,0.06) !important; */
}


/* 👉 KAISE USE KARO IS GUIDE KO:
   1. Upar section dhundo jo aap edit karna chahte ho
   2. Selector ke niche jo /* ... !important; *\/ commented hai use uncomment karo
   3. Apna value daalo (color, size, padding, etc)
   4. Save → browser hard refresh (Ctrl+Shift+R)
*/


/* =========================================================
   SECTION 14 — Aapke custom styling yahan add karo
   ========================================================= */
/* Your custom rules below */


/* =========================================================
   SECTION 6.5 — EVENT MANIFEST (Figma match)
   =========================================================
   Add this whole block at the END of kumkum-custom.css.
   Bundle me ye classes pehle se add ho gayi hain (index-1f91125c.js).
   ========================================================= */

/* ── Row spacing ── */
.kk-manifest-row {
  padding: 20px 24px !important;
  align-items: center !important;
  grid-template-columns: 2fr 2fr 1fr 1fr 1fr !important;
}

/* ─────────────────────────────────────────────────────────
   CLIENT / EVENT COLUMN  (avatar + name + party + ID)
   ───────────────────────────────────────────────────────── */

/* Avatar: BLACK background, white letter (was colored) */
.kk-cell-client .kk-row-avatar-wrap > * {
  background: #1A1A1A !important;
  color: #fff !important;
  width:40px !important;
  height:40px !important;
  font-weight: 700 !important;
}

/* Name */
.kk-cell-client .kk-row-name {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #1A1A1A !important;
  margin-bottom: 2px !important;
}

/* Event name */
.kk-cell-client .kk-row-event {
  font-size: 12px !important;
  color: #6A7282 !important;
  margin-bottom: 4px !important;
}

/* ID: line */
.kk-cell-client .kk-row-id {
  font-size: 10px !important;
  color: #9A9897 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
}

/* ─────────────────────────────────────────────────────────
   LOGISTICS COLUMN  (date + time + venue)
   ───────────────────────────────────────────────────────── */

/* Date row container */
.kk-cell-logistics .kk-row-date-time {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #1A1A1A !important;
  gap: 8px !important;
  margin-bottom: 4px !important;
}

/* Calendar icon - turn GREEN (teal accent) */
.kk-cell-logistics .kk-row-date-icon svg {
  color: #4B9D8F !important;
  stroke: #4B9D8F !important;
  width: 14px !important;
  height: 14px !important;
}

/* Separator | */
.kk-cell-logistics .kk-row-sep {
  color: #D5D2CB !important;
  font-weight: 400 !important;
}

/* Clock icon (added via CSS since no lucide clock component) */
.kk-cell-logistics .kk-row-time-icon {
  display: inline-block !important;
  width: 14px !important;
  height: 14px !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%234B9D8F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><polyline points='12 6 12 12 16 14'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}

/* Venue line */
.kk-cell-logistics .kk-row-venue {
  font-size: 12px !important;
  color: #9A9897 !important;
  gap: 6px !important;
}

.kk-cell-logistics .kk-row-venue-icon svg {
  width: 12px !important;
  height: 12px !important;
}

/* ─────────────────────────────────────────────────────────
   METRICS COLUMN  (guests + wishlist items)
   ───────────────────────────────────────────────────────── */

/* Each metric: icon-circle + value/label stack */
.kk-cell-metrics .kk-metric {
  display: grid !important;
  grid-template-columns: 32px 1fr !important;
  grid-template-rows: auto auto !important;
  column-gap: 10px !important;
  row-gap: 0 !important;
  align-items: center !important;
  margin-bottom: 8px !important;
}

.kk-cell-metrics .kk-metric:last-child {
  margin-bottom: 0 !important;
}

/* Round gray icon circle */
.kk-cell-metrics .kk-metric-icon {
  grid-row: 1 / 3 !important;
  width: 32px !important;
  height: 32px !important;
  background: #F2F0EB !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.kk-cell-metrics .kk-metric-icon svg {
  width: 14px !important;
  height: 14px !important;
  color: #6A7282 !important;
  stroke: #6A7282 !important;
}

/* Big number */
.kk-cell-metrics .kk-metric-value {
  grid-column: 2 !important;
  grid-row: 1 !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #1A1A1A !important;
  line-height: 1.1 !important;
}

/* Label below number - uppercase tracked */
.kk-cell-metrics .kk-metric-label {
  grid-column: 2 !important;
  grid-row: 2 !important;
  font-size: 9px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 1.2px !important;
  color: #9A9897 !important;
}

/* Override label TEXT via pseudo (since data says "guests"/"gifts") */
.kk-cell-metrics .kk-metric-guests .kk-metric-label {
  font-size: 9px !important;          /* hide "guests" */
}
/*.kk-cell-metrics .kk-metric-guests .kk-metric-label::after {*/
/*  content: "GUESTS";*/
/*  font-size: 9px !important;*/
/*  font-weight: 600 !important;*/
/*  letter-spacing: 1.2px !important;*/
/*}*/

.kk-cell-metrics .kk-metric-gifts .kk-metric-label {
  font-size: 9px !important;          /* hide "gifts" */
}
/*.kk-cell-metrics .kk-metric-gifts .kk-metric-label::after {*/
/*  content: "WISHLIST ITEMS";*/
/*  font-size: 9px !important;*/
/*  font-weight: 600 !important;*/
/*  letter-spacing: 1.2px !important;*/
/*}*/

/* ─────────────────────────────────────────────────────────
   FINANCIALS COLUMN  (TOTAL + bar + paid)
   ───────────────────────────────────────────────────────── */

.kk-cell-financials .kk-fin-total-label {
  color: #9A9897 !important;
  font-size: 14px !important;
  letter-spacing: 1.2px !important;
  font-weight: 700 !important;
}

.kk-cell-financials .kk-fin-total-amount {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #1A1A1A !important;
}

.kk-cell-financials .kk-fin-bar {
  height: 6px !important;
  background: #F0EDE7 !important;
  border-radius: 99px !important;
  margin: 6px 0 6px !important;
}

.kk-cell-financials .kk-fin-bar-fill {
  background: #4B9D8F !important;
  border-radius: 99px !important;
}

.kk-cell-financials .kk-fin-paid {
  font-size: 12px !important;
  font-weight: 500 !important;
  color: #4B9D8F !important;
}

.kk-cell-financials .kk-fin-due {
  color: #D97706 !important;
  font-weight: 500 !important;
}

/* ─────────────────────────────────────────────────────────
   STATUS PILL  (with dot like reference)
   ───────────────────────────────────────────────────────── */

.kk-status-pill {
  padding: 5px 14px 5px 24px !important;   /* extra left space for dot */
  border-radius: 99px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  position: relative !important;
  display: inline-block !important;
}

/* Add the leading dot — colored same as text */
.kk-status-pill::before {
  content: "" !important;
  /*position: absolute !important;*/
  /*left: 11px !important;*/
  /*top: 50% !important;*/
  transform: translateY(0%) !important;
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: currentColor !important;
}

/* ─────────────────────────────────────────────────────────
   TABLE HEADER (uppercase tracked already by bundle)
   ───────────────────────────────────────────────────────── */

.kk-table-head {
  grid-template-columns: 2fr 2fr 1fr 1fr 1fr !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  color: #9A9897 !important;
  padding: 14px 24px !important;
}


/* =========================================================
   SECTION 6.6 — FINANCIALS + STATUS (Figma match v2)
   =========================================================
   Add at end of kumkum-custom.css.
   Bundle changes: index-a4f8da91.js (financials restructure
                   + per-status className)
   ========================================================= */

/* ─────────────────────────────────────────────────────────
   FINANCIALS — black bar + STAGE label + chevron
   ───────────────────────────────────────────────────────── */

/* TOTAL header (top row) */
.kk-cell-financials .kk-fin-header {
  margin-bottom: 2px !important;
  align-items: flex-end !important;
}
.kk-cell-financials .kk-fin-total-label {
  color: #6A7282 !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
.kk-cell-financials .kk-fin-total-amount {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #1A1A1A !important;
}

/* Bar — BLACK fill, light track */
.kk-cell-financials .kk-fin-bar {
  height: 6px !important;
  background: #E8E5DD !important;
  border-radius: 99px !important;
  margin: 0 0 10px !important;
  overflow: hidden !important;
}
.kk-cell-financials .kk-fin-bar-fill {
  background: #1A1A1A !important;
  border-radius: 99px !important;
}

/* If bar shows 0% (UNPAID), still hint a faint full bar */
.kk-cell-financials .kk-fin-bar:has(.kk-fin-bar-fill[style*="width: 0%"]) {
  background: #E8E5DD !important;
}

/* Bottom row container — STAGE+PAID block on left, chevron on right */
.kk-cell-financials .kk-fin-bottom {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
}

.kk-cell-financials .kk-fin-bottom-left {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  min-width: 0 !important;
  flex: 1 !important;
}

/* STAGE: XXX label */
.kk-cell-financials .kk-fin-stage {
  font-size: 10px !important;
  font-weight: 700 !important;
  color: #9A9897 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  line-height: 1.3 !important;
}
.kk-cell-financials .kk-fin-stage-value {
  color: #1A1A1A !important;
}

/* Paid amount line below stage */
.kk-cell-financials .kk-fin-paid {
  font-size: 11px !important;
  color: #1A1A1A !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
}
.kk-cell-financials .kk-fin-due {
  color: #D97706 !important;
  font-weight: 500 !important;
}

/* Chevron button on right (rounded, with chevron-down SVG inside) */
.kk-cell-financials .kk-fin-chevron {
  display:none !important;    
  flex-shrink: 0 !important;
  width: 26px !important;
  height: 26px !important;
  border-radius: 50% !important;
  background: #fff !important;
  border: 1px solid #E5E2DB !important;
  cursor: pointer !important;
  padding: 0 !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236A7282' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 14px 14px !important;
  transition: background-color .15s ease !important;
}
.kk-cell-financials .kk-fin-chevron:hover {
  background-color: #FAFAF7 !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236A7282' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") !important;
}

/* ─────────────────────────────────────────────────────────
   STATUS PILLS — per-status styling
   ─────────────────────────────────────────────────────────
   Bundle ne kk-status-pending / kk-status-confirmed /
   kk-status-completed classes add ki hain. Inline bg/color
   ko !important se override kar rahe hain.
   ───────────────────────────────────────────────────────── */

/* Base pill (compact, no padding-for-dot since now per-status) */
.kk-status-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 5px 12px !important;
  border-radius: 99px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
}

/* Remove old generic ::before dot (now handled per-status) */
.kk-status-pill::before {
  content: none !important;
}

/* ── PENDING: gray pill with CLOCK icon ── */
.kk-status-pending {
  background: #F0EDE7 !important;
  color: #6A7282 !important;
}
.kk-status-pending::before {
  content: "" !important;
  display: inline-block !important;
  width: 10px !important;
  height: 10px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10' fill='none'%3E%3Cg clip-path='url(%23clip0_375_2537)'%3E%3Cpath d='M4.99578 9.16002C7.29536 9.16002 9.15953 7.29585 9.15953 4.99627C9.15953 2.69669 7.29536 0.83252 4.99578 0.83252C2.69621 0.83252 0.832031 2.69669 0.832031 4.99627C0.832031 7.29585 2.69621 9.16002 4.99578 9.16002Z' stroke='%236A7282' stroke-width='0.83275' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M4.99609 3.33105V4.99655' stroke='%236A7282' stroke-width='0.83275' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M4.99609 6.66211H5.00026' stroke='%236A7282' stroke-width='0.83275' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_375_2537'%3E%3Crect width='9.993' height='9.993' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 11px 11px !important;
  flex-shrink: 0 !important;
}

/* ── CONFIRMED: teal pill with green DOT ── */
.kk-status-confirmed {
  background: #E5F2F0 !important;
  color: #4B9D8F !important;
}
.kk-status-confirmed::before {
  content: "" !important;
  display: inline-block !important;
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: #4B9D8F !important;
  flex-shrink: 0 !important;
}

/* ── COMPLETED: solid black, no icon ── */
.kk-status-completed {
  background: #1A1A1A !important;
  color: #fff !important;
  padding: 5px 14px !important;
}
.kk-status-completed::before {
  content: none !important;
}

/* ── CANCELLED (fallback): red pill ── */
.kk-status-cancelled {
  background: #FEE2E2 !important;
  color: #EF4444 !important;
}
.kk-status-cancelled::before {
  content: "✕" !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  flex-shrink: 0 !important;
}

/* ─────────────────────────────────────────────────────────
   COLUMN ALIGNMENT — financials & status vertically centered
   ───────────────────────────────────────────────────────── */

/* Both cells should be centered with row */
.kk-manifest-row .kk-cell-financials,
.kk-manifest-row .kk-status-pill,
.kk-manifest-row > span.kk-status-pill {
  align-self: center !important;
}

/* Status column: pill aligned to start (left) of column */
.kk-manifest-row > .kk-status-pill,
.kk-manifest-row > span:last-child {
  justify-self: start !important;
}


.kk-table-head span:last-child {
    width: 25%;
    margin-left: auto;
}
span.badge.kk-status-pill {
    margin-left: auto;
}

button.kk-view-all-btn {
    color: #72C3BD !important;
    text-decoration: none !important;
    border-bottom: 1px solid #72C3BD !important;
    padding-bottom: 5px !important;
}

/* ── FINANCIALS BAR — thinner + status-aware fill color ── */
.kk-cell-financials .kk-fin-bar {
  height: 6px !important;
  background: #E8E5DD !important;        /* light gray track */
  border-radius: 99px !important;
  margin: 0 0 10px !important;
  overflow: hidden !important;
}

/* Default = DEPOSIT PAID (partial fill) → GREEN.
   Bundle sets `width: NN%` inline, anything that isn't 100% falls here. */
.kk-cell-financials .kk-fin-bar-fill {
  background: #4B9D8F !important;        /* brand teal-green */
  border-radius: 99px !important;
  height: 100% !important;
}

/* FULLY PAID (width 100%) → BLACK.
   :has() detects exact substring "width: 100%" in inline style. */
.kk-cell-financials .kk-fin-bar:has(.kk-fin-bar-fill[style*="width: 100%"]) .kk-fin-bar-fill {
  background: #1A1A1A !important;
}

/* UNPAID (width 0%) — fill is invisible; just keep track light gray.
   Same substring trick — doesn't accidentally match "10%" / "100%". */
.kk-cell-financials .kk-fin-bar:has(.kk-fin-bar-fill[style*="width: 0%"]) {
  background: #E8E5DD !important;
}
/* =========================================================
   SECTION 6.7 — Pending icon fix + status-aware financials bar
   Pure CSS — no bundle patch needed.
   Appended LAST so it wins cascade vs earlier conflicting rules
   (specifically the old .kk-status-pill::before that draws a
   currentColor 6px round dot, which was bleeding through behind
   the alert-circle icon on pending pills).
   ========================================================= */

/* ── PENDING pill: clean alert-circle icon (kills bleed-through dot) ── */
.kk-status-pending::before {
  content: "" !important;
  display: inline-block !important;
  width: 13px !important;
  height: 13px !important;
  border-radius: 0 !important;                 /* kill 50% from old rule */
  background-color: transparent !important;    /* kill currentColor dot from old rule */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Ccircle cx='7' cy='7' r='6' stroke='%236A7282' stroke-width='1.2'/%3E%3Cpath d='M7 4v3.5' stroke='%236A7282' stroke-width='1.2' stroke-linecap='round'/%3E%3Ccircle cx='7' cy='9.6' r='0.6' fill='%236A7282'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  transform: none !important;
  flex-shrink: 0 !important;
}

/* =========================================================
   SECTION 6.8 — Locked Base Package / Theme select fields
   in Reservation Detail (Core Party Configuration)
   ========================================================= */
.kk-res-detail select:disabled {
  background: #F7F5F1 !important;
  color: #1A1A1A !important;
  cursor: not-allowed !important;
  opacity: 1 !important;                 /* kill browser default mute */
  -webkit-text-fill-color: #1A1A1A !important;  /* Safari */
  padding-right: 16px !important;         /* no chevron, reclaim right space */
}

/* Locked selects: drop the chevron icon entirely
   (Wi is rendered as the <svg> sibling right after the <select>). */
.kk-res-detail select:disabled + svg,
.kk-res-detail select:disabled ~ svg {
  display: none !important;
}


.kk-cell-client {
    align-items: flex-start !important;
}

/* =========================================================
   SECTION 6.9 — All Reservations list refinements
   - B&W avatars (match dashboard's Event Manifest look)
   - Breathing room between PENDING and UNPAID/DEPOSIT PAID pills
   ========================================================= */

/* B&W avatar — universal rule for the Pr avatar component across the admin app:
   dashboard's Event Manifest, All Reservations list, Customers list, and
   the Reservation Detail sidebar. Pr's signature is a circular div with
   inline `background:` (hashed color) AND `color:` (white) — both attribute
   markers are required to avoid over-matching other circular elements.
   Handles both serialization variants ("50%" with and without space). */
.app [style*="border-radius:50%"][style*="background"][style*="color"],
.app [style*="border-radius: 50%"][style*="background"][style*="color"] {
  background: #1A1A1A !important;
  color: #fff !important;
}

/* Column gap between cells — gives status pills space to breathe. */
.table-row {
  column-gap: 16px !important;
}



/* =========================================================
   SECTION 6.10 — Payment-notify prompt (bottom-right popup)
   Shown after Save Changes when bill went up and pending exists.
   Driven by window.kkNotifyPrompt() in index.html.
   ========================================================= */
.kk-notify-toast {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 100000;
  width: 360px;
  max-width: calc(100vw - 32px);
  background: #fff;
  border: 1px solid rgba(230, 228, 223, 0.9);
  border-radius: 14px;
  box-shadow: 0 12px 36px rgba(0,0,0,0.14);
  padding: 16px 18px 14px;
  font-family: 'Inter', sans-serif;
  color: #1A1A1A;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .22s ease, transform .22s ease;
}
.kk-notify-toast.show {
  opacity: 1;
  transform: translateY(0);
}
.kk-notify-close {
  position: absolute;
  top: 8px; right: 10px;
  background: transparent; border: 0; cursor: pointer;
  font-size: 20px; line-height: 1; color: #9A9897;
  padding: 4px 6px; border-radius: 6px;
}
.kk-notify-close:hover { background: #F7F5F1; color: #1A1A1A; }

.kk-notify-head {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 8px;
  padding-right: 24px;
}
.kk-notify-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px;
  background: #F4F8F7; color: rgba(83,160,155,1);
  border-radius: 50%;
  font-size: 14px;
  flex-shrink: 0;
}
.kk-notify-title {
  font-size: 14px; font-weight: 600; letter-spacing: 0.2px;
}

.kk-notify-body {
  font-size: 13px; line-height: 1.5; color: #4A4A4A;
  margin-bottom: 12px;
  word-break: break-word;
}
.kk-notify-body strong { color: #1A1A1A; }

.kk-notify-actions {
  display: flex; gap: 8px; justify-content: flex-end;
}
.kk-notify-btn {
  font-family: 'Inter', sans-serif;
  font-size: 12px; font-weight: 600; letter-spacing: 0.5px;
  padding: 8px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.kk-notify-no {
  background: transparent;
  border: 1px solid rgba(230, 228, 223, 0.9);
  color: #4A4A4A;
}
.kk-notify-no:hover { background: #F7F5F1; }
.kk-notify-yes {
  background: rgba(83,160,155,1);
  border: 1px solid rgba(83,160,155,1);
  color: #fff;
}
.kk-notify-yes:hover:not(:disabled) { background: #3D8478; }
.kk-notify-yes:disabled { opacity: 0.85; cursor: default; }

@media (max-width: 480px) {
  .kk-notify-toast {
    right: 12px; bottom: 12px; left: 12px;
    width: auto;
  }
}