/* assets/css/style.css */

/* Warna Kustom (sesuaikan dengan branding UTP) */
:root {
    --utp-yellow: #FFD700;   /* Kuning Emas - Untuk Navbar */
    --utp-blue: #004d99;     /* Biru Tua - Untuk Total Ruang, Login Button */
    --bs-success: #28a745;   /* Tetap hijau untuk 'tersedia' */
    --bs-danger: #dc3545;    /* Tetap merah untuk 'terpakai' */
    --bs-light: #f8f9fa;
    --bs-dark: #343a40;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main {
    flex: 1; /* Agar main content mengisi sisa ruang */
}

/* Navbar Styling */
.navbar {
    background-color: var(--utp-yellow) !important; /* Navbar kuning */
}

.navbar-brand {
    color: var(--bs-dark) !important; /* Teks brand gelap */
    font-weight: bold;
}

.navbar-brand img {
    margin-right: 0.5rem;
}

/* Login Button Styling */
.btn-login {
    background-color: var(--utp-blue); /* Biru untuk tombol login */
    color: white;
    border: 1px solid var(--utp-blue);
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

.btn-login:hover {
    background-color: #003366; /* Sedikit lebih gelap saat hover */
    border-color: #003366;
    color: white;
}

/* Status Cards Styling */
.card-stat {
    border-radius: 0.75rem;
    overflow: hidden;
    color: white; /* Teks putih default untuk kartu stats */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
}

.card-stat:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.card-stat.bg-success {
    background-color: var(--bs-success) !important;
}

.card-stat.bg-danger {
    background-color: var(--bs-danger) !important;
}

.card-stat.bg-info { /* Menggunakan info untuk total, bisa diganti secondary */
    background-color: var(--utp-blue) !important; /* Biru tua untuk Total Ruang */
}

/* Text alignment for stats */
.card-stat .card-body {
    text-align: center;
}

.card-stat .display-4 {
    font-weight: bold;
    margin-top: 0.5rem;
}

/* Room Card Grid Styling */
#roomCardGrid .card {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    border-radius: 0.5rem;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

#roomCardGrid .card:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

#roomCardGrid .card-img-top {
    height: 180px; /* Ukuran gambar yang konsisten */
    object-fit: cover;
}

#roomCardGrid .card-body {
    padding: 1rem;
    display: flex;
    flex-direction: column;
}

#roomCardGrid .card-title {
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
}

#roomCardGrid .card-text {
    font-size: 0.95rem;
    margin-bottom: 0.25rem;
}

/* Badge Styling for Status */
.status-badge {
    padding: 0.4em 0.7em;
    border-radius: 0.25rem;
    font-size: 0.85em;
    font-weight: 600;
}

.status-badge.available {
    background-color: var(--bs-success);
    color: white;
}

.status-badge.occupied {
    background-color: var(--bs-danger);
    color: white;
}

/* Skeleton Loader */
.skeleton-loader-row {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: center;
}
.skeleton-loader-row .skeleton-card-item {
    flex: 1 1 calc(33.333% - 10px);
    max-width: calc(33.333% - 10px);
    min-width: 250px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    border-radius: var(--bs-card-border-radius);
    overflow: hidden;
}
@media (max-width: 991.98px) {
    .skeleton-loader-row .skeleton-card-item {
        flex: 1 1 calc(50% - 10px);
        max-width: calc(50% - 10px);
    }
}
@media (max-width: 767.98px) {
    .skeleton-loader-row .skeleton-card-item {
        flex: 1 1 100%;
        max-width: 100%;
    }
}

.skeleton-img {
    width: 100%;
    height: 200px;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite linear;
}

.skeleton-text {
    height: 1em;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite linear;
    margin-bottom: 0.5em;
    border-radius: 4px;
}

.skeleton-text-title {
    width: 70%;
    height: 1.5em;
    margin-bottom: 1em;
}

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

/* Loading Overlay Styles */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.9); /* Sedikit transparan */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.loading-overlay.visible {
    opacity: 1;
    visibility: visible;
}

.loading-overlay .spinner {
    width: 60px;
    height: 60px;
    border: 8px solid #f3f3f3; /* Light grey */
    border-top: 8px solid var(--utp-blue); /* Blue spinner */
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

.loading-overlay p {
    margin-top: 15px;
    color: #555;
    font-size: 1.2rem;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Animasi Fade-in/Fade-out untuk konten SPA */
#spa-content {
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}
#spa-content.loaded {
    opacity: 1;
}