/*
 * =============================================================================
 * Custom Components — Sistem Diakonia
 * =============================================================================
 */

/* =============================================================================
   HOTWIRE TURBO — Progress Bar Custom Styling
   Turbo menampilkan progress bar tipis saat SPA navigation berlangsung.
   Kustomisasi di sini agar sesuai dengan tema Vuexy (warna ungu/primary).
   ============================================================================= */

.turbo-progress-bar {
    height: 3px;
    background: linear-gradient(
        90deg,
        var(--bs-primary) 0%,
        var(--bs-primary-text) 50%,
        var(--bs-primary) 100%
    );
    background-size: 200% 100%;
    animation: turbo-shimmer 1.2s ease-in-out infinite;
    box-shadow: 0 0 8px rgba(24, 57, 123, 0.6);
}

@keyframes turbo-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}


/* =============================================================================
   TURBO FRAME — Transisi halus saat konten diganti
   ============================================================================= */

turbo-frame {
    display: block;
}

/* Fade-in konten baru setelah Turbo navigation */
@keyframes turbo-page-enter {
    from {
        opacity: 0;
        transform: translateY(4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

body.turbo-animating .content-wrapper {
    animation: turbo-page-enter 0.18s ease-out;
}


/* =============================================================================
   DATATABLES — Konsistensi tampilan di seluruh modul
   ============================================================================= */

/* Header tabel dengan warna subtle */
.datatable-header th {
    background-color: #f8f7fa;
    font-weight: 600;
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #5d596c;
    border-bottom: 2px solid #dbdade;
}

/* Hover row lebih terlihat */
.table tbody tr:hover {
    background-color: #f5f4ff;
    transition: background-color 0.15s ease;
}

/* Badge status konsisten */
.badge-status-aktif    { background-color: #28c76f1a; color: #28c76f; }
.badge-status-nonaktif { background-color: #ea54551a; color: #ea5455; }
.badge-status-pending  { background-color: #ff9f431a; color: #ff9f43; }
.badge-status-verifikasi { background-color: #00cfe81a; color: #00cfe8; }


/* =============================================================================
   CARD — Micro-animation saat hover
   ============================================================================= */

.card {
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.card:hover {
    box-shadow: 0 4px 24px rgba(24, 57, 123, 0.12);
}

.card-hover-lift:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(24, 57, 123, 0.18);
}


/* =============================================================================
   FORM — Konsistensi focus state
   ============================================================================= */

.form-control:focus,
.form-select:focus {
    border-color: #18397B;
    box-shadow: 0 0 0 0.2rem rgba(24, 57, 123, 0.15);
}

/* Required field indicator */
.form-label.required::after,
label.required::after {
    content: " *";
    color: #ea5455;
    font-weight: 600;
}


/* =============================================================================
   NAV-PILLS — Tab di halaman detail (mis. admin/anak_asuh/show,
   admin/ota/show). Bawaan Bootstrap: nav-link yang TIDAK aktif tidak
   punya border/background sama sekali, jadi kelihatan seperti teks biasa,
   bukan tombol yang bisa diklik. Diperjelas di sini sekali untuk semua
   halaman yang pakai .nav-pills, bukan per-halaman.
   ============================================================================= */

.nav-pills {
    gap: 0.5rem;
}

.nav-pills .nav-link {
    background-color: #fff;
    border: 1px solid #dbdade;
    color: #5d596c;
    font-weight: 500;
    box-shadow: 0 1px 2px rgba(24, 57, 123, 0.06);
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.nav-pills .nav-link:hover {
    border-color: #18397B;
    background-color: #f5f4ff;
    color: #18397B;
}

.nav-pills .nav-link.active {
    background-color: #18397B;
    border-color: #18397B;
    color: #fff;
    box-shadow: 0 2px 10px rgba(24, 57, 123, 0.3);
}

[data-bs-theme="dark"] .nav-pills .nav-link,
.layout-menu-dark .nav-pills .nav-link {
    background-color: #2f3349;
    border-color: #434968;
    color: #d3d0e0;
}

[data-bs-theme="dark"] .nav-pills .nav-link:hover,
.layout-menu-dark .nav-pills .nav-link:hover {
    background-color: #363b54;
    border-color: #3D5FA8;
    color: #fff;
}


/* =============================================================================
   SIDEBAR — Active menu indicator
   ============================================================================= */

.menu-item.active > .menu-link {
    border-left: none;
}


/* =============================================================================
   MOBILE FIRST — Responsive utilities
   ============================================================================= */

/* Halaman Auth di mobile */
@media (max-width: 576px) {
    .authentication-inner {
        padding: 1rem !important;
    }

    .card-body {
        padding: 1.25rem !important;
    }

    .wizard-steps {
        flex-direction: column;
        gap: 6px;
    }

    .wizard-step {
        min-width: unset;
        padding: 8px 12px;
        text-align: left;
    }

    /* Tabel scroll horizontal di mobile */
    .table-responsive-stack {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Action buttons di mobile: full width */
    .mobile-full-btn {
        width: 100%;
        margin-top: 0.5rem;
    }
}

/* Sticky action bar untuk form panjang di mobile */
@media (max-width: 768px) {
    .sticky-form-actions {
        position: sticky;
        bottom: 0;
        background: #fff;
        border-top: 1px solid #dbdade;
        padding: 0.75rem 1rem;
        margin: 0 -1rem -1rem;
        z-index: 10;
        display: flex;
        gap: 0.5rem;
    }
}


/* =============================================================================
   LOADING STATES
   ============================================================================= */

/* Skeleton loading untuk tabel */
.skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s ease-in-out infinite;
    border-radius: 4px;
}

@keyframes skeleton-loading {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.skeleton-row {
    height: 20px;
    margin-bottom: 12px;
}


/* =============================================================================
   PRINT — Menyembunyikan elemen tidak perlu saat cetak
   ============================================================================= */

@media print {
    .layout-menu,
    .navbar,
    .btn-export,
    .dataTables_filter,
    .dataTables_paginate {
        display: none !important;
    }

    .content-wrapper {
        margin: 0 !important;
        padding: 0 !important;
    }
}


/* =============================================================================
   CUSTOM LOGO "SD"
   ============================================================================= */

.app-brand-logo.sd-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    background: var(--bs-primary);
    color: #fff;
    font-weight: 700;
    font-size: 16px;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(24, 57, 123, 0.4);
    letter-spacing: 1px;
    line-height: 1;
}

.app-brand-text {
    font-size: 1.25rem;
}