/* assets/css/hub.css — HANYA bagian khusus Hub.
 * Seluruh dasar tampilan (token, header, sidebar, tombol, form, tabel, modal,
 * toast, mobile) dari assets/css/backoffice.css = salinan apa adanya dari
 * FORTIS. Jangan menulis ulang komponen yang sudah ada di sana. */

/* ── Header: tombol profil & dropdown (di FORTIS gayanya sebaris di markup) ── */
.hub-edisi { font-size: .62rem; font-weight: 800; background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%); color: #fff;
             padding: 2px 7px; border-radius: 10px; letter-spacing: .5px; text-transform: uppercase; box-shadow: 0 2px 6px rgba(99,102,241,.35); }
.header-profile-btn { cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 30px;
                      background: var(--surface-2); border: 1px solid var(--border); transition: all .2s; user-select: none; }
.hub-avatar { width: 24px; height: 24px; border-radius: 50%; background: var(--primary-gradient); display: flex; align-items: center;
              justify-content: center; color: #fff; font-size: .9rem; }
.hub-dropdown { position: absolute; top: calc(100% + 8px); right: 0; min-width: 210px; background: rgba(30,41,59,.95);
                backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--border); border-radius: 12px;
                box-shadow: 0 10px 25px rgba(0,0,0,.5); padding: 6px; z-index: 1000; animation: dropdownFadeIn .15s ease-out; }
.profile-dropdown-item { width: 100%; display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: transparent; border: none;
                         border-radius: 8px; color: var(--text-primary); font-size: .85rem; font-weight: 500; cursor: pointer; text-align: left;
                         font-family: inherit; text-decoration: none; }
.profile-dropdown-item i { font-size: 1.1rem; }
.profile-dropdown-item:hover { background: rgba(255,255,255,.07); text-decoration: none; }
.profile-dropdown-item.danger { color: #f87171; }
.profile-dropdown-item.danger:hover { background: rgba(239,68,68,.15); }
.hub-pisah { height: 1px; background: rgba(255,255,255,.06); margin: 4px 0; }
[data-theme="light"] .hub-dropdown, html.light-theme .hub-dropdown { background: #fff; box-shadow: 0 12px 32px rgba(0,0,0,.12); }
[data-theme="light"] .profile-dropdown-item:hover, html.light-theme .profile-dropdown-item:hover { background: #f1f5f9; }
[data-theme="light"] .hub-pisah, html.light-theme .hub-pisah { background: #e2e8f0; }
@keyframes dropdownFadeIn { from { opacity: 0; transform: translateY(-8px); } }

/* Sidebar & nav bawah memakai <a>, FORTIS memakai <button>. */
a.nav-item, a.mobile-nav-item { text-decoration: none; }
a.nav-item:hover, a.mobile-nav-item:hover { text-decoration: none; }

/* Modal dibuka lewat kelas .show (FORTIS lewat style.display). */
.modal-overlay.show { display: flex !important; }

/* Ikon putar — backoffice.css tidak punya keyframes-nya. */
.spin { animation: hubPutar 1s linear infinite; display: inline-block; }
@keyframes hubPutar { to { transform: rotate(360deg); } }

/* ── Teks bantu ── */
.muted { color: var(--text-secondary); }
.kecil { font-size: .76rem; }
.mono  { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.baris-tombol { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* ── Kartu aplikasi di dasbor (ringkas) ── */
.hub-app-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: 16px; }
.hub-app { background: var(--bg-card); border: 1px solid var(--border); border-top: 3px solid var(--border); border-radius: 12px;
           padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; transition: var(--transition); }
.hub-app:hover { border-color: var(--border-hover); }
.hub-app.st-online { border-top-color: var(--success); }
.hub-app.st-peringatan { border-top-color: var(--warning); }
.hub-app.st-offline, .hub-app.st-galat { border-top-color: var(--danger); }
.hub-app-kepala { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.hub-app-nama { font-size: .95rem; font-weight: 700; color: var(--text-primary); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.hub-app-url { font-size: .72rem; color: var(--text-muted); word-break: break-all; margin-top: 2px; }
.hub-angka { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.hub-angka > div { background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; padding: 7px 9px; min-width: 0; }
.hub-angka .label { font-size: .62rem; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .4px; font-weight: 700; }
.hub-angka .nilai { font-size: .85rem; font-weight: 800; color: var(--text-primary); line-height: 1.3; overflow-wrap: anywhere; }
.hub-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: .72rem; color: var(--text-secondary); }
.hub-meta i { margin-right: 3px; }

/* Status & lencana */
.hub-status { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: .68rem; font-weight: 700;
              white-space: nowrap; border: 1px solid transparent; }
.hub-status.online, .hub-status.berhasil { background: var(--success-tint); color: var(--success-text); border-color: rgba(16,185,129,.3); }
.hub-status.peringatan { background: var(--warning-tint); color: var(--warning-text); border-color: rgba(245,158,11,.3); }
.hub-status.offline, .hub-status.galat, .hub-status.gagal { background: var(--danger-tint); color: var(--danger-text); border-color: rgba(239,68,68,.3); }
.hub-status.netral { background: rgba(148,163,184,.1); color: var(--text-secondary); border-color: rgba(148,163,184,.25); }
.hub-edisi-app { display: inline-flex; padding: 1px 6px; border-radius: 5px; font-size: .6rem; font-weight: 700; text-transform: uppercase;
                 background: var(--lencana-ungu-bg); color: var(--lencana-ungu-fg); border: 1px solid var(--lencana-ungu-garis); }

/* Daftar masalah */
.hub-masalah { display: flex; flex-direction: column; gap: 5px; }
.hub-masalah > div { font-size: .74rem; padding: 5px 9px; border-radius: 8px; display: flex; gap: 6px; align-items: flex-start; line-height: 1.4; }
.hub-masalah .bahaya  { background: var(--danger-tint); color: var(--danger-text); }
.hub-masalah .waspada { background: var(--warning-tint); color: var(--warning-text); }
.hub-masalah .info    { background: rgba(56,189,248,.10); color: #38bdf8; }
[data-theme="light"] .hub-masalah .info, html.light-theme .hub-masalah .info { color: #075985; }

/* ── Kartu isi, pasangan label/nilai ── */
.hub-kartu { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 16px 18px; }
[data-theme="light"] .hub-kartu, html.light-theme .hub-kartu, [data-theme="light"] .hub-app, html.light-theme .hub-app { box-shadow: 0 4px 16px -2px rgba(0,0,0,.04); }
.hub-kartu h3 { font-size: .92rem; font-weight: 700; margin: 0 0 10px; display: flex; align-items: center; gap: 7px; color: var(--text-primary); }
.hub-kartu h3 i { color: var(--primary); }
.hub-dua { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 20px; }
.hub-pasangan { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px dashed var(--border); font-size: .8rem; }
.hub-pasangan:last-child { border-bottom: none; }
.hub-pasangan span:first-child { color: var(--text-secondary); }
.hub-pasangan span:last-child { font-weight: 600; text-align: right; overflow-wrap: anywhere; color: var(--text-primary); }
.hub-judul-bagian { font-size: .95rem; font-weight: 700; margin: 4px 0 10px; color: var(--text-primary); }

.hub-kosong { padding: 32px 20px; text-align: center; color: var(--text-secondary); font-size: .82rem; }
.hub-kosong i { font-size: 2rem; opacity: .35; display: block; margin-bottom: 8px; }
.hub-kosong strong { color: var(--text-primary); font-size: .88rem; display: block; margin-bottom: 4px; }

.hub-kode { background: var(--surface-2); border: 1px dashed var(--border-hover); border-radius: 8px; padding: 10px 12px;
            font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .76rem; word-break: break-all; color: var(--text-primary); }

.hub-grafik { display: flex; align-items: flex-end; gap: 2px; height: 40px; }
.hub-grafik span { flex: 1; background: var(--success); border-radius: 2px 2px 0 0; min-height: 3px; opacity: .85; }
.hub-grafik span.gagal { background: var(--danger); }
.hub-grafik span.waspada { background: var(--warning); }

.hub-info { padding: 10px 12px; border-radius: 8px; font-size: .8rem; margin-bottom: 14px; background: rgba(99,102,241,.1); color: #c7d2fe; }
[data-theme="light"] .hub-info, html.light-theme .hub-info { color: var(--primary); }

/* ── Halaman masuk / pemasangan (mengikuti login.php FORTIS) ── */
.hub-masuk { min-height: 100%; flex: 1; display: flex; align-items: center; justify-content: center; padding: 20px; background: #121824; }
[data-theme="light"] .hub-masuk, html.light-theme .hub-masuk { background: var(--bg-color); }
.hub-masuk-kartu { width: 100%; max-width: 400px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 32px;
                   box-shadow: 0 20px 25px -5px rgba(0,0,0,.5), 0 8px 10px -6px rgba(0,0,0,.5); }
.hub-masuk-kartu .logo { width: 64px; height: 64px; border-radius: 12px; display: block; margin: 0 auto 12px; filter: drop-shadow(0 4px 10px rgba(99,102,241,.2)); }
.hub-masuk-kartu h1 { font-size: 1.35rem; font-weight: 700; text-align: center; margin: 0; color: var(--text-primary); }
.hub-masuk-kartu .sub { text-align: center; font-size: .82rem; color: var(--text-secondary); margin: 4px 0 20px; }
.hub-input-ikon { position: relative; }
.hub-input-ikon > i { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); font-size: 1.05rem; color: var(--text-muted); }
.hub-input-ikon .form-input { padding-left: 40px; }
.hub-galat { padding: 10px 12px; border-radius: 8px; font-size: .82rem; margin-bottom: 14px; background: rgba(239,68,68,.1); color: #fca5a5; }
[data-theme="light"] .hub-galat, html.light-theme .hub-galat { color: var(--danger-text); }

@media (max-width: 1024px) { .hub-dua { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .hub-angka { grid-template-columns: 1fr 1fr; } .hub-masuk-kartu { padding: 24px 18px; } }

/* Warna kotak ikon kartu statistik (di FORTIS ditulis sebaris). */
.tint-indigo { background: rgba(99,102,241,.1) !important; color: #818cf8 !important; }
.tint-hijau  { background: rgba(16,185,129,.1) !important; color: #34d399 !important; }
.tint-merah  { background: rgba(239,68,68,.1) !important; color: #f87171 !important; }
.tint-kuning { background: rgba(245,158,11,.1) !important; color: #fbbf24 !important; }
.tint-biru   { background: rgba(56,189,248,.1) !important; color: #38bdf8 !important; }
.form-bantuan { font-size: .74rem; color: var(--text-muted); margin-top: 5px; line-height: 1.45; }
.stat-sub { font-size: .7rem; color: var(--text-muted); margin-top: 2px; }
.hub-blok { width: 100%; justify-content: center; }
.dashboard-header p { font-size: .85rem; color: var(--text-secondary); margin: 4px 0 0; line-height: 1.5; }
.dashboard-header p a { color: var(--primary-light); }