/* RIOBETA4 — IVR reporting admin UI */
:root { --orange:#F6921E; --orange-d:#C96E0A; --slate:#1F2937; --muted:#6B7280;
        --line:#E5E7EB; --bg:#F8FAFC; }
* { box-sizing:border-box; margin:0; padding:0; }
body { font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif; background:var(--bg); color:var(--slate); }
.wrap { max-width:1120px; margin:0 auto; padding:28px 20px 60px; }
h1 { font-size:22px; font-weight:700; }
.kicker { font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--orange-d); }
.sub { color:var(--muted); font-size:13px; margin-top:4px; }
.head { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:20px; }
.head-actions { display:flex; gap:8px; }
button { cursor:pointer; }
.btn { background:#fff; border:1px solid var(--line); color:var(--slate); padding:8px 12px;
        border-radius:8px; font-size:13px; font-weight:500; }
.btn:hover { background:#f1f5f9; }
.tabs { display:flex; gap:6px; flex-wrap:wrap; background:#fff; border:1px solid var(--line);
        padding:8px; border-radius:10px; margin-bottom:20px; }
.tabs button { border:none; background:transparent; color:var(--muted); padding:7px 13px;
                border-radius:8px; font-size:13px; font-weight:500; }
.tabs button.active { background:var(--orange); color:#fff; }
.cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px; margin-bottom:20px; }
.card { background:#fff; border:1px solid var(--line); border-radius:12px; padding:18px; }
.card .lbl { font-size:12px; color:var(--muted); font-weight:500; }
.card .val { font-size:30px; font-weight:700; margin-top:6px; }
.card .val.accent { color:var(--orange-d); }
.card .foot { font-size:11px; color:var(--muted); margin-top:4px; }
.panel { background:#fff; border:1px solid var(--line); border-radius:12px; padding:18px; margin-bottom:16px; }
.panel h2 { font-size:15px; font-weight:600; margin-bottom:14px; }
table { width:100%; border-collapse:collapse; font-size:13px; }
th { text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted);
     padding:6px 8px; border-bottom:1px solid var(--line); }
td { padding:8px; border-bottom:1px solid #f1f5f9; }
tr:hover td { background:#f8fafc; }
.right { text-align:right; }
.muted { color:var(--muted); }
.scroll { max-height:340px; overflow:auto; }
.pill { background:#E8F5EF; color:#047857; border-radius:999px; padding:2px 9px; font-size:11px; font-weight:600; }
.banner { background:#FDECEC; border:1px solid #f5c6c6; color:#B91C1C; border-radius:8px;
          padding:10px 14px; font-size:13px; margin-bottom:16px; display:none; }
.login { max-width:360px; margin:12vh auto; background:#fff; border:1px solid var(--line);
         border-radius:14px; padding:28px; }
.login input { width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:8px;
               font-size:14px; margin-bottom:10px; }
.login .btn { width:100%; background:var(--orange); color:#fff; border:none; padding:11px; font-size:14px; }
.err { color:#B91C1C; font-size:12px; margin-top:8px; }
.login-title { margin:6px 0 16px; }
.datebar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:16px; }
.datebar input[type=date] { padding:8px 10px; border:1px solid var(--line); border-radius:8px; font-size:13px; }
.datebar .dlabel { font-size:13px; color:var(--muted); }
.view { display:none; }
.view.active { display:block; }
.hidden { display:none; }
.chart-box { height:280px; }
.chart-box canvas { width:100%; height:100%; }