/* =========================================================
   KALYANA360 — PREMIUM THEME OVERRIDES (standalone stylesheet)
   Loaded via <link> in index.html so it parses independently
   of the bundled App.css. Unifies the whole app to the
   maroon + antique-gold + ivory dashboard look.
   Semantic colours (green = paid/done, red = due/delete,
   amber = pending) are intentionally left untouched.
   ========================================================= */

:root {
  --k-maroon: #6e1f2e;
  --k-maroon-deep: #561722;
  --k-maroon-2: #8a1f3d;
  --k-gold: #c99a46;
  --k-gold-dark: #9a6b2c;
  --k-gold-tile: linear-gradient(145deg, #f3e3c8, #e7c98d);
}

/* ---------- SIDEBAR → deep maroon ---------- */
.app-shell .sidebar {
  background:
    linear-gradient(180deg, #6e1f2e 0%, #5a1826 55%, #49131f 100%) !important;
  box-shadow: 10px 0 35px rgba(60, 15, 24, 0.14) !important;
}
.app-shell .sidebar .brand-mark,
.app-shell .sidebar .brand-icon {
  background: linear-gradient(145deg, #e0b063, #b07f33) !important;
  color: #4a1420 !important;
}
.app-shell .sidebar .sidebar-brand h2,
.app-shell .sidebar .brand h2 { color: #fff4e6 !important; }
.app-shell .sidebar .sidebar-brand {
  justify-content: center !important;
  padding-top: 6px !important;
}
.app-shell .sidebar .sidebar-logo-full {
  display: block !important;
  width: 100% !important;
  max-width: 200px !important;
  height: auto !important;
  margin: 2px auto 4px !important;
}
.app-shell .sidebar .nav-item { color: #e9cfbe !important; }
.app-shell .sidebar .nav-item:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #fff6ec !important;
}
.app-shell .sidebar .nav-item.active {
  background:
    linear-gradient(90deg, rgba(201, 154, 70, 0.30), rgba(201, 154, 70, 0.12)) !important;
  color: #f6d9a5 !important;
  box-shadow: inset 3px 0 0 #d5a65a !important;
}
.app-shell .sidebar .user-avatar {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  flex-shrink: 0 !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  background: linear-gradient(145deg, #d5a65a, #a9772f) !important;
  color: #4a1420 !important;
}
.app-shell .sidebar .user-avatar img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 50% !important;
}
/* Centered profile chip with gold name */
.app-shell .sidebar .sidebar-user {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  gap: 9px !important;
}
.app-shell .sidebar .sidebar-user > div:not(.user-avatar) {
  width: 100% !important;
}
.app-shell .sidebar .sidebar-user .user-avatar {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  max-width: 44px !important;
  flex: 0 0 44px !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  aspect-ratio: 1 / 1 !important;
}
.app-shell .sidebar .sidebar-user strong {
  color: #f3d19a !important;
  font-size: 14px !important;
}
.app-shell .sidebar .sidebar-user span {
  color: #d8b67e !important;
}
.app-shell .sidebar .logout-button:hover { color: #f3cf98 !important; }

/* ---------- MAIN BACKGROUND ---------- */
.app-shell .main-content {
  background:
    radial-gradient(circle at 85% 0%, rgba(201, 154, 70, 0.08), transparent 26%),
    linear-gradient(180deg, #fbf8f4 0%, #f6efe8 100%) !important;
}

/* ---------- PAGE HEADINGS & EYEBROWS ---------- */
.premium-eyebrow, .eyebrow,
.vendors-kicker, .documents-kicker, .payments-eyebrow,
.settings-kicker, .settings-card-label, .website-eyebrow,
.card-label, .document-modal-kicker, .vendor-modal-kicker {
  color: var(--k-gold-dark) !important;
}
.premium-tasks-header h1, .dashboard-page .welcome h1, .guests-header h1,
.vendors-title, .documents-title, .payments-header h1,
.settings-header h1, .website-heading h1, .team-header h1 {
  color: var(--k-maroon) !important;
}

/* ---------- PRIMARY BUTTONS → maroon ---------- */
.premium-add-task-button, .primary-action, .login-button,
.documents-add-button, .vendors-add-button, .vendor-primary-button,
.payment-primary-btn, .document-primary-button, .settings-primary-button,
.premium-primary-button, .qr-action-primary {
  background: var(--k-maroon) !important;
  border-color: var(--k-maroon) !important;
  color: #fff6ec !important;
}
.premium-add-task-button:hover, .primary-action:hover, .login-button:hover,
.documents-add-button:hover, .vendors-add-button:hover, .vendor-primary-button:hover,
.payment-primary-btn:hover, .document-primary-button:hover, .settings-primary-button:hover,
.premium-primary-button:hover, .qr-action-primary:hover {
  background: var(--k-maroon-deep) !important;
}
.team-access-button {
  color: #7a541e !important;
  background: #fffaf1 !important;
  border-color: #d9c5a9 !important;
}

/* ---------- ICON / ACCENT TILES → warm gold + maroon glyph ---------- */
.premium-stat-icon, .stat-icon, .premium-heading-icon {
  background: var(--k-gold-tile) !important;
  color: var(--k-maroon) !important;
}
.payment-stat-icon.total,
.payment-avatar,
.vendors-stat:nth-child(1) .vendors-stat-icon,
.documents-stat:nth-child(1) .documents-stat-icon,
.document-icon,
.info-icon,
.team-role-card-icon,
.team-avatar {
  background: var(--k-gold-tile) !important;
  color: var(--k-maroon) !important;
}

/* ---------- ACCENT TEXT / BADGES ---------- */
.payment-vendor, .vendor-money-label, .guest-count-pill {
  color: var(--k-gold-dark) !important;
}
.vendor-category, .document-category {
  background: #f1e6d4 !important;
  color: var(--k-gold-dark) !important;
}
.task-count-pill, .progress-ring span { color: var(--k-maroon) !important; }

/* ---------- SECONDARY / ACTIVE STATES ---------- */
.payment-filters button.active {
  background: #f1e3cf !important;
  color: var(--k-maroon) !important;
}
.settings-toggle.active { background: var(--k-maroon) !important; }

/* ---------- PROGRESS RING (tasks page) ---------- */
.progress-ring {
  background:
    radial-gradient(circle at center, #fffaf5 56%, transparent 58%),
    conic-gradient(var(--k-maroon-2) 0deg, #e4c9a6 250deg, #efe4da 250deg) !important;
}

/* ---------- WEBSITE HERO → maroon ---------- */
.website-hero {
  background:
    radial-gradient(circle at 92% 20%, rgba(201,154,70,0.30), transparent 30%),
    linear-gradient(120deg, #5f1726 0%, #7e2238 52%, #a2583c 100%) !important;
}
.website-btn-primary { color: var(--k-maroon) !important; }

/* ---------- GIFT LIST ROW BUTTONS (don't stretch / wrap) ---------- */
.invitation-history-item .premium-add-task-button {
  width: auto !important;
  white-space: nowrap !important;
  padding: 0 16px !important;
  min-height: 42px !important;
  flex-shrink: 0 !important;
}
.invitation-history-item .guest-secondary-button {
  min-width: 42px !important;
  flex-shrink: 0 !important;
}

/* ---------- GUESTS PAGE ORDER: guest list first, gift section last ---------- */
.guests-page {
  display: flex !important;
  flex-direction: column !important;
}
.guests-page > .guest-gift-section {
  order: 5 !important;
}

/* ---------- EDIT MODAL: keep footer buttons always visible ---------- */
/* Cap the modal to the viewport, let the middle scroll, pin the footer. */
.guest-modal-overlay {
  align-items: center !important;
  padding: 18px !important;
}
.guest-modal {
  display: flex !important;
  flex-direction: column !important;
  max-height: 92vh !important;
  overflow: hidden !important;
}
.guest-modal .guest-modal-scroll {
  flex: 1 1 auto !important;
  overflow-y: auto !important;
  min-height: 0 !important;
}
.guest-modal .guest-modal-header,
.guest-modal .guest-modal-footer {
  flex: 0 0 auto !important;
}
.guest-modal .guest-modal-footer {
  background: #fffaf3 !important;
  border-top: 1px solid #eadfce !important;
  box-shadow: 0 -6px 18px rgba(80, 25, 35, 0.06) !important;
}

/* ---------- EDIT MODAL SECTION ORDER: Basic Details → Gift first ---------- */
.guest-edit-modal .guest-modal-scroll {
  display: flex !important;
  flex-direction: column !important;
}
.guest-edit-modal .guest-modal-scroll > .basic-details-block {
  order: -2 !important;
}
.guest-edit-modal .guest-modal-scroll > .gift-section-block {
  order: -1 !important;
}

/* ---------- LINKS / SECONDARY ACCENT ---------- */
.switch-button, .panel-header button,
.premium-card-heading span,
.premium-list-header > div:first-child > span {
  color: var(--k-gold-dark) !important;
}

/* ========================================================= */
/* MOBILE NAVIGATION — hamburger drawer                       */
/* ========================================================= */

/* Hidden on desktop */
.mobile-topbar { display: none !important; }
.sidebar-overlay { display: none !important; }

@media (max-width: 760px) {
  /* Top bar with hamburger + logo */
  .mobile-topbar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 58px !important;
    padding: 0 14px !important;
    background: linear-gradient(90deg, #6e1f2e 0%, #561722 100%) !important;
    z-index: 1200 !important;
    box-shadow: 0 2px 10px rgba(60, 15, 24, 0.18) !important;
  }
  .mobile-topbar-logo {
    height: 34px !important;
    width: auto !important;
  }
  .mobile-menu-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    border: 0 !important;
    background: transparent !important;
    color: #f3d19a !important;
    font-size: 22px !important;
    cursor: pointer !important;
    padding: 0 !important;
  }

  /* Sidebar becomes a slide-in drawer */
  .app-shell .sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    width: 82% !important;
    max-width: 300px !important;
    min-width: 0 !important;
    height: 100vh !important;
    transform: translateX(-100%) !important;
    transition: transform 0.25s ease !important;
    z-index: 1300 !important;
    overflow-y: auto !important;
    padding: 18px 14px !important;
    box-shadow: 10px 0 40px rgba(40, 10, 18, 0.35) !important;
  }
  .app-shell .sidebar.sidebar-open {
    transform: translateX(0) !important;
  }

  /* Dim background when drawer open */
  .sidebar-overlay {
    display: block !important;
    position: fixed !important;
    inset: 0 !important;
    background: rgba(30, 10, 15, 0.45) !important;
    z-index: 1250 !important;
  }

  /* Main content: full width, below the top bar */
  .app-shell .main-content {
    width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    padding-top: 72px !important;
  }

  /* Keep nav items comfortably tappable in the drawer */
  .app-shell .sidebar .sidebar-nav { flex-direction: column !important; }
  .app-shell .sidebar .nav-item {
    width: 100% !important;
    min-height: 46px !important;
  }
  .app-shell .sidebar .logout-button { display: block !important; }
}

/* ========================================================= */
/* GIFT MASTER ROW — responsive grid                          */
/* ========================================================= */
.gift-master-row {
  display: grid;
  grid-template-columns:
    minmax(150px, 1.5fr) repeat(6, minmax(70px, 0.7fr)) auto;
  gap: 12px;
  align-items: center;
}
@media (max-width: 760px) {
  .gift-master-row {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 10px !important;
  }
  .gift-master-row > div:first-child {
    grid-column: 1 / -1 !important;
  }
  .gift-master-row > div:last-child {
    grid-column: 1 / -1 !important;
    justify-content: flex-start !important;
  }
}

/* ========================================================= */
/* MOBILE: stack task / expense rows and their actions        */
/* ========================================================= */
@media (max-width: 760px) {
  .premium-task-item {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }
  .premium-task-details {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 4px 14px !important;
  }
  .premium-task-details > span { white-space: nowrap !important; }

  .budget-expense-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    width: 100% !important;
  }
  .budget-expense-actions button {
    flex: 0 0 auto !important;
    width: auto !important;
  }

  /* Gifts page top stat cards: 2 per row instead of cramped */
  .stats {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  .stats .stat-card { min-width: 0 !important; }

  /* Budget filters: stack instead of a wide fixed grid */
  .budget-filter-row {
    grid-template-columns: 1fr !important;
  }

  /* Payments stat cards: icon on top, amount on ONE line */
  .payment-stat-card {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }
  .payment-stat-value {
    white-space: nowrap !important;
    word-break: normal !important;
    font-size: 17px !important;
  }

  /* Gift summary cards (Remaining / Current / Extra): one per row */
  .gift-summary-3 {
    grid-template-columns: 1fr !important;
  }
}

/* ========================================================= */
/* TEAM — compact access/permission checkboxes (all sizes)    */
/* ========================================================= */
.team-permission-item {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 11px 13px !important;
  min-height: 0 !important;
}
.team-permission-item input[type="checkbox"] {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  flex: 0 0 18px !important;
  margin: 0 !important;
  accent-color: #6e2028 !important;
}
.team-permission-item span {
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
}
@media (max-width: 800px) {
  .team-permission-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
}
@media (max-width: 480px) {
  .team-permission-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Team modal: cap to viewport, scroll the body, keep footer (Save) visible */
.team-modal {
  display: flex !important;
  flex-direction: column !important;
  max-height: 92vh !important;
  overflow: hidden !important;
}
.team-modal-body {
  flex: 1 1 auto !important;
  overflow-y: auto !important;
  min-height: 0 !important;
}
.team-modal-header,
.team-modal-footer {
  flex: 0 0 auto !important;
}
.team-modal-footer {
  background: #fffaf3 !important;
  border-top: 1px solid #eadfce !important;
  box-shadow: 0 -6px 18px rgba(80, 25, 35, 0.06) !important;
}