/*
 * AirAdmin Classic visual template.
 *
 * Personality: legacy-friendly blue/purple chrome, stronger contrast,
 * traditional admin surfaces.
 */
:root {
    color-scheme: light;
    --ui-font-sans: "Microsoft YaHei", "Segoe UI", Arial, sans-serif;
    --ui-font-size-xs: 12px;
    --ui-font-size-sm: 14px;
    --ui-font-size-md: 16px;
    --ui-font-size-lg: 18px;
    --ui-font-size-xl: 22px;
    --ui-line-height-tight: 1.22;
    --ui-line-height-base: 1.56;
    --ui-space-1: 4px;
    --ui-space-2: 8px;
    --ui-space-3: 12px;
    --ui-space-4: 16px;
    --ui-space-5: 22px;
    --ui-space-6: 26px;
    --ui-space-8: 34px;
    --ui-space-10: 42px;
    --ui-radius-xs: 3px;
    --ui-radius-sm: 6px;
    --ui-radius-md: 10px;
    --ui-radius-lg: 14px;
    --ui-radius-xl: 18px;
    --ui-radius-2xl: 22px;
    --ui-radius-pill: 999px;
    --ui-color-bg: #edf1fb;
    --ui-color-bg-soft: #f8faff;
    --ui-color-bg-muted: #e7edf8;
    --ui-color-surface: #ffffff;
    --ui-color-surface-alpha: rgba(255, 255, 255, 0.95);
    --ui-color-surface-soft: #f4f7fc;
    --ui-color-border: rgba(49, 70, 118, 0.18);
    --ui-color-border-strong: rgba(49, 70, 118, 0.32);
    --ui-color-text: #15233e;
    --ui-color-text-muted: #536276;
    --ui-color-text-soft: #7d899a;
    --ui-color-text-inverse: #ffffff;
    --ui-color-primary: #3157c8;
    --ui-color-primary-hover: #213a8f;
    --ui-color-primary-soft: rgba(49, 87, 200, 0.14);
    --ui-color-success: #23845f;
    --ui-color-warning: #b9770e;
    --ui-color-danger: #c13d55;
    --ui-color-danger-hover: #963044;
    --ui-color-info: #236aa6;
    --ui-chrome-bg: linear-gradient(180deg, #1d2d57 0%, #263b75 52%, #172447 100%);
    --ui-chrome-bg-store: linear-gradient(180deg, #263b75 0%, #172447 100%);
    --ui-chrome-divider: rgba(255, 255, 255, 0.16);
    --ui-shadow-sm: 0 6px 14px rgba(28, 42, 76, 0.08);
    --ui-shadow-md: 0 12px 26px rgba(28, 42, 76, 0.11);
    --ui-shadow-lg: 0 20px 42px rgba(28, 42, 76, 0.16);
    --ui-button-radius: var(--ui-radius-sm);
    --ui-button-padding-y: 8px;
    --ui-button-padding-x: 16px;
    --ui-card-padding: var(--ui-space-5);
    --ui-table-cell-padding-y: 12px;
    --ui-table-cell-padding-x: 14px;
    --ui-shell-sidebar-width: 248px;
    --ui-admin-sidebar-width: 304px;
    --ui-agent-sidebar-width: 264px;
    --ui-store-sidebar-width: 272px;
    --ui-page-gap: var(--ui-space-5);
    --ui-content-max-width: none;
    --ui-login-card-padding: 2.4rem 2.2rem;
    --ui-login-input-padding: 0.95rem 1.2rem;
    --ui-login-input-radius: var(--ui-radius-md);
    --ui-login-button-padding: 0.95rem;
    --ui-login-button-radius: var(--ui-radius-md);
    --ui-login-button-font-size: var(--ui-font-size-md);
    --ui-password-modal-body-padding: 26px;
    --ui-password-modal-input-padding: 13px 15px;
    --ui-password-modal-button-padding: 11px 24px;
}

body.ui-template-classic.login-body {
    --ui-login-left-glow: rgba(49, 87, 200, 0.1);
    --ui-login-slogan-top-color: #15233e;
    --ui-login-slogan-middle-color: #263b75;
    --ui-login-slogan-border: #3157c8;
    --ui-login-slogan-bottom-color: #536276;
    --ui-login-slogan-bottom-bg: rgba(49, 87, 200, 0.08);
    --ui-login-accent: #3157c8;
    --ui-login-accent-dark: #213a8f;
    --ui-login-card-bg: rgba(255, 255, 255, 0.9);
    --ui-login-card-hover-bg: rgba(255, 255, 255, 0.96);
    --ui-login-card-border: rgba(49, 70, 118, 0.18);
    --ui-login-card-shadow: var(--ui-shadow-lg);
    --ui-login-input-bg: rgba(255, 255, 255, 0.92);
    --ui-login-input-focus-bg: #ffffff;
    --ui-login-footer-hover-text: #15233e;
}

body.ui-template-classic {
    --app-bg: #edf1fb;
    --app-surface: #ffffff;
    --app-surface-soft: #f4f7fc;
    --app-surface-border: var(--ui-color-border);
    --app-text: var(--ui-color-text);
    --app-primary: var(--ui-color-primary);
    --app-primary-strong: var(--ui-color-primary-hover);
    --app-shadow: rgba(28, 42, 76, 0.08);
    --admin-radius-xl: var(--ui-radius-xl);
    --admin-radius-lg: var(--ui-radius-lg);
    --admin-radius-md: var(--ui-radius-md);
    --admin-radius-sm: var(--ui-radius-sm);
    --admin-shadow: var(--ui-shadow-md);
    --admin-shadow-soft: var(--ui-shadow-sm);
    --agent-radius-xl: var(--ui-radius-xl);
    --agent-radius-lg: var(--ui-radius-lg);
    --agent-radius-md: var(--ui-radius-md);
    --agent-radius-sm: var(--ui-radius-sm);
    --agent-shadow: var(--ui-shadow-md);
    --agent-shadow-soft: var(--ui-shadow-sm);
    --sidebar-width: var(--ui-store-sidebar-width);
    background:
        linear-gradient(180deg, rgba(49, 87, 200, 0.08), transparent 260px),
        #edf1fb;
}

body.ui-template-classic .sidebar {
    --sidebar-active-bg: linear-gradient(135deg, #3157c8 0%, #6d39c6 100%);
    --sidebar-active-shadow: 0 10px 22px rgba(49, 87, 200, 0.22);
    --sidebar-active-bar: #ffb020;
    --sidebar-active-icon-bg: rgba(255, 255, 255, 0.18);
    --sidebar-active-icon-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
    width: var(--ui-shell-sidebar-width);
    background:
        linear-gradient(180deg, #1d2d57 0%, #263b75 52%, #172447 100%);
    border-right-color: rgba(255, 255, 255, 0.14);
    box-shadow: 16px 0 34px rgba(28, 42, 76, 0.2);
}

body.ui-template-classic.rooms-theme-active .sidebar {
    background: linear-gradient(180deg, #1d2d57 0%, #263b75 52%, #172447 100%);
}

body.ui-template-classic .sidebar::before {
    background: radial-gradient(circle, rgba(255, 176, 32, 0.16) 0%, rgba(255, 176, 32, 0) 70%);
}

body.ui-template-classic .sidebar-brand {
    border-radius: 14px;
    background: linear-gradient(135deg, #3157c8 0%, #213a8f 100%);
}

body.ui-template-classic .sidebar-section-label,
body.ui-template-classic .sidebar-nav a {
    color: rgba(255, 255, 255, 0.76);
}

body.ui-template-classic .sidebar-nav a svg,
body.ui-template-classic .sidebar-link-badge {
    background: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.88);
}

body.ui-template-classic .sidebar-nav a:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

body.ui-template-classic .sidebar-nav li.active a,
body.ui-template-classic .sidebar-nav li.is-navigating a {
    background: var(--sidebar-active-bg);
    color: #ffffff;
    box-shadow: var(--sidebar-active-shadow);
}

body.ui-template-classic .sidebar-nav li.active .sidebar-link-copy,
body.ui-template-classic .sidebar-nav li.active .sidebar-link-content,
body.ui-template-classic .sidebar-nav li.is-navigating .sidebar-link-copy,
body.ui-template-classic .sidebar-nav li.is-navigating .sidebar-link-content,
body.ui-template-classic .sidebar-nav li.active svg,
body.ui-template-classic .sidebar-nav li.is-navigating svg {
    color: #ffffff;
}

body.ui-template-classic .sidebar-nav li.active .sidebar-link-badge,
body.ui-template-classic .sidebar-nav li.is-navigating .sidebar-link-badge {
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
}

body.ui-template-classic .sidebar:not(.collapsed) + .main-content {
    margin-left: var(--ui-shell-sidebar-width);
    width: calc(100% - var(--ui-shell-sidebar-width));
}

body.ui-template-classic .header {
    background: linear-gradient(180deg, #ffffff 0%, #f4f7fc 100%);
    border-bottom: 1px solid var(--ui-color-border);
    box-shadow: var(--ui-shadow-sm);
    min-height: 74px;
}

body.ui-template-classic .stat-card,
body.ui-template-classic .device-card,
body.ui-template-classic .admin-card,
body.ui-template-classic .agent-card,
body.ui-template-classic .settings-card,
body.ui-template-classic .admin-page-header,
body.ui-template-classic .admin-stat-card,
body.ui-template-classic .admin-table-wrap,
body.ui-template-classic .admin-form,
body.ui-template-classic .billing-hero,
body.ui-template-classic .billing-product-card,
body.ui-template-classic .billing-pay-panel,
body.ui-template-classic .billing-store-row,
body.ui-template-classic .billing-log-section,
body.ui-template-classic .billing-commission-block,
body.ui-template-classic .billing-orders-table-wrap,
body.ui-template-classic .billing-tabs,
body.ui-template-classic .operations-card,
body.ui-template-classic .login-card,
body.ui-template-classic .automation-rules-shell .card-panel,
body.ui-template-classic .automation-rule-card,
body.ui-template-classic .automation-rule-fieldset,
body.ui-template-classic .automation-rules-disabled-callout {
    border: 1px solid var(--ui-color-border);
    border-radius: var(--ui-radius-lg);
    background: #ffffff;
    box-shadow: var(--ui-shadow-md);
}

body.ui-template-classic .stat-card,
body.ui-template-classic .device-card,
body.ui-template-classic .admin-card,
body.ui-template-classic .agent-card {
    padding: var(--ui-card-padding);
}

body.ui-template-classic .btn,
body.ui-template-classic .admin-btn,
body.ui-template-classic .agent-btn,
body.ui-template-classic .login-btn,
body.ui-template-classic button[type="submit"] {
    border-radius: var(--ui-button-radius);
}

body.ui-template-classic .btn,
body.ui-template-classic .admin-btn,
body.ui-template-classic .agent-btn {
    padding: var(--ui-button-padding-y) var(--ui-button-padding-x);
}

body.ui-template-classic table th,
body.ui-template-classic table td {
    padding: var(--ui-table-cell-padding-y) var(--ui-table-cell-padding-x);
}

body.ui-template-classic .sidenav {
    width: var(--ui-admin-sidebar-width);
}

body.ui-template-classic.admin-page .main-content {
    margin-left: var(--ui-admin-sidebar-width);
}

body.ui-template-classic .agent-sidebar {
    width: var(--ui-agent-sidebar-width);
}

body.ui-template-classic .agent-main {
    margin-left: var(--ui-agent-sidebar-width);
}

body.ui-template-classic.rooms-theme-active {
    --app-bg: #edf1fb;
    --app-surface: #ffffff;
    --app-surface-soft: #f4f7fc;
    --app-surface-border: var(--ui-color-border);
    --app-text: var(--ui-color-text);
    --app-primary: var(--ui-color-primary);
    --app-primary-strong: var(--ui-color-primary-hover);
}

body.ui-template-classic.rooms-theme-active .rooms-overview-shell,
body.ui-template-classic.rooms-theme-active .rooms-toolbar-panel {
    --rooms-overview-bg-start: #eef3ff;
    --rooms-overview-bg-mid: #ffffff;
    --rooms-overview-bg-end: #f3f0ff;
    --rooms-overview-border: rgba(49, 70, 118, 0.2);
    --rooms-overview-title: #15233e;
    --rooms-overview-highlight: #3157c8;
    --rooms-overview-text: #536276;
    --rooms-overview-chip-bg: rgba(49, 87, 200, 0.11);
    --rooms-overview-chip-color: #213a8f;
    --rooms-toolbar-bg-start: rgba(244, 247, 252, 0.98);
    --rooms-toolbar-bg-end: rgba(255, 255, 255, 0.98);
    --rooms-toolbar-border: rgba(49, 70, 118, 0.16);
    --rooms-toolbar-input-bg: #ffffff;
    --rooms-toolbar-input-text: #263957;
}

body.ui-template-classic.rooms-theme-active .rooms-overview-panel,
body.ui-template-classic.rooms-theme-active .rooms-toolbar,
body.ui-template-classic.rooms-theme-active .room-card {
    border-radius: var(--ui-radius-lg);
}

body.ui-template-classic.rooms-theme-active .room-card {
    --room-card-bg-start: #ffffff;
    --room-card-bg-end: #f6f8fd;
    --room-card-border: rgba(49, 70, 118, 0.2);
    --room-card-hover-border: rgba(49, 87, 200, 0.3);
    --room-header-start: #3157c8;
    --room-header-mid: #263b75;
    --room-header-end: #6d39c6;
    --room-section-icon-bg: rgba(49, 87, 200, 0.12);
    --room-section-icon-color: #3157c8;
    --room-ac-surface: rgba(231, 237, 248, 0.86);
}

body.ui-template-classic.rooms-theme-active .rooms-list {
    --rooms-list-surface: rgba(255, 255, 255, 0.96);
    --rooms-list-head-bg: #e7edf8;
    --rooms-list-cell-text: #263957;
}

@media (max-width: 1120px) {
    body.ui-template-classic.admin-page .main-content,
    body.ui-template-classic .agent-main {
        margin-left: 0;
    }
}