/*
  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;
}

/*
 * 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:   #111827;
  --text-secondary: #6B7280;
  --text-muted:     #9CA3AF;

  /* 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;
}

/*
 * 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;
}

/*
 * 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;
}