/* ═══════════════════════════════════════════════════════════════
   MADONA HOMES — Brand Theme System  v9
   Colors extracted directly from the official Madona Homes logo:
     • Background:     Deep charcoal #1A1A1A  (logo backdrop)
     • Flamingo Pink:  #F472A8  (body/feathers — vivid logo pink)
     • Flamingo Deep:  #E84D8A  (wing shading)
     • Gold Key:       #C9972A  (key body, "Madona" & "HOMES" text)
     • Gold Light:     #F0C84E  (key bright highlights)
     • Gold Dark:      #A07318  (key ornaments / shadow)
   ═══════════════════════════════════════════════════════════════ */

/* ── DARK THEME (matches logo — charcoal background) ─────────────
   Primary brand theme. All colors taken from logo pixel analysis.
   ─────────────────────────────────────────────────────────────── */
:root,
html[data-theme="dark"] {
  /* Flamingo pinks — logo body */
  --primary:        #F472A8;
  --primary-dark:   #E84D8A;
  --primary-pale:   #2A1020;
  --primary-mid:    #F9A0C6;

  /* Gold — logo key & script text */
  --gold:           #C9972A;
  --gold-light:     #F0C84E;
  --gold-dark:      #A07318;
  --gold-pale:      #201608;

  /* Surfaces */
  --bg:             #1A1A1A;
  --surface:        #222222;
  --surface2:       #2B2B2B;
  --border:         #3A1E2C;

  /* Text */
  --ink:            #F5EAF0;
  --gray:           #C4A0B2;
  --light:          #1A1A1A;

  /* Semantic */
  --red:            #F87171;
  --red-pale:       #3A1515;
  --green:          #4ADE80;

  /* Shadows */
  --shadow:         0 2px 20px rgba(0,0,0,.55);
  --shadow-lg:      0 8px 48px rgba(0,0,0,.70);

  /* Gradients */
  --grad-primary:   linear-gradient(135deg, #F9A0C6 0%, #F472A8 45%, #E84D8A 100%);
  --grad-gold:      linear-gradient(135deg, #F0C84E 0%, #C9972A 50%, #A07318 100%);
  --grad-hero:      linear-gradient(135deg, #1A1A1A 0%, #222222 60%, #261508 100%);

  /* Navbar & sidebar */
  --nav-bg:         #1A1A1A;
  --sidebar-bg:     #0E0E0E;

  /* Admin nav aliases */
  --admin-nav-bg:   #0E0E0E;
  --admin-nav-fg:   #C9972A;
  --table-head-bg:  linear-gradient(90deg, #0E0E0E 0%, #1A1A1A 100%);

  --radius:         10px;
  --meta-color:     #C9972A;
}

/* ── LIGHT THEME ─────────────────────────────────────────────── */
html[data-theme="light"] {
  --primary:        #E8538C;
  --primary-dark:   #CC3570;
  --primary-pale:   #FFF0F5;
  --primary-mid:    #F4A0C4;

  --gold:           #B8861E;
  --gold-light:     #E8C050;
  --gold-dark:      #8A6210;
  --gold-pale:      #FFF8E6;

  --bg:             #FFFFFF;
  --surface:        #FFFFFF;
  --surface2:       #FFF7FB;
  --border:         #FFD4E8;

  --ink:            #1E0610;
  --gray:           #85556E;
  --light:          #FFF5F9;

  --red:            #DC2626;
  --red-pale:       #FEF2F2;
  --green:          #16A34A;

  --shadow:         0 2px 16px rgba(232,83,140,.13);
  --shadow-lg:      0 8px 40px rgba(232,83,140,.20);

  --grad-primary:   linear-gradient(135deg, #F4A0C4 0%, #E8538C 45%, #CC3570 100%);
  --grad-gold:      linear-gradient(135deg, #E8C050 0%, #B8861E 50%, #8A6210 100%);
  --grad-hero:      linear-gradient(135deg, #FFF0F5 0%, #FFFFFF 60%, #FFF8E6 100%);

  --nav-bg:         #FFFFFF;
  --sidebar-bg:     #1E0610;

  --admin-nav-bg:   #1E0610;
  --admin-nav-fg:   #E8C050;
  --table-head-bg:  linear-gradient(90deg, #1E0610 0%, #4A1830 100%);

  --radius:         10px;
  --meta-color:     #E8538C;
}

/* ══════════════════════════════════════════════════════════════
   GLOBAL OVERRIDES
   ══════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  background: var(--bg) !important;
  color: var(--ink) !important;
  transition: background .35s, color .35s;
}

.card {
  background: var(--surface) !important;
  border-color: var(--border) !important;
  box-shadow: var(--shadow) !important;
  transition: background .35s, border-color .35s;
}

.btn-primary {
  background: var(--grad-primary) !important;
  border: none !important;
  color: #fff !important;
  box-shadow: var(--shadow);
  transition: filter .2s, transform .2s;
}
.btn-primary:hover {
  filter: brightness(1.08);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg) !important;
}
html[data-theme="dark"] .btn-primary { color: #1A1A1A !important; }

.btn-gold {
  background: var(--grad-gold) !important;
  border: none !important;
  color: #1A1A1A !important;
  font-weight: 700;
  box-shadow: var(--shadow);
  transition: filter .2s, transform .2s;
}
.btn-gold:hover { filter: brightness(1.10); transform: translateY(-2px); }

.btn-outline {
  border-color: var(--primary) !important;
  color: var(--primary) !important;
}
.btn-outline:hover { background: var(--primary-pale) !important; }

a { color: var(--primary) !important; }
a:hover { color: var(--primary-dark) !important; }

.form-group input,
.form-group select,
.form-group textarea {
  background: var(--surface2) !important;
  border-color: var(--border) !important;
  color: var(--ink) !important;
  transition: border-color .2s;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--primary) !important;
  outline: none;
}
html[data-theme="dark"] .form-group input:focus,
html[data-theme="dark"] .form-group select:focus,
html[data-theme="dark"] .form-group textarea:focus {
  box-shadow: 0 0 0 3px rgba(201,151,42,.18) !important;
}
html[data-theme="light"] .form-group input:focus,
html[data-theme="light"] .form-group select:focus,
html[data-theme="light"] .form-group textarea:focus {
  box-shadow: 0 0 0 3px rgba(232,83,140,.15) !important;
}

.form-group label { color: var(--gray) !important; }

.data-table th {
  background: var(--admin-nav-bg) !important;
  color: var(--admin-nav-fg) !important;
}
.data-table tr:hover td { background: var(--primary-pale) !important; }
.data-table td { border-color: var(--border) !important; color: var(--ink) !important; }

.spinner {
  border-color: var(--primary-pale) !important;
  border-top-color: var(--primary) !important;
}

.badge-vacant    { background: var(--primary-pale) !important; color: var(--primary-dark) !important; }
.badge-confirmed { background: var(--primary-pale) !important; color: var(--primary-dark) !important; }

.section-title {
  background: var(--grad-gold);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.gold-rule {
  border: none;
  height: 2px;
  background: var(--grad-gold);
  border-radius: 2px;
  margin: 24px 0;
}

.page { background: var(--bg) !important; }
.text-gold { color: var(--gold) !important; }
.text-flamingo { color: var(--primary) !important; }
.border-gold { border-color: var(--gold) !important; }

/* ══════════════════════════════════════════════════════════════
   LOGO BLEND
   ══════════════════════════════════════════════════════════════ */
nav a > div[style*="048aa3"] {
  background-color: var(--nav-bg) !important;
  background-image: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
aside div[style*="048aa3"] {
  background-color: var(--sidebar-bg) !important;
  background-image: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
nav [id^="mdn-logo-img-"] {
  height: 44px !important;
  max-width: 160px;
  transition: opacity .25s, transform .25s;
}
nav [id^="mdn-logo-img-"]:hover { opacity: .88; transform: scale(1.03); }
aside [id^="mdn-logo-img-"] { height: 46px !important; max-width: 170px; }

html[data-theme="dark"] nav [id^="mdn-logo-img-"] {
  filter: drop-shadow(0 0 7px rgba(201,151,42,.28)) brightness(1.06);
}
html[data-theme="dark"] aside [id^="mdn-logo-img-"] {
  filter: drop-shadow(0 0 10px rgba(201,151,42,.35)) brightness(1.08);
}
html[data-theme="light"] nav [id^="mdn-logo-img-"] {
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.15));
}
html[data-theme="light"] aside [id^="mdn-logo-img-"] {
  filter: drop-shadow(0 1px 6px rgba(0,0,0,.28)) brightness(1.04);
}