/* CSS Variables for Theming */
:root {
  --bg-primary: #1f1f1f;
  --bg-secondary: #1e1e1e;
  --bg-tertiary: #111;
  --bg-button: #222;
  --bg-hover: #2a2a2a;
  --bg-today: #102a43;
  --bg-today-slot: #0f1b2a;
  --text-primary: #ddd;
  --text-secondary: #bbb;
  --text-muted: #aaa;
  --border-color: #2a2a2a;
  --shadow: rgba(0,0,0,.35);
  --green: #2e7d32;
  --green-dark: #1b5e20;
  --red: #c62828;
  --red-dark: #8e0000;
  --yellow: #fdd835;
  --outline: rgba(255,255,255,.2);
}

/* Light Mode Variables */
.light-mode {
  --bg-primary: #f5f5f5;
  --bg-secondary: #ffffff;
  --bg-tertiary: #ffffff;
  --bg-button: #e0e0e0;
  --bg-hover: #d0d0d0;
  --bg-today: #e3f2fd;
  --bg-today-slot: #f0f8ff;
  --text-primary: #333;
  --text-secondary: #555;
  --text-muted: #777;
  --border-color: #ccc;
  --shadow: rgba(0,0,0,.1);
  --green: #4caf50;
  --green-dark: #388e3c;
  --red: #f44336;
  --red-dark: #d32f2f;
  --yellow: #ffeb3b;
  --outline: rgba(0,0,0,.2);
}

/* Weekly Schedule Grid */
.schedule-container {
    width: 100%;
}
.mobile-only { display: none; }
.week-nav {
    display: flex;
    justify-content: space-between;
    margin-bottom: 1rem;
}
.legend {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1rem;
    padding: 0.5rem;
    background-color: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 0.375rem;
}
.legend-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.legend-box {
    width: 80px;
    justify-content: center;
}
.schedule-grid-container {
    overflow-x: auto;
}
.schedule-grid {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}
.schedule-grid th, .schedule-grid td {
    border: 1px solid var(--border-color);
    padding: 0.5rem;
    text-align: left;
    vertical-align: top;
}
.schedule-grid th {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
}
.schedule-grid th.today {
    background-color: var(--bg-today);
}
.schedule-grid td.schedule-slot {
    min-width: 150px;
}
.schedule-grid td.schedule-slot.today {
    background-color: var(--bg-today-slot);
}
.device-availability {
    padding: 0.35rem 0.4rem;
    margin-bottom: 0.3rem;
    border-radius: 6px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.92em;
    color: var(--text-primary);
}
.device-name { font-weight: 500; }
.device-info {
    flex: 1;
}
.device-actions { display:none; }
.info-btn {
    margin-left: .4rem;
    width: 22px;
    height: 22px;
    aspect-ratio: 1/1;
    border-radius: 50%;
    border: 1px solid var(--border-color);
    background: var(--bg-button);
    color: var(--text-primary);
    font-size: 12px;
    line-height: 22px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.info-btn:hover { background: var(--bg-hover); }
.popover {
    position: absolute;
    z-index: 10;
    transform: translateY(6px);
    min-width: 220px;
    max-width: 280px;
    padding: .5rem .6rem;
    background: var(--bg-primary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    box-shadow: 0 8px 20px var(--shadow);
}
.popover[aria-hidden="true"] { display: none; }
.device-info { position: relative; }
.popover ul { margin: .25rem 0 0 1rem; padding: 0; }
.popover li { margin: .1rem 0;color: var(--text-primary); }
.cancel-chip {
    width: 22px;
    height: 22px;
    aspect-ratio: 1/1;
    border-radius: 50%;
    border: 1px solid var(--border-color);
    background: var(--red);
    color: white;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
}
.cancel-chip:hover { background: var(--red-dark); }
.reserve-btn, .cancel-btn {
    display:none;
}
.reserve-btn {
    background-color: var(--green);
    color: white;
}
.reserve-btn:hover {
    background-color: var(--green-dark);
}
.cancel-btn {
    background-color: var(--red);
    color: white;
}
.cancel-btn:hover {
    background-color: var(--red-dark);
}
.device-availability.capacity-free {
    background-color: rgba(76, 175, 80, 0.18);
    border-left: 3px solid var(--green);
}
.device-availability.clickable { cursor: pointer; }
.device-availability.clickable:hover { outline: 1px dashed var(--outline); }
.device-availability.capacity-partial {
    background-color: rgba(255, 235, 59, 0.12);
    border-left: 3px solid var(--yellow);
}
.device-availability.capacity-full {
    background-color: rgba(244, 67, 54, 0.18);
    border-left: 3px solid var(--red);
    color: var(--text-secondary);
}
.modal {
    max-width: 400px;
}

/* Theme Toggle Button */
.theme-toggle {
    position: fixed;
    top: 1rem;
    right: 1rem;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 2px solid var(--border-color);
    background: var(--bg-button);
    color: var(--text-primary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    z-index: 1000;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px var(--shadow);
}
.theme-toggle:hover {
    background: var(--bg-hover);
    transform: scale(1.05);
}
.theme-toggle:active {
    transform: scale(0.95);
}

/* Mobile Navigation */
.mobile-nav-toggle {
    display: none;
    background: none;
    border: 2px solid var(--border-color);
    border-radius: 6px;
    padding: 0.5rem;
    cursor: pointer;
    color: var(--text-primary);
    font-size: 18px;
    margin-left: 1rem;
    min-width: 44px;
    min-height: 44px;
}
.mobile-nav-toggle:hover {
    background: var(--bg-hover);
}

.nav-links {
    transition: all 0.3s ease;
}

.nav-links.mobile-hidden {
    display: none;
}

/* Mobile Header Improvements */
@media (max-width: 768px) {
    body {
        padding: 0 1rem;
    }
    
    header h2 {
        font-size: 1.5rem;
        margin-bottom: 0.5rem;
    }
    
    .mobile-nav-toggle {
        display: block;
    }
    
    .nav-links {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
        margin-top: 1rem;
        padding: 1rem;
        background: var(--bg-secondary);
        border: 1px solid var(--border-color);
        border-radius: 8px;
    }
    
    .nav-links.mobile-hidden {
        display: none;
    }
    
    .nav-links a {
        display: block;
        padding: 0.5rem 0;
        border-bottom: 1px solid var(--border-color);
        width: 100%;
    }
    
    .nav-links a:last-child {
        border-bottom: none;
    }
    
    .theme-toggle {
        top: 0.5rem;
        right: 0.5rem;
        width: 44px;
        height: 44px;
    }
}

/* Enhanced Responsive Design */
@media (max-width: 820px) {
    .mobile-only { display: block; margin-bottom: .75rem; }
    .schedule-grid { 
        table-layout: auto; 
        font-size: 0.9rem;
    }
    .schedule-grid th, .schedule-grid td { 
        padding: 0.5rem 0.3rem; 
    }
    .schedule-grid th { 
        position: sticky; 
        top: 0; 
        z-index: 2;
        font-size: 0.85rem;
    }
    .schedule-grid td.schedule-slot { 
        min-width: auto; 
    }
    .device-availability { 
        gap: 0.5rem;
        padding: 0.5rem 0.4rem;
        font-size: 0.9rem;
    }
    .reserve-btn, .cancel-btn { 
        width: 36px; 
        height: 36px; 
        line-height: 36px; 
        font-size: 16px; 
        min-width: 44px;
        min-height: 44px;
    }
    .info-btn { 
        width: 32px; 
        height: 32px; 
        line-height: 32px;
        min-width: 44px;
        min-height: 44px;
    }
    .cancel-chip {
        width: 28px;
        height: 28px;
        min-width: 44px;
        min-height: 44px;
    }
}

/* Touch-friendly improvements for all interactive elements */
button, .info-btn, .cancel-chip, .reserve-btn, .cancel-btn {
    min-width: 44px;
    min-height: 44px;
    touch-action: manipulation;
}

/* Better mobile spacing */
@media (max-width: 480px) {
    .schedule-container {
        margin: 0 -0.5rem;
    }
    
    .legend {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .legend-item {
        justify-content: flex-start;
    }
    
    .device-availability {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.3rem;
    }
    
    .device-info {
        width: 100%;
    }
    
    .device-actions {
        width: 100%;
        justify-content: flex-end;
    }
}