/* Alpine.js x-cloak — hide element until Alpine evaluates its x-show/x-data.
   Without this rule, x-cloak is a no-op and elements flash visible briefly,
   or stay visible permanently when the binding fails to mount.
   (Bug found 2026-05-26: the W&D Shield service was leaking the Hostealo-only
    sub-tabs (Protection / GEO / IP Lists) because the buttons rendered as
    visible until Alpine processed `x-show="subtabIsVisible(...)"`.) */
[x-cloak] { display: none !important; }

/* ─── Dark theme (default) ───────────────────────────────── */
:root, [data-theme="dark"] {
  --background:   #0c111c;
  --bg-secondary: #111827;
  --bg-card:      #1f2937;
  --bg-deep:      #0f172a;
  --bg-border:    #1e293b;
  --accent:       #0ea5e9;
  --accent-hover: #38bdf8;
  --accent-glow:  rgba(14,165,233,0.25);
  --purple:       #8b5cf6;
  --purple-glow:  rgba(139,92,246,0.25);
  --green:        #22c55e;
  --amber:        #f59e0b;
  --red:          #ef4444;
  --cyan:         #06b6d4;
  --text-primary:   #f8fafc;
  --text-secondary: #94a3b8;
  --text-muted:     #475569;
  --topbar-bg:    #0c111c;
  --sidebar-bg:   #0f172a;
  --dropdown-bg:  #1f2937;
  --scrollbar:    #1e293b;
  --scrollbar-hover: #334155;
  --divider:      #1e293b;
  --input-bg:     #0f172a;
  --input-border: #1e293b;
  --badge-bg:     rgba(14,165,233,0.15);
}

/* ─── Light theme ────────────────────────────────────────── */
[data-theme="light"] {
  --background:   #f1f5f9;
  --bg-secondary: #ffffff;
  --bg-card:      #ffffff;
  --bg-deep:      #f1f5f9;
  --bg-border:    #e2e8f0;
  --accent:       #0284c7;
  --accent-hover: #0369a1;
  --accent-glow:  rgba(2,132,199,0.15);
  --purple:       #7c3aed;
  --purple-glow:  rgba(124,58,237,0.15);
  --green:        #16a34a;
  --amber:        #d97706;
  --red:          #dc2626;
  --cyan:         #0891b2;
  --text-primary:   #0f172a;
  --text-secondary: #334155;
  --text-muted:     #64748b;
  --topbar-bg:    #ffffff;
  --sidebar-bg:   #ffffff;
  --dropdown-bg:  #ffffff;
  --scrollbar:    #cbd5e1;
  --scrollbar-hover: #94a3b8;
  --divider:      #e2e8f0;
  --input-bg:     #f8fafc;
  --input-border: #cbd5e1;
  --badge-bg:     rgba(2,132,199,0.1);
}

[data-theme="light"] .card {
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  border-color: transparent;
}
[data-theme="light"] .topbar {
  border-bottom: 1px solid #e2e8f0;
}
[data-theme="light"] .sidebar {
  background: #ffffff;
  border-right: 1px solid #e2e8f0;
}
[data-theme="light"] .sidebar .sidebar-link {
  color: #334155;
}
[data-theme="light"] .sidebar .sidebar-link:hover {
  background: #f1f5f9;
  color: #0f172a;
}
[data-theme="light"] .sidebar .sidebar-group-label {
  color: #94a3b8;
}
[data-theme="light"] .input {
  background: #ffffff;
  border-color: #cbd5e1;
  color: #0f172a;
}
[data-theme="light"] .input:focus {
  border-color: #0284c7;
}
[data-theme="light"] .input::placeholder {
  color: #94a3b8;
}
[data-theme="light"] .btn-ghost {
  color: #475569;
}
[data-theme="light"] .btn-ghost:hover {
  background: #f1f5f9;
  color: #0f172a;
}
[data-theme="light"] .btn-primary {
  box-shadow: none;
}
[data-theme="light"] .btn-primary:hover {
  box-shadow: none;
}
[data-theme="light"] .btn-secondary {
  color: #334155;
  border-color: #e2e8f0;
}
[data-theme="light"] .btn-secondary:hover {
  background: #f1f5f9;
  color: #0f172a;
}
[data-theme="light"] .divider {
  background: #e2e8f0;
}
[data-theme="light"] .badge {
  border-color: #e2e8f0;
}
[data-theme="light"] .alert-success {
  background: rgba(22,163,74,0.08);
  border-color: rgba(22,163,74,0.3);
  color: #15803d;
}
[data-theme="light"] .alert-error {
  background: rgba(220,38,38,0.08);
  border-color: rgba(220,38,38,0.3);
  color: #b91c1c;
}
[data-theme="light"] pre, [data-theme="light"] code {
  background: #f1f5f9;
  color: #334155;
}
[data-theme="light"] ::-webkit-scrollbar-thumb { background: #cbd5e1; }
[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* Light theme: override hardcoded dark borders in inline styles */
[data-theme="light"] [style*="border-bottom:1px solid #1e293b"],
[data-theme="light"] [style*="border-top:1px solid #1e293b"],
[data-theme="light"] [style*="border:1px solid #1e293b"],
[data-theme="light"] [style*="border-bottom: 1px solid #1e293b"],
[data-theme="light"] [style*="border-top: 1px solid #1e293b"],
[data-theme="light"] [style*="border: 1px solid #1e293b"] {
  border-color: #e2e8f0 !important;
}
[data-theme="light"] [style*="border-bottom:1px solid #334155"],
[data-theme="light"] [style*="border: 1px solid #334155"],
[data-theme="light"] [style*="border:1px solid #334155"] {
  border-color: #e2e8f0 !important;
}

/* Light theme: dark rgba backgrounds → light */
[data-theme="light"] [style*="background:rgba(30,41,59"],
[data-theme="light"] [style*="background: rgba(30,41,59"] {
  background: #f1f5f9 !important;
  border-color: #e2e8f0 !important;
  color: var(--text-primary) !important;
}
[data-theme="light"] [style*="background:rgba(15,23,42"],
[data-theme="light"] [style*="background: rgba(15,23,42"] {
  background: #f1f5f9 !important;
}
[data-theme="light"] [style*="background:rgba(0,0,0,0.2)"],
[data-theme="light"] [style*="background:rgba(0,0,0,0.3)"],
[data-theme="light"] [style*="background:rgba(0,0,0,0.4)"] {
  background: rgba(0,0,0,0.04) !important;
}

/* Light theme: table row hover */
[data-theme="light"] tr[class*="hover:bg-white"]:hover {
  background: #f1f5f9 !important;
}
[data-theme="light"] tr[class*="hover:"]:hover {
  background: #f1f5f9 !important;
}

/* Light theme: EasyMDE / markdown editor — must override inline dark styles */
[data-theme="light"] .EasyMDEContainer .CodeMirror {
  background: #fff !important;
  color: #0f172a !important;
  border-color: #e2e8f0 !important;
}
[data-theme="light"] .EasyMDEContainer .CodeMirror-cursor {
  border-left-color: #0f172a !important;
}
[data-theme="light"] .EasyMDEContainer .editor-toolbar {
  background: #f8fafc !important;
  border-color: #e2e8f0 !important;
}
[data-theme="light"] .EasyMDEContainer .editor-toolbar button {
  color: #475569 !important;
}
[data-theme="light"] .EasyMDEContainer .editor-toolbar button:hover,
[data-theme="light"] .EasyMDEContainer .editor-toolbar button.active {
  background: #e2e8f0 !important;
  color: #0f172a !important;
}
[data-theme="light"] .EasyMDEContainer .editor-toolbar i.separator {
  border-left-color: #e2e8f0 !important;
}
[data-theme="light"] .EasyMDEContainer .editor-statusbar {
  color: #64748b !important;
  border-color: #e2e8f0 !important;
}
[data-theme="light"] .EasyMDEContainer .cm-s-easymde .cm-header {
  color: #0f172a !important;
}
[data-theme="light"] .EasyMDEContainer .editor-preview {
  background: #fff !important;
  color: #0f172a !important;
}
.attack-row:hover { filter: brightness(1.1); }
[data-theme="light"] .attack-row:hover { filter: none; background: #e2e8f0 !important; }
[data-theme="light"] .attack-detail-panel {
  background: #f8fafc !important;
  border-color: #e2e8f0 !important;
}
/* ─── Rendered ticket / KYC markdown (.ticket-md) ─────────────────────────
   Parsedown emits bare <ol>/<ul>/<p>/<h*>/<code>/<table>, and Tailwind's
   Preflight strips list markers and every margin, so a numbered staff reply
   rendered as unnumbered paragraphs with no spacing, in both the admin and
   the client thread. These are the base styles that the light-theme
   .ticket-md overrides below were already written against but which never
   existed. Scoped to .ticket-md, nothing else in the panel is touched.
   No colour is set on `strong` on purpose: it inherits the per-message
   container colour (the admin thread tints client messages amber). */
.ticket-md > *:first-child { margin-top: 0; }
.ticket-md > *:last-child { margin-bottom: 0; }

.ticket-md p { margin: 0 0 0.75rem; }

.ticket-md ol,
.ticket-md ul { margin: 0 0 0.75rem; padding-left: 1.5rem; }
.ticket-md ol { list-style: decimal outside; }
.ticket-md ul { list-style: disc outside; }
.ticket-md li { margin: 0.2rem 0; }
.ticket-md li::marker { color: var(--text-secondary); }
.ticket-md li > p { margin: 0 0 0.35rem; }
.ticket-md ol ol { list-style: lower-alpha outside; }
.ticket-md ul ul { list-style: circle outside; }
.ticket-md ol ol,
.ticket-md ol ul,
.ticket-md ul ul,
.ticket-md ul ol { margin-bottom: 0.25rem; }

.ticket-md h1,
.ticket-md h2,
.ticket-md h3,
.ticket-md h4 { margin: 1rem 0 0.5rem; font-weight: 600; line-height: 1.3; }
.ticket-md h1 { font-size: 1.15em; }
.ticket-md h2 { font-size: 1.08em; }
.ticket-md h3,
.ticket-md h4 { font-size: 1em; }

.ticket-md strong { font-weight: 600; }
.ticket-md a { color: var(--accent); text-decoration: underline; }

.ticket-md code {
  background: rgba(148,163,184,0.15);
  padding: 0.1em 0.35em;
  border-radius: 4px;
  font-size: 0.9em;
}
.ticket-md pre {
  background: rgba(15,23,42,0.6);
  border: 1px solid var(--bg-border);
  border-radius: 8px;
  padding: 0.75rem;
  margin: 0 0 0.75rem;
  overflow-x: auto;
}
.ticket-md pre code { background: none; padding: 0; }

.ticket-md blockquote {
  margin: 0 0 0.75rem;
  padding-left: 0.75rem;
  border-left: 3px solid var(--bg-border);
  color: var(--text-muted);
}
.ticket-md hr { margin: 1rem 0; border: 0; border-top: 1px solid var(--bg-border); }

/* Order-form tickets (dedicated requests) arrive as markdown tables. */
.ticket-md table {
  display: block;
  width: max-content;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  margin: 0 0 0.75rem;
}
.ticket-md th,
.ticket-md td { border: 1px solid var(--bg-border); padding: 0.35rem 0.6rem; text-align: left; }
.ticket-md th { font-weight: 600; }

[data-theme="light"] .ticket-md strong {
  color: #0f172a !important;
}
[data-theme="light"] .ticket-md code {
  background: rgba(0,0,0,0.06) !important;
}
[data-theme="light"] .ticket-md pre {
  background: #f1f5f9 !important;
}
[data-theme="light"] .ticket-md blockquote {
  border-left-color: #e2e8f0 !important;
  color: #475569 !important;
}

/* Light theme: Tom Select (country dropdown) — must be very specific to override CDN */
[data-theme="light"] .ts-wrapper.single .ts-control,
[data-theme="light"] .ts-wrapper.multi .ts-control,
[data-theme="light"] .ts-control {
  background: #fff !important;
  color: #0f172a !important;
  border-color: #cbd5e1 !important;
}
[data-theme="light"] .ts-control input {
  color: #0f172a !important;
}
[data-theme="light"] .ts-control .item,
[data-theme="light"] .ts-wrapper .ts-control .item,
[data-theme="light"] .ts-wrapper.single .ts-control .item {
  color: #0f172a !important;
}
[data-theme="light"] .ts-dropdown,
[data-theme="light"] .ts-dropdown-content {
  background: #fff !important;
  color: #0f172a !important;
  border-color: #cbd5e1 !important;
}
[data-theme="light"] .ts-dropdown .option {
  color: #0f172a !important;
}
[data-theme="light"] .ts-dropdown .active,
[data-theme="light"] .ts-dropdown .option:hover {
  background: #f1f5f9 !important;
  color: #0f172a !important;
}

/* Light theme: alerts need darker text */
[data-theme="light"] .alert-info {
  background: rgba(2,132,199,0.08);
  color: #0369a1;
  border-color: rgba(2,132,199,0.25);
}
[data-theme="light"] .alert-warning {
  background: rgba(217,119,6,0.08);
  color: #92400e;
  border-color: rgba(217,119,6,0.25);
}

/* Light theme: Tailwind arbitrary dark color overrides */
[data-theme="light"] .border-\[\#1e293b\] { border-color: #e2e8f0 !important; }
[data-theme="light"] .border-\[\#334155\] { border-color: #cbd5e1 !important; }
[data-theme="light"] .hover\:border-\[\#334155\]:hover { border-color: #94a3b8 !important; }
[data-theme="light"] .text-\[\#94a3b8\] { color: #64748b !important; }
[data-theme="light"] .hover\:text-white:hover { color: #0f172a !important; }
[data-theme="light"] .text-\[\#0ea5e9\] { color: #0284c7 !important; }
[data-theme="light"] .border-\[\#0ea5e9\] { border-color: #0284c7 !important; }

/* Light theme logo invert */
[data-theme="light"] .sidebar-logo-img {
  filter: brightness(0);
}

/* Override Tailwind text-white in light theme — except colored backgrounds */
[data-theme="light"] .text-white {
  color: #0f172a !important;
}
/* Keep white text on colored backgrounds */
[data-theme="light"] .btn-primary,
[data-theme="light"] .btn-primary *,
[data-theme="light"] [style*="background:#ef4444"],
[data-theme="light"] [style*="background:#ef4444"] *,
[data-theme="light"] [style*="background:#22c55e"],
[data-theme="light"] [style*="background:#22c55e"] *,
[data-theme="light"] [style*="background:#0ea5e9"],
[data-theme="light"] [style*="background:#0ea5e9"] *,
[data-theme="light"] [style*="background:#8b5cf6"],
[data-theme="light"] [style*="background:#8b5cf6"] *,
[data-theme="light"] [style*="background:#f59e0b"],
[data-theme="light"] [style*="background:#f59e0b"] *,
[data-theme="light"] [style*="background:var(--accent)"],
[data-theme="light"] [style*="background:var(--accent)"] *,
[data-theme="light"] [style*="background:var(--purple)"],
[data-theme="light"] [style*="background:var(--purple)"] *,
[data-theme="light"] [style*="background:var(--green)"],
[data-theme="light"] [style*="background:var(--green)"] *,
[data-theme="light"] [style*="background:var(--red)"],
[data-theme="light"] [style*="background:var(--red)"] *,
[data-theme="light"] [style*="background:var(--amber)"],
[data-theme="light"] [style*="background:var(--amber)"] *,
[data-theme="light"] [style*="background:#3b82f6"],
[data-theme="light"] [style*="background:#3b82f6"] *,
[data-theme="light"] [style*="background:#14b8a6"],
[data-theme="light"] [style*="background:#14b8a6"] *,
[data-theme="light"] [style*="background:#06b6d4"],
[data-theme="light"] [style*="background:#06b6d4"] * {
  color: #fff !important;
}
}

/* Light theme: SVG icons with hardcoded white fill */
[data-theme="light"] svg[fill="#f8fafc"],
[data-theme="light"] svg[fill="white"],
[data-theme="light"] svg[fill="#fff"] {
  fill: #0f172a;
}

/* Light theme: linked accounts / OAuth icons */
[data-theme="light"] .card svg[fill="#f8fafc"] {
  fill: #0f172a;
}

/* Light theme: dot-grid background (auth pages) */
[data-theme="light"] .dot-grid {
  background-image: radial-gradient(circle, #cbd5e1 1px, transparent 1px);
}

/* Light theme: auth page logo invert */
[data-theme="light"] .dot-grid img[src*="logo"] {
  filter: brightness(0);
}

/* Light theme: GitHub icon fill */
[data-theme="light"] .btn-secondary svg[fill="#f8fafc"] {
  fill: #0f172a;
}

/* ─── Base ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background-color: var(--background);
  color: var(--text-primary);
  font-family: 'Maven Pro', ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

::selection {
  background: var(--accent-glow);
  color: var(--text-primary);
}

::-webkit-scrollbar        { width: 6px; height: 6px; }
::-webkit-scrollbar-track  { background: transparent; }
::-webkit-scrollbar-thumb  { background: #1e293b; border-radius: 9999px; }
::-webkit-scrollbar-thumb:hover { background: #334155; }

/* ─── Typography ────────────────────────────────────────── */
.gradient-text {
  background: linear-gradient(135deg, #fff 0%, var(--accent) 50%, var(--purple) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ─── Backgrounds ────────────────────────────────────────── */
.dot-grid {
  background-image: radial-gradient(circle, #1e293b 1px, transparent 1px);
  background-size: 32px 32px;
}

.glow-blue {
  position: absolute;
  border-radius: 9999px;
  background: var(--accent);
  filter: blur(120px);
  opacity: 0.07;
  pointer-events: none;
}

.glow-purple {
  position: absolute;
  border-radius: 9999px;
  background: var(--purple);
  filter: blur(120px);
  opacity: 0.07;
  pointer-events: none;
}

/* ─── Animations ─────────────────────────────────────────── */
@keyframes fade-up {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-8px); }
}
@keyframes glow-pulse {
  0%, 100% { opacity: 0.07; }
  50%       { opacity: 0.14; }
}
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

.animate-fade-up   { animation: fade-up  0.6s ease both; }
.animate-fade-in   { animation: fade-in  0.5s ease both; }
.animate-float     { animation: float    4s ease-in-out infinite; }
.animate-glow      { animation: glow-pulse 3s ease-in-out infinite; }
.animate-spin      { animation: spin 1s linear infinite; }

.shimmer {
  background: linear-gradient(90deg, #1e293b 25%, #334155 50%, #1e293b 75%);
  background-size: 200% 100%;
  animation: shimmer 2s infinite;
}

/* ─── Buttons ────────────────────────────────────────────── */
.btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  background: var(--accent);
  color: #fff;
  font-weight: 600;
  padding: 0.75rem 1.5rem;
  border-radius: 0.75rem;
  border: none; cursor: pointer;
  transition: background 0.2s, box-shadow 0.2s;
  box-shadow: 0 0 30px rgba(14,165,233,0.4);
}
.btn-primary:hover {
  background: var(--accent-hover);
  box-shadow: 0 0 50px rgba(14,165,233,0.6);
}
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-secondary {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  background: transparent;
  color: var(--text-secondary);
  font-weight: 500;
  padding: 0.75rem 1.5rem;
  border-radius: 0.75rem;
  border: 1px solid var(--bg-border);
  cursor: pointer;
  transition: all 0.2s;
}
.btn-secondary:hover {
  border-color: #334155;
  color: var(--text-primary);
  background: rgba(30,41,59,0.3);
}

.btn-ghost {
  display: inline-flex; align-items: center; gap: 0.375rem;
  background: transparent;
  color: var(--text-muted);
  font-size: 0.875rem;
  padding: 0.375rem 0.75rem;
  border-radius: 0.5rem;
  border: none; cursor: pointer;
  transition: all 0.2s;
}
.btn-ghost:hover {
  background: var(--bg-border);
  color: var(--text-secondary);
}

.btn-sm { padding: 0.375rem 0.875rem; font-size: 0.875rem; border-radius: 0.5rem; }

/* ─── Cards ──────────────────────────────────────────────── */
.card {
  background: var(--bg-secondary);
  border: 1px solid var(--bg-border);
  border-radius: 0.75rem;
}
.card-deep {
  background: var(--bg-deep);
  border: 1px solid var(--bg-border);
  border-radius: 0.75rem;
}

/* ─── Form inputs ────────────────────────────────────────── */
.input {
  width: 100%;
  background: var(--bg-deep);
  border: 1px solid var(--bg-border);
  border-radius: 0.5rem;
  padding: 0.625rem 1rem;
  font-size: 0.875rem;
  color: var(--text-primary);
  font-family: inherit;
  transition: border-color 0.2s, box-shadow 0.2s;
  outline: none;
}
.input::placeholder { color: #334155; }
.input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(14,165,233,0.15);
}

select.input {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23475569' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 1rem;
  padding-right: 2.5rem;
  cursor: pointer;
}
select.input option {
  background: #111827;
  color: #f8fafc;
}
.input-with-icon { position: relative; }
.input-with-icon .input { padding-left: 2.5rem; }
.input-with-icon .input-icon {
  position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%);
  color: var(--text-muted); pointer-events: none;
}

.label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: 0.375rem;
}

.field-error { font-size: 0.75rem; color: var(--red); margin-top: 0.25rem; }
.input-error  { border-color: var(--red) !important; }

/* ─── Badges / Status ────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: 0.375rem;
  padding: 0.25rem 0.625rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 500;
  border: 1px solid;
}
.badge-active   { background: rgba(34,197,94,0.1);  color: #22c55e; border-color: rgba(34,197,94,0.2); }
.badge-pending  { background: rgba(245,158,11,0.1); color: #f59e0b; border-color: rgba(245,158,11,0.2); }
.badge-error    { background: rgba(239,68,68,0.1);  color: #ef4444; border-color: rgba(239,68,68,0.2); }
.badge-info     { background: rgba(14,165,233,0.1); color: #0ea5e9; border-color: rgba(14,165,233,0.2); }

.pulse-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  display: inline-block;
  animation: glow-pulse 2s ease-in-out infinite;
}
.pulse-dot.green  { background: var(--green);  box-shadow: 0 0 6px var(--green); }
.pulse-dot.amber  { background: var(--amber);  box-shadow: 0 0 6px var(--amber); }
.pulse-dot.red    { background: var(--red);    box-shadow: 0 0 6px var(--red); }
.pulse-dot.blue   { background: var(--accent); box-shadow: 0 0 6px var(--accent); }

/* ─── Alerts ────────────────────────────────────────────── */
.alert {
  display: flex; align-items: flex-start; gap: 0.75rem;
  padding: 0.875rem 1rem;
  border-radius: 0.625rem;
  font-size: 0.875rem;
  border: 1px solid;
}
.alert-error   { background: rgba(239,68,68,0.08);  color: #fca5a5; border-color: rgba(239,68,68,0.2); }
.alert-success { background: rgba(34,197,94,0.08);  color: #86efac; border-color: rgba(34,197,94,0.2); }
.alert-info    { background: rgba(14,165,233,0.08); color: #7dd3fc; border-color: rgba(14,165,233,0.2); }
.alert-warning { background: rgba(245,158,11,0.08); color: #fcd34d; border-color: rgba(245,158,11,0.2); }

/* ─── Sidebar ────────────────────────────────────────────── */
.sidebar {
  position: fixed; top: 0; left: 0; bottom: 0;
  width: 260px;
  background: var(--bg-secondary);
  border-right: 1px solid var(--bg-border);
  transition: width 0.3s ease, transform 0.3s ease;
  overflow: hidden;
  z-index: 40;
}
.sidebar.collapsed { width: 64px; }

/* Mobile: sidebar hidden off-screen, slides in as overlay */
@media (max-width: 767px) {
  .sidebar.sidebar-mobile {
    width: 280px;
    transform: translateX(-100%);
    z-index: 50;
    box-shadow: none;
  }
  .sidebar.sidebar-mobile.sidebar-mobile-open {
    transform: translateX(0);
    box-shadow: 4px 0 24px rgba(0,0,0,0.3);
  }
  /* Collapse button hidden on mobile — use hamburger instead */
  .sidebar.sidebar-mobile .sidebar-collapse-btn { display: none !important; }
}

.sidebar-link {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.625rem 0.875rem;
  border-radius: 0.5rem;
  color: var(--text-muted);
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.15s;
  white-space: nowrap;
}
.sidebar-link:hover {
  background: rgba(30,41,59,0.6);
  color: var(--text-secondary);
}
.sidebar-link.active {
  background: rgba(14,165,233,0.12);
  color: var(--accent);
}
.sidebar-link .icon {
  flex-shrink: 0;
  width: 18px; height: 18px;
}

/* ─── First-paint guard (sidebar + shell) ────────────────── */
/* The collapsed state and the shell offset are applied by Alpine, which only
   runs after the first paint. Without these rules the sidebar renders at its
   full 260px and the shell at margin-left:0, and both then animate into place
   on every page load or refresh, which reads as the whole layout zooming in.
   The head script stamps .sidebar-collapsed / .no-anim on <html> so the very
   first paint is already in the right place, then drops .no-anim so the
   collapse button keeps animating normally. */
#app-shell                            { margin-left: 260px; }
html.sidebar-collapsed #app-shell     { margin-left: 64px; }
html.sidebar-collapsed .sidebar       { width: 64px; }

@media (max-width: 767px) {
  .sidebar { width: 280px; transform: translateX(-100%); }
  #app-shell,
  html.sidebar-collapsed #app-shell { margin-left: 0; }
}

html.no-anim .sidebar,
html.no-anim .sidebar *,
html.no-anim #app-shell { transition: none !important; }

/* ─── Topbar ─────────────────────────────────────────────── */
.topbar {
  position: sticky; top: 0;
  background: rgba(10,10,10,0.85);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--bg-border);
  z-index: 30;
}

/* ─── Tables ─────────────────────────────────────────────── */
.data-row {
  display: grid;
  padding: 0.875rem 1rem;
  border-bottom: 1px solid var(--bg-border);
  align-items: center;
  transition: background 0.1s;
}
.data-row:hover { background: rgba(30,41,59,0.3); }
[data-theme="light"] .data-row:hover { background: #f1f5f9; }
.data-row:last-child { border-bottom: none; }

/* ─── Divider ────────────────────────────────────────────── */
.divider {
  height: 1px;
  background: var(--bg-border);
  margin: 1rem 0;
}

/* ─── Utilities ──────────────────────────────────────────── */
.text-accent   { color: var(--accent); }
.text-muted    { color: var(--text-muted); }
.text-secondary{ color: var(--text-secondary); }
.bg-card       { background: var(--bg-card); }
.border-default{ border-color: var(--bg-border); }

/* ─── Print ──────────────────────────────────────────────── */
/* ── Mobile responsive ───────────────────────────────────── */
.hamburger-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border-radius: 0.5rem;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 0.15s;
  flex-shrink: 0;
}
.hamburger-btn:hover { background: rgba(148,163,184,0.1); }

@media (max-width: 767px) {
  .hamburger-btn { display: flex; }

  /* Topbar: tighter padding, smaller title */
  .topbar h1 { font-size: 1rem; }

  /* Main content: tighter padding */
  main.p-6 { padding: 1rem; }

  /* Cards: slightly less padding on small screens */
  .card { padding: 1rem; }
  .card.p-6 { padding: 1.25rem; }
  .card.p-5 { padding: 1rem; }

  /* Grids: single column on mobile */
  .grid.grid-cols-2 { grid-template-columns: 1fr; }
  .grid.sm\:grid-cols-2 { grid-template-columns: 1fr; }
  .grid.lg\:grid-cols-3 { grid-template-columns: 1fr; }
  .grid.lg\:grid-cols-4 { grid-template-columns: 1fr; }

  /* Tables: horizontal scroll */
  .data-row { font-size: 0.8125rem; }
  table { display: block; overflow-x: auto; }

  /* Hide elements marked desktop-only */
  .hidden-mobile { display: none !important; }

  /* Topbar right actions: tighter gap */
  .topbar .flex.items-center.gap-3 { gap: 0.375rem; }
}

@media print {
  /* When an invoice is on the page, show only the printable block */
  body:has(#invoice-printable) * { visibility: hidden !important; }
  body:has(#invoice-printable) #invoice-printable,
  body:has(#invoice-printable) #invoice-printable * { visibility: visible !important; }
  body:has(#invoice-printable) #invoice-printable {
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 2cm !important;
    background: #fff !important;
    color: #000 !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  /* Force white bg / black text on all children */
  body:has(#invoice-printable) #invoice-printable .card,
  body:has(#invoice-printable) #invoice-printable .card-deep,
  body:has(#invoice-printable) #invoice-printable [style] {
    background: #fff !important;
    color: #000 !important;
    border-color: #ddd !important;
  }

  body:has(#invoice-printable) #invoice-printable .glow-blue { display: none !important; }

  /* Generic print fallback (pages without #invoice-printable) */
  body:not(:has(#invoice-printable)) .sidebar,
  body:not(:has(#invoice-printable)) .topbar { display: none !important; }
  body:not(:has(#invoice-printable)) { background: #fff !important; color: #000 !important; }

  @page { margin: 1.5cm; }
}

/* ─── Admin accent override ──────────────────────────────── */
.admin-theme .btn-primary          { background: var(--purple); box-shadow: 0 0 30px rgba(139,92,246,0.4); }
.admin-theme .btn-primary:hover    { background: #a78bfa;       box-shadow: 0 0 50px rgba(139,92,246,0.6); }
.admin-theme .sidebar-link.active  { background: rgba(139,92,246,0.12); color: var(--purple); }
.admin-theme .input:focus          { border-color: var(--purple); box-shadow: 0 0 0 3px rgba(139,92,246,0.15); }