/*
 * Estate OS theme tokens and Material 3-inspired component layer.
 * Change the --md-sys-color-* and --md-sys-shape-* values to brand the UI
 * without editing templates or business styles.
 */
:root {
    color-scheme: dark;
    --md-sys-color-primary: #68dfbd;
    --md-sys-color-on-primary: #00382c;
    --md-sys-color-primary-container: #165143;
    --md-sys-color-on-primary-container: #c7f7e8;
    --md-sys-color-secondary: #b1ccc4;
    --md-sys-color-on-secondary: #1d352f;
    --md-sys-color-secondary-container: #2d4b44;
    --md-sys-color-on-secondary-container: #d2e8e1;
    --md-sys-color-error: #ffb4ab;
    --md-sys-color-on-error-container: #ffdad6;
    --md-sys-color-error-container: #713039;
    --md-sys-color-background: #071714;
    --md-sys-color-on-background: #e6f1ed;
    --md-sys-color-surface: #071714;
    --md-sys-color-surface-container-low: #0d211d;
    --md-sys-color-surface-container: #112722;
    --md-sys-color-surface-container-high: #19312b;
    --md-sys-color-on-surface: #e6f1ed;
    --md-sys-color-on-surface-variant: #aebfba;
    --md-sys-color-outline: #6e817b;
    --md-sys-color-outline-variant: #344b44;
    --md-sys-shape-corner-small: 10px;
    --md-sys-shape-corner-medium: 16px;
    --md-sys-shape-corner-large: 24px;
    --md-sys-shape-corner-full: 999px;
    --md-sys-elevation-1: 0 1px 3px rgb(0 0 0 / 32%), 0 1px 2px rgb(0 0 0 / 24%);
    --md-sys-elevation-2: 0 2px 7px rgb(0 0 0 / 30%), 0 1px 3px rgb(0 0 0 / 22%);
    --md-sys-motion-duration-short: 160ms;
    --md-sys-motion-easing-standard: cubic-bezier(.2, 0, 0, 1);
    --estate-os-content-width: 1240px;

    --background: var(--md-sys-color-background);
    --surface: var(--md-sys-color-surface-container);
    --surface-soft: var(--md-sys-color-surface-container-high);
    --surface-deep: var(--md-sys-color-surface-container-low);
    --border: var(--md-sys-color-outline-variant);
    --border-strong: var(--md-sys-color-outline);
    --text: var(--md-sys-color-on-surface);
    --muted: var(--md-sys-color-on-surface-variant);
    --accent: var(--md-sys-color-primary);
    --accent-strong: #84e9ca;
    --warning: #ffdea5;
    --danger: var(--md-sys-color-error);
    --radius-md: var(--md-sys-shape-corner-medium);
    --shadow: var(--md-sys-elevation-2);
}

:root[data-theme="system"] { color-scheme: dark; }

:root[data-theme="light"] {
    color-scheme: light;
    --md-sys-color-primary: #006b55;
    --md-sys-color-on-primary: #ffffff;
    --md-sys-color-primary-container: #83f8d2;
    --md-sys-color-on-primary-container: #002118;
    --md-sys-color-secondary: #4b635b;
    --md-sys-color-on-secondary: #ffffff;
    --md-sys-color-secondary-container: #cde8df;
    --md-sys-color-on-secondary-container: #08201a;
    --md-sys-color-error: #ba1a1a;
    --md-sys-color-on-error-container: #410002;
    --md-sys-color-error-container: #ffdad6;
    --md-sys-color-background: #f5fbf8;
    --md-sys-color-on-background: #171d1b;
    --md-sys-color-surface: #f5fbf8;
    --md-sys-color-surface-container-low: #eff5f2;
    --md-sys-color-surface-container: #e9efec;
    --md-sys-color-surface-container-high: #e2e9e5;
    --md-sys-color-on-surface: #171d1b;
    --md-sys-color-on-surface-variant: #3f4945;
    --md-sys-color-outline: #6f7975;
    --md-sys-color-outline-variant: #bec9c4;
    --md-sys-elevation-1: 0 1px 3px rgb(28 43 37 / 18%), 0 1px 2px rgb(28 43 37 / 12%);
    --md-sys-elevation-2: 0 4px 14px rgb(28 43 37 / 17%), 0 2px 5px rgb(28 43 37 / 11%);
    --accent-strong: #00866c;
    --warning: #694d00;
}

@media (prefers-color-scheme: light) {
    :root[data-theme="system"] {
        color-scheme: light;
        --md-sys-color-primary: #006b55;
        --md-sys-color-on-primary: #ffffff;
        --md-sys-color-primary-container: #83f8d2;
        --md-sys-color-on-primary-container: #002118;
        --md-sys-color-secondary: #4b635b;
        --md-sys-color-on-secondary: #ffffff;
        --md-sys-color-secondary-container: #cde8df;
        --md-sys-color-on-secondary-container: #08201a;
        --md-sys-color-error: #ba1a1a;
        --md-sys-color-on-error-container: #410002;
        --md-sys-color-error-container: #ffdad6;
        --md-sys-color-background: #f5fbf8;
        --md-sys-color-on-background: #171d1b;
        --md-sys-color-surface: #f5fbf8;
        --md-sys-color-surface-container-low: #eff5f2;
        --md-sys-color-surface-container: #e9efec;
        --md-sys-color-surface-container-high: #e2e9e5;
        --md-sys-color-on-surface: #171d1b;
        --md-sys-color-on-surface-variant: #3f4945;
        --md-sys-color-outline: #6f7975;
        --md-sys-color-outline-variant: #bec9c4;
        --md-sys-elevation-1: 0 1px 3px rgb(28 43 37 / 18%), 0 1px 2px rgb(28 43 37 / 12%);
        --md-sys-elevation-2: 0 4px 14px rgb(28 43 37 / 17%), 0 2px 5px rgb(28 43 37 / 11%);
        --accent-strong: #00866c;
        --warning: #694d00;
    }
}

body {
    background:
        radial-gradient(circle at 8% -10%, color-mix(in srgb, var(--md-sys-color-primary-container) 42%, transparent), transparent 32rem),
        var(--md-sys-color-background);
    font-family: Roboto, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

h1 {
    font-size: clamp(1.9rem, 4.4vw, 2.85rem);
    line-height: 1.1;
    letter-spacing: -.025em;
}

h2 { font-size: clamp(1.35rem, 2.6vw, 1.75rem); }
h3 { font-size: 1.08rem; }
p, li { line-height: 1.55; }

.system-page,
.dashboard-shell {
    border-color: transparent;
    background: var(--md-sys-color-surface);
    box-shadow: var(--md-sys-elevation-2);
}

.dashboard-shell { padding: clamp(18px, 3vw, 30px); }
.dashboard-shell { width: min(var(--estate-os-content-width), calc(100% - 32px)); }

.dashboard-topbar h1,
.onboarding-header h1 {
    margin-block: 6px 10px;
    font-size: clamp(1.9rem, 4vw, 2.65rem);
}

.dashboard-topbar > div > p:last-child,
.onboarding-header > div > p:last-child {
    max-width: 64ch;
    margin-top: 0;
    font-size: .94rem;
}

.content-section,
.detail-header,
.client-estate-card,
.manager-card,
.land-card,
.device-card,
.form-panel,
.texture-preview-card {
    border-color: transparent;
    background: var(--md-sys-color-surface-container-low);
    box-shadow: var(--md-sys-elevation-1);
}

.content-section { padding: clamp(18px, 2.5vw, 24px); }
.section-intro { max-width: 68ch; margin-top: 7px; }
.small-note, .field-help { color: var(--md-sys-color-on-surface-variant); }
.section-heading h2 { line-height: 1.22; }

.eyebrow {
    color: var(--md-sys-color-primary);
    font-size: .72rem;
    letter-spacing: .12em;
}

.dashboard-nav,
.platform-tabs {
    gap: 4px;
    padding: 6px;
    border-color: transparent;
    border-radius: var(--md-sys-shape-corner-large);
    background: var(--md-sys-color-surface-container-low);
    box-shadow: var(--md-sys-elevation-1);
    overscroll-behavior-inline: contain;
    scroll-snap-type: inline proximity;
}

.platform-tabs {
    display: flex;
    overflow-x: auto;
    margin-block: 24px;
}

.dashboard-nav a,
.platform-tabs a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding-inline: 16px;
    border-radius: var(--md-sys-shape-corner-full);
    scroll-snap-align: start;
    transition: color var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard), background var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard);
}

.dashboard-nav a:hover,
.dashboard-nav a.active,
.platform-tabs a:hover,
.platform-tabs a.active {
    background: var(--md-sys-color-secondary-container);
    color: var(--md-sys-color-on-secondary-container);
}

.button {
    min-height: 48px;
    padding: 10px 20px;
    border-radius: var(--md-sys-shape-corner-full);
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
    box-shadow: var(--md-sys-elevation-1);
    letter-spacing: .01em;
    transition: color var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard), background var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard), box-shadow var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard), transform var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard);
}

.button:hover:not(:disabled) { background: var(--accent-strong); }
.button.secondary {
    border-color: var(--md-sys-color-outline);
    background: transparent;
    color: var(--md-sys-color-primary);
    box-shadow: none;
}
.button.danger {
    border-color: transparent;
    background: var(--md-sys-color-error-container);
    color: var(--md-sys-color-on-error-container);
}
.button.compact { min-height: 42px; padding: 8px 16px; }

input[type="email"],
input[type="password"],
input[type="text"],
input[type="url"],
input[type="number"],
input[type="datetime-local"],
select,
textarea {
    min-height: 52px;
    border-color: var(--md-sys-color-outline);
    border-radius: var(--md-sys-shape-corner-small);
    background: transparent;
}

label { font-size: .94rem; }
.field-help { font-size: .78rem; font-weight: 450; }

input:focus,
select:focus,
textarea:focus {
    border-color: var(--md-sys-color-primary);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--md-sys-color-primary) 42%, transparent);
}

.status-pill {
    border-color: transparent;
    border-radius: var(--md-sys-shape-corner-full);
    background: var(--md-sys-color-secondary-container);
    color: var(--md-sys-color-on-secondary-container);
}

.status-pill.active,
.status-pill.available {
    background: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-on-primary-container);
}

details > summary {
    min-height: 48px;
    display: flex;
    align-items: center;
    border-radius: var(--md-sys-shape-corner-small);
}

details > summary:focus-visible,
.dashboard-nav a:focus-visible,
.button:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--md-sys-color-primary) 58%, transparent);
    outline-offset: 3px;
}

.client-license-panel > summary::after,
.danger-zone > summary::after {
    margin-left: auto;
    color: var(--md-sys-color-primary);
    font-size: 1.25rem;
    line-height: 1;
    content: "›";
    transform: rotate(90deg);
    transition: transform var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard);
}

.client-license-panel[open] > summary::after,
.danger-zone[open] > summary::after { transform: rotate(-90deg); }

.client-estate-meta { gap: 7px; }
.client-estate-stats span { background: var(--md-sys-color-surface-container); }

.dashboard-grid article,
.stat-card,
.pricing-summary div,
.device-facts > div,
.operation-facts > div,
.notification-option,
.commercial-option,
.protected-account-note,
.delivery-state,
.occupancy-strip,
.state-empty,
.occupancy-card {
    border-color: transparent;
    background: var(--md-sys-color-surface-container);
}

.operation-card,
.audit-context { background: var(--md-sys-color-surface-container-low); }

.stat-card strong { color: var(--md-sys-color-on-surface); }

.empty-state {
    border-color: var(--md-sys-color-outline-variant);
    background: color-mix(in srgb, var(--md-sys-color-surface-container) 65%, transparent);
}

.pagination { border-color: var(--md-sys-color-outline-variant); }

.form-error,
.flash-message.error {
    border-color: transparent;
    background: var(--md-sys-color-error-container);
    color: var(--md-sys-color-on-error-container);
}

@media (max-width: 760px) {
    .dashboard-shell,
    .system-page {
        width: calc(100% - 16px);
        margin: 8px auto;
        padding: 16px;
        border-radius: var(--md-sys-shape-corner-large);
    }

    .content-section { padding: 16px; }
    .dashboard-nav,
    .platform-tabs { margin-block: 16px; border-radius: var(--md-sys-shape-corner-medium); }
    .dashboard-topbar > div > p:last-child { display: none; }
    .stats-grid { gap: 10px; }
    .stat-card { padding: 15px; }
    .stat-card strong { font-size: 1.8rem; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}