/* ===== Dry Valley Custom Styles ===== */

/* -- Layout -- */
html, body {
    min-height: 100vh;
}
body {
    display: flex;
    flex-direction: column;
}

/* -- Hero section (landing page) -- */
.hero-section {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
}

/* -- Card hover effect -- */
.card-hover {
    transition: transform 0.2s, box-shadow 0.2s;
}
.card-hover:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

/* ===== Status colors ===== */
/* Badges */
.status-badge.status-0  { background-color: #f8f9fa; color: #333; border: 1px solid #ddd; }
.status-badge.status-1  { background-color: #808080; color: #fff; }
.status-badge.status-2  { background-color: #97D159; color: #fff; }
.status-badge.status-3  { background-color: #97D159; color: #fff; }
.status-badge.status-4  { background-color: #97D159; color: #fff; }
.status-badge.status-5  { background-color: #f0ad4e; color: #fff; }
.status-badge.status-6  { background-color: #6c757d; color: #fff; }
.status-badge.status-7  { background-color: #dc3545; color: #fff; }
.status-badge.status-9  { background-color: #9b59b6; color: #fff; }

/* Background fills (room cards and bars) */
.status-bg-0 { background-color: #f8f9fa; color: #333; border: 1px solid #dee2e6; }
.status-bg-1 { background-color: #808080; color: #fff; }
.status-bg-2 { background-color: #97D159; color: #fff; }
.status-bg-3 { background-color: #97D159; color: #fff; }
.status-bg-4 { background-color: #97D159; color: #fff; }
.status-bg-5 { background-color: #f0ad4e; color: #fff; }
.status-bg-6 { background-color: #6c757d; color: #fff; }
.status-bg-7 { background-color: #dc3545; color: #fff; }

/* Table row highlights */
.status-row-0 { }
.status-row-1 { border-left: 4px solid #808080; }
.status-row-2 { border-left: 4px solid #97D159; }
.status-row-3 { border-left: 4px solid #97D159; }
.status-row-4 { border-left: 4px solid #97D159; }
.status-row-5 { border-left: 4px solid #f0ad4e; }
.status-row-6 { border-left: 4px solid #6c757d; }
.status-row-7 { border-left: 4px solid #dc3545; }

/* Filter buttons */
.status-filter-0 { border-color: #adb5bd; color: #333; }
.status-filter-0:hover, .status-filter-0.active { background: #f8f9fa; color: #333; }
.status-filter-1 { border-color: #808080; color: #808080; }
.status-filter-1:hover, .status-filter-1.active { background: #808080; color: #fff; }
.status-filter-2 { border-color: #97D159; color: #5a8a2a; }
.status-filter-2:hover, .status-filter-2.active { background: #97D159; color: #fff; }
.status-filter-5 { border-color: #f0ad4e; color: #a67c28; }
.status-filter-5:hover, .status-filter-5.active { background: #f0ad4e; color: #fff; }
.status-filter-6 { border-color: #6c757d; color: #6c757d; }
.status-filter-6:hover, .status-filter-6.active { background: #6c757d; color: #fff; }
.status-filter-7 { border-color: #dc3545; color: #dc3545; }
.status-filter-7:hover, .status-filter-7.active { background: #dc3545; color: #fff; }

/* ===== Room Grid (Live Viewer) ===== */
.room-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 8px;
    max-width: 1200px;
    margin: 0 auto;
}

.room-card {
    border-radius: 8px;
    padding: 12px 8px;
    text-align: center;
    min-height: 90px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: transform 0.15s, box-shadow 0.15s;
    cursor: default;
}
.room-card:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    z-index: 1;
}

.room-number {
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.2;
}
.room-status-icon {
    font-size: 1rem;
    opacity: 0.85;
    margin-bottom: 2px;
}
.room-info {
    font-size: 0.85rem;
    margin-top: 4px;
}
.room-price { font-weight: 600; }
.room-time { font-weight: 600; }
.room-elapsed { font-weight: 500; }
.room-inactive { font-style: italic; opacity: 0.8; }

/* Grid spacer (physical layout breaks) */
.grid-spacer {
    grid-column: 1 / -1;
    height: 16px;
    border-bottom: 2px dashed #dee2e6;
    margin-bottom: 8px;
}

/* Responsive: fewer columns on small screens */
@media (max-width: 992px) {
    .room-grid { grid-template-columns: repeat(6, 1fr); }
}
@media (max-width: 768px) {
    .room-grid { grid-template-columns: repeat(4, 1fr); gap: 6px; }
    .room-card { min-height: 75px; padding: 8px 4px; }
    .room-number { font-size: 1.1rem; }
}
@media (max-width: 480px) {
    .room-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ===== Dashboard status bar chart ===== */
.status-bar-container {
    height: 120px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}
.status-bar {
    width: 40px;
    border-radius: 4px 4px 0 0;
    min-height: 10px;
    transition: height 0.3s;
}

/* ===== Animations ===== */
.spin {
    animation: spin 2s linear infinite;
}
@keyframes spin {
    100% { transform: rotate(360deg); }
}

/* ===== Dark mode adjustments ===== */
[data-bs-theme="dark"] .status-bg-0 {
    background-color: #2d2d2d;
    color: #ccc;
    border-color: #555;
}
[data-bs-theme="dark"] .hero-section {
    background: linear-gradient(135deg, #0d0d1a 0%, #1a1a3e 50%, #0a1a40 100%);
}
[data-bs-theme="dark"] .grid-spacer {
    border-color: #555;
}

/* ===== Sortable table headers ===== */
.sortable { user-select: none; cursor: pointer; }
.sortable:hover { background-color: rgba(255,255,255,0.1); }
.sort-asc .bi-arrow-down-up::before { content: "\F127"; }
.sort-desc .bi-arrow-down-up::before { content: "\F128"; }