/* ================================================================
   Quotizar Design System — main.css
   Tokens, reset, componentes base, utilidades globales
   ================================================================ */

/* === TOKENS ====================================================== */
:root {
    --m-bg: #F7FAFF;
    --m-surface: #ffffff;
    --m-surface-2: #f8fafc;
    --m-sidebar: #1c2333;
    --m-sidebar-soft: #28304a;
    --m-border: #e4e7ec;
    --m-border-soft: #eef0f3;
    --m-divider: #f1f3f5;
    --m-text: #334155;
    --m-text-muted: #475569;
    --m-text-faint: #94a3b8;
    --m-text-on-dark: #f1f5f9;
    --m-text-muted-on-dark: #cbd5e1;
    --m-text-faint-on-dark: #94a3b8;
    --m-text-faintest-on-dark: #64748b;
    --m-accent-on-dark: #93b4ec;
    --m-accent: #4272d7;
    --m-accent-rgb: 66, 114, 215;
    --m-accent-hover: #355cb8;
    --m-accent-soft: #eaf0fc;
    --m-c1: #4272d7;
    --m-c1-soft: #eaf0fc;
    --m-c2: #11998e;
    --m-c2-soft: #e0f3f1;
    --m-c3: #f97316;
    --m-c3-soft: #fff1e6;
    --m-c4: #ec4899;
    --m-c4-soft: #fce7f3;
    --m-c5: #8b5cf6;
    --m-c5-soft: #f1ecfd;
    --m-success: #10b981;
    --m-success-soft: #ecfdf5;
    --m-warning: #f59e0b;
    --m-warning-soft: #fffbeb;
    --m-danger: #ef4444;
    --m-danger-soft: #fef2f2;
    --m-info: #0ea5e9;
    --m-info-soft: #e0f2fe;
    --m-shadow-xs: 0 1px 2px rgba(15,23,42,.04);
    --m-shadow-sm: 0 1px 3px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04);
    --m-shadow-md: 0 4px 12px rgba(15,23,42,.06), 0 2px 4px rgba(15,23,42,.04);
    --m-shadow-lg: 0 24px 48px rgba(15,23,42,.10);
    --m-shadow-hover: 0 10px 24px rgba(15,23,42,.08);
    --m-border-hover: #d4d8df;
    --m-radius-sm: 6px;
    --m-radius: 10px;
    --m-radius-lg: 14px;
    --m-font: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --m-mono: ui-monospace, SFMono-Regular, "JetBrains Mono", Menlo, Consolas, monospace;
    --layer-back: 50;
    --layer-one: 100;
    --layer-two: 200;
    --layer-three: 300;
    --layer-four: 400;
    --layer-five: 500;
    --layer-six: 600;
    --layer-seven: 700;
    --layer-eight: 800;
    --layer-nine: 900;
    --layer-front: 1000;
}

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--m-font);
    font-feature-settings: "cv11","ss01","ss03";
    font-size: 14px;
    font-weight: 500;
    color: var(--m-text);
    background: var(--m-bg);
}

a {
    color: inherit;
    text-decoration: none;
}

button {
    font-family: inherit;
}

:focus-visible {
    outline: 2px solid var(--m-accent);
    outline-offset: 2px;
}

/* Lucide */
i[data-lucide] {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
}

svg.lucide {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    user-select: none;
}

/* === TYPOGRAPHY ================================================== */
h1 {
    font-size: 1.5rem;
    color: var(--m-text);
    font-weight: 700;
}

h2 {
    font-size: 1.3rem;
    color: var(--m-text);
    font-weight: 600;
}

/* === PAGE LAYOUT ================================================= */
.page-body {
    display: flex;
    flex-direction: column;
    padding: 0 28px 48px;
}

.page-head {
    margin-bottom: 25px;
    padding: 20px 28px 0;
}

.page-head-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--m-text);
    margin: 10px 0 0;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

/* === BREADCRUMBS ================================================= */
.breadcrumb-trail {
    display: flex;
    align-items: center;
    gap: 2px;
    list-style: none;
    padding: 0;
}

.breadcrumb-trail-item {
    display: flex;
    align-items: center;
    font-size: 12.5px;
}

    .breadcrumb-trail-item a {
        color: var(--m-text-faint);
        text-decoration: none;
        transition: color 120ms ease;
        font-weight: 500;
    }

        .breadcrumb-trail-item a:hover {
            color: var(--m-accent);
        }

    .breadcrumb-trail-item.active {
        color: var(--m-text-muted);
        font-weight: 500;
    }

.breadcrumb-trail-sep {
    color: var(--m-text-faint);
    display: flex;
    align-items: center;
}

    .breadcrumb-trail-sep svg {
        width: 12px !important;
        height: 12px !important;
    }

/* === BUTTONS ===================================================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 38px;
    padding: 0 16px;
    background: var(--m-surface);
    border: 1px solid var(--m-border);
    border-radius: var(--m-radius-sm);
    color: var(--m-text);
    font: 600 13px var(--m-font);
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease, color 120ms ease, box-shadow 120ms ease, transform 80ms ease;
    white-space: nowrap;
    text-decoration: none;
}

    .btn:hover {
        background: var(--m-surface-2);
        border-color: var(--m-border-hover);
    }

    .btn:active {
        transform: translateY(1px);
    }

    .btn svg, .btn i {
        width: 15px !important;
        height: 15px !important;
        flex-shrink: 0;
    }

    .btn[disabled], .btn.is-disabled {
        opacity: .55;
        cursor: not-allowed;
        pointer-events: none;
    }

.btn--primary {
    background: var(--m-accent);
    border-color: var(--m-accent);
    color: #fff;
    box-shadow: 0 4px 12px rgba(var(--m-accent-rgb), 0.25);
}

    .btn--primary:hover {
        background: var(--m-accent-hover);
        border-color: var(--m-accent-hover);
    }

.btn--success {
    background: var(--m-success);
    border-color: var(--m-success);
    color: #fff;
}

    .btn--success:hover {
        background: #0ea271;
        border-color: #0ea271;
    }

.btn--danger {
    background: var(--m-danger);
    border-color: var(--m-danger);
    color: #fff;
}

    .btn--danger:hover {
        background: #dc2626;
        border-color: #dc2626;
    }

.btn--ghost {
    background: transparent;
    border-color: transparent;
    color: var(--m-text-muted);
}

    .btn--ghost:hover {
        background: var(--m-surface-2);
        color: var(--m-text);
    }

.btn--outline {
    background: transparent;
    border-color: var(--m-accent);
    color: var(--m-accent);
}

    .btn--outline:hover {
        background: var(--m-accent-soft);
        border-color: var(--m-accent) !important;
    }

.btn--soft {
    background: var(--m-accent-soft);
    border-color: transparent;
    color: var(--m-accent);
}

    .btn--soft:hover {
        background: #dde7fa;
    }

.btn--sm {
    height: 30px;
    padding: 0 12px;
    font-size: 12px;
    border-radius: 6px;
    gap: 6px;
}

    .btn--sm svg, .btn--sm i {
        width: 13px !important;
        height: 13px !important;
    }

.btn--lg {
    height: 46px;
    padding: 0 22px;
    font-size: 14px;
}

    .btn--lg svg, .btn--lg i {
        width: 17px !important;
        height: 17px !important;
    }

.btn--block {
    width: 100%;
}

.btn--icon {
    width: 38px;
    padding: 0;
}

    .btn--icon.btn--sm {
        width: 30px;
    }

    .btn--icon.btn--lg {
        width: 46px;
    }

.btn-group {
    display: inline-flex;
}

    .btn-group .btn {
        border-radius: 0;
    }

        .btn-group .btn + .btn {
            margin-left: -1px;
        }

        .btn-group .btn:first-child {
            border-top-left-radius: var(--m-radius-sm);
            border-bottom-left-radius: var(--m-radius-sm);
        }

        .btn-group .btn:last-child {
            border-top-right-radius: var(--m-radius-sm);
            border-bottom-right-radius: var(--m-radius-sm);
        }

.btn--loading {
    color: transparent !important;
    position: relative;
    pointer-events: none;
}

    .btn--loading::after {
        content: '';
        position: absolute;
        inset: 0;
        margin: auto;
        width: 16px;
        height: 16px;
        border: 2px solid currentColor;
        border-right-color: transparent;
        border-radius: 50%;
        animation: btn-spin .7s linear infinite;
        color: #fff;
    }

    .btn--loading:not(.btn--primary):not(.btn--success):not(.btn--danger)::after {
        color: var(--m-accent);
    }

@keyframes btn-spin {
    to {
        transform: rotate(360deg);
    }
}

/* === FORMS ======================================================= */
.field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

    .field > label {
        font-size: 12.5px;
        font-weight: 600;
        color: var(--m-text);
    }

    .field .help {
        font-size: 11.5px;
        color: var(--m-text-faint);
    }

    .field .error {
        font-size: 11.5px;
        color: var(--m-danger);
        display: none;
    }

    .field.is-invalid .error {
        display: block;
    }

    .field.is-invalid .input,
    .field.is-invalid .textarea,
    .field.is-invalid .select {
        border-color: var(--m-danger);
        box-shadow: 0 0 0 4px rgba(239,68,68,.13);
    }

.input, .textarea, .select {
    width: 100%;
    border: 1px solid var(--m-border);
    border-radius: var(--m-radius-sm);
    padding: 9px 12px;
    font: 500 13.5px var(--m-font);
    color: var(--m-text);
    background: var(--m-surface);
    transition: border-color 120ms ease, box-shadow 120ms ease;
}

    .input::placeholder, .textarea::placeholder {
        color: var(--m-text-faint);
    }

    .input:focus, .textarea:focus, .select:focus {
        outline: 0;
        border-color: var(--m-accent);
        box-shadow: 0 0 0 4px rgba(var(--m-accent-rgb), 0.13);
    }

    .input[disabled], .textarea[disabled], .select[disabled] {
        background: var(--m-surface-2);
        color: var(--m-text-faint);
        cursor: not-allowed;
    }

.textarea {
    min-height: 92px;
    resize: vertical;
    font-family: var(--m-font);
}

.select {
    appearance: none;
    padding-right: 36px;
    cursor: pointer;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center;
}

/* Input with icon */
.input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

    .input-wrap .input {
        padding-left: 38px;
    }

    .input-wrap .icon {
        position: absolute;
        left: 12px;
        color: var(--m-text-faint);
        display: grid;
        place-items: center;
        pointer-events: none;
    }

        .input-wrap .icon svg,
        .input-wrap .icon i {
            width: 15px !important;
            height: 15px !important;
        }

/* Checkbox */
.check {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    cursor: pointer;
    user-select: none;
    font-size: 13.5px;
    color: var(--m-text);
}

    .check input {
        position: absolute;
        opacity: 0;
        pointer-events: none;
    }

    .check .box {
        width: 18px;
        height: 18px;
        border: 1.5px solid var(--m-border);
        border-radius: 4px;
        background: var(--m-surface);
        display: grid;
        place-items: center;
        transition: background 120ms ease, border-color 120ms ease;
        flex-shrink: 0;
    }

        .check .box svg {
            width: 14px;
            height: 14px;
            color: #fff;
            opacity: 0;
        }

    .check input:checked + .box {
        background: var(--m-accent);
        border-color: var(--m-accent);
    }

        .check input:checked + .box svg {
            opacity: 1;
        }

    .check input:focus-visible + .box {
        box-shadow: 0 0 0 4px rgba(var(--m-accent-rgb), 0.18);
    }

    .check input:disabled ~ * {
        opacity: .55;
        cursor: not-allowed;
    }

/* Switch */
.switch {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
}

    .switch input {
        position: absolute;
        opacity: 0;
        width: 0;
        height: 0;
        pointer-events: none;
    }

    .switch .track {
        display: block;
        width: 36px;
        height: 20px;
        background: var(--m-border);
        border-radius: 999px;
        position: relative;
        cursor: pointer;
        transition: background 200ms ease;
        flex-shrink: 0;
    }

        .switch .track::after {
            content: '';
            position: absolute;
            top: 2px;
            left: 2px;
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background: #fff;
            box-shadow: 0 1px 3px rgba(0,0,0,.20);
            transition: transform 200ms ease;
        }

    .switch input:checked ~ .track {
        background: var(--m-accent);
    }

        .switch input:checked ~ .track::after {
            transform: translateX(16px);
        }

    .switch input:disabled ~ * {
        opacity: .55;
        cursor: not-allowed;
    }

/* Radio */
.radio {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    cursor: pointer;
    user-select: none;
    font-size: 13.5px;
    color: var(--m-text);
}

    .radio input {
        position: absolute;
        opacity: 0;
        pointer-events: none;
    }

    .radio .box {
        width: 18px;
        height: 18px;
        border: 1.5px solid var(--m-border);
        border-radius: 50%;
        background: var(--m-surface);
        display: grid;
        place-items: center;
        transition: background 120ms ease, border-color 120ms ease;
        flex-shrink: 0;
    }

        .radio .box::after {
            content: '';
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: #fff;
            opacity: 0;
            transition: opacity 120ms ease;
        }

    .radio input:checked + .box {
        background: var(--m-accent);
        border-color: var(--m-accent);
    }

        .radio input:checked + .box::after {
            opacity: 1;
        }

    .radio input:focus-visible + .box {
        box-shadow: 0 0 0 4px rgba(var(--m-accent-rgb), 0.18);
    }

    .radio input:disabled ~ * {
        opacity: .55;
        cursor: not-allowed;
    }

/* Custom Select (.csel) */
.csel {
    position: relative;
}

.csel__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    height: 38px;
    padding: 0 12px;
    border: 1px solid var(--m-border);
    border-radius: var(--m-radius-sm);
    background: var(--m-surface);
    font: 500 13.5px var(--m-font);
    color: var(--m-text);
    cursor: pointer;
    text-align: left;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}

    .csel__trigger:hover {
        border-color: var(--m-border-hover);
    }

.csel.is-open .csel__trigger {
    border-color: var(--m-accent);
    box-shadow: 0 0 0 4px rgba(var(--m-accent-rgb), 0.13);
}

.csel__val {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

    .csel__val.is-placeholder {
        color: var(--m-text-faint);
    }

.csel__caret {
    flex-shrink: 0;
    color: var(--m-text-faint);
    transition: transform 220ms ease;
}

.csel.is-open .csel__caret {
    transform: rotate(180deg);
}

.csel__caret svg {
    width: 14px !important;
    height: 14px !important;
}

.csel__menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 40;
    background: var(--m-surface);
    border: 1px solid var(--m-border);
    border-radius: var(--m-radius);
    box-shadow: var(--m-shadow-md);
    padding: 4px 0;
    overflow-y: auto;
    max-height: 240px;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 160ms ease, transform 160ms ease;
    pointer-events: none;
}

.csel.is-open .csel__menu {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.csel__opt[hidden] {
    display: none;
}

.csel__opt {
    margin: 3px 0px;
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 12px;
    background: none;
    border: 0;
    text-align: left;
    font: 500 13.5px var(--m-font);
    color: var(--m-text);
    cursor: pointer;
    transition: background 120ms ease;
}

    .csel__opt:hover {
        background: var(--m-surface-2);
    }

    .csel__opt.is-selected {
        background: var(--m-accent-soft);
        color: var(--m-accent);
        font-weight: 600;
        border-radius: 6px;
    }

.csel__check {
    width: 14px !important;
    height: 14px !important;
    flex-shrink: 0;
    opacity: 0;
}

.csel__opt.is-selected .csel__check {
    opacity: 1;
}

.csel__search {
    display: block;
    width: calc(100% - 16px);
    margin: 4px 8px 6px;
    padding: 6px 10px;
    border: 1px solid var(--m-border);
    border-radius: var(--m-radius-sm);
    background: var(--m-surface-2);
    font: 400 13px var(--m-font);
    color: var(--m-text);
    outline: none;
    transition: border-color 120ms ease;
}

    .csel__search:focus {
        border-color: var(--m-accent);
    }

    .csel__search::placeholder {
        color: var(--m-text-faint);
    }

/* Dropdown (.dd + .menu) — content-area menus */
.dd {
    position: relative;
    display: inline-block;
}

    .dd .menu {
        position: absolute;
        top: calc(100% + 4px);
        right: 0;
        z-index: 40;
        min-width: 180px;
        background: var(--m-surface);
        border: 1px solid var(--m-border);
        border-radius: var(--m-radius);
        box-shadow: var(--m-shadow-md);
        padding: 4px 0;
        opacity: 0;
        transform: translateY(-4px);
        transition: opacity 160ms ease, transform 160ms ease;
        pointer-events: none;
    }

    .dd.is-open .menu {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
    }

.menu__item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 12px;
    background: none;
    border: 0;
    text-align: left;
    font: 500 13px var(--m-font);
    color: var(--m-text);
    cursor: pointer;
    transition: background 120ms ease;
    text-decoration: none;
}

    .menu__item:hover {
        background: var(--m-surface-2);
    }

    .menu__item.is-danger {
        color: var(--m-danger);
    }

        .menu__item.is-danger:hover {
            background: var(--m-danger-soft);
        }

.menu__sep {
    height: 1px;
    background: var(--m-divider);
    margin: 4px 0;
}

/* Stepper */
.stepper {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid var(--m-border);
    border-radius: var(--m-radius-sm);
    overflow: hidden;
    background: var(--m-surface);
    height: 38px;
}

    .stepper button {
        width: 34px;
        background: transparent;
        border: 0;
        cursor: pointer;
        color: var(--m-text-muted);
        display: grid;
        place-items: center;
    }

        .stepper button:hover {
            background: var(--m-surface-2);
            color: var(--m-text);
        }

        .stepper button svg, .stepper button i {
            width: 13px !important;
            height: 13px !important;
        }

    .stepper input {
        width: 48px;
        border: 0;
        outline: 0;
        background: transparent;
        text-align: center;
        font: 600 13.5px var(--m-font);
        font-variant-numeric: tabular-nums;
    }

/* File input */
.file {
    border: 1.5px dashed var(--m-border);
    border-radius: var(--m-radius);
    padding: 22px;
    text-align: center;
    background: var(--m-surface-2);
    color: var(--m-text-muted);
    cursor: pointer;
    transition: border-color .3s ease, background .3s ease, color .3s ease;
}

    .file:hover,
    .file.dragover {
        border-color: var(--m-accent);
        background: var(--m-accent-soft);
        color: var(--m-accent);
    }

    .file svg {
        width: 22px;
        height: 22px;
        margin-bottom: 6px;
    }

    .file b {
        display: block;
        color: var(--m-text);
        font-size: 13px;
        font-weight: 600;
        margin-bottom: 2px;
    }

    .file small {
        font-size: 11.5px;
    }

    .file input {
        display: none;
    }

/* === CARD ======================================================== */
.card {
    background: var(--m-surface);
    border: 1px solid var(--m-border);
    border-radius: var(--m-radius-lg);
    box-shadow: var(--m-shadow-xs);
}

.card__head, .card__foot {
    padding: 14px 18px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.card__head {
    border-bottom: 1px solid var(--m-divider);
}

.card__foot {
    border-top: 1px solid var(--m-divider);
    background: var(--m-surface-2);
}

.card__head h4 {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
}

.card__head .spacer {
    flex: 1;
}

.card__body {
    padding: 18px;
}

/* === KPI ========================================================== */
.kpi {
    background: var(--m-surface);
    border: 1px solid var(--m-border);
    border-radius: var(--m-radius-lg);
    box-shadow: var(--m-shadow-xs);
    padding: 18px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-width: 0;
}

.kpi__body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.kpi__icon {
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--m-accent-soft);
    color: var(--m-accent);
}

    .kpi__icon svg {
        width: 26px;
        height: 26px;
    }

.kpi--c2 .kpi__icon {
    background: var(--m-c2-soft);
    color: var(--m-c2);
}

.kpi--c3 .kpi__icon {
    background: var(--m-c3-soft);
    color: var(--m-c3);
}

.kpi--c4 .kpi__icon {
    background: var(--m-c4-soft);
    color: var(--m-c4);
}

.kpi--c5 .kpi__icon {
    background: var(--m-c5-soft);
    color: var(--m-c5);
}

.kpi__label {
    font-size: 12px;
    color: var(--m-text-faint);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}

.kpi__value {
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

.kpi__delta {
    font-size: 12px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

    .kpi__delta.up {
        color: var(--m-success);
    }

    .kpi__delta.down {
        color: var(--m-danger);
    }

/* === HORIZONTAL CARD (hcard) ====================================== */
.hcard {
    background: var(--m-surface);
    border: 1px solid var(--m-border);
    border-radius: var(--m-radius-lg);
    padding: 14px 18px 14px 0;
    display: grid;
    grid-template-columns: 56px 1fr auto;
    gap: 16px;
    align-items: center;
    position: relative;
    overflow: hidden;
    box-shadow: var(--m-shadow-xs);
    transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease, transform 160ms ease;
}

    .hcard:hover {
        border-color: var(--m-border-hover);
        box-shadow: var(--m-shadow-hover);
        transform: translateY(-1px);
    }

.hcard__thumb {
    align-self: stretch;
    width: 56px;
    min-height: 56px;
    margin: -14px 0;
    border-radius: var(--m-radius-lg) 0 0 var(--m-radius-lg);
    display: grid;
    place-items: center;
    background: var(--m-accent-soft);
    color: var(--m-accent);
    overflow: hidden;
}

    .hcard__thumb svg, .hcard__thumb i {
        width: 22px;
        height: 22px;
    }

    .hcard__thumb.c1 {
        background: var(--m-c1-soft);
        color: var(--m-c1);
    }

    .hcard__thumb.c2 {
        background: var(--m-c2-soft);
        color: var(--m-c2);
    }

    .hcard__thumb.c3 {
        background: var(--m-c3-soft);
        color: var(--m-c3);
    }

    .hcard__thumb.c4 {
        background: var(--m-c4-soft);
        color: var(--m-c4);
    }

    .hcard__thumb.c5 {
        background: var(--m-c5-soft);
        color: var(--m-c5);
    }

    .hcard__thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.hcard__body {
    min-width: 0;
}

    .hcard__body .title {
        font-size: 14px;
        font-weight: 600;
        color: var(--m-text);
        letter-spacing: -0.01em;
        line-height: 1.3;
        margin: 0 0 6px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

.hcard__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    font-size: 12px;
    color: var(--m-text-muted);
}

    .hcard__meta .vendor {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-size: 12px;
        color: var(--m-text-muted);
    }

        .hcard__meta .vendor svg, .hcard__meta .vendor i {
            width: 12px;
            height: 12px;
            color: var(--m-text-faint);
        }

.hcard__aside {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    white-space: nowrap;
}

.hcard__price {
    text-align: right;
}

    .hcard__price .amt {
        font-size: 16px;
        font-weight: 600;
        color: var(--m-text);
        letter-spacing: -0.01em;
        font-variant-numeric: tabular-nums;
        line-height: 1.1;
    }

    .hcard__price .l {
        font-size: 11px;
        color: var(--m-text-faint);
        margin-top: 3px;
    }

@media (max-width: 640px) {
    .hcard {
        grid-template-columns: 44px 1fr;
        padding: 12px 12px 12px 0;
    }

    .hcard__thumb {
        width: 44px;
        min-height: 44px;
        margin: -12px 0;
    }

    .hcard__aside {
        grid-column: 1 / -1;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
}

/* === BADGE ======================================================= */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 999px;
    font: 600 11.5px var(--m-font);
    white-space: nowrap;
    background: var(--m-surface-2);
    color: var(--m-text-muted);
    border: 1px solid var(--m-border);
}

.badge--primary {
    background: var(--m-accent-soft);
    color: var(--m-accent);
    border-color: transparent;
}

.badge--success {
    background: var(--m-success-soft);
    color: var(--m-success);
    border-color: transparent;
}

.badge--warning {
    background: var(--m-warning-soft);
    color: var(--m-warning);
    border-color: transparent;
}

.badge--danger {
    background: var(--m-danger-soft);
    color: var(--m-danger);
    border-color: transparent;
}

.badge--info {
    background: var(--m-info-soft);
    color: var(--m-info);
    border-color: transparent;
}

.badge--purple {
    background: var(--m-c5-soft);
    color: var(--m-c5);
    border-color: transparent;
}

.badge--dot::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

/* === ALERT ======================================================= */
.alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border-radius: var(--m-radius);
    font-size: 13.5px;
    line-height: 1.5;
    background: var(--m-surface-2);
    border: 1px solid var(--m-border);
    color: var(--m-text-muted);
}

    .alert svg, .alert i {
        flex-shrink: 0;
    }

.alert--info {
    background: var(--m-info-soft);
    border-color: var(--m-info);
    color: var(--m-info);
}

.alert--success {
    background: var(--m-success-soft);
    border-color: var(--m-success);
    color: var(--m-success);
}

.alert--warning {
    background: var(--m-warning-soft);
    border-color: var(--m-warning);
    color: var(--m-warning);
}

.alert--danger {
    background: var(--m-danger-soft);
    border-color: var(--m-danger);
    color: var(--m-danger);
}

/* === EMPTY STATE ================================================= */
.search-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 48px 24px;
    color: var(--m-text-muted);
    text-align: center;
}

.search-empty-icon {
    width: 28px !important;
    height: 28px !important;
    padding: 14px;
    box-sizing: content-box;
    border-radius: 50%;
    background: var(--m-accent-soft);
    color: var(--m-accent);
    box-shadow: 0 4px 14px rgba(var(--m-accent-rgb), 0.18);
}

.search-empty-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--m-text);
    margin: 0;
}

.search-empty-state p {
    font-size: 13.5px;
    margin: 0;
}

.empty {
    text-align: center;
    padding: 48px 24px;
    background: var(--m-surface);
    border: 1px dashed var(--m-border);
    border-radius: var(--m-radius-lg);
}

.empty__icon {
    width: 40px;
    height: 40px;
    border-radius: 25%;
    background: rgba(var(--m-accent-rgb), 0.85);
    color: #fff;
    display: inline-grid;
    place-items: center;
    margin-bottom: 16px;
    box-shadow: 0 6px 22px rgba(var(--m-accent-rgb), 0.28);
}

    .empty__icon svg,
    .empty__icon i {
        width: 20px;
        height: 20px;
        flex-shrink: 0;
    }

.empty h3 {
    margin: 0 0 4px;
    font-size: 15px;
    font-weight: 600;
}

.empty p {
    margin: 0 0 16px;
    color: var(--m-text-faint);
    font-size: 13px;
    max-width: 360px;
    margin-left: auto;
    margin-right: auto;
}

.empty--sm {
    padding: 24px 16px;
}

    .empty--sm .empty__icon {
        width: 32px;
        height: 32px;
        margin-bottom: 10px;
    }

        .empty--sm .empty__icon svg,
        .empty--sm .empty__icon i {
            width: 16px;
            height: 16px;
        }

    .empty--sm h3 {
        font-size: 13.5px;
    }

    .empty--sm p {
        font-size: 12px;
        margin-bottom: 0;
    }

/* === TABLE ======================================================= */
.table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
}

    .table thead th {
        padding: 10px 12px;
        text-align: left;
        font-size: 12px;
        font-weight: 600;
        color: var(--m-text-muted);
        border-bottom: 1px solid var(--m-border);
        white-space: nowrap;
    }

    .table tbody td {
        padding: 12px;
        vertical-align: middle;
        border-bottom: 1px solid var(--m-divider);
    }

    .table tbody tr:last-child td {
        border-bottom: none;
    }

    .table tbody tr:hover td {
        background: var(--m-surface-2);
    }

    .table .num {
        text-align: right;
        font-variant-numeric: tabular-nums;
    }

    .table--striped tbody tr:nth-child(even) td {
        background: var(--m-surface-2);
    }

/* === LOADING SPINNER ============================================= */
.loading-spinner {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 200px;
}

    .loading-spinner::after {
        content: '';
        width: 36px;
        height: 36px;
        border: 3px solid var(--m-border);
        border-top-color: var(--m-accent);
        border-radius: 50%;
        animation: ls-spin 0.7s linear infinite;
    }

@keyframes ls-spin {
    to {
        transform: rotate(360deg);
    }
}

/* === SPACING UTILITIES =========================================== */
.mt-2 {
    margin-top: 8px !important;
}

.mt-3 {
    margin-top: 16px !important;
}

.mt-4 {
    margin-top: 24px !important;
}

.mt-5 {
    margin-top: 32px !important;
}

.mb-2 {
    margin-bottom: 8px !important;
}

.mb-3 {
    margin-bottom: 16px !important;
}

.mb-4 {
    margin-bottom: 24px !important;
}

.w-100 {
    width: 100% !important;
}

.flex-grow-1 {
    flex: 1 1 0% !important;
}

/* === MULTISELECT (admin demo) ==================================== */
.custom-multiselect-container {
    position: relative;
    width: 100%;
}

    .custom-multiselect-container label {
        font-size: 12.5px;
        font-weight: 600;
        color: var(--m-text);
        margin-bottom: 5px;
        display: block;
    }

.multiselect-input-wrapper {
    position: relative;
    width: 100%;
}

.multiselect-input {
    width: 100%;
    border: 1px solid var(--m-border);
    font: 500 13.5px var(--m-font);
    height: 38px;
    padding: 0 40px 0 12px;
    border-radius: var(--m-radius-sm);
    color: var(--m-text);
    background: var(--m-surface);
    cursor: pointer;
    transition: border-color 120ms ease;
}

    .multiselect-input:focus {
        outline: 0;
        border-color: var(--m-accent);
        box-shadow: 0 0 0 4px rgba(var(--m-accent-rgb), 0.13);
    }

    .multiselect-input::placeholder {
        color: var(--m-text-faint);
    }

.multiselect-arrow {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: var(--m-text-faint);
    width: 16px;
    height: 16px;
    transition: transform .2s;
}

.custom-multiselect-container.open .multiselect-arrow {
    transform: translateY(-50%) rotate(180deg);
}

.multiselect-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    margin-top: 5px;
    background: var(--m-surface);
    border: 1px solid var(--m-border);
    border-radius: var(--m-radius);
    max-height: 250px;
    overflow-y: auto;
    display: none;
    z-index: var(--layer-front);
    box-shadow: var(--m-shadow-md);
}

.custom-multiselect-container.open .multiselect-dropdown {
    display: block;
}

.multiselect-option {
    padding: 9px 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    color: var(--m-text);
    transition: background 120ms ease;
}

    .multiselect-option:hover {
        background: var(--m-surface-2);
    }

    .multiselect-option.selected {
        background: var(--m-accent-soft);
        font-weight: 500;
    }

.multiselect-option-checkbox {
    width: 16px;
    height: 16px;
    accent-color: var(--m-accent);
    cursor: pointer;
    flex-shrink: 0;
}

.multiselect-no-results {
    padding: 15px;
    text-align: center;
    color: var(--m-text-faint);
    font-size: 13px;
}

.multiselect-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
    min-height: 20px;
}

.multiselect-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--m-surface-2);
    color: var(--m-text);
    border: 1px solid var(--m-border);
    padding: 4px 10px;
    border-radius: var(--m-radius-sm);
    font-size: 12px;
    font-weight: 500;
}

.multiselect-badge-remove {
    background: none;
    border: none;
    color: var(--m-text-faint);
    cursor: pointer;
    display: flex;
    align-items: center;
    padding: 0;
}

    .multiselect-badge-remove:hover {
        color: var(--m-danger);
    }

/* === CONFIRM MODAL =============================================== */
.confirm-modal-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 20px;
}

.confirm-modal-icon {
    width: 66px;
    height: 66px;
    border-radius: 50%;
    background: var(--m-surface-2);
    display: flex;
    align-items: center;
    justify-content: center;
}

    .confirm-modal-icon svg {
        width: 40px;
        height: 40px;
        color: var(--m-text-muted);
    }

.confirm-modal-message {
    font-size: 15px;
    color: var(--m-text);
    line-height: 1.6;
    margin: 0;
    font-weight: 500;
    max-width: 400px;
}

.confirm-modal-actions {
    display: flex;
    gap: 12px;
    width: 100%;
    margin-top: 8px;
}

    .confirm-modal-actions .btn {
        flex: 1;
    }

/* === UNAUTHORIZED MODAL ============================================ */
.unauthorized-modal-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 20px;
}

.unauthorized-modal-icon {
    width: 66px;
    height: 66px;
    border-radius: 50%;
    background: var(--m-accent-soft);
    display: flex;
    align-items: center;
    justify-content: center;
}

    .unauthorized-modal-icon svg {
        width: 32px;
        height: 32px;
        color: var(--m-accent);
    }

.unauthorized-modal-message {
    font-size: 14px;
    color: var(--m-text-muted);
    line-height: 1.6;
    margin: 0;
    max-width: 320px;
}

.unauthorized-modal-content .btn {
    width: 100%;
}

/* === CUSTOM MODAL (JS-generated) ================================= */
.custom-modal-wrapper {
    position: fixed;
    z-index: var(--layer-nine);
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-top: 6vh;
    animation: OverlayShow 0.25s ease forwards;
    background: rgba(0, 0, 0, 0.5);
}

.custom-modal-content {
    background: var(--m-surface);
    border-radius: var(--m-radius-lg);
    display: flex;
    flex-direction: column;
    box-shadow: var(--m-shadow-lg);
    will-change: transform, opacity;
}

    .custom-modal-content.elastic.hide,
    .custom-modal-content.smooth.hide {
        animation: HideElastic 0.2s cubic-bezier(0.4, 0, 1, 1) forwards;
    }

    .custom-modal-content.elastic.show,
    .custom-modal-content.smooth.show {
        animation: ShowElastic 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    }

.custom-modal-header {
    position: sticky;
    top: 0;
    z-index: var(--layer-nine);
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 12px 24px;
    background: var(--m-surface);
    border-radius: var(--m-radius-lg) var(--m-radius-lg) 0 0;
    border-bottom: 1px solid var(--m-divider);
    flex-shrink: 0;
    margin-bottom: 25px;
}

.custom-modal-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--m-text);
    margin: 0;
    margin-right: auto;
}

.close-custom-modal {
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--m-surface-2);
    border-radius: var(--m-radius-sm);
    border: none;
    width: 34px;
    height: 34px;
    color: var(--m-text-muted);
    cursor: pointer;
    transition: background 120ms ease;
    flex-shrink: 0;
}

    .close-custom-modal:hover {
        background: var(--m-border);
    }

    .close-custom-modal svg, .close-custom-modal i {
        width: 16px !important;
        height: 16px !important;
    }

.custom-modal-body {
    padding: 0 24px 24px;
    flex: 1;
    overflow-y: auto;
    max-height: 80vh;
}

    .custom-modal-body::-webkit-scrollbar {
        width: 6px;
    }

    .custom-modal-body::-webkit-scrollbar-track {
        background: var(--m-surface-2);
        border-radius: 3px;
    }

    .custom-modal-body::-webkit-scrollbar-thumb {
        background: var(--m-border);
        border-radius: 3px;
    }

        .custom-modal-body::-webkit-scrollbar-thumb:hover {
            background: var(--m-text-faint);
        }

@keyframes OverlayShow {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes ShowElastic {
    from {
        transform: scale(0.95) translateY(12px);
        opacity: 0;
    }

    to {
        transform: scale(1) translateY(0);
        opacity: 1;
    }
}

@keyframes HideElastic {
    from {
        transform: scale(1) translateY(0);
        opacity: 1;
    }

    to {
        transform: scale(0.95) translateY(8px);
        opacity: 0;
    }
}

/* === TOAST (JS-generated) ======================================== */
#custom-toast-container {
    position: fixed;
    width: 300px;
    top: 20px;
    right: 20px;
    z-index: var(--layer-front);
}

.custom-toast {
    border-left: 4px solid;
    border-radius: var(--m-radius-sm);
    background: var(--m-surface);
    box-shadow: var(--m-shadow-md);
    cursor: pointer;
    padding: 10px;
    width: 100%;
    margin-bottom: 10px;
    animation: toastIn 0.35s ease forwards;
}

    .custom-toast .custom-toast-header {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 13px;
        font-weight: 600;
        color: var(--m-text);
    }

    .custom-toast .custom-toast-body {
        margin-top: 4px;
        font-size: 12.5px;
        color: var(--m-text-muted);
    }

    .custom-toast.hide {
        animation: toastOut 0.3s ease forwards;
    }

    .custom-toast.success {
        border-color: var(--m-success);
    }

        .custom-toast.success .custom-toast-header svg {
            color: var(--m-success);
        }

    .custom-toast.error {
        border-color: var(--m-danger);
    }

        .custom-toast.error .custom-toast-header svg {
            color: var(--m-danger);
        }

    .custom-toast.warning {
        border-color: var(--m-warning);
    }

        .custom-toast.warning .custom-toast-header svg {
            color: var(--m-warning);
        }

    .custom-toast.info {
        border-color: var(--m-accent);
    }

        .custom-toast.info .custom-toast-header svg {
            color: var(--m-accent);
        }

@keyframes toastIn {
    from {
        opacity: 0;
        transform: translateX(100%);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes toastOut {
    from {
        opacity: 1;
        transform: translateX(0);
    }

    to {
        opacity: 0;
        transform: translateX(100%);
    }
}

/* === PAGE SPINNER ================================================ */
.custom-spinner {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, .9);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    transition: opacity 300ms ease, visibility 300ms ease;
}

    .custom-spinner.is-hidden {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }

.custom-spiner-svg {
    width: 90px;
    height: 90px;
    transform: rotate(-90deg);
}

    .custom-spiner-svg circle {
        fill: none;
        stroke: var(--m-accent);
        stroke-width: 8;
        stroke-linecap: round;
        stroke-dasharray: 283;
        stroke-dashoffset: 283;
        animation: ps-spin 1.5s ease-in-out infinite;
    }

@keyframes ps-spin {
    100% {
        stroke-dasharray: 1, 282;
        stroke-dashoffset: -283;
    }
}

/* === RESPONSIVE ================================================== */
@media (max-width: 768px) {
    .page-body {
        padding: 0 16px 40px;
    }

    .page-head {
        padding: 16px 16px 0;
    }

    .confirm-modal-actions {
        flex-direction: column;
    }

    .custom-modal-content {
        max-height: 95vh;
        width: calc(100vw - 30px) !important;
    }

    .custom-modal-header {
        padding: 16px 20px;
    }

    .custom-modal-body {
        padding: 16px;
    }
}

/* ==================== TABS (design system) ==================== */
.tabs {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--m-border);
    position: relative;
}

    .tabs .tab {
        background: transparent;
        border: 0;
        padding: 10px 14px;
        font: 500 13px var(--m-font);
        color: var(--m-text-muted);
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        gap: 7px;
        border-bottom: 2px solid transparent;
        margin-bottom: -1px;
        transition: color 120ms ease, border-color 120ms ease;
    }

        .tabs .tab:hover {
            color: var(--m-text);
        }

        .tabs .tab.is-active {
            color: var(--m-accent);
            border-bottom-color: var(--m-accent);
            font-weight: 600;
        }

        .tabs .tab .badge {
            background: var(--m-surface-2);
            color: var(--m-text-muted);
        }

        .tabs .tab.is-active .badge {
            background: var(--m-accent-soft);
            color: var(--m-accent);
        }

.tab-panels > .panel {
    display: none;
    padding: 16px 0;
}

    .tab-panels > .panel.is-active {
        display: block;
    }

.tabs--pills {
    border: 0;
    gap: 2px;
    padding: 3px;
    background: var(--m-surface-2);
    border-radius: 8px;
    display: inline-flex;
}

    .tabs--pills .tab {
        border-radius: 6px;
        border-bottom: 0;
        padding: 7px 12px;
        font-size: 12.5px;
    }

        .tabs--pills .tab.is-active {
            background: var(--m-surface);
            color: var(--m-text);
            border-bottom: 0;
            box-shadow: var(--m-shadow-xs);
        }

/* ==================== CDATE (custom date picker) ==================== */
.cdate {
    position: relative;
    display: inline-block;
    width: 100%;
}

.cdate__trigger {
    width: 100%;
    border: 1px solid var(--m-border);
    border-radius: var(--m-radius-sm);
    padding: 9px 12px 9px 36px;
    font: 500 13.5px var(--m-font);
    color: var(--m-text);
    background: var(--m-surface);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: border-color 120ms ease, box-shadow 120ms ease;
    text-align: left;
    position: relative;
}

    .cdate__trigger:hover {
        border-color: var(--m-border-hover);
    }

    .cdate.is-open > .cdate__trigger,
    .cdate__trigger:focus-visible {
        outline: 0;
        border-color: var(--m-accent);
        box-shadow: 0 0 0 4px rgba(var(--m-accent-rgb), 0.13);
    }

    .cdate__trigger > svg:first-child,
    .cdate__trigger > i:first-child {
        position: absolute;
        left: 12px;
        top: 50%;
        transform: translateY(-50%);
        width: 15px;
        height: 15px;
        color: var(--m-text-faint);
        pointer-events: none;
    }

.cdate__value {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

    .cdate__value.is-placeholder {
        color: var(--m-text-faint);
        font-weight: 400;
    }

.cdate[disabled], .cdate.is-disabled {
    opacity: .6;
    pointer-events: none;
}

.cdate__panel {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    width: 288px;
    background: var(--m-surface);
    border: 1px solid var(--m-border);
    border-radius: var(--m-radius);
    box-shadow: var(--m-shadow-lg);
    padding: 12px;
    z-index: 40;
    opacity: 0;
    transform: translateY(-4px);
    pointer-events: none;
    transition: opacity 120ms ease, transform 120ms ease;
}

.cdate.is-open .cdate__panel {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.cdate__head {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 2px 2px 10px;
}

.cdate__month {
    flex: 1;
    text-align: center;
    font: 600 13px var(--m-font);
    text-transform: capitalize;
    letter-spacing: -0.005em;
}

.cdate__nav {
    width: 28px;
    height: 28px;
    background: transparent;
    border: 0;
    border-radius: 6px;
    color: var(--m-text-muted);
    cursor: pointer;
    display: grid;
    place-items: center;
}

    .cdate__nav:hover {
        background: var(--m-surface-2);
        color: var(--m-text);
    }

    .cdate__nav svg, .cdate__nav i {
        width: 14px;
        height: 14px;
    }

.cdate__weekdays, .cdate__grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.cdate__weekdays {
    padding: 0 0 6px;
    font: 600 10.5px var(--m-font);
    color: var(--m-text-faint);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

    .cdate__weekdays span {
        text-align: center;
        padding: 2px 0;
    }

.cdate__day {
    height: 32px;
    background: transparent;
    border: 0;
    border-radius: 6px;
    font: 500 12.5px var(--m-font);
    color: var(--m-text);
    cursor: pointer;
    font-variant-numeric: tabular-nums;
    transition: background 100ms ease, color 100ms ease;
}

    .cdate__day:hover {
        background: var(--m-surface-2);
    }

    .cdate__day.is-other {
        color: var(--m-text-faint);
        opacity: .5;
    }

    .cdate__day.is-today {
        box-shadow: inset 0 0 0 1px var(--m-accent);
        color: var(--m-accent);
        font-weight: 600;
    }

    .cdate__day.is-selected,
    .cdate__day.is-selected:hover {
        background: var(--m-accent);
        color: #fff;
        box-shadow: 0 2px 8px rgba(var(--m-accent-rgb), 0.28);
        font-weight: 600;
    }

    .cdate__day[disabled] {
        opacity: .3;
        cursor: not-allowed;
    }

.cdate__foot {
    display: flex;
    gap: 6px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--m-divider);
}

    .cdate__foot button {
        flex: 1;
        height: 30px;
        background: var(--m-surface-2);
        border: 1px solid var(--m-border);
        border-radius: 6px;
        font: 600 11.5px var(--m-font);
        color: var(--m-text-muted);
        cursor: pointer;
    }

        .cdate__foot button:hover {
            background: var(--m-divider);
            color: var(--m-text);
        }