/* OMR Technologies Supporting System - Styles */

:root {
    --primary-blue: #3498db;
    --primary-blue-dark: #2980b9;
    --primary-blue-light: #5dade2;
    --text-dark: #2c3e50;
    --text-muted: #7f8c8d;
    --text-light: #95a5a6;
    --bg-page: #f0f2f5;
    --bg-white: #ffffff;
    --border-color: #e0e4e8;
    --sidebar-width: 240px;
    --topnav-height: 50px;
    --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.08);
    --font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-family);
    font-size: 14px;
    color: var(--text-dark);
    background: var(--bg-page);
    line-height: 1.5;
}

a {
    text-decoration: none;
    color: inherit;
}

ul {
    list-style: none;
}

/* App Layout */
.app-wrapper {
    display: flex;
    min-height: 100vh;
}

/* Sidebar */
.sidebar {
    width: var(--sidebar-width);
    background: var(--bg-white);
    border-right: 1px solid var(--border-color);
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    overflow-y: auto;
    z-index: 1200;
    -webkit-overflow-scrolling: touch;
}

.sidebar-logo {
    padding: 20px 16px;
    text-align: center;
    border-bottom: 1px solid var(--border-color);
}

.logo-icon {
    margin-bottom: 8px;
}

.site-logo-img {
    width: 72px;
    height: auto;
    display: block;
    margin: 0 auto;
    object-fit: contain;
}

.site-logo-fallback {
    display: block;
    margin: 0 auto;
}

.site-logo-fallback[hidden] {
    display: none;
}

.logo-text {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}

.logo-omr {
    font-size: 18px;
    font-weight: 700;
    color: var(--primary-blue);
}

.logo-sub {
    font-size: 11px;
    color: var(--text-muted);
}

/* Sidebar Navigation */
.sidebar-nav {
    padding: 12px 0;
}

.sidebar-nav ul {
    display: flex;
    flex-direction: column;
}

.nav-link,
.nav-group-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    width: 100%;
    border: none;
    background: none;
    font-family: inherit;
    font-size: 13px;
    color: var(--text-dark);
    cursor: pointer;
    text-align: left;
    transition: background 0.2s;
}

.nav-link:hover,
.nav-group-toggle:hover {
    background: #f5f7fa;
}

.nav-link.active {
    color: var(--primary-blue);
    background: #eef6fc;
    font-weight: 600;
}

.nav-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.nav-icon-fast-start {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23e67e22'%3E%3Cpath d='M13 2L3 14h9l-1 8 10-12h-9l1-8z'/%3E%3C/svg%3E");
}

.nav-icon-dashboard {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%233498db'%3E%3Cpath d='M3 13h8V3H3v10zm0 8h8v-6H3v6zm10 0h8V11h-8v10zm0-18v6h8V3h-8z'/%3E%3C/svg%3E");
}

.nav-icon-logout {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23e74c3c'%3E%3Cpath d='M17 7l-1.41 1.41L18.17 11H8v2h10.17l-2.58 2.58L17 17l5-5zM4 5h8V3H4c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h8v-2H4V5z'/%3E%3C/svg%3E");
}

.nav-icon-blueprints {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%233498db'%3E%3Cpath d='M14 2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z'/%3E%3C/svg%3E");
}

.nav-icon-scheduled {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%232ecc71'%3E%3Cpath d='M19 3h-1V1h-2v2H8V1H6v2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11z'/%3E%3C/svg%3E");
}

.nav-icon-time-slot {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%239b59b6'%3E%3Cpath d='M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z'/%3E%3C/svg%3E");
}

.nav-icon-tools {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23f1c40f'%3E%3Cpath d='M22.7 19l-9.1-9.1c.9-2.3.4-5-1.5-6.9-2-2-5-2.4-7.4-1.3L9 6 6 9 1.6 4.7C.4 7.1.9 10.1 2.9 12.1c1.9 1.9 4.6 2.4 6.9 1.5l9.1 9.1c.4.4 1 .4 1.4 0l2.3-2.3c.5-.4.5-1.1.1-1.4z'/%3E%3C/svg%3E");
}

.nav-icon-insider {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%239b59b6'%3E%3Cpath d='M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm-2 16l-4-4 1.41-1.41L10 14.17l6.59-6.59L18 9l-8 8z'/%3E%3C/svg%3E");
}

.nav-icon-queries {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2316a085'%3E%3Cpath d='M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H5.17L4 17.17V4h16v12z'/%3E%3C/svg%3E");
}

.nav-icon-user-create {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2327ae60'%3E%3Cpath d='M15 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm-9-2V7H4v3H1v2h3v3h2v-3h3v-2H6zm9 4c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z'/%3E%3C/svg%3E");
}

.nav-icon-user-remove {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23e74c3c'%3E%3Cpath d='M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4zm-6-8h12v2H6V6z'/%3E%3C/svg%3E");
}

.nav-icon-password-change {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23f39c12'%3E%3Cpath d='M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z'/%3E%3C/svg%3E");
}

.nav-icon-share-screen {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%233498db'%3E%3Cpath d='M20 18c1.1 0 1.99-.9 1.99-2L22 6c0-1.1-.9-2-2-2H4c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2H0v2h24v-2h-4zM4 6h16v10H4V6zm8 3c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z'/%3E%3C/svg%3E");
}

.nav-arrow {
    margin-left: auto;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid var(--text-muted);
    transition: transform 0.2s;
}

.nav-group.expanded .nav-arrow {
    transform: rotate(180deg);
}

.nav-submenu {
    display: none;
    padding-left: 46px;
}

.nav-group.expanded .nav-submenu {
    display: block;
}

.nav-submenu a {
    display: block;
    padding: 8px 16px;
    font-size: 13px;
    color: var(--text-muted);
    transition: all 0.2s;
}

.nav-submenu a:hover,
.nav-submenu a.active {
    color: var(--primary-blue);
    background: #eef6fc;
}

/* Main Content */
.main-content {
    flex: 1;
    margin-left: var(--sidebar-width);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Top Navigation */
.top-nav {
    background: var(--primary-blue);
    height: var(--topnav-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    position: sticky;
    top: 0;
    z-index: 50;
    gap: 12px;
}

.mobile-menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 10px;
    border: none;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.15);
    cursor: pointer;
    flex-shrink: 0;
    position: relative;
    z-index: 1210;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.mobile-menu-toggle:focus {
    outline: 2px solid rgba(255, 255, 255, 0.8);
    outline-offset: 2px;
}

.top-nav-start {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.mobile-menu-bar {
    display: block;
    width: 100%;
    height: 2px;
    background: #ffffff;
    border-radius: 2px;
}

.sidebar-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 1190;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

body.menu-open .sidebar-overlay {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

body.menu-open {
    overflow: hidden;
}

body.menu-open .mobile-menu-toggle {
    background: rgba(255, 255, 255, 0.25);
}

.top-nav-links ul {
    display: flex;
    gap: 4px;
}

.top-nav-links a {
    color: rgba(255, 255, 255, 0.85);
    padding: 14px 16px;
    font-size: 13px;
    font-weight: 600;
    transition: color 0.2s;
    border-bottom: 3px solid transparent;
}

.top-nav-links a:hover {
    color: #ffffff;
}

.top-nav-links a.active {
    color: #ffffff;
    border-bottom-color: #ffffff;
}

.top-nav-user {
    display: flex;
    align-items: center;
    gap: 10px;
}

.user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255, 255, 255, 0.5);
}

.user-name {
    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
}

.user-actions {
    display: flex;
    gap: 8px;
    margin-left: 8px;
}

.user-action {
    color: rgba(255, 255, 255, 0.85);
    display: flex;
    align-items: center;
    padding: 4px;
    transition: color 0.2s;
}

.user-action:hover {
    color: #ffffff;
}

/* Page Header */
.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 30px;
    background: var(--bg-white);
    border-bottom: 1px solid var(--border-color);
}

.page-title {
    font-size: 22px;
    font-weight: 600;
    color: var(--primary-blue-light);
}

.member-badge {
    display: inline-block;
    padding: 6px 18px;
    border: 2px solid var(--primary-blue);
    border-radius: 20px;
    color: var(--primary-blue);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

/* Training Grid */
.training-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    padding: 24px 30px;
    flex: 1;
}

.training-card {
    background: var(--bg-white);
    border-radius: 6px;
    box-shadow: var(--shadow-card);
    padding: 24px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: box-shadow 0.2s, transform 0.2s;
}

.training-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
}

.card-icon {
    width: 48px;
    height: 48px;
    margin-bottom: 16px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.card-icon-folder {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%233498db' stroke-width='2'%3E%3Cpath d='M8 16h20l4 4h24v32H8V16z'/%3E%3C/svg%3E");
}

.card-icon-envelope {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%232ecc71' stroke-width='2'%3E%3Crect x='8' y='16' width='48' height='32' rx='2'/%3E%3Cpath d='M8 20l24 16 24-16'/%3E%3Cpath d='M44 36l6 6' stroke='%232ecc71' stroke-width='3'/%3E%3C/svg%3E");
}

.card-icon-chart {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%233498db' stroke-width='2'%3E%3Cpath d='M8 48V24M24 48V16M40 48V32M56 48V8'/%3E%3C/svg%3E");
}

.card-icon-medal {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%23e67e22' stroke-width='2'%3E%3Ccircle cx='32' cy='28' r='16'/%3E%3Cpath d='M24 44l8 12 8-12'/%3E%3C/svg%3E");
}

.card-icon-dollar {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%232ecc71' stroke-width='2'%3E%3Ccircle cx='32' cy='32' r='24'/%3E%3Cpath d='M32 16v32M24 24h12a8 8 0 010 16H24'/%3E%3C/svg%3E");
}

.card-icon-target {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%23e74c3c' stroke-width='2'%3E%3Ccircle cx='32' cy='32' r='24'/%3E%3Ccircle cx='32' cy='32' r='16'/%3E%3Ccircle cx='32' cy='32' r='8'/%3E%3C/svg%3E");
}

.card-icon-video {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%233498db' stroke-width='2'%3E%3Crect x='8' y='16' width='36' height='32' rx='2'/%3E%3Cpath d='M44 28l12-6v20l-12-6'/%3E%3C/svg%3E");
}

.card-icon-triangle {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%23e67e22' stroke-width='2'%3E%3Cpath d='M16 52L48 32 16 12z'/%3E%3C/svg%3E");
}

.card-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 10px;
    line-height: 1.4;
}

.card-description {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.6;
    margin-bottom: 16px;
    flex: 1;
}

.card-cta {
    font-size: 12px;
    font-weight: 700;
    color: var(--primary-blue);
    letter-spacing: 0.5px;
    transition: color 0.2s;
}

.card-cta:hover {
    color: var(--primary-blue-dark);
}

.card-cta-primary {
    background: var(--primary-blue);
    color: #ffffff;
    padding: 8px 24px;
    border-radius: 4px;
    transition: background 0.2s;
}

.card-cta-primary:hover {
    background: var(--primary-blue-dark);
    color: #ffffff;
}

/* Responsive */
@media (max-width: 1200px) {
    .training-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 992px) {
    .training-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .top-nav-links a {
        padding: 14px 10px;
        font-size: 12px;
    }
}

@media (max-width: 768px) {
    .mobile-menu-toggle {
        display: flex;
    }

    .sidebar {
        left: calc(-1 * var(--sidebar-width));
        transform: none;
        transition: left 0.25s ease;
        box-shadow: 2px 0 12px rgba(0, 0, 0, 0.15);
    }

    body.menu-open .sidebar,
    .sidebar.open {
        left: 0;
    }

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

    .training-grid {
        grid-template-columns: 1fr;
        padding: 16px;
    }

    .page-header {
        flex-direction: column;
        gap: 12px;
        align-items: flex-start;
        padding: 16px;
    }

    .top-nav {
        padding: 0 12px;
    }

    .top-nav-links {
        display: none;
    }

    .user-name {
        display: none;
    }

    .table-section {
        padding: 16px;
    }
}

.table-section {
    padding: 24px 30px;
}

.dashboard-section-title {
    font-size: 18px;
    color: #2c3e50;
    margin-bottom: 16px;
}

.dashboard-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 16px;
}

.dashboard-stats-single {
    grid-template-columns: 1fr;
    max-width: 280px;
}

.dashboard-stat-card {
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    padding: 20px;
    border-left: 4px solid #ccc;
}

.dashboard-stat-card .stat-label {
    display: block;
    font-size: 13px;
    color: #7f8c8d;
    margin-bottom: 8px;
    font-weight: 600;
}

.dashboard-stat-card .stat-value {
    font-size: 32px;
    line-height: 1;
    color: #2c3e50;
}

.stat-available {
    border-left-color: #2ecc71;
}

.stat-booked {
    border-left-color: #3498db;
}

.stat-blocked {
    border-left-color: #e74c3c;
}

.stat-meeting {
    border-left-color: #8B3A52;
}

.stat-total {
    border-left-color: #9b59b6;
}

.stat-open {
    border-left-color: #2ecc71;
}

.stat-closed {
    border-left-color: #e74c3c;
}

.dashboard-stats-queries-total {
    grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 576px) {
    .dashboard-stats-queries-total {
        grid-template-columns: 1fr;
    }
}

.query-count-badge {
    display: inline-block;
    min-width: 28px;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 700;
    text-align: center;
}

.query-count-open {
    background: #eafaf1;
    color: #1e8449;
}

.query-count-closed {
    background: #fdedec;
    color: #c0392b;
}

.query-summary-total {
    font-size: 12px;
    font-weight: 600;
    color: #7f8c8d;
}

.query-summary-details {
    grid-template-columns: repeat(2, 1fr);
}

.dashboard-queries-actions {
    margin-top: 16px;
}

.user-college-queries-section {
    margin-top: 32px;
    padding-top: 28px;
    border-top: 1px solid #e8ecef;
}

.query-chart-card {
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    padding: 20px;
    margin-bottom: 20px;
}

.query-chart-title {
    font-size: 16px;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 16px;
}

.query-chart-wrap {
    position: relative;
    width: 100%;
    height: 280px;
}

.query-chart-wrap-pie {
    max-width: 360px;
    margin: 0 auto;
}

@media (max-width: 576px) {
    .query-chart-wrap {
        height: 240px;
    }

    .query-chart-wrap-pie {
        max-width: 100%;
    }
}

.user-dashboard-link-btn-secondary {
    background: #ffffff;
    color: #3498db;
    border: 1px solid #3498db;
}

.user-dashboard-link-btn-secondary:hover {
    background: #ebf5fb;
    color: #2980b9;
}

@media (max-width: 992px) {
    .dashboard-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .dashboard-stats-grid {
        grid-template-columns: 1fr;
    }
}

.details-table {
    width: 100%;
    border-collapse: collapse;
    background: #ffffff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.details-table th,
.details-table td {
    border: 1px solid #e0e4e8;
    padding: 10px 12px;
    text-align: left;
}

.details-table th {
    background: #f5f7fa;
    font-weight: 700;
}

.table-scroll-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    background: #ffffff;
}

/* User dashboard (cdashboard.php) */
.user-dashboard-title {
    display: flex;
    flex-direction: column;
    gap: 4px;
    line-height: 1.4;
}

.user-dashboard-title-main {
    font-size: 18px;
    font-weight: 700;
    color: #2c3e50;
}

.user-dashboard-title-meta {
    font-size: 13px;
    font-weight: 600;
    color: #7f8c8d;
}

.user-dashboard-stat .dashboard-stat-card {
    position: relative;
}

.user-dashboard-stat .stat-college {
    display: block;
    margin-top: 8px;
    font-size: 12px;
    color: #7f8c8d;
    font-weight: 600;
}

.user-dashboard-actions {
    margin-top: 16px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.user-dashboard-link-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 16px;
    border-radius: 6px;
    background: #3498db;
    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.2s;
}

.user-dashboard-link-btn:hover {
    background: #2980b9;
    color: #ffffff;
}

.dashboard-day-section + .dashboard-day-section {
    margin-top: 32px;
    padding-top: 28px;
    border-top: 1px solid #e8ecef;
}

.dashboard-day-section-tomorrow .dashboard-section-title:first-child {
    color: #2c3e50;
}

.user-dashboard-note {
    margin-top: 12px;
}

.booking-status {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
}

.booking-status-booked {
    background: #e8f4fc;
    color: #2980b9;
}

.booking-status-available {
    background: #e8f8ef;
    color: #1e7e45;
}

.booking-status-blocked {
    background: #fdeeee;
    color: #c0392b;
}

.booking-status-meeting {
    background: #f5e1e8;
    color: #8B3A52;
}

/* Bookings: desktop table vs mobile cards */
.bookings-view-desktop {
    display: block;
}

.bookings-view-mobile {
    display: none;
}

.bookings-table th,
.bookings-table td {
    white-space: nowrap;
}

.bookings-table td:nth-child(2),
.bookings-table td:nth-child(6) {
    white-space: normal;
}

.bookings-empty {
    text-align: center;
    color: #7f8c8d;
    padding: 20px 12px !important;
}

.booking-card {
    background: #ffffff;
    border: 1px solid #e0e4e8;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    margin-bottom: 12px;
    overflow: hidden;
}

.booking-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 14px;
    background: #f5f7fa;
    border-bottom: 1px solid #e0e4e8;
}

.booking-card-header strong {
    font-size: 14px;
    color: #2c3e50;
}

.booking-card-details {
    margin: 0;
    padding: 4px 0;
}

.booking-card-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    border-bottom: 1px solid #f0f2f5;
}

.booking-card-row:last-child {
    border-bottom: none;
}

.booking-card-row dt {
    margin: 0;
    font-size: 12px;
    font-weight: 700;
    color: #526477;
    flex-shrink: 0;
}

.booking-card-row dd {
    margin: 0;
    font-size: 13px;
    color: #2c3e50;
    text-align: right;
    word-break: break-word;
}

.bookings-empty-card {
    background: #ffffff;
    border: 1px solid #e0e4e8;
    border-radius: 8px;
    padding: 20px 16px;
    text-align: center;
    color: #7f8c8d;
    font-size: 13px;
}

@media (max-width: 768px) {
    .user-dashboard-section .dashboard-stats-single {
        max-width: none;
    }

    .user-dashboard-title-main {
        font-size: 16px;
    }

    .user-dashboard-title-meta {
        font-size: 12px;
    }

    .bookings-view-desktop {
        display: none;
    }

    .bookings-view-mobile {
        display: block;
    }

    .user-dashboard-link-btn {
        width: 100%;
    }
}

@media (max-width: 576px) {
    .user-dashboard-section .dashboard-stat-card .stat-value {
        font-size: 28px;
    }
}

.auth-body {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(160deg, #06b66a 0%, #0ea8a1 45%, #1696d3 100%);
}

.auth-wrapper {
    width: 100%;
    max-width: 460px;
    padding: 24px;
}

.auth-card {
    background: #ffffff;
    border-radius: 14px;
    box-shadow: 0 14px 35px rgba(44, 62, 80, 0.14);
    padding: 28px;
    border: 1px solid #e7edf5;
}

.auth-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}

.auth-brand-icon {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    background: linear-gradient(135deg, #3498db, #2f72d9);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    letter-spacing: 1px;
}

.auth-brand-icon[hidden] {
    display: none;
}

.auth-brand-logo {
    width: 72px;
    height: auto;
    object-fit: contain;
    flex-shrink: 0;
}

.auth-card h1 {
    margin-bottom: 2px;
    color: #2c3e50;
    font-size: 26px;
    line-height: 1.2;
}

.auth-card p {
    color: #7b8da0;
    margin-bottom: 0;
}

.auth-form {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.auth-form label {
    color: #526477;
    font-size: 13px;
    font-weight: 600;
}

.auth-form input {
    border: 1px solid #cfd9e3;
    border-radius: 8px;
    padding: 11px 12px;
    margin-bottom: 8px;
    font-size: 14px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.auth-form input:focus {
    border-color: #3498db;
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.12);
    outline: none;
}

.auth-form button {
    margin-top: 10px;
    border: none;
    border-radius: 8px;
    background: linear-gradient(135deg, #3498db, #2f72d9);
    color: #ffffff;
    padding: 11px;
    cursor: pointer;
    font-weight: 700;
    letter-spacing: 0.2px;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.auth-form button:hover {
    transform: translateY(-1px);
    box-shadow: 0 7px 16px rgba(52, 152, 219, 0.25);
}

.auth-error {
    background: #fff3f3;
    color: #b33939;
    border: 1px solid #ffd6d6;
    border-radius: 8px;
    padding: 10px 11px;
    margin-bottom: 12px;
}

/* Time Slot Calendar */
.timeslot-section {
    padding-top: 10px;
}

.timeslot-alert {
    padding: 10px 12px;
    border-radius: 6px;
    margin-bottom: 14px;
    font-weight: 600;
}

.timeslot-alert-hidden {
    display: none;
}

.timeslot-alert-success {
    background: #e8f8ef;
    color: #1e7e45;
    border: 1px solid #b8e6cb;
}

.timeslot-alert-error {
    background: #fff3f3;
    color: #b33939;
    border: 1px solid #ffd6d6;
}

.timeslot-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

.timeslot-nav-btn {
    background: #ffffff;
    border: 1px solid #d5dbe1;
    border-radius: 6px;
    padding: 8px 12px;
    color: #2c3e50;
    font-weight: 600;
}

.timeslot-nav-btn:hover {
    background: #f5f7fa;
}

.timeslot-week-label {
    font-weight: 700;
    color: #2c3e50;
}

.timeslot-legend {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 14px;
    color: #526477;
    font-size: 13px;
}

.legend-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 6px;
}

.legend-dot.available { background: #2ecc71; }
.legend-dot.booked { background: #3498db; }
.legend-dot.blocked { background: #e74c3c; }
.legend-dot.meeting { background: #8B3A52; }
.legend-dot.break { background: #f39c12; }
.legend-dot.current { background: #9b59b6; }

.timeslot-table-wrap {
    overflow-x: auto;
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.timeslot-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 1200px;
}

.timeslot-grid thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #f5f7fa;
}

.timeslot-corner-header,
.timeslot-day-row-header {
    position: sticky;
    left: 0;
    z-index: 1;
    background: #f5f7fa;
    text-align: left;
    min-width: 130px;
    vertical-align: middle;
    padding: 12px;
}

.timeslot-grid thead .timeslot-corner-header {
    z-index: 3;
}

.timeslot-slot-col {
    min-width: 120px;
    text-align: center;
    vertical-align: middle;
    padding: 10px 8px;
}

.timeslot-slot-col .slot-label {
    display: block;
    font-weight: 700;
    color: #2c3e50;
    font-size: 12px;
    margin-bottom: 4px;
}

.timeslot-slot-col .slot-time {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: #526477;
    white-space: nowrap;
}

.timeslot-break-col {
    background: #fff8e8;
}

.timeslot-current-col {
    background: #f3ebff;
    box-shadow: inset 0 -3px 0 #9b59b6;
}

.timeslot-current-day {
    background: #f3ebff !important;
    box-shadow: inset -3px 0 0 #9b59b6;
}

.timeslot-current-day-row .slot-current {
    box-shadow: inset 0 0 0 2px #9b59b6;
    position: relative;
}

.slot-current-badge {
    display: inline-block;
    background: #9b59b6;
    color: #ffffff;
    font-size: 9px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 10px;
    margin-top: 4px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.timeslot-day-row-header .slot-current-badge {
    margin-top: 6px;
}

.slot-cell.slot-current {
    outline: 2px solid #9b59b6;
    outline-offset: -2px;
    position: relative;
}

.slot-cell .slot-current-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    margin-top: 0;
}

.timeslot-day-row-header .day-name {
    display: block;
    font-weight: 700;
    color: #2c3e50;
}

.timeslot-day-row-header .day-date {
    display: block;
    font-size: 11px;
    font-weight: 400;
    color: #7f8c8d;
    margin-top: 2px;
}

.timeslot-table th,
.timeslot-table td {
    border: 1px solid #e0e4e8;
    padding: 10px;
    text-align: center;
    vertical-align: middle;
}

.timeslot-table th {
    background: #f5f7fa;
    font-size: 13px;
}

.timeslot-table th small {
    color: #7f8c8d;
    font-weight: 400;
}

.slot-label {
    font-weight: 700;
    text-align: left;
    white-space: nowrap;
}

.slot-time {
    text-align: left;
    white-space: nowrap;
    color: #526477;
    font-size: 13px;
}

.timeslot-break-row .slot-label,
.timeslot-break-row .slot-time {
    font-weight: 700;
}

.slot-cell {
    min-width: 130px;
}

.slot-available {
    background: #e8f8ef;
    color: #1e7e45;
}

.slot-booked {
    background: #e8f4fc;
    color: #2980b9;
}

.slot-blocked {
    background: #fdeeee;
    color: #c0392b;
}

.slot-meeting {
    background: #f5e1e8;
    color: #8B3A52;
}

.slot-break {
    background: #fff8e8;
}

.slot-past {
    background: #f0f0f0 !important;
    color: #95a5a6;
    opacity: 0.85;
}

.slot-past-label {
    display: block;
    font-size: 10px;
    color: #95a5a6;
    margin-top: 4px;
    font-style: italic;
}

.slot-status-text {
    display: block;
    font-weight: 700;
    font-size: 12px;
}

.slot-book-btn,
.slot-save-btn {
    border: none;
    border-radius: 4px;
    padding: 7px 10px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.slot-book-btn {
    background: #2ecc71;
    color: #ffffff;
}

.slot-book-btn:hover {
    background: #27ae60;
}

.slot-save-btn {
    color: #ffffff;
    margin-top: 6px;
}

.slot-save-available {
    background: #2ecc71;
}

.slot-save-available:hover {
    background: #27ae60;
}

.slot-save-booked {
    background: #3498db;
}

.slot-save-booked:hover {
    background: #2980b9;
}

.slot-save-blocked {
    background: #e74c3c;
}

.slot-save-blocked:hover {
    background: #c0392b;
}

.slot-save-meeting {
    background: #8B3A52;
}

.slot-save-meeting:hover {
    background: #7A2F45;
}

.slot-status-select.slot-status-available {
    border-color: #2ecc71;
    background: #e8f8ef;
}

.slot-status-select.slot-status-booked {
    border-color: #3498db;
    background: #e8f4fc;
}

.slot-status-select.slot-status-blocked {
    border-color: #e74c3c;
    background: #fdeeee;
}

.slot-status-select.slot-status-meeting {
    border-color: #8B3A52;
    background: #f5e1e8;
    color: #8B3A52;
}

.slot-admin-form {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.slot-admin-form input,
.slot-admin-form select {
    width: 100%;
    border: 1px solid #cfd9e3;
    border-radius: 4px;
    padding: 5px 6px;
    font-size: 11px;
}

.timeslot-note {
    margin-top: 12px;
    color: #7f8c8d;
    font-size: 13px;
}

.slot-booked-by {
    display: block;
    font-size: 11px;
    color: #526477;
    margin-bottom: 4px;
}

/* Timeslot: desktop grid vs mobile day cards */
.timeslot-view-desktop {
    display: block;
}

.timeslot-view-mobile {
    display: none;
}

.timeslot-day-card {
    background: #ffffff;
    border: 1px solid #e0e4e8;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    margin-bottom: 16px;
    overflow: hidden;
}

.timeslot-day-card-today {
    border-color: #9b59b6;
    box-shadow: 0 2px 10px rgba(155, 89, 182, 0.15);
}

.timeslot-day-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 14px;
    background: #f5f7fa;
    border-bottom: 1px solid #e0e4e8;
}

.timeslot-day-card-today .timeslot-day-card-header {
    background: #f3ebff;
}

.timeslot-day-card-header strong {
    display: block;
    font-size: 15px;
    color: #2c3e50;
}

.timeslot-day-card-header span {
    display: block;
    font-size: 12px;
    color: #7f8c8d;
    margin-top: 2px;
}

.timeslot-day-card-slots {
    display: flex;
    flex-direction: column;
}

.timeslot-mobile-slot {
    padding: 12px 14px;
    border-bottom: 1px solid #f0f2f5;
}

.timeslot-mobile-slot:last-child {
    border-bottom: none;
}

.timeslot-mobile-slot-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}

.timeslot-mobile-slot-title strong {
    display: block;
    font-size: 13px;
    color: #2c3e50;
}

.timeslot-mobile-slot-title .slot-time {
    display: block;
    font-size: 12px;
    color: #526477;
    margin-top: 2px;
    white-space: normal;
}

.timeslot-mobile-status {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
    flex-shrink: 0;
}

.timeslot-mobile-slot.slot-break {
    background: #fff8e8;
}

.timeslot-mobile-slot.slot-available .timeslot-mobile-status {
    background: #e8f8ef;
    color: #1e7e45;
}

.timeslot-mobile-slot.slot-booked .timeslot-mobile-status {
    background: #e8f4fc;
    color: #2980b9;
}

.timeslot-mobile-slot.slot-blocked .timeslot-mobile-status {
    background: #fdeeee;
    color: #c0392b;
}

.timeslot-mobile-slot.slot-meeting .timeslot-mobile-status {
    background: #f5e1e8;
    color: #8B3A52;
}

.timeslot-mobile-slot.slot-break .timeslot-mobile-status {
    background: #fff3e0;
    color: #d68910;
}

.timeslot-mobile-slot-body .slot-admin-form,
.timeslot-mobile-slot-body .slot-book-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.timeslot-mobile-slot-body .slot-book-btn,
.timeslot-mobile-slot-body .slot-save-btn {
    width: 100%;
}

.timeslot-mobile-slot.slot-current {
    outline: 2px solid #9b59b6;
    outline-offset: -2px;
    position: relative;
}

.timeslot-mobile-slot .slot-current-badge {
    position: static;
    margin-top: 0;
}

@media (max-width: 768px) {
    .timeslot-view-desktop {
        display: none;
    }

    .timeslot-view-mobile {
        display: block;
    }

    .timeslot-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .timeslot-nav-btn {
        text-align: center;
    }

    .timeslot-week-label {
        text-align: center;
        font-size: 14px;
    }

    .timeslot-legend {
        gap: 10px;
        font-size: 12px;
    }
}

@media (min-width: 769px) {
    .timeslot-view-mobile {
        display: none !important;
    }
}

/* Queries / Support conversation */
.queries-section {
    margin-top: 0;
}

.queries-layout {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 20px;
    margin-top: 16px;
}

.queries-list-panel,
.queries-chat-panel {
    background: #ffffff;
    border: 1px solid #e1e8ef;
    border-radius: 8px;
    padding: 16px;
}

.query-create-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid #e1e8ef;
}

.query-panel-subtitle {
    margin: 0 0 4px;
    font-size: 14px;
    font-weight: 700;
    color: #2c3e50;
}

.query-admin-send-form .query-composer select,
.query-create-form select {
    width: 100%;
    border: 1px solid #cfd9e3;
    border-radius: 6px;
    padding: 8px 10px;
    font-size: 13px;
    font-family: inherit;
    background: #ffffff;
}

.query-reply-form .query-panel-subtitle {
    margin-bottom: 10px;
}

/* Queries — Send Query / Send Message buttons (Chrome-safe) */
.queries-section .query-composer button.query-submit-btn,
.queries-section .query-reply-form button.query-submit-btn,
.queries-section .query-create-form button.query-submit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    box-sizing: border-box;
    margin: 0;
    border: 0;
    border-radius: 8px;
    padding: 10px 22px;
    min-width: 140px;
    font-size: 14px;
    font-weight: 700;
    font-family: inherit;
    line-height: 1.2;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    color: #ffffff !important;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    color-scheme: light;
    box-shadow: 0 2px 8px rgba(44, 62, 80, 0.18);
    transition: background-color 0.2s, box-shadow 0.2s, transform 0.15s;
}

.queries-section .query-composer button.query-submit-btn:hover:not(:disabled),
.queries-section .query-reply-form button.query-submit-btn:hover:not(:disabled),
.queries-section .query-create-form button.query-submit-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(44, 62, 80, 0.22);
}

.queries-section .query-composer button.query-submit-btn:active:not(:disabled),
.queries-section .query-reply-form button.query-submit-btn:active:not(:disabled),
.queries-section .query-create-form button.query-submit-btn:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(44, 62, 80, 0.16);
}

.queries-section button.query-submit-btn.query-submit-btn-create {
    background-color: #3498db;
    background-image: linear-gradient(135deg, #3498db 0%, #2f72d9 100%);
}

.queries-section button.query-submit-btn.query-submit-btn-create:hover:not(:disabled) {
    background-color: #2f72d9;
    background-image: linear-gradient(135deg, #2f72d9 0%, #2868c4 100%);
}

.queries-section button.query-submit-btn.query-submit-btn-message {
    background-color: #1abc9c;
    background-image: linear-gradient(135deg, #1abc9c 0%, #16a085 100%);
}

.queries-section button.query-submit-btn.query-submit-btn-message:hover:not(:disabled) {
    background-color: #16a085;
    background-image: linear-gradient(135deg, #16a085 0%, #138d75 100%);
}

.queries-section button.query-submit-btn.query-submit-btn-admin {
    background-color: #9b59b6;
    background-image: linear-gradient(135deg, #9b59b6 0%, #8e44ad 100%);
}

.queries-section button.query-submit-btn.query-submit-btn-admin:hover:not(:disabled) {
    background-color: #8e44ad;
    background-image: linear-gradient(135deg, #8e44ad 0%, #7d3c98 100%);
}

.queries-section button.query-submit-btn.query-submit-btn-reply {
    background-color: #e67e22;
    background-image: linear-gradient(135deg, #e67e22 0%, #d35400 100%);
}

.queries-section button.query-submit-btn.query-submit-btn-reply:hover:not(:disabled) {
    background-color: #d35400;
    background-image: linear-gradient(135deg, #d35400 0%, #ba4a00 100%);
}

.queries-section .query-composer button.query-submit-btn,
.queries-section .query-reply-form button.query-submit-btn,
.queries-section .query-create-form button.query-submit-btn {
    align-self: flex-start;
    margin-top: 6px;
}

@media (max-width: 768px) {
    .queries-section .query-composer button.query-submit-btn,
    .queries-section .query-reply-form button.query-submit-btn,
    .queries-section .query-create-form button.query-submit-btn {
        width: 100%;
    }
}

/* Share Screen & status action buttons */
.queries-section button.query-action-btn,
button.sharescreen-connect-btn,
button.sharescreen-disconnect-btn {
    display: inline-block;
    border: none;
    border-radius: 6px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 700;
    font-family: inherit;
    line-height: 1.2;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    text-align: center;
    transition: background 0.2s, opacity 0.2s;
}

button.sharescreen-connect-btn {
    background-color: #27ae60;
    color: #ffffff;
}

button.sharescreen-connect-btn:hover:not(:disabled) {
    background-color: #219a52;
}

.queries-section button.query-action-btn-update {
    background-color: #3498db;
    color: #ffffff;
}

.queries-section button.query-action-btn-update:hover:not(:disabled) {
    background-color: #2980b9;
}

button.sharescreen-disconnect-btn {
    background-color: #e74c3c;
    color: #ffffff;
}

button.sharescreen-disconnect-btn:hover:not(:disabled) {
    background-color: #c0392b;
}

.query-action-btn:disabled,
.sharescreen-connect-btn:disabled,
.sharescreen-disconnect-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.query-status-form .query-action-btn-update {
    margin-top: 0;
    margin-left: 8px;
}

.query-status-form {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.query-status-form select {
    border: 1px solid #cfd9e3;
    border-radius: 6px;
    padding: 7px 10px;
    font-size: 13px;
    font-family: inherit;
}

.query-create-form label {
    font-size: 13px;
    font-weight: 600;
    color: #2c3e50;
}

.query-create-form input,
.query-create-form textarea,
.query-reply-form textarea {
    width: 100%;
    border: 1px solid #cfd9e3;
    border-radius: 6px;
    padding: 8px 10px;
    font-size: 13px;
    font-family: inherit;
    resize: vertical;
}

.queries-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 520px;
    overflow-y: auto;
}

.query-list-item {
    display: block;
    padding: 10px 12px;
    border: 1px solid #e1e8ef;
    border-radius: 6px;
    text-decoration: none;
    color: #2c3e50;
    transition: background 0.15s, border-color 0.15s;
    border-left-width: 4px;
}

.query-list-item-open {
    background: #f6fdf9;
    border-color: #b8e6cb;
    border-left-color: #2ecc71;
}

.query-list-item-closed {
    background: #fff8f8;
    border-color: #f5c6c6;
    border-left-color: #e74c3c;
}

.query-list-item-open:hover,
.query-list-item-open.active {
    background: #e8f8ef;
    border-color: #2ecc71;
}

.query-list-item-closed:hover,
.query-list-item-closed.active {
    background: #fdeeee;
    border-color: #e74c3c;
}

.query-list-item strong {
    display: block;
    font-size: 14px;
    margin-bottom: 4px;
}

.query-list-item small {
    display: block;
    color: #7f8c8d;
    font-size: 12px;
}

.query-status {
    display: inline-block;
    margin-top: 6px;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
}

.query-status-open {
    background: #2ecc71;
    color: #ffffff;
}

.query-status-closed {
    background: #e74c3c;
    color: #ffffff;
}

.query-chat-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid #e1e8ef;
    margin-bottom: 16px;
}

.query-chat-header h2 {
    font-size: 18px;
    color: #2c3e50;
    margin-bottom: 4px;
}

.query-chat-header p {
    font-size: 13px;
    color: #7f8c8d;
}

.query-status-form {
    display: flex;
    gap: 8px;
    align-items: center;
}

.query-status-form select {
    border: 1px solid #cfd9e3;
    border-radius: 4px;
    padding: 6px 8px;
    font-size: 12px;
}

.query-messages {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: 420px;
    overflow-y: auto;
    margin-bottom: 16px;
    padding-right: 4px;
}

.query-message {
    max-width: 85%;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.5;
}

.query-message-user {
    align-self: flex-start;
    background: #f4f8fb;
    border: 1px solid #d6e4f0;
}

.query-message-admin {
    align-self: flex-end;
    background: #e8f4fc;
    border: 1px solid #b8d9f0;
}

.query-message-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-bottom: 6px;
    font-size: 12px;
}

.query-message-meta strong {
    color: #2c3e50;
}

.query-message-meta span {
    color: #3498db;
    font-weight: 600;
}

.query-message-meta small {
    color: #95a5a6;
}

.query-message p {
    margin: 0;
    color: #2c3e50;
}

.query-reply-form {
    padding-top: 12px;
    border-top: 1px solid #e1e8ef;
}

.query-composer {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.query-type-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.query-type-tab {
    border: 1px solid #cfd9e3;
    background: #f8fafc;
    color: #2c3e50;
    border-radius: 16px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.query-type-tab.active {
    background: #3498db;
    border-color: #3498db;
    color: #ffffff;
}

.query-composer-panel {
    display: none;
    flex-direction: column;
    gap: 8px;
}

.query-composer-panel.active {
    display: flex;
}

.query-file-label {
    font-size: 12px;
    color: #526477;
}

.query-file-input {
    font-size: 12px;
}

.query-file-preview {
    min-height: 0;
}

.query-preview-thumb {
    max-width: 220px;
    max-height: 160px;
    border-radius: 8px;
    border: 1px solid #d6e4f0;
    object-fit: cover;
}

.query-voice-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.query-voice-btn {
    border: none;
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.query-voice-record {
    background: #e74c3c;
    color: #ffffff;
}

.query-voice-stop {
    background: #7f8c8d;
    color: #ffffff;
}

.query-voice-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.query-voice-status {
    font-size: 12px;
    color: #7f8c8d;
}

.query-msg-type-badge {
    background: #eef3f7;
    color: #526477;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 600;
}

.query-message-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.query-msg-image {
    max-width: 260px;
    max-height: 200px;
    border-radius: 8px;
    display: block;
    object-fit: cover;
}

.query-msg-audio {
    width: 260px;
    max-width: 100%;
    height: 36px;
}

.query-msg-document {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: #ffffff;
    border: 1px solid #cfd9e3;
    border-radius: 6px;
    text-decoration: none;
    color: #2c3e50;
    font-weight: 600;
}

.query-msg-document:hover {
    background: #f4f8fb;
}

.query-doc-icon {
    font-size: 18px;
}

.query-msg-text {
    margin: 0;
    color: #2c3e50;
}

.query-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 320px;
    text-align: center;
}

.query-empty-state h2 {
    font-size: 18px;
    color: #2c3e50;
    margin-bottom: 8px;
}

@media (max-width: 900px) {
    .queries-layout {
        grid-template-columns: 1fr;
    }

    .query-chat-header {
        flex-direction: column;
    }
}

/* User Creation (admin) */
.usercreate-section {
    max-width: 640px;
}

.usercreate-card {
    background: #ffffff;
    border: 1px solid #e0e4e8;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    padding: 20px 24px;
}

.usercreate-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 16px;
}

.usercreate-field label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 6px;
}

.usercreate-field input,
.usercreate-field select {
    width: 100%;
    border: 1px solid #cfd9e3;
    border-radius: 6px;
    padding: 10px 12px;
    font-size: 14px;
    font-family: inherit;
}

.usercreate-field input[type="file"] {
    padding: 8px;
    background: #f8fafc;
}

.usercreate-hint {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    color: #7f8c8d;
}

.usercreate-logo-preview {
    margin-top: 10px;
}

.usercreate-logo-thumb {
    max-width: 120px;
    max-height: 120px;
    border-radius: 8px;
    border: 1px solid #e0e4e8;
    object-fit: contain;
    background: #ffffff;
}

.usercreate-submit {
    align-self: flex-start;
    padding: 10px 20px;
    margin-top: 4px;
}

@media (max-width: 768px) {
    .usercreate-submit {
        width: 100%;
    }
}

/* Remove User (admin) */
.userremove-delete-form {
    margin: 0;
}

.userremove-action-cell {
    text-align: center;
    white-space: nowrap;
}

.userremove-edit-btn {
    border: none;
    border-radius: 4px;
    padding: 7px 14px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    background: #3498db;
    color: #ffffff;
    transition: background 0.2s;
}

.userremove-edit-btn:hover {
    background: #2980b9;
}

.userremove-delete-btn {
    border: none;
    border-radius: 4px;
    padding: 7px 14px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    background: #e74c3c;
    color: #ffffff;
    transition: background 0.2s;
}

.userremove-delete-btn:hover {
    background: #c0392b;
}

.userremove-delete-form-mobile {
    padding: 0 14px 14px;
}

.userremove-delete-form-mobile .userremove-delete-btn {
    width: 100%;
    padding: 10px 14px;
}

.userremove-mobile-actions {
    display: grid;
    gap: 10px;
    padding: 0 14px 14px;
}

.userremove-mobile-actions .userremove-edit-btn {
    width: 100%;
    padding: 10px 14px;
}

.userremove-table td.userremove-action-cell {
    text-align: center;
    white-space: nowrap;
}

.userremove-card .booking-card-details {
    padding-bottom: 0;
}

.userremove-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1300;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.userremove-modal.active {
    display: flex;
}

.userremove-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
}

.userremove-modal-dialog {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 400px;
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    padding: 20px 24px;
}

.userremove-modal-title {
    font-size: 18px;
    color: #2c3e50;
    margin-bottom: 12px;
}

.userremove-modal-text {
    font-size: 14px;
    color: #526477;
    margin-bottom: 8px;
    line-height: 1.5;
}

.userremove-modal-text strong {
    color: #2c3e50;
}

.userremove-modal-warning {
    font-size: 13px;
    color: #e74c3c;
    font-weight: 600;
    margin-bottom: 20px;
}

.userremove-modal-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

.userremove-modal-cancel,
.userremove-modal-confirm {
    border: none;
    border-radius: 6px;
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.userremove-modal-cancel {
    background: #ecf0f1;
    color: #2c3e50;
}

.userremove-modal-cancel:hover {
    background: #dfe6e9;
}

.userremove-modal-confirm {
    background: #e74c3c;
    color: #ffffff;
}

.userremove-modal-confirm:hover {
    background: #c0392b;
}

.userremove-edit-dialog {
    max-width: 480px;
}

.userremove-edit-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.userremove-edit-field label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 6px;
}

.userremove-edit-field input,
.userremove-edit-field select {
    width: 100%;
    border: 1px solid #cfd9e3;
    border-radius: 6px;
    padding: 10px 12px;
    font-size: 14px;
    font-family: inherit;
}

.userremove-edit-logo-preview {
    margin-top: 10px;
}

.userremove-edit-logo-label {
    display: block;
    font-size: 12px;
    color: #7f8c8d;
    margin-bottom: 6px;
}

.userremove-edit-logo-preview img {
    max-width: 96px;
    max-height: 96px;
    object-fit: contain;
    border: 1px solid #e0e4e8;
    border-radius: 6px;
    background: #f8fafc;
    padding: 6px;
}

.userremove-edit-error {
    background: #fdedec;
    border: 1px solid #f5b7b1;
    color: #c0392b;
    border-radius: 6px;
    padding: 10px 12px;
    font-size: 13px;
    font-weight: 600;
}

.userremove-edit-error[hidden] {
    display: none;
}

.userremove-edit-submit {
    border: none;
    border-radius: 4px;
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    background: #3498db;
    color: #ffffff;
}

.userremove-edit-submit:hover {
    background: #2980b9;
}

body.userremove-modal-open {
    overflow: hidden;
}

/* Password Change */
.passwordchange-open-btn,
.passwordchange-modal-submit {
    border: none;
    border-radius: 4px;
    padding: 8px 14px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    background: #3498db;
    color: #ffffff;
    transition: background 0.2s;
}

.passwordchange-open-btn:hover,
.passwordchange-modal-submit:hover {
    background: #2980b9;
}

.passwordchange-action-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}

.passwordchange-logo-btn,
.passwordchange-logo-submit {
    border: none;
    border-radius: 4px;
    padding: 8px 14px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    background: #9b59b6;
    color: #ffffff;
    transition: background 0.2s;
}

.passwordchange-logo-btn:hover,
.passwordchange-logo-submit:hover {
    background: #8e44ad;
}

.passwordchange-logo-preview {
    margin-top: 10px;
}

.passwordchange-logo-preview-label {
    display: block;
    font-size: 12px;
    color: #7f8c8d;
    margin-bottom: 6px;
}

.passwordchange-logo-preview img {
    max-width: 96px;
    max-height: 96px;
    object-fit: contain;
    border: 1px solid #e0e4e8;
    border-radius: 6px;
    background: #f8fafc;
    padding: 6px;
}

.passwordchange-table td:last-child {
    text-align: center;
    white-space: nowrap;
}

.passwordchange-mobile-action {
    padding: 0 14px 14px;
    display: grid;
    gap: 10px;
}

.passwordchange-mobile-action .passwordchange-open-btn,
.passwordchange-mobile-action .passwordchange-logo-btn {
    width: 100%;
    padding: 10px 14px;
}

.passwordchange-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1300;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.passwordchange-modal.active {
    display: flex;
}

.passwordchange-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
}

.passwordchange-modal-dialog {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 420px;
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    padding: 20px 24px;
}

.passwordchange-modal-title {
    font-size: 18px;
    color: #2c3e50;
    margin-bottom: 8px;
}

.passwordchange-modal-text {
    font-size: 14px;
    color: #526477;
    margin-bottom: 16px;
}

.passwordchange-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.passwordchange-field label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 6px;
}

.passwordchange-field input {
    width: 100%;
    border: 1px solid #cfd9e3;
    border-radius: 6px;
    padding: 10px 44px 10px 12px;
    font-size: 14px;
    font-family: inherit;
}

.password-requirements {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
    display: grid;
    gap: 4px;
}

.password-requirements li {
    font-size: 12px;
    color: #95a5a6;
    padding-left: 18px;
    position: relative;
}

.password-requirements li::before {
    content: '○';
    position: absolute;
    left: 0;
    color: #bdc3c7;
}

.password-requirements li.is-met {
    color: #1e8449;
}

.password-requirements li.is-met::before {
    content: '●';
    color: #2ecc71;
}

.passwordchange-form-error {
    background: #fdedec;
    border: 1px solid #f5b7b1;
    color: #c0392b;
    border-radius: 6px;
    padding: 10px 12px;
    font-size: 13px;
    font-weight: 600;
}

.passwordchange-form-error[hidden] {
    display: none;
}

.password-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.password-input-wrap input {
    flex: 1;
}

.password-toggle-btn {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 6px;
    padding: 0;
    cursor: pointer;
    background: transparent;
    color: #3498db;
    transition: background 0.2s;
}

.password-toggle-btn:hover {
    background: #e8f4fc;
}

.password-icon {
    display: block;
    flex-shrink: 0;
}

.password-icon-hide {
    display: none;
}

.password-toggle-btn.is-visible .password-icon-show {
    display: none;
}

.password-toggle-btn.is-visible .password-icon-hide {
    display: block;
}

.passwordchange-modal-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 8px;
}

.passwordchange-modal-cancel {
    border: none;
    border-radius: 6px;
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    background: #ecf0f1;
    color: #2c3e50;
}

.passwordchange-modal-cancel:hover {
    background: #dfe6e9;
}

body.passwordchange-modal-open {
    overflow: hidden;
}

@media (max-width: 768px) {
    .passwordchange-modal-actions {
        flex-direction: column-reverse;
    }

    .passwordchange-modal-cancel,
    .passwordchange-modal-submit {
        width: 100%;
    }
}

@media (max-width: 768px) {
    .userremove-modal-actions {
        flex-direction: column-reverse;
    }

    .userremove-modal-cancel,
    .userremove-modal-confirm {
        width: 100%;
    }
}

/* Share Screen */
.share-screen-section {
    padding: 0 24px 24px;
}

.share-screen-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    margin-bottom: 18px;
}

.share-screen-card-title {
    margin: 0 0 10px;
    font-size: 18px;
    color: #2c3e50;
}

.share-screen-card {
    background: #ffffff;
    border: 1px solid #e7edf5;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 8px 24px rgba(44, 62, 80, 0.06);
}

.share-screen-card-single {
    max-width: 720px;
}

.share-screen-card-wide {
    max-width: 100%;
}

.share-screen-intro {
    margin: 0 0 18px;
    color: #4a5568;
    line-height: 1.6;
}

.share-screen-session-box {
    margin-bottom: 16px;
    padding: 14px;
    border-radius: 10px;
    background: #f0f8ff;
    border: 1px solid #cfe3f7;
}

.share-screen-session-label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #1f6fb2;
    margin-bottom: 8px;
}

.share-screen-session-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.share-screen-session-code {
    font-size: 24px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: #1f3b57;
    padding: 6px 10px;
    border-radius: 8px;
    background: #ffffff;
    border: 1px dashed #9ec5e8;
}

.share-screen-copy-btn {
    border: 1px solid #3498db;
    background: #3498db;
    color: #ffffff;
    border-radius: 8px;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.share-screen-copy-btn:hover {
    background: #2980b9;
    border-color: #2980b9;
}

.share-screen-session-hint {
    margin: 10px 0 0;
    font-size: 13px;
    color: #5b6b7c;
}

.share-screen-field-label {
    display: block;
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #4a5568;
}

.share-screen-session-input {
    width: 100%;
    max-width: 280px;
    margin-bottom: 16px;
    padding: 10px 12px;
    border: 1px solid #d8e0ea;
    border-radius: 8px;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #1f3b57;
}

.share-screen-session-input:focus {
    outline: none;
    border-color: #3498db;
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.15);
}

.share-screen-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 14px;
}

.share-screen-btn {
    border: none;
    border-radius: 8px;
    padding: 10px 18px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, opacity 0.2s;
}

.share-screen-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.share-screen-btn-start {
    background: #27ae60;
    color: #ffffff;
}

.share-screen-btn-start:hover:not(:disabled) {
    background: #219a52;
}

.share-screen-btn-stop {
    background: #e74c3c;
    color: #ffffff;
    border: none;
}

.share-screen-btn-stop:hover:not(:disabled) {
    background: #c0392b;
}

.share-screen-status {
    margin: 0 0 16px;
    padding: 10px 12px;
    border-radius: 8px;
    background: #f5f8fb;
    color: #4a5568;
    font-size: 14px;
}

.share-screen-status.is-active {
    background: #eaf6ff;
    color: #1f6fb2;
}

.share-screen-status.is-success {
    background: #eafaf1;
    color: #1e8449;
}

.share-screen-status.is-error {
    background: #fdecea;
    color: #c0392b;
}

.share-screen-preview-wrap {
    margin-bottom: 16px;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #d8e0ea;
    background: #0f1720;
}

.share-screen-preview {
    display: block;
    width: 100%;
    max-height: 480px;
    object-fit: contain;
    background: #000000;
}

.share-screen-notes {
    margin: 0;
    padding-left: 20px;
    color: #6b7280;
    font-size: 13px;
    line-height: 1.7;
}

@media (max-width: 768px) {
    .share-screen-section {
        padding: 0 16px 16px;
    }

    .share-screen-grid {
        grid-template-columns: 1fr;
    }

    .share-screen-card {
        padding: 18px;
    }

    .share-screen-actions {
        flex-direction: column;
    }

    .share-screen-btn {
        width: 100%;
    }
}

.sharescreen-action-cell {
    text-align: center;
    white-space: nowrap;
}

.sharescreen-users-table {
    margin-top: 8px;
}

.sharescreen-status-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    background: #eef2f7;
    color: #6b7280;
}

.sharescreen-status-badge-live {
    background: #eafaf1;
    color: #1e8449;
}