/* ============================================================
   IndiaMatch Europe — Global Stylesheet
   ──────────────────────────────────────────────────────────
   TO CHANGE THE ENTIRE COLOUR SCHEME:
   Edit ONLY the 8 hex values inside "BRAND PALETTE" below.
   Everything else (buttons, sidebar, badges, alerts, etc.)
   updates automatically through semantic tokens.
   ============================================================ */

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

:root {

  /* ══════════════════════════════════════════
     BRAND PALETTE  ←  change only these 8 values
     to re-skin the whole site
  ══════════════════════════════════════════ */

  /* Colour 1 — Primary (soft rose-red) */
  --c1:           #e8435a;
  --c1-hover:     #cf3048;
  --c1-light:     #fde8ec;
  --c1-subtle:    #fff5f7;

  /* Colour 2 — Accent (bridal orange) */
  --c2:           #e8631a;
  --c2-hover:     #c4511a;
  --c2-light:     #fdeadb;
  --c2-subtle:    #fff5ee;

  /* Colour 3 — Success / Connected (wedding gold) */
  --c3:           #c98a0a;
  --c3-hover:     #a87008;
  --c3-light:     #fdf3d0;
  --c3-subtle:    #fef9ec;

  /* Colour 4 — Info / Trust (deep burgundy) */
  --c4:           #8c1a30;
  --c4-hover:     #6e1425;
  --c4-light:     #f5dde2;
  --c4-subtle:    #fdf0f2;

  /* ══════════════════════════════════════════
     NEUTRAL PALETTE  ←  greys & whites
     (rarely need changing)
  ══════════════════════════════════════════ */

  --white-pure:      #ffffff;
  --white-warm:      #ffffff;
  --white-soft:      #f5f6fa;
  --white-cream:     #eef0f5;
  --white-pearl:     #e4e7ef;

  --grey-100:        #f0f1f5;
  --grey-200:        #dde0e8;
  --grey-300:        #c4c8d4;
  --grey-400:        #9ea3b2;
  --grey-500:        #74788d;
  --grey-600:        #505468;
  --grey-700:        #383c4e;
  --grey-800:        #242736;
  --grey-900:        #161926;

  /* Sidebar — clean white */
  --sidebar-dark:    #ffffff;
  --sidebar-deeper:  #f8f9fc;

  /* ══════════════════════════════════════════
     SEMANTIC TOKENS  ←  map roles to palette
     Change these to reassign which colour plays
     which role without touching any component.
  ══════════════════════════════════════════ */

  --primary:          var(--c1);
  --primary-hover:    var(--c1-hover);
  --primary-light:    var(--c1-light);
  --primary-subtle:   var(--c1-subtle);

  --accent:           var(--c2);
  --accent-hover:     var(--c2-hover);
  --accent-light:     var(--c2-light);
  --accent-subtle:    var(--c2-subtle);

  --success:          var(--c3);
  --success-hover:    var(--c3-hover);
  --success-light:    var(--c3-light);
  --success-subtle:   var(--c3-subtle);

  --info:             var(--c4);
  --info-hover:       var(--c4-hover);
  --info-light:       var(--c4-light);
  --info-subtle:      var(--c4-subtle);

  /* Sidebar */
  --sidebar-bg:       var(--sidebar-dark);
  --sidebar-bg-deep:  var(--sidebar-deeper);
  --sidebar-link:     rgba(15, 23, 42, .70);
  --sidebar-label:    rgba(15, 23, 42, .38);
  --sidebar-active:   rgba(232, 67, 90, .08);

  /* Layout */
  --body-bg:          var(--white-soft);
  --card-bg:          var(--white-pure);

  --text-heading:     var(--grey-900);
  --text-body:        var(--grey-700);
  --text-muted:       var(--grey-500);
  --text-placeholder: var(--grey-400);

  --border-light:     var(--grey-100);
  --border-mid:       var(--grey-200);

  --shadow-xs:        0 1px 4px  rgba(0, 0, 0, .05);
  --shadow-sm:        0 2px 12px rgba(0, 0, 0, .06);
  --shadow-md:        0 4px 24px rgba(0, 0, 0, .08);
  --shadow-auth:      0 8px 40px rgba(0, 0, 0, .12);

  --radius-xs:        6px;
  --radius-sm:        8px;
  --radius-md:        12px;
  --radius-lg:        18px;
  --radius-xl:        24px;
  --radius-pill:      50px;

  --navbar-height:    56px;
  --sidebar-width:    220px;
  --content-max:      860px;

  /* Font scale */
  --font-xs:   .75rem;
  --font-sm:   .875rem;
  --font-base: 1rem;
  --font-md:   1.125rem;
  --font-lg:   1.25rem;
  --font-xl:   1.5rem;
  --font-2xl:  2rem;

  /* Danger — distinct true red (separate from primary rose-red) */
  --danger:       #c0392b;
  --danger-hover: #a93226;
  --danger-light: #fdecea;
  --danger-subtle:#fff5f4;

  /* Chat bubble — on-brand rose for outgoing messages */
  --chat-me:      var(--c1);
  --chat-me-text: var(--white-pure);
}


/* ════════════════════════════════════════════════════════════
   BASE
════════════════════════════════════════════════════════════ */
body {
  background: var(--body-bg);
  color: var(--text-body);
  font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-size: var(--font-base);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 { color: var(--text-heading); font-weight: 600; }
p, span, li             { color: var(--text-body); }

a       { color: var(--primary); text-decoration: none; }
a:hover { color: var(--primary-hover); }


/* ════════════════════════════════════════════════════════════
   NAVBAR
════════════════════════════════════════════════════════════ */
.navbar {
  height: var(--navbar-height);
  background: var(--white-pure) !important;
  border-bottom: 1px solid var(--border-light);
  box-shadow: var(--shadow-xs);
  position: sticky;
  top: 0;
  z-index: 1030;
}

/* Subtle primary accent stripe under navbar */
.navbar::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--primary);
  opacity: .35;
  z-index: 1;
}

.navbar-brand {
  color: var(--primary) !important;
  font-weight: 700;
  letter-spacing: -.3px;
}

.navbar .text-secondary       { color: var(--grey-500) !important; }
.navbar .text-secondary:hover { color: var(--primary)  !important; }


/* ════════════════════════════════════════════════════════════
   SIDEBAR — desktop
════════════════════════════════════════════════════════════ */
.sidebar {
  position: sticky;
  top: var(--navbar-height);
  height: calc(100vh - var(--navbar-height));
  overflow-y: auto;
  background: linear-gradient(180deg, var(--sidebar-bg) 0%, var(--sidebar-bg-deep) 100%);
  border-right: 1px solid var(--border-light);
  box-shadow: 2px 0 10px rgba(0,0,0,.05);
}

@media (max-width: 767.98px) {
  .sidebar { display: none !important; }
}

.sidebar .nav-link {
  color: var(--sidebar-link);
  padding: .45rem .75rem;
  border-radius: var(--radius-sm);
  font-size: .9rem;
  transition: background .2s, color .2s;
}
.sidebar .nav-link:hover,
.sidebar .nav-link.active {
  background: var(--sidebar-active);
  color: var(--primary);
}

.sidebar .section-label {
  font-size: .7rem;
  letter-spacing: .08em;
  color: var(--sidebar-label);
  text-transform: uppercase;
  padding: .4rem .75rem 0;
}

/* ── Mobile offcanvas sidebar ───────────────────────────────── */
.mob-sidebar {
  background: linear-gradient(180deg, var(--sidebar-bg) 0%, var(--sidebar-bg-deep) 100%);
  border-right: 1px solid var(--border-light);
  box-shadow: 4px 0 20px rgba(0,0,0,.08);
  width: 260px !important;
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0; left: 0;
  height: 100%;
  z-index: 1045;
  overflow: hidden;
  transform: translateX(-100%);
  visibility: hidden;
  transition: transform .3s ease-in-out, visibility .3s;
}
.mob-sidebar.show {
  transform: translateX(0);
  visibility: visible;
}

.mob-sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .85rem 1rem;
  border-bottom: 1px solid rgba(0,0,0,.07);
  flex-shrink: 0;
}

.mob-sidebar-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: .75rem .5rem;
  display: flex;
  flex-direction: column;
}

.mob-sidebar-footer {
  flex-shrink: 0;
  padding: .5rem .5rem;
  border-top: 1px solid rgba(0,0,0,.07);
}

.mob-nav-link {
  color: var(--sidebar-link);
  padding: .5rem .75rem;
  border-radius: var(--radius-sm);
  font-size: .95rem;
  transition: background .2s, color .2s;
  text-decoration: none;
  display: block;
  width: 100%;
}
.mob-nav-link:hover,
.mob-nav-link.active {
  background: var(--sidebar-active);
  color: var(--primary);
}

.mob-section-label {
  font-size: .7rem;
  letter-spacing: .08em;
  color: var(--sidebar-label);
  text-transform: uppercase;
  padding: .4rem .75rem 0;
  display: block;
}

.mob-sidebar-progress { padding: .25rem .75rem .75rem; }


/* ════════════════════════════════════════════════════════════
   CARDS
════════════════════════════════════════════════════════════ */
.card {
  background: var(--card-bg);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}
.card-header {
  background: var(--white-soft);
  border-bottom: 1px solid var(--border-light);
  color: var(--text-heading);
  font-weight: 600;
}


/* ════════════════════════════════════════════════════════════
   BUTTONS — custom + Bootstrap overrides
════════════════════════════════════════════════════════════ */

/* Primary */
.btn-primary {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--white-pure);
  font-weight: 500;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background: var(--primary-hover) !important;
  border-color: var(--primary-hover) !important;
  color: var(--white-pure) !important;
}
.btn-outline-primary {
  color: var(--primary);
  border-color: var(--primary);
}
.btn-outline-primary:hover {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--white-pure);
}

/* Bootstrap success → our green */
.btn-success {
  background: var(--success) !important;
  border-color: var(--success) !important;
  color: var(--white-pure) !important;
  font-weight: 500;
}
.btn-success:hover,
.btn-success:focus,
.btn-success:active {
  background: var(--success-hover) !important;
  border-color: var(--success-hover) !important;
  color: var(--white-pure) !important;
}
.btn-outline-success {
  color: var(--success) !important;
  border-color: var(--success) !important;
}
.btn-outline-success:hover {
  background: var(--success) !important;
  border-color: var(--success) !important;
  color: var(--white-pure) !important;
}

/* Bootstrap warning → our orange */
.btn-warning {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: var(--white-pure) !important;
  font-weight: 500;
}
.btn-warning:hover,
.btn-warning:focus,
.btn-warning:active {
  background: var(--accent-hover) !important;
  border-color: var(--accent-hover) !important;
  color: var(--white-pure) !important;
}

/* Bootstrap danger → true red (distinct from primary rose-red) */
.btn-danger {
  background: var(--danger) !important;
  border-color: var(--danger) !important;
  color: var(--white-pure) !important;
}
.btn-danger:hover,
.btn-danger:focus {
  background: var(--danger-hover) !important;
  border-color: var(--danger-hover) !important;
  color: var(--white-pure) !important;
}
.btn-outline-danger {
  color: var(--danger) !important;
  border-color: var(--danger) !important;
}
.btn-outline-danger:hover {
  background: var(--danger) !important;
  border-color: var(--danger) !important;
  color: var(--white-pure) !important;
}

/* Bootstrap info → our dark green */
.btn-info {
  background: var(--info) !important;
  border-color: var(--info) !important;
  color: var(--white-pure) !important;
}
.btn-info:hover {
  background: var(--info-hover) !important;
  border-color: var(--info-hover) !important;
  color: var(--white-pure) !important;
}

/* Connect / accent button */
.btn-connect,
.btn-accent {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--white-pure);
  font-weight: 500;
  border-radius: var(--radius-pill);
}
.btn-connect:hover,
.btn-accent:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: var(--white-pure);
}

/* Ghost */
.btn-ghost {
  background: var(--white-cream);
  border-color: var(--border-mid);
  color: var(--text-body);
}
.btn-ghost:hover {
  background: var(--white-pearl);
  border-color: var(--grey-300);
  color: var(--text-heading);
}


/* ════════════════════════════════════════════════════════════
   BADGES — Bootstrap overrides
════════════════════════════════════════════════════════════ */
.bg-success { background-color: var(--success) !important; }
.bg-warning { background-color: var(--accent)  !important; }
.bg-danger  { background-color: var(--danger)  !important; }
.bg-info    { background-color: var(--info)    !important; }

.text-success { color: var(--success) !important; }
.text-warning { color: var(--accent)  !important; }
.text-danger  { color: var(--danger)  !important; }
.text-info    { color: var(--info)    !important; }

/* Custom semantic badges */
.badge-primary { background: var(--c1-light);  color: var(--c1-hover);  border-radius: var(--radius-pill); font-weight: 600; }
.badge-accent  { background: var(--c2-light);  color: var(--c2-hover);  border-radius: var(--radius-pill); font-weight: 600; }
.badge-success { background: var(--c3-light);  color: var(--c3-hover);  border-radius: var(--radius-pill); font-weight: 600; }
.badge-info    { background: var(--c4-light);  color: var(--c4-hover);  border-radius: var(--radius-pill); font-weight: 600; }
.badge-grey    { background: var(--grey-100);  color: var(--grey-600);  border-radius: var(--radius-pill); font-weight: 600; }


/* ════════════════════════════════════════════════════════════
   FORM CONTROLS
════════════════════════════════════════════════════════════ */
.form-control,
.form-select {
  background: var(--white-pure);
  border-color: var(--border-mid);
  color: var(--text-body);
  border-radius: var(--radius-sm);
}
.form-control::placeholder { color: var(--text-placeholder); }
.form-control:focus,
.form-select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-light);
  background: var(--white-pure);
  color: var(--text-heading);
}
.form-label {
  color: var(--text-heading);
  font-weight: 500;
  font-size: .9rem;
}
.form-check-input:checked {
  background-color: var(--primary);
  border-color: var(--primary);
}
.form-check-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-light);
}


/* ════════════════════════════════════════════════════════════
   NAV TABS
════════════════════════════════════════════════════════════ */
.nav-tabs .nav-link {
  color: var(--text-muted);
  border-color: transparent;
}
.nav-tabs .nav-link:hover {
  color: var(--primary);
  border-color: transparent;
}
.nav-tabs .nav-link.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
  font-weight: 600;
}


/* ════════════════════════════════════════════════════════════
   PROGRESS BAR
════════════════════════════════════════════════════════════ */
.progress {
  background: var(--grey-100);
  border-radius: var(--radius-pill);
}
.progress-bar {
  background: linear-gradient(90deg, var(--accent) 0%, var(--primary) 100%);
  border-radius: var(--radius-pill);
}


/* ════════════════════════════════════════════════════════════
   AVATARS & PHOTOS
════════════════════════════════════════════════════════════ */
.avatar-sm   { width: 48px;  height: 48px;  object-fit: cover; border-radius: 50%; border: 2px solid var(--white-pearl); }
.avatar-lg   { width: 100px; height: 100px; object-fit: cover; border-radius: 50%; border: 3px solid var(--white-pearl); }
.photo-thumb { width: 100px; height: 100px; object-fit: cover; border-radius: var(--radius-sm); border: 1px solid var(--border-light); }


/* ════════════════════════════════════════════════════════════
   CHAT BUBBLES
════════════════════════════════════════════════════════════ */
.msg-bubble-me {
  background: var(--chat-me);
  color: var(--chat-me-text);
  border-radius: 18px 18px 4px 18px;
}
.msg-bubble-them {
  background: var(--white-pure);
  color: var(--text-body);
  border-radius: 18px 18px 18px 4px;
  border: 1px solid var(--border-mid);
}


/* ════════════════════════════════════════════════════════════
   AUTH PAGES
════════════════════════════════════════════════════════════ */
.auth-body {
  background: linear-gradient(150deg,
    var(--white-pure) 0%,
    var(--white-soft) 100%);
  min-height: 100vh;
}
.auth-card {
  border: 1px solid var(--border-light);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-auth);
  background: var(--white-pure);
}
.brand-title { color: var(--primary); }


/* ════════════════════════════════════════════════════════════
   ALERTS — Bootstrap overrides
════════════════════════════════════════════════════════════ */
.alert-success {
  background: var(--success-light);
  border-color: var(--success);
  color: var(--success-hover);
}
.alert-danger {
  background: var(--primary-light);
  border-color: var(--primary);
  color: var(--primary-hover);
}
.alert-warning {
  background: var(--accent-light);
  border-color: var(--accent);
  color: var(--accent-hover);
}
.alert-info {
  background: var(--info-light);
  border-color: var(--info);
  color: var(--info-hover);
}


/* ════════════════════════════════════════════════════════════
   MATCH STATUS PILLS
════════════════════════════════════════════════════════════ */
.match-status-connected {
  background: var(--success-light);
  color: var(--success-hover);
  border-radius: var(--radius-pill);
  font-size: .75rem; padding: 2px 10px; font-weight: 600;
}
.match-status-pending {
  background: var(--accent-light);
  color: var(--accent-hover);
  border-radius: var(--radius-pill);
  font-size: .75rem; padding: 2px 10px; font-weight: 600;
}
.match-status-new {
  background: var(--info-light);
  color: var(--info-hover);
  border-radius: var(--radius-pill);
  font-size: .75rem; padding: 2px 10px; font-weight: 600;
}


/* ════════════════════════════════════════════════════════════
   DIVIDERS & SURFACES
════════════════════════════════════════════════════════════ */
hr { border-color: var(--border-light); opacity: 1; }

.surface {
  background: var(--white-soft);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
}
.surface-raised {
  background: var(--white-pure);
  border: 1px solid var(--border-mid);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
}


/* ════════════════════════════════════════════════════════════
   DROPDOWN
════════════════════════════════════════════════════════════ */
.dropdown-menu {
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  background: var(--white-pure);
}
.dropdown-item            { color: var(--text-body);    font-size: .9rem; }
.dropdown-item:hover      { background: var(--white-soft); color: var(--text-heading); }
.dropdown-divider         { border-color: var(--border-light); }


/* ════════════════════════════════════════════════════════════
   UTILITY COLOUR HELPERS
════════════════════════════════════════════════════════════ */
.text-brand         { color: var(--primary) !important; }
.text-accent        { color: var(--accent)  !important; }
.text-success-brand { color: var(--success) !important; }
.text-info-brand    { color: var(--info)    !important; }
.text-heading       { color: var(--text-heading) !important; }
.text-body-soft     { color: var(--text-muted)   !important; }

.bg-soft          { background: var(--white-soft)  !important; }
.bg-cream         { background: var(--white-cream) !important; }
.bg-primary-subtle { background: var(--c1-subtle)  !important; }
.bg-accent-subtle  { background: var(--c2-subtle)  !important; }
.bg-success-subtle { background: var(--c3-subtle)  !important; }
.bg-info-subtle    { background: var(--c4-subtle)  !important; }

.border-light { border-color: var(--border-light) !important; }
.border-mid   { border-color: var(--border-mid)   !important; }

/* Content max-width — apply to main content columns */
.content-col { max-width: var(--content-max); }


/* ════════════════════════════════════════════════════════════
   SIDEBAR — Contact Support special link
════════════════════════════════════════════════════════════ */
.nav-support,
.mob-nav-support {
  background: var(--primary-subtle) !important;
  color: var(--primary) !important;
  border: 1px solid var(--primary-light);
  border-radius: var(--radius-sm);
  font-weight: 500;
  margin-top: .25rem;
}
.nav-support:hover,
.mob-nav-support:hover,
.nav-support.active,
.mob-nav-support.active {
  background: var(--primary-light) !important;
  color: var(--primary-hover) !important;
}


/* ════════════════════════════════════════════════════════════
   STAT CARD ICON
════════════════════════════════════════════════════════════ */
.stat-icon-circle {
  width: 44px; height: 44px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
}