/* =========================================================
   ARSHINET — tema "Kapsul" (mengikuti ARSHINET REPORT)
   Abu muda + sidebar hitam melayang, tab aktif melengkung,
   aksen oranye #ff5a1f. Dimuat setelah app.css & enterprise.css.
   Hapus <link> file ini di views/layout/header.php untuk kembali.
   ========================================================= */

/* ---------- Variabel tema ---------- */
:root, html[data-theme="light"] {
    --bg: #e9ebee; --surface: #ffffff; --surface-2: #f3f4f6; --border: #e3e6ea;
    --text: #111214; --text-soft: #6b7280; --text-mute: #9aa0a8;
    --acc: #ff5a1f; --acc-d: #e2470f; --acc-l: #fff0ea;
    --brand: #111214; --brand-dark: #000; --brand-light: #f1f2f4; --accent: #ff5a1f;
    --side-bg: #111214; --side-ink: #f3f4f6; --side-muted: #9a9ea6; --side-ic: #ff5a1f; --side-line: rgba(255,255,255,.08);
    --chart-tx: #111214; --chart-rx: #ff5a1f;
    --ink-btn: #111214; --on-ink: #ffffff;
    --shadow: 0 1px 2px rgba(0,0,0,.04); --shadow-lg: 0 18px 40px -18px rgba(0,0,0,.25);
    --font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --sidebar-w: 256px; --gap: 16px;
}
html[data-theme="dark"] {
    --bg: #0b0c0e; --surface: #15171b; --surface-2: #1d2025; --border: #2a2e35;
    --text: #f1f2f4; --text-soft: #9aa0aa; --text-mute: #6f7580;
    --brand: #f4f5f7; --brand-dark: #fff; --brand-light: #24272d;
    --side-bg: #1a1c21; --chart-tx: #e5e7eb; --chart-rx: #ff5a1f;
    --ink-btn: #f4f5f7; --on-ink: #111214; --acc-l: rgba(255,90,31,.14);
    --shadow: 0 1px 2px rgba(0,0,0,.4); --shadow-lg: 0 18px 40px -18px rgba(0,0,0,.7);
}
html[data-theme="blue"]  { --acc: #2563eb; --acc-d: #1d4ed8; --acc-l: #e6efff; --side-bg: #13203d; --side-ic: #60a5fa; --chart-rx: #2563eb; }
html[data-theme="green"] { --acc: #16a34a; --acc-d: #15803d; --acc-l: #dcfce7; --side-bg: #14392a; --side-ic: #4ade80; --chart-rx: #16a34a; }
html[data-theme="pink"]  { --acc: #ec4899; --acc-d: #db2777; --acc-l: #fce7f3; --side-bg: #3a1230; --side-ic: #f9a8d4; --chart-rx: #ec4899; }
html[data-theme="blue"], html[data-theme="green"], html[data-theme="pink"] { --accent: var(--acc); }

body { font-family: var(--font); background: var(--bg); color: var(--text); }
a { color: var(--acc-d); }

/* ---------- Tata letak: sidebar melayang + panel konten ---------- */
.layout { max-width: 1720px; }
@media (min-width: 961px) {
    .sidebar {
        top: var(--gap); bottom: var(--gap);
        left: max(var(--gap), calc((100% - 1720px) / 2 + var(--gap)));
        width: var(--sidebar-w); height: auto;
        border-radius: 28px; padding: 22px 0 18px 16px;
        box-shadow: 0 20px 40px -24px rgba(0,0,0,.45);
    }
    .content { margin-left: calc(var(--sidebar-w) + var(--gap) * 2); padding: var(--gap) var(--gap) var(--gap) 8px; }
    .content__inner {
        background: var(--surface); border-radius: 28px; padding: 28px 30px 34px;
        min-height: calc(100vh - var(--gap) * 2); box-shadow: var(--shadow);
    }
}
@media (min-width: 1700px) { .layout { box-shadow: none; } }

/* ---------- Sidebar ---------- */
.sidebar { background: var(--side-bg); border: 0; color: var(--side-ink); overflow: hidden; }
.sidebar::before, .sidebar::after { display: none; }
.sidebar__brand { padding: 0 16px 12px 4px; border-bottom: 0; gap: 10px; }
.sidebar__logoimg { width: 40px; height: 40px; border-radius: 12px; box-shadow: none; }
.sidebar__title { color: var(--side-ink); font-size: 17px; font-weight: 800; letter-spacing: .04em; }
.sidebar__title b { color: var(--side-ic); font-weight: 800; }
.sidebar__title small { color: var(--side-muted); font-size: 11px; font-weight: 500; letter-spacing: .02em; }

.sidebar__prof { display: flex; align-items: center; gap: 12px; padding: 4px 16px 14px 2px; margin-bottom: 4px; border-bottom: 1px solid var(--side-line); }
.sidebar__pav {
    width: 48px; height: 48px; border-radius: 50%; flex: none; display: grid; padding: 2px;
    background: conic-gradient(var(--side-ic) 0 72%, transparent 72% 100%);
}
.sidebar__pav span {
    display: grid; place-items: center; border-radius: 50%; font-size: 18px; font-weight: 800;
    background: var(--side-bg); color: var(--side-ink); border: 3px solid var(--side-bg);
    box-shadow: inset 0 0 0 1px var(--side-line);
    background-image: linear-gradient(145deg, rgba(255,255,255,.14), rgba(255,255,255,.03));
}
.sidebar__ptxt { min-width: 0; line-height: 1.25; }
.sidebar__ptxt b { display: block; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: var(--side-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar__ptxt small { font-size: 12px; color: var(--side-muted); }

.sidebar__session { padding: 12px 16px 14px 0; border-bottom: 0; }
.sidebar__session label { color: var(--side-muted); font-size: 11px; font-weight: 700; letter-spacing: .08em; }
.sidebar__session select {
    margin-top: 6px; padding: 10px 12px; border-radius: 12px; font: 700 13px var(--font);
    background-color: rgba(255,255,255,.07); border: 1px solid var(--side-line); color: var(--side-ink);
}
.sidebar__session select option { color: #111; }
.sidebar__session select:focus { border-color: var(--side-ic); box-shadow: 0 0 0 3px rgba(255,90,31,.25); }
.sidebar__switch {
    margin-top: 8px; padding: 9px 12px; border-radius: 12px; font: 600 13px var(--font);
    color: var(--side-ink); background: transparent; border: 1px solid var(--side-line);
}
.sidebar__switch svg { color: var(--side-ic); }
.sidebar__switch:hover { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.16); color: #fff; }
.sidebar .btn--primary { background: var(--side-ic); border-color: var(--side-ic); color: #fff; border-radius: 12px; }

.sidebar__nav { padding: 18px 0 18px; scrollbar-width: none; }
.sidebar__nav::-webkit-scrollbar { display: none; }
.sidebar__link, .sidebar__sublink {
    position: relative; margin: 0 16px 4px 0; padding: 10px 14px; border-radius: 14px;
    color: var(--side-ink); font: 600 14.5px var(--font); letter-spacing: .02em; background: transparent; box-shadow: none;
}
.sidebar__link svg, .sidebar__sublink svg { color: var(--side-ic); opacity: 1; width: 19px; height: 19px; }
.sidebar__sublink { font-size: 13.5px; font-weight: 500; color: #d3d6dc; }
.sidebar__link:hover, .sidebar__sublink:hover { background: rgba(255,255,255,.07); color: #fff; }
.sidebar__link:hover svg { color: var(--side-ic); }
.sidebar__toggle .chev { color: var(--side-muted) !important; width: 15px !important; height: 15px !important; }
.sidebar__sub .sidebar__parent > .sidebar__sub { border-left-color: var(--side-line); }

/* tab aktif: menyambung ke latar konten dengan lekukan atas & bawah */
.sidebar__link.active, .sidebar__sublink.active {
    background: var(--bg); color: var(--text); margin-right: 0; padding-right: 30px;
    border-radius: 24px 0 0 24px; font-weight: 700; box-shadow: none;
}
.sidebar__link.active svg, .sidebar__sublink.active svg { color: var(--side-ic); }
@media (min-width: 961px) {
    .sidebar__link.active::before, .sidebar__link.active::after,
    .sidebar__sublink.active::before, .sidebar__sublink.active::after {
        content: ""; position: absolute; right: 0; width: 24px; height: 24px; pointer-events: none;
    }
    .sidebar__link.active::before, .sidebar__sublink.active::before { top: -24px; border-bottom-right-radius: 24px; box-shadow: 8px 8px 0 8px var(--bg); }
    .sidebar__link.active::after, .sidebar__sublink.active::after { bottom: -24px; border-top-right-radius: 24px; box-shadow: 8px -8px 0 8px var(--bg); }
}

.sidebar__footer { flex-direction: column; align-items: stretch; gap: 10px; padding: 14px 16px 0 0; border-top: 1px solid var(--side-line); }
.sidebar__logout {
    display: flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 12px; border-radius: 99px;
    border: 1px solid rgba(255,255,255,.18); color: #ffb4a8; font: 600 14px var(--font);
}
.sidebar__logout:hover { background: rgba(255,255,255,.07); text-decoration: none; color: #ffc9c0; }
.sidebar__ver { text-align: center; font-size: 12px; color: var(--side-muted); }

/* ---------- Header di dalam panel ---------- */
.topbar { margin-bottom: 26px; padding: 0; }
.topbar__icon { display: none; }
.topbar h1 { font-weight: 300; font-size: 38px; letter-spacing: -.035em; line-height: 1.1; color: var(--text); }
.topbar .subtitle { font-size: 14px; color: var(--text-soft); margin-top: 6px; }
.topbar .subtitle a { color: var(--text); font-weight: 700; }
.topbar .subtitle strong { color: var(--text); }
.topbar .conn-pill { padding: 8px 14px; border-radius: 99px; font-size: 13px; }
.topbar .conn-pill--checking { background: var(--surface-2); border-color: var(--border); color: var(--text-soft); }
.theme-switch__btn { width: 40px; height: 40px; border-radius: 50%; background: var(--surface); border: 1.5px solid var(--border); color: var(--text); }
.theme-switch__btn:hover { background: var(--surface-2); color: var(--acc); }
.topbar__avatar { background: var(--ink-btn); color: var(--on-ink); box-shadow: none; }
@media (min-width: 961px) { .topbar__divider, .topbar__profile { display: none; } }

/* ---------- Tombol & input (kapsul) ---------- */
.btn { border-radius: 99px; font-family: var(--font); font-weight: 600; }
.btn--primary { background: var(--acc); border-color: var(--acc); color: #fff; }
.btn--primary:hover { background: var(--acc-d); border-color: var(--acc-d); box-shadow: 0 6px 16px -6px var(--acc); }
input, select, textarea { font-family: var(--font); border-radius: 12px; }
input:focus, select:focus, textarea:focus { border-color: var(--text); box-shadow: 0 0 0 3px var(--brand-light); }

/* ---------- Kartu ---------- */
.card { background: var(--surface); border: 1.5px solid var(--border); border-radius: 20px; box-shadow: none; }
.card__head { border-bottom: 0; padding: 18px 20px 6px; }
.card__head h2, .dx-card .card__head h2 { font-size: 15px; font-weight: 700; letter-spacing: 0; display: flex; align-items: center; gap: 9px; }
.card__head h2::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--text); flex: none; }
.dx-hico { display: none; }
.dx-link, .card__head > a.fs-sm {
    font-size: 12px; font-weight: 700; color: var(--acc-d); background: var(--acc-l);
    padding: 4px 12px; border-radius: 99px; text-decoration: none;
}
.dx-link svg { display: none; }
.badge { border-radius: 99px; font-weight: 700; }

/* panel info */
.dx-panel { border: 1.5px solid var(--border); border-radius: 20px; box-shadow: none; background: var(--surface); }
.dx-ico, .dx-ico--blue, .dx-ico--purple, .dx-ico--cyan { background: var(--surface-2); color: var(--text); }
html[data-theme="dark"] .dx-ico { background: var(--surface-2); color: var(--text); }
.dx-panel h2 { font-size: 15px; font-weight: 700; }
.dx-kv { font-size: 14px; }
.dx-res__bar { background: var(--surface-2); }
.dx-res__bar i { background: linear-gradient(90deg, var(--acc), #ff9a6b); }
html[data-theme="blue"] .dx-res__bar i, html[data-theme="green"] .dx-res__bar i, html[data-theme="pink"] .dx-res__bar i { background: var(--acc); }
.dx-res__bar i.is-warm { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.dx-res__bar i.is-hot  { background: linear-gradient(90deg, #dc2626, #f87171); }

/* kartu statistik: netral seperti KPI di report */
.dx-stat, .dx-stat--blue, .dx-stat--green, .dx-stat--amber, .dx-stat--red {
    background: var(--surface); color: var(--text); border: 1.5px solid var(--border); box-shadow: none; border-radius: 20px;
    padding: 20px 22px; min-height: 0;
}
.dx-stat::after { display: none; }
.dx-stat:hover { border-color: var(--text-mute); transform: none; }
.dx-stat__top { color: var(--text-soft); font-size: 13.5px; font-weight: 600; }
.dx-stat__top svg { color: var(--acc); width: 18px; height: 18px; }
.dx-stat__num { font-size: 34px; letter-spacing: -.03em; color: var(--text); }
.dx-stat__num--sm { font-size: 22px; }
.dx-stat__sub { color: var(--text-soft); font-size: 13px; opacity: 1; }
.dx-stat__art {
    width: 46px; height: 46px; padding: 11px; border-radius: 14px; opacity: 1;
    background: var(--surface-2); color: var(--text); right: 20px;
}
.dx-stat--red .dx-stat__art { background: var(--acc-l); color: var(--acc-d); }

/* traffic */
.dash-traffic select { border-radius: 99px; font-weight: 600; }
.dx-legend i { border-radius: 3px; }
.dx-legend i.lg-tx { background: var(--chart-tx); }
.dx-legend i.lg-rx { background: var(--chart-rx); }

/* income */
.inc-box { background: var(--surface-2); border: 0; border-radius: 16px; }
.inc-box--accent { background: var(--ink-btn); color: var(--on-ink); box-shadow: none; }
.inc-box--accent .inc-ico { color: var(--acc); }

/* log */
.log-item { border-bottom-color: var(--border); }
.dx-monitor { background: var(--surface-2); border-radius: 12px; margin: 4px 16px 6px; border: 0; }

/* tabel di halaman lain */
table.tbl th { background: var(--surface-2); color: var(--text-soft); font-weight: 600; }
.table-wrap { border-radius: 14px; }

/* ---------- Ponsel ---------- */
@media (max-width: 960px) {
    .sidebar { border-radius: 0 24px 24px 0; padding: 20px 0 18px 14px; }
    .sidebar__link.active, .sidebar__sublink.active { border-radius: 14px; margin-right: 14px; padding-right: 14px; }
    .content__inner { background: transparent; }
    .topbar h1 { font-size: 30px; }
}