/* ==========================================================================
   themes.css — Dark theme, sidebar skins, RTL adjustments, print sheets
   Theme = CSS variable overrides only. No duplicated component CSS.
   ========================================================================== */

/* ------------------------------------------------------------ DARK THEME */
[data-theme="dark"] {
  --app-primary: #5b87f7;
  --app-primary-hover: #7099f9;
  --app-success: #35b58a;
  --app-warning: #d79a3f;
  --app-danger: #e0665c;
  --app-info: #4aa3cf;
  --app-purple: #9b7ded;

  /* Near-neutral ramp with a trace of blue. Elevation comes from lightening the
     surface, not from shadow: on dark, shadows are invisible. */
  --app-body-bg: #0c1017;
  --app-surface: #12161d;
  --app-surface-muted: #171c24;
  --app-surface-hover: #1d232d;
  --app-border: #262d38;
  --app-border-strong: #333c4a;
  /* Dividers carry the elevation here, so they stay visible; only the
     strength relative to the card edge is reduced. */
  --app-hairline: color-mix(in srgb, var(--app-border) 78%, transparent);
  /* Tints need more colour on dark to be visible at all. */
  --app-soft-mix: 20%;

  --app-text: #e4e7ec;
  --app-text-muted: #98a2b3;
  --app-text-subtle: #7b8595;
  --app-heading: #f2f4f7;

  --app-sidebar-bg: #0f131a;
  --app-sidebar-border: #1f252f;
  --app-sidebar-text: #a3aebd;
  --app-sidebar-text-strong: #f2f4f7;
  --app-sidebar-muted: #7b8595;
  --app-sidebar-hover: #1a2029;
  --app-sidebar-active-bg: var(--app-primary-soft);
  --app-sidebar-active-text: #8fb0ff;

  /* Shadows are reserved for floating layers (dropdown, modal, toast). Cards
     get a 1px top highlight instead, which is what reads as "lit surface". */
  --app-shadow-xs: 0 1px 1px rgba(0, 0, 0, .28);
  --app-shadow-sm: 0 1px 2px rgba(0, 0, 0, .38);
  --app-shadow-md: 0 10px 28px rgba(0, 0, 0, .5);
  --app-shadow-lg: 0 24px 56px rgba(0, 0, 0, .62);
  --app-card-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 1px 2px rgba(0, 0, 0, .3);

  --bs-body-color: var(--app-text);
  --bs-body-bg: var(--app-body-bg);
  --bs-border-color: var(--app-border);
  --bs-emphasis-color: var(--app-heading);
  --bs-secondary-bg: var(--app-surface-muted);
  --bs-tertiary-bg: var(--app-surface-hover);
}

[data-theme="dark"] .loading-overlay,
[data-theme="dark"] .page-loader { background: rgba(13, 20, 32, .68); }
[data-theme="dark"] .notification-item.unread:hover { background: color-mix(in srgb, var(--app-primary) 22%, var(--app-surface)); }
[data-theme="dark"] .legend-swatch { box-shadow: 0 0 0 1px rgba(255, 255, 255, .08); }
[data-theme="dark"] .auth-aside { background: #0b1220; }
[data-theme="dark"] .message-row.out .message-bubble { color: #fff; }
[data-theme="dark"] .swal2-popup { background: var(--app-surface); color: var(--app-text); }
[data-theme="dark"] .select2-container--bootstrap-5 .select2-dropdown,
[data-theme="dark"] .select2-container--bootstrap-5 .select2-selection { background: var(--app-surface); border-color: var(--app-border-strong); color: var(--app-text); }
[data-theme="dark"] .flatpickr-calendar { background: var(--app-surface); color: var(--app-text); box-shadow: var(--app-shadow-md); }
[data-theme="dark"] .flatpickr-day { color: var(--app-text); }
[data-theme="dark"] .flatpickr-day.flatpickr-disabled { color: var(--app-text-subtle); }
[data-theme="dark"] .flatpickr-months .flatpickr-month, [data-theme="dark"] .flatpickr-weekdays { background: var(--app-surface); color: var(--app-text); }
[data-theme="dark"] .fc { --fc-border-color: var(--app-border); --fc-page-bg-color: var(--app-surface); --fc-neutral-bg-color: var(--app-surface-muted); }
[data-theme="dark"] .command-palette .modal-content {
  background: rgba(18, 22, 29, 0.95);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.08);
}
[data-theme="dark"] #shortcutsModal .modal-content {
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  color: var(--app-text);
}
[data-theme="dark"] #shortcutsModal .modal-header {
  background: var(--app-surface-muted) !important;
  border-color: var(--app-border) !important;
}
[data-theme="dark"] #shortcutsModal kbd {
  background: var(--app-surface-muted) !important;
  color: var(--app-text) !important;
  border-color: var(--app-border-strong) !important;
}

/* Theme toggle icon swap */
.theme-icon-dark { display: none; }
[data-theme="dark"] .theme-icon-light { display: none; }
[data-theme="dark"] .theme-icon-dark { display: inline-block; }

/* ------------------------------------------------------- SIDEBAR SKINS */
/* Sidebar skins are independent of the page's colour mode. Saved palettes
   override these defaults in appearance-vars.blade.php. */
body[data-sidebar-skin="light"] {
  --app-sidebar-bg: #ffffff;
  --app-sidebar-border: #e3e8ef;
  --app-sidebar-text: #47566b;
  --app-sidebar-text-strong: #17233a;
  --app-sidebar-muted: #64748b;
  --app-sidebar-hover: #f1f5f9;
  --app-sidebar-active-bg: #2f5bd7;
  --app-sidebar-active-text: #ffffff;
}
body[data-sidebar-skin="dark"] {
  --app-sidebar-bg: #16202f;
  --app-sidebar-border: #24324a;
  --app-sidebar-text: #b8c4d5;
  --app-sidebar-text-strong: #ffffff;
  --app-sidebar-muted: #9aaac0;
  --app-sidebar-hover: #1f2b3d;
  --app-sidebar-active-bg: #23375f;
  --app-sidebar-active-text: #b2caff;
}
/* Scope all sidebar content to skin tokens, including the close control and
   footer which previously inherited page-theme colours. */
.app-sidebar { color: var(--app-sidebar-text); }
.app-sidebar .workspace-switcher,
.app-sidebar .usage-card { background: var(--app-sidebar-bg); border-color: var(--app-sidebar-border); color: var(--app-sidebar-text); }
.app-sidebar .workspace-switcher:hover { background: var(--app-sidebar-hover); }
.app-sidebar .usage-title { color: var(--app-sidebar-text-strong); }
.app-sidebar .usage-hint,
.app-sidebar .usage-value { color: var(--app-sidebar-muted); }
.app-sidebar .sidebar-close { color: var(--app-sidebar-text); }
.app-sidebar .sidebar-close:hover { background: var(--app-sidebar-hover); color: var(--app-sidebar-text-strong); }
.app-sidebar .btn-outline-light-subtle { background: var(--app-sidebar-bg); border-color: var(--app-sidebar-border); color: var(--app-sidebar-text-strong); }
.app-sidebar .btn-outline-light-subtle:hover { background: var(--app-sidebar-hover); color: var(--app-sidebar-text-strong); }
.app-sidebar .nav-sub .nav-link::before { background: var(--app-sidebar-muted); }
.app-sidebar :focus-visible { outline-color: var(--app-sidebar-text-strong); }

/* ---------------------------------------------------------- BRAND COLORS */
/* Only the accent itself is listed — --app-primary-soft derives from it. */
[data-accent="indigo"] { --app-primary: #4f46e5; --app-primary-hover: #4338ca; }
[data-accent="teal"]   { --app-primary: #0f766e; --app-primary-hover: #0d5f59; }
[data-accent="amber"]  { --app-primary: #b45309; --app-primary-hover: #92400e; }
[data-accent="rose"]   { --app-primary: #be123c; --app-primary-hover: #9f1239; }
[data-accent="slate"]  { --app-primary: #334155; --app-primary-hover: #1e293b; }
[data-theme="dark"][data-accent="indigo"] { --app-primary: #818cf8; }
[data-theme="dark"][data-accent="teal"]   { --app-primary: #2dd4bf; }
[data-theme="dark"][data-accent="amber"]  { --app-primary: #f0a952; }
[data-theme="dark"][data-accent="rose"]   { --app-primary: #f472a0; }
[data-theme="dark"][data-accent="slate"]  { --app-primary: #94a3b8; }

/* ------------------------------------------------------------------- RTL */
[dir="rtl"] .breadcrumb .breadcrumb-item + .breadcrumb-item::before { transform: rotate(180deg); display: inline-block; }
[dir="rtl"] .table-actions { justify-content: flex-start; }
[dir="rtl"] .col-numeric { text-align: start; }
[dir="rtl"] .invoice-totals { margin-inline-start: 0; margin-inline-end: auto; }
[dir="rtl"] .bi-chevron-right::before, [dir="rtl"] .bi-arrow-right::before { transform: rotate(180deg); display: inline-block; }
[dir="rtl"] .timeline { padding-inline-start: 1.5rem; }
[dir="rtl"] .avatar-group .avatar { margin-inline-start: -8px; }
[dir="rtl"] .dt-container .dt-paging { direction: ltr; }

/* -------------------------------------------------------------- PRINTING */
@media print {
  .invoice-sheet { padding: 0; }
  .print-area, .print-area * { visibility: visible; }
  .doc-stamp { border-color: #000; color: #000; }
  a[href]::after { content: ""; }
  .table > thead > tr > th { background: #f1f1f1 !important; color: #000 !important; }
  .status-badge { border: 1px solid #999; }
}