/* ARSHINET UI — paket tampilan bersama untuk semua aplikasi ARSHINET.
   Dipasang di /var/www/arshinet-ui dan dibuka lewat /_arshi/ di setiap domain.
   (c) ARSHINET - Risman Jafar, S.Kom. */
:root {
    --ax-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --ax-red: #E2231A; --ax-red-dark: #ff5a3c;
    --ax-hotspot: #F5B800; --ax-vpn: #E3173E; --ax-backup: #2563EB; --ax-report: #FF7A1A; --ax-finanku: #16A34A;
}
/* Logo: ikon + ARSHI(NET) + label aplikasi */
.ax-logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; min-width: 0; }
.ax-logo__ic { width: 34px; height: 34px; flex: none; display: block; }
.ax-logo__wm { font-family: var(--ax-font); font-weight: 800; font-size: 18px; letter-spacing: -.01em; white-space: nowrap; line-height: 1; }
.ax-logo__wm b { font-weight: 800; color: var(--ax-red); }
html[data-mode="dark"] .ax-logo__wm b { color: var(--ax-red-dark); }
.ax-app { display: inline-block; font: 700 11.5px/1 var(--ax-font); font-style: normal; letter-spacing: .02em; color: #fff;
    padding: 4px 9px; border-radius: 99px; background: var(--ax-app, #64748b); white-space: nowrap; }
.ax-app--hotspot { --ax-app: var(--ax-hotspot); } .ax-app--vpn { --ax-app: var(--ax-vpn); } .ax-app--backup { --ax-app: var(--ax-backup); }
.ax-app--report { --ax-app: var(--ax-report); } .ax-app--finanku { --ax-app: var(--ax-finanku); }

/* Pemilih tema (dipakai aplikasi yang tidak punya menu tema sendiri) */
.ax-tbtn { appearance: none; display: inline-grid; place-items: center; width: 36px; height: 36px; padding: 0 !important; border-radius: 12px !important;
    border: 1px solid var(--line, #e5e7eb) !important; background: var(--surface, #fff) !important; color: var(--ink, #111) !important; cursor: pointer; flex: none; }
.ax-tbtn svg { width: 18px; height: 18px; }
.ax-tpop { position: fixed; z-index: 90; display: none; width: 236px; padding: 10px; border-radius: 16px; background: var(--surface, #fff);
    border: 1px solid var(--line, #e5e7eb); box-shadow: 0 18px 40px -16px rgba(0,0,0,.35); font-family: var(--ax-font); }
.ax-tpop.open { display: block; }
.ax-tpop h4 { margin: 2px 4px 8px; font-size: 13px; color: var(--muted, #666); font-weight: 600; }
.ax-tpop .g { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ax-tpop button { appearance: none; display: flex !important; align-items: center; gap: 8px; justify-content: flex-start !important; padding: 8px 9px !important;
    border-radius: 10px !important; border: 1px solid transparent !important; background: transparent !important; color: var(--ink, #111) !important;
    font: 600 12.5px/1.2 var(--ax-font) !important; cursor: pointer; box-shadow: none !important; }
.ax-tpop button:hover { background: var(--s2, #f3f4f6) !important; }
.ax-tpop button.on { border-color: var(--acc, #2563eb) !important; }
.ax-tpop i { width: 16px; height: 16px; border-radius: 50%; flex: none; border: 1px solid rgba(0,0,0,.12); }

/* label aplikasi di menu samping / halaman login (backup) */
.sidebar__title .ax-app, .login__brand .ax-app { font-size: 10.5px; padding: 4px 8px; margin-left: 6px; position: relative; top: -2px; vertical-align: middle; }

/* footer copyright (aplikasi yang belum punya) */
.ax-foot { text-align: center; font: 12px/1.6 var(--ax-font); color: var(--muted, #6b7280); padding: 18px 12px 4px; }
.ax-foot--login { position: fixed; left: 0; right: 0; bottom: 10px; padding: 0 12px; z-index: 2; pointer-events: none; }
@media (max-height: 560px) { .ax-foot--login { position: static; padding: 0 12px 14px; } }