/* Design tokens — evot admin palette (IBM Plex Mono) + Element Plus dark mapping. */

/* Vue 3 + Element Plus optimized style - maintain the original layout style */
[v-cloak] {
    display: none !important;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-sans);
    background-color: var(--background);
    color: var(--foreground);
    line-height: 1.6;
}

:root {
    /* Design System - evot admin aligned (dark, IBM Plex Mono).
       `--background` is the room and `--card` the surfaces sitting on it, so
       panels, inputs and rows read as raised without needing a shadow. */
    color-scheme: dark;
    --page: #0a0d10;
    --background: #0a0d10;
    --surface: #101417;
    --foreground: #e9eeed;
    --ink: #e9eeed;
    --primary: #e9eeed;
    --primary-foreground: #0a0d10;
    --primary-hover: var(--card);
    --primary-active: #cfd6d3;
    --secondary: #171d21;
    --muted: #171d21;
    --muted-foreground: #8b9a9a;
    --accent: #171d21;
    --destructive: #ff6b60;
    --border: #ffffff1f;
    --input: #101417;
    --ring: #e9eeed;
    --card: #101417;
    --popover: #12171b;

    /* Sidebar */
    --sidebar: #0a0d10;
    --sidebar-foreground: #e9eeed;
    --sidebar-hover: #171d21;
    --sidebar-border: #ffffff1f;
    --sidebar-active-bg: #171d21;
    --sidebar-active-color: #e9eeed;

    /* evot accents */
    --green: #34c759;
    --green-ink: #4ade80;
    --green-fill: rgba(52, 199, 89, 0.12);
    --green-line: rgba(52, 199, 89, 0.35);
    --red: #ff6b60;
    --red-line: rgba(255, 107, 96, 0.35);
    --red-fill: rgba(255, 107, 96, 0.12);
    --amber: #e2a13c;
    --amber-line: rgba(226, 161, 60, 0.35);
    --amber-fill: rgba(226, 161, 60, 0.12);
    --accent-blue: #51a2ff;
    --accent-blue-line: rgba(81, 162, 255, 0.35);
    --accent-blue-fill: rgba(81, 162, 255, 0.10);
    --accent-violet: #c4a2ff;
    --sk: #1d2429;
    --sk-hi: #273037;
    --dot: #38424a;

    /* Typography */
    --font-sans: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

    /* Spacing & Radius */
    --radius: 3px;
    --transition: cubic-bezier(.4, 0, .2, 1) 0.15s;

    /* Text hierarchy */
    --text-primary: #e9eeed;
    --text-secondary: #a7b3b1;
    --text-tertiary: #8b9a9a;
    --text-muted: #626e6e;

    /* Preserve drawer variables */
    --drawer-padding: clamp(16px, 2.5vw, 28px);
    --drawer-bg: #0d1114;
    --drawer-card-bg: #101417;
    --drawer-transition: cubic-bezier(0.22, 1, 0.36, 1);

    /* Element Plus overrides (dark) */
    --el-color-white: #0d1114;
    --el-color-primary: #e9eeed;
    --el-color-primary-light-3: var(--card);
    --el-color-primary-light-5: #f5f8f6;
    --el-color-primary-light-7: #3a444a;
    --el-color-primary-light-8: #2a3339;
    --el-color-primary-light-9: #1d2429;
    --el-color-primary-dark-2: #cfd6d3;
    --el-color-success: #34c759;
    --el-color-success-light-3: #4ade80;
    --el-color-success-light-5: rgba(52, 199, 89, 0.5);
    --el-color-success-light-7: rgba(52, 199, 89, 0.4);
    --el-color-success-light-8: rgba(52, 199, 89, 0.3);
    --el-color-success-light-9: rgba(52, 199, 89, 0.12);
    --el-color-success-dark-2: #2ea24c;
    --el-color-warning: #e2a13c;
    --el-color-warning-light-3: #ecb86a;
    --el-color-warning-light-5: rgba(226, 161, 60, 0.5);
    --el-color-warning-light-7: rgba(226, 161, 60, 0.4);
    --el-color-warning-light-8: rgba(226, 161, 60, 0.3);
    --el-color-warning-light-9: rgba(226, 161, 60, 0.12);
    --el-color-warning-dark-2: #b58130;
    --el-color-danger: #ff6b60;
    --el-color-danger-light-3: #ff8f88;
    --el-color-danger-light-5: rgba(255, 107, 96, 0.5);
    --el-color-danger-light-7: rgba(255, 107, 96, 0.4);
    --el-color-danger-light-8: rgba(255, 107, 96, 0.3);
    --el-color-danger-light-9: rgba(255, 107, 96, 0.12);
    --el-color-danger-dark-2: #cc564d;
    --el-color-error: #ff6b60;
    --el-color-error-light-3: #ff8f88;
    --el-color-error-light-5: rgba(255, 107, 96, 0.5);
    --el-color-error-light-7: rgba(255, 107, 96, 0.4);
    --el-color-error-light-8: rgba(255, 107, 96, 0.3);
    --el-color-error-light-9: rgba(255, 107, 96, 0.12);
    --el-color-error-dark-2: #cc564d;
    --el-color-info: #8b9a9a;
    --el-color-info-light-3: #a7b3b1;
    --el-color-info-light-5: rgba(139, 154, 154, 0.5);
    --el-color-info-light-7: rgba(139, 154, 154, 0.4);
    --el-color-info-light-8: rgba(139, 154, 154, 0.3);
    --el-color-info-light-9: rgba(139, 154, 154, 0.12);
    --el-color-info-dark-2: #6f7c7c;
    --el-bg-color: #101417;
    --el-bg-color-page: #0a0d10;
    --el-bg-color-overlay: #12171b;
    --el-text-color-primary: #e9eeed;
    --el-text-color-regular: #c6cfcc;
    --el-text-color-secondary: #8b9a9a;
    --el-text-color-placeholder: #626e6e;
    --el-text-color-disabled: #4a5457;
    --el-border-color: #ffffff29;
    --el-border-color-light: #ffffff1f;
    --el-border-color-lighter: #ffffff17;
    --el-border-color-extra-light: #ffffff0f;
    --el-border-color-dark: #ffffff40;
    --el-border-color-darker: #ffffff52;
    --el-fill-color: #171d21;
    --el-fill-color-light: #1a2126;
    --el-fill-color-lighter: #171d21;
    --el-fill-color-extra-light: #141a1e;
    --el-fill-color-dark: #222a30;
    --el-fill-color-darker: #2a3339;
    --el-fill-color-blank: #101417;
    --el-mask-color: rgba(4, 6, 8, 0.72);
    --el-mask-color-extra-light: rgba(4, 6, 8, 0.4);
    --el-disabled-bg-color: #171d21;
    --el-disabled-text-color: #4a5457;
    --el-disabled-border-color: #ffffff14;
    --el-box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5), 0 4px 12px rgba(0, 0, 0, 0.4);
    --el-box-shadow-light: 0 0 10px rgba(0, 0, 0, 0.45);
    --el-font-family: var(--font-sans);
    --el-font-size-base: 13px;
    --el-switch-off-color: var(--dot);
    --el-switch-on-color: var(--green);
    --el-table-expanded-cell-bg-color: var(--fill);
    --el-date-editor-daterange-bg-color: var(--input);
    --el-fill-color-blank: #101417;
    --el-border-radius-base: 3px;
    --el-border-radius-small: 2px;
}

.el-overlay {
    background-color: rgba(4, 6, 8, 0.72);
    backdrop-filter: blur(2px);
    transition: background-color 0.32s var(--drawer-transition), backdrop-filter 0.32s var(--drawer-transition);
}

.el-drawer__body {
    animation: drawer-body-fade 0.32s var(--drawer-transition) both;
}

@keyframes drawer-body-fade {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}