/* Apple-style theme layer — added 2026-09-29 (Joseph's Task F).
   Purely visual: type, colour, radius, shadow, translucency, press feedback and motion.
   No layout or behaviour changes. Loaded after the compiled styles from index.html.
   Kill switch: run localStorage.setItem('apple-ui','off') and reload (removes the layer);
   localStorage.removeItem('apple-ui') brings it back. Principles follow the installed
   apple-design skill: respond on press, restraint, soft depth, hairline borders,
   reduced-motion respected. Not part of the compiled Angular bundle. */

html:not(.apple-off) {
  --ap-blue: #007aff;
  --ap-blue-press: #0062cc;
  --ap-green: #34c759;
  --ap-red: #ff3b30;
  --ap-orange: #ff9500;
  --ap-bg: #f5f5f7;
  --ap-surface: #ffffff;
  --ap-surface-2: #fafafc;
  --ap-fill: rgba(120, 120, 128, .12);
  --ap-fill-hover: rgba(120, 120, 128, .18);
  --ap-hair: rgba(60, 60, 67, .14);
  --ap-text: #1d1d1f;
  --ap-text-2: #6e6e73;
  --ap-glass: rgba(255, 255, 255, .72);
  --ap-shadow-1: 0 1px 2px rgba(0, 0, 0, .04), 0 2px 8px rgba(0, 0, 0, .05);
  --ap-shadow-2: 0 4px 12px rgba(0, 0, 0, .08), 0 12px 32px rgba(0, 0, 0, .10);
  --ap-shadow-3: 0 12px 40px rgba(0, 0, 0, .18), 0 2px 8px rgba(0, 0, 0, .08);
  --ap-ease: cubic-bezier(.2, .8, .2, 1);
  --ap-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Inter", "Helvetica Neue", Arial, sans-serif;
}
html:not(.apple-off) body.dark,
html:not(.apple-off) body.theme-black,
html:not(.apple-off) body.theme-dark {
  --ap-bg: #000000;
  --ap-surface: #1c1c1e;
  --ap-surface-2: #242426;
  --ap-fill: rgba(120, 120, 128, .28);
  --ap-fill-hover: rgba(120, 120, 128, .38);
  --ap-hair: rgba(84, 84, 88, .55);
  --ap-text: #f5f5f7;
  --ap-text-2: #a1a1a6;
  --ap-glass: rgba(28, 28, 30, .72);
  --ap-blue: #0a84ff;
  --ap-shadow-1: 0 1px 2px rgba(0, 0, 0, .4);
  --ap-shadow-2: 0 4px 12px rgba(0, 0, 0, .5), 0 12px 32px rgba(0, 0, 0, .5);
}

/* ---------- Type and page ---------- */
html:not(.apple-off) body,
html:not(.apple-off) .mat-mdc-tab,
html:not(.apple-off) .mat-mdc-form-field,
html:not(.apple-off) .mat-mdc-select,
html:not(.apple-off) .mat-mdc-menu-item,
html:not(.apple-off) .mat-mdc-option,
html:not(.apple-off) .mat-mdc-dialog-container,
html:not(.apple-off) .mat-mdc-button,
html:not(.apple-off) input,
html:not(.apple-off) select,
html:not(.apple-off) textarea,
html:not(.apple-off) .btn,
html:not(.apple-off) .sidebar .menu .menu-item,
html:not(.apple-off) .card {
  font-family: var(--ap-font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -.011em;
}
html:not(.apple-off) body { background: var(--ap-bg); color: var(--ap-text); }
html:not(.apple-off) h1, html:not(.apple-off) h2, html:not(.apple-off) h3 { letter-spacing: -.022em; font-weight: 600; }
html:not(.apple-off) h4, html:not(.apple-off) h5, html:not(.apple-off) h6 { letter-spacing: -.016em; font-weight: 600; }

/* ---------- Header: frosted glass ---------- */
html:not(.apple-off) .app-header {
  background: var(--ap-glass) !important;
  -webkit-backdrop-filter: saturate(180%) blur(22px);
  backdrop-filter: saturate(180%) blur(22px);
  border-bottom: .5px solid var(--ap-hair);
  box-shadow: none !important;
}
html:not(.apple-off) .header-tickers-bar,
html:not(.apple-off) .header-times-bar {
  background: transparent !important;
  border-color: var(--ap-hair) !important;
}
html:not(.apple-off) .header-brand { font-weight: 500; letter-spacing: -.02em; }
/* Same clipping as before on narrow windows, but no page-wide horizontal scrollbar. */
html:not(.apple-off) .app-header { max-width: 100vw; overflow-x: clip; }
html:not(.apple-off) .header-icon,
html:not(.apple-off) .menu-toggle { border-radius: 10px; transition: background .2s var(--ap-ease), transform .12s var(--ap-ease); }
html:not(.apple-off) .menu-toggle:hover { background: var(--ap-fill); }
html:not(.apple-off) .menu-toggle:active { transform: scale(.94); }

/* Header action pills */
html:not(.apple-off) .btn-ctrl {
  border-radius: 980px !important;
  border: .5px solid var(--ap-hair) !important;
  background: var(--ap-fill) !important;
  color: var(--ap-text) !important;
  font-weight: 500;
  letter-spacing: -.005em;
  box-shadow: none !important;
  transition: background .2s var(--ap-ease), transform .12s var(--ap-ease);
}
html:not(.apple-off) .btn-ctrl:hover { background: var(--ap-fill-hover) !important; }
html:not(.apple-off) .btn-ctrl:active { transform: scale(.96); transition-duration: .08s; }
html:not(.apple-off) .btn-ctrl-margin { background: rgba(52, 199, 89, .16) !important; border-color: rgba(52, 199, 89, .35) !important; }

/* ---------- Sidebar ---------- */
html:not(.apple-off) .sidebar {
  background: var(--ap-glass) !important;
  -webkit-backdrop-filter: saturate(180%) blur(22px);
  backdrop-filter: saturate(180%) blur(22px);
  border-right: .5px solid var(--ap-hair);
  box-shadow: none !important;
}
html:not(.apple-off) .sidebar .menu .list .menu-item,
html:not(.apple-off) .sidebar .menu .list li > a {
  border-radius: 10px;
  transition: background .18s var(--ap-ease), color .18s var(--ap-ease), transform .12s var(--ap-ease);
}
html:not(.apple-off) .sidebar .menu .list li > a:hover { background: var(--ap-fill); }
html:not(.apple-off) .sidebar .menu .list li > a:active { transform: scale(.98); transition-duration: .08s; }
html:not(.apple-off) .sidebar .menu .list li.active > a,
html:not(.apple-off) .sidebar .menu .list li > a.active {
  background: rgba(0, 122, 255, .12) !important;
  color: var(--ap-blue) !important;
  font-weight: 600;
}

/* ---------- Cards and surfaces ---------- */
html:not(.apple-off) .card {
  background: var(--ap-surface);
  border: .5px solid var(--ap-hair);
  border-radius: 16px;
  box-shadow: var(--ap-shadow-1);
  transition: box-shadow .25s var(--ap-ease), transform .25s var(--ap-ease);
}
html:not(.apple-off) .card .header,
html:not(.apple-off) .card-header {
  background: transparent !important;
  border-bottom: .5px solid var(--ap-hair);
  border-radius: 16px 16px 0 0;
}

/* ---------- Buttons ---------- */
html:not(.apple-off) .mat-mdc-mini-fab,
html:not(.apple-off) .mat-mdc-fab,
html:not(.apple-off) .mat-mdc-raised-button.mat-primary,
html:not(.apple-off) .btn-primary {
  background-color: var(--ap-blue) !important;
  color: #fff !important;
  box-shadow: 0 1px 2px rgba(0, 122, 255, .3), 0 4px 12px rgba(0, 122, 255, .25) !important;
  transition: background-color .2s var(--ap-ease), transform .12s var(--ap-ease), box-shadow .2s var(--ap-ease);
}
html:not(.apple-off) .mat-mdc-mini-fab:hover,
html:not(.apple-off) .mat-mdc-fab:hover,
html:not(.apple-off) .btn-primary:hover { background-color: var(--ap-blue-press) !important; }
html:not(.apple-off) .mat-mdc-mini-fab:active,
html:not(.apple-off) .mat-mdc-fab:active,
html:not(.apple-off) .mat-mdc-raised-button:active,
html:not(.apple-off) .btn:active { transform: scale(.96); transition-duration: .08s; }
html:not(.apple-off) .mat-mdc-raised-button,
html:not(.apple-off) .mat-mdc-unelevated-button,
html:not(.apple-off) .mat-mdc-outlined-button,
html:not(.apple-off) .mat-mdc-button,
html:not(.apple-off) .btn { border-radius: 10px; font-weight: 500; }
html:not(.apple-off) .mat-mdc-raised-button:not([disabled]),
html:not(.apple-off) .btn { transition: background-color .2s var(--ap-ease), transform .12s var(--ap-ease), box-shadow .2s var(--ap-ease); }

/* ---------- Tabs: segmented control ---------- */
html:not(.apple-off) .mat-mdc-tab-header { padding: 10px 14px 4px; border: 0 !important; }
html:not(.apple-off) .mat-mdc-tab-labels {
  background: var(--ap-fill);
  border-radius: 10px;
  padding: 2px;
  gap: 2px;
}
html:not(.apple-off) .mat-mdc-tab.mdc-tab {
  height: 32px !important;
  border-radius: 8px;
  opacity: 1 !important;
  transition: background .25s var(--ap-ease), box-shadow .25s var(--ap-ease);
}
html:not(.apple-off) .mat-mdc-tab .mdc-tab__text-label { color: var(--ap-text-2) !important; font-weight: 500; letter-spacing: -.01em; }
html:not(.apple-off) .mat-mdc-tab.mdc-tab--active {
  background: var(--ap-surface);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .12), 0 3px 8px rgba(0, 0, 0, .06);
}
html:not(.apple-off) .mat-mdc-tab.mdc-tab--active .mdc-tab__text-label { color: var(--ap-text) !important; font-weight: 600; }
html:not(.apple-off) .mat-mdc-tab .mdc-tab-indicator { display: none; }
html:not(.apple-off) .mat-mdc-tab-header-pagination { display: none; }

/* ---------- Form fields ---------- */
html:not(.apple-off) .mat-mdc-text-field-wrapper.mdc-text-field--filled,
html:not(.apple-off) .mat-mdc-form-field-flex { border-radius: 10px; }
html:not(.apple-off) .mdc-text-field--outlined .mdc-notched-outline__leading { border-radius: 10px 0 0 10px !important; }
html:not(.apple-off) .mdc-text-field--outlined .mdc-notched-outline__trailing { border-radius: 0 10px 10px 0 !important; }
html:not(.apple-off) .mdc-notched-outline__leading,
html:not(.apple-off) .mdc-notched-outline__notch,
html:not(.apple-off) .mdc-notched-outline__trailing { border-color: var(--ap-hair) !important; }
html:not(.apple-off) .mdc-text-field--focused .mdc-notched-outline__leading,
html:not(.apple-off) .mdc-text-field--focused .mdc-notched-outline__notch,
html:not(.apple-off) .mdc-text-field--focused .mdc-notched-outline__trailing { border-color: var(--ap-blue) !important; border-width: 1.5px !important; }
html:not(.apple-off) .form-control,
html:not(.apple-off) .form-select {
  border-radius: 10px;
  border: .5px solid var(--ap-hair);
  background-color: var(--ap-surface);
  color: var(--ap-text);
  transition: border-color .2s var(--ap-ease), box-shadow .2s var(--ap-ease);
}
html:not(.apple-off) .form-control:focus,
html:not(.apple-off) .form-select:focus {
  border-color: var(--ap-blue);
  box-shadow: 0 0 0 4px rgba(0, 122, 255, .18);
}

/* ---------- Dialogs, menus, select panels, toasts ---------- */
html:not(.apple-off) .mat-mdc-dialog-surface {
  border-radius: 20px !important;
  box-shadow: var(--ap-shadow-3) !important;
  background: var(--ap-surface) !important;
}
html:not(.apple-off) .cdk-overlay-dark-backdrop,
html:not(.apple-off) .cdk-overlay-backdrop.cdk-overlay-backdrop-showing {
  background: rgba(0, 0, 0, .28);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
html:not(.apple-off) .mat-mdc-menu-panel,
html:not(.apple-off) .mat-mdc-select-panel,
html:not(.apple-off) .mat-mdc-autocomplete-panel {
  border-radius: 14px !important;
  background: var(--ap-glass) !important;
  -webkit-backdrop-filter: saturate(180%) blur(24px);
  backdrop-filter: saturate(180%) blur(24px);
  box-shadow: var(--ap-shadow-2) !important;
  border: .5px solid var(--ap-hair);
}
html:not(.apple-off) .mat-mdc-option,
html:not(.apple-off) .mat-mdc-menu-item { border-radius: 8px; margin: 0 4px; min-height: 36px; }
html:not(.apple-off) .mat-mdc-option:hover,
html:not(.apple-off) .mat-mdc-menu-item:hover { background: var(--ap-fill) !important; }
html:not(.apple-off) .toast-container .ngx-toastr,
html:not(.apple-off) .toast-container .toast {
  border-radius: 14px !important;
  box-shadow: var(--ap-shadow-2) !important;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}
html:not(.apple-off) .mat-mdc-snack-bar-container .mdc-snackbar__surface { border-radius: 14px !important; }

/* ---------- Tables and lists ---------- */
html:not(.apple-off) table.mat-mdc-table,
html:not(.apple-off) .table { background: transparent; }
html:not(.apple-off) .mat-mdc-header-cell,
html:not(.apple-off) .table > thead th {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ap-text-2);
  border-bottom: .5px solid var(--ap-hair);
}
html:not(.apple-off) .mat-mdc-row,
html:not(.apple-off) .table > tbody > tr { transition: background .15s var(--ap-ease); }
html:not(.apple-off) .mat-mdc-row:hover,
html:not(.apple-off) .table > tbody > tr:hover { background: var(--ap-fill); }
html:not(.apple-off) .mat-mdc-cell, html:not(.apple-off) .table td { border-bottom: .5px solid var(--ap-hair); }


/* ---------- Page toolbars, expandable rows, semantic buttons ---------- */
html:not(.apple-off) .materialTableHeader {
  background: transparent !important;
  border-bottom: .5px solid var(--ap-hair);
  border-radius: 16px 16px 0 0;
}
html:not(.apple-off) .materialTableHeader .tbl-title,
html:not(.apple-off) .materialTableHeader h2 { font-weight: 600; letter-spacing: -.02em; color: var(--ap-text); }
html:not(.apple-off) .mat-expansion-panel {
  border-radius: 14px !important;
  border: .5px solid var(--ap-hair);
  background: var(--ap-surface);
  box-shadow: var(--ap-shadow-1) !important;
  transition: box-shadow .25s var(--ap-ease);
}
html:not(.apple-off) .mat-expansion-panel:hover { box-shadow: var(--ap-shadow-2) !important; }
html:not(.apple-off) .mat-expansion-panel-header { border-radius: 14px !important; }
html:not(.apple-off) .mat-expansion-panel:not(.mat-expanded) .mat-expansion-panel-header { border-radius: 14px !important; }
html:not(.apple-off) .btn-danger { background: var(--ap-red); border-color: var(--ap-red); color: #fff; }
html:not(.apple-off) .btn-warning { background: var(--ap-orange); border-color: var(--ap-orange); color: #fff; }
html:not(.apple-off) .btn-success { background: var(--ap-green); border-color: var(--ap-green); color: #fff; }
html:not(.apple-off) .btn-danger:hover { background: #e0342a; border-color: #e0342a; }
html:not(.apple-off) .btn-warning:hover { background: #e68600; border-color: #e68600; color: #fff; }
html:not(.apple-off) .btn-success:hover { background: #2ab04f; border-color: #2ab04f; }
html:not(.apple-off) .btn-secondary, html:not(.apple-off) .btn-light {
  background: var(--ap-fill); border-color: transparent; color: var(--ap-text);
}
html:not(.apple-off) .btn-secondary:hover, html:not(.apple-off) .btn-light:hover { background: var(--ap-fill-hover); color: var(--ap-text); }
html:not(.apple-off) .header-times, html:not(.apple-off) .header-times * { font-weight: 500; }
html:not(.apple-off) .badge, html:not(.apple-off) .chip { border-radius: 980px; }
html:not(.apple-off) .mat-mdc-slide-toggle .mdc-switch--selected .mdc-switch__track::after { background: var(--ap-green) !important; }

/* ---------- Focus, selection, scrollbars, motion ---------- */
html:not(.apple-off) :focus-visible { outline: 2px solid var(--ap-blue); outline-offset: 2px; border-radius: 6px; }
html:not(.apple-off) ::selection { background: rgba(0, 122, 255, .25); }
html:not(.apple-off) ::-webkit-scrollbar { width: 10px; height: 10px; }
html:not(.apple-off) ::-webkit-scrollbar-thumb {
  background: rgba(120, 120, 128, .4);
  border-radius: 10px;
  border: 3px solid transparent;
  background-clip: content-box;
}
html:not(.apple-off) ::-webkit-scrollbar-thumb:hover { background-color: rgba(120, 120, 128, .6); }
html:not(.apple-off) ::-webkit-scrollbar-track { background: transparent; }

@media (prefers-reduced-motion: reduce) {
  html:not(.apple-off) *,
  html:not(.apple-off) *::before,
  html:not(.apple-off) *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* ============================================================
   Smoothness batch — added 2026-09-29 (Joseph's Task O). CSS only.
   1 Motion tokens and the settings-panel/ticket-group overlay controls on them.
   5 Press feedback for controls that had none.
   7 Steadier numbers (no jitter when data refreshes), touch tap behaviour.
   8 Tap sizes on touch screens, clipped focus rings, forced-colours focus.
   Everything is inside html:not(.apple-off); removing this block restores the previous look.
   ============================================================ */

/* 1. One set of durations so every control moves with the same rhythm. */
html:not(.apple-off) {
  --ap-dur-press: .12s;
  --ap-dur-state: .2s;
  --ap-dur-panel: .3s;
}

/* 1. Overlay controls (settings panel, ticket group headers) use the shared duration and easing. */
html:not(.apple-off) .hub-row,
html:not(.apple-off) .hub-tile { transition: background var(--ap-dur-state) var(--ap-ease), border-color var(--ap-dur-state) var(--ap-ease), transform var(--ap-dur-press) var(--ap-ease); }
html:not(.apple-off) .hub-switch,
html:not(.apple-off) .hub-fsw { transition: background var(--ap-dur-state) var(--ap-ease); }
html:not(.apple-off) .hub-switch::after { transition: transform var(--ap-dur-state) var(--ap-ease); }
html:not(.apple-off) .hub-mini,
html:not(.apple-off) .hub-tk-grip { transition: background var(--ap-dur-press) var(--ap-ease), color var(--ap-dur-press) var(--ap-ease), transform var(--ap-dur-press) var(--ap-ease); }
html:not(.apple-off) .hub-sec-name svg,
html:not(.apple-off) .hub-frhead > svg,
html:not(.apple-off) .tg-chev { transition: transform var(--ap-dur-state) var(--ap-ease); }
html:not(.apple-off) .tg-toggle,
html:not(.apple-off) .tg-pause,
html:not(.apple-off) .hub-frhead { transition: background var(--ap-dur-state) var(--ap-ease), transform var(--ap-dur-press) var(--ap-ease); }
html:not(.apple-off) .ai-chatbot-fab-wrapper { transition: right var(--ap-dur-state) var(--ap-ease); }

/* 5. Press feedback. Only enabled controls respond; sizes match the existing .btn/.menu presses. */
html:not(.apple-off) .mat-mdc-button:not([disabled]),
html:not(.apple-off) .mat-mdc-unelevated-button:not([disabled]),
html:not(.apple-off) .mat-mdc-raised-button:not([disabled]),
html:not(.apple-off) .mat-mdc-outlined-button:not([disabled]),
html:not(.apple-off) .mat-mdc-icon-button:not([disabled]),
html:not(.apple-off) .mat-mdc-fab:not([disabled]),
html:not(.apple-off) .mat-mdc-mini-fab:not([disabled]) { transition: transform var(--ap-dur-press) var(--ap-ease), background-color var(--ap-dur-state) var(--ap-ease), box-shadow var(--ap-dur-state) var(--ap-ease); }
html:not(.apple-off) .mat-mdc-button:not([disabled]):active,
html:not(.apple-off) .mat-mdc-unelevated-button:not([disabled]):active,
html:not(.apple-off) .mat-mdc-raised-button:not([disabled]):active,
html:not(.apple-off) .mat-mdc-outlined-button:not([disabled]):active { transform: scale(.97); }
html:not(.apple-off) .mat-mdc-icon-button:not([disabled]):active,
html:not(.apple-off) .mat-mdc-fab:not([disabled]):active,
html:not(.apple-off) .mat-mdc-mini-fab:not([disabled]):active { transform: scale(.92); }
html:not(.apple-off) .hub-row:active,
html:not(.apple-off) .hub-tile:not(:disabled):active,
html:not(.apple-off) .hub-frhead:active,
html:not(.apple-off) .tg-toggle:active { transform: scale(.985); }
html:not(.apple-off) .hub-mini:not(:disabled):active,
html:not(.apple-off) .tg-pause:not(:disabled):active { transform: scale(.94); }
html:not(.apple-off) .nav-tabs .nav-link:active,
html:not(.apple-off) .mat-mdc-tab:active { transform: scale(.97); }

/* 7. Numbers keep a fixed width, so live prices, counts and times do not shift the layout when they change. */
html:not(.apple-off) .table,
html:not(.apple-off) .mat-mdc-table,
html:not(.apple-off) .mat-expansion-panel,
html:not(.apple-off) .credit-usage-panel,
html:not(.apple-off) .header-times,
html:not(.apple-off) .badge,
html:not(.apple-off) .tg-meta { font-variant-numeric: tabular-nums; }

/* 7. Touch: no grey tap flash and no double-tap-zoom delay on controls. */
html:not(.apple-off) { -webkit-tap-highlight-color: transparent; }
html:not(.apple-off) button,
html:not(.apple-off) a,
html:not(.apple-off) [role="button"],
html:not(.apple-off) [role="switch"],
html:not(.apple-off) input,
html:not(.apple-off) select,
html:not(.apple-off) label { touch-action: manipulation; }

/* 8. Focus rings that sit inside rounded, clipped containers are drawn inward so they are not cut off. */
html:not(.apple-off) .tg-toggle:focus-visible,
html:not(.apple-off) .hub-frhead:focus-visible,
html:not(.apple-off) .hub-sec-name:focus-visible,
html:not(.apple-off) .mat-mdc-menu-item:focus-visible { outline-offset: -2px; }
@media (forced-colors: active) {
  html:not(.apple-off) :focus-visible { outline: 2px solid Highlight; }
}

/* 8. Tap sizes: touch screens only (desktop is unchanged). */
@media (pointer: coarse) {
  html:not(.apple-off) .btn:not(.btn-sm),
  html:not(.apple-off) .mat-mdc-menu-item,
  html:not(.apple-off) .sidebar .menu .list li > a { min-height: 44px; }
  html:not(.apple-off) .btn-sm,
  html:not(.apple-off) .tg-pause,
  html:not(.apple-off) .tg-toggle { min-height: 36px; }
  html:not(.apple-off) .hub-mini { flex-basis: 32px; width: 32px; height: 32px; }
  html:not(.apple-off) .hub-fsw { min-height: 32px; }
}