/* Saavivar Matrimony - global styles */
:root {
  --sv-primary: #c1282d;
  --sv-primary-dark: #9d1d22;
  --sv-gold: #e2a63a;
  --sv-bg: #faf7f2;
  --sv-text: #3a3a3a;

  /* Re-theme Bootstrap defaults (links, badges, forms, focus rings) to brand colors.
     Must load after bootstrap.css - replaces every remaining default-blue surface. */
  --bs-primary: #c1282d;
  --bs-primary-rgb: 193, 40, 45;
  --bs-primary-bg-subtle: #f9e7e8;
  --bs-primary-border-subtle: #f0cdd0;
  --bs-primary-text-emphasis: #7b1a1d;
  --bs-link-color: #c1282d;
  --bs-link-color-rgb: 193, 40, 45;
  --bs-link-hover-color: #9d1d22;
  --bs-link-hover-color-rgb: 157, 29, 34;
}

/* Bootstrap compiles .btn-primary/.btn-outline-primary with literal hexes,
   so re-map their button-level variables explicitly. */
.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--sv-primary);
  --bs-btn-border-color: var(--sv-primary);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--sv-primary-dark);
  --bs-btn-hover-border-color: var(--sv-primary-dark);
  --bs-btn-focus-shadow-rgb: 193, 40, 45;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--sv-primary-dark);
  --bs-btn-active-border-color: var(--sv-primary-dark);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--sv-primary);
  --bs-btn-disabled-border-color: var(--sv-primary);
}
.btn-outline-primary {
  --bs-btn-color: var(--sv-primary);
  --bs-btn-border-color: var(--sv-primary);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--sv-primary);
  --bs-btn-hover-border-color: var(--sv-primary);
  --bs-btn-focus-shadow-rgb: 193, 40, 45;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--sv-primary);
  --bs-btn-active-border-color: var(--sv-primary);
  --bs-btn-disabled-color: var(--sv-primary);
  --bs-btn-disabled-border-color: var(--sv-primary);
}

body { font-family: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; color: var(--sv-text); background: var(--sv-bg); }

.brand-text { color: var(--sv-primary); font-weight: 700; letter-spacing: .4px; }
.bg-sv { background: var(--sv-primary) !important; }
.btn-sv { background: var(--sv-primary); border: none; color: #fff; }
.btn-sv:hover, .btn-sv:focus { background: var(--sv-primary-dark); color: #fff; }
.btn-sv-outline { border: 1px solid var(--sv-primary); color: var(--sv-primary); background: transparent; }
.btn-sv-outline:hover { background: var(--sv-primary); color: #fff; }
.text-sv { color: var(--sv-primary); }
.border-sv { border-color: var(--sv-primary) !important; }
.border-dashed { border: 2px dashed #ddd !important; border-radius: 12px; }

/* Theme-styled tabs */
.nav-tabs { --bs-nav-tabs-border-color:#e9dccd; }
.nav-tabs .nav-link { color:var(--sv-primary); font-weight:500; border-radius:8px 8px 0 0; }
.nav-tabs .nav-link:hover { color:var(--sv-primary-dark); border-color:#e2a63a #e9dccd transparent; }
.nav-tabs .nav-link.active { color:var(--sv-primary); font-weight:700; border-bottom-color:#fff; }

.navbar-sv { background:#fff; border-bottom:1px solid #eee; }
.navbar-sv .navbar-brand { font-size:1.25rem; }
.navbar-sv .nav-link { color:#555; font-weight:500; }
.navbar-sv .nav-link:hover { color: var(--sv-primary); }

.hero { background: linear-gradient(135deg, #7a0c10 0%, var(--sv-primary) 45%, #d8484d 100%); color:#fff; }
.hero h1 { font-weight:700; }

.stat-card { background:#fff; border-radius:12px; padding:18px; box-shadow:0 4px 16px rgba(0,0,0,.06); border:0; }
.stat-card .num { font-size:1.7rem; font-weight:700; color:var(--sv-primary); }

.card { border-radius:12px; border:0; box-shadow:0 4px 16px rgba(0,0,0,.05); }
.card .card-header { background:#fff; border-bottom:1px solid #f0ece6; font-weight:600; }

.profile-card { position:relative; overflow:hidden; }
.profile-card .photo { height:220px; object-fit:cover; width:100%; background:#eee; }
.profile-card .badge-float { position:absolute; top:10px; left:10px; }
.match-pill { background:linear-gradient(135deg,#c1282d,#e2a63a); color:#fff; border-radius:50px; padding:4px 10px; font-size:.8rem; font-weight:600; }

.section-title { font-weight:700; color:#222; }
.detail-grid dt { color:#777; font-weight:500; font-size:.9rem; }
.detail-grid dd { font-weight:600; color:#222; }

.list-group-flush .list-group-item { border-color:#f4efe9; }

.sidebar { min-height:calc(100vh - 56px); background:#fff; border-right:1px solid #eee; }
.sidebar .nav-link { color:#555; border-radius:8px; margin:2px 0; }
.sidebar .nav-link.active { background:var(--sv-primary); color:#fff; }
.sidebar .nav-link i { width:22px; }

/* ---------- App shell: full-height docking sidebar + navbar beside it ---------- */
.app-navbar { height:58px; }

.app-sidebar {
  width:260px;
  flex-shrink:0;
  position:sticky;
  top:0;
  height:100vh;
  display:flex;
  flex-direction:column;
  /* rich brand-tinted shading - deep rose into warm gold */
  background:linear-gradient(180deg, #f8d5ca 0%, #f5dcc0 50%, #efd4a9 100%);
  border-right:1px solid #e7c7a8;
  box-shadow:inset -12px 0 20px -16px rgba(158,32,38,.45), 0 0 24px rgba(193,40,45,.07);
  overflow:hidden;
  /* smooth expand/collapse */
  transition:width .25s ease, opacity .18s ease, border-color .25s ease;
}

/* Brand strip at sidebar top - same height as the navbar */
.app-sidebar-brand {
  height:58px;
  flex-shrink:0;
  display:flex;
  align-items:center;
  gap:.5rem;
  padding:0 1rem;
  border-bottom:1px solid #e9caa8;
  background:inherit;
  min-width:260px;
}
.app-sidebar-brand .brand-title {
  flex:1 1 auto;
  min-width:0;
  font-weight:700;
  letter-spacing:.4px;
  color:var(--sv-primary);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.app-sidebar-body {
  flex:1 1 auto;
  min-height:0;
  min-width:260px;
  overflow-y:auto;
}

/* Unobtrusive scrollbar matching each skin */
.app-sidebar { scrollbar-width:thin; scrollbar-color:#dcb99c transparent; }
.app-sidebar::-webkit-scrollbar { width:6px; }
.app-sidebar::-webkit-scrollbar-track { background:transparent; }
.app-sidebar::-webkit-scrollbar-thumb { background:#e0bfa2; border-radius:3px; }
.app-sidebar:hover::-webkit-scrollbar-thumb { background:#cba883; }

/* Thin courtesy footer inside the content column */
.app-footer {
  border-top:1px solid #f0e7db;
  background:#fff;
  font-size:.82rem;
  color:#8a8177;
}
.app-footer a { color:var(--sv-primary); text-decoration:none; font-weight:600; }
.app-footer a:hover { text-decoration:underline; }

.app-sidebar .nav-link { color:#555; border-radius:8px; margin:2px 0; }
.app-sidebar .nav-link:hover { color:var(--sv-primary); }
.app-sidebar .nav-link.active { background:var(--sv-primary); color:#fff; }
.app-sidebar .nav-link i { width:22px; }

/* Desktop collapse - slides closed instead of vanishing */
@media (min-width:768px) {
  body.sb-collapsed .app-sidebar {
    width:0;
    opacity:0;
    border-right-color:transparent;
    pointer-events:none;
  }
}

/* Mobile: off-canvas drawer below the navbar, hidden until toggled */
@media (max-width: 767.98px) {
  .app-sidebar {
    position:fixed;
    top:58px; bottom:0; left:0;
    width:280px;
    height:auto;
    min-height:0;
    overflow-y:auto;
    z-index:1040;
    transform:translateX(-105%);
    transition:transform .25s ease;
    box-shadow:0 0 24px rgba(0,0,0,.18);
  }
  body.sb-mobile-open .app-sidebar { transform:none; }
}

.sidebar-backdrop {
  position:fixed;
  top:58px; right:0; bottom:0; left:0;
  background:rgba(0,0,0,.45);
  z-index:1035;
  opacity:0;
  pointer-events:none;
  transition:opacity .2s ease;
}
body.sb-mobile-open .sidebar-backdrop { opacity:1; pointer-events:auto; }

#sidebarToggle { width:38px; height:38px; padding:0; display:inline-flex; align-items:center; justify-content:center; }

.auth-page { background:linear-gradient(135deg,#7a0c10,#c1282d); min-height:100vh; display:flex; align-items:center; }
.auth-card { max-width:430px; margin:auto; border-radius:16px; }

.form-step { display:none; }
.form-step.active { display:block; }
.step-indicator { display:flex; gap:6px; }
.step-dot { width:26px; height:26px; border-radius:50%; background:#ddd; color:#777; display:flex; align-items:center; justify-content:center; font-size:.8rem; font-weight:600; }
.step-dot.active { background:var(--sv-primary); color:#fff; }
.step-dot.done { background:#198754; color:#fff; }

.photo-thumb { width:120px; height:120px; object-fit:cover; border-radius:10px; border:2px solid #eee; }
.upload-box { border:2px dashed #ccc; border-radius:12px; padding:24px; text-align:center; color:#888; cursor:pointer; }
.upload-box:hover { border-color:var(--sv-primary); color:var(--sv-primary); }

/* Photo cropper (profile photo upload / edit) */
.crop-stage { position:relative; display:inline-block; max-width:100%; background:#1a1a1a; overflow:hidden; border-radius:12px; touch-action:none; cursor:crosshair; user-select:none; }
.crop-stage img { display:block; max-width:100%; max-height:420px; pointer-events:none; -webkit-user-drag:none; }
.crop-sel { position:absolute; display:none; min-width:12px; min-height:12px; border:2px solid #fff; box-shadow:0 0 0 9999px rgba(0,0,0,.55), inset 0 0 0 1px rgba(0,0,0,.4); }

.toast-container { z-index: 2000; }

/* Guest discovery pages - soft backdrop in brand shades (maroon + gold over cream) */
.guest-bg {
  background:
    radial-gradient(circle at 10% 0%, rgba(226,166,58,.12) 0%, rgba(226,166,58,0) 40%),
    radial-gradient(circle at 90% 6%, rgba(193,40,45,.09) 0%, rgba(193,40,45,0) 42%),
    radial-gradient(circle at 50% 115%, rgba(193,40,45,.07) 0%, rgba(193,40,45,0) 55%),
    linear-gradient(175deg, #fdf1ee 0%, var(--sv-bg) 48%, #fbf3e6 100%);
}

pre.json-pre { background:#f8f6f3; padding:10px; border-radius:8px; }

/* ---------- Printing ---------- */
@media print {
  /* hide app chrome everywhere */
  .app-sidebar, .app-navbar, .sidebar-backdrop, .app-footer, .d-print-none { display:none !important; }

  /* invoice-only print: plans.php?invoice=... (body.print-invoice) */
  body.print-invoice * { visibility:hidden !important; }
  body.print-invoice #invoiceCard,
  body.print-invoice #invoiceCard * { visibility:visible !important; }
  body.print-invoice #invoiceCard {
    position:absolute !important;
    left:0; top:0;
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
    border:0 !important;
    box-shadow:none !important;
  }
}