/* =============================================================================
   Theme Bridge
   Maps legacy ZelDesk variables to Zelect Webkit tokens so all pages
   (settings/accounting/reports/devices/customers) react to theme switching.
   ============================================================================= */

:root,
:root[data-theme] {
  /* Primary semantic colors */
  --color-primary: var(--accent-blue, #1f6feb);
  --color-primary-hover: var(--accent-blue-hover, #388bfd);
  --color-primary-dark: var(--accent-blue-hover, #1552b8);
  --color-primary-light: color-mix(in srgb, var(--accent-blue, #1f6feb) 16%, transparent);

  --color-secondary: var(--accent-purple, #8250df);
  --color-secondary-hover: color-mix(in srgb, var(--accent-purple, #8250df) 85%, black);

  --color-success: var(--accent-green, #238636);
  --color-success-bg: color-mix(in srgb, var(--accent-green, #238636) 16%, transparent);
  --color-warning: var(--accent-amber, #d29922);
  --color-warning-bg: color-mix(in srgb, var(--accent-amber, #d29922) 16%, transparent);
  --color-danger: var(--accent-red, #da3633);
  --color-danger-bg: color-mix(in srgb, var(--accent-red, #da3633) 16%, transparent);
  --color-info: var(--accent-blue, #1f6feb);
  --color-info-bg: color-mix(in srgb, var(--accent-blue, #1f6feb) 16%, transparent);

  /* Legacy aliases used by settings/accounting partials */
  --accent-color: var(--accent-blue, #1f6feb);
  --accent-hover: var(--accent-blue-hover, #388bfd);
  --success-color: var(--accent-green, #238636);
  --warning-color: var(--accent-amber, #d29922);
  --error-color: var(--accent-red, #da3633);

  /* Surface aliases */
  --surface-primary: var(--bg-primary, #0d1117);
  --surface-secondary: var(--bg-secondary, #161b22);
  --bg-card: var(--bg-secondary, #161b22);
  --bg-input: var(--bg-tertiary, #21262d);
  --bg-sidebar: var(--bg-secondary, #161b22);
  --bg-modal: var(--bg-secondary, #161b22);
  --bg-dropdown: var(--bg-secondary, #161b22);
  --bg-hover: color-mix(in srgb, var(--accent-blue, #1f6feb) 12%, var(--bg-secondary, #161b22));
  --bg-active: color-mix(in srgb, var(--accent-blue, #1f6feb) 18%, var(--bg-secondary, #161b22));
  --bg-muted-card: color-mix(in srgb, var(--bg-secondary, #161b22) 84%, transparent);

  /* Border/text aliases */
  --border-primary: var(--border-color, #30363d);
  --border-secondary: var(--border-muted, #21262d);
  --border-light: var(--border-muted, #21262d);
  --border-focus: var(--accent-blue, #1f6feb);

  --text-tertiary: var(--text-secondary, #8b949e);
  --text-muted: var(--text-secondary, #8b949e);
  --text-inverse: var(--bg-primary, #0d1117);
  --text: var(--text-primary, #c9d1d9);

  /* Font aliases used by ticket-detail / older CSS (canonical: --font-family / --zk-font-sans) */
  --font-sans: var(
    --font-family,
    var(--zk-font-sans, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif)
  );
  --font-mono: var(
    --zk-font-mono,
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Consolas,
    'Liberation Mono',
    monospace
  );

  /* Shared settings card surface */
  --settings-surface-bg: var(--bg-secondary, #161b22);

  /* Legacy shell surfaces (settings/accounting/reports side-nav + topbar) */
  --legacy-topbar-bg: var(--bg-topbar-bg, var(--bg-secondary, #161b22));
  --legacy-topbar-border: var(--border-color, #30363d);

  --legacy-sidebar-bg: var(--bg-secondary, #161b22);
  --legacy-sidebar-border: var(--border-color, #30363d);
  --legacy-sidebar-group-title: var(--text-secondary, #8b949e);
  --legacy-sidebar-text: var(--text-secondary, #8b949e);
  --legacy-sidebar-text-hover: var(--text-primary, #c9d1d9);
  --legacy-sidebar-text-active: var(--text-white, #f0f6fc);
  --legacy-sidebar-hover-bg: var(--bg-hover);
  --legacy-sidebar-active-bg: var(--bg-active);
  --legacy-sidebar-active-border: var(--accent-blue, #1f6feb);
}

:root[data-theme="light"] {
  --legacy-topbar-bg: #fbfcff;
  --legacy-sidebar-bg: #fbfcff;
  --legacy-sidebar-hover-bg: #edf2f8;
  --legacy-sidebar-active-bg: color-mix(in srgb, var(--accent-blue, #1d63d8) 16%, #fbfcff);
  --legacy-sidebar-active-border: color-mix(in srgb, var(--accent-blue, #1d63d8) 35%, transparent);
}

:root[data-theme="zelgrey"] {
  --legacy-topbar-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(244, 247, 251, 0.75));
  --legacy-sidebar-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(234, 241, 249, 0.92));
  --legacy-sidebar-border: rgba(59, 130, 246, 0.12);
  --legacy-sidebar-hover-bg: rgba(59, 130, 246, 0.12);
  --legacy-sidebar-active-bg: linear-gradient(135deg, rgba(59, 130, 246, 0.18), rgba(147, 197, 253, 0.14));
  --legacy-sidebar-active-border: rgba(59, 130, 246, 0.3);
}

:root[data-theme="zelect"] {
  --legacy-topbar-bg: linear-gradient(180deg, rgba(30, 18, 69, 0.85), rgba(20, 10, 45, 0.65));
  --legacy-sidebar-bg: linear-gradient(180deg, rgba(20, 10, 45, 0.92), rgba(11, 7, 24, 0.92));
  --legacy-sidebar-border: rgba(139, 92, 246, 0.18);
  --legacy-sidebar-hover-bg: rgba(139, 92, 246, 0.12);
  --legacy-sidebar-active-bg: linear-gradient(135deg, rgba(139, 92, 246, 0.22), rgba(59, 130, 246, 0.14));
  --legacy-sidebar-active-border: rgba(168, 85, 247, 0.35);
}

/* =============================================================================
   Legacy -> zelect class bridge
   Allows gradual migration from settings/devices/accounting nav classes to
   shared `zel-*` naming without visual regressions.
   ============================================================================= */

.zel-subnav-shell {
  background: var(--legacy-sidebar-bg, var(--bg-secondary, #161b22));
  border-right: 1px solid var(--legacy-sidebar-border, var(--border-primary, #30363d));
}

.zel-subnav-group-title {
  color: var(--legacy-sidebar-group-title, var(--text-secondary, #8b949e));
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.zel-subnav-item {
  color: var(--legacy-sidebar-text, var(--text-secondary, #8b949e));
  border-radius: var(--radius-sm, 8px);
  transition: all 0.15s ease;
}

.zel-subnav-item:hover,
.zel-subnav-item:focus-visible {
  background: var(--legacy-sidebar-hover-bg, var(--bg-hover));
  color: var(--legacy-sidebar-text-hover, var(--text-primary, #c9d1d9));
}

.zel-subnav-item.active,
.zel-subnav-item[aria-current="page"] {
  background: var(--legacy-sidebar-active-bg, var(--bg-active));
  color: var(--legacy-sidebar-text-active, var(--text-primary, #c9d1d9));
}

/* =============================================================================
   Live shell — reserve layout before Vue hydrates topbar/sidebar (prevents jump)
   ============================================================================= */
:root {
  --live-topbar-height: var(--topbar-height, 3.5rem);
}

#live-topbar-root.zel-topbar:not(.is-hydrated) {
  min-height: var(--topbar-height, 3.5rem);
  background: var(--bg-topbar-bg, var(--bg-secondary, #161b22));
  border-bottom: 1px solid var(--border-color, #30363d);
}

#zelectSidebar.zel-sidebar:not(.is-hydrated) {
  width: var(--sidebar-width, 11.25rem);
  min-height: calc(100vh - var(--topbar-height, 3.5rem));
  background: var(--bg-secondary, #161b22);
  border-right: 1px solid var(--border-color, #30363d);
}

body.zel-shell-pending .main-content {
  opacity: 0.92;
}

body.zel-shell-ready .main-content {
  opacity: 1;
  transition: opacity 0.12s ease;
}