/* ============================================================
   DARK MODE - PETIR Web App
   Semua override warna untuk mode gelap
   ============================================================ */

/* ============================================================
   1. VARIABEL UNTUK DARK MODE
   ============================================================ */
[data-theme="dark"] {
    /* Background */
    --color-bg:              #0A0A0C;
    --color-bg-card:         #141419;
    --color-bg-elevated:     #1E1E24;

    /* Text */
    --color-text:            #F3F4F6;
    --color-text-secondary:  #B0B7C3;
    --color-text-muted:      #6B7280;
    --color-text-inverse:    #0A0A0C;

    /* Border */
    --color-border:          #2A2A32;
    --color-border-light:    #1E1E24;
    --color-border-focus:    #FF5252;

    /* Primary adjusted */
    --color-primary:         #FF5252;
    --color-primary-dark:    #D32F2F;
    --color-primary-light:   #FF7B7B;
    --color-primary-soft:    rgba(255, 82, 82, 0.12);

    /* Secondary adjusted */
    --color-secondary:       #FFB300;
    --color-secondary-soft:  rgba(255, 179, 0, 0.12);

    /* Status soft colors */
    --color-success-soft:    rgba(46, 125, 50, 0.15);
    --color-warning-soft:    rgba(239, 108, 0, 0.15);
    --color-error-soft:      rgba(211, 47, 47, 0.15);
    --color-info-soft:       rgba(21, 101, 192, 0.15);

    /* Shadow */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.5);
    --shadow-xl: 0 8px 24px rgba(0, 0, 0, 0.6);
}

/* ============================================================
   2. TRANSISI HALUS SAAT GANTI TEMA
   ============================================================ */
html {
    transition: background-color 300ms ease;
}
body {
    transition: background-color 300ms ease, color 300ms ease;
}

/* ============================================================
   3. OVERRIDE UNTUK ELEMEN SPESIFIK
   ============================================================ */

/* Body dark mode */
[data-theme="dark"] body {
    background-color: #0A0A0C;
    color: #F3F4F6;
}

/* Header (app-header) */
[data-theme="dark"] .app-header {
    background: #141419;
    border-bottom-color: #1E1E24;
}

[data-theme="dark"] .app-header-title {
    color: #B0B7C3;
}

[data-theme="dark"] .app-header-back {
    background: #1E1E24;
    color: #F3F4F6;
    border-color: #2A2A32;
}

[data-theme="dark"] .app-header-back:hover {
    background: #2A2A32;
    color: #FF5252;
}

/* Card */
[data-theme="dark"] .card {
    background: #141419;
    border-color: #2A2A32;
}

[data-theme="dark"] .card-header {
    border-bottom-color: #1E1E24;
}

[data-theme="dark"] .card-title {
    color: #F3F4F6;
}

/* Form input */
[data-theme="dark"] .form-input,
[data-theme="dark"] .form-select,
[data-theme="dark"] .form-textarea {
    background: #1E1E24;
    border-color: #2A2A32;
    color: #F3F4F6;
}

[data-theme="dark"] .form-input:focus,
[data-theme="dark"] .form-select:focus,
[data-theme="dark"] .form-textarea:focus {
    border-color: #FF5252;
    box-shadow: 0 0 0 3px rgba(255, 82, 82, 0.2);
}

[data-theme="dark"] .form-input::placeholder,
[data-theme="dark"] .form-textarea::placeholder {
    color: #6B7280;
}

[data-theme="dark"] .form-label {
    color: #F3F4F6;
}

[data-theme="dark"] .form-hint {
    color: #6B7280;
}

/* Choice / radio */
[data-theme="dark"] .choice {
    background: #1E1E24;
    border-color: #2A2A32;
}

[data-theme="dark"] .choice:hover {
    background: rgba(255, 82, 82, 0.08);
    border-color: #FF5252;
}

[data-theme="dark"] .choice.is-selected {
    background: rgba(255, 82, 82, 0.12);
    border-color: #FF5252;
}

[data-theme="dark"] .choice-label {
    color: #F3F4F6;
}

/* Tombol Ghost */
[data-theme="dark"] .btn-ghost {
    background: #1E1E24;
    color: #F3F4F6;
    border-color: #2A2A32;
}

[data-theme="dark"] .btn-ghost:hover {
    background: #2A2A32;
}

/* Tombol Secondary */
[data-theme="dark"] .btn-secondary {
    color: #FF5252;
    border-color: #FF5252;
}

[data-theme="dark"] .btn-secondary:hover {
    background: rgba(255, 82, 82, 0.1);
}

/* Alert */
[data-theme="dark"] .alert-success {
    background: rgba(46, 125, 50, 0.15);
    color: #66BB6A;
}
[data-theme="dark"] .alert-warning {
    background: rgba(239, 108, 0, 0.15);
    color: #FFB74D;
}
[data-theme="dark"] .alert-error {
    background: rgba(211, 47, 47, 0.15);
    color: #EF5350;
}
[data-theme="dark"] .alert-info {
    background: rgba(21, 101, 192, 0.15);
    color: #64B5F6;
}

/* Divider */
[data-theme="dark"] .divider {
    background: #1E1E24;
}

[data-theme="dark"] .divider-text {
    color: #6B7280;
}

[data-theme="dark"] .divider-text::before,
[data-theme="dark"] .divider-text::after {
    background: #1E1E24;
}

/* Badge */
[data-theme="dark"] .badge-primary { background: rgba(255,82,82,0.15); color: #FF5252; }
[data-theme="dark"] .badge-success { background: rgba(46,125,50,0.15); color: #66BB6A; }
[data-theme="dark"] .badge-warning { background: rgba(239,108,0,0.15); color: #FFB74D; }
[data-theme="dark"] .badge-error   { background: rgba(211,47,47,0.15); color: #EF5350; }

/* ============================================================
   4. TOGGLE BUTTON
   ============================================================ */
.theme-toggle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--color-bg-card, #fff);
    border: 1px solid var(--color-border, #E0E0E0);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 200ms ease;
    position: relative;
    overflow: hidden;
    font-size: 18px;
    flex-shrink: 0;
}

.theme-toggle:hover {
    border-color: var(--color-primary, #C62828);
    transform: scale(1.05);
}

.theme-toggle:active {
    transform: scale(0.95);
}

.theme-toggle-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
    line-height: 1;
}

.theme-toggle-icon.sun {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(0deg) scale(1);
}

.theme-toggle-icon.moon {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(-90deg) scale(0.5);
}

[data-theme="dark"] .theme-toggle-icon.sun {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(90deg) scale(0.5);
}

[data-theme="dark"] .theme-toggle-icon.moon {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(0deg) scale(1);
}

/* ============================================================
   5. OVERRIDE KHUSUS HALAMAN MEMBER
   ============================================================ */

/* Menu item */
[data-theme="dark"] .menu-item {
    border-bottom-color: #1E1E24;
    color: #F3F4F6;
}

[data-theme="dark"] .menu-item:hover {
    background: #1E1E24;
}

/* Kartu nomor anggota */
[data-theme="dark"] .member-number-badge {
    background: rgba(255, 82, 82, 0.15);
    color: #FF5252;
}

/* Info row */
[data-theme="dark"] .info-row {
    border-bottom-color: #1E1E24;
}

[data-theme="dark"] .info-label {
    color: #6B7280;
}

[data-theme="dark"] .info-value {
    color: #F3F4F6;
}

/* ============================================================
   6. OVERRIDE KHUSUS ADMIN
   ============================================================ */

[data-theme="dark"] .admin-wrapper {
    background: #0A0A0C;
}

[data-theme="dark"] .admin-main {
    background: #0A0A0C;
}

[data-theme="dark"] .admin-stat-card,
[data-theme="dark"] .admin-menu-card,
[data-theme="dark"] .admin-table-wrap {
    background: #141419;
    border-color: #2A2A32;
}

[data-theme="dark"] .admin-menu-card:hover {
    border-color: rgba(255, 82, 82, 0.3);
    box-shadow: 0 8px 24px rgba(255, 82, 82, 0.15);
}

[data-theme="dark"] .admin-table thead {
    background: #1E1E24;
}

[data-theme="dark"] .admin-table td {
    color: #F3F4F6;
    border-bottom-color: #1E1E24;
}

[data-theme="dark"] .admin-table tbody tr:hover {
    background: #1E1E24;
}

[data-theme="dark"] .admin-page-title {
    color: #F3F4F6;
}

[data-theme="dark"] .admin-page-subtitle {
    color: #B0B7C3;
}

[data-theme="dark"] .admin-stat-value {
    color: #F3F4F6;
}

/* ============================================================
   7. OVERRIDE UNTUK SEARCH/FILTER
   ============================================================ */

[data-theme="dark"] .filter-bar,
[data-theme="dark"] .filter-panel {
    background: #141419;
    border-color: #2A2A32;
}

[data-theme="dark"] .filter-bar input,
[data-theme="dark"] .filter-bar select,
[data-theme="dark"] .filter-input,
[data-theme="dark"] .filter-select {
    background: #1E1E24;
    border-color: #2A2A32;
    color: #F3F4F6;
}

[data-theme="dark"] .filter-bar .btn-reset {
    background: #1E1E24;
    color: #F3F4F6;
    border-color: #2A2A32;
}

/* ============================================================
   8. OVERRIDE UNTUK KARTU ANGGOTA
   ============================================================ */

[data-theme="dark"] .photo-wrap {
    background: #1E1E24;
    border-color: #2A2A32;
}

[data-theme="dark"] .section-title {
    color: #F3F4F6;
    border-bottom-color: #1E1E24;
}

/* ============================================================
   9. AUTO MODE — ikuti preferensi sistem
   ============================================================ */
@media (prefers-color-scheme: dark) {
    html:not([data-theme]) {
        /* Sama dengan dark mode di atas */
    }
}

/* ============================================================
   10. SMOOTH TRANSISI
   ============================================================ */
* {
    transition-property: background-color, border-color, color;
    transition-duration: 200ms;
    transition-timing-function: ease;
}

/* Jangan transisi elemen yang butuh instant */
.btn,
.theme-toggle,
.no-transition * {
    transition: all 200ms ease;
}

/* Kecualikan elemen animasi */
[class*="anim-"] {
    transition-property: opacity, transform !important;
}