/*
  keen_polish.css
  Purpose: Koovira / Our Sope visual polish + theme overrides
  - Adds brand + module color system on top of Metronic / Bootstrap
  - Keeps vendor bundles untouched (all overrides live here)
*/

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  touch-action: manipulation;
}

body,
a,
button,
input,
select,
textarea,
label {
  touch-action: manipulation;
}

/*
 * 1. Global Brand + Typography System (Light)
 * --------------------------------------------------
 * This layer defines brand variables and maps them onto
 * Bootstrap tokens so all existing components inherit
 * the new palette automatically.
 */

:root,
[data-bs-theme="light"] {
  /* Brand identity */
  --brand-primary:   #6B6EEB; /* Indigo / Soft Violet */
  --brand-secondary: #4F46E5; /* Deeper Indigo */

  /* Backgrounds */
  --bg-main: #F7F8FC; /* App shell background */
  --bg-card: #FFFFFF; /* Cards / surfaces */
  --bg-soft: #EEF0FF; /* Soft indigo tint for sections */

  /* Text colors */
  --text-primary:   #0F172A;
  --text-secondary: #64748B;
  --text-muted:     #94A3B8;

  /* Feedback colors (aligned with design brief) */
  --kv-success: #10B981;
  --kv-warning: #F59E0B;
  --kv-danger:  #EF4444;

  /* Map onto Bootstrap tokens so existing UI picks them up */
  --bs-primary:           var(--brand-primary);
  --bs-primary-rgb:       107,110,235;
  --bs-secondary:         var(--brand-secondary);
  --bs-secondary-rgb:     79,70,229;

  --bs-success:           var(--kv-success);
  --bs-success-rgb:       16,185,129;
  --bs-warning:           var(--kv-warning);
  --bs-warning-rgb:       245,158,11;
  --bs-danger:            var(--kv-danger);
  --bs-danger-rgb:        239,68,68;

  /* Text + backgrounds */
  --bs-body-bg:           var(--bg-main);
  --bs-body-bg-rgb:       247,248,252;
  --bs-body-color:        var(--text-primary);
  --bs-heading-color:     var(--text-primary);
  --bs-secondary-color:   var(--text-secondary);
  --bs-tertiary-color:    var(--text-muted);

  --bs-link-color:        var(--brand-primary);
  --bs-link-hover-color:  #4F46E5;

  /* Cards / borders */
  --bs-card-bg:           var(--bg-card);
  --bs-border-color:      #E5E7EB;

  --bs-font-sans-serif: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --bs-body-font-family: var(--bs-font-sans-serif);
  --bs-body-font-size: clamp(0.94rem, 0.90rem + 0.25vw, 1rem);
  --bs-body-line-height: 1.6;
  --bs-body-font-weight: 400;

  --bs-border-radius: 0.85rem;
  --bs-border-radius-sm: 0.65rem;
  --bs-border-radius-lg: 1rem;
  --bs-border-radius-xl: 1.25rem;

  --bs-box-shadow-sm: 0 8px 20px rgba(15, 23, 42, 0.06);
  --bs-box-shadow: 0 14px 30px rgba(15, 23, 42, 0.08);
  --bs-box-shadow-lg: 0 22px 50px rgba(15, 23, 42, 0.12);

  --bs-focus-ring-width: 0.22rem;
  --bs-focus-ring-color: rgba(107, 110, 235, 0.25);
}

/*
 * Theme Packs (No Flow Change)
 * Select via: document.documentElement.dataset.kvTheme = 'corporate_blue' | ...
 */

:root[data-kv-theme="corporate_blue"],
[data-kv-theme="corporate_blue"] {
  --brand-primary:   #2563EB;
  --brand-secondary: #1D4ED8;
  --bg-main: #F7F9FF;
  --bg-soft: rgba(37, 99, 235, 0.10);
}

:root[data-kv-theme="clean_green"],
[data-kv-theme="clean_green"] {
  --brand-primary:   #16A34A;
  --brand-secondary: #15803D;
  --bg-main: #F6FFFA;
  --bg-soft: rgba(22, 163, 74, 0.10);
}

:root[data-kv-theme="premium_dark_gold"],
[data-kv-theme="premium_dark_gold"] {
  --brand-primary:   #D4AF37;
  --brand-secondary: #B8860B;
  --bg-main: #0B0F1A;
  --bg-card: #111827;
  --bg-soft: rgba(212, 175, 55, 0.10);
  --text-primary: #F9FAFB;
  --text-secondary: #E5E7EB;
  --text-muted: #9CA3AF;
}

:root[data-kv-theme="diwali"],
[data-kv-theme="diwali"] {
  --brand-primary:   #F59E0B;
  --brand-secondary: #1E3A8A;
  --bg-main: #FFF7ED;
  --bg-soft: rgba(245, 158, 11, 0.10);
}

:root[data-kv-theme="holi"],
[data-kv-theme="holi"] {
  --brand-primary:   #EC4899;
  --brand-secondary: #22C55E;
  --bg-main: #FFF1F2;
  --bg-soft: rgba(236, 72, 153, 0.10);
}

:root[data-kv-theme="navratri"],
[data-kv-theme="navratri"] {
  --brand-primary:   #7C3AED;
  --brand-secondary: #F59E0B;
  --bg-main: #FAF5FF;
  --bg-soft: rgba(124, 58, 237, 0.10);
}

:root[data-kv-theme="independence_day"],
[data-kv-theme="independence_day"] {
  --brand-primary:   #F97316;
  --brand-secondary: #16A34A;
  --bg-main: #FFFBEB;
  --bg-soft: rgba(249, 115, 22, 0.10);
}

:root[data-kv-theme="republic_day"],
[data-kv-theme="republic_day"] {
  --brand-primary:   #2563EB;
  --brand-secondary: #F97316;
  --bg-main: #F8FAFC;
  --bg-soft: rgba(37, 99, 235, 0.10);
}

.kv-neg-card {
  background: linear-gradient(135deg, #10b981 0%, #3b82f6 100%);
  color: #ffffff;
}

.btn-kv-neg {
  background: linear-gradient(135deg, #10b981 0%, #3b82f6 100%);
  border: none;
  color: #ffffff !important;
}

.btn-kv-neg:hover {
  filter: brightness(0.95);
}

/*
 * 2. Global Brand + Typography System (Dark)
 * --------------------------------------------------
 * Dark mode uses deeper backgrounds but keeps the same
 * accent colors so modules "pop" consistently.
 */

[data-bs-theme="dark"] {
  --bg-main: #0B0F1A;  /* Shell */
  --bg-card: #111827;  /* Cards */
  --bg-soft: #111827;

  --text-primary:   #F9FAFB;
  --text-secondary: #E5E7EB;
  --text-muted:     #9CA3AF;

  --bs-body-bg:       var(--bg-main);
  --bs-body-bg-rgb:   11,15,26;
  --bs-body-color:    var(--text-primary);
  --bs-heading-color: var(--text-primary);

  /* Keep same accent hues but allow a little extra glow */
  --bs-primary:       var(--brand-primary);
  --bs-secondary:     var(--brand-secondary);

  --bs-card-bg:       var(--bg-card);
  --bs-border-color:  #1F2937;

  --bs-font-sans-serif: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --bs-body-font-family: var(--bs-font-sans-serif);
  --bs-body-font-size: clamp(0.94rem, 0.90rem + 0.25vw, 1rem);
  --bs-body-line-height: 1.65;

  --bs-border-radius: 0.85rem;
  --bs-border-radius-sm: 0.65rem;
  --bs-border-radius-lg: 1rem;
  --bs-border-radius-xl: 1.25rem;

  --bs-box-shadow-sm: 0 10px 26px rgba(0, 0, 0, 0.22);
  --bs-box-shadow: 0 18px 44px rgba(0, 0, 0, 0.30);
  --bs-box-shadow-lg: 0 28px 70px rgba(0, 0, 0, 0.38);

  --bs-focus-ring-width: 0.22rem;
  --bs-focus-ring-color: rgba(107, 110, 235, 0.28);
}

body {
  font-family: var(--bs-body-font-family);
  font-size: var(--bs-body-font-size);
  line-height: var(--bs-body-line-height);
}

h1, .h1 { font-size: clamp(1.55rem, 1.25rem + 1.2vw, 2.2rem); letter-spacing: -0.02em; }
h2, .h2 { font-size: clamp(1.35rem, 1.14rem + 0.9vw, 1.85rem); letter-spacing: -0.02em; }
h3, .h3 { font-size: clamp(1.2rem, 1.05rem + 0.7vw, 1.55rem); letter-spacing: -0.015em; }
h4, .h4 { font-size: clamp(1.08rem, 0.98rem + 0.45vw, 1.3rem); letter-spacing: -0.01em; }
h5, .h5 { font-size: 1.02rem; }
h6, .h6 { font-size: 0.95rem; }

.card,
.card.card-flush {
  border-radius: var(--bs-border-radius-lg);
  box-shadow: var(--bs-box-shadow-sm);
}

.btn {
  --bs-btn-border-radius: var(--bs-border-radius);
  --bs-btn-padding-y: 0.6rem;
  --bs-btn-padding-x: 1rem;
  min-height: 42px;
}

.btn.btn-sm {
  min-height: 36px;
}

.form-control,
.form-select,
.input-group-text {
  border-radius: var(--bs-border-radius);
}

.form-control:focus,
.form-select:focus {
  box-shadow: 0 0 0 var(--bs-focus-ring-width) var(--bs-focus-ring-color);
}

.badge {
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 0.32rem 0.6rem;
  font-size: 0.75rem;
  border: 1px solid transparent;
}

.badge.bg-light,
.badge.bg-light.text-dark {
  background: rgba(100, 116, 139, 0.12) !important;
  color: #475569 !important;
  border-color: rgba(100, 116, 139, 0.20) !important;
}

[data-bs-theme="dark"] .badge.bg-light,
[data-bs-theme="dark"] .badge.bg-light.text-dark {
  background: rgba(148, 163, 184, 0.14) !important;
  color: #E5E7EB !important;
  border-color: rgba(148, 163, 184, 0.22) !important;
}

@media (max-width: 576px) {
  .btn {
    --bs-btn-padding-y: 0.65rem;
    --bs-btn-padding-x: 1rem;
    min-height: 44px;
  }
  .container,
  .container-fluid {
    padding-left: 14px;
    padding-right: 14px;
  }
  body {
    padding-bottom: 76px;
  }
}

.kv-bottom-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1030;
  background: color-mix(in srgb, var(--bs-card-bg) 92%, transparent 8%);
  border-top: 1px solid var(--bs-border-color);
  backdrop-filter: blur(10px);
}

.kv-bottom-nav .kv-bottom-nav-inner {
  display: flex;
  justify-content: space-around;
  gap: 6px;
  padding: 10px 10px calc(10px + env(safe-area-inset-bottom));
}

.kv-bottom-nav .kv-bottom-nav-item {
  flex: 1 1 0;
  text-decoration: none;
  color: color-mix(in srgb, var(--bs-body-color) 70%, transparent 30%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 6px;
  border-radius: 14px;
  min-height: 52px;
}

/* The Settings item is a real <button> (opens the quick-settings sheet), not an
   <a> like its siblings — reset the browser's default button box/border/font
   so it matches the others instead of rendering oversized. */
.kv-bottom-nav button.kv-bottom-nav-item {
  border: none;
  background: transparent;
  font: inherit;
  margin: 0;
  cursor: pointer;
  width: auto;
}

.kv-bottom-nav .kv-bottom-nav-item svg {
  width: 22px;
  height: 22px;
  display: block;
}

.kv-bottom-nav .kv-bottom-nav-item .kv-bottom-nav-label {
  font-size: 11px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.kv-bottom-nav .kv-bottom-nav-item.kv-active {
  color: var(--bs-primary);
  background: color-mix(in srgb, var(--bs-primary) 10%, transparent 90%);
}

.kv-tour-highlight {
  outline: 3px solid color-mix(in srgb, var(--bs-primary) 55%, transparent 45%);
  outline-offset: 3px;
  border-radius: 14px;
}

.kv-tour-sheet {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom));
  z-index: 2000;
  background: color-mix(in srgb, var(--bs-card-bg) 92%, transparent 8%);
  border: 1px solid var(--bs-border-color);
  border-radius: 18px;
  box-shadow: var(--bs-box-shadow);
  backdrop-filter: blur(10px);
  padding: 14px;
}

.kv-tour-sheet .kv-tour-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}

.kv-tour-sheet .kv-tour-avatar {
  width: 44px;
  height: 44px;
  border-radius: 16px;
  object-fit: cover;
  object-position: center 18%;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.20));
  -webkit-mask-image: radial-gradient(circle at 50% 45%, #000 66%, transparent 100%);
  mask-image: radial-gradient(circle at 50% 45%, #000 66%, transparent 100%);
}

.kv-tour-sheet .kv-tour-title {
  font-weight: 900;
  letter-spacing: -0.02em;
  margin: 0 0 2px;
}

.kv-character {
  display: block;
  max-width: 100%;
  height: auto;
  user-select: none;
  pointer-events: none;
  filter: drop-shadow(0 18px 28px rgba(15, 23, 42, 0.18));
  -webkit-mask-image: radial-gradient(circle at 50% 48%, #000 68%, transparent 100%);
  mask-image: radial-gradient(circle at 50% 48%, #000 68%, transparent 100%);
}

.kv-character.kv-character-soft {
  opacity: 0.92;
  filter: drop-shadow(0 16px 26px rgba(15, 23, 42, 0.16));
}

.kv-character-wrap {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.kv-character-abs {
  position: absolute;
  z-index: 0;
}

.kv-character-front {
  position: relative;
  z-index: 1;
}

.kv-app-main-characters {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  /* Decorative mascots are absolutely positioned and can extend past the right
     edge (e.g. on addfriends/groups/pages/realestate) — clip them to this
     full-bleed layer so they never create a horizontal scrollbar. */
  overflow: hidden;
}

#kt_app_main {
  position: relative;
}

#kt_app_main > :not(.kv-app-main-characters) {
  position: relative;
 /* z-index: 1;*/
}

.kv-app-main-characters .kv-character {
  pointer-events: none;
}

.kv-dash-character {
  top: -5px;
  right: -120px;
  width: 420px;
  opacity: 0.22;
  transform: rotate(4deg);
  -webkit-mask-image: none;
  mask-image: none;
}

@media (max-width: 991.98px) {
  .kv-dash-character {
    width: 320px;
    right: -130px;
    opacity: 0.18;
  }
}

@media (max-width: 575.98px) {
  .kv-dash-character {
    width: 220px;
    top: 6px;
    right: -40px;
    opacity: 0.14;
  }
}

.kv-auth-character {
  width: min(520px, 52vw);
  right: -160px;
  bottom: -130px;
  opacity: 0.85;
  transform: rotate(-8deg);
  -webkit-mask-image: none;
  mask-image: none;
}

@media (max-width: 991.98px) {
  .kv-auth-character {
    display: none;
  }
}

.kv-intro-character {
  top: 10px;
  right: -50px;
  width: 380px;
  opacity: 0.18;
  transform: rotate(4deg);
  -webkit-mask-image: none;
  mask-image: none;
}

@media (max-width: 767.98px) {
  .kv-intro-character {
    width: 260px;
    top: 8px;
    right: -50px;
    opacity: 0.14;
  }
}

.kv-modal-character {
  top: -10px;
  right: -120px;
  width: 320px;
  opacity: 0.12;
  transform: rotate(6deg);
  -webkit-mask-image: none;
  mask-image: none;
}

@media (max-width: 575.98px) {
  .kv-modal-character {
    width: 240px;
    right: -70px;
    opacity: 0.10;
  }
}

.kv-tour-sheet .kv-tour-desc {
  color: color-mix(in srgb, var(--bs-body-color) 60%, transparent 40%);
  margin: 0;
  font-size: 0.95rem;
}

.kv-tour-sheet .kv-tour-actions {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}

.kv-tour-sheet .kv-tour-actions .btn {
  flex: 1 1 0;
}

@media (prefers-reduced-motion: reduce) {
  .kv-skeleton {
    animation: none;
  }
}

.kv-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0.35rem 0.6rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  border: 1px solid transparent;
}

.kv-chip.kv-chip-primary { background: rgba(107,110,235,0.12); color: var(--bs-primary); border-color: rgba(107,110,235,0.20); }
.kv-chip.kv-chip-success { background: rgba(16,185,129,0.12); color: var(--bs-success); border-color: rgba(16,185,129,0.20); }
.kv-chip.kv-chip-warning { background: rgba(245,158,11,0.12); color: var(--bs-warning); border-color: rgba(245,158,11,0.20); }
.kv-chip.kv-chip-danger  { background: rgba(239,68,68,0.12); color: var(--bs-danger); border-color: rgba(239,68,68,0.20); }
.kv-chip.kv-chip-info    { background: rgba(14,165,233,0.12); color: #0284c7; border-color: rgba(14,165,233,0.20); }
.kv-chip.kv-chip-neutral { background: rgba(100,116,139,0.12); color: #475569; border-color: rgba(100,116,139,0.20); }

.kv-skeleton {
  position: relative;
  color: transparent !important;
  border-radius: 10px;
  background: linear-gradient(90deg, rgba(148,163,184,0.18), rgba(148,163,184,0.10), rgba(148,163,184,0.18));
  background-size: 260% 100%;
  animation: kvShimmer 1.2s ease-in-out infinite;
}

@keyframes kvShimmer {
  0% { background-position: 0% 0; }
  100% { background-position: 100% 0; }
}

#cxProductDetailRoot .gallery-thumb {
  overflow: hidden;
}

#cxProductDetailRoot .gallery-thumb img {
  width: 100%;
  height: 100%;
  display: block;
}

#cxProductDetailRoot #mainImage {
  background: var(--bs-tertiary-bg);
}

/* Real Estate UX polish (no flow change) */
#reSearchForm .form-control,
#reSearchForm .form-select {
  border-radius: var(--bs-border-radius);
}

@media (min-width: 992px) {
  #reSearchForm {
    position: sticky;
    top: 92px;
  }
}

#reResultsList .module-card {
  border-radius: var(--bs-border-radius-lg);
  overflow: hidden;
  border: 1px solid var(--bs-border-color);
  box-shadow: var(--bs-box-shadow-sm);
}

#reResultsList .module-card:hover {
  transform: translateY(-2px);
  transition: transform .2s ease, box-shadow .2s ease;
  box-shadow: var(--bs-box-shadow);
}

#reFilterTag .kv-chip a {
  font-weight: 800;
}

@media (max-width: 768px) {
  .table-responsive {
    position: relative;
    border-radius: var(--bs-border-radius-lg);
    /* This custom bootstrap build omits the base .table-responsive{overflow-x:auto}
       rule, and the wrapper is often a flex child (min-width:auto won't shrink),
       so the min-width:760 table below blew out the page instead of scrolling
       inside. Force it to contain + scroll the table. */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    min-width: 0;
    max-width: 100%;
  }
  .table-responsive::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 28px;
    pointer-events: none;
    background: linear-gradient(to left, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0));
  }
  [data-bs-theme="dark"] .table-responsive::after {
    background: linear-gradient(to left, rgba(17, 24, 39, 0.95), rgba(17, 24, 39, 0));
  }
  .table-responsive > .table {
    min-width: 760px;
  }
  .table-responsive > .table thead th,
  .table-responsive > .table tbody td {
    white-space: nowrap;
  }
}

/*
 * 3. Module Accent System
 * --------------------------------------------------
 * Each high-level module gets its own accent color.
 * Pages opt-in via body[data-module="..."] so the
 * super-app keeps one shell but different emotions.
 */

:root {
  /* Real Estate */
  --module-realestate: #1E3A8A; /* Deep Blue */
  /* Classifieds */
  --module-classified: #64748B; /* Slate Gray */
  /* Cab / Bike / Logistics */
  --module-cab:        #F97316; /* Orange */
  /* Marketplace / Commerce */
  --module-marketplace:#0EA5E9; /* Sky Blue */
  /* Dating */
  --module-dating:     #EC4899; /* Pink / Rose */
  /* Jobs */
  --module-jobs:       #2563EB; /* Corporate Blue */
  /* Business Network */
  --module-business:   #1F2937; /* Charcoal */
  /* Freelance */
  --module-freelance:  #8B5CF6; /* Purple */
  /* Services */
  --module-services:   #14B8A6; /* Teal */
  /* Events */
  --module-events:     #F43F5E; /* Coral Red */
  /* Hotels & StayGo */
  --module-hotels:     #0F766E; /* Deep Teal */
  /* Food Ordering */
  --module-food:       #DC2626; /* Warm Red */
  /* Trip Planner */
  --module-trip:       #0284C7; /* Travel Blue */
}

/* Default accent falls back to brand-primary when no module set */
body.app-default {
  background-color: var(--bg-main);
  color: var(--text-primary);
}

body.app-default[data-module] {
  --accent-color: var(--brand-primary);
}

body.app-default[data-module="realestate"]  { --accent-color: var(--module-realestate); }
body.app-default[data-module="classified"]  { --accent-color: var(--module-classified); }
body.app-default[data-module="cab"]         { --accent-color: var(--module-cab); }
body.app-default[data-module="marketplace"] { --accent-color: var(--module-marketplace); }
body.app-default[data-module="dating"]      { --accent-color: var(--module-dating); }
body.app-default[data-module="jobs"]        { --accent-color: var(--module-jobs); }
body.app-default[data-module="business"]    { --accent-color: var(--module-business); }
body.app-default[data-module="freelance"]   { --accent-color: var(--module-freelance); }
body.app-default[data-module="services"]    { --accent-color: var(--module-services); }
body.app-default[data-module="events"]      { --accent-color: var(--module-events); }
body.app-default[data-module="hotels"]      { --accent-color: var(--module-hotels); }
body.app-default[data-module="food"]        { --accent-color: var(--module-food); }
body.app-default[data-module="trip"]        { --accent-color: var(--module-trip); }

/*
 * 4. Accent Usage Primitives
 * --------------------------------------------------
 * These are conservative so we don't break existing
 * layouts; they mainly influence primary CTAs and
 * headings inside a module.
 */

/* Primary buttons follow module accent when inside a module page */
body.app-default[data-module] .btn.btn-primary,
body.app-default[data-module] .btn.btn-light-primary {
  background-color: var(--accent-color);
  border-color: var(--accent-color);
}

body.app-default[data-module] .btn.btn-primary:hover,
body.app-default[data-module] .btn.btn-light-primary:hover {
  filter: brightness(0.93);
}

/* Page headings pick up accent subtly */
body.app-default[data-module] .page-title .page-heading {
  color: var(--accent-color);
}

/* Simple utility class for accent text / borders where needed */
.kv-accent-text {
  color: var(--accent-color, var(--brand-primary));
}

.kv-accent-pill {
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.04);
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--accent-color, var(--brand-primary)) 12%, #FFFFFF 88%),
    #FFFFFF
  );
  color: var(--accent-color, var(--brand-primary));
}

/*
 * 5. Existing "polish" rules from original keen_polish.css
 * --------------------------------------------------
 */

:root {
  --kf-shadow-sm: 0 8px 22px rgba(15, 23, 42, 0.06);
  --kf-shadow-md: 0 16px 40px rgba(15, 23, 42, 0.10);
}

/* Slightly crisper borders */
.app-default .card,
.app-default .menu-link,
.app-default .btn,
.app-default .form-control,
.app-default .form-select {
  border-color: rgba(15, 23, 42, 0.12);
}

/* Subtle “gloss” / depth */
.app-default .card {
  box-shadow: var(--kf-shadow-sm);
}

.app-default .card:hover {
  box-shadow: var(--kf-shadow-md);
}

/* Make icons/buttons feel a bit sharper */
.app-default .btn {
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.06);
}

.app-default .btn.btn-light,
.app-default .btn.btn-secondary {
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.05);
}

/* Keep sidebar text crisp */
.app-default .menu-title {
  letter-spacing: 0.01em;
}

/* Fix sidebar scroll issues on various pages */
.app-sidebar .app-sidebar-menu {
  overflow-y: auto;
  overflow-x: hidden;
  max-height: calc(100vh - 80px);
}

.app-sidebar-menu-scroll {
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

/* Ensure sidebar content is scrollable on mobile */
@media (max-width: 991.98px) {
  .app-sidebar .app-sidebar-menu {
    max-height: calc(100vh - 120px);
  }
}

/* Fix overflow issues in content areas like track order, ride CRM */
.app-content .card-body {
  overflow-y: auto;
}

/* Fix chat microphone positioning - prevent interference with typing area */
.chat-input-container {
  position: relative;
}

.chat-input-container .chat-microphone-btn {
  position: absolute;
  right: 50px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
}

.chat-input-container textarea,
.chat-input-container input[type="text"] {
  padding-right: 90px;
}

/* Ensure microphone doesn't overlap send button */
.chat-compose-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}
 

.classified-master-card {
    /* Use !important to override Metronic's hover & transition logic */
    background: linear-gradient(
        135deg,
        rgba(30, 58, 138, 0.7) 0%,
        rgba(59, 130, 246, 0.7) 100%
    ) !important;

    border-radius: 1.5rem !important;
    transition: none !important; /* Stops color-shift animations */
    transform: none !important; /* Stops any movement flicker */
    box-shadow: 0 0.1rem 1rem rgba(0, 0, 0, 0.1) !important;
    border: none !important;

    /* Optional glass effect */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

    /* Target any pseudo-elements Metronic might add */
    .classified-master-card::before, 
    .classified-master-card::after {
        display: none !important;
    }

    /* Prevent background-color change on hover at the card level */
    .classified-master-card:hover {
        background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%) !important;
        background-color: transparent !important;
    }

/* ============================================================
   Header user/login icon — make the avatar image fit the
   30x30 circular button (#kt_header_user_menu_toggle).
   Without this the raw <img> overflows the btn-icon box.
   ============================================================ */
#kt_header_user_menu_toggle > a,
#kt_header_user_menu_toggle .kv-guest-user-link {
    overflow: hidden;
    padding: 0;
    border-radius: 50%;
}
#kt_header_user_menu_toggle > a > img,
#kt_header_user_menu_toggle .kv-guest-user-link > img,
#kt_header_user_menu_toggle .symbol > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
}

/* Robust fallback: some pages (e.g. mydashboard) render the avatar as a
   <button id="kt_header_user_menu_button" class="symbol symbol-35px"> with a
   DIRECT <img> child (no inner <a>). Without a hard size cap that raw image
   renders at its natural width (observed 512px) and blows the header past the
   viewport — horizontal overflow on every breakpoint/browser. Cap it to the
   35px symbol box regardless of nesting. */
#kt_header_user_menu_toggle img,
#kt_header_user_menu_button img,
#kt_header_user_menu_button.symbol > img {
    width: 35px !important;
    height: 35px !important;
    max-width: 35px !important;
    max-height: 35px !important;
    object-fit: cover !important;
    border-radius: .475rem !important;
    display: block;
}
#kt_header_user_menu_button.symbol {
    width: 35px;
    height: 35px;
    flex: 0 0 35px;
    overflow: hidden;
}

/* ============================================================
   Responsive: the content container must never cause horizontal
   PAGE scroll. Wide widget toolbars (dashboard weather tabs) and
   decorative absolutely-positioned art (kv-character) were bleeding
   past the viewport → horizontal overflow on every breakpoint/browser
   (caught by tests/e2e/visual_sweep.mjs). `overflow-x: clip` keeps
   position:sticky working and Popper dropdowns escape via fixed
   positioning, so this is safe app-wide (other pages had no overflow).
   ============================================================ */
#kt_app_content_container.app-container { overflow-x: clip; }
#weather-tabs { max-width: 100%; }
.kv-character-abs { max-width: 100%; }

/* ============================================================
   Modal backdrop stacking fix (cross-browser).
   The compiled style.bundle.css hardcoded `.modal-backdrop{z-index:0!important}`
   (its intended --kv-z-modal-backdrop var was left commented out), while the
   modal itself sits at --kv-z-modal (30050). With the backdrop at 0 the app
   header, sidebar, "powered by" banner and the cookie bar (z 1020–2070) all
   rendered ABOVE the backdrop and were NOT dimmed when a modal opened — the
   backdrop appeared "pierced" by the page chrome/cards on every browser.
   Pair the backdrop just beneath the modal so it dims the whole page.
   ============================================================ */
.modal-backdrop, .modal-backdrop.show { z-index: 30040 !important; }
/* Belt-and-suspenders: keep the modal itself above its backdrop */
.modal.show { z-index: 30050 !important; }

/* ── Finger-sized tap targets (founder rule: min 44–48px) — QA §46/§43. Scoped to
   COARSE pointers (touch/mobile) so desktop dense layouts are untouched. Enlarges
   small buttons, icon buttons and the sidebar toggle; inline text links stay exempt
   (WCAG). The public header hamburger/CTA are handled in _public_header.php. ── */
@media (pointer: coarse) {
    .btn.btn-sm { min-height: 40px !important; display: inline-flex; align-items: center; justify-content: center; }
    .btn.btn-icon:not(.btn-lg) { min-width: 40px !important; min-height: 40px !important; }
    .app-sidebar-toggle, .btn.app-sidebar-toggle { min-width: 44px !important; min-height: 44px !important; }
}
@media (pointer: coarse) and (max-width: 991.98px) {
    .app-sidebar-menu .menu-link { min-height: 42px !important; }
}