/* ==========================================================================
   FLAMINGO FLOW - app additions.
   theme.css owns the design system: tokens, shell, buttons, cards, tables,
   badges, modals, toasts. Nothing here re-declares any of that. This file is
   only the parts the panel needs that the theme does not ship.

   Note on inline styles: the CSP is "style-src 'self' https://fonts.googleapis.com"
   with no 'unsafe-inline', so style="width:62%" is blocked in this app. Use the
   .pct-* scale near the bottom of this file for any bar fill.
   ========================================================================== */

/* --------------------------------------------------------- 1. a11y + focus */
:focus-visible{outline:2px solid var(--green);outline-offset:2px;border-radius:6px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:-9999px;top:0;z-index:300;background:var(--dark);color:#fff;padding:11px 20px;border-radius:0 0 var(--r) 0;font-size:13px;font-weight:800}
.skip-link:focus{left:0}
body.ff-modal-open{overflow:hidden}

/* ------------------------------------------------------- 2. sidebar extras */
.pnl-brand{display:flex;align-items:center;gap:10px}
.pnl-brand-mark{width:34px;height:34px;border-radius:11px;background:var(--dark);color:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.pnl-brand-txt{font-size:14.5px;font-weight:800;letter-spacing:-.01em;line-height:1.15}
.pnl-brand-txt span{display:block;font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2)}
.pnl-nav-sec{font-size:10.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--muted-2);padding:16px 12px 6px}
.pnl-nav-sec:first-child{padding-top:2px}
.pnl-nav-badge.is-blue{background:var(--blue-bg);color:var(--blue-d)}
.pnl-nav-item.active .pnl-nav-badge.is-blue{background:rgba(255,255,255,.18);color:#fff}
button.pnl-nav-item{width:100%;appearance:none;border:none;background:none;font:inherit;font-size:14.5px;font-weight:700;text-align:left;cursor:pointer}
.pnl-nav-item .kbd{margin-left:auto}
.pnl-nav-foot{padding:14px 0 4px;margin-top:6px;border-top:1px solid var(--border-2)}
a.pnl-plan{display:block;transition:background .12s}
a.pnl-plan:hover{background:#2A261F}
.pnl-user-id{flex:1;min-width:0}
.pnl-user-out{margin:0 0 0 auto}
.pnl-user-out .btn-icon{width:32px;height:32px;border-radius:10px}
.pnl-scrim{position:fixed;inset:0;z-index:55;background:rgba(30,27,22,.42)}
@media(min-width:901px){.pnl-scrim{display:none}}
.menu-btn svg{display:block}

/* ------------------------------------------------------- 3. page scaffold */
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:26px}
.page-head-txt{min-width:0}
.page-head-txt .pnl-eyebrow{display:block;margin-bottom:7px}
.page-head-acts{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.pnl-flashes{margin-bottom:4px}
.pnl-main.wide .pnl-flashes{padding:14px 18px 0;margin:0}

.card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:16px}
.card-title{font-size:16.5px;font-weight:800;letter-spacing:-.01em}
.card-sub{font-size:13px;font-weight:600;color:var(--muted);margin-top:3px}
.card-acts{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.card-sep{height:1px;background:var(--border-2);margin:18px -24px}
.card-tight .card-sep{margin:16px -20px}

.toolbar{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px;margin-bottom:16px}
.toolbar-grow{flex:1;min-width:210px}

/* ---------------------------------------------------------- 4. feedback */
.flash-danger{background:var(--pink);color:var(--pink-ink)}
.flash svg{flex-shrink:0}
.flash-x{margin-left:auto;appearance:none;border:none;background:none;color:inherit;font-size:20px;line-height:1;cursor:pointer;opacity:.55;padding:0 2px}
.flash-x:hover{opacity:1}
.empty-state-icon svg{width:34px;height:34px;color:var(--muted-2);display:block;margin:0 auto}
.empty-state .btn{margin-top:16px}

/* ------------------------------- 5. status pills emitted by statusPill() */
.pill{display:inline-block;border-radius:var(--pill);padding:3px 11px;font-size:12px;font-weight:800;white-space:nowrap;text-transform:capitalize}
.pill-green{background:#E6F4EA;color:var(--green-d)}
.pill-blue{background:var(--blue-bg);color:var(--blue-d)}
.pill-amber{background:#FDF3D8;color:var(--amber-d)}
.pill-red{background:var(--pink);color:var(--pink-ink)}
.pill-gray{background:var(--border-2);color:var(--muted)}

/* ---------------------------------------------------------- 6. tables */
.pnl-tbl th[data-sort]{cursor:pointer;user-select:none;white-space:nowrap}
.pnl-tbl th[data-sort]:hover{color:var(--dark)}
.pnl-tbl th[data-sort]::after{content:"";display:inline-block;width:0;height:0;margin-left:6px;vertical-align:middle;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid currentColor;opacity:.28}
.pnl-tbl th.th-sorted-desc::after{opacity:1}
.pnl-tbl th.th-sorted-asc::after{border-top:none;border-bottom:5px solid currentColor;opacity:1}
.pnl-tbl tbody tr:hover{background:var(--bg)}
.pnl-tbl tr.row-selected,.pnl-tbl tr.row-selected:hover{background:#F4FBF6}
.pnl-tbl th.tbl-check,.pnl-tbl td.tbl-check{width:36px;padding-right:0}
.pnl-tbl td.tbl-acts{width:1%;white-space:nowrap;text-align:right}
.tbl-empty td{padding:36px 12px;text-align:center;color:var(--muted);font-weight:700}
.tbl-num{font-variant-numeric:tabular-nums}

.bulk-bar{position:sticky;bottom:18px;z-index:40;display:none;align-items:center;gap:14px;flex-wrap:wrap;margin-top:18px;padding:10px 12px 10px 20px;border-radius:var(--pill);background:var(--dark);color:#fff;box-shadow:var(--shadow-pop)}
.bulk-bar.on{display:flex}
.bulk-bar-count{font-size:13.5px;font-weight:800}
.bulk-bar-acts{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-left:auto}
.bulk-bar form{margin:0;display:inline-flex}
.bulk-bar .btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.3)}
.bulk-bar .btn-ghost:hover{background:rgba(255,255,255,.12)}

.pager{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:20px}
.pager-info{margin-right:auto;font-size:12.5px;font-weight:700;color:var(--muted)}
.pager-btn{display:inline-flex;align-items:center;gap:6px;padding:7px 15px;border:1px solid var(--border);border-radius:var(--pill);background:var(--card);color:var(--dark);font-size:13px;font-weight:800;cursor:pointer}
.pager-btn:hover{background:var(--border-2)}
.pager-btn.on{background:var(--dark);color:#fff;border-color:var(--dark)}
.pager-btn.is-off{opacity:.4;pointer-events:none}

/* ------------------------------------------------------- 7. data display */
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12.5px;overflow-wrap:anywhere}
.code-block{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12.5px;line-height:1.6;background:var(--bg);border:1px solid var(--border);border-radius:var(--r);padding:14px 16px;margin:0;max-height:420px;overflow:auto;white-space:pre-wrap;word-break:break-word}
.kv{display:grid;grid-template-columns:minmax(120px,auto) 1fr;gap:12px 20px;align-items:baseline}
.kv-k{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted-2)}
.kv-v{font-size:14px;font-weight:700;overflow-wrap:anywhere}
.kbd{display:inline-block;min-width:20px;padding:2px 6px;border:1px solid var(--border);border-bottom-width:2px;border-radius:6px;background:var(--card);color:var(--muted);font-size:11px;font-weight:800;text-align:center;line-height:1.4}
.live-dot{display:inline-block;width:8px;height:8px;border-radius:50%;flex-shrink:0;background:var(--green);box-shadow:0 0 0 3px rgba(22,163,74,.16)}
.live-dot.off{background:var(--muted-2);box-shadow:0 0 0 3px rgba(154,146,127,.16)}
.sms-meter{font-size:12.5px;font-weight:700;color:var(--muted)}
.sms-meter.is-multi{color:var(--amber-d)}
.trunc{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------------------------------------------------------- 8. modals */
.ff-mo-sm{max-width:430px}
.ff-mo-lg{max-width:860px}
.ff-mo-box:focus{outline:none}
.ff-mo-box>p.muted{margin:0;font-size:13.5px;font-weight:600}

/* ------------------------------------------------------ 9. sign-in page */
.auth-shell{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:40px 20px}
.auth-shell>.flash{width:100%;max-width:420px;margin:0}
.auth-card{width:100%;max-width:420px;background:var(--card);border:1px solid var(--border);border-radius:var(--r-xl);padding:32px 32px 28px}
.auth-brand{display:flex;align-items:center;gap:11px;margin-bottom:26px}
.auth-mark{width:40px;height:40px;border-radius:13px;background:var(--dark);color:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.auth-name{font-size:15px;font-weight:800;letter-spacing:-.01em;line-height:1.15}
.auth-name span{display:block;font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2)}
.auth-h1{margin:0 0 5px;font-size:27px;font-weight:800;letter-spacing:-.02em}
.auth-sub{margin:0 0 22px;font-size:14px;font-weight:600;color:var(--muted)}
.auth-field{margin-bottom:16px}
.auth-reveal{position:relative}
.auth-reveal .pnl-in{padding-right:48px}
.auth-reveal button{position:absolute;right:7px;top:50%;transform:translateY(-50%);width:34px;height:34px;display:flex;align-items:center;justify-content:center;border:none;border-radius:50%;background:none;color:var(--muted-2);cursor:pointer}
.auth-reveal button:hover{background:var(--border-2);color:var(--dark)}
.auth-note{margin-top:18px;text-align:center}
.auth-foot{max-width:420px;margin:0;text-align:center;font-size:12px;font-weight:700;color:var(--muted-2)}

/* ------------------------- 10. percentage sizes (inline styles are blocked) */
.pct-0{width:0}.pct-5{width:5%}.pct-10{width:10%}.pct-15{width:15%}
.pct-20{width:20%}.pct-25{width:25%}.pct-30{width:30%}.pct-35{width:35%}
.pct-40{width:40%}.pct-45{width:45%}.pct-50{width:50%}.pct-55{width:55%}
.pct-60{width:60%}.pct-65{width:65%}.pct-70{width:70%}.pct-75{width:75%}
.pct-80{width:80%}.pct-85{width:85%}.pct-90{width:90%}.pct-95{width:95%}
.pct-100{width:100%}
.h-pct-0{height:1px}.h-pct-5{height:5%}.h-pct-10{height:10%}.h-pct-15{height:15%}
.h-pct-20{height:20%}.h-pct-25{height:25%}.h-pct-30{height:30%}.h-pct-35{height:35%}
.h-pct-40{height:40%}.h-pct-45{height:45%}.h-pct-50{height:50%}.h-pct-55{height:55%}
.h-pct-60{height:60%}.h-pct-65{height:65%}.h-pct-70{height:70%}.h-pct-75{height:75%}
.h-pct-80{height:80%}.h-pct-85{height:85%}.h-pct-90{height:90%}.h-pct-95{height:95%}
.h-pct-100{height:100%}

/* --------------------------------------------------------- 11. responsive */
@media(max-width:900px){
    .pnl-side{width:270px}
    .page-head{margin-bottom:20px}
    .page-head-acts{width:100%}
    .bulk-bar{bottom:10px;padding-left:16px}
    .kv{grid-template-columns:1fr;gap:4px 0}
    .kv-v{margin-bottom:8px}
}

/* -------------------------------------------------------------- 12. print */
@media print{
    .pnl-side,.menu-btn,.pnl-scrim,.page-head-acts,.toolbar,.pager,.bulk-bar,
    .toast-container,.ff-mo,.skip-link,.flash-x{display:none!important}
    .pnl-wrap,.pnl-main{display:block;height:auto;overflow:visible}
    .pnl-inner{max-width:none;margin:0;padding:0}
    body{background:#fff}
    .card,.stat{border-color:#DDD;break-inside:avoid}
    .pnl-tbl{font-size:11px}
}