@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;700&display=swap');

/* ========================================= */
/* 🚀 THEME VARIABLES (From portals.css)     */
/* ========================================= */
:root {
    --theme-primary: #0D47A1;
    --theme-secondary: #6f42c1;
    --theme-success: #28a745;
    --theme-danger: #dc3545;
    --theme-warning: #ffc107;
    --theme-info: #17a2b8;
    --theme-grey: #777777;

    --bg-body: #f4f7f6;
    --bg-card: #ffffff;
    --bg-panel: #f8f9fa;
    --bg-input: #ffffff;
    
    --text-main: #333333;
    --text-muted: #666666;
    --text-inverse: #ffffff;

    --border-color: #dddddd;
    --border-light: #eeeeee;
}

[data-theme="dark"] {
    --bg-body: #121212;
    --bg-card: #1e1e1e;
    --bg-panel: #2a2a2a;
    --bg-input: #2a2a2a;
    
    --text-main: #e0e0e0;
    --text-muted: #aaaaaa;
    --text-inverse: #ffffff;

    --border-color: #444444;
    --border-light: #333333;
}

/* 1. Make all "pink" hitboxes invisible but fully clickable */
#b_security, #b_church_0, #b_church_1, #b_market, #b_library, 
#b_mechanical, #b_out_room, #b_bakery, #b_play, #b_bathrooms, 
#b_tower, #b_basement, #b_utility, #b_service_0, #b_service_1, 
#b_service_2, #b_service_3 {
    opacity: 0;
    cursor: pointer;
    pointer-events: all !important;
}

/* 2. Add a smooth transition to the 3D drawings so the glow fades in nicely */
#a_security, #a_library, #a_play, #a_bathrooms, #a_market, 
#a_church_0, #a_church_1, #a_mechanical, #a_tower, #a_out_room, 
#a_bakery, #a_basement, #a_utility, #a_service_0, #a_service_1, 
#a_service_2, #a_service_3 {
    transition: all 0.3s ease;
}

/* 3. The Hover Link: Connects the hovered B item to the A item */
.svg-map-wrapper svg:has(#b_security:hover) #a_security,
.svg-map-wrapper svg:has(#b_church_0:hover) #a_church_0,
.svg-map-wrapper svg:has(#b_church_1:hover) #a_church_1,
.svg-map-wrapper svg:has(#b_market:hover) #a_market,
.svg-map-wrapper svg:has(#b_library:hover) #a_library,
.svg-map-wrapper svg:has(#b_mechanical:hover) #a_mechanical,
.svg-map-wrapper svg:has(#b_out_room:hover) #a_out_room,
.svg-map-wrapper svg:has(#b_bakery:hover) #a_bakery,
.svg-map-wrapper svg:has(#b_play:hover) #a_play,
.svg-map-wrapper svg:has(#b_bathrooms:hover) #a_bathrooms,
.svg-map-wrapper svg:has(#b_tower:hover) #a_tower,
.svg-map-wrapper svg:has(#b_basement:hover) #a_basement,
.svg-map-wrapper svg:has(#b_utility:hover) #a_utility,
.svg-map-wrapper svg:has(#b_service_0:hover) #a_service_0,
.svg-map-wrapper svg:has(#b_service_1:hover) #a_service_1,
.svg-map-wrapper svg:has(#b_service_2:hover) #a_service_2,
.svg-map-wrapper svg:has(#b_service_3:hover) #a_service_3 {
    
    /* The Glow Effect - adjust colors and blur as needed */
    filter: drop-shadow(0px 0px 12px var(--theme-primary)) brightness(1.15);
    
}

/* ========================================= */
/* 🚀 GLOBAL RESET & LOGIN LAYOUT            */
/* ========================================= */
*, *::before, *::after { box-sizing: border-box !important; }

body {
    font-family: 'Tajawal', sans-serif;
    background-color: var(--bg-body);
    margin: 0; padding: 0; color: var(--text-main);
    transition: background-color 0.3s ease, color 0.3s ease;
}

h1, h2, h3, h4 { font-family: 'Tajawal', sans-serif; margin-top: 0; }

.floating-theme-btn, .floating-lang-btn {
    position: absolute; top: 20px;
    background: var(--bg-panel); border: 1px solid var(--border-color); border-radius: 20px;
    padding: 8px 15px; cursor: pointer; color: var(--text-main); font-weight: bold;
    white-space: nowrap; /* Prevents text from breaking to a new line */
    min-width: 80px;     /* Ensures enough space for Arabic text */
    text-align: center;
}
.floating-theme-btn { right: 20px; }
.floating-lang-btn { right: 140px; }
[dir="rtl"] .floating-theme-btn { right: auto; left: 20px; }
[dir="rtl"] .floating-lang-btn { right: auto; left: 140px; }

.login-container { display: none; }
.login-container.active {
    display: flex !important; flex-direction: column; align-items: center; justify-content: center;
    min-height: 100vh; width: 100%;
}

.login-card {
    width: 90%; max-width: 400px; padding: 30px; background: var(--bg-card);
    border-radius: 15px; box-shadow: 0 4px 20px rgba(0,0,0,0.1); text-align: center;
}
.portal-logo { max-width: 120px; margin-bottom: 20px; }

.error-msg {
    background-color: rgba(220, 53, 69, 0.1); color: var(--theme-danger);
    padding: 10px; border-radius: 8px; margin-bottom: 15px; font-weight: bold; font-size: 0.9rem;
}

.input-group { margin-bottom: 15px; }
.input-group input {
    width: 100%; padding: 12px; border: 1px solid var(--border-color);
    background: var(--bg-input); color: var(--text-main);
    border-radius: 8px; font-size: 1rem; font-family: inherit;
}
.input-group input:focus { border-color: var(--theme-primary); outline: none; }

.btn-primary {
    background-color: var(--theme-primary); color: var(--text-inverse); border: none; padding: 12px 20px;
    border-radius: 8px; font-size: 1rem; cursor: pointer; font-weight: bold;
    transition: 0.2s; font-family: inherit; width: 100%;
}
.btn-primary:hover { opacity: 0.9; transform: translateY(-1px); }

.divider { margin: 20px 0; border-bottom: 1px solid var(--border-light); position: relative; }
.divider span {
    position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
    background: var(--bg-card); padding: 0 10px; color: var(--text-muted); font-size: 0.9rem;
}

.btn-google {
    display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%;
    padding: 12px; background: var(--bg-card); border: 1px solid var(--border-color); color: var(--text-main); 
    border-radius: 8px; font-weight: bold; cursor: pointer; font-family: inherit;
}
[dir="rtl"] .btn-google { flex-direction: row-reverse; }

/* ========================================= */
/* 🚀 DASHBOARD LAYOUT                       */
/* ========================================= */
.app-header {
    display: flex; justify-content: space-between; align-items: center;
    background: var(--bg-card); padding: 15px 30px; border-bottom: 1px solid var(--border-color);
}
.header-left { display: flex; align-items: center; gap: 15px; }
.header-left h2 { margin: 0; color: var(--theme-primary); }
.header-right { display: flex; align-items: center; gap: 15px; }

.user-info { display: flex; flex-direction: column; align-items: center; }
[dir="rtl"] .user-info { align-items: center; }
.badge { background: var(--theme-secondary); color: #fff; padding: 3px 8px; border-radius: 12px; font-size: 0.8rem; }

.icon-btn {
    background: var(--bg-panel); border: 1px solid var(--border-color);
    border-radius: 50%; width: 40px; height: 40px; cursor: pointer; color: var(--text-main);
}
.btn-outline {
    background: transparent; border: 1px solid var(--theme-danger); color: var(--theme-danger);
    padding: 8px 15px; border-radius: 8px; cursor: pointer; font-weight: bold;
    white-space: nowrap; /* Forces text to stay on one line */
    min-width: max-content; /* Forces the border to wrap the full text width */
}
.btn-outline:hover { background: var(--theme-danger); color: #fff; }

.app-layout { display: flex; height: calc(100vh - 71px); overflow: hidden; }

.sidebar {
    width: 250px; background: var(--bg-card); border-right: 1px solid var(--border-color);
    padding: 20px 0; overflow-y: auto;
}
[dir="rtl"] .sidebar { border-right: none; border-left: 1px solid var(--border-color); }

.tabs { display: flex; flex-direction: column; }
.tab-btn {
    background: transparent; border: none; padding: 15px 25px; text-align: left;
    font-size: 1.1rem; color: var(--text-main); cursor: pointer; border-left: 4px solid transparent;
    display: flex; justify-content: space-between; align-items: center;
}
[dir="rtl"] .tab-btn { text-align: right; border-left: none; border-right: 4px solid transparent; }
.tab-btn:hover { background: var(--bg-panel); }
.tab-btn.active { background: var(--bg-panel); color: var(--theme-primary); border-left-color: var(--theme-primary); font-weight: bold; }
[dir="rtl"] .tab-btn.active { border-right-color: var(--theme-primary); border-left-color: transparent; }

.badge-count { background: var(--theme-danger); color: #fff; padding: 2px 8px; border-radius: 12px; font-size: 0.8rem; }

.main-content { flex: 1; padding: 30px; overflow-y: auto; background: var(--bg-body); }
.tab-content { display: none; animation: fadeIn 0.3s ease; }
.tab-content.active { display: block; }

@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* ========================================= */
/* 🚀 MAP & BOOKING UI                       */
/* ========================================= */
/* 🚀 UNIFIED CAMPUS LAYOUT */
.campus-layout { display: flex; gap: 20px; align-items: flex-start; }

/* Changed to CSS Grid for side-by-side maps */
.maps-container { 
    flex: 3; /* Increased slightly to give the two maps more breathing room */
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    gap: 20px; 
}

.map-section { 
    background: var(--bg-card); border-radius: 12px; border: 1px solid var(--border-color); 
    padding: 20px; display: flex; flex-direction: column; 
}
.map-section-title { 
    margin-top: 0; margin-bottom: 15px; color: var(--theme-primary); 
    border-bottom: 2px solid var(--border-light); padding-bottom: 10px; 
}

.svg-map-wrapper {
    display: flex; justify-content: center; align-items: center; overflow: hidden;
    min-height: 400px;
}
.svg-map-wrapper svg { 
    width: 100%; 
    height: 100%; 
    object-fit: contain; 
}

/* 🚀 ARCHITECT FIX: The "Ghost Click" Bounding Box Fix */
.svg-map-wrapper, .svg-map-wrapper svg, .svg-map-wrapper svg * {
    /* Forces the mouse to pass through transparent overlapping boxes and only hit actual drawn colors */
    pointer-events: visiblePainted; 
    /* Stops mobile browsers from flashing a giant blue/grey box when the map is tapped */
    -webkit-tap-highlight-color: transparent; 
}

/* Interactive SVG Paths */
.svg-map-wrapper path[id], 
.svg-map-wrapper g[id] {
    cursor: pointer; 
    transition: all 0.3s ease;
}
.svg-map-wrapper path[id]:hover {
    filter: brightness(1.1); stroke: var(--theme-primary); stroke-width: 3px;
}

.booking-panel {
    flex: 1; background: var(--bg-card); border-radius: 12px; border: 1px solid var(--border-color);
    padding: 20px; display: flex; flex-direction: column; max-width: 400px;
}

.booking-form { margin-top: 10px; display: flex; flex-direction: column; gap: 10px; }
.booking-form label { font-weight: bold; color: var(--text-main); }
.booking-form input {
    padding: 12px; border: 1px solid var(--border-color); border-radius: 8px;
    background: var(--bg-input); color: var(--text-main); font-family: inherit;
}

/* Data Tables */
.table-responsive { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.data-table { width: 100%; border-collapse: collapse; background: var(--bg-card); border-radius: 10px; overflow: hidden; min-width: 600px; }
.data-table th, .data-table td { padding: 15px; text-align: left; border-bottom: 1px solid var(--border-light); }
[dir="rtl"] .data-table th, [dir="rtl"] .data-table td { text-align: right; }
.data-table th { background: var(--theme-primary); color: #fff; }

/* Collapse the 2-column grid back to 1 column on tablets and smaller */
@media (max-width: 1024px) {
    .maps-container { grid-template-columns: 1fr; }
    .campus-layout { flex-direction: column; }
    .booking-panel { max-width: 100%; width: 100%; }
}

/* 🚀 ROOM SELECTOR LIST */
.room-list-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 15px;
}

.room-list-item {
    background: var(--bg-panel);
    border: 1px solid var(--border-color);
    padding: 15px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: bold;
    color: var(--text-main);
    transition: all 0.2s ease;
    text-align: center;
}

.room-list-item:hover {
    background: var(--theme-primary);
    color: var(--text-inverse);
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.mb-3 { margin-bottom: 15px; }


/* ========================================= */
/* 🚀 CAMPUS MAP & BOOKING LAYOUT FIXES      */
/* ========================================= */

.campus-layout { 
    display: flex; gap: 20px; align-items: flex-start; width: 100%; 
}

/* The Maps Side (Grid) */
.maps-container { 
    flex: 3; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; min-width: 0; 
}

.map-section { 
    background: var(--bg-card); border-radius: 12px; border: 1px solid var(--border-color); 
    padding: 20px; display: flex; flex-direction: column; 
}
.map-section-title { 
    margin-top: 0; margin-bottom: 15px; color: var(--theme-primary); 
    border-bottom: 2px solid var(--border-light); padding-bottom: 10px; 
}

/* Fix the Tiny SVGs */
.svg-map-wrapper {
    display: flex; justify-content: center; align-items: center; 
    min-height: 400px; width: 100%; overflow: hidden;
}
.svg-map-wrapper svg { 
    width: 100%; height: 100%; object-fit: contain; 
}

/* The Right Panel (Booking / Rooms) */
.booking-panel {
    flex: 1; background: var(--bg-card); border-radius: 12px; border: 1px solid var(--border-color);
    padding: 20px; display: flex; flex-direction: column; min-width: 320px; max-width: 400px;
}

/* Fix the Horizontal Form Inputs */
.booking-form { 
    margin-top: 0px; display: flex; flex-direction: column; gap: 10px; 
}
.booking-form label { font-weight: bold; color: var(--text-main); margin-top: 10px; }
.booking-form input {
    padding: 12px; border: 1px solid var(--border-color); border-radius: 8px;
    background: var(--bg-input); color: var(--text-main); font-family: inherit; width: 100%;
}

/* Room Selector List */
.room-list-grid { display: flex; flex-direction: column; gap: 10px; margin-top: 15px; }
.room-list-item {
    background: var(--bg-panel); border: 1px solid var(--border-color); padding: 15px;
    border-radius: 8px; cursor: pointer; font-weight: bold; color: var(--text-main);
    transition: all 0.2s ease; text-align: center;
}
.room-list-item:hover {
    background: var(--theme-primary); color: var(--text-inverse);
    transform: translateY(-2px); box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
.mb-3 { margin-bottom: 15px; }

/* 🚀 ADVANCED SEARCH BAR STYLES */
.search-bar-container {
    background: var(--bg-card); 
    padding: 15px 20px; 
    border-radius: 12px; 
    border: 1px solid var(--border-color); 
    margin-bottom: 20px; 
    display: flex; 
    gap: 15px; 
    align-items: flex-end; 
    flex-wrap: wrap; 
    width: 100%;
}
.search-input-group { flex: 1; min-width: 150px; }
.search-btn-group { display: flex; gap: 10px; align-items: flex-end; }

/* Collapse the 2-column grid back to 1 column on tablets and smaller */
@media (max-width: 1024px) {
    .maps-container { grid-template-columns: 1fr; }
    .campus-layout { flex-direction: column; }
    .booking-panel { max-width: 100%; width: 100%; }
}

/* 🚀 COMPREHENSIVE MOBILE SPECIFIC FIXES */
@media (max-width: 768px) {
    /* Header Fixes */
    .app-header { flex-direction: column; gap: 15px; padding: 15px; text-align: center; }
    .header-left { flex-direction: column; width: 100%; }
    .app-header .portal-logo { margin-right: 0; margin-bottom: 10px; }
    .header-right { width: 100%; justify-content: center; flex-wrap: wrap; gap: 10px; }
    .user-info { width: 100%; align-items: center !important; margin-bottom: 5px; }
    [dir="rtl"] .user-info { align-items: center !important; }
    
    /* Sidebar & Navigation */
    .app-layout { flex-direction: column; overflow-y: auto; height: auto; }
    .sidebar { width: 100%; border-right: none; border-bottom: 1px solid var(--border-color); padding: 0; }
    [dir="rtl"] .sidebar { border-left: none; }
    .tabs { flex-direction: row; overflow-x: auto; white-space: nowrap; padding-bottom: 5px; }
    .tab-btn { border: none !important; border-bottom: 3px solid transparent !important; padding: 12px 15px; }
    .tab-btn.active { border-bottom-color: var(--theme-primary) !important; }
    
    /* Forms & Search */
    .search-bar-container { flex-direction: column; align-items: stretch; gap: 10px; }
    .search-input-group { min-width: 100%; }
    .search-btn-group { flex-direction: column; width: 100%; }
    .search-btn-group button { width: 100%; }
    
    /* Map & Layout Overrides */
    .campus-layout { flex-direction: column !important; width: 100%; }
    .maps-container { display: flex !important; flex-direction: column !important; width: 100%; flex: unset !important; }
    .map-section { padding: 15px; }
    .svg-map-wrapper { min-height: 250px !important; }
    .booking-panel { max-width: 100% !important; width: 100% !important; flex: unset !important; }
    
    /* Timeline Overrides (Better Touch Targets) */
    .time-slot { padding: 12px 5px; font-size: 0.9rem; } 
}

/* ========================================= */
/* 🚀 SCHEDULE TIMELINE GRID                 */
/* ========================================= */
.timeline-grid {
    display: grid;
    grid-template-columns: repeat(16, 65px); /* Desktop default: 16 slots */
    justify-content: center;
    gap: 8px;
    user-select: none; 
}

/* Keep both the map section and booking panel perfectly synced */
.sync-width {
    max-width: 1200px;
    margin: 0 auto;
    transition: max-width 0.2s ease;
}

/* Responsive breakpoints snapping to exact slot counts */
@media (max-width: 1250px) { 
    .timeline-grid { grid-template-columns: repeat(12, 65px); }
    .sync-width { max-width: 908px; }
}
@media (max-width: 950px) { 
    .timeline-grid { grid-template-columns: repeat(8, 65px); }
    .sync-width { max-width: 616px; }
}
@media (max-width: 650px) { 
    .timeline-grid { grid-template-columns: repeat(4, 65px); }
    .sync-width { max-width: 324px; }
}

.time-slot {
    padding: 10px 5px; /* Slightly smaller padding */
    border-radius: 8px;
    text-align: center;
    font-weight: bold;
    font-size: 0.85rem; /* Smaller text to fit HH:MM */
    cursor: pointer;
    transition: all 0.1s ease; /* Faster transition for smooth drag painting */
    border: 2px solid transparent;
}

/* Slot States */
.slot-available {
    background-color: rgba(40, 167, 69, 0.1);
    color: var(--theme-success);
    border-color: rgba(40, 167, 69, 0.3);
}
.slot-available:hover { background-color: rgba(40, 167, 69, 0.2); }

.slot-booked {
    background-color: rgba(220, 53, 69, 0.1);
    color: var(--theme-danger);
    border-color: rgba(220, 53, 69, 0.3);
    cursor: not-allowed;
    opacity: 0.6;
}

.slot-selected {
    background-color: var(--theme-primary);
    color: var(--text-inverse);
    border-color: var(--theme-primary);
    transform: scale(1.05);
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}
/* 🚀 PENDING SLOT STYLE */
.slot-pending {
    background-color: rgba(255, 193, 7, 0.15); /* Light yellow/orange */
    color: var(--theme-warning); /* Orange text */
    border-color: rgba(255, 193, 7, 0.4);
    cursor: pointer;
}
/* 🚀 DISABLED (PAST) SLOT STYLE */
.slot-disabled {
    background-color: var(--bg-panel);
    color: var(--text-muted);
    border-color: var(--border-light);
    cursor: not-allowed;
    opacity: 0.4; /* Dims the slot significantly */
}

/* 🚀 ADMIN TABLE HIGHLIGHT ANIMATION */
@keyframes flashHighlight {
    0% { background-color: transparent; }
    20% { background-color: rgba(220, 53, 69, 0.3); } /* Red/Warning flash */
    80% { background-color: rgba(220, 53, 69, 0.3); }
    100% { background-color: transparent; }
}

.highlight-row {
    animation: flashHighlight 3s ease-in-out;
}

/* 🚀 HEADER BUTTON FIXES */
#lang-toggle-btn {
    width: auto;             /* Allow it to stretch wider than 40px */
    border-radius: 20px;     /* Make it a pill shape instead of a circle */
    padding: 0 15px;         /* Add breathing room on the left and right */
    font-weight: bold;
}

#user-role:empty {
    display: none; /* Automatically hides the purple badge if there is no role to display */
}

/* 🚀 SEARCH MODE HIGHLIGHTS */
.zone-available { 
    filter: drop-shadow(0px 0px 15px var(--theme-success)) brightness(1.1) !important; 
    transition: all 0.3s ease;
}
.zone-booked { 
    filter: drop-shadow(0px 0px 15px var(--theme-danger)) opacity(0.6) grayscale(0.5) !important; 
    cursor: not-allowed !important;
    transition: all 0.3s ease;
}

/* 🚀 LOGO RESIZING FIXES */

/* 1. The Login Screen Logo */
#login-screen .portal-logo {
    max-width: 180px; /* Adjust this number to make it bigger or smaller */
    height: auto;
    margin: 0 auto 20px auto; 
    display: block;
}

/* 2. The Dashboard Header Logo */
.app-header .portal-logo {
    height: 40px; /* Locks the height to perfectly fit inside the header bar */
    width: auto;
    margin-right: 15px;
    object-fit: contain;
}