/* ===================================================================
   CSS VARIABLES — accent colour tokens
   =================================================================== */
:root {
  --accent:        #c8f04a;
  --accent-rgb:    200,240,74;
  --accent-muted:  rgba(200,240,74,0.1);
  --accent-focus:  rgba(200,240,74,0.08);
  --accent-border: rgba(200,240,74,0.5);
}
[data-accent="blue"] {
  --accent:        #3b82f6;
  --accent-rgb:    59,130,246;
  --accent-muted:  rgba(59,130,246,0.1);
  --accent-focus:  rgba(59,130,246,0.08);
  --accent-border: rgba(59,130,246,0.5);
}
[data-accent="violet"] {
  --accent:        #7c3aed;
  --accent-rgb:    124,58,237;
  --accent-muted:  rgba(124,58,237,0.1);
  --accent-focus:  rgba(124,58,237,0.08);
  --accent-border: rgba(124,58,237,0.5);
}
[data-accent="orange"] {
  --accent:        #f97316;
  --accent-rgb:    249,115,22;
  --accent-muted:  rgba(249,115,22,0.1);
  --accent-focus:  rgba(249,115,22,0.08);
  --accent-border: rgba(249,115,22,0.5);
}

/* ===================================================================
   BASE COMPONENTS
   =================================================================== */
.bg-radial-lime { background: radial-gradient(circle, rgba(var(--accent-rgb),0.06) 0%, transparent 65%); }
.bg-radial-teal { background: radial-gradient(circle, rgba(127,255,212,0.05) 0%, transparent 65%); }

.nav-item { position: relative; }
.nav-item.active::after {
  content:''; position:absolute; bottom:-2px; left:50%; transform:translateX(-50%);
  width:20px; height:2px; background: var(--accent); border-radius:2px;
}

.scrollbar-thin::-webkit-scrollbar { width:3px; height:4px; }
.scrollbar-thin::-webkit-scrollbar-track { background:transparent; }
.scrollbar-thin::-webkit-scrollbar-thumb { background:#2a2b33; border-radius:4px; }

.fi {
  width:100%; background:#1c1d25; border:1px solid #2a2b33; border-radius:12px;
  padding:10px 14px; font-size:13px; color:#fff; outline:none;
  transition:border-color .2s,box-shadow .2s; font-family:'DM Sans',sans-serif;
}
.fi::placeholder { color:#52525b; }
.fi:focus { border-color: var(--accent-border); box-shadow: 0 0 0 2px var(--accent-focus); }
select.fi option { background:#1c1d25; }

.card { background:#13141a; border:1px solid #2a2b33; border-radius:16px; padding:24px; }
.st { font-family:'Playfair Display',serif; font-size:15px; color:#fff; margin-bottom:16px; display:flex; align-items:center; gap:8px; }
.st::after { content:''; flex:1; height:1px; background:#2a2b33; }
.fl { display:block; font-size:11px; font-weight:500; color:#71717a; text-transform:uppercase; letter-spacing:.07em; margin-bottom:6px; }

/* Profit colours in quotation_edit */
.pp { color: var(--accent); }
.pn { color: #f87171; }

/* ===================================================================
   THEME TOGGLE — sun/moon icons
   =================================================================== */
.theme-icon-sun  { display: block; }
.theme-icon-moon { display: none; }
[data-theme="light"] .theme-icon-sun  { display: none; }
[data-theme="light"] .theme-icon-moon { display: block; }

/* ===================================================================
   ACCENT BUTTON — active outline indicator
   =================================================================== */
[data-accent="lime"]   [data-accent-btn="lime"],
[data-accent="blue"]   [data-accent-btn="blue"],
[data-accent="violet"] [data-accent-btn="violet"],
[data-accent="orange"] [data-accent-btn="orange"] {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ===================================================================
   ACCENT OPTION BUTTONS (settings page full-width buttons)
   =================================================================== */
.accent-opt { border-color: #2a2b33; color: #71717a; background: transparent; }
.accent-opt:hover { border-color: var(--accent); color: #fff; }
[data-accent="lime"]   .accent-opt[data-accent-option="lime"],
[data-accent="blue"]   .accent-opt[data-accent-option="blue"],
[data-accent="violet"] .accent-opt[data-accent-option="violet"],
[data-accent="orange"] .accent-opt[data-accent-option="orange"] {
  border-color: var(--accent) !important;
  color: var(--accent) !important;
}

/* THEME OPTION BUTTONS (settings page) */
.theme-opt { border-color: #2a2b33; color: #71717a; background: transparent; }
.theme-opt:hover { border-color: var(--accent); }
[data-theme="dark"]  .theme-opt[data-theme-option="dark"],
[data-theme="light"] .theme-opt[data-theme-option="light"] {
  border-color: var(--accent) !important;
  color: var(--accent) !important;
}

/* ===================================================================
   ACCENT OVERRIDES — Tailwind lime classes
   =================================================================== */

/* Blue */
[data-accent="blue"] .text-lime-300  { color: #60a5fa !important; }
[data-accent="blue"] .text-lime-400  { color: #3b82f6 !important; }
[data-accent="blue"] .bg-lime-300    { background-color: #3b82f6 !important; }
[data-accent="blue"] .hover\:bg-lime-200:hover   { background-color: #60a5fa !important; }
[data-accent="blue"] .bg-lime-300\/10            { background-color: rgba(59,130,246,0.1) !important; }
[data-accent="blue"] .border-lime-300\/20        { border-color: rgba(59,130,246,0.2) !important; }
[data-accent="blue"] .hover\:text-lime-300:hover { color: #60a5fa !important; }

/* Violet */
[data-accent="violet"] .text-lime-300  { color: #a78bfa !important; }
[data-accent="violet"] .text-lime-400  { color: #8b5cf6 !important; }
[data-accent="violet"] .bg-lime-300    { background-color: #7c3aed !important; }
[data-accent="violet"] .hover\:bg-lime-200:hover   { background-color: #a78bfa !important; }
[data-accent="violet"] .bg-lime-300\/10            { background-color: rgba(124,58,237,0.1) !important; }
[data-accent="violet"] .border-lime-300\/20        { border-color: rgba(124,58,237,0.2) !important; }
[data-accent="violet"] .hover\:text-lime-300:hover { color: #a78bfa !important; }

/* Orange */
[data-accent="orange"] .text-lime-300  { color: #fb923c !important; }
[data-accent="orange"] .text-lime-400  { color: #f97316 !important; }
[data-accent="orange"] .bg-lime-300    { background-color: #f97316 !important; }
[data-accent="orange"] .hover\:bg-lime-200:hover   { background-color: #fb923c !important; }
[data-accent="orange"] .bg-lime-300\/10            { background-color: rgba(249,115,22,0.1) !important; }
[data-accent="orange"] .border-lime-300\/20        { border-color: rgba(249,115,22,0.2) !important; }
[data-accent="orange"] .hover\:text-lime-300:hover { color: #fb923c !important; }

/* Row being edited by another user */
tr.row-editing { opacity: 0.5; pointer-events: none; }
tr.row-editing:hover { background: none !important; }
tr.row-editing td:first-child { border-left-color: transparent !important; }

/* Row hover in quotations table */
[data-accent="blue"]   .row-hover:hover { background: rgba(59,130,246,0.03) !important; }
[data-accent="blue"]   tr.row-hover:hover td:first-child { border-left-color: rgba(59,130,246,0.5) !important; }
[data-accent="violet"] .row-hover:hover { background: rgba(124,58,237,0.03) !important; }
[data-accent="violet"] tr.row-hover:hover td:first-child { border-left-color: rgba(124,58,237,0.5) !important; }
[data-accent="orange"] .row-hover:hover { background: rgba(249,115,22,0.03) !important; }
[data-accent="orange"] tr.row-hover:hover td:first-child { border-left-color: rgba(249,115,22,0.5) !important; }

/* Dashboard period-btn.active uses accent colour */
.period-btn.active { background: var(--accent) !important; border-color: var(--accent) !important; color: #0b0c10 !important; font-weight: 500; }
[data-accent="violet"] .period-btn.active,
[data-accent="blue"]   .period-btn.active { color: #fff !important; }

/* Dashboard bar-fill-lime */
[data-accent="blue"]   .bar-fill-lime { background: #3b82f6 !important; }
[data-accent="violet"] .bar-fill-lime { background: #7c3aed !important; }
[data-accent="orange"] .bar-fill-lime { background: #f97316 !important; }

/* ===================================================================
   LIGHT THEME OVERRIDES
   =================================================================== */

/* Backgrounds */
[data-theme="light"] .bg-\[\#0b0c10\]  { background-color: #e2e8f0 !important; }
[data-theme="light"] .bg-\[\#13141a\]  { background-color: #f8fafc !important; }
[data-theme="light"] .bg-\[\#1c1d25\]  { background-color: #edf2f7 !important; }
[data-theme="light"] header             { background-color: rgba(226,232,240,0.9) !important; }

/* Borders */
[data-theme="light"] .border-\[\#2a2b33\] { border-color: #e2e8f0 !important; }

/* Text */
[data-theme="light"] .text-white            { color: #111827 !important; }
[data-theme="light"] .text-zinc-100         { color: #1e293b !important; }
[data-theme="light"] .text-zinc-300         { color: #374151 !important; }
[data-theme="light"] .text-zinc-400         { color: #475569 !important; }
[data-theme="light"] .text-zinc-500         { color: #64748b !important; }
[data-theme="light"] .text-zinc-600         { color: #64748b !important; }
[data-theme="light"] .text-zinc-700         { color: #374151 !important; }
[data-theme="light"] .hover\:text-white:hover { color: #111827 !important; }

/* Components */
[data-theme="light"] .card          { background: #f8fafc; border-color: #cbd5e1; }
[data-theme="light"] .fi            { background: #ffffff; border-color: #cbd5e1; color: #111827; }
[data-theme="light"] .fi::placeholder { color: #94a3b8; }
[data-theme="light"] select.fi option { background: #ffffff; color: #111827; }
[data-theme="light"] .st            { color: #111827; }
[data-theme="light"] .st::after     { background: #e2e8f0; }
[data-theme="light"] .fl            { color: #64748b; }
[data-theme="light"] .scrollbar-thin::-webkit-scrollbar-thumb { background: #cbd5e1; }
[data-theme="light"] .bg-radial-lime { background: radial-gradient(circle, rgba(var(--accent-rgb),0.10) 0%, transparent 65%); }
[data-theme="light"] .bg-radial-teal { background: radial-gradient(circle, rgba(127,255,212,0.08) 0%, transparent 65%); }

/* Dashboard inline-style class overrides */
[data-theme="light"] .kpi-card          { background: #ffffff !important; border-color: #e2e8f0 !important; }
[data-theme="light"] .kpi-card:hover    { border-color: #cbd5e1 !important; }
[data-theme="light"] .section-title     { color: #111827 !important; }
[data-theme="light"] .section-title::after { background: #e2e8f0 !important; }
[data-theme="light"] .bar-track         { background: #e2e8f0 !important; }
[data-theme="light"] .period-btn        { border-color: #e2e8f0; color: #64748b; background: #f8fafc; }
[data-theme="light"] .period-btn:hover  { color: #111827; border-color: #94a3b8; }
[data-theme="light"] .top-row           { border-color: #f1f5f9 !important; }
[data-theme="light"] .top-label         { color: #374151 !important; }
[data-theme="light"] .top-value         { color: #64748b !important; }
[data-theme="light"] .top-num           { color: #94a3b8 !important; }

/* Table row dividers */
[data-theme="light"] .border-\[\#1e1f26\] { border-color: #e9eef4 !important; }

/* Row hover — make noticeably visible on white background */
[data-theme="light"] .row-hover:hover                    { background: rgba(0,0,0,0.04) !important; }
[data-theme="light"] tr.row-hover:hover td:first-child   { border-left-color: var(--accent) !important; }

/* Zinc "cancelled / not-sent" badges — dark bg looks jarring on white */
[data-theme="light"] .bg-zinc-800   { background-color: #f1f5f9 !important; }
[data-theme="light"] .border-zinc-700 { border-color: #e2e8f0 !important; }

/* Status badge text & bg — darker for light-mode contrast */
/* lime (approved) */
[data-theme="light"] .text-lime-300       { color: #3f6212 !important; }
[data-theme="light"] .bg-lime-300\/10     { background-color: rgba(63,98,18,0.13) !important; }
[data-theme="light"] .border-lime-300\/20 { border-color: rgba(63,98,18,0.35) !important; }
/* amber (negotiating) */
[data-theme="light"] .text-amber-400       { color: #92400e !important; }
[data-theme="light"] .bg-amber-400\/10     { background-color: rgba(146,64,14,0.13) !important; }
[data-theme="light"] .border-amber-400\/20 { border-color: rgba(146,64,14,0.35) !important; }
/* teal (finished) */
[data-theme="light"] .text-teal-400       { color: #0f766e !important; }
[data-theme="light"] .bg-teal-400\/10     { background-color: rgba(15,118,110,0.13) !important; }
[data-theme="light"] .border-teal-400\/20 { border-color: rgba(15,118,110,0.35) !important; }
/* red (refused) */
[data-theme="light"] .text-red-400       { color: #b91c1c !important; }
[data-theme="light"] .bg-red-500\/10     { background-color: rgba(185,28,28,0.13) !important; }
[data-theme="light"] .border-red-500\/20 { border-color: rgba(185,28,28,0.35) !important; }

/* hover:text-lime-300 in light mode → dark green too */
[data-theme="light"] .hover\:text-lime-300:hover { color: #3f6212 !important; }

/* group-hover lime text */
[data-theme="light"] .group:hover .group-hover\:text-lime-300 { color: #3f6212 !important; }

/* Non-lime accent + light mode — use darker shades of the accent colour */
[data-theme="light"][data-accent="blue"] .text-lime-300       { color: #1d4ed8 !important; }
[data-theme="light"][data-accent="blue"] .bg-lime-300\/10     { background-color: rgba(29,78,216,0.08) !important; }
[data-theme="light"][data-accent="blue"] .border-lime-300\/20 { border-color: rgba(29,78,216,0.20) !important; }
[data-theme="light"][data-accent="blue"] .hover\:text-lime-300:hover { color: #1d4ed8 !important; }
[data-theme="light"][data-accent="blue"] .group:hover .group-hover\:text-lime-300 { color: #1d4ed8 !important; }

[data-theme="light"][data-accent="violet"] .text-lime-300       { color: #5b21b6 !important; }
[data-theme="light"][data-accent="violet"] .bg-lime-300\/10     { background-color: rgba(91,33,182,0.08) !important; }
[data-theme="light"][data-accent="violet"] .border-lime-300\/20 { border-color: rgba(91,33,182,0.20) !important; }
[data-theme="light"][data-accent="violet"] .hover\:text-lime-300:hover { color: #5b21b6 !important; }
[data-theme="light"][data-accent="violet"] .group:hover .group-hover\:text-lime-300 { color: #5b21b6 !important; }

[data-theme="light"][data-accent="orange"] .text-lime-300       { color: #c2410c !important; }
[data-theme="light"][data-accent="orange"] .bg-lime-300\/10     { background-color: rgba(194,65,12,0.08) !important; }
[data-theme="light"][data-accent="orange"] .border-lime-300\/20 { border-color: rgba(194,65,12,0.20) !important; }
[data-theme="light"][data-accent="orange"] .hover\:text-lime-300:hover { color: #c2410c !important; }
[data-theme="light"][data-accent="orange"] .group:hover .group-hover\:text-lime-300 { color: #c2410c !important; }

/* Settings tab-btn overrides */
[data-theme="light"] .tab-btn          { color: #64748b !important; }
[data-theme="light"] .tab-btn:hover    { color: #111827 !important; }
[data-theme="light"] .tab-btn.active   { background: #f1f5f9 !important; border-color: #e2e8f0 !important; color: #111827 !important; }

/* Accent / theme option buttons in light mode */
[data-theme="light"] .accent-opt { border-color: #e2e8f0; color: #64748b; }
[data-theme="light"] .accent-opt:hover { color: #111827; }
[data-theme="light"] .theme-opt  { border-color: #e2e8f0; color: #64748b; }
[data-theme="light"] .theme-opt:hover  { color: #111827; }