:root {
     --primary-color: #4F46E5;
     --secondary-color: #059669;
     --accent-color: #D946EF;
     --warning-color: #F59E0B;
     --dark-color: #0A141D;
     --light-color: #F8FAFC;
    /* Shadows & animation tokens */
    --card-shadow: 0 12px 30px rgba(2,6,23,0.08);
    --card-shadow-strong: 0 30px 60px rgba(2,6,23,0.12);
    --glow-shadow: 0 8px 30px rgba(79,70,229,0.12);
    --soft-transition: 280ms cubic-bezier(.2,.9,.2,1);
    --pop-transition: 360ms cubic-bezier(.16,1,.3,1);
 }

 /* === ANIMATSIYALAR === */
 @keyframes spin {
     0% {
         transform: rotate(0deg);
     }

     100% {
         transform: rotate(360deg);
     }
 }

 @keyframes pulse {
     0% {
         transform: scale(1);
     }

     50% {
         transform: scale(1.05);
     }

     100% {
         transform: scale(1);
     }
 }

 @keyframes float {
     0% {
         transform: translateY(0px);
     }

     50% {
         transform: translateY(-10px);
     }

     100% {
         transform: translateY(0px);
     }
 }

 .floating {
     animation: float 3s ease-in-out infinite;
 }

/* Smooth entrance and subtle interactions */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes softPulse {
    0% { box-shadow: 0 6px 18px rgba(2,6,23,0.06); }
    50% { box-shadow: 0 12px 36px rgba(2,6,23,0.08); }
    100% { box-shadow: 0 6px 18px rgba(2,6,23,0.06); }
}

@keyframes glow {
    0% { box-shadow: 0 6px 18px rgba(79,70,229,0.06); }
    50% { box-shadow: 0 12px 40px rgba(79,70,229,0.12); }
    100% { box-shadow: 0 6px 18px rgba(79,70,229,0.06); }
}

 /* === 1. YUKLANISH EKRANI USLUBI === */
 .loading-screen {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: linear-gradient(145deg, var(--dark-color) 0%, #172B4D 100%);
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     z-index: 9999;
     transition: opacity 0.6s ease, visibility 0.6s ease;
 }

 .loading-logo {
     width: 130px;
     height: 130px;
     background: transparent;
     border-radius: 50%;
     display: flex;
     justify-content: center;
     align-items: center;
     margin-bottom: 30px;
     box-shadow: none;
     position: relative;
 }

 .loading-logo::before {
     content: '';
     position: absolute;
     width: 130px;
     height: 130px;
     border: 5px solid transparent;
     border-top-color: var(--accent-color);
     border-right-color: var(--primary-color);
     border-radius: 50%;
    animation: spin 1.5s linear infinite, glow 4s ease-in-out infinite;
 }

 .loading-logo i {
     font-size: 55px;
     color: white;
     text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
     z-index: 10;
 }

 .loading-text {
     color: #e0f2f7;
     font-size: 36px;
     font-weight: 800;
     margin-bottom: 15px;
     letter-spacing: 3px;
     text-shadow: 0 0 8px rgba(255, 255, 255, 0.1);
 }

 .loading-subtext {
     color: rgba(180, 200, 255, 0.7);
     font-size: 18px;
     margin-bottom: 40px;
 }

 .loading-bar {
     width: 350px;
     height: 10px;
     background: rgba(255, 255, 255, 0.1);
     border-radius: 5px;
     overflow: hidden;
     box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.3);
 }

 .loading-progress {
     height: 100%;
     background: linear-gradient(90deg, var(--primary-color) 0%, var(--accent-color) 100%);
     width: 0%;
     border-radius: 5px;
     transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
     box-shadow: 0 0 15px rgba(217, 70, 239, 0.7);
 }

 .loading-hidden {
     opacity: 0;
     visibility: hidden;
     transform: scale(1.05);
 }

 /* Input maydonlari uchun umumiy uslub */
 .input-modern {
     border: 1px solid #E5E7EB;
     border-radius: 10px;
     padding: 12px;
     background: white;
     color: #1F2937;
     transition: all 0.3s ease;
 }

 .input-modern:focus {
     outline: none;
     border-color: var(--primary-color);
     box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.3);
 }

 /* Bosh tugma uslubi */
 .btn-primary {
    background: var(--primary-color);
    color: white;
    border: none;
    border-radius: 12px;
    transition: transform var(--soft-transition), box-shadow var(--soft-transition), background var(--soft-transition);
    box-shadow: var(--glow-shadow);
    font-weight: 600;
 }

 .btn-primary:hover {
    transform: translateY(-6px) scale(1.01);
    background: linear-gradient(135deg, var(--primary-color) 0%, #6366f1 100%);
    box-shadow: var(--card-shadow-strong);
 }

/* Button base helpers and colorful variants */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.6rem 1rem;
    border-radius: 12px;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
    transition: transform var(--soft-transition), box-shadow var(--soft-transition), background var(--soft-transition), opacity var(--soft-transition);
    border: none;
}

.btn:focus {
    outline: none;
    box-shadow: 0 0 0 4px rgba(59,130,246,0.12);
}

.btn-success {
    background: linear-gradient(135deg, var(--secondary-color) 0%, #10b981 100%);
    color: white;
}
.btn-success:hover { transform: translateY(-4px); box-shadow: 0 14px 36px rgba(16,185,129,0.14); }

.btn-warning {
    background: linear-gradient(135deg, var(--warning-color) 0%, #f97316 100%);
    color: white;
}
.btn-warning:hover { transform: translateY(-4px); box-shadow: 0 14px 36px rgba(245,158,11,0.14); }

.btn-danger {
    background: linear-gradient(135deg, #ef4444 0%, #f43f5e 100%);
    color: white;
}
.btn-danger:hover { transform: translateY(-4px); box-shadow: 0 14px 36px rgba(239,68,68,0.14); }

.btn-outline {
    background: transparent;
    border: 1px solid rgba(59,130,246,0.16);
    color: var(--primary-color);
}
.btn-outline:hover { background: rgba(59,130,246,0.04); transform: translateY(-3px); }

/* Ensure previously defined btn-secondary / btn-accent align with .btn base */
.btn-secondary { padding: 0.6rem 1rem; border-radius: 10px; }
.btn-accent { padding: 0.6rem 1rem; border-radius: 10px; }

 /* === 2. KIRISH EKRANI USLUBI === */

 .login-container {
     background: linear-gradient(135deg, #172B4D 0%, var(--dark-color) 100%);
     min-height: 100vh;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     padding: 20px;
     position: relative;
     overflow: hidden;
 }

 .login-background {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-image: url('https://images.unsplash.com/photo-1566073771259-6a8506099945?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80');
     background-size: cover;
     background-position: center;
     opacity: 0.1;
     filter: blur(3px);
 }

 .login-card {
     padding: 40px;
     width: 100%;
     max-width: 450px;
     position: relative;
     z-index: 10;
     transform: translateY(20px);
     opacity: 0;
     transition: all 0.5s ease;
 }

 .login-card.visible {
     transform: translateY(0);
     opacity: 1;
    animation: fadeInUp 420ms var(--pop-transition) both;
 }

 /* Admin uchun minimal kirish kartasi: og'ir fon olib tashlab creative effekt qo'shish */
 .login-card.minimal {
     padding: 32px 28px !important;
     position: relative;
     overflow: hidden;
 }

 /* Animatsiyali gradient fon tarqatma admin kartasi uchun */
 .login-card.minimal::before {
     content: '';
     position: absolute;
     top: -50%;
     right: -20%;
     width: 300px;
     height: 300px;
     background: radial-gradient(circle, var(--accent-color) 0%, transparent 70%);
     opacity: 0.1;
     animation: floatGradient 6s ease-in-out infinite;
     pointer-events: none;
 }

 .login-card.minimal::after {
     content: '';
     position: absolute;
     bottom: -30%;
     left: -10%;
     width: 250px;
     height: 250px;
     background: radial-gradient(circle, var(--primary-color) 0%, transparent 70%);
     opacity: 0.08;
     animation: floatGradient 8s ease-in-out infinite reverse;
     pointer-events: none;
 }

 @keyframes floatGradient {
     0% {
         transform: translate(0, 0);
     }

     50% {
         transform: translate(30px, -30px);
     }

     100% {
         transform: translate(0, 0);
     }
 }

 /* Barcha kontent fon qatlari ustida qolsin */
 .login-card.minimal>* {
     position: relative;
     z-index: 2;
 }

 /* Minimal admin kartasida matn uslubi */
 .login-card.minimal .login-logo-icon {
     background: linear-gradient(135deg, rgba(79, 70, 229, 0.9) 0%, rgba(217, 70, 239, 0.9) 100%);
     box-shadow: 0 8px 32px rgba(79, 70, 229, 0.4), 0 0 20px rgba(217, 70, 239, 0.2);
     border: 1px solid rgba(255, 255, 255, 0.2);
 }

 .login-card.minimal h1,
 .login-card.minimal h2,
 .login-card.minimal p,
 .login-card.minimal label,
 .login-card.minimal span {
     color: rgba(255, 255, 255, 0.95) !important;
 }

 .login-card.minimal .input-modern {
     background: rgba(255, 255, 255, 0.9);
     border: 1px solid rgba(255, 255, 255, 0.25);
     color: #1f2937;
     transition: all 0.3s ease;
     backdrop-filter: blur(10px);
 }

 .login-card.minimal .input-modern:focus {
     background: rgba(255, 255, 255, 0.95);
     border-color: var(--primary-color);
     box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.2), inset 0 0 0 1px rgba(79, 70, 229, 0.1);
 }

 .login-card.minimal .input-modern::placeholder {
     color: rgba(31, 41, 55, 0.5);
 }

 /* Button styling for minimal admin card */
 .login-card.minimal .btn-primary {
     background: linear-gradient(135deg, var(--primary-color) 0%, var(--accent-color) 100%);
     color: white;
     border: none;
     box-shadow: 0 8px 20px rgba(79, 70, 229, 0.4);
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 }

 .login-card.minimal .btn-primary:hover {
     transform: translateY(-3px);
     box-shadow: 0 12px 30px rgba(79, 70, 229, 0.6);
 }

/* Apply subtle entrance to many components */
.panel, .stat-card, .room-card, .table-modern, .modal-content {
    animation: fadeInUp 420ms ease both;
    transition: transform var(--pop-transition), box-shadow var(--soft-transition), opacity var(--soft-transition);
}

.stat-card, .room-card {
    box-shadow: var(--card-shadow);
    border: 1px solid rgba(15,23,42,0.03);
}

.stat-card:hover, .room-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--card-shadow-strong);
}

.menu-item {
    transition: transform var(--soft-transition), background var(--soft-transition), box-shadow var(--soft-transition);
}

.menu-item:hover {
    transform: translateX(6px);
    box-shadow: 0 8px 28px rgba(2,6,23,0.06);
}

.menu-item.active {
    box-shadow: var(--glow-shadow);
}

.tab-button {
    transition: transform var(--soft-transition), box-shadow var(--soft-transition), background var(--soft-transition);
}

.tab-button.active {
    transform: translateY(-4px);
    box-shadow: var(--glow-shadow);
}

/* Modal styling moved to unified section later in file */

/* Language-specific visual accents */
.lang-uz .panel, .lang-uz .stat-card, .lang-uz .room-card {
    border-left: 4px solid rgba(79,70,229,0.12);
    box-shadow: 0 20px 50px rgba(59, 130, 246, 0.06);
}
.lang-ru .panel, .lang-ru .stat-card, .lang-ru .room-card {
    border-left: 4px solid rgba(239,68,68,0.12);
    box-shadow: 0 20px 50px rgba(239,68,68,0.04);
}
.lang-en .panel, .lang-en .stat-card, .lang-en .room-card {
    border-left: 4px solid rgba(16,185,129,0.12);
    box-shadow: 0 20px 50px rgba(16,185,129,0.04);
}
.lang-kr .panel, .lang-kr .stat-card, .lang-kr .room-card {
    border-left: 4px solid rgba(139,92,246,0.12);
    box-shadow: 0 20px 50px rgba(139,92,246,0.04);
}

/* Animation to highlight cards after language change */
.lang-anim {
    animation: softPulse 700ms ease both;
}

 .login-card.minimal .btn-primary:active {
     transform: translateY(-1px);
     box-shadow: 0 6px 15px rgba(79, 70, 229, 0.4);
 }

 .login-logo {
     text-align: center;
     margin-bottom: 30px;
 }

 .login-logo-icon {
     width: 80px;
     height: 80px;
     background: linear-gradient(135deg, var(--primary-color) 0%, var(--accent-color) 100%);
     border-radius: 50%;
     display: flex;
     justify-content: center;
     align-items: center;
     margin: 0 auto 15px;
     color: white;
     font-size: 36px;
     box-shadow: 0 4px 20px rgba(79, 70, 229, 0.5);
     transition: transform 0.3s ease;
 }

 .login-logo h1 {
     color: #1F2937;
     font-weight: 800;
 }

 .login-logo p {
     color: #6B7280;
     font-weight: 500;
 }

 .login-card label {
     color: #374151;
 }

 /* === 4. JAHON SOATLARI USLUBI (Login tepa qismida) === */
 .clock-wrapper {
     margin-bottom: 30px;
     position: relative;
     z-index: 15;
     width: 100%;
     max-width: 700px;
 }

 .login-world-clocks {
     display: flex;
     justify-content: center;
     gap: 15px;
     flex-wrap: nowrap;
 }

 .clock-item {
     min-width: 100px;
     padding: 10px 15px;
     border-radius: 12px;
     /* Shaffof fon, lekin oq matn bilan (Dark Mode) */
     background: rgba(255, 255, 255, 0.1);
     backdrop-filter: blur(5px);
     box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
     text-align: center;
     transition: all 0.3s ease;
 }

 .clock-item:hover {
     background: rgba(255, 255, 255, 0.2);
 }

 .clock-country {
     color: rgba(255, 255, 255, 0.7);
     font-size: 13px;
     font-weight: 500;
     margin-bottom: 2px;
 }

 .clock-time {
     color: #fff;
     font-size: 18px;
     font-weight: 700;
     text-shadow: 0 0 5px rgba(255, 255, 255, 0.3);
 }

 /* === 5. ADMIN PANELI USLUBI === */

 .sidebar {
     background: linear-gradient(180deg, var(--dark-color) 0%, #172B4D 100%);
     box-shadow: 10px 0 30px rgba(0, 0, 0, 0.5);
 }

/* Collapsed sidebar (compact) */
.sidebar.collapsed {
    width: 80px !important; /* compact width */
    min-width: 80px !important;
    max-width: 80px !important;
    overflow: hidden;
}

.sidebar.collapsed .p-6 { padding-left: 8px; padding-right: 8px; }
.sidebar.collapsed .menu-item { padding: 12px 8px; }
.sidebar.collapsed .menu-item i { margin-right: 0; }
.sidebar.collapsed .menu-item span { display: none; }
.sidebar.collapsed .userAvatar, .sidebar.collapsed #userAvatar { display: none; }

.sidebar { transition: width 220ms ease, padding 220ms ease; }
.sidebar .menu-item { transition: padding 220ms ease; }

/* Menu-group accordion styles */
.menu-group h3 {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 11px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.7);
    padding: 8px 12px;
}
.menu-group h3::after {
    content: '\25BC'; /* down triangle */
    transition: transform 200ms ease;
    opacity: 0.8;
}
.menu-group h3.collapsed::after { transform: rotate(-90deg); }
.menu-group ul { transition: max-height 260ms ease, padding 220ms ease; max-height: 2000px; overflow: hidden; }
.menu-group ul.collapsed { max-height: 0; padding-top: 0; padding-bottom: 0; margin: 0; }

/* Flyout shown when sidebar is collapsed and user hovers a menu item */
.sidebar-flyout {
    position: fixed;
    background: white;
    color: #0f1724;
    border-radius: 8px;
    padding: 8px 12px;
    box-shadow: 0 10px 30px rgba(2,6,23,0.12);
    z-index: 9999;
    min-width: 160px;
    font-weight: 600;
}

/* Slightly style submenu items inside flyout if provided */
.sidebar-flyout .submenu-item { display: block; padding: 6px 8px; color: #111827; text-decoration: none; }
.sidebar-flyout .submenu-item:hover { background: #f3f4f6; }

 .menu-item {
     transition: all 0.3s ease;
     cursor: pointer;
     padding: 14px 18px;
     border-radius: 14px;
     margin-bottom: 8px;
     display: flex;
     align-items: center;
     color: rgba(255, 255, 255, 0.7);
 }

 .menu-item.active {
     background: linear-gradient(90deg, var(--primary-color) 0%, var(--accent-color) 100%);
     color: white;
     box-shadow: 0 4px 15px rgba(79, 70, 229, 0.5);
     font-weight: 700;
 }

 .main-header {
     background: rgba(255, 255, 255, 0.95);
     backdrop-filter: blur(15px);
     border-bottom: 1px solid #E0E5EC;
     box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
     color: var(--dark-color);
 }

 /* Bosh sarlavha/Navbar uslubi */
 header {
     background: #FFFFFF;
     border-bottom: 1px solid #E5E7EB;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
     position: sticky;
     top: 0;
     z-index: 40;
 }

 header .flex {
     display: flex;
     flex-wrap: wrap;
     gap: 1rem;
     justify-content: space-between;
     align-items: center;
 }

 /* Qidiruv maydoni uslubi */
 #searchInput {
     transition: all 0.3s ease;
     box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
 }

 #searchInput:focus {
     box-shadow: 0 4px 12px rgba(79, 70, 229, 0.15);
     transform: translateY(-1px);
 }

/* Ensure search container expands to fill available space in header */
.search-container {
    flex: 1;
    min-width: 150px;
    max-width: 100%;
}

header .flex {
    gap: 0.75rem;
}

/* Adjust first flex section (sidebar btn + search) to take space */
header .flex > .flex:first-child {
    flex: 1;
    min-width: 0; /* Allow flex shrinking */
} /* Til tanlash uslubi */
 #languageSelect {
     min-width: 100px;
     cursor: pointer;
     transition: all 0.2s ease;
 }

 #languageSelect:hover {
     border-color: var(--primary-color);
 }

 #languageSelect:focus {
     outline: none;
     box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
 }


/* Redesigned Language Switcher Card */

/* Simple language switcher card */
.lang-switcher-card {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    border-radius: 10px;
    border: 1px solid #e5e7eb;
    padding: 6px 14px 6px 10px;
    min-width: 160px;
    box-shadow: none;
    transition: border 0.2s, background 0.2s;
    position: relative;
    z-index: 2;
}



.lang-pill {
    background: #fff;
    border: 1px solid #e5e7eb;
    padding: 4px 8px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 12px;
    color: var(--dark-color);
    box-shadow: none;
    transition: background 0.18s, color 0.18s, border 0.18s;
    position: relative;
    cursor: pointer;
    outline: none;
}
.lang-pill:hover, .lang-pill:focus-visible {
    background: #f3f4f6;
    color: var(--primary-color);
    border-color: var(--primary-color);
}
.lang-pill.active {
    background: var(--primary-color);
    color: #fff;
    border-color: var(--primary-color);
}
.lang-pill.active::after {
    display: none;
}

/* Visually-hidden (sr-only) for accessibility */
.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Language pill active indicator */
.lang-pill {
    position: relative;
}
.lang-pill::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -6px;
    width: 0%;
    height: 4px;
    background: linear-gradient(90deg,var(--primary-color),var(--accent-color));
    border-radius: 4px;
    transform: translateX(-50%);
    transition: width 320ms cubic-bezier(.2,.9,.2,1);
}
.lang-pill.active::after { width: 60%; }

/* Ripple effect base */
.ripple {
    position: relative;
    overflow: hidden;
}
.ripple .ripple-effect {
    position: absolute;
    border-radius: 50%;
    transform: scale(0);
    background: rgba(255,255,255,0.6);
    animation: ripple-animation 600ms linear;
    pointer-events: none;
}
@keyframes ripple-animation {
    to { transform: scale(4); opacity: 0; }
}

/* Calculator button polishing */
.calculator-btn {
    transition: transform var(--soft-transition), box-shadow var(--soft-transition), background var(--soft-transition);
    padding: 14px 0;
    border-radius: 10px;
}
.calculator-btn:active { transform: translateY(2px) scale(0.995); }
.calculator-btn:focus { outline: 3px solid rgba(59,130,246,0.15); }
.calculator-btn.operator { box-shadow: inset 0 -4px 10px rgba(0,0,0,0.08); }
.calculator-btn.equals { box-shadow: 0 8px 22px rgba(16,185,129,0.12); }

/* Search suggestion focused state */
.search-suggestions li[aria-selected="true"] {
    background: linear-gradient(90deg, rgba(59,130,246,0.06), rgba(99,102,241,0.03));
    transform: translateX(6px);
}

/* Search suggestions */
.search-container { position: relative; }
.search-suggestions {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    background: white;
    border-radius: 10px;
    box-shadow: 0 12px 40px rgba(2,6,23,0.08);
    max-height: 280px;
    overflow-y: auto;
    z-index: 60;
    padding: 6px;
    list-style: none;
}
.search-suggestions li {
    padding: 10px 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: background var(--soft-transition), transform var(--soft-transition);
}
.search-suggestions li:hover { background: #f8fafc; transform: translateX(6px); }
.search-suggestions .muted { color: #6b7280; font-size: 13px; }
.search-suggestions.hidden { display: none; }

 /* Vaqt va sana ko'rsatuvchi */
 #currentTime {
     color: #111827;
     font-weight: 600;
     font-size: 15px;
 }

 #currentDate {
     color: #6B7280;
     font-size: 13px;
 }

 .minimal-card {
     background: transparent;
     border: none;
     border-radius: 12px;
     box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
     color: white;
     padding: 25px;
     transition: all 0.3s ease-in-out;
 }

 .minimal-card h1,
 .minimal-card h2,
 .minimal-card h3,
 .minimal-card p,
 .minimal-card span,
 .minimal-card i,
 .minimal-card label {
     color: white !important;
 }

 /* Main App Styles */
 .sidebar {
     scrollbar-width: thin;
     scrollbar-color: #4B5563 #1F2937;
     background: linear-gradient(180deg, var(--dark-color) 0%, #111827 100%);
 }

 .sidebar::-webkit-scrollbar {
     width: 6px;
 }

 .sidebar::-webkit-scrollbar-track {
     background: #1F2937;
 }

 .sidebar::-webkit-scrollbar-thumb {
     background: #4B5563;
     border-radius: 3px;
 }

 .room-card {
     transition: all 0.3s ease;
     cursor: pointer;
     border-radius: 12px;
     overflow: hidden;
 }

 .room-card:hover {
     transform: translateY(-5px);
     box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
 }

 .menu-item {
     transition: all 0.2s ease;
     cursor: pointer;
     padding: 12px 16px;
     border-radius: 10px;
     margin-bottom: 6px;
     display: flex;
     align-items: center;
 }

 .menu-item:hover {
     background-color: rgba(255, 255, 255, 0.1);
 }

 .menu-item.active {
     background: linear-gradient(135deg, var(--primary-color) 0%, var(--accent-color) 100%);
     box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
 }

 .stat-card {
     transition: all 0.3s ease;
     border-radius: 12px;
     overflow: hidden;
 }

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

 .tab-button {
     transition: all 0.2s ease;
     border-radius: 8px;
 }

 .tab-button.active {
     background: linear-gradient(135deg, var(--primary-color) 0%, var(--accent-color) 100%);
     color: white;
     box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
 }

 .bed-icon {
     font-size: 12px;
     margin-right: 2px;
 }

 .bed-available {
     color: var(--secondary-color);
 }

 .bed-occupied {
     color: #EF4444;
 }

/* === Global professional polish additions === */
/* Panels and content areas */
.panel {
    background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
    border-radius: 14px;
    padding: 18px;
    box-shadow: 0 8px 30px rgba(16, 24, 40, 0.06);
    border: 1px solid rgba(15, 23, 42, 0.04);
}

.main-card-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--dark-color);
    margin-bottom: 12px;
}

/* Tables */
.table-modern {
    width: 100%;
    border-collapse: collapse;
    background: white;
}
.table-modern th,
.table-modern td {
    padding: 12px 14px;
    border-bottom: 1px solid #F1F5F9;
    text-align: left;
    vertical-align: middle;
}
.table-modern thead th {
    background: linear-gradient(90deg, rgba(255,255,255,0.6), rgba(248,250,252,0.9));
    color: #374151;
    font-weight: 600;
}
.table-modern tbody tr:hover {
    background: #fbfdff;
    transform: translateY(-1px);
}

/* Room card refinements */
.room-card { background: linear-gradient(180deg,#fff,#fbfbff); border:1px solid rgba(15,23,42,0.04); }
.room-card .room-details { border-radius: 8px; padding: 8px; }

/* Modal overlay and content - remove duplicate conflicting definitions */
/* All modal styling is now in the unified section below */


/* Header and search styling */
.search-container { max-width: 720px; }
#searchInput { border-radius: 12px; padding-left: 3rem; }

/* Buttons small refinement */
.btn-icon { display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border-radius:10px; }

/* Calculator polish inside settings */
.calculator-display { background: linear-gradient(90deg,#0f1724,#111827); color: #e6f0ff; box-shadow: inset 0 -6px 18px rgba(0,0,0,0.4); }
.calculator-btn { border-radius:8px; padding:12px 0; font-weight:700; box-shadow:0 6px 18px rgba(2,6,23,0.08); }
.calculator-btn.operator { background: linear-gradient(90deg,#f97316,#fb923c); color:white; }
.calculator-btn.equals { background: linear-gradient(90deg,#10b981,#06b6d4); color:white; }

/* Small responsive tweak */
@media (max-width: 900px) {
    .stat-card { padding: 14px; }
    .panel { padding: 12px; }
}

 .status-available {
     background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
     border-color: #bbf7d0;
 }

 .status-occupied {
     background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
     border-color: #fecaca;
 }

 .status-cleaning {
     background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
     border-color: #fed7aa;
 }

 .status-available-text {
     color: var(--secondary-color);
 }

 .status-occupied-text {
     color: #EF4444;
 }

 .status-cleaning-text {
     color: var(--warning-color);
 }

 /* Modal overlay - unified definition */
 /* Modal overlay - unified definition with glassmorphism */
 .modal-overlay {
     position: fixed;
     inset: 0;
     display: flex;
     align-items: center;
     justify-content: center;
     background: rgba(2, 6, 23, 0.3);
     z-index: 60;
     backdrop-filter: blur(8px) saturate(120%);
 }

 .modal-overlay {
     position: fixed;
     inset: 0;
     display: flex;
     /* Move modals slightly lower than exact center so they don't appear too high */
     align-items: flex-start;
     justify-content: center; /* horizontal centering */
     padding-top: 6vh; /* pushes modal content down from the very top */
     background: rgba(255, 255, 255, 0.01);
     z-index: 60;
     backdrop-filter: blur(8px) saturate(120%);
 }

 .modal-overlay.hidden {
     display: none !important;
 }

 .modal-content {
     background: rgba(255, 255, 255, 0.88);
     border-radius: 20px;
     max-width: 600px;
     width: 90%;
     max-height: 90vh;
     overflow-y: auto;
     box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15), 0 8px 32px rgba(79, 70, 229, 0.12);
     animation: modalAppear 0.3s ease-out;
     border: 1px solid rgba(255, 255, 255, 0.4);
     backdrop-filter: blur(12px);
 }

/* Safety-centering tweaks: ensure modal-content always centers within overlay
   and does not get pushed to top by surrounding layout or internal styles. */
.modal-overlay .modal-content {
    margin: 0 auto; /* horizontal center fallback */
    align-self: center; /* ensures vertical centering inside flex container */
    position: relative; /* avoid accidental absolute positioning influence */
}

/* When overlay uses flex-start, ensure modal-content aligns to start plus offset so it appears lower
   Using align-self:flex-start allows margin-top to take effect; however we keep align-self:center as fallback.
*/
.modal-overlay.align-start .modal-content { align-self: flex-start; }

/* Specific extra safety for Add Room modal in case JS applied inline styles */
#addRoomModal .modal-content {
    margin-top: 0 !important;
    top: auto !important;
    transform: none !important;
    align-self: center !important;
}

 @keyframes modalAppear {
     from {
         opacity: 0;
         transform: scale(0.9);
     }

     to {
         opacity: 1;
         transform: scale(1);
     }
 }

 .btn-primary {
     background: linear-gradient(135deg, var(--primary-color) 0%, #2563eb 100%);
     color: white;
     border: none;
     border-radius: 10px;
     transition: all 0.3s ease;
     box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
 }

 .btn-primary:hover {
     transform: translateY(-2px);
     box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4);
 }

 .btn-secondary {
     background: linear-gradient(135deg, var(--secondary-color) 0%, #059669 100%);
     color: white;
     border: none;
     border-radius: 10px;
     transition: all 0.3s ease;
     box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
 }

 .btn-secondary:hover {
     transform: translateY(-2px);
     box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4);
 }

 .btn-accent {
     background: linear-gradient(135deg, var(--accent-color) 0%, #7c3aed 100%);
     color: white;
     border: none;
     border-radius: 10px;
     transition: all 0.3s ease;
     box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
 }

 .btn-accent:hover {
     transform: translateY(-2px);
     box-shadow: 0 6px 20px rgba(139, 92, 246, 0.4);
 }

 .btn-warning {
     background: linear-gradient(135deg, var(--warning-color) 0%, #d97706 100%);
     color: white;
     border: none;
     border-radius: 10px;
     transition: all 0.3s ease;
     box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
 }

 .btn-warning:hover {
     transform: translateY(-2px);
     box-shadow: 0 6px 20px rgba(245, 158, 11, 0.4);
 }

 @media (max-width: 768px) {
    /* Ensure header/search remain visible above the sliding mobile sidebar
       and add top padding to the sidebar so its content doesn't sit under the header. */
    header { z-index: 70; }
    .sidebar {
        width: 100%;
        position: fixed;
        height: 100%;
        z-index: 50;
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        padding-top: 64px; /* reserve space for header/search on mobile */
    }

    /* By default hide desktop-only mobile controls; explicitly show the mobile-menu button on small screens */
    .mobile-menu-btn { display: none; }
    .mobile-menu-btn { z-index: 95; }
    .mobile-menu-btn { position: fixed; }
    .mobile-menu-btn { top: 1rem; left: 1rem; }
    .mobile-menu-btn { display: inline-flex !important; }


/* Extra safety: ensure mobile menu button is hidden on larger screens but visible on small screens */
.mobile-menu-btn { display: none; }
@media (max-width: 768px) { .mobile-menu-btn { display: inline-flex !important; } }

/* Navbar sidebar button visible for small screens up to 769px */
#navSidebarBtn { display: none; }
@media (max-width: 769px) {
    #navSidebarBtn { display: inline-flex !important; align-items: center; justify-content: center; z-index: 95; }
}
     .sidebar.mobile-open {
         transform: translateX(0);
     }

     .mobile-menu-btn {
         display: block;
     }
 }

 .guest-item {
     border: 1px solid #e5e7eb;
     border-radius: 10px;
     padding: 12px;
     margin-bottom: 10px;
     background-color: #f9fafb;
     transition: all 0.2s ease;
 }

 .guest-item:hover {
     background-color: #f3f4f6;
     transform: translateY(-2px);
 }

 .calculator-display {
     background-color: #1f2937;
     color: white;
     padding: 15px;
     border-radius: 10px;
     text-align: right;
     font-size: 24px;
     margin-bottom: 10px;
     min-height: 60px;
     font-family: monospace;
 }

 .calculator-btn {
     width: 100%;
     padding: 12px;
     font-size: 18px;
     border: none;
     border-radius: 10px;
     background-color: #e5e7eb;
     transition: all 0.2s;
     font-weight: 600;
 }

 .calculator-btn:hover {
     background-color: #d1d5db;
     transform: translateY(-2px);
 }

 .calculator-btn.operator {
     background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
     color: white;
 }

 .calculator-btn.operator:hover {
     background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
 }

 .calculator-btn.equals {
     background: linear-gradient(135deg, #10b981 0%, #059669 100%);
     color: white;
 }

 .calculator-btn.equals:hover {
     background: linear-gradient(135deg, #059669 0%, #047857 100%);
 }

 .notification {
     position: fixed;
     top: 20px;
     right: 20px;
     padding: 15px 20px;
     border-radius: 10px;
     color: white;
     z-index: 1001;
     box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
     transform: translateX(150%);
     transition: transform 0.3s ease;
     display: flex;
     align-items: center;
     gap: 10px;
 }

 .notification.show {
     transform: translateX(0);
 }

 .notification.success {
     background: linear-gradient(135deg, #10b981 0%, #059669 100%);
 }

 .notification.error {
     background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
 }

 .notification.warning {
     background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
 }

 .form-error {
     color: #EF4444;
     font-size: 0.875rem;
     margin-top: 0.25rem;
 }

 /* Additional Professional Styles */
 .glass-effect {
     background: rgba(255, 255, 255, 0.1);
     backdrop-filter: blur(10px);
     border: 1px solid rgba(255, 255, 255, 0.2);
 }

 .shadow-custom {
     box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
 }

 .hover-lift {
     transition: all 0.3s ease;
 }

 .hover-lift:hover {
     transform: translateY(-5px);
     box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
 }

 .gradient-bg {
     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
 }

 .text-gradient {
     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
     background-clip: text;
     -webkit-background-clip: text;
     color: transparent;
     -webkit-text-fill-color: transparent;
 }

 /* Push notification styles */
 .push-notification {
     position: fixed;
     top: 20px;
     left: 50%;
     transform: translateX(-50%) translateY(-100px);
     background: linear-gradient(135deg, #3B82F6 0%, #2563eb 100%);
     color: white;
     padding: 15px 25px;
     border-radius: 10px;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
     z-index: 1002;
     transition: transform 0.5s ease;
     display: flex;
     align-items: center;
     gap: 10px;
 }

 .push-notification.show {
     transform: translateX(-50%) translateY(0);
 }

 .push-notification.warning {
     background: linear-gradient(135deg, #F59E0B 0%, #d97706 100%);
 }

 .push-notification.error {
     background: linear-gradient(135deg, #EF4444 0%, #dc2626 100%);
 }

 /* Animation classes */
 .fade-in {
     animation: fadeIn 0.5s ease-in-out;
 }

 @keyframes fadeIn {
     from {
         opacity: 0;
     }

     to {
         opacity: 1;
     }
 }

 .slide-in-left {
     animation: slideInLeft 0.5s ease-out;
 }

 @keyframes slideInLeft {
     from {
         transform: translateX(-100%);
         opacity: 0;
     }

     to {
         transform: translateX(0);
         opacity: 1;
     }
 }

 .bounce-in {
     animation: bounceIn 0.6s ease-out;
 }

 @keyframes bounceIn {
     0% {
         transform: scale(0.3);
         opacity: 0;
     }

     50% {
         transform: scale(1.05);
     }

     70% {
         transform: scale(0.9);
     }

     100% {
         transform: scale(1);
         opacity: 1;
     }
 }

 /* Custom scrollbar */
 ::-webkit-scrollbar {
     width: 8px;
 }

 ::-webkit-scrollbar-track {
     background: #f1f1f1;
     border-radius: 10px;
 }

 ::-webkit-scrollbar-thumb {
     background: linear-gradient(135deg, var(--primary-color) 0%, var(--accent-color) 100%);
     border-radius: 10px;
 }

 ::-webkit-scrollbar-thumb:hover {
     background: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
 }

 /* Card hover effects */
 .card-hover {
     transition: all 0.3s ease;
     border-radius: 12px;
     overflow: hidden;
 }

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

/* Extra hover polish for main page */
.btn-secondary {
    background: #f3f4f6;
    color: var(--dark-color);
    border-radius: 10px;
    transition: transform var(--soft-transition), box-shadow var(--soft-transition), background var(--soft-transition);
}
.btn-secondary:hover {
    transform: translateY(-4px);
    background: linear-gradient(135deg, rgba(59,130,246,0.06), rgba(139,92,246,0.04));
    box-shadow: 0 12px 30px rgba(2,6,23,0.06);
}

.btn-accent {
    background: var(--accent-color);
    color: white;
    border-radius: 10px;
    transition: transform var(--soft-transition), box-shadow var(--soft-transition);
}
.btn-accent:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 14px 36px rgba(139,92,246,0.18);
}

.room-action, .room-details, .add-guest, .view-guest, .checkout-guest {
    transition: transform 220ms ease, box-shadow 220ms ease, background 220ms ease;
}
.room-action:hover, .room-details:hover, .add-guest:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 26px rgba(2,6,23,0.06);
}

/* Recent booking items and search suggestions */
#recentBookings .card-hover:hover, .search-suggestion-item:hover {
    transform: translateY(-3px) scale(1.005);
    box-shadow: 0 12px 28px rgba(2,6,23,0.06);
    background: rgba(59,130,246,0.02);
}

/* Slightly stronger hover for stat-cards to emphasize interactivity */
.stat-card:hover {
    transform: translateY(-10px) scale(1.01);
    box-shadow: 0 30px 60px rgba(2,6,23,0.12);
}

 /* Icon animations */
 .icon-spin {
     animation: iconSpin 2s linear infinite;
 }

 @keyframes iconSpin {
     from {
         transform: rotate(0deg);
     }

     to {
         transform: rotate(360deg);
     }
 }

 /* Status badges */
 .status-badge {
     padding: 4px 12px;
     border-radius: 20px;
     font-size: 12px;
     font-weight: 600;
     display: inline-block;
 }

 .status-badge.available {
     background: rgba(16, 185, 129, 0.1);
     color: #10b981;
 }

 .status-badge.occupied {
     background: rgba(239, 68, 68, 0.1);
     color: #ef4444;
 }

 .status-badge.cleaning {
     background: rgba(245, 158, 11, 0.1);
     color: #f59e0b;
 }

 /* Progress bars */
 .progress-bar {
     height: 6px;
     background: #e5e7eb;
     border-radius: 3px;
     overflow: hidden;
 }

 .progress-fill {
     height: 100%;
     border-radius: 3px;
     transition: width 0.5s ease;
 }

 .progress-fill.primary {
     background: linear-gradient(135deg, var(--primary-color) 0%, var(--accent-color) 100%);
 }

 .progress-fill.success {
     background: linear-gradient(135deg, var(--secondary-color) 0%, #059669 100%);
 }

 /* Input styles */
 .input-modern {
     border: 1px solid #d1d5db;
     border-radius: 10px;
     padding: 12px 16px;
     transition: all 0.3s ease;
     background: white;
 }

 .input-modern:focus {
     outline: none;
     border-color: var(--primary-color);
     box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
 }

 /* Table styles */
 .table-modern {
     border-collapse: separate;
     border-spacing: 0;
     width: 100%;
 }

 .table-modern th {
     background: #f9fafb;
     padding: 12px 16px;
     text-align: left;
     font-weight: 600;
     color: #374151;
     border-bottom: 1px solid #e5e7eb;
 }

 .table-modern td {
     padding: 12px 16px;
     border-bottom: 1px solid #e5e7eb;
 }

 .table-modern tr:last-child td {
     border-bottom: none;
 }

 .table-modern tr:hover td {
     background: #f9fafb;
 }

body {
    font-family: Arial, sans-serif;
    margin: 0; /* reset default outer margin for full-bleed admin layout */
    background: var(--light-color);
}

 .header {
     text-align: center;
     margin-bottom: 20px;
 }

 .details {
     margin-bottom: 20px;
 }

 .total {
     font-weight: bold;
     font-size: 18px;
 }

 .footer {
     margin-top: 30px;
     text-align: center;
     font-size: 12px;
 }

/* Language container: don't absolutely position by default (was causing overlay issues).
   If you need a floating container, create a dedicated element and style it intentionally.
*/
#languageContainer {
    position: static !important;
    right: auto !important;
    top: auto !important;
    transition: none !important;
    z-index: auto !important;
}

/* Make the visible language pills collapse on small screens and reveal the native select
   (the HTML contains a hidden select with id #languageSelect and class sr-only). */
@media (max-width: 640px) {
    .lang-switcher-card {
        min-width: auto;
        padding: 6px 8px;
        gap: 6px;
    }
    .lang-switcher-card .lang-pill { display: none; }
    /* show a compact hamburger instead of pills */
    #langMenuBtn { display: inline-flex !important; align-items: center; justify-content: center; }
    #languageSelect.sr-only { display: none !important; }
}

/* Reduce top padding on small screens so modal isn't pushed too far down */
@media (max-width: 640px) {
    .modal-overlay { padding-top: 4vh; }
}

/* Desktop safety: ensure language switcher never floats above modals/search suggestions */
.lang-switcher-card { z-index: 42; }

/* Language popover (mobile) */
#langPopover {
    position: absolute;
    right: 12px;
    top: 56px;
    background: white;
    border-radius: 10px;
    box-shadow: 0 8px 30px rgba(2,6,23,0.12);
    padding: 8px;
    min-width: 160px;
    z-index: 46; /* below modal overlay (60) */
}

#langPopover .lang-pill { display: flex; width: 100%; justify-content: flex-start; padding: 8px; border-radius: 8px; margin-bottom: 6px; }
#langPopover .lang-pill:last-child { margin-bottom: 0; }
#langMenuBtn { background: transparent; border: none; color: var(--dark-color); font-size: 18px; }
#langMenuBtn:focus { outline: none; box-shadow: 0 0 0 3px rgba(59,130,246,0.12); border-radius: 8px; }

 /* Additional loading and admin styles */

 /* Loading screen tweaks (complement existing styles) */
 .loading-logo {
     background: linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
     box-shadow: 0 14px 40px rgba(2, 6, 23, 0.6);
     animation: logoFloat 3s ease-in-out infinite;
 }

 @keyframes logoFloat {
     0% {
         transform: translateY(0) scale(1);
     }

     50% {
         transform: translateY(-8px) scale(1.03);
     }

     100% {
         transform: translateY(0) scale(1);
     }
 }

 .loading-text {
     font-size: 22px;
     font-weight: 700;
     letter-spacing: 0.3px;
 }

 .loading-subtext {
     font-size: 13px;
     color: rgba(255, 255, 255, 0.85);
 }

 .loading-bar {
     width: 300px;
     height: 8px;
     background: rgba(255, 255, 255, 0.06);
     border-radius: 6px;
     overflow: hidden;
 }

 .loading-progress {
     height: 100%;
     background: linear-gradient(90deg, #06b6d4, #7c3aed);
     width: 0%;
     transition: width 300ms ease;
 }

 /* Styles to support native <progress id="loadingProgress"> element if used */
 progress#loadingProgress {
     width: 350px;
     height: 10px;
     -webkit-appearance: none;
     appearance: none;
     background: rgba(255, 255, 255, 0.08);
     border-radius: 6px;
     overflow: hidden;
 }

 progress#loadingProgress::-webkit-progress-bar {
     background: rgba(255, 255, 255, 0.08);
 }

 progress#loadingProgress::-webkit-progress-value {
     background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
     box-shadow: 0 0 12px rgba(217, 70, 239, 0.45);
 }

 progress#loadingProgress::-moz-progress-bar {
     background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
 }

 .loading-hidden {
     opacity: 0;
     pointer-events: none;
     transition: opacity 400ms ease;
 }

 /* World clocks styling (admin) */
 .world-clocks {
     display: flex;
     justify-content: center;
     align-items: center;
     gap: 20px;
     padding: 10px 0;
 }

 /* Analog clock (classic, minimal) */
 .analog-clock {
     display: flex;
     flex-direction: column;
     align-items: center;
     width: 110px;
 }

 .analog-clock .clock-face {
     width: 96px;
     height: 96px;
     border-radius: 50%;
     background: radial-gradient(circle at 30% 20%, #fff 0%, #f6f6f0 40%, #efeae0 100%);
     border: 4px solid #e6dfd3;
     position: relative;
     box-shadow: 0 8px 22px rgba(15, 23, 42, 0.12), inset 0 2px 0 rgba(255, 255, 255, 0.6);
 }

 .analog-clock .hand {
     position: absolute;
     left: 50%;
     bottom: 50%;
     transform-origin: 50% 100%;
     transform: translateX(-50%) rotate(0deg);
     transition: transform 0.4s cubic-bezier(.4, 2.3, .3, .98);
     border-radius: 4px;
 }

 .analog-clock .hand.hour {
     width: 5px;
     height: 26%;
     background: #2b2b2b;
 }

 .analog-clock .hand.minute {
     width: 4px;
     height: 36%;
     background: #111827;
 }

 .analog-clock .hand.second {
     width: 2px;
     height: 42%;
     background: #c53030;
 }

 .analog-clock .clock-center {
     position: absolute;
     width: 10px;
     height: 10px;
     background: #2b2b2b;
     border-radius: 50%;
     left: 50%;
     top: 50%;
     transform: translate(-50%, -50%);
     box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
 }

 .analog-clock .clock-label {
     margin-top: 8px;
     font-size: 13px;
     color: #374151;
     font-weight: 600;
 }

 /* subtle ticks using pseudo element */
 .analog-clock .clock-face::after {
     content: '';
     position: absolute;
     inset: 0;
     border-radius: 50%;
     background-image: radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0) 58%, rgba(0, 0, 0, 0.02) 60%);
     pointer-events: none;
 }

 /* responsive adjustments */
 @media (max-width: 640px) {
     .analog-clock {
         width: 78px;
     }

     .analog-clock .clock-face {
         width: 70px;
         height: 70px;
     }
 }

 /* entrance animation for clocks */
 .world-clocks .analog-clock {
     opacity: 0;
     transform: translateY(-6px);
     animation: clockIn 0.6s ease forwards;
 }

 .world-clocks .analog-clock:nth-child(1) {
     animation-delay: 0.05s;
 }

 .world-clocks .analog-clock:nth-child(2) {
     animation-delay: 0.1s;
 }

 .world-clocks .analog-clock:nth-child(3) {
     animation-delay: 0.15s;
 }

 .world-clocks .analog-clock:nth-child(4) {
     animation-delay: 0.2s;
 }

 .world-clocks .analog-clock:nth-child(5) {
     animation-delay: 0.25s;
 }

 @keyframes clockIn {
     from {
         opacity: 0;
         transform: translateY(-10px) scale(.98);
     }

     to {
         opacity: 1;
         transform: translateY(0) scale(1);
     }
 }

 /* Login-specific clocks (override look to be lighter on gradient) */
 .login-world-clocks {
     display: flex;
     justify-content: center;
     gap: 14px;
     margin-bottom: 12px;
 }

 .login-world-clocks .analog-clock .clock-face {
     background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.95) 0%, rgba(245, 245, 240, 0.92) 40%, rgba(239, 234, 224, 0.88) 100%);
     box-shadow: 0 8px 24px rgba(2, 6, 23, 0.5), inset 0 1px 2px rgba(255, 255, 255, 0.7);
     border: 3px solid rgba(79, 70, 229, 0.3);
 }

 /* Add subtle minute markers to clock face */
 .login-world-clocks .analog-clock .clock-face {
     background-image:
         radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.95) 0%, rgba(245, 245, 240, 0.92) 40%, rgba(239, 234, 224, 0.88) 100%),
         repeating-conic-gradient(from 0deg,
             transparent 0deg 5.9deg,
             rgba(79, 70, 229, 0.2) 5.9deg 6deg);
     background-size: 100% 100%, 100% 100%;
     background-position: center, center;
 }

 /* Enhanced hands for login clocks */
 .login-world-clocks .analog-clock .hand.hour {
     background: linear-gradient(90deg, #2b2b2b, #1a1a1a);
 }

 .login-world-clocks .analog-clock .hand.minute {
     background: linear-gradient(90deg, #111827, #000);
 }

 .login-world-clocks .analog-clock .hand.second {
     background: linear-gradient(90deg, #d946ef, #c53030);
 }

 .login-world-clocks .analog-clock .clock-center {
     background: linear-gradient(135deg, #2b2b2b, #1a1a1a);
     box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2);
 }


 /* Admin mode: remove glass/blur effects from cards for a clean minimal look */
 .admin-mode .glass-effect,
 .admin-mode .card-hover,
 .admin-mode .bg-white {
     background: #ffffff !important;
     backdrop-filter: none !important;
     -webkit-backdrop-filter: none !important;
     box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06) !important;
     border: 1px solid rgba(15, 23, 42, 0.04) !important;
     color: #111827 !important;
 }

 .admin-mode .stat-card {
     background: #ffffff !important;
 }

 /* Keep logo, texts, inputs visible but strip heavy decorative backgrounds inside admin panels */
 .admin-mode .gradient-bg,
 .admin-mode .text-gradient {
     display: none !important;
 }

 /* === RESPONSIVE MEDIA QUERIES (REAKTSION MEDIA SO'ROVLARI) === */

 /* O'ta kichik qurilmalar (320px - 480px) */
 @media (max-width: 480px) {
     .loading-logo {
         width: 100px;
         height: 100px;
     }

     .loading-logo::before {
         width: 100px;
         height: 100px;
         border: 4px solid transparent;
     }

     .loading-logo i {
         font-size: 40px;
     }

     .loading-text {
         font-size: 24px;
         letter-spacing: 2px;
     }

     .loading-subtext {
         font-size: 14px;
     }

     .loading-bar {
         width: 250px;
         height: 8px;
     }

     .login-card {
         padding: 25px;
         max-width: calc(100% - 20px);
     }

     .login-logo-icon {
         width: 60px;
         height: 60px;
         font-size: 28px;
     }

     .login-logo h1 {
         font-size: 20px;
     }

     .login-logo p {
         font-size: 12px;
     }

     .sidebar {
         width: 100%;
         transform: translateX(-100%);
         transition: transform 0.3s ease;
     }

     .sidebar.mobile-open {
         transform: translateX(0);
     }

     .mobile-menu-btn {
         display: block !important;
     }

     .main-content {
         width: 100%;
         margin-left: 0 !important;
     }

     .stat-card {
         padding: 16px;
     }

     .modal-content {
         width: 95%;
         padding: 20px;
     }

     .table-modern th,
     .table-modern td {
         padding: 8px 12px;
         font-size: 12px;
     }

     .room-card {
         padding: 12px;
     }

     header {
         flex-direction: column;
         gap: 10px;
     }

     .relative.w-96 {
         width: 100% !important;
     }

     .grid {
         grid-template-columns: 1fr !important;
     }

     .flex.space-x-2 {
         flex-direction: column;
         gap: 10px;
     }

     /* Responsive Header */
     header {
         padding: 12px 16px !important;
     }

     header .flex {
         gap: 8px !important;
         flex-direction: column;
     }

     header .relative.w-full {
         width: 100% !important;
         max-width: 100% !important;
     }

     #searchInput {
         font-size: 14px;
     }

     #languageSelect {
         font-size: 13px;
         min-width: 80px;
     }

     .text-right.hidden.sm\:block {
         display: none !important;
     }
 }

 /* Kichik qurilmalar (481px - 768px) */
 @media (max-width: 768px) and (min-width: 481px) {
     .loading-logo {
         width: 110px;
         height: 110px;
     }

     .loading-logo::before {
         width: 110px;
         height: 110px;
         border: 4px solid transparent;
     }

     .loading-logo i {
         font-size: 48px;
     }

     .loading-text {
         font-size: 28px;
         letter-spacing: 2px;
     }

     .loading-subtext {
         font-size: 16px;
     }

     .loading-bar {
         width: 280px;
         height: 9px;
     }

     .login-card {
         padding: 32px;
         max-width: calc(100% - 40px);
     }

     .login-logo-icon {
         width: 70px;
         height: 70px;
         font-size: 32px;
     }

     .login-logo h1 {
         font-size: 24px;
     }

     .sidebar {
         width: 100%;
         position: fixed;
         height: 100%;
         transform: translateX(-100%);
         transition: transform 0.3s ease;
         z-index: 50;
     }

     .sidebar.mobile-open {
         transform: translateX(0);
     }

     .mobile-menu-btn {
         display: block !important;
     }

     .main-content {
         width: 100%;
         margin-left: 0 !important;
     }

     .stat-card {
         padding: 18px;
     }

     .modal-content {
         width: 90%;
         max-width: 500px;
     }

     .table-modern th,
     .table-modern td {
         padding: 10px 14px;
         font-size: 13px;
     }

     .grid-cols-4 {
         grid-template-columns: repeat(2, 1fr) !important;
     }

     .grid-cols-3 {
         grid-template-columns: repeat(2, 1fr) !important;
     }

     .overflow-x-auto {
         overflow-x: scroll;
     }

     header .relative.w-full {
         width: 100% !important;
         max-width: 100% !important;
     }

     header .flex {
         flex-direction: column;
         gap: 12px !important;
     }

     header .flex-1 {
         width: 100% !important;
     }

     #searchInput {
         font-size: 14px;
         padding: 10px 12px !important;
     }

     #languageSelect {
         font-size: 13px;
     }

     .text-right.hidden.sm\:block {
         display: none !important;
     }
 }

 /* O'rta qurilmalar (769px - 1024px) */
 @media (min-width: 769px) and (max-width: 1024px) {
     .loading-logo {
         width: 120px;
         height: 120px;
     }

     .loading-logo::before {
         width: 120px;
         height: 120px;
     }

     .loading-text {
         font-size: 32px;
     }

     .loading-bar {
         width: 320px;
     }

     .sidebar {
         width: 256px;
     }

     .main-content {
         margin-left: 0;
     }

     .stat-card {
         padding: 20px;
     }

     .grid-cols-4 {
         grid-template-columns: repeat(2, 1fr) !important;
     }

     .grid-cols-3 {
         grid-template-columns: repeat(3, 1fr) !important;
     }

     .modal-content {
         max-width: 550px;
     }

     .table-modern th,
     .table-modern td {
         padding: 12px 16px;
     }

     header {
         padding: 12px 16px;
     }

     header .flex {
         gap: 16px !important;
         flex-direction: row;
         flex-wrap: wrap;
     }

     header .relative.w-full {
         max-width: 500px !important;
     }

     #searchInput {
         font-size: 14px;
     }

     .text-right.hidden.sm\:block {
         display: block !important;
     }
 }

 /* Katta qurilmalar (1025px - 1440px) */
 @media (min-width: 1025px) and (max-width: 1440px) {
     .loading-logo {
         width: 130px;
         height: 130px;
     }

     .loading-text {
         font-size: 36px;
     }

     .loading-bar {
         width: 350px;
     }

     .sidebar {
         width: 256px;
     }

     .stat-card {
         padding: 24px;
     }

     .grid-cols-4 {
         grid-template-columns: repeat(4, 1fr) !important;
     }

     .grid-cols-3 {
         grid-template-columns: repeat(3, 1fr) !important;
     }

     .modal-content {
         max-width: 600px;
     }

     .table-modern th,
     .table-modern td {
         padding: 14px 18px;
     }

     header {
         padding: 16px 24px;
     }

     header .flex {
         gap: 20px !important;
         flex-direction: row;
     }

     header .relative.w-full {
         max-width: 600px !important;
     }

     #searchInput {
         font-size: 15px;
     }
 }

 /* O'ta katta qurilmalar (1441px va undan katta) */
 @media (min-width: 1441px) {
     .loading-logo {
         width: 140px;
         height: 140px;
     }

     .loading-logo::before {
         width: 140px;
         height: 140px;
         border: 6px solid transparent;
     }

     .loading-text {
         font-size: 40px;
         letter-spacing: 4px;
     }

     .loading-subtext {
         font-size: 20px;
     }

     .loading-bar {
         width: 400px;
         height: 12px;
     }

     .loading-progress {
         border-radius: 6px;
     }

     .sidebar {
         width: 280px;
     }

     .stat-card {
         padding: 28px;
     }

     .grid-cols-4 {
         grid-template-columns: repeat(4, 1fr) !important;
     }

     .grid-cols-3 {
         grid-template-columns: repeat(3, 1fr) !important;
     }

     .modal-content {
         max-width: 650px;
     }

     .table-modern th,
     .table-modern td {
         padding: 16px 20px;
         font-size: 15px;
     }

     .world-clocks {
         gap: 25px;
     }

     header {
         padding: 16px 32px;
     }

     header .flex {
         gap: 24px !important;
         flex-direction: row;
     }

     header .relative.w-full {
         max-width: 800px !important;
     }

     #searchInput {
         font-size: 16px;
         padding: 12px 16px !important;
     }

     #languageSelect {
         font-size: 15px;
     }
 }

 /* Mobil portret orientatsiyasi */
 @media (max-width: 768px) and (orientation: portrait) {
     .login-card {
         margin-top: 20px;
         margin-bottom: 20px;
     }

     .clock-wrapper {
         margin-bottom: 20px;
     }

     .sidebar {
         width: 100%;
     }

     .main-content {
         width: 100%;
     }

     .grid-cols-2 {
         grid-template-columns: 1fr !important;
     }

     .flex-col.lg\:flex-row {
         flex-direction: column !important;
     }
 }

 /* Mobil landshaft orientatsiyasi */
 @media (max-width: 1024px) and (orientation: landscape) {
     .loading-screen {
         padding: 10px;
     }

     .loading-text {
         font-size: 24px;
         margin-bottom: 10px;
     }

     .loading-subtext {
         font-size: 14px;
         margin-bottom: 20px;
     }

     .loading-bar {
         width: 250px;
     }

     .login-card {
         padding: 20px;
         max-width: 500px;
     }

     .sidebar {
         height: auto;
         overflow-x: auto;
     }

     .world-clocks {
         gap: 10px;
     }

     .analog-clock {
         width: 60px;
     }

     .analog-clock .clock-face {
         width: 50px;
         height: 50px;
     }
 }

 /* Sensorli qurilmalarni optimizatsiya qilish */
 @media (hover: none) and (pointer: coarse) {
     .menu-item {
         padding: 16px 18px;
         min-height: 48px;
     }

     .btn-primary,
     .btn-secondary,
     .btn-accent,
     .btn-warning {
         min-height: 44px;
         padding: 12px 16px;
     }

     button {
         min-height: 44px;
         min-width: 44px;
     }

     .stat-card {
         margin-bottom: 12px;
     }

     .modal-content {
         max-height: 95vh;
     }

     .input-modern {
         padding: 14px 16px;
         font-size: 16px;
     }

     .table-modern th,
     .table-modern td {
         padding: 12px;
     }
 }

 /* Retina Display Support (High DPI) */
 @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
     .loading-logo::before,
     .loading-logo i {
         -webkit-font-smoothing: antialiased;
         -moz-osx-font-smoothing: grayscale;
     }

     .text-gradient {
         -webkit-background-clip: text;
         background-clip: text;
     }

     .btn-primary,
     .btn-secondary,
     .btn-accent,
     .btn-warning {
         box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
     }
 }

 /* Tablets (iPad) */
 @media (min-width: 600px) and (max-width: 900px) {
     .sidebar {
         width: 220px;
     }

     .stat-card {
         padding: 20px;
     }

     .grid-cols-4 {
         grid-template-columns: repeat(2, 1fr) !important;
     }

     .modal-content {
         max-width: 520px;
     }

     .world-clocks {
         gap: 15px;
     }

     .analog-clock {
         width: 95px;
     }

     .analog-clock .clock-face {
         width: 85px;
         height: 85px;
     }
 }

 /* Reduced Motion Support */
 @media (prefers-reduced-motion: reduce) {
     * {
         animation-duration: 0.01ms !important;
         animation-iteration-count: 1 !important;
         transition-duration: 0.01ms !important;
     }

     .loading-logo::before {
         animation: none !important;
     }

     .floating {
         animation: none !important;
     }

     .spin {
         animation: none !important;
     }
 }

 /* Dark Mode Support */
 @media (prefers-color-scheme: dark) {
     .modal-content {
         background: #1F2937;
         color: white;
     }

     .input-modern {
         background: #374151;
         color: #F3F4F6;
         border-color: #4B5563;
     }

     .table-modern th {
         background: #1F2937;
         color: #F3F4F6;
     }

     .table-modern td {
         color: #E5E7EB;
     }

     .form-error {
         color: #FCA5A5;
     }
 }

 /* Light Mode Support */
 @media (prefers-color-scheme: light) {
     .modal-content {
         background: #FFFFFF;
         color: #111827;
     }

     .input-modern {
         background: #FFFFFF;
         color: #111827;
         border-color: #D1D5DB;
     }

     .table-modern th {
         background: #F9FAFB;
         color: #374151;
     }

     .table-modern td {
         color: #111827;
     }
 }

 /* Print Styles */
 @media print {
     .loading-screen,
     .login-container,
     .mobile-menu-btn,
     .sidebar,
     .header,
     .modal-overlay,
     .notification,
     .push-notification {
         display: none !important;
     }

     body {
         background: white;
         color: black;
     }

     .modal-content {
         box-shadow: none;
         border: 1px solid #ccc;
     }

     table {
         width: 100%;
         border-collapse: collapse;
     }

     .stat-card {
         page-break-inside: avoid;
     }
 }