/* Global dark/light compatibility layer for all templates */
:root {
    color-scheme: light;
    --page-bg: #f4f6fb;
    --page-bg-soft: #eaf0ff;
    --surface: rgba(255, 255, 255, 0.88);
    --surface-strong: #ffffff;
    --surface-muted: rgba(15, 23, 42, 0.04);
    --border: rgba(15, 23, 42, 0.12);
    --border-strong: rgba(15, 23, 42, 0.22);
    --text: #0f172a;
    --text-2: #334155;
    --text-3: #64748b;
    --primary: #1d7df2;
    --primary-hover: #1469ce;
    --success: #12a66a;
    --warning: #ca7d12;
    --danger: #db3c3c;
    --app-icon-bg: linear-gradient(135deg, #edf3ff 0%, #f9fbff 100%);
    --app-icon-border: rgba(29, 125, 242, 0.2);
    --app-icon-color: #1f67cf;
    --scrollbar-track: #e8edf7;
    --scrollbar-thumb: #b7c5db;
    --scrollbar-thumb-hover: #9fb2cf;
    --shadow-soft: 0 10px 28px rgba(15, 23, 42, 0.08);
    --shadow-medium: 0 18px 36px rgba(15, 23, 42, 0.14);
    --text-primary: var(--text);
    --text-secondary: var(--text-2);
    --text-tertiary: var(--text-3);
    --text-muted: var(--text-3);
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --page-bg: #0b1220;
    --page-bg-soft: #111b2f;
    --surface: rgba(17, 24, 39, 0.84);
    --surface-strong: #111827;
    --surface-muted: rgba(148, 163, 184, 0.12);
    --border: rgba(148, 163, 184, 0.26);
    --border-strong: rgba(148, 163, 184, 0.38);
    --text: #e6edf6;
    --text-2: #bdc8d8;
    --text-3: #8f9cb0;
    --primary: #78afff;
    --primary-hover: #97c3ff;
    --success: #34d399;
    --warning: #fbbf24;
    --danger: #f87171;
    --app-icon-bg: linear-gradient(135deg, #e8f1ff 0%, #f5f8ff 100%);
    --app-icon-border: rgba(191, 219, 254, 0.52);
    --app-icon-color: #1d4ed8;
    --scrollbar-track: #0f1a2d;
    --scrollbar-thumb: #3e5170;
    --scrollbar-thumb-hover: #546a8f;
    --shadow-soft: 0 10px 28px rgba(2, 6, 23, 0.42);
    --shadow-medium: 0 18px 40px rgba(2, 6, 23, 0.52);
    --text-primary: var(--text);
    --text-secondary: var(--text-2);
    --text-tertiary: var(--text-3);
    --text-muted: var(--text-3);
}

html,
body {
    background: radial-gradient(circle at top, var(--page-bg-soft), transparent 42%), var(--page-bg) !important;
    color: var(--text) !important;
    transition: background-color 0.25s ease, color 0.25s ease;
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

*::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

*::-webkit-scrollbar-track {
    background: var(--scrollbar-track) !important;
}

*::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb) !important;
    border-radius: 999px;
    border: 2px solid var(--scrollbar-track);
}

*::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb-hover) !important;
}

body,
main,
.container,
.main-wrapper,
.page-container {
    color: var(--text) !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
.page-title,
.section-title,
.product-name,
.feature-title,
.cta-title,
.orders-panel-title {
    color: var(--text) !important;
}

p,
label,
small,
.page-subtitle,
.section-desc,
.feature-desc,
.product-desc,
.orders-subtitle,
.orders-panel-subtitle,
.admin-hint,
.text-muted {
    color: var(--text-2) !important;
}

a,
.product-link,
.nav-links a.active,
.nav-item.active {
    color: var(--primary);
}

a:hover,
.product-link:hover,
.nav-links a:hover,
.nav-item:hover {
    color: var(--primary-hover);
}

.navbar,
.sidebar,
.top-nav,
.header,
nav,
.sidebar-footer,
.sidebar-header {
    background: color-mix(in srgb, var(--surface) 96%, transparent) !important;
    border-color: var(--border) !important;
    box-shadow: none !important;
}

.card,
.content-card,
.stats-section,
.orders-panel,
.orders-table-wrap,
.platform-chart,
.stat-card,
.product-card,
.feature-card,
.download-card,
.upload-card,
.glass-card,
.login-container,
.form-card,
.modal-content,
.confirm-content,
.device-card,
.order-card,
.admin-form,
.privacy-container,
.policy-content,
.admin-hero .page-header,
.admin-hero-card {
    background: var(--surface) !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
    box-shadow: var(--shadow-soft) !important;
}

.card:hover,
.content-card:hover,
.orders-panel:hover,
.download-card:hover,
.product-card:hover,
.feature-card:hover,
.device-card:hover,
.order-card:hover {
    box-shadow: var(--shadow-medium) !important;
}

.hero,
.download-hero,
.login-page,
.upload-page {
    background: linear-gradient(180deg, color-mix(in srgb, var(--page-bg) 88%, white 12%), var(--page-bg)) !important;
}

:root[data-theme="dark"] .hero,
:root[data-theme="dark"] .download-hero,
:root[data-theme="dark"] .login-page,
:root[data-theme="dark"] .upload-page {
    background: linear-gradient(180deg, #121b2e 0%, #0b1220 100%) !important;
}

.btn,
button,
.hero-btn-primary,
.cta-btn,
.download-btn,
.item-btn {
    border-radius: 12px !important;
    transition: all 0.2s ease;
}

.btn-primary,
.btn-refresh,
.btn-approve,
.btn-restore,
.hero-btn-primary,
.cta-btn,
.download-btn {
    background: var(--primary) !important;
    color: #ffffff !important;
    border-color: transparent !important;
}

.btn-primary:hover,
.btn-refresh:hover,
.btn-approve:hover,
.btn-restore:hover,
.hero-btn-primary:hover,
.cta-btn:hover,
.download-btn:hover {
    background: var(--primary-hover) !important;
}

.btn-secondary,
.hero-btn-secondary,
.btn-cancel,
.btn-revoke {
    background: var(--surface-muted) !important;
    color: var(--text) !important;
    border-color: var(--border) !important;
}

.btn-reject {
    background: color-mix(in srgb, var(--danger) 18%, transparent) !important;
    border-color: color-mix(in srgb, var(--danger) 40%, transparent) !important;
    color: var(--danger) !important;
}

input,
select,
textarea,
.form-control,
.orders-input,
.orders-select {
    background: var(--surface-strong) !important;
    color: var(--text) !important;
    border-color: var(--border) !important;
}

input::placeholder,
textarea::placeholder {
    color: var(--text-3) !important;
}

input:focus,
select:focus,
textarea:focus,
.form-control:focus,
.orders-input:focus,
.orders-select:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 25%, transparent) !important;
}

select option {
    background: var(--surface-strong) !important;
    color: var(--text) !important;
}

table,
.orders-table {
    color: var(--text) !important;
}

table thead th,
.orders-table thead th {
    background: color-mix(in srgb, var(--surface) 70%, var(--page-bg) 30%) !important;
    color: var(--text-3) !important;
    border-bottom-color: var(--border) !important;
}

table tbody td,
.orders-table tbody td {
    color: var(--text) !important;
    border-bottom-color: color-mix(in srgb, var(--border) 68%, transparent) !important;
}

table tbody tr,
.orders-table tbody tr {
    background: transparent !important;
}

table tbody tr:hover,
.orders-table tbody tr:hover {
    background: color-mix(in srgb, var(--primary) 10%, transparent) !important;
}

.status-badge,
.orders-badge,
.badge,
.tag,
.pill,
.hero-badge {
    border-color: var(--border) !important;
}

.status-approved {
    color: var(--success) !important;
}

.status-pending,
.status-expired {
    color: var(--warning) !important;
}

.status-rejected {
    color: var(--danger) !important;
}

.empty-state,
.loading,
.log-entry,
.datetime-selector,
.duration-card,
.app-filter-card,
.app-stat-card {
    border-color: var(--border) !important;
    color: var(--text) !important;
}

.footer {
    background: #111827 !important;
    color: #dbe5f5 !important;
    border-top-color: var(--border) !important;
}

:root[data-theme="dark"] .footer {
    background: #040913 !important;
}

.footer p,
.footer a,
.footer-copy,
.footer-brand p,
.footer-nav-links a {
    color: #dbe5f5 !important;
    opacity: 0.88;
}

.ui-theme-toggle {
    background: var(--surface) !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
    box-shadow: var(--shadow-medium) !important;
}

.ui-theme-toggle:hover {
    border-color: var(--border-strong) !important;
}

/* Dark mode typography harmonization across all pages */
:root[data-theme="dark"] .page-title,
:root[data-theme="dark"] .section-title,
:root[data-theme="dark"] .product-name,
:root[data-theme="dark"] .feature-title,
:root[data-theme="dark"] .platform-name,
:root[data-theme="dark"] .item-name,
:root[data-theme="dark"] .version-name,
:root[data-theme="dark"] .app-name,
:root[data-theme="dark"] .app-name-large,
:root[data-theme="dark"] .device-name,
:root[data-theme="dark"] .orders-panel-title,
:root[data-theme="dark"] .nav-logo,
:root[data-theme="dark"] .logo-text,
:root[data-theme="dark"] .user-name {
    color: var(--text) !important;
}

:root[data-theme="dark"] .page-subtitle,
:root[data-theme="dark"] .section-desc,
:root[data-theme="dark"] .product-desc,
:root[data-theme="dark"] .feature-desc,
:root[data-theme="dark"] .platform-desc,
:root[data-theme="dark"] .description,
:root[data-theme="dark"] .hero-description,
:root[data-theme="dark"] .app-tagline,
:root[data-theme="dark"] .orders-subtitle,
:root[data-theme="dark"] .orders-panel-subtitle,
:root[data-theme="dark"] .device-platform,
:root[data-theme="dark"] .device-meta,
:root[data-theme="dark"] .user-role,
:root[data-theme="dark"] .logo-subtitle,
:root[data-theme="dark"] .nav-section-title {
    color: var(--text-2) !important;
}

:root[data-theme="dark"] .item-meta,
:root[data-theme="dark"] .file-meta,
:root[data-theme="dark"] .file-item-meta,
:root[data-theme="dark"] .version-meta,
:root[data-theme="dark"] .product-meta,
:root[data-theme="dark"] .meta-item,
:root[data-theme="dark"] .meta-bar,
:root[data-theme="dark"] .time,
:root[data-theme="dark"] .device-time,
:root[data-theme="dark"] .form-hint,
:root[data-theme="dark"] .admin-hint,
:root[data-theme="dark"] .action-note,
:root[data-theme="dark"] .footer-copy {
    color: var(--text-3) !important;
}

:root[data-theme="dark"] .nav-links a,
:root[data-theme="dark"] .nav-item,
:root[data-theme="dark"] .footer-nav-links a {
    color: var(--text-2) !important;
}

:root[data-theme="dark"] .stat-card .number,
:root[data-theme="dark"] .stat-card .label,
:root[data-theme="dark"] .stat-card .stat-content,
:root[data-theme="dark"] #totalDevices,
:root[data-theme="dark"] #approvedDevices,
:root[data-theme="dark"] #pendingDevices,
:root[data-theme="dark"] #rejectedDevices,
:root[data-theme="dark"] #revokedDevices {
    color: var(--text) !important;
}

:root[data-theme="dark"] .badge,
:root[data-theme="dark"] .tag,
:root[data-theme="dark"] .pill,
:root[data-theme="dark"] .orders-badge,
:root[data-theme="dark"] .status-badge {
    text-shadow: none !important;
}

/* Keep app icon containers in a light palette (avoid black icon blocks) */
.app-large-icon,
.product-icon,
.item-icon,
.showcase-product-icon {
    background: var(--app-icon-bg) !important;
    border: 1px solid var(--app-icon-border) !important;
    color: var(--app-icon-color) !important;
}

.app-large-icon img,
.product-icon img,
.item-icon img,
.showcase-product img,
img.app-icon {
    background: var(--app-icon-bg) !important;
    border: 1px solid var(--app-icon-border) !important;
    border-radius: inherit;
    box-sizing: border-box;
}

/* Admin app icons: keep a light chip even in dark theme */
.app-stat-card .app-icon-large,
.app-filter-card .app-icon {
    background: var(--app-icon-bg) !important;
    border: 1px solid var(--app-icon-border) !important;
    color: var(--app-icon-color) !important;
    border-radius: 12px !important;
    box-shadow: none !important;
}

.app-stat-card .app-icon-large {
    width: 40px;
    height: 40px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
}

.app-filter-card .app-icon {
    width: 30px;
    height: 30px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
}

/* Global form readability guardrails (light/dark + autofill) */
input,
select,
textarea,
.input,
.form-control,
.form-input,
.form-select,
.form-textarea,
.orders-input,
.orders-select,
.datetime-selector input {
    color: var(--text) !important;
    -webkit-text-fill-color: var(--text) !important;
    caret-color: var(--text) !important;
}

input::placeholder,
textarea::placeholder,
.form-control::placeholder,
.form-input::placeholder,
.orders-input::placeholder {
    color: var(--text-3) !important;
    -webkit-text-fill-color: var(--text-3) !important;
    opacity: 1;
}

select option {
    color: var(--text) !important;
    background: var(--surface-strong) !important;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--text) !important;
    caret-color: var(--text) !important;
    box-shadow: 0 0 0 1000px var(--surface-strong) inset !important;
    -webkit-box-shadow: 0 0 0 1000px var(--surface-strong) inset !important;
    transition: background-color 9999s ease-out 0s;
}

:root[data-theme="light"] input,
:root[data-theme="light"] select,
:root[data-theme="light"] textarea,
:root[data-theme="light"] .input,
:root[data-theme="light"] .form-control,
:root[data-theme="light"] .form-input,
:root[data-theme="light"] .form-select,
:root[data-theme="light"] .form-textarea,
:root[data-theme="light"] .orders-input,
:root[data-theme="light"] .orders-select,
:root[data-theme="light"] .datetime-selector input {
    background: #ffffff !important;
    border-color: rgba(15, 23, 42, 0.16) !important;
    color: #0f172a !important;
    -webkit-text-fill-color: #0f172a !important;
}

:root[data-theme="dark"] input,
:root[data-theme="dark"] select,
:root[data-theme="dark"] textarea,
:root[data-theme="dark"] .input,
:root[data-theme="dark"] .form-control,
:root[data-theme="dark"] .form-input,
:root[data-theme="dark"] .form-select,
:root[data-theme="dark"] .form-textarea,
:root[data-theme="dark"] .orders-input,
:root[data-theme="dark"] .orders-select,
:root[data-theme="dark"] .datetime-selector input {
    background: #101a2b !important;
    border-color: rgba(148, 163, 184, 0.28) !important;
    color: #e6edf6 !important;
    -webkit-text-fill-color: #e6edf6 !important;
}

/* Home dark-mode contrast tuning */
:root[data-theme="dark"] .hero h1,
:root[data-theme="dark"] .hero-title,
:root[data-theme="dark"] .hero-content h1 {
    color: #f3f8ff !important;
    -webkit-text-fill-color: #f3f8ff !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.28);
}

:root[data-theme="dark"] .hero-description,
:root[data-theme="dark"] .hero p,
:root[data-theme="dark"] .showcase-text {
    color: #d2deee !important;
    -webkit-text-fill-color: #d2deee !important;
}

:root[data-theme="dark"] .highlights-strip .highlight-item {
    border-color: rgba(148, 163, 184, 0.28) !important;
    background:
        radial-gradient(circle at 8% 14%, rgba(59, 130, 246, 0.12), transparent 36%),
        linear-gradient(150deg, rgba(14, 22, 38, 0.95) 0%, rgba(20, 32, 54, 0.92) 100%) !important;
    box-shadow: 0 14px 30px rgba(2, 6, 23, 0.44) !important;
}

:root[data-theme="dark"] .highlights-strip .highlight-label {
    color: #8fb0dc !important;
    -webkit-text-fill-color: #8fb0dc !important;
}

:root[data-theme="dark"] .highlights-strip .highlight-item strong {
    color: #f3f8ff !important;
    -webkit-text-fill-color: #f3f8ff !important;
}

:root[data-theme="dark"] .highlights-strip .highlight-item span {
    color: #c4d3e8 !important;
    -webkit-text-fill-color: #c4d3e8 !important;
}