/*
 * GOLD THEME — permanent global styles (no theme switcher)
 * All rose-* Tailwind classes are overridden with the gold scale.
 */

/* ── Color variables ── */
:root {
    --theme-50:  #FBF4E3;
    --theme-100: #F5E3B5;
    --theme-200: #ECC87A;
    --theme-300: #D4A94A;
    --theme-400: #BC8F2D;
    --theme-500: #A97922;
    --theme-600: #8C641B;
    --theme-700: #6E4E14;
    --theme-800: #50390E;
    --theme-900: #372608;
}

/* ── Body ── */
body {
    background: #ffffff !important;
    background-attachment: fixed;
}

/* ── Page-level wrapper backgrounds ── */
.bg-gray-50  { background-color: #f9f9f9 !important; }
.bg-gray-100 { background-color: #f3f3f3 !important; }
.bg-gray-200 { background-color: #e8e8e8 !important; }

/* ── Header ── */
#main-header {
    background-color: #ffffff !important;
    border-bottom: 1px solid rgba(169, 121, 34, 0.3) !important;
}
#main-header .bg-white,
#mobile-top-bar,
.mobile-added-row,
.navigation-bar-row {
    background-color: #ffffff !important;
}
#main-header .border-t { border-top-color:    rgba(169,121,34,0.2) !important; }
#main-header .border-b { border-bottom-color: rgba(169,121,34,0.2) !important; }
.navigation-bar-row    { border-top-color:    rgba(169,121,34,0.2) !important; }

/* ── Search bar ── */
.search-input-box {
    background-color: #ffffff !important;
    border-color: rgba(169,121,34,0.5) !important;
}
.search-input-box:focus { border-color: #A97922 !important; }
.search-btn-box         { background-color: #A97922 !important; }
.search-btn-box:hover   { background-color: #8C641B !important; }

/* ── Scrollbar ── */
::-webkit-scrollbar-track { background: #F5F0E6; }
::-webkit-scrollbar-thumb { background: #E5B268; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #A97922; }

/* ══════════════════════════════════════
   HARDCODED COLOR OVERRIDES (class-based)
   ══════════════════════════════════════ */

/* Salmon/red button tones */
[class*="bg-[#F08080]"],
[class*="bg-[#E57373]"],
[class*="bg-[#EF5350]"] { background-color: #A97922 !important; }
[class*="bg-[#F08080]"]:hover,
[class*="bg-[#E57373]"]:hover,
[class*="bg-[#EF5350]"]:hover { background-color: #8C641B !important; }

/* EE8B7C (salmon) accent */
[class*="bg-[#EE8B7C]"]   { background-color: #A97922 !important; }
[class*="text-[#EE8B7C]"] { color: #8C641B !important; }

/* B8966E (warm brown) */
[class*="bg-[#B8966E]"]   { background-color: #A97922 !important; }
[class*="text-[#B8966E]"] { color: #8C641B !important; }

/* c76558 (brick red) */
[class*="bg-[#c76558]"]   { background-color: #A97922 !important; }
[class*="text-[#c76558]"] { color: #8C641B !important; }

/* B76E79 / A05560 (custom pink palette from head.html config) */
[class*="bg-[#B76E79]"]   { background-color: #A97922 !important; }
[class*="text-[#B76E79]"] { color: #8C641B !important; }
[class*="border-[#B76E79]"] { border-color: #A97922 !important; }

/* F43F5E (rose-500 hex used in inline Tailwind-like classes) */
[class*="border-[#F43F5E]"] { border-color: #A97922 !important; }
[class*="text-[#F43F5E]"]   { color: #A97922 !important; }
[class*="bg-[#F43F5E]"]     { background-color: #A97922 !important; }

/* Decorative line */
.deco-line { background-color: #A97922 !important; }

/* bg-red-50 badge */
.bg-red-50 { background-color: var(--theme-50) !important; }

/* ══════════════════════════════════════
   ROSE-* TAILWIND OVERRIDES
   ══════════════════════════════════════ */

/* ── bg-rose-* ── */
.bg-rose-50   { background-color: var(--theme-50)  !important; }
.bg-rose-100  { background-color: var(--theme-100) !important; }
.bg-rose-200  { background-color: var(--theme-200) !important; }
.bg-rose-300  { background-color: var(--theme-300) !important; }
.bg-rose-400  { background-color: var(--theme-400) !important; }
.bg-rose-500  { background-color: var(--theme-500) !important; }
.bg-rose-600  { background-color: var(--theme-600) !important; }
.bg-rose-700  { background-color: var(--theme-700) !important; }
.bg-rose-800  { background-color: var(--theme-800) !important; }
.bg-rose-900  { background-color: var(--theme-900) !important; }

/* bg-rose opacity variants */
.bg-rose-50\/50  { background-color: rgb(251 244 227 / 0.5) !important; }
.bg-rose-900\/30 { background-color: rgb(55 38 8 / 0.3) !important; }

/* ── text-rose-* ── */
.text-rose-50  { color: var(--theme-50)  !important; }
.text-rose-100 { color: var(--theme-100) !important; }
.text-rose-200 { color: var(--theme-200) !important; }
.text-rose-300 { color: var(--theme-300) !important; }
.text-rose-400 { color: var(--theme-400) !important; }
.text-rose-500 { color: var(--theme-500) !important; }
.text-rose-600 { color: var(--theme-600) !important; }
.text-rose-700 { color: var(--theme-700) !important; }
.text-rose-800 { color: var(--theme-800) !important; }
.text-rose-900 { color: var(--theme-900) !important; }

/* ── border-rose-* ── */
.border-rose-50  { border-color: var(--theme-50)  !important; }
.border-rose-100 { border-color: var(--theme-100) !important; }
.border-rose-200 { border-color: var(--theme-200) !important; }
.border-rose-300 { border-color: var(--theme-300) !important; }
.border-rose-400 { border-color: var(--theme-400) !important; }
.border-rose-500 { border-color: var(--theme-500) !important; }
.border-rose-600 { border-color: var(--theme-600) !important; }
.border-rose-700 { border-color: var(--theme-700) !important; }
.border-rose-800 { border-color: var(--theme-800) !important; }
.border-rose-900 { border-color: var(--theme-900) !important; }

/* ── hover: bg ── */
.hover\:bg-rose-50:hover  { background-color: var(--theme-50)  !important; }
.hover\:bg-rose-100:hover { background-color: var(--theme-100) !important; }
.hover\:bg-rose-500:hover { background-color: var(--theme-500) !important; }
.hover\:bg-rose-600:hover { background-color: var(--theme-600) !important; }
.hover\:bg-rose-700:hover { background-color: var(--theme-700) !important; }
.hover\:bg-rose-900:hover { background-color: var(--theme-900) !important; }

/* ── hover: text ── */
.hover\:text-rose-500:hover { color: var(--theme-500) !important; }
.hover\:text-rose-600:hover { color: var(--theme-600) !important; }
.hover\:text-rose-700:hover { color: var(--theme-700) !important; }

/* ── hover: border ── */
.hover\:border-rose-200:hover { border-color: var(--theme-200) !important; }
.hover\:border-rose-300:hover { border-color: var(--theme-300) !important; }
.hover\:border-rose-400:hover { border-color: var(--theme-400) !important; }
.hover\:border-rose-500:hover { border-color: var(--theme-500) !important; }

/* ── group-hover ── */
.group:hover .group-hover\:text-rose-500 { color: var(--theme-500) !important; }
.group:hover .group-hover\:text-rose-600 { color: var(--theme-600) !important; }
.group:hover .group-hover\:bg-rose-100   { background-color: var(--theme-100) !important; }
.group:hover .group-hover\:bg-rose-900   { background-color: var(--theme-900) !important; }

/* ── focus ── */
.focus\:border-rose-500:focus { border-color: var(--theme-500) !important; }
.focus\:ring-rose-100:focus   { --tw-ring-color: var(--theme-100) !important; }
.focus\:ring-rose-500:focus   { --tw-ring-color: var(--theme-500) !important; }

/* ── ring ── */
.ring-rose-300 { --tw-ring-color: var(--theme-300) !important; }
.ring-rose-400 { --tw-ring-color: var(--theme-400) !important; }
.ring-rose-500 { --tw-ring-color: var(--theme-500) !important; }

/* ── divide ── */
.divide-rose-100 > :not([hidden]) ~ :not([hidden]) { border-color: var(--theme-100) !important; }
.divide-rose-200 > :not([hidden]) ~ :not([hidden]) { border-color: var(--theme-200) !important; }

/* ── peer-checked ── */
.peer:checked ~ .peer-checked\:border-rose-500 { border-color: var(--theme-500) !important; }
.peer:checked ~ .peer-checked\:bg-rose-500     { background-color: var(--theme-500) !important; }

/* ── selection ── */
::selection {
    background-color: var(--theme-200) !important;
    color: var(--theme-900) !important;
}

/* ── gradient from/to ── */
.from-rose-50  { --tw-gradient-from: var(--theme-50)  !important; }
.from-rose-100 { --tw-gradient-from: var(--theme-100) !important; }
.from-rose-500 { --tw-gradient-from: var(--theme-500) !important; }
.to-rose-50    { --tw-gradient-to:   var(--theme-50)  !important; }
.to-rose-100   { --tw-gradient-to:   var(--theme-100) !important; }
.to-rose-950   { --tw-gradient-to:   var(--theme-900) !important; }

/* gradient opacity variants */
.from-rose-900\/40 { --tw-gradient-from: rgb(55 38 8 / 0.4) !important; }
.from-rose-500\/20 { --tw-gradient-from: rgb(169 121 34 / 0.2) !important; }
.to-rose-50\/30    { --tw-gradient-to:   rgb(251 244 227 / 0.3) !important; }

/* ── shadow ── */
.shadow-rose-50\/50 { --tw-shadow-color: rgb(251 244 227 / 0.5) !important; }

/* ── file input ── */
.file\:bg-rose-50   { --tw-file-bg: var(--theme-50) !important; }
.file\:text-rose-700 { --tw-file-color: var(--theme-700) !important; }
.hover\:file\:bg-rose-100:hover { --tw-file-bg: var(--theme-100) !important; }

/* ══════════════════════════════════════
   LOGO — always gold
   ══════════════════════════════════════ */
.logo-rosegold { display: none;  }
.logo-gold     { display: block; }

/* ══════════════════════════════════════
   THEME PILL — gold (decorative only)
   ══════════════════════════════════════ */
.theme-switcher {
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    user-select: none;
}

.theme-pill {
    position: relative;
    width: 42px;
    height: 22px;
    border-radius: 11px;
    background: linear-gradient(90deg, #A97922 0%, #BC8F2D 100%);
    transition: background 0.3s ease;
    flex-shrink: 0;
}

.theme-pill-knob {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    transform: translateX(20px);
}