/* Futuristic dark theme for app screens opened inside a desktop-only login (html.theme-future). */
html.theme-future {
  --navy: #38d6ff;
  --paper: #050b16;
  --ink: #e9f3ff;
  --muted: #8ea8c8;
  --line: rgba(80, 170, 255, 0.22);
  --pass: #22e58b;
  --pass-bg: rgba(34, 229, 139, 0.1);
  --fail: #ff4d6d;
  --fail-bg: rgba(255, 77, 109, 0.1);
  --fx-panel: rgba(14, 28, 52, 0.66);
  --fx-panel-2: rgba(26, 50, 88, 0.72);
  --fx-cyan: #38d6ff;
  --fx-orange: #ff7a3d;
  --fx-amber: #ffc23d;
  --fx-blue: #3d9bff;
  --fx-tech: "Bahnschrift", "Segoe UI", system-ui, sans-serif;
  color-scheme: dark;
  background: #050b16;
}

html.theme-future body {
  background: radial-gradient(ellipse at 50% -10%, #0f2a52 0%, #050b16 55%) fixed !important;
  color: var(--ink) !important;
}

html.theme-future body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: linear-gradient(rgba(56, 214, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(56, 214, 255, 0.05) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: linear-gradient(to bottom, transparent, #000 60%);
}

/* Text */
html.theme-future :is(h1, h2, h3, h4, legend, strong, b, label, th, summary) {
  color: #fff;
}

html.theme-future :is(h1, h2) {
  font-family: var(--fx-tech);
  font-weight: 500;
  letter-spacing: 1px;
}

html.theme-future h2 {
  text-shadow: 0 0 18px rgba(56, 214, 255, 0.35);
}

html.theme-future :is(p, li, td, span, small, dd, dt, time) {
  color: inherit;
}

html.theme-future :is(.muted, .tab-note, .dk-muted, .notify-when, .hint, .help, small) {
  color: var(--muted) !important;
}

html.theme-future a {
  color: var(--fx-cyan);
}

html.theme-future .error {
  color: #ff9db0 !important;
}

/* Panels and cards */
html.theme-future :is(
  .card, .app-card, .app-workspace-card, .app-doc-card, .app-wo-card, .app-hod-card, .app-menu-list, .app-frame,
  .report-card, .inspect-card, .warn-card, .home-note, .area-assign, .area-box-card, .alloc-row,
  .accordion-list, .accordion-body, .nested-body, .accordion-toggle, .nested-toggle,
  .suggest-card, .suggest-new, .todo-list, .server-report-card, .notify-push, .push-offer, .notify-panel,
  .takeon-form fieldset, .takeon-review, .takeon-details, .takeon-doc, .takeon-request-row, .takeon-hero-empty, .takeon-reason,
  .takeon-open, .takeon-done, .takeon-mechanic, .takeon-photo, .takeon-btn,
  .autoup-defects, .autoup-where, .autoup-text pre, .autoup-nophoto, .autoup-pass, .autoup-fail,
  .maintdocs-machine, .maintdocs-kind, .removal-list, .removal-pick, .removal-review, .app-confirm, .app-remove-confirm,
  .login-history, .logbook-scroll, .hod-activity-body, .service-booking-notice, .maintenance-done, .remove-site-summary li,
  .stop-note-page, .new-deviation-page, .shortcut-help, .tcs-notice-card, .user-remove-card, .month-track, .usage-track,
  .pin-change-toggle, .supervisor-qr-card, .notify-item, .pick-box, fieldset, details, dialog
) {
  background: var(--fx-panel) !important;
  border-color: var(--line) !important;
  color: var(--ink) !important;
  backdrop-filter: blur(12px);
}

html.theme-future :is(.card, .app-card, .app-doc-card, .app-wo-card, .app-hod-card, .report-card, .inspect-card, .suggest-card, .server-report-card, .takeon-review, .stop-note-page, .new-deviation-page) {
  border: 1px solid var(--line) !important;
  border-radius: 16px;
  box-shadow: inset 0 0 30px rgba(56, 214, 255, 0.04), 0 10px 30px rgba(0, 0, 0, 0.3) !important;
}

html.theme-future :is(.accordion-toggle, .nested-toggle, .pin-change-toggle)[aria-expanded="true"],
html.theme-future :is(.pick-box.selected, .pick-box:has(input:checked), .maintdocs-kind:has(input:checked), .takeon-mechanic:has(input:checked), .removal-pick.chosen, .takeon-photo.picked, .takeon-photo.done, .takeon-done.ok, .app-menu-option.selected, .app-menu-option:hover) {
  background: linear-gradient(90deg, rgba(56, 214, 255, 0.18), var(--fx-panel)) !important;
  border-color: var(--fx-cyan) !important;
  box-shadow: 0 0 16px rgba(56, 214, 255, 0.22);
}

html.theme-future :is(.notify-item.unread, .takeon-doc.missing, .autoup-found.unsure) {
  background: linear-gradient(90deg, rgba(255, 122, 61, 0.16), var(--fx-panel)) !important;
  border-color: rgba(255, 122, 61, 0.6) !important;
}

/* Status tints */
html.theme-future :is(.report-card.status-ready, .app-board a.status-ready) {
  background: linear-gradient(135deg, rgba(34, 229, 139, 0.12), var(--fx-panel) 55%) !important;
  border-color: rgba(34, 229, 139, 0.5) !important;
}

html.theme-future :is(.report-card.status-stop, .app-board a.status-stop) {
  background: linear-gradient(135deg, rgba(255, 77, 109, 0.14), var(--fx-panel) 55%) !important;
  border-color: rgba(255, 77, 109, 0.55) !important;
}

html.theme-future :is(.report-card.status-pending, .app-board a.status-pending) {
  background: linear-gradient(135deg, rgba(255, 122, 61, 0.14), var(--fx-panel) 55%) !important;
  border-color: rgba(255, 122, 61, 0.55) !important;
}

html.theme-future :is(.report-card.recall-card, .app-board a.status-recall, .app-board a.status-offsite, .badge.recall, .verdict.recall, .service-alert.soon) {
  background: linear-gradient(135deg, rgba(255, 194, 61, 0.14), var(--fx-panel) 55%) !important;
  border-color: rgba(255, 194, 61, 0.55) !important;
}

html.theme-future .app-board a {
  background: var(--fx-panel) !important;
  color: var(--ink) !important;
  border: 1px solid var(--line);
}

html.theme-future :is(.board-thumb, .history-thumb, .table-thumb, .empty-thumb, .app-board .empty-thumb, .supervisor-fleet-thumb) {
  background-color: #081428 !important;
}

/* Forms */
html.theme-future :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), select, textarea) {
  background: rgba(3, 10, 22, 0.75) !important;
  color: var(--ink) !important;
  border: 1px solid var(--line) !important;
  border-radius: 10px;
}

html.theme-future :is(input, select, textarea):focus {
  outline: none;
  border-color: var(--fx-cyan) !important;
  box-shadow: 0 0 0 3px rgba(56, 214, 255, 0.16), 0 0 16px rgba(56, 214, 255, 0.25) !important;
}

html.theme-future select option {
  background: #0b1730;
  color: var(--ink);
}

html.theme-future input::placeholder,
html.theme-future textarea::placeholder {
  color: #5f7898;
}

html.theme-future :is(input[type="checkbox"], input[type="radio"]) {
  accent-color: var(--fx-cyan);
}

/* Buttons */
html.theme-future button,
html.theme-future .button,
html.theme-future .camera-btn {
  border-radius: 10px;
  transition: box-shadow 0.2s, border-color 0.2s, transform 0.15s;
}

html.theme-future :is(button[type="submit"], .app-approve, .camera-btn:not(.report-upload-btn), .primary, .takeon-btn, .server-refresh, .notify-btn) {
  background: linear-gradient(90deg, #1aa8ff, var(--fx-cyan)) !important;
  color: #031022 !important;
  border: 0 !important;
  font-weight: 700;
  box-shadow: 0 0 18px rgba(56, 214, 255, 0.35);
}

html.theme-future :is(button.ghost, .ghost, .subtab, .page-tab, .camera-btn.report-upload-btn, .app-doc-card [data-user-edit], .app-remove-confirm [data-remove-cancel], .add-ldv-form .ghost, .tcs-notice-actions button, [class*="mech-filter-"]) {
  background: rgba(20, 40, 72, 0.6) !important;
  color: var(--ink) !important;
  border: 1px solid var(--line) !important;
}

html.theme-future :is(.subtab.active, .subtab[aria-selected="true"], .page-tab.active, [class*="mech-filter-"].active) {
  border-color: var(--fx-cyan) !important;
  box-shadow: 0 0 14px rgba(56, 214, 255, 0.3), inset 0 -2px 0 var(--fx-cyan);
  color: #fff !important;
}

html.theme-future :is(.app-reject, button.danger, .user-remove-btn) {
  background: rgba(255, 77, 109, 0.14) !important;
  color: #ff9db0 !important;
  border: 1px solid rgba(255, 77, 109, 0.5) !important;
}

html.theme-future button:not(:disabled):hover {
  box-shadow: 0 0 18px rgba(56, 214, 255, 0.35);
}

/* Badges and chips */
html.theme-future :is(.badge, .verdict, .takeon-chip, .service-alert) {
  background: rgba(56, 214, 255, 0.12) !important;
  color: #cfefff !important;
  border: 1px solid var(--line);
}

html.theme-future :is(.badge.pending, .verdict.pending, .takeon-chip.pending, .takeon-banner.pending) {
  background: rgba(255, 122, 61, 0.15) !important;
  color: #ffc7ad !important;
  border-color: rgba(255, 122, 61, 0.5);
}

/* Tables */
html.theme-future table {
  background: var(--fx-panel) !important;
  color: var(--ink) !important;
  border-color: var(--line) !important;
}

html.theme-future th {
  background: rgba(56, 214, 255, 0.08) !important;
  color: var(--fx-cyan) !important;
  font-family: var(--fx-tech);
  font-weight: 500;
  letter-spacing: 1px;
}

html.theme-future td {
  border-color: var(--line) !important;
  background: transparent !important;
}

html.theme-future tbody tr:nth-child(even) {
  background: rgba(56, 214, 255, 0.03) !important;
}

html.theme-future tbody tr:hover {
  background: rgba(56, 214, 255, 0.07) !important;
}

/* Bars and meters */
html.theme-future :is(.server-meter, .month-track, .usage-track) {
  background: rgba(3, 10, 22, 0.85) !important;
}

/* Machine page header and top bars */
html.theme-future :is(header, .topbar, .page-head, .vehicle-head, .inspect-head) {
  background-color: transparent;
}

html.theme-future hr {
  border-color: var(--line);
}

html.theme-future ::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

html.theme-future ::-webkit-scrollbar-thumb {
  background: rgba(56, 214, 255, 0.25);
  border-radius: 99px;
}

html.theme-future ::-webkit-scrollbar-track {
  background: transparent;
}