/* =========================================================================
   MATLOBA ENTERPRISE THEME SYSTEM (DAY & NIGHT ARCHITECTURE)
   File: public/styles/theme-system.css
   Version: 20261028_v40
   Guarantees 100% High-Contrast, Zero Invisible Texts, Zero Color Bleed
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. CORE COLOR SYSTEM: LIGHT MODE (DAY)
   Crisp, clean, professional Sahibinden style with slate typography
   ------------------------------------------------------------------------- */
:root,
html[data-theme="light"],
body[data-theme="light"] {
  --bg: #f8fafc;                    /* Soft slate canvas */
  --c: #ffffff;                     /* Crisp pure white card surface */
  --c2: #f1f5f9;                    /* Secondary surface for headers & wells */
  --c3: #e2e8f0;                    /* Subtle tertiary surface & hover */
  --b: #e2e8f0;                     /* Clean border divider */
  --b-light: #f8fafc;
  --t: #0f172a;                     /* Slate-900: sharp readable text */
  --t-sec: #334155;                 /* Slate-700: clear readable labels */
  --m: #64748b;                     /* Slate-500: timestamps & metadata */
  --p: #1e293b;
  --p-hover: #0f172a;
  --p-soft: rgba(30, 41, 59, 0.07);
  --btn-bg: #1e293b;
  --btn-hover: #334155;
  --btn-active: #0f172a;
  --brand: #ffdb00;                 /* Iconic Sahibinden yellow */
  --brand-text: #09090b;
  --link: #003399;                  /* Sahibinden classic navy link */
  --link-hover: #002266;
  --ok: #059669;
  --ok-bg: #ecfdf5;
  --ok-b: #a7f3d0;
  --warn: #d97706;
  --warn-bg: #fffbeb;
  --warn-b: #fde68a;
  --bad: #dc2626;
  --bad-bg: #fef2f2;
  --bad-b: #fecaca;
  --shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
  --sh: 0 1px 3px rgba(15, 23, 42, 0.08);
}

/* -------------------------------------------------------------------------
   2. CORE COLOR SYSTEM: DARK MODE (NIGHT)
   Deep obsidian canvas, charcoal card surfaces, pure white crisp typography
   Zero burned neon colors, zero inverted white blocks
   ------------------------------------------------------------------------- */
html[data-theme="dark"],
body[data-theme="dark"],
[data-theme="dark"] {
  --bg: #0f1015 !important;
  --c: #16171f !important;
  --c2: #1e1f2b !important;
  --c3: #282939 !important;
  --b: rgba(255, 255, 255, 0.12) !important;
  --b-light: rgba(255, 255, 255, 0.07) !important;
  --t: #ffffff !important;         /* Pure crisp white text */
  --t-sec: #d4d4dc !important;     /* Light slate readable text */
  --m: #9ca3af !important;         /* Neutral gray metadata */
  --p: #3b82f6 !important;
  --p-hover: #60a5fa !important;
  --p-soft: rgba(59, 130, 246, 0.14) !important;
  --btn-bg: #2563eb !important;
  --btn-hover: #1d4ed8 !important;
  --btn-active: #1e40af !important;
  --brand: #ffdb00 !important;
  --brand-text: #09090b !important;
  --link: #60a5fa !important;      /* Bright soft sky blue link */
  --link-hover: #93c5fd !important;
  --ok: #34d399 !important;
  --ok-bg: rgba(16, 185, 129, 0.15) !important;
  --ok-b: rgba(52, 211, 153, 0.3) !important;
  --warn: #fbbf24 !important;
  --warn-bg: rgba(245, 158, 11, 0.15) !important;
  --warn-b: rgba(251, 191, 36, 0.3) !important;
  --bad: #f87171 !important;
  --bad-bg: rgba(239, 68, 68, 0.15) !important;
  --bad-b: rgba(248, 113, 113, 0.3) !important;
  --shadow: 0 4px 16px rgba(0, 0, 0, 0.6) !important;
  --sh: 0 4px 16px rgba(0, 0, 0, 0.6) !important;
}

/* -------------------------------------------------------------------------
   3. GLOBAL CANVAS & LAYOUT POLISH
   ------------------------------------------------------------------------- */
html, body {
  background-color: var(--bg);
  color: var(--t);
  transition: background-color 0.15s ease, color 0.15s ease;
}

main#app {
  background-color: var(--bg);
  color: var(--t);
}

/* -------------------------------------------------------------------------
   4. CARDS, PANELS, SIDEBARS & SURFACES
   ------------------------------------------------------------------------- */
.card,
.panel,
.sidebar-box,
.sb-sidebar-card,
.sb-vitrin-box,
.sb-vitrin-card,
.table-card,
.modal-card,
.modal-box,
.admin-box,
.admin-card {
  background-color: var(--c) !important;
  border-color: var(--b) !important;
  color: var(--t) !important;
}

.panel-hd,
.card-hd,
.admin-hd,
.sidebar-hd {
  background-color: var(--c2) !important;
  border-color: var(--b) !important;
  color: var(--t) !important;
}

/* -------------------------------------------------------------------------
   5. LISTING DETAIL SHOWCASE (.lux-listing-shell & .sb50-*)
   ------------------------------------------------------------------------- */
/* Breadcrumbs and Links */
.sb50-breadcrumb-trail a,
.sb50-quick-links button,
.sb50-util-link,
.sb50-loc-links a,
.sb50-msg-action,
.sb50-report-link,
.sb50-photo-subbtn {
  color: var(--link) !important;
}

.sb50-breadcrumb-trail a:hover,
.sb50-quick-links button:hover,
.sb50-util-link:hover,
.sb50-loc-links a:hover,
.sb50-msg-action:hover,
.sb50-report-link:hover,
.sb50-photo-subbtn:hover {
  color: var(--link-hover) !important;
}

/* Top Admin / Staff Control Strips */
.lux-listing-shell > div[style*="background"] {
  background-color: var(--c2) !important;
  border-color: var(--b) !important;
  color: var(--t) !important;
}

.lux-listing-shell > div[style*="background"] span {
  color: var(--t) !important;
}

/* Edit Listing Form */
#edit-req-panel {
  background-color: var(--c) !important;
  border-color: var(--b) !important;
  color: var(--t) !important;
}

/* Photo Stage & Thumbs */
.sb50-gallery-box,
.sb50-thumbs-container {
  background-color: var(--c) !important;
  border-color: var(--b) !important;
}

.sb50-photo-Subbar {
  background-color: var(--c2) !important;
  border-color: var(--b) !important;
}

.sb50-main-photo-stage {
  background-color: var(--c2) !important;
}

.sb50-thumb-cell {
  background-color: var(--c2) !important;
}

/* DOTTED SPECIFICATION TABLE (Key-Value Pairs) */
.sb50-dotted-list {
  background: transparent !important;
}

.sb50-dotted-row {
  border-bottom: 1px dotted var(--b) !important;
  transition: background-color 0.12s ease;
}

.sb50-dotted-row:hover {
  background-color: var(--c2) !important;
}

.sb50-dotted-k {
  color: var(--t-sec) !important;
  font-weight: 700 !important;
}

.sb50-dotted-v {
  color: var(--t) !important;
  font-weight: 600 !important;
}

/* Seller Contact Box & Safety Tips */
.sb50-seller-card {
  background-color: var(--c2) !important;
  border: 1px solid var(--b) !important;
  border-radius: 6px !important;
}

.sb50-seller-name {
  color: var(--t) !important;
  font-weight: 800 !important;
}

.sb50-seller-since {
  color: var(--m) !important;
}

.sb50-phone-box {
  background-color: var(--c) !important;
  border-color: var(--b) !important;
  color: var(--t) !important;
}

.sb50-phone-label {
  color: var(--m) !important;
}

.sb50-phone-number {
  color: var(--t) !important;
}

.sb50-safety-card,
.sb50-quick-deal-card {
  background-color: var(--c) !important;
  border: 1px solid var(--b) !important;
  border-radius: 6px !important;
  color: var(--t) !important;
}

.sb50-safety-card p,
.sb50-safety-card span,
.sb50-quick-deal-card span {
  color: var(--t) !important;
}

/* -------------------------------------------------------------------------
   6. TAB PANELS (.sb50-tabs-bar & .sb-detail-tabs)
   ------------------------------------------------------------------------- */
.sb50-tabs-bar,
.sb-detail-tabs-wrap {
  border-bottom: 2px solid #ffdb00 !important;
}

.sb50-tab-btn,
.sb-detail-tab {
  background-color: var(--c2) !important;
  color: var(--t-sec) !important;
  border: 1px solid var(--b) !important;
  border-bottom: none !important;
  font-weight: 700 !important;
  transition: all 0.15s ease;
}

.sb50-tab-btn:hover:not(.active),
.sb-detail-tab:hover:not(.active) {
  background-color: var(--c3) !important;
  color: var(--t) !important;
}

.sb50-tab-btn.active,
.sb-detail-tab.active {
  background: #ffdb00 !important;
  color: #09090b !important;
  border-color: #eab308 !important;
  font-weight: 900 !important;
}

.sb50-tabs-content,
.sb-detail-tab-panel {
  background-color: var(--c) !important;
  border: 1px solid var(--b) !important;
  border-top: none !important;
  color: var(--t) !important;
}

/* -------------------------------------------------------------------------
   7. MULTI-COUNTRY ADMIN PANEL & DASHBOARDS
   ------------------------------------------------------------------------- */
#matloba-multi-country-admin-hub {
  background-color: var(--c) !important;
  border-color: var(--b) !important;
  color: var(--t) !important;
}

#matloba-multi-country-admin-hub h1,
#matloba-multi-country-admin-hub h2,
#matloba-multi-country-admin-hub h3,
#matloba-multi-country-admin-hub h4,
#matloba-multi-country-admin-hub h5,
#matloba-multi-country-admin-hub strong,
#matloba-multi-country-admin-hub label {
  color: var(--t) !important;
}

#matloba-multi-country-admin-hub p,
#matloba-multi-country-admin-hub span:not(.badge):not(.tag):not(.btn):not(.mtb-ltr-badge) {
  color: var(--t) !important;
}

.admin-subpanel-card {
  background-color: var(--c2) !important;
  border: 1px solid var(--b) !important;
  color: var(--t) !important;
}

/* -------------------------------------------------------------------------
   8. FORMS, INPUTS, SELECTS & TEXTAREAS
   ------------------------------------------------------------------------- */
input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
select,
textarea {
  background-color: var(--c2) !important;
  color: var(--t) !important;
  border: 1px solid var(--b) !important;
  font-family: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--link) !important;
  outline: none;
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.25) !important;
}

[data-theme="light"] input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
[data-theme="light"] select,
[data-theme="light"] textarea {
  background-color: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid #cbd5e1 !important;
}

[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
[data-theme="dark"] select,
[data-theme="dark"] textarea {
  background-color: #1e1f2b !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
}

[data-theme="dark"] select option {
  background-color: #16171f !important;
  color: #ffffff !important;
}

[data-theme="light"] select option {
  background-color: #ffffff !important;
  color: #0f172a !important;
}

/* -------------------------------------------------------------------------
   9. TABLES ACROSS THE ENTIRE PORTAL
   ------------------------------------------------------------------------- */
table {
  border-color: var(--b) !important;
  color: var(--t) !important;
}

th {
  background-color: var(--c2) !important;
  color: var(--t) !important;
  border-color: var(--b) !important;
  font-weight: 800 !important;
}

td {
  border-color: var(--b) !important;
  color: var(--t) !important;
}

tr:hover td {
  background-color: var(--c2) !important;
}

/* -------------------------------------------------------------------------
   10. MODALS & POPUPS
   ------------------------------------------------------------------------- */
.modal-backdrop,
#mobile-drawer-backdrop {
  background-color: rgba(0, 0, 0, 0.65) !important;
  backdrop-filter: blur(3px);
}

.modal-box,
.modal-card {
  background-color: var(--c) !important;
  border: 1px solid var(--b) !important;
  color: var(--t) !important;
  box-shadow: var(--shadow) !important;
}

.modal-hd,
.modal-title {
  background-color: var(--c2) !important;
  border-bottom: 1px solid var(--b) !important;
  color: var(--t) !important;
}

/* -------------------------------------------------------------------------
   11. TOP BAR & NAVIGATION
   Sahibinden Signature: Dark navbar with crisp brand yellow emblem
   ------------------------------------------------------------------------- */
header.top-bar {
  background: #0f1015 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #ffffff !important;
}

[data-theme="light"] header.top-bar {
  background: #111113 !important;
  border-bottom: 2px solid #27272a !important;
  color: #ffffff !important;
}

/* -------------------------------------------------------------------------
   12. THEME-AWARE SAFETY INTERCEPTORS (Anti-Reversal Shield)
   Ensures no rogue inline white styles appear in Dark Mode,
   and no rogue inline dark styles appear in Light Mode.
   ------------------------------------------------------------------------- */
[data-theme="dark"] :not(.matloba-print-light-sheet):not(.matloba-print-light-sheet *)[style*="background: #ffffff"],
[data-theme="dark"] :not(.matloba-print-light-sheet):not(.matloba-print-light-sheet *)[style*="background:#ffffff"],
[data-theme="dark"] :not(.matloba-print-light-sheet):not(.matloba-print-light-sheet *)[style*="background: #fff"],
[data-theme="dark"] :not(.matloba-print-light-sheet):not(.matloba-print-light-sheet *)[style*="background:#fff;"],
[data-theme="dark"] :not(.matloba-print-light-sheet):not(.matloba-print-light-sheet *)[style*="background:white"],
[data-theme="dark"] :not(.matloba-print-light-sheet):not(.matloba-print-light-sheet *)[style*="background: white"] {
  background-color: var(--c) !important;
  color: var(--t) !important;
  border-color: var(--b) !important;
}

[data-theme="dark"] :not(.matloba-print-light-sheet):not(.matloba-print-light-sheet *)[style*="background: #f8fafc"],
[data-theme="dark"] :not(.matloba-print-light-sheet):not(.matloba-print-light-sheet *)[style*="background:#f8fafc"],
[data-theme="dark"] :not(.matloba-print-light-sheet):not(.matloba-print-light-sheet *)[style*="background: #f1f5f9"],
[data-theme="dark"] :not(.matloba-print-light-sheet):not(.matloba-print-light-sheet *)[style*="background:#f1f5f9"] {
  background-color: var(--c2) !important;
  color: var(--t) !important;
  border-color: var(--b) !important;
}

/* Neutralize invisible dark ink text in Dark Mode */
[data-theme="dark"] [style*="color: #0f172a"],
[data-theme="dark"] [style*="color:#0f172a"],
[data-theme="dark"] [style*="color: #1e293b"],
[data-theme="dark"] [style*="color:#1e293b"],
[data-theme="dark"] [style*="color: #334155"],
[data-theme="dark"] [style*="color:#334155"],
[data-theme="dark"] [style*="color: #111827"],
[data-theme="dark"] [style*="color:#111827"],
[data-theme="dark"] [style*="color: #000000"],
[data-theme="dark"] [style*="color:#000000"],
[data-theme="dark"] [style*="color: #000"],
[data-theme="dark"] [style*="color:#000;"],
[data-theme="dark"] [style*="color: black"],
[data-theme="dark"] [style*="color:black"] {
  color: var(--t) !important;
}

/* Ensure Light Mode has crisp contrast */
[data-theme="light"] h1,
[data-theme="light"] h2,
[data-theme="light"] h3,
[data-theme="light"] h4,
[data-theme="light"] h5,
[data-theme="light"] h6,
[data-theme="light"] strong,
[data-theme="light"] b,
[data-theme="light"] label {
  color: #0f172a !important;
}

[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6,
[data-theme="dark"] strong,
[data-theme="dark"] b,
[data-theme="dark"] label {
  color: #ffffff !important;
}

/* -------------------------------------------------------------------------
   13. BUTTONS & INTERACTIVE CONTROLS
   ------------------------------------------------------------------------- */
.btn {
  font-family: inherit;
  transition: all 0.15s ease;
}

/* Secondary Button (.btn.s) */
[data-theme="light"] .btn.s,
[data-theme="light"] button.s,
[data-theme="light"] a.btn.s {
  background: #f1f5f9 !important;
  color: #0f172a !important;
  border: 1px solid #cbd5e1 !important;
}

[data-theme="light"] .btn.s:hover,
[data-theme="light"] button.s:hover {
  background: #e2e8f0 !important;
}

[data-theme="dark"] .btn.s,
[data-theme="dark"] button.s,
[data-theme="dark"] a.btn.s {
  background: #1e1f2b !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
}

[data-theme="dark"] .btn.s:hover,
[data-theme="dark"] button.s:hover {
  background: #282939 !important;
}

/* Direct Chat & WhatsApp Prominent Actions */
#btn-direct-chat-seller,
.direct-chat-link {
  background: #00b894 !important;
  color: #ffffff !important;
  border: none !important;
  font-weight: 800 !important;
}

/* Placeholders in both modes */
input::placeholder,
textarea::placeholder {
  color: var(--m) !important;
  opacity: 1;
}

/* Sticky Top Bar on Listing */
.sb50-sticky-bar {
  background: var(--c) !important;
  border-bottom: 1px solid var(--b) !important;
  color: var(--t) !important;
}

.sb50-sticky-title {
  color: var(--t) !important;
}

.sb50-sticky-meta span {
  color: var(--m) !important;
}

/* Clean scrollbars in dark mode */
[data-theme="dark"] ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

[data-theme="dark"] ::-webkit-scrollbar-track {
  background: #0f1015;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: #282939;
  border-radius: 4px;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background: #3a3b4e;
}