/* ============================================================
   Brabo CRM — Protótipo (HTML/CSS/JS)
   Estética herdada do AppArtes (sidebar escura + acento vinho),
   porém com fundo PRETO puro na barra para diferenciar dos demais
   apps (App Compras / App Artes usam #1a1a1a).
   ============================================================ */

:root {
    --sidebar-width: 264px;
    --sidebar-collapsed-width: 74px;
    --topbar-height: 66px;

    /* Marca Boi Brabo */
    --brand: #8b0000;
    --brand-hover: #a60000;
    --brand-glow: rgba(198, 40, 40, 0.55);

    /* Sidebar PRETA (diferente do #1a1a1a dos outros apps) */
    --sidebar-bg: #000000;
    --sidebar-bg-2: #0b0b0d;
    --sidebar-hover: #17171b;

    --up: #16a34a;
    --up-soft: #dcfce7;
    --down: #dc2626;
    --down-soft: #fee2e2;

    --ink: #1f2430;
    --muted: #6b7280;
    --line: #eceef2;
    --bg: #f4f5f8;

    --radius: 16px;
    --shadow-sm: 0 2px 10px rgba(20, 20, 40, 0.05);
    --shadow-md: 0 12px 34px rgba(20, 20, 40, 0.10);
    --shadow-lg: 0 24px 60px rgba(20, 20, 40, 0.18);
}

* { box-sizing: border-box; }

body {
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    background:
        radial-gradient(1200px 600px at 100% -5%, #fff2f2 0%, rgba(255,255,255,0) 55%),
        var(--bg);
    color: var(--ink);
    margin: 0;
    -webkit-font-smoothing: antialiased;
}

/* ============================== SIDEBAR ============================== */
.sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: var(--sidebar-width);
    background: linear-gradient(185deg, var(--sidebar-bg) 0%, var(--sidebar-bg-2) 100%);
    z-index: 1000;
    overflow-y: auto;
    overflow-x: hidden;
    transition: width .3s ease;
    border-right: 1px solid rgba(255,255,255,.05);
}
.sidebar::-webkit-scrollbar { width: 6px; }
.sidebar::-webkit-scrollbar-thumb { background: #222; border-radius: 6px; }

.sidebar-logo {
    padding: 22px 20px 18px;
    text-align: center;
    border-bottom: 1px solid rgba(255,255,255,.07);
    position: relative;
}
.sidebar-logo img { max-width: 150px; transition: all .3s ease; }
.sidebar.collapsed .sidebar-logo { padding: 22px 10px 16px; }
.sidebar.collapsed .sidebar-logo img { max-width: 40px; }

/* Badge de identificação do sistema */
.sidebar-badge-sistema {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    padding: 3px 16px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--brand), #c62828);
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .10em;
    text-transform: uppercase;
    white-space: nowrap;
    box-shadow: 0 6px 18px var(--brand-glow);
}
.sidebar-badge-sistema::before {
    content: "";
    width: 7px; height: 7px; border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(255,255,255,.25);
}
.sidebar.collapsed .sidebar-badge-sistema { display: none; }

.sidebar-menu { padding: 16px 0 30px; }

.menu-section {
    padding: 20px 24px 8px;
    color: #5c5c66;
    font-size: .70rem;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 1.4px;
    overflow: hidden;
    white-space: nowrap;
}
.sidebar.collapsed .menu-section {
    font-size: 0; height: 15px; padding: 18px 10px 8px;
    border-top: 1px solid rgba(255,255,255,.08); margin: 0 12px;
}

.menu-item {
    padding: 12px 24px;
    color: #b6b6be;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 2px;
    transition: all .22s;
    border-left: 3px solid transparent;
    position: relative;
    white-space: nowrap;
    cursor: pointer;
}
.menu-item i { width: 30px; font-size: 1.12rem; flex-shrink: 0; }
.menu-item span { transition: opacity .3s ease; }
.menu-item:hover { background: var(--sidebar-hover); color: #fff; }
.menu-item.active {
    background: linear-gradient(90deg, rgba(139,0,0,.28), rgba(139,0,0,0));
    color: #fff;
    border-left-color: var(--brand);
}
.menu-item.active i { color: #ff6b6b; }
.menu-item .menu-badge {
    margin-left: auto;
    background: var(--brand);
    color: #fff;
    font-size: .66rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
}

.sidebar.collapsed .menu-item { padding: 12px 22px; justify-content: center; }
.sidebar.collapsed .menu-item span,
.sidebar.collapsed .menu-item .menu-badge { display: none; }

.sidebar-foot {
    padding: 16px 22px;
    color: #55555f;
    font-size: .72rem;
    line-height: 1.5;
    border-top: 1px solid rgba(255,255,255,.07);
}
.sidebar.collapsed .sidebar-foot { display: none; }

/* ============================== MAIN ============================== */
.main-content {
    margin-left: var(--sidebar-width);
    min-height: 100vh;
    transition: margin-left .3s ease;
}
.sidebar.collapsed ~ .main-content { margin-left: var(--sidebar-collapsed-width); }

.topbar {
    background: rgba(255,255,255,.85);
    backdrop-filter: saturate(160%) blur(10px);
    height: var(--topbar-height);
    box-shadow: var(--shadow-sm);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 26px;
    position: sticky;
    top: 0;
    z-index: 900;
}
.topbar-left { display: flex; align-items: center; gap: 6px; }
.sidebar-toggle {
    background: none; border: none; color: #444; font-size: 1.45rem;
    cursor: pointer; padding: 6px 10px; border-radius: 10px; transition: .2s;
    display: flex; align-items: center;
}
.sidebar-toggle:hover { background: #f0f0f3; color: var(--brand); }
.page-title { font-size: 1.32rem; font-weight: 700; margin: 0 0 0 8px; letter-spacing: -.01em; }

.topbar-right { display: flex; align-items: center; gap: 14px; }
.franquia-badge {
    display: flex; align-items: center; gap: 8px;
    background: #f4f5f8; color: #333; padding: 7px 14px; border-radius: 999px;
    font-weight: 600; font-size: .88rem; border: 1px solid #e6e7ec;
}
.franquia-badge i { color: var(--brand); }
.user-avatar {
    width: 40px; height: 40px; border-radius: 50%;
    background: linear-gradient(135deg, var(--brand), #c62828);
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-weight: 700;
}

.content-area { padding: 26px; }

/* Aviso de protótipo */
.proto-banner {
    display: flex; align-items: center; gap: 12px;
    background: linear-gradient(90deg, #fffbe6, #ffffff);
    border: 1px dashed #f0c000;
    border-radius: 12px;
    padding: 10px 16px;
    color: #7a5b00;
    font-size: .84rem;
    margin-bottom: 22px;
}
.proto-banner i { font-size: 1.1rem; }
.proto-banner b { color: #5c4400; }

/* ============================== VIEWS ============================== */
.view { display: none; animation: fadeUp .4s ease both; }
.view.active { display: block; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* Toolbar de período */
.period-toolbar {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    margin-bottom: 22px;
}
.seg {
    display: inline-flex; background: #fff; border-radius: 12px;
    padding: 5px; box-shadow: var(--shadow-sm); gap: 2px;
}
.seg button {
    border: none; background: transparent; color: var(--muted);
    font-weight: 600; font-size: .86rem; padding: 8px 16px; border-radius: 9px;
    cursor: pointer; transition: .2s; white-space: nowrap;
}
.seg button:hover { color: var(--ink); }
.seg button.active {
    background: linear-gradient(135deg, var(--brand), #c62828);
    color: #fff; box-shadow: 0 6px 16px var(--brand-glow);
}
.period-meta { color: var(--muted); font-size: .84rem; margin-left: auto; display:flex; align-items:center; gap:8px;}
.live-dot { width:8px;height:8px;border-radius:50%;background:var(--up);box-shadow:0 0 0 4px rgba(22,163,74,.15);animation:pulse 1.6s infinite;}
@keyframes pulse { 0%,100%{opacity:1;} 50%{opacity:.35;} }

/* ============================== CARDS / KPIs ============================== */
.grid { display: grid; gap: 20px; }
.kpi-grid { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1200px){ .kpi-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px){ .kpi-grid { grid-template-columns: 1fr; } }

.card {
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
    box-shadow: var(--shadow-sm); transition: transform .25s, box-shadow .25s;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.card-pad { padding: 20px 22px; }
.card-head {
    display:flex; align-items:center; justify-content:space-between;
    padding: 18px 22px; border-bottom: 1px solid var(--line);
}
.card-head h3 { margin:0; font-size:1.02rem; font-weight:700; display:flex; align-items:center; gap:9px; }
.card-head .sub { color: var(--muted); font-size:.8rem; font-weight:500; }

.kpi {
    position: relative; overflow: hidden;
}
.kpi .kpi-top { display:flex; align-items:center; justify-content:space-between; }
.kpi .ico {
    width: 44px; height: 44px; border-radius: 12px; display:flex; align-items:center;
    justify-content:center; font-size: 1.25rem; color:#fff;
}
.kpi .kpi-label { color: var(--muted); font-size: .82rem; font-weight:600; margin: 16px 0 4px; }
.kpi .kpi-value { font-size: 1.9rem; font-weight: 800; letter-spacing: -.02em; line-height:1.1; }
.kpi .kpi-value small { font-size: .95rem; font-weight:700; color: var(--muted); }
.delta {
    display:inline-flex; align-items:center; gap:4px; font-weight:700; font-size:.8rem;
    padding: 3px 9px; border-radius: 999px; margin-top: 10px;
}
.delta.up { color: var(--up); background: var(--up-soft); }
.delta.down { color: var(--down); background: var(--down-soft); }
.delta .cmp { color: var(--muted); font-weight:600; margin-left:4px; }

/* sparkline behind */
.kpi .spark { margin-top: 10px; height: 34px; }

/* Hero: clientes identificados no PDV */
.hero-pdv {
    grid-column: span 2;
    background:
        radial-gradient(600px 300px at 110% -20%, rgba(198,40,40,.35), transparent 60%),
        linear-gradient(135deg, #16161a, #26141a);
    color: #fff; border: none;
}
@media (max-width:1200px){ .hero-pdv { grid-column: span 2; } }
@media (max-width:640px){ .hero-pdv { grid-column: span 1; } }
.hero-pdv .card-pad { display:flex; gap: 22px; align-items:center; }
.hero-pdv .hero-left { flex: 1; }
.hero-pdv .tag {
    display:inline-flex; align-items:center; gap:6px; font-size:.74rem; font-weight:700;
    text-transform:uppercase; letter-spacing:.08em; color:#ffb4b4;
    background: rgba(255,255,255,.08); padding:4px 10px; border-radius:999px;
}
.hero-pdv h2 { font-size: 2.6rem; font-weight: 800; margin:.35em 0 .1em; letter-spacing:-.02em; }
.hero-pdv p { color: #c9c9d2; margin:0; font-size:.9rem; }
.hero-pdv .hero-chart { width: 168px; height: 168px; position: relative; flex-shrink:0; }
.hero-pdv .hero-chart .center {
    position:absolute; inset:0; display:flex; flex-direction:column;
    align-items:center; justify-content:center; pointer-events:none;
}
.hero-pdv .hero-chart .center b { font-size:1.7rem; font-weight:800; }
.hero-pdv .hero-chart .center small { color:#c9c9d2; font-size:.72rem; }

/* Chart card bodies */
.chart-wrap { padding: 18px 22px 22px; }
.chart-box { position: relative; height: 300px; }
.chart-box.sm { height: 240px; }

/* ============================== RFV ============================== */
.rfv-grid { grid-template-columns: 1.15fr .85fr; }
@media (max-width: 992px){ .rfv-grid { grid-template-columns: 1fr; } }

.rfv-segments { display:grid; grid-template-columns: repeat(2,1fr); gap: 12px; padding: 18px 22px 22px; }
@media (max-width:520px){ .rfv-segments { grid-template-columns:1fr; } }
.seg-card {
    border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px;
    display:flex; align-items:center; gap: 12px; cursor: default; transition:.2s;
    background: #fff;
}
.seg-card:hover { box-shadow: var(--shadow-sm); transform: translateY(-2px); }
.seg-card .dot { width: 12px; height: 12px; border-radius: 4px; flex-shrink:0; }
.seg-card .seg-name { font-weight: 700; font-size: .92rem; }
.seg-card .seg-desc { color: var(--muted); font-size: .74rem; }
.seg-card .seg-count { margin-left:auto; text-align:right; }
.seg-card .seg-count b { font-size: 1.25rem; font-weight: 800; }
.seg-card .seg-count span { display:block; color: var(--muted); font-size:.72rem; }

.icon-btn {
    border:1px solid var(--line); background:#fff; width:38px; height:38px; border-radius:10px;
    display:inline-flex; align-items:center; justify-content:center; cursor:pointer; color:#555;
    transition:.2s;
}
.icon-btn:hover { color: var(--brand); border-color: var(--brand); transform: rotate(35deg); }

/* ============================== RANKINGS ============================== */
.rank-grid { grid-template-columns: 1fr 1fr; }
@media (max-width: 992px){ .rank-grid { grid-template-columns: 1fr; } }
.rank-list { padding: 8px 12px 14px; }
.rank-row {
    display:flex; align-items:center; gap:14px; padding: 12px 12px; border-radius: 12px;
    transition:.2s;
}
.rank-row:hover { background: #fafafc; }
.rank-pos {
    width: 30px; height: 30px; border-radius: 9px; flex-shrink:0;
    display:flex; align-items:center; justify-content:center; font-weight:800; font-size:.86rem;
    background:#f1f1f4; color:#555;
}
.rank-row:nth-child(1) .rank-pos { background: linear-gradient(135deg,#ffd54a,#ff9800); color:#5c3a00; }
.rank-row:nth-child(2) .rank-pos { background: linear-gradient(135deg,#e3e7ee,#b9c0cc); color:#3a4150; }
.rank-row:nth-child(3) .rank-pos { background: linear-gradient(135deg,#f0b483,#c9743a); color:#4a2600; }
.rank-thumb {
    width: 42px; height: 42px; border-radius: 10px; flex-shrink:0; color:#fff;
    display:flex; align-items:center; justify-content:center; font-size:1.1rem; font-weight:700;
}
.rank-main { flex:1; min-width:0; }
.rank-main .t { font-weight:700; font-size:.92rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rank-main .s { color: var(--muted); font-size:.78rem; }
.rank-val { text-align:right; }
.rank-val b { font-weight:800; }
.rank-bar { height:6px; border-radius:999px; background:#f0f0f4; margin-top:6px; overflow:hidden; }
.rank-bar i { display:block; height:100%; border-radius:999px; background:linear-gradient(90deg,var(--brand),#ff6b6b); }

/* Avatar palette helpers */
.bg-a{background:linear-gradient(135deg,#8b0000,#c62828);}
.bg-b{background:linear-gradient(135deg,#1e3a8a,#3b82f6);}
.bg-c{background:linear-gradient(135deg,#065f46,#10b981);}
.bg-d{background:linear-gradient(135deg,#7c2d12,#ea580c);}
.bg-e{background:linear-gradient(135deg,#4c1d95,#8b5cf6);}
.bg-f{background:linear-gradient(135deg,#0e7490,#06b6d4);}

/* ============================== SORTEADOR ============================== */
.draw-stage {
    background: radial-gradient(900px 500px at 50% -10%, #2a0f14, #0a0a0c 60%);
    border-radius: 24px; color:#fff; padding: 34px; text-align:center;
    position: relative; overflow: hidden; box-shadow: var(--shadow-lg);
    min-height: 440px; display:flex; flex-direction:column; justify-content:center; align-items:center;
}
.draw-stage::before {
    content:""; position:absolute; inset:0;
    background: radial-gradient(circle at 50% 40%, rgba(198,40,40,.22), transparent 55%);
    pointer-events:none;
}
.draw-title { font-size: 1.1rem; letter-spacing:.18em; text-transform:uppercase; color:#ff9d9d; font-weight:700; }
.draw-sub { color:#b9b9c4; margin: 6px 0 26px; }
.draw-number {
    font-size: clamp(4rem, 16vw, 12rem); font-weight: 900; line-height:1;
    letter-spacing:-.03em;
    background: linear-gradient(135deg,#fff, #ffcaca 60%, #ff5b5b);
    -webkit-background-clip:text; background-clip:text; color: transparent;
    text-shadow: 0 0 60px rgba(255,80,80,.35);
    font-variant-numeric: tabular-nums;
    transition: transform .1s;
}
.draw-number.rolling { animation: shake .35s infinite; }
@keyframes shake { 0%,100%{transform:translateY(0)} 25%{transform:translateY(-6px)} 75%{transform:translateY(6px)} }
.draw-winner-name {
    font-size: clamp(1.4rem,4vw,2.4rem); font-weight:800; margin-top: 6px;
    opacity:0; transform: translateY(14px); transition: .5s;
}
.draw-winner-name.show { opacity:1; transform:none; }
.draw-actions { display:flex; gap: 14px; justify-content:center; flex-wrap:wrap; margin-top: 30px; }
.btn-xl {
    border:none; border-radius: 14px; padding: 16px 34px; font-size: 1.05rem; font-weight:800;
    cursor:pointer; transition:.2s; display:inline-flex; align-items:center; gap:10px;
}
.btn-draw { background: linear-gradient(135deg,#e11d1d,#8b0000); color:#fff; box-shadow: 0 12px 30px rgba(225,29,29,.4); }
.btn-draw:hover { transform: translateY(-2px); box-shadow: 0 16px 40px rgba(225,29,29,.55); }
.btn-draw:disabled { opacity:.5; cursor:not-allowed; transform:none; }
.btn-ghost-w { background: rgba(255,255,255,.1); color:#fff; border:1px solid rgba(255,255,255,.2); }
.btn-ghost-w:hover { background: rgba(255,255,255,.18); }

.draw-side { }
.winners-list { padding: 6px 10px 14px; max-height: 420px; overflow:auto; }
.winner-chip {
    display:flex; align-items:center; gap:12px; padding:12px; border-radius:12px;
    border:1px solid var(--line); margin-bottom:10px; animation: fadeUp .4s both;
}
.winner-chip .wnum {
    background: linear-gradient(135deg,var(--brand),#c62828); color:#fff; font-weight:800;
    border-radius:9px; padding:6px 10px; font-size:.9rem; min-width:52px; text-align:center;
}
.winner-chip .wname { font-weight:700; }
.winner-chip .wmeta { color:var(--muted); font-size:.76rem; }
.winner-chip .wrm { margin-left:auto; border:none; background:#fff; color:#bbb; cursor:pointer; font-size:1.1rem; }
.winner-chip .wrm:hover { color: var(--down); }

.stat-pill { display:flex; gap:16px; flex-wrap:wrap; margin-bottom:16px; }
.stat-pill .p { background:#fff; border:1px solid var(--line); border-radius:12px; padding:12px 16px; flex:1; text-align:center; }
.stat-pill .p b { display:block; font-size:1.5rem; font-weight:800; }
.stat-pill .p span { color:var(--muted); font-size:.76rem; }

/* ============================== CAMPANHAS ============================== */
.camp-grid { grid-template-columns: repeat(3,1fr); }
@media (max-width:992px){ .camp-grid { grid-template-columns:1fr; } }
.camp-card { position:relative; overflow:hidden; }
.camp-card .band { height:6px; }
.camp-card .cc-body { padding: 20px 22px; }
.camp-card .cc-icon {
    width:48px;height:48px;border-radius:13px;display:flex;align-items:center;justify-content:center;
    color:#fff;font-size:1.4rem;margin-bottom:14px;
}
.camp-card h3 { margin:0 0 6px; font-size:1.06rem; font-weight:700; }
.camp-card p { color:var(--muted); font-size:.86rem; margin:0 0 16px; min-height:44px; }
.camp-meta { display:flex; align-items:center; gap:14px; font-size:.8rem; color:var(--muted); margin-bottom:16px; }
.camp-meta b { color:var(--ink); }
.switch { position:relative; display:inline-block; width:46px; height:26px; }
.switch input { display:none; }
.switch .sl { position:absolute; inset:0; background:#d5d7de; border-radius:999px; transition:.25s; cursor:pointer; }
.switch .sl::before { content:""; position:absolute; height:20px; width:20px; left:3px; top:3px; background:#fff; border-radius:50%; transition:.25s; box-shadow:0 2px 6px rgba(0,0,0,.2); }
.switch input:checked + .sl { background: var(--up); }
.switch input:checked + .sl::before { transform: translateX(20px); }

.timeline { padding: 8px 22px 20px; }
.tl-item { display:flex; gap:14px; padding:12px 0; border-bottom:1px dashed var(--line); }
.tl-item:last-child { border-bottom:none; }
.tl-ico { width:38px;height:38px;border-radius:10px;flex-shrink:0;display:flex;align-items:center;justify-content:center;color:#fff; }
.tl-main { flex:1; }
.tl-main .t { font-weight:700; font-size:.9rem; }
.tl-main .s { color:var(--muted); font-size:.8rem; }
.tl-when { color:var(--muted); font-size:.78rem; white-space:nowrap; }

/* ============================== MODAL ============================== */
.modal-back {
    position: fixed; inset:0; background: rgba(12,12,20,.55); backdrop-filter: blur(3px);
    display:none; align-items:center; justify-content:center; z-index: 2000; padding: 20px;
}
.modal-back.show { display:flex; animation: fadeUp .2s; }
.modal-card {
    background:#fff; border-radius: 18px; width: 100%; max-width: 560px; box-shadow: var(--shadow-lg);
    max-height: 90vh; overflow:auto;
}
.modal-card .m-head { padding: 20px 24px; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; }
.modal-card .m-head h3 { margin:0; font-size:1.15rem; font-weight:700; display:flex; align-items:center; gap:9px; }
.modal-card .m-body { padding: 22px 24px; }
.modal-card .m-foot { padding: 16px 24px; border-top:1px solid var(--line); display:flex; justify-content:flex-end; gap:10px; }
.m-close { border:none; background:none; font-size:1.4rem; color:#999; cursor:pointer; line-height:1; }
.m-close:hover { color: var(--down); }

.field { margin-bottom: 18px; }
.field label { display:block; font-weight:600; font-size:.86rem; margin-bottom:8px; }
.field .hint { color: var(--muted); font-size:.78rem; font-weight:500; }
.field .row-in { display:flex; align-items:center; gap:12px; }
.field input[type=range] { flex:1; accent-color: var(--brand); }
.field .valbox {
    min-width:84px; text-align:center; font-weight:800; background:#f4f5f8; border-radius:9px;
    padding:8px 10px; border:1px solid var(--line);
}
.field input[type=text], .field input[type=number], .field select {
    width:100%; padding:11px 13px; border:1px solid var(--line); border-radius:10px; font-size:.92rem;
}
.field input:focus, .field select:focus { outline:none; border-color:var(--brand); box-shadow:0 0 0 3px rgba(139,0,0,.12); }

.btn {
    border:none; border-radius: 10px; padding: 11px 20px; font-weight:700; cursor:pointer; transition:.2s;
    display:inline-flex; align-items:center; gap:8px; font-size:.9rem;
}
.btn-primary { background: linear-gradient(135deg,var(--brand),#c62828); color:#fff; box-shadow:0 8px 20px var(--brand-glow); }
.btn-primary:hover { transform: translateY(-1px); }
.btn-light { background:#f1f1f4; color:#444; }
.btn-light:hover { background:#e6e6ea; }
.btn-danger { background: var(--down); color:#fff; }

/* Textarea for tickets */
.tickets-input {
    width:100%; min-height:120px; border:1px solid var(--line); border-radius:12px; padding:14px;
    font-size:.92rem; font-family:inherit; resize:vertical;
}
.tickets-input:focus { outline:none; border-color:var(--brand); box-shadow:0 0 0 3px rgba(139,0,0,.12); }

.chip {
    display:inline-flex; align-items:center; gap:6px; background:#f4f5f8; border:1px solid var(--line);
    border-radius:999px; padding:5px 12px; font-size:.82rem; font-weight:600; margin:0 6px 8px 0;
}
.chip.on { background: #fdecec; border-color:#f3c0c0; color: var(--brand); }

/* util */
.mt0{margin-top:0}.mb0{margin-bottom:0}
.text-up{color:var(--up)} .text-down{color:var(--down)}
.hstack{display:flex;align-items:center;gap:10px}
.spread{display:flex;align-items:center;justify-content:space-between;gap:12px}
.muted{color:var(--muted)}
.badge-soft{background:#f4f5f8;border:1px solid var(--line);border-radius:999px;padding:3px 11px;font-size:.76rem;font-weight:700;color:#555}