/* ==========================================================================
   Epicure Help Desk — Design System
   Base: Bootstrap 5.3 + tokens próprios (tema claro/escuro).
   Tema: <html data-theme="light|dark" data-bs-theme="light|dark">
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
    --font-display: "Bricolage Grotesque", "Figtree", system-ui, sans-serif;
    --font-body: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

    --bg: #f5f5fa;
    --surface: #ffffff;
    --surface-2: #f9f9fc;
    --border: #e5e4ef;
    --border-strong: #d4d2e3;
    --text: #1d1b2e;
    --muted: #6a6880;
    --faint: #9e9cb3;
    --primary: #5b4fe0;
    --primary-rgb: 91, 79, 224;
    --primary-hover: #4c40cf;
    --primary-ink: #ffffff;
    --primary-soft: #eeecfd;
    --focus: rgba(91, 79, 224, .30);

    --side-bg: #16152b;
    --side-text: #b6b4cf;
    --side-dim: #6f6d8c;
    --side-hover: rgba(255, 255, 255, .06);
    --side-active: rgba(139, 128, 255, .16);
    --side-accent: #a79fff;

    --st-open: #b86e12;
    --st-progress: #2f6fd6;
    --st-await: #7b55d6;
    --st-resolved: #1b8f63;
    --st-closed: #6b7185;
    --pr-urgent: #d23f3f;
    --pr-high: #dc6e25;
    --pr-medium: #c79a14;
    --pr-low: #3b9c6e;
    --internal: #b7791f;
    --danger: #d23f3f;

    --shadow: 0 1px 2px rgba(22, 21, 43, .04), 0 4px 14px rgba(22, 21, 43, .05);
    --shadow-pop: 0 10px 30px rgba(22, 21, 43, .14);
    --r: 12px;
    --r-sm: 8px;
    --side-w: 252px;

    /* Aliases do design system anterior (telas create-area, create-tema, my-simple) */
    --ep-primary: var(--primary);
    --ep-primary-soft: var(--primary-soft);
    --ep-ink: var(--text);
    --ep-muted: var(--muted);
    --ep-faint: var(--faint);
    --ep-surface: var(--surface);
    --ep-surface-2: var(--surface-2);
    --ep-bg: var(--bg);
    --ep-border: var(--border);
    --ep-radius: var(--r);
    --ep-radius-sm: var(--r-sm);
    --ep-shadow: var(--shadow);
    --ep-shadow-hover: var(--shadow-pop);
    --ep-open: var(--st-open);
    --ep-progress: var(--st-progress);
    --ep-await: var(--st-await);
    --ep-resolved: var(--st-resolved);
    --ep-closed: var(--st-closed);
    --ep-open-soft: color-mix(in srgb, var(--st-open) 13%, var(--surface));
    --ep-progress-soft: color-mix(in srgb, var(--st-progress) 13%, var(--surface));
    --ep-await-soft: color-mix(in srgb, var(--st-await) 13%, var(--surface));
    --ep-resolved-soft: color-mix(in srgb, var(--st-resolved) 13%, var(--surface));
    --ep-closed-soft: color-mix(in srgb, var(--st-closed) 13%, var(--surface));
}

:root[data-theme="dark"] {
    --bg: #111019;
    --surface: #1a1926;
    --surface-2: #201f2e;
    --border: #2c2a3c;
    --border-strong: #3a384d;
    --text: #ecebf5;
    --muted: #a19fb8;
    --faint: #6f6d88;
    --primary: #8b80ff;
    --primary-rgb: 139, 128, 255;
    --primary-hover: #9d94ff;
    --primary-ink: #14132a;
    --primary-soft: #26234a;
    --focus: rgba(139, 128, 255, .40);
    --side-bg: #0b0a13;
    --side-text: #b0aecb;
    --side-dim: #5f5d7a;
    --st-open: #e3a24a;
    --st-progress: #6b9cf0;
    --st-await: #a888f2;
    --st-resolved: #4cc494;
    --st-closed: #9398aa;
    --pr-urgent: #f06a6a;
    --pr-high: #f0924f;
    --pr-medium: #e3bd45;
    --pr-low: #5cc28f;
    --internal: #e3a24a;
    --danger: #f06a6a;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3);
    --shadow-pop: 0 12px 32px rgba(0, 0, 0, .5);
}

/* ---------- 2. Bootstrap mapeado nos tokens ---------- */
:root, :root[data-bs-theme] {
    --bs-font-sans-serif: var(--font-body);
    --bs-body-font-family: var(--font-body);
    --bs-body-bg: var(--bg);
    --bs-body-color: var(--text);
    --bs-emphasis-color: var(--text);
    --bs-secondary-color: var(--muted);
    --bs-tertiary-color: var(--faint);
    --bs-secondary-bg: var(--surface-2);
    --bs-tertiary-bg: var(--surface-2);
    --bs-border-color: var(--border);
    --bs-border-color-translucent: var(--border);
    --bs-link-color: var(--primary);
    --bs-link-color-rgb: var(--primary-rgb);
    --bs-link-hover-color: var(--primary-hover);
    --bs-primary: var(--primary);
    --bs-primary-rgb: var(--primary-rgb);
    --bs-border-radius: var(--r-sm);
    --bs-border-radius-sm: 6px;
    --bs-border-radius-lg: var(--r);
    --bs-focus-ring-color: var(--focus);
    --bs-heading-color: var(--text);
}

html { font-size: 15px; }
body {
    font-family: var(--font-body);
    font-size: .95rem;
    line-height: 1.5;
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6 { color: var(--text); font-weight: 600; }
h1, .h1 { font-size: 1.6rem; } h2, .h2 { font-size: 1.35rem; } h3, .h3 { font-size: 1.2rem; }
h4, .h4 { font-size: 1.08rem; } h5, .h5 { font-size: 1rem; } h6, .h6 { font-size: .92rem; }
a { text-decoration: none; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
::selection { background: var(--primary-soft); }

i[data-lucide], svg.lucide { display: inline-block; width: 18px; height: 18px; stroke-width: 1.9; flex: 0 0 auto; vertical-align: -.2em; }
.mono { font-family: var(--font-mono); font-size: .86em; letter-spacing: -.01em; }
.num { font-variant-numeric: tabular-nums; }
.text-muted { color: var(--muted) !important; }
.bg-light { background-color: var(--surface-2) !important; }
.bg-white { background-color: var(--surface) !important; }
.text-primary { color: var(--primary) !important; }
.bg-primary { background-color: var(--primary) !important; }
.border-primary { border-color: var(--primary) !important; }

/* Cards */
.card {
    --bs-card-bg: var(--surface);
    --bs-card-border-color: var(--border);
    --bs-card-cap-bg: transparent;
    --bs-card-border-radius: var(--r);
    --bs-card-inner-border-radius: calc(var(--r) - 1px);
    --bs-card-color: var(--text);
    box-shadow: var(--shadow);
}
.card-header { font-weight: 600; border-bottom-color: var(--border); padding: .8rem 1.1rem; }
.card-body { padding: 1.1rem; }
.card-footer { background: transparent; border-top-color: var(--border); }
.shadow { box-shadow: var(--shadow) !important; }

/* Botões */
.btn {
    --bs-btn-font-weight: 600;
    --bs-btn-font-size: .9rem;
    --bs-btn-padding-y: .45rem;
    --bs-btn-padding-x: .9rem;
    --bs-btn-border-radius: 9px;
    display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
}
.btn svg.lucide, .btn i[data-lucide] { width: 16px; height: 16px; }
.btn-sm { --bs-btn-font-size: .82rem; --bs-btn-padding-y: .28rem; --bs-btn-padding-x: .6rem; --bs-btn-border-radius: 7px; }
.btn-lg { --bs-btn-font-size: 1rem; --bs-btn-padding-y: .65rem; --bs-btn-padding-x: 1.2rem; }
.btn-primary {
    --bs-btn-bg: var(--primary); --bs-btn-border-color: var(--primary); --bs-btn-color: var(--primary-ink);
    --bs-btn-hover-bg: var(--primary-hover); --bs-btn-hover-border-color: var(--primary-hover); --bs-btn-hover-color: var(--primary-ink);
    --bs-btn-active-bg: var(--primary-hover); --bs-btn-active-border-color: var(--primary-hover); --bs-btn-active-color: var(--primary-ink);
    --bs-btn-disabled-bg: var(--primary); --bs-btn-disabled-border-color: var(--primary); --bs-btn-disabled-color: var(--primary-ink);
    background-image: none;
}
.btn-outline-primary {
    --bs-btn-color: var(--primary); --bs-btn-border-color: color-mix(in srgb, var(--primary) 45%, var(--border));
    --bs-btn-hover-bg: var(--primary-soft); --bs-btn-hover-color: var(--primary); --bs-btn-hover-border-color: var(--primary);
    --bs-btn-active-bg: var(--primary-soft); --bs-btn-active-color: var(--primary); --bs-btn-active-border-color: var(--primary);
}
.btn-outline-secondary, .btn-light, .btn-soft {
    --bs-btn-color: var(--text); --bs-btn-bg: var(--surface); --bs-btn-border-color: var(--border);
    --bs-btn-hover-bg: var(--surface-2); --bs-btn-hover-color: var(--text); --bs-btn-hover-border-color: var(--border-strong);
    --bs-btn-active-bg: var(--surface-2); --bs-btn-active-color: var(--text); --bs-btn-active-border-color: var(--border-strong);
}
.btn-ghost {
    --bs-btn-color: var(--muted); --bs-btn-bg: transparent; --bs-btn-border-color: transparent;
    --bs-btn-hover-bg: var(--surface-2); --bs-btn-hover-color: var(--text); --bs-btn-hover-border-color: transparent;
    --bs-btn-active-bg: var(--surface-2); --bs-btn-active-color: var(--text); --bs-btn-active-border-color: transparent;
}
.btn-outline-danger {
    --bs-btn-color: var(--danger); --bs-btn-border-color: color-mix(in srgb, var(--danger) 40%, var(--border));
    --bs-btn-hover-bg: var(--danger); --bs-btn-hover-border-color: var(--danger); --bs-btn-hover-color: #fff;
}
.btn-icon { width: 34px; height: 34px; padding: 0; }
.btn-icon.btn-sm { width: 30px; height: 30px; }

/* Formulários */
.form-control, .form-select {
    background-color: var(--surface);
    border-color: var(--border-strong);
    color: var(--text);
    border-radius: 9px;
    font-size: .92rem;
    padding: .5rem .75rem;
}
.form-select { padding-right: 2.2rem; }
.form-control-sm, .form-select-sm { font-size: .85rem; padding-top: .3rem; padding-bottom: .3rem; border-radius: 8px; }
.form-control::placeholder { color: var(--faint); }
.form-control:focus, .form-select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--focus); background-color: var(--surface); color: var(--text); }
.form-control:disabled, .form-select:disabled { background-color: var(--surface-2); }
.form-label { font-size: .85rem; font-weight: 600; color: var(--text); margin-bottom: .3rem; }
.form-text, small.text-muted { color: var(--muted) !important; }
.form-check-input { background-color: var(--surface); border-color: var(--border-strong); }
.form-check-input:checked { background-color: var(--primary); border-color: var(--primary); }
.form-check-input:focus { box-shadow: 0 0 0 3px var(--focus); border-color: var(--primary); }
.input-group-text { background: var(--surface-2); border-color: var(--border-strong); color: var(--muted); }
[data-theme="dark"] .form-select { --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23a19fb8' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); }

/* Tabelas */
.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--text);
    --bs-table-border-color: var(--border);
    --bs-table-hover-bg: var(--surface-2);
    --bs-table-hover-color: var(--text);
    --bs-table-striped-bg: var(--surface-2);
    --bs-table-striped-color: var(--text);
    font-size: .9rem;
    margin-bottom: 0;
}
.table > thead th {
    font-size: .78rem; font-weight: 600; color: var(--muted);
    background: var(--surface-2); border-bottom-color: var(--border);
    padding: .65rem .9rem; white-space: nowrap;
}
.table > tbody td { padding: .7rem .9rem; vertical-align: middle; }
.table-light { --bs-table-bg: var(--surface-2); --bs-table-color: var(--muted); }

/* Badges */
.badge { font-weight: 600; border-radius: 20px; padding: .3em .65em; }
.badge.bg-primary { background: var(--primary-soft) !important; color: var(--primary); }
.badge.bg-secondary { background: color-mix(in srgb, var(--st-closed) 15%, var(--surface)) !important; color: var(--st-closed); }
.badge.bg-info { background: color-mix(in srgb, var(--st-progress) 14%, var(--surface)) !important; color: var(--st-progress); }
.badge.bg-success { background: color-mix(in srgb, var(--st-resolved) 14%, var(--surface)) !important; color: var(--st-resolved); }
.badge.bg-warning { background: color-mix(in srgb, var(--st-open) 16%, var(--surface)) !important; color: var(--st-open) !important; }
.badge.bg-danger { background: color-mix(in srgb, var(--pr-urgent) 14%, var(--surface)) !important; color: var(--pr-urgent); }

/* Alertas */
.alert { border-radius: 10px; font-size: .9rem; border-width: 1px; }
.alert-success { --bs-alert-bg: color-mix(in srgb, var(--st-resolved) 10%, var(--surface)); --bs-alert-border-color: color-mix(in srgb, var(--st-resolved) 30%, var(--border)); --bs-alert-color: var(--text); }
.alert-danger { --bs-alert-bg: color-mix(in srgb, var(--danger) 9%, var(--surface)); --bs-alert-border-color: color-mix(in srgb, var(--danger) 30%, var(--border)); --bs-alert-color: var(--text); }
.alert-warning { --bs-alert-bg: color-mix(in srgb, var(--st-open) 10%, var(--surface)); --bs-alert-border-color: color-mix(in srgb, var(--st-open) 30%, var(--border)); --bs-alert-color: var(--text); }
.alert-info { --bs-alert-bg: color-mix(in srgb, var(--st-progress) 9%, var(--surface)); --bs-alert-border-color: color-mix(in srgb, var(--st-progress) 28%, var(--border)); --bs-alert-color: var(--text); }

/* Dropdown, modal, list-group, nav-tabs, paginação */
.dropdown-menu {
    --bs-dropdown-bg: var(--surface); --bs-dropdown-border-color: var(--border); --bs-dropdown-color: var(--text);
    --bs-dropdown-link-color: var(--text); --bs-dropdown-link-hover-bg: var(--surface-2); --bs-dropdown-link-hover-color: var(--text);
    --bs-dropdown-link-active-bg: var(--primary-soft); --bs-dropdown-link-active-color: var(--text);
    --bs-dropdown-header-color: var(--muted); --bs-dropdown-divider-bg: var(--border);
    --bs-dropdown-border-radius: 10px; --bs-dropdown-font-size: .9rem;
    box-shadow: var(--shadow-pop); padding: .35rem;
}
.dropdown-item { border-radius: 7px; display: flex; align-items: center; gap: .55rem; padding: .45rem .65rem; }
.dropdown-item svg.lucide { width: 16px; height: 16px; color: var(--muted); }
.dropdown-item.text-danger svg.lucide { color: var(--danger); }
.modal { --bs-modal-bg: var(--surface); --bs-modal-border-color: var(--border); --bs-modal-border-radius: 14px; --bs-modal-header-border-color: var(--border); --bs-modal-footer-border-color: var(--border); --bs-modal-color: var(--text); }
.list-group { --bs-list-group-bg: var(--surface); --bs-list-group-border-color: var(--border); --bs-list-group-color: var(--text); --bs-list-group-action-hover-bg: var(--surface-2); --bs-list-group-action-hover-color: var(--text); }
.nav-tabs { --bs-nav-tabs-border-color: var(--border); --bs-nav-tabs-link-active-bg: var(--surface); --bs-nav-tabs-link-active-color: var(--text); --bs-nav-tabs-link-active-border-color: var(--border) var(--border) var(--surface); --bs-nav-tabs-link-hover-border-color: transparent; }
.nav-tabs .nav-link { color: var(--muted); font-weight: 600; font-size: .88rem; }
.nav-pills { --bs-nav-pills-link-active-bg: var(--primary-soft); --bs-nav-pills-link-active-color: var(--primary); }
.pagination {
    --bs-pagination-bg: var(--surface); --bs-pagination-border-color: var(--border); --bs-pagination-color: var(--text);
    --bs-pagination-hover-bg: var(--surface-2); --bs-pagination-hover-color: var(--text); --bs-pagination-hover-border-color: var(--border-strong);
    --bs-pagination-active-bg: var(--primary); --bs-pagination-active-border-color: var(--primary); --bs-pagination-active-color: var(--primary-ink);
    --bs-pagination-disabled-bg: var(--surface); --bs-pagination-disabled-color: var(--faint); --bs-pagination-disabled-border-color: var(--border);
    --bs-pagination-focus-box-shadow: 0 0 0 3px var(--focus);
    --bs-pagination-font-size: .88rem; --bs-pagination-border-radius: 8px;
    gap: 4px; margin-bottom: 0;
}
.pagination .page-link { border-radius: 8px !important; min-width: 32px; text-align: center; font-variant-numeric: tabular-nums; }
nav[role="navigation"] p.small { color: var(--muted); margin-bottom: 0; }
.toast { --bs-toast-bg: var(--surface); --bs-toast-border-color: var(--border); --bs-toast-color: var(--text); --bs-toast-border-radius: 10px; box-shadow: var(--shadow-pop); }
.progress { --bs-progress-bg: var(--surface-2); }
.btn-close { filter: none; }
[data-theme="dark"] .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }
hr { border-color: var(--border); opacity: 1; }

/* ---------- 3. Estrutura (sidebar + topbar) ---------- */
.ep-app { display: grid; grid-template-columns: var(--side-w) minmax(0, 1fr); min-height: 100vh; }

.ep-side {
    background: var(--side-bg); color: var(--side-text);
    display: flex; flex-direction: column; gap: 4px;
    padding: 16px 12px; position: sticky; top: 0; height: 100vh; overflow-y: auto; overflow-x: hidden;
    scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.12) transparent;
}
.ep-brand { display: flex; align-items: center; gap: 10px; padding: 4px 8px 14px; color: #fff; }
.ep-brand:hover { color: #fff; }
.ep-brand-mark {
    width: 40px; height: 40px; flex: 0 0 auto; display: block;
    border-radius: 50%; background: #fff; object-fit: contain;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .14);
}
.ep-brand-mark.lg { width: 64px; height: 64px; }
.ep-brand-name { font-family: var(--font-display); font-weight: 700; font-size: 16px; line-height: 1.1; letter-spacing: -.01em; }
.ep-brand-sub { font-size: 11.5px; color: var(--side-dim); }

.ep-nav { display: flex; flex-direction: column; gap: 2px; margin: 10px 0 0; padding: 0; list-style: none; }
.ep-nav-label { font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .09em; color: var(--side-dim); padding: 0 10px 6px; white-space: nowrap; }
.ep-nav-item {
    display: flex; align-items: center; gap: 11px; width: 100%;
    padding: 8px 10px; border-radius: 8px; border: 0; background: none;
    font-weight: 500; font-size: 14px; color: var(--side-text); text-align: left; white-space: nowrap;
}
.ep-nav-item:hover { background: var(--side-hover); color: #fff; }
.ep-nav-item.active { background: var(--side-active); color: #fff; }
.ep-nav-item.active svg.lucide { color: var(--side-accent); }
.ep-nav-item .ep-count { margin-left: auto; font-size: 11.5px; font-weight: 600; background: rgba(255,255,255,.08); color: #dcdaf0; padding: 1px 7px; border-radius: 20px; font-variant-numeric: tabular-nums; }
.ep-nav-item .ep-count.hot { background: #d23f3f; color: #fff; }
.ep-nav-item .ep-caret { margin-left: auto; width: 15px; height: 15px; transition: transform .2s ease; opacity: .7; }
.ep-nav-item[aria-expanded="true"] .ep-caret { transform: rotate(180deg); }
.ep-subnav { list-style: none; margin: 2px 0 4px; padding: 0 0 0 29px; display: flex; flex-direction: column; gap: 1px; }
.ep-subnav .ep-nav-item { font-size: 13.5px; padding: 6px 10px; }

.ep-side-foot { margin-top: auto; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.07); display: flex; align-items: center; gap: 10px; }
.ep-side-foot .who { min-width: 0; flex: 1; }
.ep-side-foot .who b { display: block; color: #fff; font-weight: 600; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ep-side-foot .who span { font-size: 12px; color: var(--side-dim); }
.ep-side-btn { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 8px; border: 0; background: transparent; color: var(--side-text); flex: 0 0 auto; }
.ep-side-btn:hover { background: var(--side-hover); color: #fff; }

.ep-main { min-width: 0; display: flex; flex-direction: column; }
.ep-top {
    position: sticky; top: 0; z-index: 1020;
    display: flex; align-items: center; gap: 10px;
    padding: 10px 28px; min-height: 58px;
    background: color-mix(in srgb, var(--bg) 88%, transparent);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border);
}
.ep-top-btn {
    width: 36px; height: 36px; display: grid; place-items: center; flex: 0 0 auto;
    border-radius: 9px; border: 1px solid var(--border); background: var(--surface); color: var(--muted);
}
.ep-top-btn:hover { color: var(--text); border-color: var(--border-strong); }
.ep-top-title { font-size: 15px; font-weight: 600; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ep-search {
    margin-left: auto; display: flex; align-items: center; gap: 8px;
    background: var(--surface); border: 1px solid var(--border); border-radius: 9px;
    padding: 0 10px; height: 36px; width: min(340px, 100%); color: var(--faint);
}
.ep-search:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px var(--focus); }
.ep-search input { border: 0; background: transparent; outline: 0; flex: 1; min-width: 0; color: var(--text); font-size: .9rem; }
.ep-search input::placeholder { color: var(--faint); }
.ep-kbd { font-family: var(--font-mono); font-size: 11px; border: 1px solid var(--border); border-radius: 5px; padding: 0 5px; color: var(--muted); white-space: nowrap; }
.ep-top-spacer { margin-left: auto; }
.ep-user-btn { display: flex; align-items: center; gap: 8px; border: 0; background: transparent; padding: 3px; border-radius: 30px; color: var(--text); }
.ep-user-btn:hover { background: var(--surface-2); }

.ep-page { padding: 24px 28px 48px; width: 100%; max-width: 1480px; }
.ep-page > .alert { margin-bottom: 18px; }
.ep-screen { display: flex; flex-direction: column; gap: 18px; }
.ep-screen > * { margin-bottom: 0; }

.ep-toasts { position: fixed; top: 70px; right: 20px; z-index: 1090; display: flex; flex-direction: column; gap: 8px; width: min(380px, calc(100vw - 32px)); }
.ep-toast { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; }
.ep-toast .ic { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; flex: 0 0 auto; color: var(--c); background: color-mix(in srgb, var(--c) 14%, var(--surface)); }
.ep-toast .ic svg.lucide { width: 16px; height: 16px; }
.ep-toast .msg { flex: 1; font-size: .9rem; padding-top: 3px; }

.ep-scrim { display: none; }

/* Sidebar recolhida (desktop) */
@media (min-width: 992px) {
    body.sidebar-collapsed { --side-w: 72px; }
    body.sidebar-collapsed .ep-brand-text,
    body.sidebar-collapsed .ep-nav-label,
    body.sidebar-collapsed .ep-nav-item span,
    body.sidebar-collapsed .ep-nav-item .ep-count,
    body.sidebar-collapsed .ep-nav-item .ep-caret,
    body.sidebar-collapsed .ep-subnav,
    body.sidebar-collapsed .ep-side-foot .who { display: none !important; }
    body.sidebar-collapsed .ep-nav-item { justify-content: center; padding: 10px 0; }
    body.sidebar-collapsed .ep-brand { justify-content: center; padding-left: 0; padding-right: 0; }
    body.sidebar-collapsed .ep-nav { margin-top: 6px; padding-top: 6px; border-top: 1px solid rgba(255,255,255,.06); }
    body.sidebar-collapsed .ep-side-foot { flex-direction: column; }
}

@media (max-width: 991.98px) {
    .ep-app { grid-template-columns: minmax(0, 1fr); }
    .ep-side { position: fixed; inset: 0 auto 0 0; width: 264px; z-index: 1045; transform: translateX(-100%); transition: transform .22s ease; box-shadow: var(--shadow-pop); }
    body.nav-open .ep-side { transform: none; }
    body.nav-open .ep-scrim { display: block; position: fixed; inset: 0; background: rgba(10, 9, 20, .45); z-index: 1040; }
    .ep-top { padding: 8px 16px; }
    .ep-search { display: none; }
    .ep-page { padding: 18px 16px 40px; }
}

/* ---------- 4. Componentes ---------- */
.ep-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.ep-eyebrow { font-size: 12.5px; font-weight: 600; color: var(--muted); letter-spacing: .02em; }
.ep-h1 { font-family: var(--font-display); font-weight: 700; font-size: 1.75rem; letter-spacing: -.02em; line-height: 1.15; margin: 2px 0 0; text-wrap: balance; }
.ep-sub { color: var(--muted); margin: 4px 0 0; }
.ep-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

.ep-panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); box-shadow: var(--shadow); min-width: 0; }
.ep-panel-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 18px; border-bottom: 1px solid var(--border); min-height: 52px; flex-wrap: wrap; }
.ep-panel-h h2 { font-size: .98rem; font-weight: 600; margin: 0; display: flex; align-items: center; gap: 8px; }
.ep-panel-h h2 svg.lucide { width: 16px; height: 16px; color: var(--muted); }
.ep-panel-h .meta { font-size: .82rem; color: var(--muted); }
.ep-panel-b { padding: 16px 18px; }

.ep-status {
    --c: var(--st-closed);
    display: inline-flex; align-items: center; gap: 6px;
    font-size: .8rem; font-weight: 600; line-height: 1.4; color: var(--c);
    background: color-mix(in srgb, var(--c) 13%, var(--surface));
    padding: 3px 10px 3px 8px; border-radius: 20px; white-space: nowrap;
}
.ep-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--c); }
.ep-status[data-status="open"] { --c: var(--st-open); }
.ep-status[data-status="in_progress"] { --c: var(--st-progress); }
.ep-status[data-status="awaiting_validation"] { --c: var(--st-await); }
.ep-status[data-status="resolved"] { --c: var(--st-resolved); }
.ep-status[data-status="closed"] { --c: var(--st-closed); }

.ep-prio { --c: var(--pr-low); display: inline-flex; align-items: center; gap: 8px; font-size: .86rem; font-weight: 500; white-space: nowrap; }
.ep-bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 13px; }
.ep-bars i { width: 3.5px; border-radius: 1px; background: var(--border-strong); }
.ep-bars i:nth-child(1) { height: 5px; } .ep-bars i:nth-child(2) { height: 9px; } .ep-bars i:nth-child(3) { height: 13px; }
.ep-prio[data-priority="low"] .ep-bars i:nth-child(-n+1),
.ep-prio[data-priority="medium"] .ep-bars i:nth-child(-n+2),
.ep-prio[data-priority="high"] .ep-bars i:nth-child(-n+3) { background: var(--c); }
.ep-prio[data-priority="medium"] { --c: var(--pr-medium); }
.ep-prio[data-priority="high"] { --c: var(--pr-high); }
.ep-prio[data-priority="urgent"] { --c: var(--pr-urgent); color: var(--pr-urgent); font-weight: 600; }
.ep-prio[data-priority="urgent"] svg.lucide { width: 15px; height: 15px; }

.ep-av {
    --h: 250; width: 30px; height: 30px; border-radius: 50%;
    display: inline-grid; place-items: center; flex: 0 0 auto;
    font-size: 11.5px; font-weight: 700; letter-spacing: .01em;
    color: hsl(var(--h) 45% 32%); background: hsl(var(--h) 70% 90%);
}
[data-theme="dark"] .ep-av { color: hsl(var(--h) 70% 85%); background: hsl(var(--h) 30% 26%); }
.ep-av.xs { width: 24px; height: 24px; font-size: 10px; }
.ep-av.lg { width: 44px; height: 44px; font-size: 15px; }
.ep-side .ep-av { color: #fff; background: #3a3670; }
.ep-person { display: flex; align-items: center; gap: 9px; white-space: nowrap; min-width: 0; }
.ep-person small { display: block; color: var(--muted); font-size: .8rem; }
.ep-unassigned { display: inline-flex; align-items: center; gap: 7px; color: var(--faint); font-size: .86rem; white-space: nowrap; }
.ep-unassigned::before { content: ""; width: 24px; height: 24px; border-radius: 50%; border: 1.5px dashed var(--border-strong); }

.ep-tag { display: inline-flex; align-items: center; gap: 5px; font-size: .8rem; color: var(--muted); background: var(--surface-2); border: 1px solid var(--border); padding: 1px 8px; border-radius: 6px; white-space: nowrap; }
.ep-tag svg.lucide { width: 13px; height: 13px; }

/* KPIs */
.ep-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.ep-kpi { --c: var(--primary); padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; color: var(--text); }
a.ep-kpi:hover { border-color: var(--c); color: var(--text); }
.ep-kpi-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ep-kpi-label { font-size: .86rem; font-weight: 600; color: var(--muted); }
.ep-kpi-ic { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; color: var(--c); background: color-mix(in srgb, var(--c) 13%, var(--surface)); }
.ep-kpi-ic svg.lucide { width: 17px; height: 17px; }
.ep-kpi-n { font-family: var(--font-display); font-size: 2.1rem; font-weight: 700; letter-spacing: -.02em; line-height: 1; font-variant-numeric: tabular-nums; }
.ep-kpi-foot { font-size: .82rem; color: var(--muted); }

.ep-grid-2 { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.ep-stack { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
@media (max-width: 1199.98px) { .ep-grid-2 { grid-template-columns: minmax(0, 1fr); } }

.ep-legend { display: flex; gap: 14px; font-size: .82rem; color: var(--muted); }
.ep-legend span { display: inline-flex; align-items: center; gap: 6px; }
.ep-legend i { width: 10px; height: 3px; border-radius: 2px; background: var(--c); }

.ep-dist { display: flex; height: 10px; border-radius: 6px; overflow: hidden; gap: 2px; margin: 2px 0 16px; background: var(--surface-2); }
.ep-dist span { background: var(--c); min-width: 3px; }
.ep-dist-list { display: flex; flex-direction: column; gap: 10px; }
.ep-dist-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; font-size: .9rem; color: var(--text); }
a.ep-dist-row:hover { color: var(--primary); }
.ep-dist-row .sw { width: 9px; height: 9px; border-radius: 3px; background: var(--c); }
.ep-dist-row b { font-variant-numeric: tabular-nums; font-weight: 600; }
.ep-dist-row em { font-style: normal; color: var(--faint); font-size: .8rem; width: 40px; text-align: right; display: inline-block; font-variant-numeric: tabular-nums; }

.ep-bars-list { display: flex; flex-direction: column; gap: 13px; }
.ep-bar-row { display: flex; flex-direction: column; gap: 5px; font-size: .9rem; }
.ep-bar-row > div:first-child { display: flex; justify-content: space-between; gap: 8px; }
.ep-bar-row b { font-variant-numeric: tabular-nums; }
.ep-track { height: 6px; background: var(--surface-2); border-radius: 4px; overflow: hidden; border: 1px solid var(--border); }
.ep-track span { display: block; height: 100%; background: var(--c, var(--primary)); border-radius: 4px; }

.ep-rows { display: flex; flex-direction: column; }
.ep-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 11px 18px; border-top: 1px solid var(--border); color: var(--text); }
.ep-row:first-child { border-top: 0; }
.ep-row:hover { background: var(--surface-2); color: var(--text); }
.ep-row-title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ep-row-meta { display: flex; gap: 8px; align-items: center; font-size: .82rem; color: var(--muted); flex-wrap: wrap; }
.ep-row-why { font-size: .8rem; font-weight: 600; color: var(--pr-urgent); white-space: nowrap; text-align: right; }
.ep-row-why.warn { color: var(--st-open); }
.ep-id { color: var(--faint); font-family: var(--font-mono); font-size: .84rem; white-space: nowrap; }

.ep-empty { text-align: center; padding: 44px 16px; color: var(--muted); }
.ep-empty .ic { width: 52px; height: 52px; border-radius: 14px; margin: 0 auto 12px; display: grid; place-items: center; background: var(--surface-2); border: 1px solid var(--border); color: var(--faint); }
.ep-empty .ic svg.lucide { width: 24px; height: 24px; }
.ep-empty b { display: block; color: var(--text); font-size: 1rem; margin-bottom: 2px; }
.ep-empty > i.fas, .ep-empty > i.fa { font-size: 2.2rem; color: var(--faint); margin-bottom: 12px; }

/* Segmentado (filtro por status) */
.ep-seg { display: flex; gap: 4px; flex-wrap: wrap; padding: 4px; background: var(--surface); border: 1px solid var(--border); border-radius: 11px; width: fit-content; max-width: 100%; }
.ep-seg a { --c: var(--primary); display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 8px; font-weight: 600; font-size: .86rem; color: var(--muted); white-space: nowrap; }
.ep-seg a:hover { color: var(--text); background: var(--surface-2); }
.ep-seg a.on { background: var(--primary-soft); color: var(--text); }
.ep-seg .n { font-size: .78rem; color: var(--faint); font-variant-numeric: tabular-nums; }
.ep-seg a.on .n { color: var(--primary); }
.ep-seg .sd { width: 7px; height: 7px; border-radius: 50%; background: var(--c); }

/* Barra de filtros */
.ep-filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--border); }
.ep-filters .ep-search { margin-left: 0; width: min(300px, 100%); background: var(--surface-2); display: flex; }
.ep-filters .form-select { width: auto; max-width: 220px; background-color: var(--surface-2); }
.ep-filters .form-select.is-set { background-color: var(--primary-soft); border-color: transparent; font-weight: 600; }
.ep-filters .spacer { flex: 1; }

/* Tabela de chamados */
.ep-table-wrap { overflow-x: auto; }
.ep-table { width: 100%; border-collapse: collapse; min-width: 980px; font-size: .9rem; }
.ep-table th { text-align: left; font-size: .78rem; font-weight: 600; color: var(--muted); padding: 10px 14px; background: var(--surface-2); border-bottom: 1px solid var(--border); white-space: nowrap; }
.ep-table td { padding: 10px 14px; border-bottom: 1px solid var(--border); vertical-align: middle; color: var(--text); }
.ep-table tbody tr[data-href] { cursor: pointer; }
.ep-table tbody tr:hover td { background: var(--surface-2); }
.ep-table tbody tr:last-child td { border-bottom: 0; }
.ep-t-title { font-weight: 600; max-width: 380px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text); display: block; }
a.ep-t-title:hover { color: var(--primary); }
.ep-t-sub { font-size: .8rem; color: var(--muted); margin-top: 1px; white-space: nowrap; }
.ep-t-time { color: var(--muted); font-size: .86rem; white-space: nowrap; }
.ep-t-time small { display: block; color: var(--faint); font-size: .76rem; }
.ep-table-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; border-top: 1px solid var(--border); font-size: .86rem; color: var(--muted); flex-wrap: wrap; }
.ep-table-foot nav { flex: 0 0 auto; }
.ep-table-foot nav p.small { display: none; }
.ep-table-foot nav .d-sm-flex { flex: 0 0 auto !important; }

/* Andamento (stepper) */
.ep-steps { display: grid; grid-template-columns: repeat(5, 1fr); padding: 14px 18px; }
.ep-step { display: flex; flex-direction: column; gap: 6px; position: relative; font-size: .82rem; color: var(--faint); font-weight: 500; }
.ep-step::before { content: ""; position: absolute; top: 10px; left: 22px; right: 0; height: 2px; background: var(--border); }
.ep-step:last-child::before { display: none; }
.ep-step .knob { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--border-strong); background: var(--surface); display: grid; place-items: center; position: relative; z-index: 1; }
.ep-step .knob svg.lucide { width: 12px; height: 12px; stroke-width: 3; }
.ep-step.done { color: var(--muted); }
.ep-step.done .knob { background: var(--primary); border-color: var(--primary); color: var(--primary-ink); }
.ep-step.done::before { background: var(--primary); }
.ep-step.now { color: var(--text); font-weight: 600; }
.ep-step.now .knob { border-color: var(--primary); box-shadow: 0 0 0 4px var(--primary-soft); }
.ep-step.now .knob::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--primary); }
.ep-step time { font-family: var(--font-mono); font-size: .72rem; color: var(--faint); font-weight: 400; }
@media (max-width: 767.98px) {
    .ep-steps { grid-template-columns: 1fr; gap: 10px; }
    .ep-step { flex-direction: row; align-items: center; gap: 10px; }
    .ep-step::before { display: none; }
}

/* Detalhe do chamado */
.ep-detail { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 14px; align-items: start; }
@media (max-width: 1199.98px) { .ep-detail { grid-template-columns: minmax(0, 1fr); } }
.ep-back { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: .86rem; font-weight: 500; }
.ep-back:hover { color: var(--text); }
.ep-back svg.lucide { width: 15px; height: 15px; }
.ep-badges { display: flex; gap: 10px; align-items: center; margin-top: 8px; flex-wrap: wrap; font-size: .86rem; color: var(--muted); }
.ep-desc { max-width: 72ch; line-height: 1.65; overflow-wrap: anywhere; }
.ep-wa { display: inline-flex; align-items: center; gap: 5px; color: var(--st-resolved); font-weight: 600; border-bottom: 1px dashed currentColor; }
.ep-wa:hover { color: var(--st-resolved); }
.ep-wa svg.lucide { width: 14px; height: 14px; }
.ep-note { margin-top: 14px; padding: 12px 14px; border-radius: 10px; background: color-mix(in srgb, var(--st-resolved) 8%, var(--surface)); border: 1px solid color-mix(in srgb, var(--st-resolved) 28%, var(--border)); }
.ep-note-h { font-size: .8rem; font-weight: 600; color: var(--st-resolved); display: flex; gap: 6px; align-items: center; margin-bottom: 4px; }
.ep-note-h svg.lucide { width: 14px; height: 14px; }

.ep-files { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.ep-file { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 10px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface-2); min-width: 0; }
.ep-file .fi { width: 34px; height: 34px; border-radius: 7px; display: grid; place-items: center; background: var(--surface); border: 1px solid var(--border); color: var(--primary); flex: 0 0 auto; }
.ep-file .fi i.fas { font-size: 1rem; }
.ep-file .body { min-width: 0; flex: 1; }
.ep-file a.name { display: block; font-size: .86rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text); }
.ep-file a.name:hover { color: var(--primary); }
.ep-file small { color: var(--muted); font-size: .78rem; }
.ep-file form { margin: 0; }

.ep-timeline { display: flex; flex-direction: column; padding: 6px 18px 4px; }
.ep-ev { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; position: relative; padding: 10px 0; }
.ep-ev::before { content: ""; position: absolute; left: 14.5px; top: 0; bottom: 0; width: 1px; background: var(--border); }
.ep-ev:first-child::before { top: 22px; }
.ep-ev:last-child::before { bottom: calc(100% - 22px); }
.ep-ev:only-child::before { display: none; }
.ep-ev > .ep-av, .ep-ev > .dot { position: relative; z-index: 1; }
.ep-ev > .dot { width: 30px; height: 30px; display: grid; place-items: center; }
.ep-ev > .dot span { width: 22px; height: 22px; border-radius: 50%; background: var(--surface); border: 1px solid var(--border); display: grid; place-items: center; color: var(--muted); }
.ep-ev > .dot svg.lucide { width: 12px; height: 12px; }
.ep-ev-line { font-size: .86rem; color: var(--muted); padding-top: 5px; }
.ep-ev-line b { color: var(--text); font-weight: 600; }
.ep-ev-line time, .ep-msg-h time { font-family: var(--font-mono); font-size: .76rem; color: var(--faint); margin-left: 6px; }
.ep-msg { border: 1px solid var(--border); border-radius: 10px; background: var(--surface); overflow: hidden; min-width: 0; }
.ep-msg-h { display: flex; align-items: center; gap: 8px; padding: 7px 12px; border-bottom: 1px solid var(--border); background: var(--surface-2); font-size: .86rem; flex-wrap: wrap; }
.ep-msg-h b { font-weight: 600; }
.ep-msg-h .role { font-size: .78rem; color: var(--muted); }
.ep-msg-b { padding: 10px 12px; line-height: 1.6; overflow-wrap: anywhere; }
.ep-msg.internal { border-color: color-mix(in srgb, var(--internal) 45%, var(--border)); background: color-mix(in srgb, var(--internal) 6%, var(--surface)); }
.ep-msg.internal .ep-msg-h { background: color-mix(in srgb, var(--internal) 11%, var(--surface)); border-color: color-mix(in srgb, var(--internal) 30%, var(--border)); }
.ep-pill-int { display: inline-flex; align-items: center; gap: 4px; font-size: .78rem; font-weight: 600; color: var(--internal); }
.ep-pill-int svg.lucide { width: 12px; height: 12px; }
.ep-att { display: inline-flex; align-items: center; gap: 6px; margin: 8px 6px 0 0; font-size: .82rem; padding: 3px 4px 3px 9px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface-2); max-width: 100%; }
.ep-att a { color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ep-att a:hover { color: var(--primary); }
.ep-att > svg.lucide, .ep-att > i { width: 14px; height: 14px; color: var(--primary); }
.ep-att form { margin: 0; display: inline-flex; }
.ep-att button { border: 0; background: none; padding: 0 4px; color: var(--faint); line-height: 1; }
.ep-att button:hover { color: var(--danger); }
.ep-att button svg.lucide { width: 13px; height: 13px; }

.ep-composer { margin: 8px 18px 18px; border: 1px solid var(--border-strong); border-radius: 10px; background: var(--surface); overflow: hidden; }
.ep-composer:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px var(--focus); }
.ep-composer.is-internal:focus-within { border-color: var(--internal); box-shadow: 0 0 0 3px color-mix(in srgb, var(--internal) 25%, transparent); }
.ep-c-tabs { display: flex; gap: 2px; padding: 6px 6px 0; border-bottom: 1px solid var(--border); background: var(--surface-2); }
.ep-c-tabs button { border: 0; background: transparent; padding: 7px 12px; font-size: .86rem; font-weight: 600; color: var(--muted); display: inline-flex; gap: 6px; align-items: center; margin-bottom: -1px; border-bottom: 2px solid transparent; }
.ep-c-tabs button svg.lucide { width: 14px; height: 14px; }
.ep-c-tabs button.on { color: var(--text); border-bottom-color: var(--primary); }
.ep-c-tabs button.on[data-internal="1"] { border-bottom-color: var(--internal); }
.ep-composer textarea { width: 100%; border: 0; outline: 0; resize: vertical; min-height: 90px; padding: 12px; background: transparent; line-height: 1.55; color: var(--text); display: block; }
.ep-composer textarea::placeholder { color: var(--faint); }
.ep-c-files { padding: 0 12px 8px; font-size: .82rem; color: var(--muted); display: flex; flex-wrap: wrap; gap: 6px; }
.ep-c-files:empty { display: none; }
.ep-c-foot { display: flex; align-items: center; gap: 6px; padding: 8px; border-top: 1px solid var(--border); flex-wrap: wrap; }
.ep-c-foot .hint { font-size: .8rem; color: var(--faint); margin-right: auto; padding-left: 4px; }

.ep-kv { display: flex; flex-direction: column; margin: 0; }
.ep-kv-row { display: grid; grid-template-columns: 124px minmax(0, 1fr); gap: 10px; padding: 9px 18px; border-top: 1px solid var(--border); font-size: .9rem; align-items: center; }
.ep-kv-row:first-child { border-top: 0; }
.ep-kv-row dt { color: var(--muted); font-weight: 400; }
.ep-kv-row dd { margin: 0; font-weight: 500; min-width: 0; overflow-wrap: anywhere; }
.ep-contact { display: flex; flex-direction: column; gap: 8px; font-size: .9rem; }
.ep-contact > * { display: flex; align-items: center; gap: 9px; color: var(--text); min-width: 0; overflow-wrap: anywhere; }
.ep-contact svg.lucide { width: 15px; height: 15px; color: var(--muted); }
.ep-avstack { display: flex; flex-wrap: wrap; gap: 6px; }
.ep-timebox { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 10px; padding: 14px 18px; }
.ep-timebox div { display: flex; flex-direction: column; gap: 2px; }
.ep-timebox small { color: var(--muted); font-size: .78rem; }
.ep-timebox b { font-family: var(--font-display); font-size: 1.25rem; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.btn-wa { --bs-btn-color: var(--st-resolved); --bs-btn-bg: color-mix(in srgb, var(--st-resolved) 8%, var(--surface)); --bs-btn-border-color: color-mix(in srgb, var(--st-resolved) 40%, var(--border)); --bs-btn-hover-bg: color-mix(in srgb, var(--st-resolved) 16%, var(--surface)); --bs-btn-hover-color: var(--st-resolved); --bs-btn-hover-border-color: var(--st-resolved); }
.ep-validate { border-color: color-mix(in srgb, var(--st-await) 45%, var(--border)); background: color-mix(in srgb, var(--st-await) 6%, var(--surface)); }

/* ---------- 5. Telas anteriores (compatibilidade) ---------- */
.status-badge { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem !important; font-weight: 600; padding: 3px 10px 3px 8px !important; border-radius: 20px; --c: var(--st-closed); color: var(--c) !important; background: color-mix(in srgb, var(--c) 13%, var(--surface)) !important; }
.status-badge.status-open { --c: var(--st-open); }
.status-badge.status-in_progress { --c: var(--st-progress); }
.status-badge.status-awaiting_validation { --c: var(--st-await); }
.status-badge.status-resolved { --c: var(--st-resolved); }
.status-badge.status-closed { --c: var(--st-closed); }
.status-badge[class*="status-"]::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--c); }
.status-badge.priority-low { --c: var(--pr-low); }
.status-badge.priority-medium { --c: var(--pr-medium); }
.status-badge.priority-high { --c: var(--pr-high); }
.status-badge.priority-urgent { --c: var(--pr-urgent); }
.priority-urgent:not(.status-badge) { background-color: var(--pr-urgent); color: #fff; }
.priority-high:not(.status-badge) { background-color: var(--pr-high); color: #fff; }
.priority-medium:not(.status-badge) { background-color: var(--pr-medium); color: #1d1b2e; }
.priority-low:not(.status-badge) { background-color: var(--pr-low); color: #fff; }

.stats-row { margin-top: 10px; }
.stat-card { display: flex; align-items: center; gap: 18px; padding: 12px 16px; border-radius: var(--r); color: #fff; min-height: 90px; line-height: 20px; }
.stat-card.bg-info { background: var(--st-progress) !important; }
.stat-card.bg-primary { background: var(--primary) !important; color: var(--primary-ink); }
.stat-card .info-box-icon { font-size: 26px; opacity: .9; }
.stat-card .info-box-text { font-size: 13px; text-transform: uppercase; letter-spacing: .5px; opacity: .9; }
.stat-card .info-box-number { font-size: 26px; font-weight: 700; }

.text-xs { font-size: .72rem !important; }
.text-gray-800 { color: var(--text) !important; }
.text-gray-300 { color: var(--faint) !important; }
.font-weight-bold { font-weight: 700 !important; }

/* Cabeçalho / escolhas do fluxo de abertura de chamado */
.ep-page-head { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.ep-page-head .ep-title { font-family: var(--font-display); font-size: 1.6rem; font-weight: 700; letter-spacing: -.02em; color: var(--text); margin: 0; display: flex; align-items: center; gap: 10px; text-wrap: balance; }
.ep-page-head .ep-title i, .ep-page-head .ep-title svg { color: var(--primary); }
.ep-page-head .ep-subtitle { font-size: .95rem; color: var(--muted); margin: 4px 0 0; }
.ep-container { max-width: 860px; margin: 0 auto; width: 100%; display: flex; flex-direction: column; gap: 20px; }
.ep-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); box-shadow: var(--shadow); padding: 20px; }
.ep-list { display: flex; flex-direction: column; gap: 12px; }
.ep-choice { --ep-accent: var(--primary); display: flex; align-items: center; gap: 18px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 18px 20px; color: inherit; box-shadow: var(--shadow); transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.ep-choice:hover { transform: translateY(-2px); border-color: var(--ep-accent); box-shadow: var(--shadow-pop); color: inherit; }
.ep-choice-icon { flex: 0 0 auto; width: 56px; height: 56px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; color: var(--ep-accent); background: color-mix(in srgb, var(--ep-accent) 13%, var(--surface)); }
.ep-choice-body { flex: 1 1 auto; min-width: 0; }
.ep-choice-title { font-size: 1.12rem; font-weight: 600; color: var(--text); line-height: 1.25; }
.ep-choice-desc { font-size: .9rem; color: var(--muted); margin-top: 3px; }
.ep-choice-hint { font-size: .78rem; color: var(--ep-accent); font-weight: 600; margin-top: 6px; }
.ep-choice-arrow { flex: 0 0 auto; color: var(--faint); }
.ep-pills { display: flex; flex-wrap: wrap; gap: 10px; }
.ep-pill { --pc: var(--primary); --pb: var(--primary-soft); display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 96px; padding: 10px 14px; border-radius: var(--r-sm); background: var(--surface); border: 1px solid var(--border); color: var(--text); transition: border-color .15s ease, transform .15s ease; }
.ep-pill:hover { transform: translateY(-1px); border-color: var(--pc); color: var(--text); }
.ep-pill.active { border-color: var(--pc); background: var(--pb); }
.ep-pill .ep-pill-n { font-size: 1.35rem; font-weight: 700; color: var(--pc); line-height: 1; font-variant-numeric: tabular-nums; }
.ep-pill .ep-pill-l { font-size: .76rem; color: var(--muted); margin-top: 4px; text-align: center; }
@media (max-width: 575.98px) {
    .ep-choice { gap: 14px; padding: 14px; }
    .ep-choice-icon { width: 48px; height: 48px; font-size: 1.25rem; }
    .ep-choice-title { font-size: 1.02rem; }
    .ep-h1, .ep-page-head .ep-title { font-size: 1.4rem; }
    .ep-kv-row { grid-template-columns: 104px minmax(0, 1fr); padding: 9px 14px; }
    .ep-row { grid-template-columns: minmax(0, 1fr) auto; padding: 11px 14px; }
    .ep-row .ep-id { display: none; }
}

/* ---------- 6. Login ---------- */
.ep-login { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); background: var(--bg); }
.ep-login-art { background: var(--side-bg); color: var(--side-text); padding: 44px 56px; display: flex; flex-direction: column; justify-content: space-between; gap: 40px; position: relative; overflow: hidden; }
.ep-login-art::after { content: ""; position: absolute; width: 520px; height: 520px; right: -180px; bottom: -220px; border-radius: 50%; background: radial-gradient(closest-side, rgba(139,128,255,.28), transparent); pointer-events: none; }
.ep-login-art h1 { font-family: var(--font-display); color: #fff; font-size: clamp(2rem, 3.4vw, 2.9rem); font-weight: 700; letter-spacing: -.025em; line-height: 1.08; margin: 0 0 14px; max-width: 15ch; text-wrap: balance; }
.ep-login-art p { font-size: 1.02rem; max-width: 42ch; margin: 0; }
.ep-login-feats { list-style: none; padding: 0; margin: 28px 0 0; display: flex; flex-direction: column; gap: 12px; position: relative; z-index: 1; }
.ep-login-feats li { display: flex; gap: 12px; align-items: center; font-size: .95rem; }
.ep-login-feats li span.ic { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: rgba(255,255,255,.06); color: var(--side-accent); flex: 0 0 auto; }
.ep-login-feats svg.lucide { width: 16px; height: 16px; }
.ep-login-art small { color: var(--side-dim); position: relative; z-index: 1; }
.ep-login-form { display: flex; align-items: center; justify-content: center; padding: 40px 24px; }
.ep-login-box { width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: 22px; }
.ep-login-box h2 { font-family: var(--font-display); font-size: 1.7rem; font-weight: 700; letter-spacing: -.02em; margin: 0; }
.ep-login-box .form-control { height: 44px; }
.ep-pass { position: relative; }
.ep-pass .form-control { padding-right: 44px; }
.ep-pass button { position: absolute; right: 4px; top: 4px; width: 36px; height: 36px; border: 0; background: transparent; color: var(--muted); border-radius: 7px; display: grid; place-items: center; }
.ep-pass button:hover { color: var(--text); background: var(--surface-2); }
@media (max-width: 860px) {
    .ep-login { grid-template-columns: minmax(0, 1fr); }
    .ep-login-art { padding: 28px 20px; gap: 0; }
    .ep-login-art .hide-sm { display: none; }
    .ep-login-art h1 { font-size: 1.6rem; margin: 18px 0 0; }
}

/* ---------- 7. Formulários, listas e fluxo de abertura ---------- */
.ep-flow { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: .86rem; color: var(--faint); font-weight: 500; }
.ep-flow li { display: flex; align-items: center; gap: 8px; }
.ep-flow li + li::before { content: ""; width: 28px; height: 2px; border-radius: 2px; background: var(--border-strong); margin-right: 2px; }
.ep-flow li.done + li::before { background: var(--primary); }
.ep-flow .n { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: .78rem; font-weight: 700; border: 2px solid var(--border-strong); background: var(--surface); color: var(--muted); }
.ep-flow .n svg.lucide { width: 13px; height: 13px; stroke-width: 3; }
.ep-flow li.done { color: var(--muted); }
.ep-flow li.done .n { background: var(--primary); border-color: var(--primary); color: var(--primary-ink); }
.ep-flow li.now { color: var(--text); font-weight: 600; }
.ep-flow li.now .n { border-color: var(--primary); color: var(--primary); box-shadow: 0 0 0 4px var(--primary-soft); }
a.ep-flow-link { color: inherit; }
a.ep-flow-link:hover { color: var(--primary); }

.ep-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 18px; }
.ep-form-grid > .full { grid-column: 1 / -1; }
@media (max-width: 767.98px) { .ep-form-grid { grid-template-columns: minmax(0, 1fr); } }
.ep-form-grid .form-text { margin-top: 4px; font-size: .8rem; }
.ep-req { color: var(--danger); margin-left: 2px; }
.ep-form-grid fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.ep-form-grid legend { font-size: .85rem; font-weight: 600; margin-bottom: .4rem; float: none; width: auto; padding: 0; }

.ep-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.ep-opt { --c: var(--primary); position: relative; display: flex; flex-direction: column; gap: 4px; padding: 11px 12px; border: 1px solid var(--border-strong); border-radius: 10px; background: var(--surface); cursor: pointer; margin: 0; transition: border-color .15s ease, background-color .15s ease; }
.ep-opt input { position: absolute; opacity: 0; pointer-events: none; }
.ep-opt:hover { border-color: var(--c); }
.ep-opt:has(input:checked) { border-color: var(--c); background: color-mix(in srgb, var(--c) 9%, var(--surface)); box-shadow: inset 0 0 0 1px var(--c); }
.ep-opt:has(input:focus-visible) { box-shadow: 0 0 0 3px var(--focus); }
.ep-opt small { color: var(--muted); font-size: .78rem; line-height: 1.35; }
.ep-opt[data-priority="low"] { --c: var(--pr-low); }
.ep-opt[data-priority="medium"] { --c: var(--pr-medium); }
.ep-opt[data-priority="high"] { --c: var(--pr-high); }
.ep-opt[data-priority="urgent"] { --c: var(--pr-urgent); }
.is-invalid-group .ep-opt { border-color: var(--danger); }

.ep-drop { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; padding: 22px 16px; border: 1.5px dashed var(--border-strong); border-radius: 12px; background: var(--surface-2); color: var(--muted); cursor: pointer; margin: 0; transition: border-color .15s ease, background-color .15s ease; }
.ep-drop:hover, .ep-drop.is-over { border-color: var(--primary); background: var(--primary-soft); color: var(--text); }
.ep-drop .ic { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; background: var(--surface); border: 1px solid var(--border); color: var(--primary); }
.ep-drop b { color: var(--text); font-weight: 600; }
.ep-drop small { font-size: .78rem; }
.ep-filelist { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.ep-filelist:empty { display: none; }

.ep-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ep-chips:empty { display: none; }
.ep-chip { display: inline-flex; align-items: center; gap: 7px; padding: 3px 3px 3px 3px; border-radius: 20px; background: var(--surface-2); border: 1px solid var(--border); font-size: .86rem; }
.ep-chip button { border: 0; background: none; color: var(--faint); width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; padding: 0; }
.ep-chip button:hover { color: var(--danger); background: var(--surface); }
.ep-chip button svg.lucide { width: 13px; height: 13px; }

.ep-suggest-wrap { position: relative; }
.ep-suggest { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 1060; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow-pop); padding: 4px; max-height: 260px; overflow-y: auto; }
.ep-suggest:empty { display: none; }
.ep-suggest button { display: flex; align-items: center; gap: 10px; width: 100%; border: 0; background: none; padding: 7px 8px; border-radius: 7px; text-align: left; color: var(--text); font-size: .9rem; }
.ep-suggest button:hover, .ep-suggest button:focus { background: var(--surface-2); outline: 0; }
.ep-suggest small { color: var(--muted); display: block; font-size: .78rem; }
.ep-suggest .none { padding: 8px; color: var(--muted); font-size: .86rem; }

.ep-callout { --c: var(--st-await); display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 16px; border-radius: var(--r); border: 1px solid color-mix(in srgb, var(--c) 35%, var(--border)); background: color-mix(in srgb, var(--c) 8%, var(--surface)); color: var(--text); }
.ep-callout .ic { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; color: var(--c); background: color-mix(in srgb, var(--c) 15%, var(--surface)); flex: 0 0 auto; }
.ep-callout .btn { margin-left: auto; }

th[data-sort] { cursor: pointer; user-select: none; }
th[data-sort]:hover { color: var(--text); }
th[data-sort]::after { content: "↕"; margin-left: 5px; color: var(--faint); font-size: .85em; }
th[aria-sort="ascending"]::after { content: "↑"; color: var(--primary); }
th[aria-sort="descending"]::after { content: "↓"; color: var(--primary); }

.ep-filters .form-control { width: 170px; background-color: var(--surface-2); }
.ep-filters .form-control.is-set { background-color: var(--primary-soft); border-color: transparent; font-weight: 600; }
a.ep-kpi.is-active { border-color: var(--c); box-shadow: inset 0 0 0 1px var(--c); }
.ep-tag-copy { color: var(--st-progress); border-color: color-mix(in srgb, var(--st-progress) 30%, var(--border)); background: color-mix(in srgb, var(--st-progress) 8%, var(--surface)); }

.ep-mlist { display: flex; flex-direction: column; gap: 10px; }
.ep-mcard { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); box-shadow: var(--shadow); color: var(--text); }
.ep-mcard:hover { border-color: var(--border-strong); color: var(--text); }
.ep-mcard .top { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.ep-mcard .title { font-weight: 600; overflow-wrap: anywhere; }
.ep-mcard .meta { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; font-size: .82rem; color: var(--muted); }

@media (min-width: 1200px) { .ep-sticky { position: sticky; top: 76px; } }

/* ---------- Backlog (quadro Kanban) ---------- */
.ep-board { display: grid; grid-template-columns: repeat(4, minmax(260px, 1fr)); gap: 14px; overflow-x: auto; padding-bottom: 6px; align-items: start; }
.ep-col { --c: var(--primary); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r); display: flex; flex-direction: column; min-width: 0; max-height: calc(100vh - 300px); min-height: 320px; transition: border-color .15s ease, box-shadow .15s ease; }
.ep-col.is-over { border-color: var(--c); box-shadow: inset 0 0 0 1px var(--c); }
.ep-col-h { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--border); font-weight: 600; font-size: .9rem; }
.ep-col-h .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c); flex: 0 0 auto; }
.ep-col-h .count { margin-left: auto; font-size: .78rem; font-weight: 600; color: var(--muted); background: var(--surface); border: 1px solid var(--border); padding: 0 8px; border-radius: 20px; font-variant-numeric: tabular-nums; }
.ep-col-items { flex: 1; overflow-y: auto; padding: 10px; display: flex; flex-direction: column; gap: 8px; min-height: 90px; scrollbar-width: thin; }
.ep-col-items:not(:has(.ep-kcard:not([hidden])))::after { content: "Nenhuma tarefa aqui"; display: block; text-align: center; padding: 22px 10px; color: var(--faint); font-size: .84rem; border: 1.5px dashed var(--border-strong); border-radius: 10px; }
.ep-kcard { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; cursor: grab; box-shadow: var(--shadow); }
.ep-kcard:hover { border-color: var(--border-strong); }
.ep-kcard.is-dragging { opacity: .45; cursor: grabbing; }
.ep-kcard-top { display: flex; align-items: center; gap: 8px; min-height: 28px; }
.ep-kcard-top .ep-prio { font-size: .8rem; }
.ep-kcard-actions { margin-left: auto; display: flex; gap: 2px; opacity: .45; transition: opacity .15s ease; }
.ep-kcard:hover .ep-kcard-actions, .ep-kcard:focus-within .ep-kcard-actions { opacity: 1; }
@media (hover: none) { .ep-kcard-actions { opacity: 1; } }
svg.ep-i { width: 16px; height: 16px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -.2em; }
.ep-tag svg.ep-i, .ep-kcard-meta svg.ep-i { width: 13px; height: 13px; }
.ep-kcard-title { all: unset; font-weight: 600; font-size: .92rem; line-height: 1.35; color: var(--text); cursor: pointer; overflow-wrap: anywhere; }
.ep-kcard-title:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 4px; }
.ep-kcard[data-status="done"] .ep-kcard-title { color: var(--muted); }
.ep-kcard-desc { margin: 0; font-size: .84rem; color: var(--muted); line-height: 1.45; white-space: pre-line; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ep-kcard.is-expanded .ep-kcard-desc { display: block; -webkit-line-clamp: unset; }
.ep-kcard-meta { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; font-size: .78rem; color: var(--muted); padding-top: 6px; border-top: 1px solid var(--border); }
.ep-kcard-meta:empty { display: none; }
.ep-kcard-meta > span { display: inline-flex; align-items: center; gap: 4px; }
.ep-kcard-meta svg.lucide { width: 13px; height: 13px; }
@media (max-width: 991.98px) { .ep-col { max-height: none; } }

/* ---------- Abertura de chamado: grade de sistemas ---------- */
.ep-tema-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.ep-tema { aspect-ratio: 1 / 1; max-width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 16px 12px; text-align: center; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); box-shadow: var(--shadow); color: var(--text); transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease; min-width: 0; }
.ep-tema:hover, .ep-tema:focus-visible { transform: translateY(-2px); border-color: var(--ep-accent); box-shadow: var(--shadow-pop); color: var(--text); }
.ep-tema-icon { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; color: var(--ep-accent); background: color-mix(in srgb, var(--ep-accent) 13%, var(--surface)); margin-bottom: 4px; }
.ep-tema-icon svg.lucide { width: 26px; height: 26px; }
.ep-tema-name { font-weight: 700; font-size: .95rem; line-height: 1.25; overflow-wrap: anywhere; }
.ep-tema-desc { font-size: .8rem; color: var(--muted); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 575.98px) {
    .ep-tema-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .ep-tema { padding: 12px 8px; }
    .ep-tema-icon { width: 44px; height: 44px; }
}

/* Seletor de ícone do cadastro de sistemas */
.ep-icon-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); gap: 6px; max-height: 250px; overflow-y: auto; padding: 4px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); }
.ep-icon-opt { position: relative; margin: 0; }
.ep-icon-opt input { position: absolute; opacity: 0; pointer-events: none; }
.ep-icon-opt span { display: grid; place-items: center; aspect-ratio: 1 / 1; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); color: var(--muted); cursor: pointer; transition: border-color .12s ease, color .12s ease; }
.ep-icon-opt span svg.lucide { width: 20px; height: 20px; }
.ep-icon-opt:hover span { border-color: var(--border-strong); color: var(--text); }
.ep-icon-opt input:checked + span { border-color: var(--primary); color: var(--primary); background: var(--primary-soft); box-shadow: inset 0 0 0 1px var(--primary); }
.ep-icon-opt input:focus-visible + span { box-shadow: 0 0 0 3px var(--focus); }
.is-invalid-group.ep-icon-picker { border-color: var(--danger); }

/* Botões rápidos de mudança de status (cabeçalho do chamado) */
.btn-quick {
    --c: var(--muted);
    --bs-btn-color: var(--text); --bs-btn-bg: var(--surface);
    --bs-btn-border-color: color-mix(in srgb, var(--c) 45%, var(--border));
    --bs-btn-hover-color: var(--text); --bs-btn-hover-bg: color-mix(in srgb, var(--c) 12%, var(--surface)); --bs-btn-hover-border-color: var(--c);
    --bs-btn-active-color: var(--text); --bs-btn-active-bg: color-mix(in srgb, var(--c) 18%, var(--surface)); --bs-btn-active-border-color: var(--c);
}
.btn-quick .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--c); flex: 0 0 auto; box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 20%, transparent); }

/* ---------- Administração ---------- */
.ep-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.ep-tile { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); color: var(--text); box-shadow: var(--shadow); transition: border-color .15s ease; }
.ep-tile:hover { border-color: var(--primary); color: var(--text); }
.ep-tile .ic { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; color: var(--primary); background: var(--primary-soft); flex: 0 0 auto; }
.ep-tile b { display: block; font-weight: 600; }
.ep-tile small { color: var(--muted); font-size: .8rem; }
.ep-icon-chip { --c: var(--primary); width: 34px; height: 34px; border-radius: 9px; display: inline-grid; place-items: center; color: var(--c); background: color-mix(in srgb, var(--c) 14%, var(--surface)); flex: 0 0 auto; }
.ep-icon-chip.lg { width: 48px; height: 48px; border-radius: 12px; font-size: 1.25rem; }
.ep-swatch { --c: var(--st-closed); width: 14px; height: 14px; border-radius: 4px; background: var(--c); display: inline-block; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); flex: 0 0 auto; }
.ep-switches { display: flex; flex-direction: column; }
.ep-switch { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; border-top: 1px solid var(--border); }
.ep-switch:first-child { border-top: 0; padding-top: 0; }
.ep-switch:last-child { padding-bottom: 0; }
.ep-switch b { display: block; font-weight: 600; }
.ep-switch small { color: var(--muted); }
.ep-switch .form-check-input { width: 2.6em; height: 1.4em; margin: 0; cursor: pointer; }
.ep-rank { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px 18px; border-top: 1px solid var(--border); }
.ep-rank:first-child { border-top: 0; }
.ep-rank .pos { color: var(--faint); font-family: var(--font-mono); font-size: .8rem; }
.ep-rank .ep-track { margin-top: 4px; }
.ep-qr { display: grid; place-items: center; min-height: 260px; background: var(--surface-2); border: 1.5px dashed var(--border-strong); border-radius: var(--r); padding: 16px; text-align: center; color: var(--muted); }
.ep-qr img { max-width: 260px; width: 100%; background: #fff; padding: 10px; border-radius: 10px; }
.ep-preview { border: 1.5px dashed var(--border-strong); border-radius: var(--r); padding: 14px; background: var(--surface-2); }
.ep-preview .ep-choice { box-shadow: none; pointer-events: none; }
.ep-dl-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px 24px; margin: 0; }
.ep-dl-grid dt { font-size: .8rem; color: var(--muted); font-weight: 500; }
.ep-dl-grid dd { margin: 2px 0 0; font-weight: 600; overflow-wrap: anywhere; }

/* ---------- Tarefas diárias ---------- */
.ep-datenav { display: inline-flex; align-items: center; gap: 2px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 3px; }
.ep-datenav .form-control { border: 0; background: transparent; width: auto; height: 30px; padding: 0 6px; box-shadow: none; font-variant-numeric: tabular-nums; }
.ep-datenav .form-control:focus { box-shadow: none; }
.ep-clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: normal; max-width: 420px; }
.ep-cat { --c: var(--st-closed); display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; font-weight: 600; color: var(--c); background: color-mix(in srgb, var(--c) 13%, var(--surface)); padding: 2px 9px; border-radius: 6px; white-space: nowrap; }
.ep-cat i { font-size: .75rem; }
.ep-status-select { --c: var(--st-closed); width: auto; min-width: 150px; font-weight: 600; color: var(--c); background-color: color-mix(in srgb, var(--c) 10%, var(--surface)); border-color: color-mix(in srgb, var(--c) 35%, var(--border)); }
.ep-status-select:focus { color: var(--c); background-color: color-mix(in srgb, var(--c) 10%, var(--surface)); }
.ep-status-select[data-status="in_progress"] { --c: var(--st-progress); }
.ep-status-select[data-status="completed"] { --c: var(--st-resolved); }
.ep-icon-actions { display: inline-flex; gap: 2px; justify-content: flex-end; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }