@import url('https://fonts.googleapis.com/css2?family=Inter:wght@500;600;700;800&family=Public+Sans:wght@400;500;600;700;800&display=swap');

/* ============================================================
   CHNX Studio — NASA-inspired internal theme
   Dipakai oleh: dashboard.php, admin.php, night/index.php
   (index.php + login.php punya tema yang sama secara inline)
   ============================================================ */

:root {
    --nasa-black: #000000;
    --nasa-ink: #1B1B1B;
    --nasa-heading: #141414;
    --nasa-muted: #58585B;
    --nasa-soft: #8C8C8C;
    --nasa-line: #E4E4E4;
    --nasa-line-strong: #D1D1D1;
    --nasa-surface: #FFFFFF;
    --nasa-surface-2: #F2F2F2;
    --nasa-surface-3: #F7F7F7;
    --nasa-red: #F64137;
    --nasa-red-dark: #B60109;
    --nasa-blue: #1C67E3;
    --nasa-green: #0B7A3B;
}

html, body {
    background: #FFFFFF !important;
    background-image: none !important;
    color: var(--nasa-ink) !important;
    font-family: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3,
.profile-name,
.wallet-amount,
.category-title,
.modal h2,
.card h2,
.appbar-titles h1,
.stat .value {
    font-family: 'Inter', 'Public Sans', sans-serif !important;
    color: var(--nasa-heading) !important;
}

/* ── Surfaces ── */
.card,
.profile-card,
.profile-wallet,
.stat,
.kv,
.category-card,
.modal,
.login-box {
    background: var(--nasa-surface) !important;
    border-color: var(--nasa-line) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 18px 36px -30px rgba(0, 0, 0, 0.22) !important;
    color: var(--nasa-ink) !important;
}

.profile-card,
.profile-name,
.wallet-amount {
    color: var(--nasa-heading) !important;
}

.profile-avatar,
.wallet-icon-box {
    background: var(--nasa-surface-2) !important;
    border-color: var(--nasa-line) !important;
    color: var(--nasa-red-dark) !important;
}

.accent-bar {
    background: var(--nasa-red) !important;
}

/* ── App bar / header ── */
.appbar,
.header {
    background: var(--nasa-black) !important;
    border-bottom-color: #2D2D2D !important;
    box-shadow: none !important;
}
.appbar-titles h1,
.header h1 {
    color: #FFFFFF !important;
}
.appbar-titles p,
.header-right .stats {
    color: rgba(255, 255, 255, 0.72) !important;
}
.header .link-home {
    color: rgba(255, 255, 255, 0.72) !important;
}
.header .link-home:hover {
    color: var(--nasa-red) !important;
}
.appbar .badge-admin {
    background: var(--nasa-red) !important;
    border-color: var(--nasa-red) !important;
    color: #FFFFFF !important;
}
.appbar .act-btn,
.btn-logout {
    background: #1A1A1A !important;
    border: 1px solid rgba(255, 255, 255, 0.28) !important;
    color: #FFFFFF !important;
}
.appbar .act-btn:hover,
.btn-logout:hover {
    background: #2D2D2D !important;
    border-color: #FFFFFF !important;
    color: #FFFFFF !important;
}
.appbar .act-btn.logout {
    background: rgba(246, 65, 55, 0.16) !important;
    color: #FF8A82 !important;
}
.header .badge-public {
    background: rgba(255, 255, 255, 0.10) !important;
    border-color: rgba(255, 255, 255, 0.28) !important;
    color: #FFFFFF !important;
}

/* ── Nav ── */
.nav-item {
    background: var(--nasa-surface) !important;
    border-color: var(--nasa-line) !important;
    color: var(--nasa-muted) !important;
}
.nav-item:hover {
    color: var(--nasa-red-dark) !important;
    border-color: var(--nasa-red) !important;
}
.nav-item.active {
    background: var(--nasa-ink) !important;
    border-color: var(--nasa-ink) !important;
    color: #FFFFFF !important;
    box-shadow: none !important;
}

/* ── Inputs ── */
.input-field,
.search-box,
.login-box input,
.form-group input,
.form-group select,
select.input-field {
    background: #FFFFFF !important;
    background-image: none !important;
    border-color: var(--nasa-line-strong) !important;
    color: var(--nasa-ink) !important;
}
.input-field:focus,
.search-box:focus,
.login-box input:focus,
.form-group input:focus,
.form-group select:focus {
    border-color: var(--nasa-red) !important;
    box-shadow: 0 0 0 3px rgba(246, 65, 55, 0.12) !important;
    background: #FFFFFF !important;
}
.input-field::placeholder,
.search-box::placeholder,
.login-box input::placeholder,
.form-group input::placeholder {
    color: var(--nasa-soft) !important;
}
select option {
    background: #FFFFFF !important;
    color: var(--nasa-ink) !important;
}

/* ── Buttons ── */
.btn-primary,
.btn-pink,
.login-box button {
    background: var(--nasa-ink) !important;
    background-image: none !important;
    color: #FFFFFF !important;
    border-color: var(--nasa-ink) !important;
    box-shadow: none !important;
}
.btn-primary:hover,
.btn-pink:hover,
.login-box button:hover {
    background: var(--nasa-red) !important;
    border-color: var(--nasa-red) !important;
    color: #FFFFFF !important;
    filter: none !important;
}
.btn-primary:disabled,
.btn-pink:disabled {
    background: var(--nasa-line) !important;
    color: var(--nasa-soft) !important;
    border-color: var(--nasa-line) !important;
}
.btn-outline,
.btn-ghost,
.btn-slate {
    background: #FFFFFF !important;
    border: 1px solid var(--nasa-line-strong) !important;
    color: var(--nasa-ink) !important;
}
.btn-outline:hover,
.btn-ghost:hover,
.btn-slate:hover {
    background: var(--nasa-surface-3) !important;
    border-color: var(--nasa-red) !important;
    color: var(--nasa-red-dark) !important;
}
.btn-danger {
    background: var(--nasa-red-dark) !important;
    border-color: var(--nasa-red-dark) !important;
    color: #FFFFFF !important;
}
.btn-danger:hover {
    background: var(--nasa-red) !important;
    border-color: var(--nasa-red) !important;
}
.btn-icon {
    background: #FFFFFF !important;
    border-color: var(--nasa-line-strong) !important;
    color: var(--nasa-ink) !important;
}
.btn-icon:hover {
    background: var(--nasa-surface-3) !important;
    border-color: var(--nasa-red) !important;
    color: var(--nasa-red-dark) !important;
}
.btn-icon.delete:hover {
    background: rgba(246, 65, 55, 0.08) !important;
    border-color: var(--nasa-red-dark) !important;
    color: var(--nasa-red-dark) !important;
}
.logo {
    background: var(--nasa-red) !important;
    background-image: none !important;
    color: #FFFFFF !important;
}

/* ── Tabs (dashboard) ── */
.tab-active {
    background: var(--nasa-ink) !important;
    background-image: none !important;
    color: #FFFFFF !important;
    box-shadow: none !important;
    transform: none !important;
}
.tab-inactive {
    color: var(--nasa-muted) !important;
}
.tab-inactive:hover {
    background: var(--nasa-surface-2) !important;
    color: var(--nasa-red-dark) !important;
    transform: none !important;
}

/* ── Badges / status ── */
.chip,
.profile-badge {
    background: rgba(246, 65, 55, 0.08) !important;
    border-color: rgba(246, 65, 55, 0.28) !important;
    color: var(--nasa-red-dark) !important;
}
.profile-logout {
    background: transparent !important;
    border-color: rgba(246, 65, 55, 0.35) !important;
    color: var(--nasa-red-dark) !important;
}
.profile-logout:hover {
    background: var(--nasa-red) !important;
    border-color: var(--nasa-red) !important;
    color: #FFFFFF !important;
    box-shadow: none !important;
}
.wallet-label {
    color: var(--nasa-red-dark) !important;
}
.status-Berhasil,
.status-Sukses {
    background: rgba(11, 122, 59, 0.10) !important;
    color: var(--nasa-green) !important;
}
.status-Pending,
.status-Diproses,
.role-admin {
    background: rgba(246, 65, 55, 0.10) !important;
    color: var(--nasa-red-dark) !important;
}
.status-Gagal {
    background: rgba(182, 1, 9, 0.10) !important;
    color: var(--nasa-red-dark) !important;
}
.role-user {
    background: var(--nasa-surface-2) !important;
    color: var(--nasa-muted) !important;
}
.badge-public {
    background: var(--nasa-surface-2) !important;
    border-color: var(--nasa-line) !important;
    color: var(--nasa-muted) !important;
}

/* ── Tables ── */
th {
    background: var(--nasa-surface-3) !important;
    color: var(--nasa-muted) !important;
    border-bottom-color: var(--nasa-line) !important;
}
td {
    border-bottom-color: var(--nasa-line) !important;
}
tr {
    background: #FFFFFF !important;
    border-color: var(--nasa-line) !important;
}
tr:hover td {
    background: #FAFAFA !important;
}
.kv {
    background: var(--nasa-surface-3) !important;
}
.kv .k,
.muted,
.stat .label,
.pager,
.form-row label,
.category-count,
.song-id,
.form-group label,
.login-box p,
.back-link {
    color: var(--nasa-muted) !important;
}
.stat .value {
    color: var(--nasa-heading) !important;
}
.stat .value.pink {
    color: var(--nasa-red-dark) !important;
}
.card h2::before {
    background: var(--nasa-red) !important;
}
.pager a {
    background: #FFFFFF !important;
    border-color: var(--nasa-line-strong) !important;
    color: var(--nasa-muted) !important;
}
.pager a:hover {
    border-color: var(--nasa-red) !important;
    color: var(--nasa-red-dark) !important;
}

/* ── Toggle ── */
.slider {
    background: var(--nasa-line-strong) !important;
}
.slider::before {
    background: #FFFFFF !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) !important;
}
.switch input:checked + .slider {
    background: var(--nasa-red) !important;
}
.switch input:checked + .slider::before {
    background: #FFFFFF !important;
}
.dot-off {
    background: var(--nasa-soft) !important;
    box-shadow: 0 0 0 3px rgba(140, 140, 140, 0.18) !important;
}

/* ── Category / music panel ── */
.category-header {
    background: #FFFFFF !important;
}
.category-header:hover {
    background: var(--nasa-surface-3) !important;
}
.category-title,
.modal h2,
.song-speed,
.login-box h1 {
    color: var(--nasa-red-dark) !important;
}
.back-link:hover,
.login-box .back-link:hover {
    color: var(--nasa-red-dark) !important;
}
.modal-overlay {
    background: rgba(0, 0, 0, 0.50) !important;
}
.error,
.alert-err,
.alert-error {
    color: var(--nasa-red-dark) !important;
}
.alert-ok,
.alert-success,
.message.success {
    color: var(--nasa-green) !important;
}
.message.warning {
    color: var(--nasa-red-dark) !important;
}

/* ── Toast ── */
.toast-info {
    background: var(--nasa-ink) !important;
    color: #FFFFFF !important;
}

/* ── Misc ── */
.skeleton {
    background: var(--nasa-line) !important;
}
.back-home {
    color: var(--nasa-muted) !important;
}
.back-home:hover {
    color: var(--nasa-red-dark) !important;
}
.unlink-btn {
    border-color: var(--nasa-line-strong) !important;
    color: var(--nasa-muted) !important;
}
.unlink-btn:hover {
    border-color: var(--nasa-red-dark) !important;
    color: var(--nasa-red-dark) !important;
    background: rgba(246, 65, 55, 0.06) !important;
}

/* ============================================================
   Override inline dark styles (dashboard.php punya banyak
   style="..." hardcoded dari tema lama)
   ============================================================ */
[style*="color:#FFFFFF"],
[style*="color: #FFFFFF"],
[style*="color:#fff"],
[style*="color: #fff"] {
    color: var(--nasa-ink) !important;
}
[style*="color:rgba(235, 235, 245"],
[style*="color: rgba(235, 235, 245"] {
    color: var(--nasa-muted) !important;
}
[style*="color:#AF52DE"],
[style*="color: #AF52DE"] {
    color: var(--nasa-red-dark) !important;
}
[style*="color:#30D158"],
[style*="color: #30D158"] {
    color: var(--nasa-green) !important;
}
[style*="background:#2C2C2E"],
[style*="background: #2C2C2E"],
[style*="background:#181130"],
[style*="background: #181130"] {
    background: var(--nasa-surface-2) !important;
}
[style*="background:#1C1C1E"],
[style*="background: #1C1C1E"] {
    background: #FFFFFF !important;
}
[style*="border:1px solid #38383A"],
[style*="border: 1px solid #38383A"],
[style*="border:1px solid #2C2C2E"],
[style*="border: 1px solid #2C2C2E"] {
    border-color: var(--nasa-line) !important;
}
[style*="border:1px solid rgba(191, 90, 242"],
[style*="border: 1px solid rgba(191, 90, 242"] {
    border-color: rgba(246, 65, 55, 0.28) !important;
}
[style*="background:rgba(191, 90, 242"],
[style*="background: rgba(191, 90, 242"] {
    background: rgba(246, 65, 55, 0.08) !important;
}
[style*="fill=\"#AF52DE\""] {
    fill: var(--nasa-red-dark) !important;
}

/* ── Konsistensi radius & label ── */
.input-group label {
    color: var(--nasa-red-dark) !important;
}
.sub,
a.back {
    color: var(--nasa-muted) !important;
}
a.back:hover {
    color: var(--nasa-red-dark) !important;
}
svg[fill="#AF52DE"],
svg[fill="#BF5AF2"] {
    fill: var(--nasa-red-dark) !important;
}
.stat:hover {
    border-color: rgba(246, 65, 55, 0.40) !important;
    box-shadow: 0 10px 22px -12px rgba(0, 0, 0, 0.18) !important;
}
.stats .stat:nth-child(1) .stat-ico,
.stats .stat:nth-child(3) .stat-ico,
.stats .stat:nth-child(4) .stat-ico,
.stats .stat:nth-child(5) .stat-ico {
    background: rgba(246, 65, 55, 0.08) !important;
}
.stats .stat:nth-child(2) .stat-ico {
    background: rgba(11, 122, 59, 0.10) !important;
}
.stats .stat:nth-child(6) .stat-ico {
    background: rgba(182, 1, 9, 0.10) !important;
}
.message.success {
    background: rgba(11, 122, 59, 0.08) !important;
    border-color: rgba(11, 122, 59, 0.28) !important;
}
.message.error {
    background: rgba(182, 1, 9, 0.08) !important;
    border-color: rgba(182, 1, 9, 0.28) !important;
}
.message.warning {
    background: rgba(246, 65, 55, 0.08) !important;
    border-color: rgba(246, 65, 55, 0.28) !important;
}
.card,
.profile-card,
.profile-wallet,
.stat,
.kv,
.category-card,
.modal,
.login-box {
    border-radius: 12px !important;
}
.profile-avatar,
.wallet-icon-box,
.logo,
.app-logo {
    border-radius: 10px !important;
}
.input-field,
.search-box,
.form-group input,
.form-group select,
.login-box input {
    border-radius: 8px !important;
}
.btn,
.btn-primary,
.btn-pink,
.btn-outline,
.btn-ghost,
.btn-slate,
.btn-danger,
.btn-icon,
.btn-logout,
.act-btn,
.login-box button,
.tab-btn,
.tab-active,
.tab-inactive {
    border-radius: 8px !important;
}