/* =============================================================
   ADS-MANAGER THEME — Global Patch & Tailwind Overrides
   Applies gold + steel-blue across all Tailwind utility classes
   Load AFTER tailwind.css and ui_system.css on every page.
   ============================================================= */

/* ─── Root body & page backgrounds ──────────────────────── */

body {
    background-color: #08090E !important;
    color: #E2E8F0;
}

.bg-slate-900 { background-color: #08090E !important; }
.bg-slate-800 { background-color: #0F1219 !important; }
.bg-slate-700 { background-color: #141826 !important; }
.bg-slate-800\/95, .bg-slate-900\/80, .bg-slate-900\/95 {
    background-color: rgba(8, 9, 14, 0.95) !important;
}

/* ─── Borders ─────────────────────────────────────────────  */

.border-slate-700 { border-color: #1A2236 !important; }
.border-slate-700\/50 { border-color: rgba(26, 34, 54, 0.50) !important; }

/* ─── Tailwind Indigo → Gold primary ─────────────────────── */

/* backgrounds */
.bg-indigo-600                { background-color: #C9922A !important; }
.bg-indigo-700                { background-color: #B07C1E !important; }
.bg-indigo-500                { background-color: #D4A642 !important; }
.hover\:bg-indigo-600:hover   { background-color: #C9922A !important; }
.hover\:bg-indigo-500:hover   { background-color: #D4A642 !important; }
.hover\:bg-indigo-400:hover   { background-color: #E8B86D !important; }

/* opacity variants — gold tints */
.bg-indigo-500\/10  { background-color: rgba(201, 146, 42, 0.10) !important; }
.bg-indigo-500\/20  { background-color: rgba(201, 146, 42, 0.20) !important; }
.bg-indigo-600\/10  { background-color: rgba(201, 146, 42, 0.10) !important; }
.bg-indigo-600\/20  { background-color: rgba(201, 146, 42, 0.20) !important; }
.bg-indigo-900\/20  { background-color: rgba(80, 42, 8, 0.20) !important; }

/* text */
.text-indigo-400    { color: #DDA84A !important; }
.text-indigo-500    { color: #C9922A !important; }
.text-indigo-300    { color: #E8B86D !important; }

/* borders */
.border-indigo-600          { border-color: #C9922A !important; }
.border-indigo-500          { border-color: #D4A642 !important; }
.border-indigo-500\/20      { border-color: rgba(201, 146, 42, 0.20) !important; }
.hover\:border-indigo-500:hover { border-color: #D4A642 !important; }

/* rings */
.ring-indigo-500\/20        { --tw-ring-color: rgba(201, 146, 42, 0.20) !important; }
.ring-indigo-500\/25        { --tw-ring-color: rgba(201, 146, 42, 0.25) !important; }
.focus\:ring-indigo-500:focus { --tw-ring-color: rgba(201, 146, 42, 0.50) !important; }
.focus\:ring-indigo-500\/50:focus { --tw-ring-color: rgba(201, 146, 42, 0.50) !important; }

/* shadow */
.shadow-indigo-900\/20      { --tw-shadow-color: rgba(80, 42, 8, 0.20) !important; }

/* ─── Tailwind Blue/Sky → Steel-blue secondary ───────────── */

.bg-blue-600                { background-color: #4A8FB8 !important; }
.bg-blue-700                { background-color: #3A7CA5 !important; }
.bg-blue-500                { background-color: #5CA0C6 !important; }
.hover\:bg-blue-600:hover   { background-color: #4A8FB8 !important; }
.hover\:bg-blue-700:hover   { background-color: #3A7CA5 !important; }
.hover\:bg-blue-500:hover   { background-color: #5CA0C6 !important; }
.hover\:bg-blue-400:hover   { background-color: #7EC4E6 !important; }

.bg-sky-600                 { background-color: #4A8FB8 !important; }
.hover\:bg-sky-600:hover    { background-color: #4A8FB8 !important; }
.hover\:bg-sky-400:hover    { background-color: #7EC4E6 !important; }

.bg-blue-600\/20            { background-color: rgba(74, 143, 184, 0.20) !important; }
.bg-blue-600\/10            { background-color: rgba(74, 143, 184, 0.10) !important; }

.text-blue-400, .text-sky-400, .text-blue-300 { color: #7EC4E6 !important; }
.text-sky-300                                  { color: #A5D7F0 !important; }

.border-sky-600, .border-blue-600 { border-color: #4A8FB8 !important; }

.focus\:ring-blue-500:focus,
.focus\:ring-sky-500:focus  { --tw-ring-color: rgba(74, 143, 184, 0.50) !important; }
.focus\:ring-2.focus\:ring-sky-500:focus,
.focus\:ring-2.focus\:ring-blue-500:focus {
    --tw-ring-color: rgba(74, 143, 184, 0.50) !important;
}
.focus\:ring-pink-500:focus { --tw-ring-color: rgba(74, 143, 184, 0.50) !important; }

/* ─── focus-visible global fix ───────────────────────────── */

input:focus-visible,
select:focus-visible,
textarea:focus-visible,
button:focus-visible {
    outline: 2px solid rgba(201, 146, 42, 0.70);
    outline-offset: 2px;
}

/* ─── Header ─────────────────────────────────────────────── */

header.sticky {
    background: rgba(8, 9, 14, 0.92) !important;
    border-bottom-color: rgba(26, 34, 54, 0.80) !important;
    box-shadow: 0 1px 0 rgba(201, 146, 42, 0.10);
}

/* Nav active state — custom classes used by header.php */
.nav-active-state {
    background: rgba(201, 146, 42, 0.10) !important;
    color: #DDA84A !important;
    box-shadow: inset 0 0 0 1px rgba(201, 146, 42, 0.22) !important;
}

.nav-active-state i,
.nav-active-state svg {
    color: #DDA84A !important;
}

.nav-mobile-active {
    background: rgba(201, 146, 42, 0.18) !important;
    color: #E8B86D !important;
    border-left: 2px solid #C9922A;
}

/* Folder monitor active (green stays green — status color) */
/* Settings gear active */
.settings-active {
    background: rgba(201, 146, 42, 0.10) !important;
    color: #DDA84A !important;
}

/* ─── Module Cards (index.php) ───────────────────────────── */

.module-card {
    border-color: rgba(26, 34, 54, 0.90) !important;
    transition: all 0.25s ease !important;
}

.module-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.60) !important;
}

/* Per-card accent hovers */
.card-gallery:hover  {
    border-color: rgba(74, 143, 184, 0.45) !important;
    border-top-color: rgba(74, 143, 184, 0.60) !important;
    background: rgba(74, 143, 184, 0.07) !important;
}
.card-processing:hover {
    border-color: rgba(52, 211, 153, 0.40) !important;
    border-top-color: rgba(52, 211, 153, 0.55) !important;
    background: rgba(52, 211, 153, 0.06) !important;
}
.card-crm:hover {
    border-color: rgba(167, 139, 250, 0.40) !important;
    border-top-color: rgba(167, 139, 250, 0.55) !important;
    background: rgba(167, 139, 250, 0.06) !important;
}
.card-jumbotron:hover {
    border-color: rgba(201, 146, 42, 0.45) !important;
    border-top-color: rgba(201, 146, 42, 0.65) !important;
    background: rgba(201, 146, 42, 0.07) !important;
}
.card-print:hover, .card-settings:hover {
    border-color: rgba(201, 146, 42, 0.30) !important;
    border-top-color: rgba(201, 146, 42, 0.45) !important;
    background: rgba(201, 146, 42, 0.05) !important;
}

/* ─── Sort / Tab buttons (CRM, Settings, etc.) ───────────── */

.sort-btn {
    background: transparent;
    border: none;
    color: #8896A8;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.sort-btn:hover { background: rgba(37, 45, 69, 0.60); color: #E2E8F0; }
.sort-btn.active {
    background: rgba(201, 146, 42, 0.14) !important;
    border: 1px solid rgba(201, 146, 42, 0.32) !important;
    color: #DDA84A !important;
    box-shadow: 0 1px 0 rgba(201, 146, 42, 0.08) inset;
}

.tab-btn { color: #8896A8; border-color: transparent; }
.tab-btn:hover { color: #E2E8F0; }
.tab-btn.active {
    color: #DDA84A !important;
    border-color: #C9922A !important;
}

/* ─── Settings panels ─────────────────────────────────────── */

.settings-panel {
    background: linear-gradient(
        160deg,
        rgba(15, 18, 25, 0.97) 0%,
        rgba(8, 9, 14, 0.97) 100%
    ) !important;
    border-color: rgba(26, 34, 54, 0.80) !important;
    border-top-color: rgba(201, 146, 42, 0.18) !important;
}

/* ─── Glass panels (jumbotron_control) ───────────────────── */

.glass-panel {
    background: #0F1219 !important;
    border-color: #1A2236 !important;
}

/* ─── CRM View Mode fields ───────────────────────────────── */

.crm-view-mode .crm-input {
    background-color: rgba(8, 9, 14, 0.95) !important;
    border-color: rgba(26, 34, 54, 0.90) !important;
}

/* ─── Order Detail / Processing page ─────────────────────── */

.order-detail-label { color: #8896A8 !important; }

/* ─── Cart / Photo selection ─────────────────────────────── */

.product-item.selected {
    background-color: rgba(201, 146, 42, 0.12) !important;
    border-color: #C9922A !important;
}

.product-selected {
    border-color: #C9922A !important;
    background-color: rgba(201, 146, 42, 0.15) !important;
    box-shadow: 0 0 0 1px #C9922A !important;
}

.photo-selection {
    box-shadow: 0 0 0 3px #C9922A !important;
}

.photo-selection::after {
    background-color: #C9922A !important;
}

/* ─── Kiosk / Scan input accent ──────────────────────────── */

#scanner-input:focus {
    --tw-ring-color: rgba(74, 143, 184, 0.50) !important;
    border-color: #4A8FB8 !important;
}

/* ─── Custom Scrollbar (component-level) ─────────────────── */

.custom-scrollbar::-webkit-scrollbar { width: 5px; }
.custom-scrollbar::-webkit-scrollbar-track { background: #0A0C12; }
.custom-scrollbar::-webkit-scrollbar-thumb {
    background: rgba(201, 146, 42, 0.28);
    border-radius: 3px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: rgba(201, 146, 42, 0.50);
}

/* ─── Jumbotron control review buttons (keep status colors) ─ */

.review-action-approve {
    color: #6ee7b7;
    background: rgba(16, 185, 129, 0.18);
    border-color: rgba(16, 185, 129, 0.95);
}
.review-action-deny {
    color: #fca5a5;
    background: rgba(239, 68, 68, 0.18);
    border-color: rgba(239, 68, 68, 0.95);
}

/* ─── Guest upload gradient (gold-to-steel) ──────────────── */

.gradient-bg {
    background: linear-gradient(135deg, #C9922A 0%, #3A7CA5 100%) !important;
}

/* ─── Offline page icon/button ───────────────────────────── */

.offline-icon {
    background: linear-gradient(135deg, #C9922A, #4A8FB8) !important;
    box-shadow: 0 10px 25px rgba(201, 146, 42, 0.30) !important;
}

.retry-btn {
    background: linear-gradient(135deg, #C9922A, #4A8FB8) !important;
}

/* ─── Watermark overlay (functional, keep as-is) ─────────── */
/* .watermark-tiled — untouched, functional requirement */

/* ─── Status badges (keep distinct) ─────────────────────── */

/* success/green, warning/amber, error/red stay as Tailwind defines */
/* Only indigo/blue get remapped above */

/* ─── Misc utility patches ───────────────────────────────── */

/* Mobile menu background */
#mobile-menu {
    background: rgba(8, 9, 14, 0.97) !important;
    border-bottom-color: #1A2236 !important;
}

/* Folder monitor modal panel */
#folder-monitor-modal > div:last-child > div {
    background: #0F1219 !important;
    border-color: #1A2236 !important;
}

/* Session/Event modal */
#sessionModal .ui-modal-panel {
    background: #0F1219;
}

/* Print ticket ad gateway */
#ad-gateway {
    background: #08090E !important;
}

/* ─── Admin Settings HTML page fixes ─────────────────────── */

#auth-gate { background: #0F1219 !important; border-color: #1A2236; }
#settings-panel > section {
    background: #0F1219 !important;
    border-color: #1A2236 !important;
}

/* Check integrity button - override to gold */
button[onclick*="checkIntegrity"] {
    background: #C9922A !important;
}
button[onclick*="checkIntegrity"]:hover {
    background: #B07C1E !important;
}

/* Admin settings unlock button */
button[onclick*="authenticate"] {
    background: #4A8FB8 !important;
}
button[onclick*="authenticate"]:hover {
    background: #3A7CA5 !important;
}

/* ─── Receipt / purchased gallery pages ──────────────────── */

/* QR code container stays white for scannability */
#qrcode-container { background: #fff; }