/* ============================================================
   DECORAWORLD — Shared Theme CSS
   Centralizes all CSS shared across Tailwind-based pages.
   Replaces ~200 lines of duplicated inline <style> per page.
   ============================================================ */

/* ── Spacing variables (shared across pages) ─────────────── */
:root {
  --spacing-xs:  0.25rem;
  --spacing-sm:  0.5rem;
  --spacing-md:  1rem;
  --spacing-lg:  1.5rem;
  --spacing-xl:  2.5rem;
}

/* ── Material Symbols Outlined ───────────────────────────── */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
  font-size: 20px;
  flex-shrink: 0;
}

/* ── Global font ─────────────────────────────────────────── */
* { font-family: 'Inter', system-ui, sans-serif; }
.font-display { font-family: 'Newsreader', Georgia, serif; }

/* ── Global theme transition ─────────────────────────────── */
*, *::before, *::after {
  transition: background-color 0.28s ease, color 0.28s ease,
              border-color 0.28s ease !important;
}

/* ── Sidebar scrollbar ───────────────────────────────────── */
aside::-webkit-scrollbar       { width: 4px; }
aside::-webkit-scrollbar-track { background: transparent; }
aside::-webkit-scrollbar-thumb { background: #2a2a2a; border-radius: 2px; }
::-webkit-scrollbar            { width: 4px; }
::-webkit-scrollbar-track      { background: #0d0d0d; }
::-webkit-scrollbar-thumb      { background: #2a2a2a; border-radius: 10px; }

/* ── Logo cross-fade (dark/light) ────────────────────────── */
.logo-wrap { position: relative; height: 44px; min-width: 160px; display: flex; align-items: center; }
#dbLogoDark, #dbLogoLight {
  height: 44px; width: auto; transition: opacity 0.32s ease;
  position: absolute; top: 50%; left: 0; transform: translateY(-50%);
}
html.dark  #dbLogoDark  { opacity: 1; pointer-events: auto;  }
html.dark  #dbLogoLight { opacity: 0; pointer-events: none;  }
html:not(.dark) #dbLogoDark  { opacity: 0; pointer-events: none; }
html:not(.dark) #dbLogoLight { opacity: 1; pointer-events: auto; }

/* ── Sidebar navigation ──────────────────────────────────── */
.nav-trigger, .nav-link {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 24px; font-size: 13px; font-weight: 500;
  color: rgba(255,255,255,0.52); transition: color 0.18s;
  cursor: pointer; text-decoration: none; width: 100%;
  border-left: 3px solid transparent; box-sizing: border-box;
}
.nav-trigger:hover, .nav-link:hover { color: rgba(255,255,255,0.88); }
.nav-link.active, .nav-link-active {
  border-left-color: #eeb32b;
  background: rgba(238,179,43,0.08);
  color: #eeb32b;
  padding-left: 21px;
}
.nav-section-label {
  padding: 14px 24px 3px; font-size: 9px; font-weight: 700;
  letter-spacing: 0.22em; color: rgba(255,255,255,0.22);
  text-transform: uppercase;
}
.nav-sub-item {
  display: block; padding: 7px 16px 7px 54px;
  font-size: 11.5px; color: rgba(255,255,255,0.36);
  text-decoration: none; transition: color 0.18s;
}
.nav-sub-item:hover       { color: #eeb32b; }
.nav-sub-item.active      { color: #eeb32b; font-weight: 600; }
.nav-submenu              { display: flex; flex-direction: column; background: rgba(255,255,255,0.012); }
.nav-submenu.hidden       { display: none; }

/* ── Collapsible sidebar ─────────────────────────────────── */
aside { transition: width 0.28s cubic-bezier(.4,0,.2,1); }
.sidebar-collapsed { width: 68px !important; }
.sidebar-collapsed .logo-wrap                                          { display: none; }
.sidebar-collapsed .sidebar-logo-mini                                  { display: flex !important; }
.sidebar-collapsed .nav-section-label                                  { display: none; }
.sidebar-collapsed .nav-trigger > span:not(.material-symbols-outlined),
.sidebar-collapsed .nav-link   > span:not(.material-symbols-outlined)  { display: none; }
.sidebar-collapsed .nav-trigger > .ml-auto                             { display: none; }
.sidebar-collapsed .nav-trigger,
.sidebar-collapsed .nav-link   { padding: 10px 0; justify-content: center; gap: 0; border-left-width: 0; }
.sidebar-collapsed .nav-link.active, .sidebar-collapsed .nav-link-active { border-left-width: 0; padding-left: 0; background: rgba(238,179,43,0.10); }
.sidebar-collapsed .nav-link.active .material-symbols-outlined,
.sidebar-collapsed .nav-link-active .material-symbols-outlined         { color: #eeb32b; }
.sidebar-collapsed .nav-submenu                                        { display: none !important; }
.sidebar-collapsed .sidebar-user-info                                  { display: none; }
.sidebar-collapsed .sidebar-user-footer                                { justify-content: center; padding: 12px 0; }
.sidebar-collapsed .sidebar-user-footer > div                          { justify-content: center; padding: 0; background: none; }
.sidebar-collapsed .sidebar-user-footer button[onclick="logout()"]     { display: none; }
.sidebar-collapsed .sidebar-collapse-btn                               { margin: 0 auto; }
.sidebar-logo-mini { display: none; align-items: center; justify-content: center; height: 36px; }

/* Tooltip on collapsed icons */
.sidebar-collapsed .nav-trigger,
.sidebar-collapsed .nav-link { position: relative; }
.sidebar-collapsed .nav-trigger:hover::after,
.sidebar-collapsed .nav-link:hover::after {
  content: attr(data-tooltip);
  position: absolute; left: 68px; top: 50%; transform: translateY(-50%);
  background: #1e1e1e; color: #fff; font-size: 11px; padding: 4px 10px;
  border-radius: 4px; white-space: nowrap; z-index: 999;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3); pointer-events: none;
}
html:not(.dark) .sidebar-collapsed .nav-trigger:hover::after,
html:not(.dark) .sidebar-collapsed .nav-link:hover::after {
  background: #fff; color: #1a1a1a; box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}

/* ── Light mode: layout ──────────────────────────────────── */
html:not(.dark) body    { background-color: #F5F2EE !important; color: #1A1A1A; }
html:not(.dark) aside   { background-color: #FFFFFF !important; border-right-color: rgba(139,125,90,0.15) !important; }
html:not(.dark) header  { background-color: #FFFFFF !important; border-bottom-color: rgba(139,125,90,0.15) !important; }
html:not(.dark) main    { background-color: #F5F2EE !important; }
html:not(.dark) .main-wrapper { background: #F5F2EE !important; }

/* ── Light mode: sidebar nav ─────────────────────────────── */
html:not(.dark) .nav-trigger, html:not(.dark) .nav-link           { color: rgba(26,26,26,0.55) !important; }
html:not(.dark) .nav-trigger:hover, html:not(.dark) .nav-link:hover { color: #1A1A1A !important; background: rgba(0,0,0,0.04) !important; }
html:not(.dark) .nav-link.active, html:not(.dark) .nav-link-active { color: #8B7D5A !important; background: rgba(139,125,90,0.08) !important; border-left-color: #8B7D5A !important; }
html:not(.dark) .nav-sub-item                                      { color: rgba(26,26,26,0.42) !important; }
html:not(.dark) .nav-sub-item:hover, html:not(.dark) .nav-sub-item.active { color: #8B7D5A !important; }
html:not(.dark) .nav-section-label                                 { color: rgba(26,26,26,0.28) !important; }
html:not(.dark) .nav-submenu                                       { background: rgba(0,0,0,0.02) !important; }
html:not(.dark) #sidebarUserName                                   { color: #1A1A1A !important; }

/* ── Light mode: text-white/* overrides ─────────────────── */
html:not(.dark) .text-white    { color: #1a1a1a !important; }
html:not(.dark) .text-white\/80 { color: rgba(26,26,26,0.8) !important; }
html:not(.dark) .text-white\/78 { color: rgba(26,26,26,0.78) !important; }
html:not(.dark) .text-white\/70 { color: rgba(26,26,26,0.7) !important; }
html:not(.dark) .text-white\/60 { color: rgba(26,26,26,0.6) !important; }
html:not(.dark) .text-white\/52 { color: rgba(26,26,26,0.52) !important; }
html:not(.dark) .text-white\/45 { color: rgba(26,26,26,0.45) !important; }
html:not(.dark) .text-white\/40 { color: rgba(26,26,26,0.45) !important; }
html:not(.dark) .text-white\/38 { color: rgba(26,26,26,0.42) !important; }
html:not(.dark) .text-white\/35 { color: rgba(26,26,26,0.42) !important; }
html:not(.dark) .text-white\/32 { color: rgba(26,26,26,0.38) !important; }
html:not(.dark) .text-white\/30 { color: rgba(26,26,26,0.35) !important; }
html:not(.dark) .text-white\/28 { color: rgba(26,26,26,0.32) !important; }
html:not(.dark) .text-white\/25 { color: rgba(26,26,26,0.3) !important; }
html:not(.dark) .text-white\/22 { color: rgba(26,26,26,0.28) !important; }
html:not(.dark) .text-slate-100 { color: #1a1a1a !important; }
html:not(.dark) .text-slate-200 { color: rgba(26,26,26,0.85) !important; }

/* ── Light mode: arbitrary color overrides ───────────────── */
html:not(.dark) [class*="text-[rgba(255,255,255"]   { color: rgba(26,26,26,0.7) !important; }
html:not(.dark) [class*="bg-[rgba(255,255,255"]     { background-color: rgba(0,0,0,0.06) !important; }
html:not(.dark) [class*="border-[rgba(255,255,255"] { border-color: rgba(0,0,0,0.12) !important; }
html:not(.dark) [style*="background:#1e1e1e"]       { background: #fff !important; }
html:not(.dark) [style*="background:#252525"]       { background: #fff !important; }
html:not(.dark) [style*="color:rgba(255,255,255"]   { color: rgba(26,26,26,0.7) !important; }
html:not(.dark) [style*="color: rgba(255,255,255"]  { color: rgba(26,26,26,0.7) !important; }

/* ── Light mode: headings ────────────────────────────────── */
html:not(.dark) h1 { color: #1a1a1a !important; }
html:not(.dark) h2 { color: #1a1a1a !important; }
html:not(.dark) h3 { color: rgba(26,26,26,0.85) !important; }
html:not(.dark) #themeToggle { border-color: rgba(0,0,0,0.15) !important; color: rgba(0,0,0,0.5) !important; }

/* ── Light mode: CRUD components ─────────────────────────── */
html:not(.dark) .dw-card, html:not(.dark) .card-dark { background: #fff !important; border-color: rgba(139,125,90,0.15) !important; }
html:not(.dark) .dw-input,
html:not(.dark) .dw-select,
html:not(.dark) .dw-textarea,
html:not(.dark) textarea                             { background: #fff !important; border-color: rgba(139,125,90,0.2) !important; color: #1a1a1a !important; }
html:not(.dark) .dw-select option                   { background: #fff !important; color: #1a1a1a !important; }
html:not(.dark) .dw-label                           { color: rgba(26,26,26,0.5) !important; }
html:not(.dark) .dw-text-primary                    { color: #1A1A1A !important; }
html:not(.dark) .dw-text-muted                      { color: rgba(26,26,26,0.5) !important; }
html:not(.dark) select                              { background: #fff !important; border-color: rgba(139,125,90,0.2) !important; color: #1a1a1a !important; }
html:not(.dark) input[type="text"],
html:not(.dark) input[type="number"],
html:not(.dark) input[type="date"],
html:not(.dark) input[type="email"],
html:not(.dark) input[type="tel"]                   { background: #fff !important; border-color: rgba(139,125,90,0.2) !important; color: #1a1a1a !important; }

/* ── Light mode: tables ──────────────────────────────────── */
html:not(.dark) table    { color: #1a1a1a !important; }
html:not(.dark) th       { color: rgba(26,26,26,0.6) !important; background: rgba(0,0,0,0.03) !important; }
html:not(.dark) td       { color: rgba(26,26,26,0.8) !important; }
html:not(.dark) tbody tr:hover { background: rgba(0,0,0,0.02) !important; }

/* ── Light mode: stat/metric cards ──────────────────────── */
html:not(.dark) .stat-card, html:not(.dark) .kpi-card { background: #fff !important; border-color: rgba(139,125,90,0.15) !important; }
html:not(.dark) .stat-value  { color: #8B7D5A !important; }
html:not(.dark) .stat-label  { color: rgba(26,26,26,0.5) !important; }

/* ── Light mode: form sections ───────────────────────────── */
html:not(.dark) .form-section       { background: #fff !important; border-color: rgba(139,125,90,0.15) !important; }
html:not(.dark) .form-section-title,
html:not(.dark) .section-sep        { color: rgba(26,26,26,0.5) !important; border-color: rgba(139,125,90,0.12) !important; }
html:not(.dark) .form-body          { color: #1a1a1a !important; }

/* ── Light mode: border-white/* overrides ────────────────── */
html:not(.dark) .border-white\/\[0\.05\] { border-color: rgba(139,125,90,0.12) !important; }
html:not(.dark) .bg-white\/\[0\.03\]     { background-color: rgba(0,0,0,0.04) !important; }
html:not(.dark) .bg-white\/\[0\.04\]     { background-color: rgba(0,0,0,0.04) !important; }

/* ── Buttons ──────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 5px; padding: 6px 12px; font-size: 12px; font-weight: 500;
  border-radius: 5px; cursor: pointer; text-decoration: none;
  border: 1px solid transparent; transition: all 0.18s;
}
.btn-sm           { padding: 4px 9px !important; font-size: 11px !important; }
.btn-primary      { background: #eeb32b; color: #0d0d0d; border-color: #eeb32b; }
.btn-primary:hover { background: #d9a427; border-color: #d9a427; }
.btn-secondary    { border-color: rgba(255,255,255,0.1); color: rgba(255,255,255,0.6); background: transparent; }
.btn-secondary:hover { border-color: rgba(255,255,255,0.22); color: rgba(255,255,255,0.88); }
.btn-ghost        { background: transparent; border-color: transparent; color: rgba(255,255,255,0.5); }
.btn-danger       { border-color: rgba(248,113,113,0.25); color: rgba(248,113,113,0.65); background: transparent; }
.btn-danger:hover { border-color: rgba(248,113,113,0.5); color: rgb(248,113,113); }
.table-actions    { display: flex; align-items: center; gap: 6px; }

/* ── Light mode: buttons ─────────────────────────────────── */
html:not(.dark) .btn-primary               { background: #8B7D5A !important; color: #fff !important; border-color: #8B7D5A !important; }
html:not(.dark) .btn-secondary,
html:not(.dark) .btn-ghost                 { background: rgba(0,0,0,0.04) !important; color: rgba(26,26,26,0.7) !important; border-color: rgba(0,0,0,0.12) !important; }
html:not(.dark) .btn-secondary:hover,
html:not(.dark) .btn-ghost:hover           { border-color: rgba(139,125,90,0.4) !important; color: #1A1A1A !important; }
html:not(.dark) .btn-danger               { border-color: rgba(220,38,38,0.25) !important; color: rgba(220,38,38,0.65) !important; }
html:not(.dark) .btn-danger:hover         { border-color: rgba(220,38,38,0.5) !important; color: rgb(220,38,38) !important; }

/* ── Icon buttons ────────────────────────────────────────── */
.action-buttons { display: flex; gap: 4px; align-items: center; }
.btn-icon {
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: none; cursor: pointer;
  padding: 5px 7px; border-radius: 6px;
  color: rgba(255,255,255,0.35); transition: background 0.12s, color 0.12s;
  text-decoration: none;
}
.btn-icon .material-symbols-outlined { font-size: 18px; }
.btn-icon:hover                      { background: rgba(255,255,255,0.06); color: #eeb32b; }
.btn-icon.delete:hover               { background: rgba(248,113,113,0.12); color: #f87171; }
html:not(.dark) .btn-icon            { color: rgba(26,26,26,0.4); }
html:not(.dark) .btn-icon:hover      { background: rgba(0,0,0,0.05); color: #8B7D5A; }
html:not(.dark) .btn-icon.delete:hover { background: rgba(239,68,68,0.08); color: #dc2626; }

/* ── dw-table (JS-rendered rows) ─────────────────────────── */
.dw-table { width: 100%; border-collapse: collapse; }
.dw-table thead { background: #0d0d0d; }
.dw-table thead tr { border-bottom: 1px solid rgba(255,255,255,0.06); }
.dw-table th {
  padding: 10px 14px; text-align: left;
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.15em;
  text-transform: uppercase; color: rgba(255,255,255,0.32); white-space: nowrap;
}
.dw-table tbody tr { border-bottom: 1px solid rgba(255,255,255,0.03); transition: background 0.14s; }
.dw-table tbody tr:hover { background: rgba(255,255,255,0.025); }
.dw-table tbody td {
  padding: 11px 14px; font-size: 12.5px;
  color: rgba(255,255,255,0.72); vertical-align: middle;
}
.dw-table td strong { color: #e8e0d4; font-weight: 600; }
html:not(.dark) .dw-table thead      { background: #F5F2EE; }
html:not(.dark) .dw-table thead th   { color: rgba(26,26,26,0.45) !important; }
html:not(.dark) .dw-table thead tr   { border-color: rgba(139,125,90,0.12) !important; }
html:not(.dark) .dw-table tbody tr   { border-color: rgba(139,125,90,0.08) !important; }
html:not(.dark) .dw-table tbody tr:hover { background: rgba(0,0,0,0.03) !important; }
html:not(.dark) .dw-table tbody td   { color: rgba(26,26,26,0.75) !important; }
html:not(.dark) .dw-table td strong  { color: #1A1A1A; }

/* ── Badges / status pills ───────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; padding: 3px 10px;
  border-radius: 20px; font-size: 11px; font-weight: 600;
  letter-spacing: 0.3px; white-space: nowrap;
}
.badge-warning   { background: rgba(251,191,36,0.15);  color: #fbbf24; }
.badge-info      { background: rgba(96,165,250,0.15);  color: #60a5fa; }
.badge-primary   { background: rgba(238,179,43,0.15);  color: #eeb32b; }
.badge-success   { background: rgba(74,222,128,0.15);  color: #4ade80; }
.badge-secondary { background: rgba(100,100,100,0.15); color: #9ca3af; }
.badge-danger    { background: rgba(248,113,113,0.15); color: #f87171; }

/* ── Toast notification (centered snackbar) ─────────────── */
.toast-container {
  position: fixed !important;
  top: auto !important;
  bottom: 32px !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  z-index: 9999 !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.toast {
  min-width: 280px;
  max-width: 440px;
  padding: 12px 20px;
  border-radius: 10px;
  border-left: none !important;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 500;
  box-shadow: 0 8px 30px rgba(0,0,0,0.35);
  animation: toastIn 0.35s cubic-bezier(.4,0,.2,1);
  backdrop-filter: blur(12px);
}
.toast.success { background: rgba(22,163,74,0.92); color: #fff; }
.toast.error   { background: rgba(220,38,38,0.92); color: #fff; }
.toast.warning { background: rgba(234,179,8,0.92); color: #0d0d0d; }
.toast.info    { background: rgba(59,130,246,0.92); color: #fff; }
.toast-message { flex: 1; font-size: 13px; color: inherit; }
@keyframes toastIn {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}