/* === VARIABLES === */
:root {
    --primary: #1E3A5F;
    --primary-light: #2D5A87;
    --accent: #D4A853;
    --success: #2D8B6F;
    --warning: #D97706;
    --danger: #C94A4A;
    --purple: #7C3AED;
    --gray-50: #F9FAFB;
    --gray-100: #F3F4F6;
    --gray-200: #E5E7EB;
    --gray-300: #D1D5DB;
    --gray-400: #9CA3AF;
    --gray-500: #6B7280;
    --gray-600: #4B5563;
    --gray-700: #374151;
    --gray-800: #1F2937;
    --sidebar-width: 260px;
    --header-height: 60px;
    --radius: 10px;
    --shadow: 0 2px 8px rgba(0,0,0,0.08);
}

/* === RESET === */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { 
    font-family: 'Inter', sans-serif; 
    background: var(--gray-100); 
    color: var(--gray-800);
    /* iOS safe area support */
    padding-top: env(safe-area-inset-top);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
    /* Prevent pull-to-refresh on mobile */
    overscroll-behavior-y: contain;
    /* Smooth scrolling */
    -webkit-overflow-scrolling: touch;
}
.hidden { display: none !important; }

/* Prevent text selection on UI elements */
.btn, .nav-item, .tab-btn, .kpi-card, .dispatch-btn, .quick-action {
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

/* === LANDING PAGE - ELEGANT DESIGN === */
#login-page {
    min-height: 100vh;
    background: #fafbfc;
}

.landing-wrapper {
    min-height: 100vh;
}

/* Navigation */
.nav-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.nav-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 16px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.nav-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: var(--gray-800);
    font-weight: 700;
    font-size: 20px;
}

.logo-icon {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #1E3A5F 0%, #2d5a87 100%);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 18px;
}

.nav-menu {
    display: flex;
    align-items: center;
    gap: 32px;
}

.nav-menu .nav-link {
    color: var(--gray-600);
    text-decoration: none;
    font-weight: 500;
    font-size: 15px;
    transition: color 0.2s;
}

.nav-menu .nav-link:hover {
    color: var(--primary);
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.btn-login {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: var(--primary);
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-login:hover {
    background: #152d4a;
    transform: translateY(-1px);
}

.nav-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 24px;
    color: var(--gray-700);
    cursor: pointer;
}

/* Hero Section */
.hero-section {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: 120px 24px 80px;
    overflow: hidden;
}

.hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, #f8fafc 0%, #eef2f7 50%, #e8f4fd 100%);
    z-index: -2;
}

.hero-bg::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 800px;
    height: 800px;
    background: radial-gradient(circle, rgba(30, 58, 95, 0.08) 0%, transparent 70%);
    border-radius: 50%;
}

.hero-bg::after {
    content: '';
    position: absolute;
    bottom: -30%;
    left: -10%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(37, 99, 235, 0.06) 0%, transparent 70%);
    border-radius: 50%;
}

.hero-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

.hero-content {
    max-width: 560px;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: rgba(30, 58, 95, 0.08);
    border-radius: 50px;
    font-size: 13px;
    font-weight: 600;
    color: var(--primary);
    margin-bottom: 24px;
}

.hero-badge i {
    color: #f59e0b;
}

.hero-content h1 {
    font-size: 52px;
    font-weight: 800;
    line-height: 1.15;
    color: var(--gray-900);
    margin-bottom: 24px;
    letter-spacing: -0.02em;
}

.text-gradient {
    background: linear-gradient(135deg, #1E3A5F 0%, #2563eb 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-content > p {
    font-size: 18px;
    line-height: 1.7;
    color: var(--gray-600);
    margin-bottom: 32px;
}

.hero-cta {
    display: flex;
    gap: 16px;
    margin-bottom: 48px;
}

.btn-primary-lg {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 28px;
    background: linear-gradient(135deg, #1E3A5F 0%, #2d5a87 100%);
    color: white;
    border: none;
    border-radius: 12px;
    font-weight: 600;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: 0 4px 14px rgba(30, 58, 95, 0.3);
}

.btn-primary-lg:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(30, 58, 95, 0.4);
}

.btn-secondary-lg {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 28px;
    background: white;
    color: var(--gray-700);
    border: 2px solid var(--gray-200);
    border-radius: 12px;
    font-weight: 600;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-secondary-lg:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.hero-stats {
    display: flex;
    align-items: center;
    gap: 32px;
}

.stat-item {
    display: flex;
    flex-direction: column;
}

.stat-number {
    font-size: 28px;
    font-weight: 800;
    color: var(--primary);
}

.stat-label {
    font-size: 14px;
    color: var(--gray-500);
}

.stat-divider {
    width: 1px;
    height: 40px;
    background: var(--gray-200);
}

/* Hero Visual */
.hero-visual {
    position: relative;
    display: flex;
    justify-content: center;
}

.hero-card-main {
    width: 100%;
    max-width: 480px;
    background: white;
    border-radius: 20px;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.12);
    overflow: hidden;
}

.card-header-bar {
    padding: 14px 18px;
    background: #f8f9fa;
    border-bottom: 1px solid var(--gray-100);
}

.card-dots {
    display: flex;
    gap: 8px;
}

.card-dots span {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--gray-300);
}

.card-dots span:first-child { background: #ff5f57; }
.card-dots span:nth-child(2) { background: #ffbd2e; }
.card-dots span:last-child { background: #28ca42; }

.card-preview {
    display: flex;
    padding: 16px;
    gap: 16px;
    min-height: 300px;
}

.preview-sidebar {
    width: 60px;
    background: var(--primary);
    border-radius: 12px;
    padding: 12px 8px;
}

.preview-logo {
    width: 100%;
    height: 36px;
    background: rgba(255,255,255,0.2);
    border-radius: 8px;
    margin-bottom: 20px;
}

.preview-menu {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.menu-item {
    height: 8px;
    background: rgba(255,255,255,0.15);
    border-radius: 4px;
}

.menu-item.active {
    background: rgba(255,255,255,0.4);
}

.preview-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.preview-header {
    height: 24px;
    background: var(--gray-100);
    border-radius: 6px;
    width: 60%;
}

.preview-cards {
    display: flex;
    gap: 12px;
}

.p-card {
    flex: 1;
    height: 70px;
    border-radius: 10px;
}

.p-card.blue { background: linear-gradient(135deg, #dbeafe, #bfdbfe); }
.p-card.green { background: linear-gradient(135deg, #d1fae5, #a7f3d0); }
.p-card.orange { background: linear-gradient(135deg, #fed7aa, #fdba74); }

.preview-chart {
    flex: 1;
    background: linear-gradient(180deg, var(--gray-50) 0%, var(--gray-100) 100%);
    border-radius: 10px;
}

/* Floating Cards */
.hero-card-float {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    background: white;
    border-radius: 14px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    font-size: 14px;
    font-weight: 600;
    color: var(--gray-700);
    animation: float 3s ease-in-out infinite;
}

.hero-card-float i {
    font-size: 18px;
}

.hero-card-1 {
    top: 20%;
    left: -40px;
    animation-delay: 0s;
}

.hero-card-1 i { color: #10b981; }

.hero-card-2 {
    bottom: 25%;
    right: -30px;
    animation-delay: 1.5s;
}

.hero-card-2 i { color: #f59e0b; }

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

/* Features Section */
.features-section {
    padding: 100px 24px;
    background: white;
}

.section-container {
    max-width: 1200px;
    margin: 0 auto;
}

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

.section-tag {
    display: inline-block;
    padding: 6px 14px;
    background: rgba(30, 58, 95, 0.08);
    border-radius: 50px;
    font-size: 13px;
    font-weight: 600;
    color: var(--primary);
    margin-bottom: 16px;
}

.section-tag.light {
    background: rgba(255, 255, 255, 0.15);
    color: white;
}

.section-header h2 {
    font-size: 40px;
    font-weight: 800;
    color: var(--gray-900);
    margin-bottom: 16px;
    letter-spacing: -0.02em;
}

.section-header p {
    font-size: 18px;
    color: var(--gray-500);
    max-width: 600px;
    margin: 0 auto;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}

.feature-item {
    padding: 32px;
    background: #fafbfc;
    border-radius: 20px;
    border: 1px solid var(--gray-100);
    transition: all 0.3s;
}

.feature-item:hover {
    background: white;
    border-color: transparent;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08);
    transform: translateY(-4px);
}

.feature-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin-bottom: 20px;
}

.feature-icon.blue { background: #dbeafe; color: #2563eb; }
.feature-icon.green { background: #d1fae5; color: #059669; }
.feature-icon.purple { background: #e9d5ff; color: #9333ea; }
.feature-icon.orange { background: #fed7aa; color: #ea580c; }
.feature-icon.pink { background: #fce7f3; color: #db2777; }
.feature-icon.teal { background: #ccfbf1; color: #0d9488; }

.feature-item h3 {
    font-size: 20px;
    font-weight: 700;
    color: var(--gray-800);
    margin-bottom: 12px;
}

.feature-item p {
    font-size: 15px;
    color: var(--gray-500);
    line-height: 1.6;
}

/* Benefits Section */
.benefits-section {
    padding: 100px 24px;
    background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
}

.benefits-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

.benefits-content h2 {
    font-size: 40px;
    font-weight: 800;
    color: var(--gray-900);
    margin-bottom: 16px;
    letter-spacing: -0.02em;
}

.benefits-content > p {
    font-size: 17px;
    color: var(--gray-500);
    line-height: 1.7;
    margin-bottom: 40px;
}

.benefits-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.benefits-list li {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.benefit-icon {
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg, #1E3A5F, #2d5a87);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 18px;
    flex-shrink: 0;
}

.benefits-list li strong {
    display: block;
    font-size: 17px;
    color: var(--gray-800);
    margin-bottom: 4px;
}

.benefits-list li span {
    font-size: 15px;
    color: var(--gray-500);
}

/* Benefits Visual */
.benefits-visual {
    position: relative;
}

.benefits-image {
    width: 100%;
    height: 450px;
    background: linear-gradient(135deg, #1E3A5F 0%, #2d5a87 100%);
    border-radius: 24px;
    position: relative;
}

.floating-card {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    background: white;
    border-radius: 16px;
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.15);
}

.fc-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.fc-icon.green { background: #d1fae5; color: #059669; }
.fc-icon.blue { background: #dbeafe; color: #2563eb; }
.fc-icon.orange { background: #fed7aa; color: #ea580c; }

.fc-content {
    display: flex;
    flex-direction: column;
}

.fc-label {
    font-size: 13px;
    color: var(--gray-500);
}

.fc-value {
    font-size: 18px;
    font-weight: 700;
    color: var(--gray-800);
}

.fc-1 { top: 40px; left: -30px; animation: float 3s ease-in-out infinite; }
.fc-2 { top: 50%; right: -40px; transform: translateY(-50%); animation: float 3s ease-in-out infinite 1s; }
.fc-3 { bottom: 40px; left: 20%; animation: float 3s ease-in-out infinite 2s; }

/* Contact Section */
.contact-section {
    padding: 100px 24px;
    background: linear-gradient(135deg, #1E3A5F 0%, #0f2744 100%);
}

.contact-wrapper {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 60px;
    align-items: start;
}

.contact-info {
    color: white;
}

.contact-info h2 {
    font-size: 36px;
    font-weight: 800;
    margin-bottom: 16px;
    letter-spacing: -0.02em;
}

.contact-info > p {
    font-size: 17px;
    opacity: 0.8;
    line-height: 1.7;
    margin-bottom: 40px;
}

.contact-details {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.contact-item {
    display: flex;
    align-items: center;
    gap: 16px;
}

.contact-icon {
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.contact-label {
    display: block;
    font-size: 13px;
    opacity: 0.6;
    margin-bottom: 2px;
}

.contact-value {
    font-size: 16px;
    font-weight: 600;
}

/* Contact Form */
.contact-form-card {
    background: white;
    border-radius: 24px;
    padding: 40px;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.2);
}

.contact-form-card .form-group {
    margin-bottom: 20px;
}

.contact-form-card label {
    font-size: 14px;
    font-weight: 600;
    color: var(--gray-700);
    margin-bottom: 8px;
    display: block;
}

.contact-form-card input,
.contact-form-card select,
.contact-form-card textarea {
    width: 100%;
    padding: 14px 16px;
    border: 2px solid var(--gray-200);
    border-radius: 10px;
    font-size: 15px;
    transition: all 0.2s;
}

.contact-form-card input:focus,
.contact-form-card select:focus,
.contact-form-card textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(30, 58, 95, 0.1);
}

.captcha-box {
    background: #f0f7ff;
    padding: 20px;
    border-radius: 12px;
    border: 2px solid #d0e3f7;
}

.captcha-box label {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--primary) !important;
    margin-bottom: 12px !important;
}

.captcha-row {
    display: flex;
    align-items: center;
    gap: 16px;
}

.captcha-question {
    font-size: 22px;
    font-weight: 700;
    color: var(--primary);
    min-width: 100px;
}

.captcha-row input {
    max-width: 100px;
    text-align: center;
    font-size: 18px;
    font-weight: 600;
}

.btn-submit {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 24px;
    background: linear-gradient(135deg, #1E3A5F 0%, #2d5a87 100%);
    color: white;
    border: none;
    border-radius: 12px;
    font-weight: 600;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: 0 4px 14px rgba(30, 58, 95, 0.3);
}

.btn-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(30, 58, 95, 0.4);
}

/* Footer */
.site-footer {
    background: #0a1929;
    padding: 60px 24px 30px;
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
}

.footer-main {
    display: flex;
    justify-content: space-between;
    padding-bottom: 40px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: white;
    font-weight: 700;
    font-size: 20px;
    margin-bottom: 16px;
}

.footer-logo .logo-icon {
    background: rgba(255, 255, 255, 0.1);
}

.footer-brand p {
    color: rgba(255, 255, 255, 0.5);
    font-size: 14px;
    max-width: 300px;
    line-height: 1.6;
}

.footer-links {
    display: flex;
    gap: 60px;
}

.footer-col h4 {
    color: white;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 20px;
}

.footer-col a {
    display: block;
    color: rgba(255, 255, 255, 0.5);
    text-decoration: none;
    font-size: 14px;
    margin-bottom: 12px;
    transition: color 0.2s;
}

.footer-col a:hover {
    color: white;
}

.footer-bottom {
    padding-top: 30px;
    text-align: center;
}

.footer-bottom p {
    color: rgba(255, 255, 255, 0.4);
    font-size: 13px;
}

/* Login Modal */
.login-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.login-overlay.hidden {
    display: none;
}

.login-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
}

.login-card {
    position: relative;
    background: white;
    border-radius: 24px;
    padding: 48px 40px;
    width: 100%;
    max-width: 420px;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.3);
    animation: slideUp 0.3s ease;
}

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

.login-close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    background: var(--gray-100);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    color: var(--gray-500);
    font-size: 16px;
    transition: all 0.2s;
}

.login-close:hover {
    background: var(--gray-200);
    color: var(--gray-700);
}

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

.login-logo {
    width: 72px;
    height: 72px;
    background: linear-gradient(135deg, #1E3A5F 0%, #2d5a87 100%);
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    font-size: 32px;
    color: white;
}

.login-header h2 {
    font-size: 26px;
    font-weight: 700;
    color: var(--gray-800);
    margin-bottom: 8px;
}

.login-header p {
    color: var(--gray-500);
    font-size: 15px;
}

.input-icon {
    position: relative;
}

.input-icon i {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--gray-400);
}

.input-icon input {
    padding-left: 48px;
}

.btn-login-submit {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 24px;
    background: linear-gradient(135deg, #1E3A5F 0%, #2d5a87 100%);
    color: white;
    border: none;
    border-radius: 12px;
    font-weight: 600;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: 0 4px 14px rgba(30, 58, 95, 0.3);
}

.btn-login-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(30, 58, 95, 0.4);
}

.login-footer {
    text-align: center;
    margin-top: 24px;
}

.login-footer a {
    color: var(--primary);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
}

.login-footer a:hover {
    text-decoration: underline;
}

/* Responsive */
@media (max-width: 1024px) {
    .hero-container {
        grid-template-columns: 1fr;
        gap: 60px;
        text-align: center;
    }
    
    .hero-content {
        max-width: 100%;
    }
    
    .hero-cta {
        justify-content: center;
    }
    
    .hero-stats {
        justify-content: center;
    }
    
    .hero-visual {
        max-width: 500px;
        margin: 0 auto;
    }
    
    .hero-card-float {
        display: none;
    }
    
    .features-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .benefits-grid {
        grid-template-columns: 1fr;
        gap: 60px;
    }
    
    .benefits-visual {
        order: -1;
    }
    
    .contact-wrapper {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .nav-menu,
    .nav-actions {
        display: none;
    }
    
    .nav-toggle {
        display: block;
    }
    
    .hero-section {
        padding: 100px 20px 60px;
        min-height: auto;
    }
    
    .hero-content h1 {
        font-size: 36px;
    }
    
    .hero-cta {
        flex-direction: column;
    }
    
    .hero-stats {
        flex-wrap: wrap;
        gap: 24px;
    }
    
    .stat-divider {
        display: none;
    }
    
    .features-section,
    .benefits-section,
    .contact-section {
        padding: 60px 20px;
    }
    
    .section-header h2,
    .benefits-content h2,
    .contact-info h2 {
        font-size: 28px;
    }
    
    .features-grid {
        grid-template-columns: 1fr;
    }
    
    .benefits-image {
        height: 300px;
    }
    
    .floating-card {
        transform: scale(0.85);
    }
    
    .fc-1 { left: -10px; top: 20px; }
    .fc-2 { right: -10px; }
    .fc-3 { left: 10px; bottom: 20px; }
    
    .contact-form-card {
        padding: 28px;
    }
    
    .footer-main {
        flex-direction: column;
        gap: 40px;
    }
    
    .footer-links {
        gap: 40px;
    }
    
    .login-card {
        padding: 36px 28px;
    }
    
    .form-row {
        grid-template-columns: 1fr;
    }
}

/* === FORMS === */
.form-group { margin-bottom: 20px; }
.form-group label { display: block; font-size: 14px; font-weight: 500; margin-bottom: 6px; color: var(--gray-700); }
.form-group input, .form-group select, .form-group textarea {
    width: 100%;
    padding: 12px 14px;
    border: 2px solid var(--gray-200);
    border-radius: var(--radius);
    font-size: 15px;
    transition: border-color 0.2s;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
    outline: none;
    border-color: var(--primary);
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
textarea { resize: vertical; min-height: 100px; font-family: inherit; }

/* === BUTTONS === */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    border: none;
    border-radius: var(--radius);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}
.btn-block { width: 100%; }
.btn-primary { background: var(--primary); color: white; }
.btn-primary:hover { background: var(--primary-light); }
.btn-success { background: var(--success); color: white; }
.btn-danger { background: var(--danger); color: white; }
.btn-outline { background: white; border: 2px solid var(--gray-300); color: var(--gray-700); }
.btn-outline:hover { border-color: var(--primary); color: var(--primary); }
.btn-sm { padding: 8px 16px; font-size: 13px; }
.btn-icon { width: 40px; height: 40px; padding: 0; background: var(--gray-100); border: none; border-radius: var(--radius); cursor: pointer; color: var(--gray-600); }
.btn-icon:hover { background: var(--gray-200); }

/* === APP LAYOUT === */
#app { display: flex; min-height: 100vh; }

/* === SIDEBAR === */
.sidebar {
    width: var(--sidebar-width);
    background: linear-gradient(180deg, var(--primary), #0F2744);
    color: white;
    display: flex;
    flex-direction: column;
    position: fixed;
    height: 100vh;
    height: 100dvh; /* Dynamic viewport height for mobile */
    z-index: 100;
    transition: transform 0.3s;
}
.sidebar-header { padding: 20px; border-bottom: 1px solid rgba(255,255,255,0.1); flex-shrink: 0; }
.sidebar-header .logo { font-size: 22px; font-weight: 700; display: flex; align-items: center; gap: 10px; }
.sidebar-header .logo i { color: var(--accent); }

.sidebar-nav { flex: 1; padding: 20px 12px; overflow-y: auto; min-height: 0; }
.nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    color: rgba(255,255,255,0.7);
    text-decoration: none;
    border-radius: 8px;
    margin-bottom: 4px;
    transition: all 0.2s;
}
.nav-item:hover { background: rgba(255,255,255,0.1); color: white; }
.nav-item.active { background: rgba(255,255,255,0.15); color: white; }
.nav-item i { width: 22px; text-align: center; }
.nav-item .badge { margin-left: auto; background: var(--danger); color: white; font-size: 11px; padding: 2px 8px; border-radius: 10px; }
.nav-item .badge:empty { display: none; }

.sidebar-footer { 
    padding: 20px; 
    padding-bottom: max(20px, env(safe-area-inset-bottom)); 
    border-top: 1px solid rgba(255,255,255,0.1); 
    flex-shrink: 0;
    background: inherit;
}
.user-box { display: flex; align-items: center; gap: 12px; margin-bottom: 15px; }
.user-avatar { width: 40px; height: 40px; background: rgba(255,255,255,0.2); border-radius: 10px; display: flex; align-items: center; justify-content: center; }
.user-info { flex: 1; }
.user-name { display: block; font-weight: 600; font-size: 14px; }
.user-role { font-size: 12px; opacity: 0.7; }
.btn-logout { width: 100%; padding: 12px; background: rgba(255,255,255,0.1); border: none; color: white; border-radius: 8px; cursor: pointer; font-size: 14px; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; }
.btn-logout:hover { background: rgba(255,255,255,0.2); }

/* === MAIN CONTENT === */
.main-content { flex: 1; margin-left: var(--sidebar-width); }
.main-header {
    height: var(--header-height);
    background: white;
    border-bottom: 1px solid var(--gray-200);
    display: flex;
    align-items: center;
    padding: 0 25px;
    gap: 20px;
    position: sticky;
    top: 0;
    z-index: 50;
}
.main-header h1 { font-size: 20px; flex: 1; }
.menu-toggle { display: none; background: none; border: none; font-size: 20px; cursor: pointer; color: var(--gray-600); }
.page-content { padding: 25px; }

/* === NOTIFICATIONS === */
.header-actions { display: flex; align-items: center; gap: 10px; }
.notification-wrapper { position: relative; }
.notification-btn { position: relative; }
.notification-count {
    position: absolute;
    top: -5px;
    right: -5px;
    background: #EF4444;
    color: white;
    font-size: 11px;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    animation: notifPulse 2s infinite;
}
@keyframes notifPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

.notification-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 360px;
    max-height: 480px;
    background: white;
    border-radius: var(--radius);
    box-shadow: 0 10px 40px rgba(0,0,0,0.15);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.notification-header {
    padding: 15px;
    border-bottom: 1px solid var(--gray-200);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.notification-header h4 { margin: 0; font-size: 15px; }

.notification-list {
    flex: 1;
    overflow-y: auto;
    max-height: 350px;
}

.notification-empty {
    padding: 40px 20px;
    text-align: center;
    color: var(--gray-400);
}
.notification-empty i { font-size: 32px; margin-bottom: 10px; }
.notification-empty p { margin: 0; }

.notification-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 15px;
    border-bottom: 1px solid var(--gray-100);
    cursor: pointer;
    transition: background 0.2s;
    position: relative;
}
.notification-item:hover { background: var(--gray-50); }
.notification-item.unread { background: rgba(59, 130, 246, 0.05); }
.notification-item.unread::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--primary);
}

.notification-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 14px;
}
.notif-task { background: rgba(59, 130, 246, 0.15); color: #3B82F6; }
.notif-warning { background: rgba(245, 158, 11, 0.15); color: #F59E0B; }
.notif-message { background: rgba(16, 185, 129, 0.15); color: #10B981; }
.notif-maintenance { background: rgba(239, 68, 68, 0.15); color: #EF4444; }
.notif-evaluation { background: rgba(139, 92, 246, 0.15); color: #8B5CF6; }
.notif-leave { background: rgba(236, 72, 153, 0.15); color: #EC4899; }
.notif-system { background: var(--gray-100); color: var(--gray-500); }

.notification-content { flex: 1; min-width: 0; }
.notification-title { font-weight: 600; font-size: 13px; margin-bottom: 2px; }
.notification-message { font-size: 12px; color: var(--gray-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.notification-time { font-size: 11px; color: var(--gray-400); margin-top: 4px; }

.notification-delete {
    background: none;
    border: none;
    color: var(--gray-300);
    cursor: pointer;
    padding: 5px;
    opacity: 0;
    transition: opacity 0.2s;
}
.notification-item:hover .notification-delete { opacity: 1; }
.notification-delete:hover { color: #EF4444; }

.notification-footer {
    padding: 12px 15px;
    border-top: 1px solid var(--gray-200);
    text-align: center;
}

.btn-link {
    background: none;
    border: none;
    color: var(--primary);
    cursor: pointer;
    font-size: 13px;
}
.btn-link:hover { text-decoration: underline; }

/* === CARDS === */
.card {
    background: white;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 20px;
    margin-bottom: 20px;
}
.card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; flex-wrap: wrap; gap: 10px; }
.card-title { font-size: 16px; font-weight: 600; display: flex; align-items: center; gap: 10px; }
.card-title i { color: var(--primary); }

/* === KPI GRID === */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 15px; margin-bottom: 25px; }
.kpi-card { background: white; border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px; display: flex; align-items: center; gap: 15px; cursor: pointer; transition: transform 0.2s, box-shadow 0.2s; position: relative; }
.kpi-card:hover { transform: translateY(-2px); box-shadow: 0 4px 15px rgba(0,0,0,0.1); }
.kpi-icon { width: 50px; height: 50px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0; }
.kpi-icon.blue { background: rgba(30,58,95,0.1); color: var(--primary); }
.kpi-icon.green { background: rgba(45,139,111,0.1); color: var(--success); }
.kpi-icon.orange { background: rgba(217,119,6,0.1); color: var(--warning); }
.kpi-icon.red { background: rgba(201,74,74,0.1); color: var(--danger); }
.kpi-icon.purple { background: rgba(124,58,237,0.1); color: var(--purple); }
.kpi-icon.cyan { background: rgba(6,182,212,0.1); color: #06B6D4; }
.kpi-icon.teal { background: rgba(20,184,166,0.1); color: #14B8A6; }
.kpi-icon.pink { background: rgba(236,72,153,0.1); color: #EC4899; }
.kpi-value { font-size: 28px; font-weight: 700; }
.kpi-label { font-size: 13px; color: var(--gray-500); }
.kpi-badge { position: absolute; top: 8px; right: 8px; background: #EF4444; color: white; font-size: 10px; padding: 2px 8px; border-radius: 10px; font-weight: 600; }
.kpi-card.kpi-alert { border-left: 4px solid #EF4444; }
.kpi-card.kpi-highlight { border-left: 4px solid var(--primary); }

/* === DASHBOARD GRID === */
.dashboard-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }
.dashboard-col { display: flex; flex-direction: column; gap: 20px; }

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

/* === MINI LISTS FOR DASHBOARD === */
.table-compact { width: 100%; }
.table-compact td { padding: 10px 8px; font-size: 13px; }
.table-compact tr:last-child td { border-bottom: none; }

/* Dispatch mini list */
.dispatch-mini-list { display: flex; flex-direction: column; gap: 8px; }
.dispatch-mini-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--gray-50); border-radius: var(--radius); font-size: 13px; }
.dispatch-mini-item .room-badge { background: var(--primary); color: white; padding: 3px 8px; border-radius: 4px; font-weight: 600; font-size: 12px; }
.dispatch-mini-item .hotel-name { flex: 1; color: var(--gray-600); }
.dispatch-mini-item .assigned { color: var(--gray-500); font-size: 12px; }
.dispatch-mini-item .status-dot { width: 10px; height: 10px; border-radius: 50%; }
.dispatch-mini-item .status-dot.pending { background: var(--gray-300); }
.dispatch-mini-item .status-dot.assigned { background: var(--primary); }
.dispatch-mini-item .status-dot.completed { background: var(--warning); }
.dispatch-mini-item .status-dot.controlled { background: var(--success); }

/* Tasks mini list */
.tasks-mini-list { display: flex; flex-direction: column; gap: 10px; }
.task-mini-item { display: flex; align-items: center; gap: 12px; padding: 12px; background: var(--gray-50); border-radius: var(--radius); }
.task-mini-item.overdue { background: rgba(239,68,68,0.05); border-left: 3px solid #EF4444; }
.task-mini-item .task-priority { width: 4px; height: 100%; min-height: 40px; border-radius: 2px; }
.task-mini-item .task-priority.priority-low { background: var(--gray-300); }
.task-mini-item .task-priority.priority-medium { background: var(--warning); }
.task-mini-item .task-priority.priority-high { background: #F97316; }
.task-mini-item .task-priority.priority-urgent { background: #EF4444; }
.task-mini-item .task-content { flex: 1; min-width: 0; }
.task-mini-item .task-title { font-weight: 500; margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.task-mini-item .task-meta { font-size: 12px; color: var(--gray-500); display: flex; gap: 12px; }
.task-mini-item .task-meta i { margin-right: 4px; }

/* Hotels mini list */
.hotels-mini-list { display: flex; flex-direction: column; gap: 8px; }
.hotel-mini-item { display: flex; align-items: center; gap: 12px; padding: 12px; background: var(--gray-50); border-radius: var(--radius); cursor: pointer; transition: background 0.2s; }
.hotel-mini-item:hover { background: var(--gray-100); }
.hotel-mini-item .hotel-icon { width: 40px; height: 40px; background: var(--primary); color: white; border-radius: 10px; display: flex; align-items: center; justify-content: center; }
.hotel-mini-item .hotel-info { flex: 1; }
.hotel-mini-item .hotel-name { font-weight: 600; margin-bottom: 2px; }
.hotel-mini-item .hotel-meta { font-size: 12px; color: var(--gray-500); }

/* Leaves mini list */
.leaves-mini-list { display: flex; flex-direction: column; gap: 10px; }
.leave-mini-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: var(--gray-50); border-radius: var(--radius); }
.leave-mini-item .leave-avatar { width: 36px; height: 36px; background: var(--primary); color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 14px; }
.leave-mini-item .leave-content { flex: 1; }
.leave-mini-item .leave-name { font-weight: 500; margin-bottom: 2px; }
.leave-mini-item .leave-dates { font-size: 12px; color: var(--gray-500); }

/* Evaluations section */
.eval-summary { display: flex; justify-content: center; padding: 15px; background: var(--gray-50); border-radius: var(--radius); margin-bottom: 15px; }
.eval-stat { text-align: center; }
.eval-stat-value { font-size: 32px; font-weight: 700; color: var(--primary); }
.eval-stat-label { font-size: 12px; color: var(--gray-500); }

.evaluations-mini-list { display: flex; flex-direction: column; gap: 10px; }
.eval-mini-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: var(--gray-50); border-radius: var(--radius); }
.eval-mini-item .eval-avatar { width: 36px; height: 36px; background: #8B5CF6; color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 14px; }
.eval-mini-item .eval-content { flex: 1; }
.eval-mini-item .eval-employee { font-weight: 500; margin-bottom: 2px; }
.eval-mini-item .eval-meta { font-size: 12px; color: var(--gray-500); }
.eval-mini-item .eval-score { font-weight: 700; font-size: 14px; padding: 4px 10px; border-radius: 6px; }
.eval-mini-item .eval-score.score-excellent { background: rgba(16,185,129,0.15); color: #059669; }
.eval-mini-item .eval-score.score-good { background: rgba(59,130,246,0.15); color: #2563EB; }
.eval-mini-item .eval-score.score-average { background: rgba(245,158,11,0.15); color: #D97706; }
.eval-mini-item .eval-score.score-low { background: rgba(239,68,68,0.15); color: #DC2626; }

/* Linen mini list */
.linen-mini-list { display: flex; flex-direction: column; gap: 8px; }
.linen-mini-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: var(--gray-50); border-radius: var(--radius); font-size: 13px; }
.linen-mini-item .linen-type { display: flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 4px; font-size: 12px; font-weight: 500; }
.linen-mini-item .linen-type.collecte { background: rgba(239,68,68,0.1); color: #DC2626; }
.linen-mini-item .linen-type.reception { background: rgba(16,185,129,0.1); color: #059669; }
.linen-mini-item .linen-hotel { flex: 1; }
.linen-mini-item .linen-date { color: var(--gray-500); font-size: 12px; }

/* Quick actions */
.quick-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.quick-action { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 20px; background: var(--gray-50); border-radius: var(--radius); text-decoration: none; color: var(--text); flex: 1; min-width: 120px; transition: all 0.2s; }
.quick-action:hover { background: var(--primary); color: white; transform: translateY(-2px); }
.quick-action i { font-size: 24px; }
.quick-action span { font-size: 13px; font-weight: 500; }

/* Utility classes */
.py-20 { padding-top: 20px; padding-bottom: 20px; }
.py-10 { padding-top: 10px; padding-bottom: 10px; }
.mt-10 { margin-top: 10px; }

/* === TABLES === */
table { width: 100%; border-collapse: collapse; }
th, td { padding: 12px 15px; text-align: left; border-bottom: 1px solid var(--gray-200); }
th { background: var(--gray-50); font-weight: 600; font-size: 12px; text-transform: uppercase; color: var(--gray-500); }
tr:hover { background: var(--gray-50); }
.table-actions { display: flex; gap: 8px; }
.table-actions button { padding: 6px 10px; border: none; border-radius: 6px; cursor: pointer; background: var(--gray-100); color: var(--gray-600); font-size: 12px; }
.table-actions button:hover { background: var(--primary); color: white; }

/* === BADGES === */
.badge { display: inline-block; padding: 4px 10px; border-radius: 20px; font-size: 12px; font-weight: 500; }
.badge-success { background: rgba(45,139,111,0.1); color: var(--success); }
.badge-warning { background: rgba(217,119,6,0.1); color: var(--warning); }
.badge-danger { background: rgba(201,74,74,0.1); color: var(--danger); }
.badge-primary { background: rgba(30,58,95,0.1); color: var(--primary); }
.badge-gray { background: var(--gray-100); color: var(--gray-600); }

/* === FILTERS BAR === */
.filters-bar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; padding: 15px; background: var(--gray-50); border-radius: var(--radius); }
.search-box { position: relative; flex: 1; min-width: 200px; }
.search-box i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--gray-400); font-size: 14px; }
.search-box input { width: 100%; padding: 10px 12px 10px 38px; border: 1px solid var(--gray-200); border-radius: var(--radius); font-size: 14px; transition: border-color 0.2s, box-shadow 0.2s; }
.search-box input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(30,58,95,0.1); }
.search-box input::placeholder { color: var(--gray-400); }
.filters-bar select { padding: 10px 12px; border: 1px solid var(--gray-200); border-radius: var(--radius); font-size: 14px; background: white; cursor: pointer; min-width: 150px; }
.filters-bar select:focus { outline: none; border-color: var(--primary); }
.filter-count { font-size: 13px; color: var(--gray-500); padding: 8px 12px; background: white; border-radius: var(--radius); border: 1px solid var(--gray-200); white-space: nowrap; }

/* === MODAL === */
.modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.5); }
.modal-box { position: relative; background: white; border-radius: var(--radius); width: 90%; max-width: 500px; max-height: 90vh; overflow-y: auto; }
.modal-box.modal-wide { max-width: 900px; }
.modal-box.modal-xl { max-width: 1100px; }
.modal-header { display: flex; align-items: center; justify-content: space-between; padding: 20px; border-bottom: 1px solid var(--gray-200); }
.modal-header h3 { font-size: 18px; }
.modal-header button { background: none; border: none; font-size: 20px; cursor: pointer; color: var(--gray-400); }
.modal-body { padding: 20px; }
.modal-footer { display: flex; justify-content: flex-end; gap: 10px; padding: 15px 20px; border-top: 1px solid var(--gray-200); }

/* === TOAST === */
#toast-container { position: fixed; top: 20px; right: 20px; z-index: 2000; display: flex; flex-direction: column; gap: 10px; }
.toast { display: flex; align-items: center; gap: 12px; padding: 14px 18px; background: white; border-radius: var(--radius); box-shadow: 0 4px 12px rgba(0,0,0,0.15); min-width: 280px; animation: slideIn 0.3s; }
@keyframes slideIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
.toast.success { border-left: 4px solid var(--success); }
.toast.error { border-left: 4px solid var(--danger); }
.toast.warning { border-left: 4px solid var(--warning); }
.toast.info { border-left: 4px solid var(--primary); }
.toast i { font-size: 18px; }
.toast.success i { color: var(--success); }
.toast.error i { color: var(--danger); }
.toast span { flex: 1; font-size: 14px; }

/* === UTILITIES === */
.empty-state { text-align: center; padding: 50px 20px; color: var(--gray-500); }
.empty-state i { font-size: 50px; margin-bottom: 15px; opacity: 0.4; }
.empty-state h3 { color: var(--gray-700); margin-bottom: 5px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.mb-20 { margin-bottom: 20px; }
.mt-20 { margin-top: 20px; }
.text-muted { color: var(--gray-500); }
.text-danger { color: var(--danger); }
.text-success { color: var(--success); }
.flex { display: flex; }
.gap-10 { gap: 10px; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }

/* === TABS === */
.tabs { display: flex; gap: 5px; }
.tab-btn { 
    padding: 10px 18px; 
    background: var(--gray-100); 
    border: none; 
    border-radius: 8px; 
    cursor: pointer; 
    font-size: 14px; 
    font-weight: 500;
    color: var(--gray-600);
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s;
}
.tab-btn:hover { background: var(--gray-200); }
.tab-btn.active { background: var(--primary); color: white; }

/* === MESSAGE VIEW === */
.message-meta { background: var(--gray-50); padding: 15px; border-radius: var(--radius); }
.message-meta p { margin-bottom: 5px; font-size: 14px; }
.message-meta p:last-child { margin-bottom: 0; }
.message-body { font-size: 15px; color: var(--gray-700); }

/* === PERMISSIONS TABLE === */
.permissions-table { width: 100%; }
.permissions-table th, .permissions-table td { padding: 12px 10px; }
.permissions-table th { background: var(--gray-50); }
.permissions-table th.text-center, .permissions-table td.text-center { text-align: center; }
.permissions-table input[type="checkbox"] { 
    width: 20px; 
    height: 20px; 
    cursor: pointer;
    accent-color: var(--primary);
}
.permissions-table input[type="checkbox"]:disabled { 
    opacity: 0.5; 
    cursor: not-allowed; 
}
.permissions-grid { overflow-x: auto; }

/* === HOTEL DETAILS === */
.hotel-details { background: var(--gray-50); padding: 15px; border-radius: var(--radius); margin-bottom: 15px; }
.hotel-details p { margin-bottom: 8px; font-size: 14px; }
.hotel-details p:last-child { margin-bottom: 0; }

/* === CHECKBOX GROUP === */
.checkbox-group { display: flex; flex-direction: column; gap: 10px; max-height: 200px; overflow-y: auto; padding: 10px; background: var(--gray-50); border-radius: var(--radius); }
.checkbox-item { display: flex; align-items: center; gap: 10px; cursor: pointer; padding: 8px 12px; border-radius: 6px; transition: background 0.2s; }
.checkbox-item:hover { background: var(--gray-100); }
.checkbox-item input[type="checkbox"] { width: 18px; height: 18px; cursor: pointer; accent-color: var(--primary); }
.checkbox-item span { font-size: 14px; }

/* === TABLE HIGHLIGHT === */
.table-highlight { background: rgba(30,58,95,0.05); }
.table-highlight td { font-weight: 500; }

/* === PAGE HEADER ACTIONS === */
.page-header-actions { margin-bottom: 20px; }

/* === ROOMS STATS === */
.rooms-stats { display: flex; gap: 15px; margin-bottom: 20px; flex-wrap: wrap; }
.stat-card { flex: 1; min-width: 100px; padding: 15px; background: var(--gray-50); border-radius: var(--radius); text-align: center; }
.stat-card .stat-value { font-size: 28px; font-weight: 700; color: var(--gray-800); }
.stat-card .stat-label { font-size: 12px; color: var(--gray-500); text-transform: uppercase; }
.stat-card.stat-success { background: rgba(16,185,129,0.1); }
.stat-card.stat-success .stat-value { color: var(--success); }
.stat-card.stat-warning { background: rgba(245,158,11,0.1); }
.stat-card.stat-warning .stat-value { color: var(--warning); }
.stat-card.stat-danger { background: rgba(239,68,68,0.1); }
.stat-card.stat-danger .stat-value { color: var(--danger); }

/* === ROOM TYPES SUMMARY === */
.room-types-summary { display: flex; gap: 10px; flex-wrap: wrap; padding: 15px; background: var(--gray-50); border-radius: var(--radius); }
.type-badge { padding: 6px 12px; background: white; border-radius: 20px; font-size: 13px; border: 1px solid var(--gray-200); }
.type-badge-empty { opacity: 0.5; }

/* === ROOMS GRID === */
.rooms-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; padding: 15px; }
.room-card { padding: 15px; background: var(--gray-50); border-radius: var(--radius); cursor: pointer; transition: all 0.2s; border: 2px solid transparent; }
.room-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--primary); }
.room-card-active { border-left: 4px solid var(--success); }
.room-card-hors_service { border-left: 4px solid var(--warning); background: rgba(245,158,11,0.05); }
.room-card-renovation { border-left: 4px solid var(--danger); background: rgba(239,68,68,0.05); }
.room-number { font-size: 20px; font-weight: 700; color: var(--gray-800); margin-bottom: 5px; }
.room-type { font-size: 12px; color: var(--gray-600); margin-bottom: 3px; }
.room-bed { font-size: 11px; color: var(--gray-500); }
.room-status { font-size: 10px; margin-top: 8px; padding: 3px 8px; background: var(--gray-200); border-radius: 10px; display: inline-block; }
.room-card-active .room-status { background: rgba(16,185,129,0.2); color: var(--success); }
.room-card-hors_service .room-status { background: rgba(245,158,11,0.2); color: #b45309; }
.room-card-renovation .room-status { background: rgba(239,68,68,0.2); color: var(--danger); }

/* === ROOM TYPE SELECTOR === */
.room-type-selector { display: flex; gap: 10px; flex-wrap: wrap; }
.type-option { cursor: pointer; }
.type-option input { display: none; }
.type-option-content { display: flex; flex-direction: column; align-items: center; padding: 12px 16px; background: var(--gray-50); border-radius: var(--radius); border: 2px solid transparent; transition: all 0.2s; }
.type-option input:checked + .type-option-content { border-color: var(--primary); background: rgba(30,58,95,0.05); }
.type-option:hover .type-option-content { border-color: var(--gray-300); }
.type-icon { font-size: 24px; margin-bottom: 5px; }
.type-label { font-size: 12px; color: var(--gray-600); }

/* === BULK PREVIEW === */
.bulk-preview { margin-top: 15px; padding: 15px; background: var(--gray-50); border-radius: var(--radius); }
.preview-rooms { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.preview-room { padding: 4px 10px; background: white; border-radius: 4px; font-size: 13px; font-family: monospace; border: 1px solid var(--gray-200); }

/* === HEADER ACTIONS === */
.header-actions { display: flex; gap: 10px; }
.header-controls { display: flex; gap: 10px; align-items: center; }

/* === HOUSEKEEPING MODULE === */
.dispatch-stats { display: flex; gap: 15px; margin-bottom: 20px; flex-wrap: wrap; }
.dispatch-stats .stat-item { flex: 1; min-width: 120px; padding: 15px; background: var(--gray-50); border-radius: var(--radius); text-align: center; }
.dispatch-stats .stat-number { font-size: 24px; font-weight: 700; display: block; }
.dispatch-stats .stat-label { font-size: 12px; color: var(--gray-500); }
.dispatch-stats .stat-blanc { background: rgba(30,58,95,0.1); }
.dispatch-stats .stat-blanc .stat-number { color: var(--primary); }
.dispatch-stats .stat-recouche { background: rgba(16,185,129,0.1); }
.dispatch-stats .stat-recouche .stat-number { color: var(--success); }
.dispatch-stats .stat-done { background: rgba(16,185,129,0.1); }
.dispatch-stats .stat-done .stat-number { color: var(--success); }
.dispatch-stats .stat-warning { background: rgba(245,158,11,0.1); }
.dispatch-stats .stat-warning .stat-number { color: var(--warning); }
.dispatch-stats .stat-success { background: rgba(16,185,129,0.1); }
.dispatch-stats .stat-success .stat-number { color: var(--success); }

.control-stats { display: flex; gap: 15px; margin-bottom: 20px; flex-wrap: wrap; }
.control-stats .stat-item { flex: 1; min-width: 120px; padding: 15px; background: var(--gray-50); border-radius: var(--radius); text-align: center; }
.control-stats .stat-number { font-size: 24px; font-weight: 700; display: block; }
.control-stats .stat-label { font-size: 12px; color: var(--gray-500); }

.batch-actions { display: flex; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; }

.floor-section { margin-bottom: 25px; }
.floor-header { display: flex; justify-content: space-between; align-items: center; padding: 10px 15px; background: var(--gray-100); border-radius: var(--radius); margin-bottom: 10px; }
.floor-header h4 { margin: 0; font-size: 14px; }
.floor-actions { display: flex; gap: 5px; }
.btn-sm { padding: 5px 10px; background: white; border: 1px solid var(--gray-200); border-radius: 4px; cursor: pointer; font-size: 14px; }
.btn-sm:hover { background: var(--gray-50); }

.rooms-dispatch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.dispatch-room { padding: 12px; background: white; border: 2px solid var(--gray-200); border-radius: var(--radius); text-align: center; position: relative; }
.dispatch-room .room-num { font-size: 18px; font-weight: 700; color: var(--gray-800); }
.dispatch-room .room-type-label { font-size: 10px; color: var(--gray-500); margin-bottom: 8px; }
.dispatch-buttons { display: flex; gap: 5px; justify-content: center; }
.dispatch-btn { width: 32px; height: 32px; border: 2px solid var(--gray-200); background: white; border-radius: 6px; cursor: pointer; font-size: 16px; transition: all 0.2s; }
.dispatch-btn:hover { border-color: var(--primary); background: var(--gray-50); }
.dispatch-btn.active { border-color: var(--primary); background: var(--primary); }
.dispatch-btn.clear { font-size: 12px; color: var(--gray-400); }
.dispatch-btn.clear:hover { color: var(--danger); border-color: var(--danger); }

.dispatch-completed { border-color: var(--warning); background: rgba(245,158,11,0.08); }
.dispatch-controlled { border-color: var(--success); background: rgba(16,185,129,0.08); }
.dispatch-pending { border-color: var(--gray-300); background: white; }
.type-blanc .dispatch-btn.active { background: var(--primary); }
.type-recouche .dispatch-btn.active { background: var(--success); }

.dispatch-status-badge { position: absolute; top: 5px; right: 5px; font-size: 14px; }
.dispatch-type { font-size: 20px; margin: 5px 0; }
.dispatch-room[onclick] { cursor: pointer; transition: transform 0.1s, box-shadow 0.2s; }
.dispatch-room[onclick]:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.1); }

/* Workflow Legend */
.workflow-legend { display: flex; gap: 20px; margin-bottom: 20px; padding: 12px 15px; background: var(--gray-50); border-radius: var(--radius); flex-wrap: wrap; }
.legend-item { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--gray-600); }
.legend-dot { width: 12px; height: 12px; border-radius: 50%; border: 2px solid; }
.legend-dot.pending { border-color: var(--gray-300); background: white; }
.legend-dot.completed { border-color: var(--warning); background: rgba(245,158,11,0.3); }
.legend-dot.controlled { border-color: var(--success); background: rgba(16,185,129,0.3); }

/* Room actions modal */
.room-action-status { padding: 15px; background: var(--gray-50); border-radius: var(--radius); margin-bottom: 20px; }
.room-actions-buttons { display: flex; flex-direction: column; gap: 10px; }
.btn-block { width: 100%; }

/* Stats info */
.dispatch-stats .stat-info { background: rgba(59,130,246,0.1); }
.dispatch-stats .stat-info .stat-number { color: #3B82F6; }

/* Cleaning type selector */
.cleaning-type-selector { display: flex; gap: 15px; }
.cleaning-option { cursor: pointer; flex: 1; }
.cleaning-option input { display: none; }
.cleaning-option-content { display: flex; flex-direction: column; align-items: center; padding: 20px; background: var(--gray-50); border-radius: var(--radius); border: 2px solid transparent; transition: all 0.2s; }
.cleaning-option input:checked + .cleaning-option-content { border-color: var(--primary); background: rgba(30,58,95,0.05); }
.cleaning-icon { font-size: 32px; margin-bottom: 10px; }
.cleaning-label { font-weight: 600; margin-bottom: 5px; }
.cleaning-desc { font-size: 12px; color: var(--gray-500); }

/* Batch rooms list */
.batch-rooms-list { max-height: 300px; overflow-y: auto; border: 1px solid var(--gray-200); border-radius: var(--radius); }
.batch-floor { border-bottom: 1px solid var(--gray-200); }
.batch-floor:last-child { border-bottom: none; }
.batch-floor-header { padding: 10px 15px; background: var(--gray-50); }
.batch-floor-header label { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.batch-floor-rooms { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 15px; }
.batch-room-item { display: flex; align-items: center; gap: 5px; padding: 5px 10px; background: var(--gray-50); border-radius: 4px; cursor: pointer; font-size: 13px; }
.batch-room-item:hover { background: var(--gray-100); }
.batch-room-item.already-dispatched { opacity: 0.5; cursor: not-allowed; }
.dispatched-badge { color: var(--success); font-size: 10px; }
.quick-select-buttons { display: flex; gap: 10px; }
.selected-count { font-size: 14px; color: var(--gray-500); }

/* Control section */
.control-section { margin-bottom: 25px; }
.control-section h4 { margin-bottom: 15px; }
.control-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.control-card { padding: 15px; background: white; border: 2px solid var(--gray-200); border-radius: var(--radius); cursor: pointer; transition: all 0.2s; }
.control-card:hover { border-color: var(--primary); box-shadow: var(--shadow); }
.control-room-num { font-size: 22px; font-weight: 700; margin-bottom: 8px; }
.control-info { display: flex; flex-direction: column; gap: 5px; }
.control-action { font-size: 12px; color: var(--primary); margin-top: 5px; }
.control-result { font-size: 13px; margin-top: 5px; }
.control-pending { border-left: 4px solid var(--warning); }
.control-ok { border-left: 4px solid var(--success); background: rgba(16,185,129,0.03); }
.control-not-ok { border-left: 4px solid var(--danger); background: rgba(239,68,68,0.03); }

/* Control grid form */
.control-header-info { background: var(--gray-50); padding: 12px; border-radius: var(--radius); margin-bottom: 20px; }
.control-header-info p { margin: 0 0 5px; font-size: 14px; }
.control-grid-form { display: flex; flex-direction: column; gap: 10px; }
.control-criterion { display: flex; justify-content: space-between; align-items: center; padding: 10px 15px; background: var(--gray-50); border-radius: var(--radius); }
.criterion-label { font-size: 14px; }
.criterion-buttons { display: flex; gap: 10px; }
.criterion-btn { cursor: pointer; }
.criterion-btn input { display: none; }
.criterion-btn span { display: inline-block; padding: 6px 15px; border-radius: 4px; font-size: 13px; border: 2px solid var(--gray-200); background: white; transition: all 0.2s; }
.criterion-btn.ok input:checked + span { border-color: var(--success); background: var(--success); color: white; }
.criterion-btn.not-ok input:checked + span { border-color: var(--danger); background: var(--danger); color: white; }

/* Alerts */
.alerts-info { padding: 20px; background: var(--gray-50); border-radius: var(--radius); margin-bottom: 20px; }
.alerts-info h4 { margin-bottom: 15px; }
.alert-rules { display: flex; gap: 20px; margin-bottom: 15px; flex-wrap: wrap; }
.alert-rule { padding: 10px 15px; background: white; border-radius: var(--radius); display: flex; gap: 10px; align-items: center; }
.rule-time { font-weight: 700; color: var(--primary); }
.alert-escalation { padding-top: 15px; border-top: 1px solid var(--gray-200); }
.alert-escalation ul { margin: 10px 0 0 20px; }
.alert-escalation li { margin-bottom: 5px; font-size: 14px; }
.alerts-list h4 { margin-bottom: 15px; }

/* Reports */
.reports-section { max-width: 900px; }
.reports-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; margin-bottom: 25px; }
.report-card { display: flex; gap: 15px; padding: 20px; background: white; border: 2px solid var(--gray-200); border-radius: var(--radius); align-items: center; cursor: pointer; transition: all 0.2s; }
.report-card:hover { border-color: var(--primary); transform: translateY(-2px); box-shadow: var(--shadow); }
.report-icon { width: 50px; height: 50px; border-radius: var(--radius); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.report-icon i { font-size: 24px; color: white; }
.report-icon-red { background: linear-gradient(135deg, #C94A4A, #E57373); }
.report-icon-blue { background: linear-gradient(135deg, #1E3A5F, #3B82F6); }
.report-info { flex: 1; }
.report-info h4 { margin-bottom: 5px; color: var(--gray-800); font-size: 15px; }
.report-info p { font-size: 13px; color: var(--gray-500); margin: 0; }
.report-arrow { color: var(--gray-400); font-size: 14px; }
.report-form-card { background: var(--gray-50); border-radius: var(--radius); padding: 25px; margin-top: 20px; }
.report-form-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.report-form-header h4 { margin: 0; color: var(--primary); }
.btn-close { background: none; border: none; font-size: 24px; color: var(--gray-400); cursor: pointer; line-height: 1; }
.btn-close:hover { color: var(--gray-600); }
.report-description { color: var(--gray-600); font-size: 14px; margin-bottom: 20px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }
.report-preview { margin: 20px 0; padding: 20px; background: white; border: 1px solid var(--gray-200); border-radius: var(--radius); }
.report-preview h4 { margin-bottom: 15px; color: var(--gray-700); }
.report-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.report-table th { background: var(--gray-100); padding: 10px 8px; text-align: left; font-weight: 600; border-bottom: 2px solid var(--gray-200); }
.report-table td { padding: 10px 8px; border-bottom: 1px solid var(--gray-100); }
.report-table tr:hover { background: var(--gray-50); }
.report-table-sm th, .report-table-sm td { padding: 6px 8px; font-size: 12px; }
.form-actions { display: flex; gap: 15px; justify-content: flex-end; padding-top: 20px; border-top: 1px solid var(--gray-200); }
.activity-day-preview { margin-bottom: 20px; }
.activity-day-preview h5 { margin-bottom: 10px; color: var(--primary); font-size: 14px; }

/* Control Photos - Multiple */
.control-photo-section { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--gray-200); }
.control-photo-section h4 { margin-bottom: 15px; color: var(--gray-700); font-size: 14px; display: flex; align-items: center; gap: 10px; }
.photo-count { font-weight: normal; color: var(--gray-500); font-size: 13px; }
.photos-gallery { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 15px; }
.photo-thumb { position: relative; width: 100px; height: 100px; border-radius: var(--radius); overflow: hidden; border: 2px solid var(--gray-200); transition: all 0.3s; }
.photo-thumb img { width: 100%; height: 100%; object-fit: cover; cursor: pointer; transition: opacity 0.2s; }
.photo-thumb img:hover { opacity: 0.9; }
.photo-thumb.new-photo { border-color: var(--primary); border-style: dashed; }
.photo-thumb.photo-removing { opacity: 0.3; transform: scale(0.9); }
.photo-remove-btn { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border-radius: 50%; background: rgba(201, 74, 74, 0.9); color: white; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 10px; opacity: 0; transition: opacity 0.2s; }
.photo-thumb:hover .photo-remove-btn { opacity: 1; }
.photo-add-zone { display: flex; gap: 10px; flex-wrap: wrap; }
.photo-add-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; width: 100px; height: 100px; background: var(--gray-50); border: 2px dashed var(--gray-300); border-radius: var(--radius); cursor: pointer; transition: all 0.2s; }
.photo-add-btn:hover { border-color: var(--primary); background: white; }
.photo-add-btn i { font-size: 24px; color: var(--primary); }
.photo-add-btn span { font-size: 11px; color: var(--gray-600); }
.photo-hint { font-size: 12px; color: var(--gray-500); margin-top: 10px; }
.photo-hint i { margin-right: 5px; }
.photo-fullview { text-align: center; padding: 20px 0; }
.photo-fullview img { max-width: 100%; max-height: 70vh; border-radius: var(--radius); }

/* Control readonly */
.control-readonly-banner { padding: 12px 15px; border-radius: var(--radius); margin-bottom: 20px; display: flex; align-items: center; gap: 10px; font-weight: 500; }
.control-readonly-banner i { font-size: 16px; }
.control-readonly-banner.banner-success { background: #D1FAE5; color: #065F46; border: 1px solid #A7F3D0; }
.control-readonly-banner.banner-danger { background: #FEE2E2; color: #991B1B; border: 1px solid #FECACA; }
.form-readonly input:disabled, .form-readonly textarea:disabled { background: var(--gray-100); cursor: not-allowed; opacity: 0.7; }
.form-readonly .criterion-btn span { opacity: 0.7; cursor: not-allowed; }

/* Batch Control */
.section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; }
.section-header h4 { margin: 0; }
.batch-control-info { padding: 15px; background: #EFF6FF; border: 1px solid #BFDBFE; border-radius: var(--radius); margin-bottom: 20px; }
.batch-control-info p { margin: 0 0 5px 0; font-size: 14px; color: #1E40AF; }
.batch-control-info p:last-child { margin-bottom: 0; }
.batch-control-info .text-muted { color: #6B7280; font-size: 13px; }
.batch-control-actions { display: flex; gap: 10px; margin: 15px 0; }
.floor-count { font-weight: normal; color: var(--gray-500); font-size: 13px; margin-left: 5px; }
.floor-room-count { font-weight: normal; color: var(--gray-500); font-size: 14px; margin-left: 8px; }
.room-type-badge { font-size: 12px; margin-left: 5px; }
.room-type-badge.blanc { color: var(--primary); }
.room-type-badge.recouche { color: var(--success); }
.btn-sm { padding: 6px 12px; font-size: 13px; }
.control-stats { display: flex; gap: 15px; margin-bottom: 20px; flex-wrap: wrap; }
.control-stats .stat-item { flex: 1; min-width: 100px; padding: 15px; background: var(--gray-50); border-radius: var(--radius); text-align: center; }
.control-stats .stat-number { font-size: 24px; font-weight: 700; display: block; }
.control-stats .stat-label { font-size: 12px; color: var(--gray-500); }

/* === QUICK ACTIONS === */
.quick-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 15px; }
.quick-action { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 20px 15px; background: var(--gray-50); border: 2px solid var(--gray-200); border-radius: var(--radius); cursor: pointer; transition: all 0.2s; text-decoration: none; color: var(--gray-700); }
.quick-action:hover { border-color: var(--primary); transform: translateY(-2px); }
.quick-action i { font-size: 24px; color: var(--primary); }
.quick-action span { font-size: 13px; font-weight: 500; text-align: center; }

/* === RESPONSIVE === */
@media (max-width: 1024px) {
    .grid-2 { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
    .sidebar { transform: translateX(-100%); }
    .sidebar.open { transform: translateX(0); }
    .main-content { margin-left: 0; }
    .menu-toggle { display: block; }
    .login-container { flex-direction: column; }
    .login-left { display: none; }
    .form-row { grid-template-columns: 1fr; }
    
    /* Filters bar responsive */
    .filters-bar { flex-direction: column; align-items: stretch; }
    .filters-bar .search-box { min-width: 100%; }
    .filters-bar select { width: 100%; }
    .filter-count { text-align: center; }
    
    /* Notifications responsive */
    .notification-dropdown { 
        position: fixed;
        top: var(--header-height);
        left: 0;
        right: 0;
        width: 100%;
        max-height: calc(100vh - var(--header-height));
        border-radius: 0;
    }
}

/* === MESSENGER === */
.messenger { display: flex; height: calc(100vh - 180px); min-height: 500px; background: white; border-radius: var(--radius); overflow: hidden; }
.messenger-sidebar { width: 320px; border-right: 1px solid var(--gray-200); display: flex; flex-direction: column; }
.messenger-header { padding: 15px 20px; border-bottom: 1px solid var(--gray-200); display: flex; justify-content: space-between; align-items: center; }
.messenger-header h3 { font-size: 16px; margin: 0; }
.messenger-search { padding: 10px 15px; }
.messenger-search input { width: 100%; padding: 10px 15px; border: 1px solid var(--gray-200); border-radius: 20px; font-size: 14px; }
.messenger-convs { flex: 1; overflow-y: auto; }
.conv-item { display: flex; align-items: center; gap: 12px; padding: 12px 15px; cursor: pointer; border-bottom: 1px solid var(--gray-100); transition: background 0.2s; }
.conv-item:hover { background: var(--gray-50); }
.conv-item.active { background: rgba(30,58,95,0.08); }
.conv-item.has-unread { background: rgba(212,168,83,0.1); }
.conv-avatar { width: 45px; height: 45px; background: var(--primary); color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 14px; }
.conv-info { flex: 1; min-width: 0; }
.conv-name { font-weight: 600; font-size: 14px; margin-bottom: 3px; }
.conv-preview { font-size: 13px; color: var(--gray-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conv-meta { text-align: right; }
.conv-time { font-size: 11px; color: var(--gray-400); }
.conv-unread { background: var(--accent); color: white; font-size: 11px; padding: 2px 8px; border-radius: 10px; margin-top: 5px; display: inline-block; }
.conv-empty { padding: 30px; text-align: center; color: var(--gray-400); }

.messenger-main { flex: 1; display: flex; flex-direction: column; }
.messenger-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--gray-400); }
.messenger-empty i { font-size: 48px; margin-bottom: 15px; }
.messenger-conv-header { padding: 15px 20px; border-bottom: 1px solid var(--gray-200); display: flex; align-items: center; gap: 12px; }
.conv-header-info { flex: 1; }
.conv-header-name { font-weight: 600; }
.conv-header-status { font-size: 12px; color: var(--gray-500); }
.messenger-messages { flex: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 10px; }
.msg-date-sep { text-align: center; font-size: 12px; color: var(--gray-400); margin: 15px 0; }
.msg-bubble { max-width: 70%; padding: 10px 15px; border-radius: 18px; font-size: 14px; line-height: 1.4; }
.msg-mine { align-self: flex-end; background: var(--primary); color: white; border-bottom-right-radius: 4px; }
.msg-other { align-self: flex-start; background: var(--gray-100); border-bottom-left-radius: 4px; }
.msg-time { font-size: 10px; opacity: 0.7; margin-top: 4px; }
.msg-empty { text-align: center; color: var(--gray-400); padding: 40px; }
.messenger-input { padding: 15px 20px; border-top: 1px solid var(--gray-200); }
.messenger-input form { display: flex; gap: 10px; }
.messenger-input input { flex: 1; padding: 12px 20px; border: 1px solid var(--gray-200); border-radius: 25px; font-size: 14px; }
.messenger-input button { width: 45px; height: 45px; background: var(--primary); color: white; border: none; border-radius: 50%; cursor: pointer; }
.messenger-input button:hover { background: var(--primary-light); }

.msg-notification { position: fixed; top: 20px; right: 20px; background: var(--primary); color: white; padding: 15px 25px; border-radius: var(--radius); box-shadow: var(--shadow); display: flex; align-items: center; gap: 10px; z-index: 9999; animation: slideIn 0.3s ease; }
@keyframes slideIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

/* === LEAVES === */
.leave-info { padding: 20px; background: var(--gray-50); border-radius: var(--radius); margin-bottom: 20px; }
.trimestre-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; margin-top: 15px; }
.trimestre-card { background: white; padding: 15px; border-radius: var(--radius); border: 1px solid var(--gray-200); }
.trimestre-card.trimestre-past { opacity: 0.6; }
.trimestre-id { font-size: 20px; font-weight: 700; color: var(--primary); }
.trimestre-period { font-size: 14px; color: var(--gray-600); margin: 5px 0; }
.trimestre-deadline { font-size: 13px; }
.btn-action-success { color: var(--success); background: none; border: none; cursor: pointer; padding: 5px 10px; }
.btn-action-danger { color: var(--danger); background: none; border: none; cursor: pointer; padding: 5px 10px; }

/* === BLANCHISSERIE === */
.bl-dashboard { margin-bottom: 20px; }
.bl-period { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 20px; padding: 15px; background: var(--gray-50); border-radius: var(--radius); }
.bl-period label { font-weight: 500; }
.bl-period input[type="date"] { padding: 8px 12px; border: 1px solid var(--gray-200); border-radius: 6px; }
.bl-summary-table table { width: 100%; }
.bl-type-selector { display: flex; gap: 15px; flex-wrap: wrap; }
.bl-type-option { cursor: pointer; }
.bl-type-option input { display: none; }
.bl-type-content { display: flex; align-items: center; gap: 10px; padding: 15px 20px; background: var(--gray-50); border: 2px solid transparent; border-radius: var(--radius); transition: all 0.2s; }
.bl-type-option input:checked + .bl-type-content { border-color: var(--primary); background: rgba(30,58,95,0.05); }
.bl-quantities { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; }
.bl-qty-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 15px; background: var(--gray-50); border-radius: var(--radius); }
.bl-qty-row input { width: 80px; padding: 8px; text-align: center; border: 1px solid var(--gray-200); border-radius: 6px; }

/* === MAINTENANCE === */
.ticket-detail { padding: 15px; }
.ticket-header { display: flex; gap: 10px; margin-bottom: 15px; flex-wrap: wrap; align-items: center; }
.ticket-info { background: var(--gray-50); padding: 15px; border-radius: var(--radius); margin-bottom: 15px; }
.ticket-info p { margin-bottom: 8px; font-size: 14px; }
.ticket-description { margin-bottom: 15px; }
.ticket-description p { background: var(--gray-50); padding: 15px; border-radius: var(--radius); margin-top: 10px; }
.ticket-photo { margin-bottom: 15px; }
.ticket-photo img { max-width: 100%; max-height: 300px; border-radius: var(--radius); cursor: pointer; }
.ticket-resolution { background: rgba(16,185,129,0.1); padding: 15px; border-radius: var(--radius); margin-bottom: 15px; }
.ticket-history { margin-top: 20px; }
.history-list { list-style: none; margin-top: 10px; }
.history-list li { padding: 10px; border-left: 3px solid var(--gray-200); margin-bottom: 10px; font-size: 13px; }
.history-date { color: var(--gray-500); display: block; font-size: 12px; }
.history-user { color: var(--gray-500); }
.row-critical { background: rgba(201,74,74,0.05); }

/* Ticket overdue (in progress > 7 days) */
.row-overdue { background: rgba(220, 38, 38, 0.08); }
.row-overdue td { color: var(--danger); }
.badge-overdue { background: var(--danger); color: white; font-size: 10px; padding: 2px 6px; margin-left: 5px; }
.days-info { display: block; font-size: 11px; color: var(--gray-500); margin-top: 3px; }
.ticket-overdue-warning { background: #FEF2F2; border: 1px solid #FECACA; color: #991B1B; padding: 12px 15px; border-radius: var(--radius); margin-bottom: 15px; display: flex; align-items: center; gap: 10px; font-weight: 500; }
.ticket-overdue-warning i { color: #DC2626; }

/* Ticket info grid */
.ticket-info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; background: var(--gray-50); padding: 15px; border-radius: var(--radius); margin-bottom: 15px; }
.ticket-info-item { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.ticket-info-item i { color: var(--primary); width: 18px; text-align: center; }
.ticket-info-item span { color: var(--gray-500); }

/* Ticket timeline */
.ticket-timeline { margin-top: 20px; padding-top: 15px; border-top: 1px solid var(--gray-200); }
.ticket-timeline > strong { display: flex; align-items: center; gap: 8px; margin-bottom: 15px; }
.timeline-list { position: relative; padding-left: 30px; }
.timeline-list::before { content: ''; position: absolute; left: 11px; top: 0; bottom: 0; width: 2px; background: var(--gray-200); }

.timeline-item { position: relative; margin-bottom: 20px; padding-bottom: 10px; }
.timeline-item:last-child { margin-bottom: 0; }
.timeline-icon { position: absolute; left: -30px; top: 0; width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; color: white; z-index: 1; }
.timeline-blue .timeline-icon { background: var(--primary); }
.timeline-orange .timeline-icon { background: var(--warning); }
.timeline-green .timeline-icon { background: var(--success); }
.timeline-purple .timeline-icon { background: var(--purple); }
.timeline-gray .timeline-icon { background: var(--gray-400); }

.timeline-content { background: var(--gray-50); padding: 12px 15px; border-radius: var(--radius); border-left: 3px solid var(--gray-300); }
.timeline-blue .timeline-content { border-left-color: var(--primary); }
.timeline-orange .timeline-content { border-left-color: var(--warning); }
.timeline-green .timeline-content { border-left-color: var(--success); }
.timeline-purple .timeline-content { border-left-color: var(--purple); }

.timeline-header { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 5px; }
.timeline-header strong { font-size: 13px; }
.timeline-meta { font-size: 12px; color: var(--gray-500); }
.timeline-meta .role-badge { background: var(--gray-200); padding: 2px 6px; border-radius: 4px; font-size: 10px; margin-left: 4px; }
.timeline-date { font-size: 11px; color: var(--gray-400); margin-left: auto; }
.timeline-body { font-size: 13px; color: var(--gray-700); margin-top: 8px; white-space: pre-wrap; }

/* Add comment form */
.ticket-add-comment { margin-top: 20px; padding-top: 15px; border-top: 1px solid var(--gray-200); }
.ticket-add-comment > strong { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.comment-form { display: flex; gap: 10px; align-items: flex-start; margin-top: 10px; }
.comment-form textarea { flex: 1; padding: 10px; border: 1px solid var(--gray-200); border-radius: var(--radius); font-size: 14px; font-family: inherit; resize: vertical; min-height: 60px; }
.comment-form textarea:focus { outline: none; border-color: var(--primary); }
.comment-form .btn { flex-shrink: 0; background: var(--primary); color: white; padding: 10px 16px; border: none; border-radius: var(--radius); cursor: pointer; font-size: 14px; font-weight: 500; display: flex; align-items: center; gap: 6px; transition: background 0.2s; }
.comment-form .btn:hover { background: var(--primary-light); }

/* Hotel tag in tables */
.hotel-tag { background: var(--gray-100); padding: 3px 8px; border-radius: 4px; font-size: 12px; color: var(--gray-700); white-space: nowrap; }

/* === TABS === */
.tabs { display: flex; gap: 5px; margin-bottom: 20px; border-bottom: 2px solid var(--gray-200); }
.tab-btn { padding: 12px 20px; background: none; border: none; cursor: pointer; font-size: 14px; color: var(--gray-500); border-bottom: 2px solid transparent; margin-bottom: -2px; transition: all 0.2s; display: flex; align-items: center; gap: 8px; }
.tab-btn:hover { color: var(--gray-700); }
.tab-btn.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: 600; }

/* === REAL-TIME NOTIFICATIONS === */
/* Badge pulse animation */
@keyframes badgePulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.3); }
}
.badge-pulse { animation: badgePulse 0.5s ease-in-out 3; }
.nav-badge { transition: all 0.3s ease; }

/* New message animation */
@keyframes msgAppear {
    0% { opacity: 0; transform: translateY(10px); }
    100% { opacity: 1; transform: translateY(0); }
}
.msg-new { animation: msgAppear 0.3s ease-out; background: rgba(30,58,95,0.1) !important; }

/* Conversation highlight */
@keyframes convHighlight {
    0%, 100% { background: transparent; }
    50% { background: rgba(30,58,95,0.1); }
}
.conv-highlight { animation: convHighlight 0.5s ease-in-out 3; }

/* Unread indicator pulse */
.conv-item.has-unread .conv-unread {
    animation: badgePulse 2s ease-in-out infinite;
}

/* Message bubble transitions */
.msg-bubble {
    transition: background 0.3s ease;
}

/* Typing indicator (for future use) */
.typing-indicator {
    display: flex;
    gap: 4px;
    padding: 10px 15px;
    background: var(--gray-100);
    border-radius: 18px;
    width: fit-content;
}
.typing-indicator span {
    width: 8px;
    height: 8px;
    background: var(--gray-400);
    border-radius: 50%;
    animation: typingBounce 1.4s ease-in-out infinite;
}
.typing-indicator span:nth-child(2) { animation-delay: 0.2s; }
.typing-indicator span:nth-child(3) { animation-delay: 0.4s; }
@keyframes typingBounce {
    0%, 60%, 100% { transform: translateY(0); }
    30% { transform: translateY(-4px); }
}

/* === LEAVES REPORT FORM === */
.form-inline-report .form-row { display: flex; gap: 15px; align-items: flex-end; flex-wrap: wrap; }
.form-inline-report .form-group { flex: 1; min-width: 150px; }
.form-inline-report .form-group-btn { flex: 0 0 auto; min-width: auto; }
.form-inline-report label { display: block; font-size: 12px; color: var(--gray-600); margin-bottom: 5px; }
.form-inline-report select { width: 100%; padding: 10px; border: 1px solid var(--gray-200); border-radius: var(--radius); }

/* Leave info section */
.leave-info { padding: 20px; background: var(--gray-50); border-radius: var(--radius); margin-top: 15px; }
.leave-info h4 { margin-bottom: 15px; color: var(--gray-700); }
.trimestre-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 15px; }
.trimestre-card { background: white; padding: 15px; border-radius: var(--radius); border: 1px solid var(--gray-200); text-align: center; }
.trimestre-card.trimestre-past { opacity: 0.7; }
.trimestre-id { font-size: 18px; font-weight: bold; color: var(--primary); }
.trimestre-period { font-size: 12px; color: var(--gray-600); margin: 5px 0; }
.trimestre-deadline { font-size: 11px; }

/* === HOTEL LEAVES TIMELINE === */
.hotel-leaves-month { padding: 0 15px 15px; }
.month-header { font-size: 14px; color: var(--primary); margin-bottom: 12px; padding: 8px 0; border-bottom: 1px solid var(--gray-200); }
.month-header i { margin-right: 8px; }

.leaves-timeline { display: flex; flex-direction: column; gap: 10px; }

.leave-item { display: flex; align-items: center; gap: 12px; padding: 12px 15px; background: var(--gray-50); border-radius: var(--radius); border-left: 3px solid var(--gray-300); transition: all 0.2s; }
.leave-item:hover { background: var(--gray-100); }
.leave-item.leave-ongoing { border-left-color: var(--success); background: rgba(16, 185, 129, 0.05); }

.leave-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--primary); color: white; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 600; flex-shrink: 0; }

.leave-details { flex: 1; min-width: 0; }
.leave-employee { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 5px; }
.leave-employee strong { font-size: 14px; }
.leave-role { font-size: 11px; color: var(--gray-500); background: var(--gray-200); padding: 2px 8px; border-radius: 10px; }
.leave-hotel { font-size: 11px; color: var(--primary); background: rgba(30, 58, 95, 0.1); padding: 2px 8px; border-radius: 10px; }

.leave-info-line { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 12px; color: var(--gray-600); }

/* Leave reason styles */
.leave-reason-cell { max-width: 250px; }
.leave-reason { 
    display: inline-flex; 
    align-items: center; 
    gap: 6px; 
    padding: 4px 10px; 
    border-radius: 6px; 
    font-size: 12px; 
    max-width: 100%;
    cursor: help;
}
.leave-reason.rejection { 
    background: rgba(239, 68, 68, 0.1); 
    color: #DC2626; 
}
.leave-reason.approval { 
    background: rgba(16, 185, 129, 0.1); 
    color: #059669; 
}
.leave-reason i { flex-shrink: 0; }
.leave-type-badge { background: var(--primary); color: white; padding: 2px 8px; border-radius: 4px; font-size: 11px; }
.leave-dates i { margin-right: 4px; color: var(--gray-400); }
.leave-days { font-weight: 600; color: var(--gray-700); }

.leave-status-ongoing { background: var(--success); color: white; padding: 4px 10px; border-radius: 4px; font-size: 11px; font-weight: 600; flex-shrink: 0; }

.loading-inline { padding: 30px; text-align: center; color: var(--gray-500); }
.loading-inline i { margin-right: 8px; }

.select-sm { padding: 6px 12px; font-size: 13px; border: 1px solid var(--gray-200); border-radius: var(--radius); }

/* Leaves filters */
.leaves-filters { padding: 15px; background: var(--gray-50); border-bottom: 1px solid var(--gray-200); }
.leaves-filters .filter-row { display: flex; gap: 15px; align-items: flex-end; flex-wrap: wrap; }
.leaves-filters .filter-group { display: flex; flex-direction: column; gap: 5px; }
.leaves-filters .filter-group label { font-size: 11px; color: var(--gray-600); font-weight: 500; }
.leaves-filters .select-filter, .leaves-filters .input-filter { padding: 8px 12px; border: 1px solid var(--gray-200); border-radius: var(--radius); font-size: 13px; min-width: 150px; }
.leaves-filters .filter-actions { align-self: flex-end; }
.leaves-filters .filter-actions .btn { padding: 8px 12px; }

/* Batch complete modal */
.batch-select-all { padding: 10px 15px; background: var(--gray-100); border-radius: var(--radius); }
.batch-select-all label { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.room-type-mini { font-size: 12px; opacity: 0.7; }

/* ============================================
   MOBILE RESPONSIVE STYLES
   ============================================ */

/* Mobile menu toggle */
.menu-toggle { display: none; background: none; border: none; font-size: 24px; cursor: pointer; color: var(--gray-600); padding: 5px; }

/* Sidebar overlay for mobile */
.sidebar-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: 99;
}
.sidebar-overlay.active { display: block; }

/* Mobile close button in sidebar */
.sidebar-close {
    display: none;
    position: absolute;
    top: 15px;
    right: 15px;
    background: rgba(255,255,255,0.2);
    border: none;
    color: white;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 18px;
    cursor: pointer;
    z-index: 10;
    -webkit-tap-highlight-color: transparent;
}

.sidebar-close:active {
    background: rgba(255,255,255,0.3);
}

/* ===== TABLET (max-width: 1024px) ===== */
@media (max-width: 1024px) {
    :root {
        --sidebar-width: 240px;
    }
    
    .kpi-grid { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 15px; }
    .kpi-card { padding: 15px; }
    .kpi-value { font-size: 24px; }
    
    .form-row { grid-template-columns: 1fr 1fr; }
    
    .dispatch-stats { flex-wrap: wrap; }
    .stat-item { min-width: 80px; }
}

/* ===== MOBILE (max-width: 768px) ===== */
@media (max-width: 768px) {
    :root {
        --header-height: 56px;
    }
    
    /* Sidebar - Hidden by default on mobile */
    .sidebar {
        transform: translateX(-100%);
        width: 280px;
        height: 100vh;
        height: 100dvh;
        max-height: -webkit-fill-available;
    }
    .sidebar.open { transform: translateX(0); }
    .sidebar-close { display: flex; align-items: center; justify-content: center; }
    
    /* Sidebar header on mobile */
    .sidebar-header {
        padding: 15px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    
    /* Close button for sidebar on mobile */
    .sidebar-close-btn {
        display: flex;
        width: 36px;
        height: 36px;
        background: rgba(255,255,255,0.1);
        border: none;
        border-radius: 8px;
        color: white;
        font-size: 18px;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }
    
    /* Sidebar nav scrollable on mobile */
    .sidebar-nav {
        padding: 15px 10px;
        flex: 1;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .nav-item {
        padding: 14px 16px;
        margin-bottom: 2px;
    }
    
    /* Sidebar footer always visible */
    .sidebar-footer {
        padding: 15px;
        padding-bottom: max(15px, env(safe-area-inset-bottom));
    }
    
    .user-box {
        margin-bottom: 12px;
    }
    
    .btn-logout {
        padding: 14px;
        font-size: 15px;
    }
    
    /* Main content - Full width */
    .main-content { margin-left: 0; }
    
    /* Header */
    .main-header { padding: 0 15px; }
    .main-header h1 { font-size: 16px; }
    .menu-toggle { display: block; }
    
    /* Page content */
    .page-content { padding: 15px; }
    
    /* Cards */
    .card { padding: 15px; margin-bottom: 15px; }
    .card-header { flex-direction: column; align-items: flex-start; gap: 12px; }
    .card-header .btn { width: 100%; }
    
    /* Header controls */
    .header-controls { width: 100%; display: flex; flex-direction: column; gap: 10px; }
    .header-controls select { width: 100%; }
    .header-controls input[type="date"] { width: 100%; }
    .header-controls .btn { width: 100%; }
    
    /* KPI Grid */
    .kpi-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .kpi-card { padding: 12px; flex-direction: column; text-align: center; gap: 8px; }
    .kpi-icon { width: 40px; height: 40px; font-size: 18px; }
    .kpi-value { font-size: 22px; }
    .kpi-label { font-size: 11px; }
    
    /* Forms */
    .form-row { grid-template-columns: 1fr; }
    .form-group input, .form-group select, .form-group textarea { font-size: 16px; padding: 14px; }
    
    /* Buttons */
    .btn { padding: 12px 16px; font-size: 14px; }
    .btn-sm { padding: 10px 14px; }
    
    /* Tables - Responsive */
    table { display: block; overflow-x: auto; white-space: nowrap; }
    th, td { padding: 10px 12px; font-size: 13px; }
    .table-actions { flex-wrap: nowrap; }
    
    /* Tabs */
    .tabs { flex-wrap: wrap; gap: 5px; }
    .tab-btn { flex: 1 1 auto; min-width: 0; padding: 10px 8px; font-size: 12px; }
    .tab-btn i { margin-right: 4px; }
    
    /* Modal */
    .modal-content { width: 95%; max-width: none; margin: 10px; max-height: 90vh; }
    .modal-header { padding: 15px; }
    .modal-header h3 { font-size: 16px; }
    .modal-body { padding: 15px; }
    .modal-footer { padding: 15px; flex-direction: column; gap: 10px; }
    .modal-footer .btn { width: 100%; }
    
    /* Batch actions */
    .batch-actions { flex-direction: column; gap: 8px; }
    .batch-actions .btn { width: 100%; justify-content: center; }
    
    /* Dispatch grid */
    .rooms-dispatch-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
    .dispatch-room { padding: 8px; min-height: 70px; }
    .room-num { font-size: 14px; }
    .dispatch-buttons { flex-direction: row; gap: 4px; }
    .dispatch-btn { padding: 6px 10px; font-size: 14px; }
    
    /* Floor section */
    .floor-header { flex-direction: column; align-items: flex-start; gap: 8px; }
    .floor-header h4 { font-size: 14px; }
    .floor-actions { width: 100%; display: flex; gap: 8px; }
    .floor-actions .btn-sm { flex: 1; }
    
    /* Control grid */
    .control-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .control-card { padding: 12px; }
    .control-room-num { font-size: 18px; }
    
    /* Dispatch stats */
    .dispatch-stats { gap: 8px; padding: 10px 0; }
    .stat-item { padding: 8px 10px; min-width: 60px; }
    .stat-number { font-size: 18px; }
    .stat-label { font-size: 10px; }
    
    /* Workflow legend */
    .workflow-legend { flex-wrap: wrap; gap: 8px; font-size: 11px; padding: 10px; }
    
    /* Login page mobile */
    .login-container { flex-direction: column; }
    .login-left { display: none; }
    .login-right { padding: 20px; }
    .login-form-box { padding: 0; }
    .login-form-box h2 { font-size: 22px; }
    .login-mobile-logo { 
        display: block; 
        text-align: center; 
        font-size: 24px; 
        font-weight: 700; 
        color: var(--primary); 
        margin-bottom: 30px;
    }
    .login-mobile-logo i { color: var(--accent); margin-right: 10px; }
    
    /* Messages */
    .messages-container { flex-direction: column; height: auto; }
    .conversations-list { width: 100%; max-height: 250px; border-right: none; border-bottom: 1px solid var(--gray-200); }
    .chat-area { min-height: 400px; }
    .chat-messages { max-height: 300px; }
    .msg-input-area { padding: 10px; }
    .msg-input-area input { font-size: 16px; }
    
    /* Messenger full mobile */
    .messenger { flex-direction: column; height: auto; min-height: auto; }
    .messenger-sidebar { width: 100%; border-right: none; border-bottom: 1px solid var(--gray-200); max-height: 300px; }
    .messenger-main { min-height: 400px; }
    .messenger-messages { max-height: 250px; padding: 15px; }
    .messenger-conv-header { padding: 12px 15px; }
    .messenger-input { padding: 12px 15px; }
    .messenger-input input { font-size: 16px; padding: 12px 16px; }
    .msg-bubble { max-width: 85%; padding: 10px 14px; font-size: 14px; }
    .conv-item { padding: 10px 12px; }
    .conv-avatar { width: 40px; height: 40px; font-size: 13px; }
    .conv-name { font-size: 13px; }
    .conv-preview { font-size: 12px; }
    
    /* Leaves */
    .trimestre-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .trimestre-card { padding: 12px; }
    .trimestre-id { font-size: 16px; }
    
    .leaves-filters .filter-row { flex-direction: column; gap: 10px; }
    .leaves-filters .filter-group { width: 100%; }
    .leaves-filters .select-filter, .leaves-filters .input-filter { width: 100%; min-width: auto; }
    
    .leave-item { flex-direction: column; align-items: flex-start; gap: 8px; }
    .leave-avatar { display: none; }
    .leave-status-ongoing { align-self: flex-start; }
    
    /* Leave report form */
    .form-inline-report .form-row { flex-direction: column; }
    .form-inline-report .form-group { min-width: auto; width: 100%; }
    .form-inline-report .form-group-btn { width: 100%; }
    .form-inline-report .form-group-btn .btn { width: 100%; }
    
    /* Hotels list */
    .hotels-grid { grid-template-columns: 1fr; }
    
    /* Users table */
    .user-hotels-list { max-width: 150px; }
    
    /* Maintenance */
    .ticket-detail { font-size: 14px; }
    .ticket-photo img { max-width: 100%; }
    
    /* Linen */
    .linen-grid { grid-template-columns: 1fr; }
    
    /* Batch rooms */
    .batch-floor-rooms { grid-template-columns: repeat(3, 1fr); }
    .batch-room { padding: 8px; font-size: 12px; }
    
    /* Empty states */
    .empty-state i { font-size: 40px; }
    .empty-state h3 { font-size: 16px; }
}

/* ===== SMALL MOBILE (max-width: 480px) ===== */
@media (max-width: 480px) {
    /* Even smaller adjustments */
    .kpi-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
    .kpi-card { padding: 10px; }
    .kpi-value { font-size: 20px; }
    
    .rooms-dispatch-grid { grid-template-columns: repeat(2, 1fr); }
    .control-grid { grid-template-columns: 1fr 1fr; }
    
    .trimestre-grid { grid-template-columns: 1fr 1fr; }
    
    .batch-floor-rooms { grid-template-columns: repeat(2, 1fr); }
    
    th, td { padding: 8px 10px; font-size: 12px; }
    
    .nav-item { padding: 14px 16px; font-size: 15px; }
    
    .modal-content { margin: 5px; }
}

/* ===== KANBAN / TASKS ===== */
.boards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }
.board-card { background: white; border: 1px solid var(--gray-200); border-radius: var(--radius); padding: 20px; cursor: pointer; transition: all 0.2s; }
.board-card:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.board-card-header { margin-bottom: 10px; }
.board-card-header h4 { margin: 0 0 5px 0; font-size: 16px; }
.board-hotel { font-size: 12px; color: var(--gray-500); }
.board-desc { font-size: 13px; color: var(--gray-600); margin-bottom: 15px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.board-meta { display: flex; gap: 15px; font-size: 12px; color: var(--gray-500); }
.board-meta i { margin-right: 5px; }

.kanban-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; padding: 15px 20px; background: white; border-radius: var(--radius); }
.kanban-title { display: flex; align-items: center; gap: 15px; }
.kanban-title h2 { margin: 0; font-size: 20px; }
.kanban-actions { display: flex; gap: 10px; }

.kanban-board { display: flex; gap: 20px; overflow-x: auto; padding-bottom: 20px; min-height: calc(100vh - 250px); }
.kanban-column { min-width: 300px; max-width: 300px; background: var(--gray-100); border-radius: var(--radius); display: flex; flex-direction: column; }
.kanban-column-header { padding: 15px; background: white; border-radius: var(--radius) var(--radius) 0 0; display: flex; align-items: center; gap: 10px; }
.kanban-column-header h4 { margin: 0; flex: 1; font-size: 14px; }
.task-count { background: var(--gray-200); padding: 2px 8px; border-radius: 10px; font-size: 12px; color: var(--gray-600); }
.column-actions { display: flex; gap: 5px; }
.column-actions button { background: none; border: none; color: var(--gray-400); cursor: pointer; padding: 5px; }
.column-actions button:hover { color: var(--primary); }

.kanban-tasks { flex: 1; padding: 10px; display: flex; flex-direction: column; gap: 10px; min-height: 100px; }
.kanban-tasks.drag-over { background: rgba(30,58,95,0.1); border-radius: var(--radius); }

.task-card { background: white; border-radius: var(--radius); box-shadow: 0 1px 3px rgba(0,0,0,0.1); cursor: pointer; position: relative; overflow: hidden; transition: all 0.2s; }
.task-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.15); }
.task-card.dragging { opacity: 0.5; }
.task-card.task-completed { opacity: 0.6; }
.task-card.task-overdue { border-left: 3px solid var(--danger); }
.task-priority-bar { height: 3px; }
.task-content { padding: 12px; }
.task-title-row { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 5px; }
.task-title-text { font-weight: 500; font-size: 14px; flex: 1; }
.task-edit-btn { background: none; border: none; color: var(--gray-300); cursor: pointer; padding: 2px 5px; font-size: 11px; opacity: 0; transition: opacity 0.2s; }
.task-card:hover .task-edit-btn { opacity: 1; }
.task-edit-btn:hover { color: var(--primary); }
.task-title { font-weight: 500; font-size: 14px; margin-bottom: 5px; }
.task-title-input { width: 100%; padding: 4px 8px; border: 2px solid var(--primary); border-radius: 4px; font-size: 14px; font-weight: 500; }
.task-desc { font-size: 12px; color: var(--gray-500); margin-bottom: 8px; }
.task-meta { display: flex; gap: 12px; font-size: 11px; color: var(--gray-400); }
.task-meta i { margin-right: 4px; }
.task-meta .text-success { color: var(--success) !important; }
.task-completed-badge { position: absolute; top: 10px; right: 10px; color: var(--success); }

/* Archived Tasks */
.archived-tasks-list { max-height: 400px; overflow-y: auto; }
.archived-task-item { display: flex; align-items: center; justify-content: space-between; padding: 12px 15px; border: 1px solid var(--gray-200); border-radius: var(--radius); margin-bottom: 10px; cursor: pointer; transition: all 0.2s; }
.archived-task-item:hover { background: var(--gray-50); border-color: var(--primary); }
.archived-task-info { flex: 1; }
.archived-task-title { font-weight: 500; display: block; margin-bottom: 4px; }
.archived-task-meta { font-size: 12px; color: var(--gray-500); }
.archived-banner { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; background: rgba(107, 114, 128, 0.1); border-radius: var(--radius); margin-bottom: 20px; font-size: 14px; color: var(--gray-600); }
.archived-banner i { margin-right: 8px; }
.task-description-box.readonly { cursor: default; }
.task-description-box.readonly:hover { background: var(--gray-50); }

/* Task Detail Modal */
.task-detail { display: flex; gap: 20px; }
.task-detail-main { flex: 1; }
.task-detail-sidebar { width: 200px; }
.task-detail-section { margin-bottom: 20px; }
.task-detail-section > label { display: flex; font-weight: 600; margin-bottom: 10px; font-size: 13px; color: var(--gray-600); }
.task-description-box { background: var(--gray-50); padding: 12px; border-radius: var(--radius); min-height: 80px; cursor: pointer; font-size: 14px; white-space: pre-wrap; word-wrap: break-word; }
.task-description-box:hover { background: var(--gray-100); }
.task-description-box textarea#edit-desc-textarea { width: 100%; min-height: 120px; padding: 10px; border: 2px solid var(--primary); border-radius: var(--radius); font-size: 14px; font-family: inherit; resize: vertical; box-sizing: border-box; }
.task-description-box .edit-actions { display: flex; gap: 10px; margin-top: 10px; }

/* Modal title input for task editing */
.modal-title-input { width: 100%; padding: 8px 12px; border: 2px solid var(--primary); border-radius: var(--radius); font-size: 18px; font-weight: 600; }
.task-modal-title:hover i { opacity: 1 !important; }

.checklist-progress { height: 6px; background: var(--gray-200); border-radius: 3px; margin-bottom: 10px; }
.checklist-progress-bar { height: 100%; background: var(--success); border-radius: 3px; transition: width 0.3s; }
.checklist-items { margin-bottom: 10px; }
.checklist-item { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--gray-100); }
.checklist-item input[type="checkbox"] { width: 18px; height: 18px; cursor: pointer; flex-shrink: 0; }
.checklist-item .checklist-text { flex: 1; cursor: pointer; padding: 4px 8px; border-radius: 4px; transition: background 0.2s; }
.checklist-item .checklist-text:hover { background: var(--gray-100); }
.checklist-item .checklist-text.checked { text-decoration: line-through; color: var(--gray-400); }
.checklist-item span.checked { text-decoration: line-through; color: var(--gray-400); }
.checklist-item .btn-icon { background: none; border: none; color: var(--gray-300); cursor: pointer; padding: 5px; margin-left: auto; flex-shrink: 0; }
.checklist-item .btn-icon:hover { color: var(--danger); }
.checklist-edit-input { flex: 1; padding: 4px 8px; border: 2px solid var(--primary); border-radius: 4px; font-size: 14px; }
.checklist-add { display: flex; gap: 10px; }
.checklist-add input { flex: 1; padding: 8px 12px; border: 1px solid var(--gray-200); border-radius: var(--radius); font-size: 13px; }

.task-comments { max-height: 200px; overflow-y: auto; margin-bottom: 10px; }
.task-comment { display: flex; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--gray-100); }
.comment-avatar { width: 32px; height: 32px; background: var(--primary); color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; flex-shrink: 0; }
.comment-content { flex: 1; }
.comment-header { display: flex; justify-content: space-between; margin-bottom: 5px; font-size: 12px; }
.comment-content p { margin: 0; font-size: 13px; }

.task-detail-field { margin-bottom: 15px; }
.task-detail-field label { display: block; font-size: 12px; color: var(--gray-500); margin-bottom: 5px; }
.task-detail-field select, .task-detail-field input { width: 100%; padding: 8px 10px; border: 1px solid var(--gray-200); border-radius: var(--radius); font-size: 13px; }
.task-detail-info { font-size: 12px; color: var(--gray-500); }

/* Color Picker */
.color-picker { display: flex; gap: 10px; flex-wrap: wrap; }
.color-picker label { cursor: pointer; }
.color-picker input { display: none; }
.color-picker span { display: block; width: 32px; height: 32px; border-radius: 50%; border: 3px solid transparent; transition: all 0.2s; }
.color-picker input:checked + span { border-color: var(--gray-800); transform: scale(1.1); }

@media (max-width: 768px) {
    .kanban-board { flex-direction: column; }
    .kanban-column { min-width: 100%; max-width: 100%; }
    .task-detail { flex-direction: column; }
    .task-detail-sidebar { width: 100%; }
    .boards-grid { grid-template-columns: 1fr; }
}

/* ===== EVALUATIONS ===== */
.eval-header { background: var(--gray-50); padding: 15px; border-radius: var(--radius); margin-bottom: 20px; }
.eval-info { display: flex; flex-wrap: wrap; gap: 20px; }
.eval-info p { margin: 0; }
.eval-instructions { margin-top: 15px; padding: 10px 15px; background: rgba(59, 130, 246, 0.1); border-left: 3px solid #3B82F6; border-radius: 4px; font-size: 14px; }

.eval-questions { display: flex; flex-direction: column; gap: 20px; }
.eval-question { background: white; border: 1px solid var(--gray-200); border-radius: var(--radius); padding: 20px; }
.eval-question-text { font-weight: 500; margin-bottom: 15px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.q-number { color: var(--primary); font-weight: 700; }
.q-weight { font-size: 12px; color: var(--gray-400); margin-left: auto; }

.score-input { display: flex; gap: 5px; flex-wrap: wrap; }
.score-option { cursor: pointer; }
.score-option input { display: none; }
.score-option span { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 2px solid var(--gray-200); border-radius: 50%; font-weight: 600; transition: all 0.2s; }
.score-option:hover span { border-color: var(--primary); }
.score-option input:checked + span, .score-option.selected span { background: var(--primary); color: white; border-color: var(--primary); }

.eval-question-comment { margin-top: 15px; }
.eval-question-comment textarea { width: 100%; padding: 10px; border: 1px solid var(--gray-200); border-radius: var(--radius); font-size: 14px; resize: vertical; min-height: 60px; }

.eval-global textarea { width: 100%; }

.score-badge { display: inline-block; padding: 4px 10px; border-radius: 12px; font-weight: 600; font-size: 13px; }
.score-excellent { background: rgba(16, 185, 129, 0.15); color: #059669; }
.score-good { background: rgba(59, 130, 246, 0.15); color: #2563EB; }
.score-average { background: rgba(245, 158, 11, 0.15); color: #D97706; }
.score-low { background: rgba(239, 68, 68, 0.15); color: #DC2626; }

.grid-editor { max-height: 70vh; overflow-y: auto; }
.grid-info { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; padding: 15px; background: var(--gray-50); border-radius: var(--radius); }

.questions-list { display: flex; flex-direction: column; gap: 10px; margin-top: 15px; }
.question-item { display: flex; align-items: center; gap: 15px; padding: 12px 15px; background: white; border: 1px solid var(--gray-200); border-radius: var(--radius); }
.question-handle { color: var(--gray-300); cursor: grab; }
.question-content { flex: 1; }
.question-text { font-weight: 500; }
.question-meta { font-size: 12px; color: var(--gray-500); margin-top: 5px; display: flex; gap: 10px; }
.question-actions { display: flex; gap: 5px; }
.question-actions button { background: none; border: none; color: var(--gray-400); cursor: pointer; padding: 5px; }
.question-actions button:hover { color: var(--primary); }

.add-question-form { background: var(--gray-50); padding: 15px; border-radius: var(--radius); }
.add-question-form .form-row { display: flex; gap: 10px; align-items: flex-end; }
.add-question-form .form-group { flex: 1; margin-bottom: 0; }

.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 15px; }
.stat-card { background: var(--gray-50); padding: 20px; border-radius: var(--radius); text-align: center; }
.stat-value { font-size: 28px; font-weight: 700; color: var(--primary); }
.stat-label { font-size: 13px; color: var(--gray-500); margin-top: 5px; }

/* ===== TOUCH IMPROVEMENTS ===== */
@media (hover: none) and (pointer: coarse) {
    /* Larger touch targets */
    .btn { min-height: 44px; }
    .btn-sm { min-height: 40px; }
    .nav-item { min-height: 48px; }
    .tab-btn { min-height: 44px; }
    .table-actions button { min-width: 40px; min-height: 40px; }
    .dispatch-btn { min-width: 44px; min-height: 44px; }
    .control-card { min-height: 80px; }
    .batch-room { min-height: 44px; }
    
    /* Remove hover effects that don't work on touch */
    .nav-item:hover { background: transparent; }
    .nav-item.active { background: rgba(255,255,255,0.15); }
    tr:hover { background: transparent; }
}

/* ===== LANDSCAPE MOBILE ===== */
@media (max-width: 768px) and (orientation: landscape) {
    .modal-content { max-height: 85vh; }
    .modal-body { max-height: 50vh; overflow-y: auto; }
    .chat-messages { max-height: 200px; }
}

/* ===== SETTINGS PAGE ===== */

/* Modules Grid */
.modules-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 15px;
}

.module-card {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px;
    background: white;
    border: 2px solid var(--gray-200);
    border-radius: var(--radius);
    transition: all 0.3s ease;
}

.module-card.active {
    border-color: #10B981;
    background: rgba(16, 185, 129, 0.05);
}

.module-card.inactive {
    border-color: var(--gray-200);
    background: var(--gray-50);
    opacity: 0.7;
}

.module-card.core {
    border-style: dashed;
}

.module-toggle {
    flex-shrink: 0;
}

.module-icon {
    width: 45px;
    height: 45px;
    border-radius: 10px;
    background: var(--primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.module-card.inactive .module-icon {
    background: var(--gray-300);
}

.module-info {
    flex: 1;
    min-width: 0;
}

.module-info h4 {
    margin: 0 0 4px 0;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.module-info p {
    margin: 0;
    font-size: 12px;
    color: var(--gray-500);
}

.module-status {
    flex-shrink: 0;
    font-size: 12px;
}

.status-active {
    color: #10B981;
}

.status-inactive {
    color: var(--gray-400);
}

/* Toggle Switch */
.switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--gray-300);
    transition: 0.3s;
    border-radius: 24px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: 0.3s;
    border-radius: 50%;
}

input:checked + .slider {
    background-color: #10B981;
}

input:disabled + .slider {
    opacity: 0.5;
    cursor: not-allowed;
}

input:checked + .slider:before {
    transform: translateX(20px);
}

/* Roles Grid */
.roles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 15px;
    margin-bottom: 20px;
}

.role-card {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    padding: 15px;
    background: var(--gray-50);
    border-radius: var(--radius);
    border: 1px solid var(--gray-200);
}

.role-card.role-admin {
    background: rgba(239, 68, 68, 0.08);
    border-color: rgba(239, 68, 68, 0.3);
}

.role-icon {
    width: 45px;
    height: 45px;
    border-radius: 12px;
    background: var(--primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.role-admin .role-icon {
    background: #EF4444;
}

.role-info h4 {
    margin: 0 0 5px 0;
    font-size: 15px;
}

.role-info p {
    margin: 0;
    font-size: 13px;
    color: var(--gray-500);
    line-height: 1.4;
}

.permissions-table {
    width: 100%;
    font-size: 13px;
}

.permissions-table th {
    padding: 10px 8px;
    white-space: nowrap;
    vertical-align: middle;
    background: var(--gray-50);
}

.permissions-table td {
    padding: 8px;
    vertical-align: middle;
}

.permissions-table .category-row {
    background: var(--gray-100);
}

.permissions-table .category-row td {
    padding: 10px 8px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--gray-600);
}

.permissions-table .perm-label {
    padding-left: 20px;
}

.permissions-table input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--primary);
}

.permissions-table input[type="checkbox"]:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.role-header {
    text-align: center;
    font-size: 12px;
    line-height: 1.3;
}

.role-header i {
    font-size: 16px;
    margin-bottom: 3px;
    display: block;
}

.role-header.role-admin-header {
    color: #EF4444;
}

.table-responsive {
    overflow-x: auto;
    margin: 0 -10px;
    padding: 0 10px;
}

.permissions-legend {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

.legend-category {
    padding: 15px;
    background: var(--gray-50);
    border-radius: var(--radius);
}

.legend-category h4 {
    margin: 0 0 10px 0;
    font-size: 14px;
    color: var(--primary);
    display: flex;
    align-items: center;
    gap: 8px;
}

.legend-category ul {
    margin: 0;
    padding-left: 0;
    list-style: none;
}

.legend-category li {
    font-size: 12px;
    margin-bottom: 6px;
    color: var(--gray-600);
}

.legend-category code {
    background: white;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 11px;
    color: var(--primary);
    border: 1px solid var(--gray-200);
}

/* ===== ADDITIONAL MOBILE STYLES ===== */
@media (max-width: 768px) {
    /* Settings modules grid */
    .modules-grid { grid-template-columns: 1fr; }
    .module-card { padding: 12px; }
    .module-icon { width: 40px; height: 40px; font-size: 16px; }
    
    /* Roles grid */
    .roles-grid { grid-template-columns: 1fr; }
    .role-card { padding: 12px; flex-direction: column; text-align: center; }
    .role-icon { margin: 0 auto 10px; }
    
    /* Permissions table - make scrollable */
    .permissions-table { display: block; overflow-x: auto; }
    
    /* Evaluations */
    .eval-header { padding: 12px; }
    .eval-info { flex-direction: column; gap: 10px; }
    .eval-question { padding: 15px; }
    .score-input { gap: 8px; }
    .score-option span { width: 32px; height: 32px; font-size: 13px; }
    .stats-grid { grid-template-columns: 1fr 1fr; }
    
    /* Quick actions */
    .quick-actions { grid-template-columns: repeat(3, 1fr); gap: 8px; }
    .quick-action { padding: 15px 10px; min-width: auto; }
    .quick-action i { font-size: 20px; }
    .quick-action span { font-size: 11px; }
    
    /* Dashboard grid */
    .dashboard-grid { grid-template-columns: 1fr; gap: 15px; }
    .dashboard-col { gap: 15px; }
    
    /* Filters */
    .filters-bar { gap: 10px; }
    .filter-group { width: 100%; }
    .search-box { width: 100%; }
    
    /* Notifications dropdown */
    .notification-dropdown {
        position: fixed;
        top: var(--header-height);
        left: 0;
        right: 0;
        width: 100%;
        max-height: 70vh;
        border-radius: 0;
    }
    
    /* Toast notifications */
    .toast { 
        left: 10px; 
        right: 10px; 
        max-width: none;
        transform: translateX(0);
    }
    
    /* User dropdown */
    .user-dropdown {
        position: fixed;
        top: var(--header-height);
        right: 10px;
        left: auto;
        min-width: 200px;
    }
}

@media (max-width: 480px) {
    /* Even smaller screens */
    .quick-actions { grid-template-columns: repeat(2, 1fr); }
    
    /* Header adjustments */
    .main-header h1 { font-size: 14px; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .header-actions { gap: 5px; }
    .header-icon-btn { width: 36px; height: 36px; }
    
    /* Score options smaller */
    .score-option span { width: 28px; height: 28px; font-size: 12px; }
    
    /* Stats grid single column */
    .stats-grid { grid-template-columns: 1fr; }
    
    /* Module card even more compact */
    .module-card { gap: 10px; }
    .module-info h4 { font-size: 13px; }
    .module-info p { font-size: 11px; }
}

/* iOS specific fixes */
@supports (-webkit-touch-callout: none) {
    /* Fix for iOS input zoom */
    input, select, textarea {
        font-size: 16px !important;
    }
    
    /* Fix for iOS bottom safe area */
    .modal-footer,
    .chatbot-input,
    .messenger-input {
        padding-bottom: max(15px, env(safe-area-inset-bottom));
    }
}

.ml-10 {
    margin-left: 10px;
}

/* ===== CHATBOT ===== */
#chatbot-button {
    position: fixed;
    bottom: 25px;
    right: 25px;
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--primary) 0%, #2d4a6f 100%);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(30, 58, 95, 0.4);
    transition: all 0.3s ease;
    z-index: 1000;
}

#chatbot-button:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(30, 58, 95, 0.5);
}

#chatbot-button.active {
    background: var(--gray-500);
}

.chatbot-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    background: #EF4444;
    color: white;
    font-size: 12px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
}

#chatbot-container {
    position: fixed;
    bottom: 100px;
    right: 25px;
    width: 380px;
    max-width: calc(100vw - 50px);
    height: 500px;
    max-height: calc(100vh - 150px);
    background: white;
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    z-index: 1001;
    overflow: hidden;
    animation: chatbotSlideIn 0.3s ease;
}

@keyframes chatbotSlideIn {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.chatbot-header {
    background: linear-gradient(135deg, var(--primary) 0%, #2d4a6f 100%);
    color: white;
    padding: 15px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.chatbot-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    font-size: 16px;
}

.chatbot-title i {
    font-size: 20px;
}

.chatbot-actions {
    display: flex;
    gap: 5px;
}

.chatbot-actions button {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s;
}

.chatbot-actions button:hover {
    background: rgba(255, 255, 255, 0.3);
}

.chatbot-messages {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    background: #f8fafc;
}

.chat-message {
    display: flex;
    gap: 10px;
    max-width: 90%;
}

.chat-message.user {
    flex-direction: row-reverse;
    align-self: flex-end;
}

.chat-message.bot {
    align-self: flex-start;
}

.message-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 14px;
}

.chat-message.bot .message-avatar {
    background: var(--primary);
    color: white;
}

.chat-message.user .message-avatar {
    background: var(--success);
    color: white;
}

.message-content {
    background: white;
    padding: 12px 16px;
    border-radius: 16px;
    font-size: 14px;
    line-height: 1.5;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.chat-message.user .message-content {
    background: var(--primary);
    color: white;
    border-bottom-right-radius: 4px;
}

.chat-message.bot .message-content {
    border-bottom-left-radius: 4px;
}

.message-content strong {
    color: var(--primary);
}

.chat-message.user .message-content strong {
    color: #93c5fd;
}

.chat-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    padding: 8px 14px;
    background: var(--primary);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.2s;
}

.chat-action-btn:hover {
    background: #2d4a6f;
}

.chatbot-input {
    display: flex;
    gap: 10px;
    padding: 15px;
    background: white;
    border-top: 1px solid var(--gray-200);
}

.chatbot-input input {
    flex: 1;
    padding: 12px 16px;
    border: 1px solid var(--gray-200);
    border-radius: 24px;
    font-size: 14px;
    outline: none;
    transition: border-color 0.2s;
}

.chatbot-input input:focus {
    border-color: var(--primary);
}

.chatbot-input button {
    width: 44px;
    height: 44px;
    background: var(--primary);
    color: white;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
}

.chatbot-input button:hover {
    background: #2d4a6f;
    transform: scale(1.05);
}

.chatbot-suggestions {
    display: flex;
    gap: 8px;
    padding: 0 15px 15px;
    background: white;
    flex-wrap: wrap;
}

.chatbot-suggestions button {
    padding: 6px 12px;
    background: var(--gray-100);
    border: 1px solid var(--gray-200);
    border-radius: 16px;
    font-size: 12px;
    color: var(--gray-600);
    cursor: pointer;
    transition: all 0.2s;
}

.chatbot-suggestions button:hover {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}

/* Typing indicator */
.typing-dots {
    display: flex;
    gap: 4px;
    padding: 5px 0;
}

.typing-dots span {
    width: 8px;
    height: 8px;
    background: var(--gray-400);
    border-radius: 50%;
    animation: typingBounce 1.4s infinite ease-in-out;
}

.typing-dots span:nth-child(1) { animation-delay: 0s; }
.typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.typing-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes typingBounce {
    0%, 60%, 100% { transform: translateY(0); }
    30% { transform: translateY(-8px); }
}

/* Responsive chatbot - Tablet */
@media (max-width: 768px) {
    #chatbot-container {
        right: 15px;
        bottom: 90px;
        width: 350px;
        height: 450px;
    }
    
    #chatbot-button {
        right: 15px;
        bottom: 20px;
        width: 56px;
        height: 56px;
    }
    
    .chatbot-suggestions {
        padding: 10px 12px 12px;
    }
    
    .chatbot-suggestions button {
        padding: 8px 12px;
        font-size: 11px;
    }
}

/* Responsive chatbot - Mobile */
@media (max-width: 480px) {
    #chatbot-container {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        max-width: 100%;
        max-height: 100%;
        border-radius: 0;
        z-index: 9999;
    }
    
    #chatbot-container.hidden {
        display: none;
    }
    
    #chatbot-button {
        right: 15px;
        bottom: 15px;
        width: 55px;
        height: 55px;
        font-size: 22px;
        z-index: 9998;
    }
    
    .chatbot-header {
        padding: 15px;
        border-radius: 0;
    }
    
    .chatbot-title {
        font-size: 15px;
    }
    
    .chatbot-messages {
        padding: 15px;
        gap: 12px;
    }
    
    .chat-message {
        max-width: 85%;
    }
    
    .message-avatar {
        width: 32px;
        height: 32px;
        font-size: 12px;
    }
    
    .message-content {
        padding: 10px 14px;
        font-size: 14px;
        border-radius: 14px;
    }
    
    .chat-action-btn {
        padding: 8px 12px;
        font-size: 12px;
        width: 100%;
        justify-content: center;
    }
    
    .chatbot-input {
        padding: 12px;
        gap: 8px;
        /* Safe area for iOS devices */
        padding-bottom: max(12px, env(safe-area-inset-bottom));
    }
    
    .chatbot-input input {
        padding: 12px 14px;
        font-size: 16px; /* Prevents zoom on iOS */
        border-radius: 20px;
    }
    
    .chatbot-input button {
        width: 44px;
        height: 44px;
        flex-shrink: 0;
    }
    
    .chatbot-suggestions {
        padding: 8px 12px 12px;
        padding-bottom: max(12px, env(safe-area-inset-bottom));
        gap: 6px;
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
    }
    
    .chatbot-suggestions button {
        padding: 8px 14px;
        font-size: 12px;
        white-space: nowrap;
        flex-shrink: 0;
    }
}

/* Very small screens */
@media (max-width: 360px) {
    .chatbot-messages {
        padding: 10px;
    }
    
    .message-content {
        padding: 8px 12px;
        font-size: 13px;
    }
    
    .chatbot-input input {
        padding: 10px 12px;
    }
}

/* Landscape mode on mobile */
@media (max-height: 500px) and (max-width: 900px) {
    #chatbot-container {
        height: 100%;
        max-height: 100vh;
    }
    
    .chatbot-messages {
        padding: 10px;
        gap: 8px;
    }
    
    .chatbot-header {
        padding: 10px 15px;
    }
    
    .chatbot-input {
        padding: 8px 12px;
    }
    
    .chatbot-suggestions {
        padding: 6px 12px 8px;
    }
}

/* Touch-friendly improvements */
@media (hover: none) and (pointer: coarse) {
    #chatbot-button:active {
        transform: scale(0.95);
    }
    
    .chatbot-input button:active {
        transform: scale(0.95);
        background: #2d4a6f;
    }
    
    .chatbot-suggestions button:active {
        background: var(--primary);
        color: white;
    }
    
    .chat-action-btn:active {
        background: #2d4a6f;
    }
}

/* ===== PRINT STYLES ===== */
@media print {
    .sidebar, .main-header, .menu-toggle, .btn, .batch-actions, #chatbot-button, #chatbot-container { display: none !important; }
    .main-content { margin-left: 0; }
    .page-content { padding: 0; }
    .card { box-shadow: none; border: 1px solid #ddd; }
}

/* ===== MODULE TIME - Planning / Gestion du Temps ===== */

.time-page { padding: 0; }
.time-page .page-header { margin-bottom: 1rem; }
.time-page .page-header h1 { font-size: 1.5rem; margin: 0; display: flex; align-items: center; gap: 0.5rem; }

.time-tabs {
    display: flex; gap: 0.5rem; margin-bottom: 1rem; flex-wrap: wrap;
    background: white; padding: 0.75rem; border-radius: 8px; box-shadow: var(--shadow);
}
.time-tabs .tab-btn {
    padding: 0.5rem 1rem; border: none; background: #f3f4f6; border-radius: 6px;
    cursor: pointer; font-size: 0.875rem; display: flex; align-items: center; gap: 0.5rem;
    transition: all 0.2s;
}
.time-tabs .tab-btn:hover { background: #e5e7eb; }
.time-tabs .tab-btn.active { background: var(--primary); color: white; }

.time-content { background: white; border-radius: 8px; box-shadow: var(--shadow); padding: 1rem; min-height: 400px; }

/* Planning Header */
.planning-header {
    display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap;
    gap: 1rem; margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 1px solid #e5e7eb;
}
.planning-nav { display: flex; align-items: center; gap: 0.5rem; }
.planning-nav .week-label { font-weight: 600; font-size: 1rem; min-width: 180px; text-align: center; }
.planning-filters select { padding: 0.5rem; border: 1px solid #d1d5db; border-radius: 6px; }
.planning-actions { display: flex; gap: 0.5rem; }

/* Planning Layout */
.planning-layout { display: flex; gap: 1rem; }
.planning-sidebar { width: 200px; flex-shrink: 0; }
.planning-grid-container { flex: 1; overflow-x: auto; }

.sidebar-section { margin-bottom: 1rem; }
.sidebar-section h4 { font-size: 0.8rem; color: #6b7280; margin-bottom: 0.5rem; display: flex; align-items: center; gap: 0.5rem; }

.template-item, .template-card {
    padding: 0.5rem; margin-bottom: 0.5rem; background: #f9fafb; border-radius: 4px;
    cursor: grab; font-size: 0.75rem; display: flex; flex-direction: column; gap: 2px;
    transition: all 0.2s;
}
.template-item:hover { background: #f3f4f6; transform: translateX(2px); }
.template-item.absence { flex-direction: row; align-items: center; gap: 0.5rem; }
.template-time { font-weight: 600; }
.template-name { color: #6b7280; }

/* Planning Grid */
.schedule-table { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
.schedule-table th, .schedule-table td { padding: 0.5rem; border: 1px solid #e5e7eb; text-align: center; }
.schedule-table th { background: #f9fafb; font-weight: 600; }
.schedule-table th.today { background: #dbeafe; }
.schedule-table th.holiday { background: #fef3c7; }

.col-employee { width: 180px; text-align: left !important; }
.col-day { width: calc((100% - 230px) / 7); min-width: 80px; }
.col-total { width: 80px; background: #f9fafb; }

.service-row td { background: #f3f4f6; font-weight: 600; text-align: left !important; padding: 0.5rem 1rem; }
.employee-row:hover { background: #f9fafb; }

.employee-info { display: flex; flex-direction: column; gap: 2px; }
.employee-name { font-weight: 500; }
.employee-position { font-size: 0.7rem; }
.employee-hours { font-size: 0.65rem; color: #9ca3af; }

.day-header { display: flex; flex-direction: column; }
.day-name { font-size: 0.7rem; color: #6b7280; }
.day-num { font-size: 1rem; font-weight: 600; }

.day-cell { position: relative; min-height: 50px; vertical-align: top; cursor: pointer; transition: background 0.2s; }
.day-cell:hover { background: #f3f4f6; }
.day-cell.today { background: #eff6ff; }
.day-cell.holiday { background: #fefce8; }
.day-cell.drag-over { background: #dbeafe; outline: 2px dashed var(--primary); }

.entry-block {
    padding: 4px 6px; border-radius: 4px; font-size: 0.7rem;
    display: flex; flex-direction: column; gap: 2px;
}
.entry-block.work { background: #d1fae5; }
.entry-block.rest { background: #f3f4f6; color: #9ca3af; justify-content: center; align-items: center; }
.entry-block.absence { background: #fef3c7; }
.entry-block.leave { justify-content: center; align-items: center; }
.entry-time { font-weight: 600; }
.entry-hours { color: #059669; font-size: 0.65rem; }
.entry-type { font-weight: 600; font-size: 0.65rem; }

.col-total.overtime { color: #dc2626; background: #fef2f2; }
.col-total.undertime { color: #2563eb; background: #eff6ff; }
.total-hours { display: block; font-weight: 600; }
.total-diff { display: block; font-size: 0.65rem; }

/* Planning Footer */
.planning-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid #e5e7eb; }
.planning-legend { display: flex; gap: 1rem; font-size: 0.75rem; color: #6b7280; }
.legend-item { display: flex; align-items: center; gap: 0.25rem; }
.legend-dot { width: 12px; height: 12px; border-radius: 3px; }
.legend-dot.work { background: #d1fae5; border: 1px solid #10b981; }
.legend-dot.rest { background: #f3f4f6; border: 1px solid #9ca3af; }
.legend-dot.absence { background: #fef3c7; border: 1px solid #f59e0b; }
.legend-dot.holiday { background: #fecaca; border: 1px solid #ef4444; }

.planning-status .status-badge { padding: 0.25rem 0.75rem; border-radius: 20px; font-size: 0.75rem; }
.status-badge.draft { background: #fef3c7; color: #b45309; }
.status-badge.published { background: #d1fae5; color: #047857; }
.status-badge.locked { background: #e5e7eb; color: #374151; }

/* My Schedule */
.my-schedule-header { display: flex; justify-content: center; align-items: center; gap: 1rem; margin-bottom: 1.5rem; }
.my-schedule-header .month-label { font-size: 1.1rem; font-weight: 600; min-width: 180px; text-align: center; text-transform: capitalize; }

.contract-info { background: #eff6ff; padding: 0.75rem 1rem; border-radius: 6px; margin-bottom: 1rem; font-size: 0.875rem; display: flex; align-items: center; gap: 0.5rem; }

.month-summary { display: flex; gap: 1.5rem; justify-content: center; margin-bottom: 1.5rem; }
.summary-item { text-align: center; }
.summary-value { display: block; font-size: 1.5rem; font-weight: 700; color: var(--primary); }
.summary-label { font-size: 0.75rem; color: #6b7280; }

.schedule-calendar { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.5rem; }
.calendar-day { background: #f9fafb; border-radius: 6px; padding: 0.5rem; min-height: 80px; }
.calendar-day.weekend { background: #f3f4f6; }
.calendar-day.today { background: #dbeafe; border: 2px solid var(--primary); }
.calendar-day.has-entry { background: white; border: 1px solid #e5e7eb; }
.calendar-day .day-header { display: flex; justify-content: space-between; margin-bottom: 0.5rem; font-size: 0.75rem; }
.calendar-day .day-content { font-size: 0.75rem; }
.entry-badge { display: inline-block; padding: 2px 6px; border-radius: 4px; font-weight: 500; }
.entry-badge.work { background: #d1fae5; color: #047857; }
.entry-badge.rest { background: #e5e7eb; color: #6b7280; }
.entry-badge.rest-light { color: #d1d5db; }
.entry-badge.absence { background: #fef3c7; color: #b45309; }
.entry-badge.leave { background: #dbeafe; color: #1d4ed8; }
.entry-hours { display: block; margin-top: 4px; color: #059669; font-size: 0.7rem; }

/* Timesheet */
.timesheet-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 1px solid #e5e7eb; }
.timesheet-nav { display: flex; align-items: center; gap: 0.5rem; }
.timesheet-nav .week-label { font-weight: 600; min-width: 150px; text-align: center; }
.timesheet-filters select { padding: 0.5rem; border: 1px solid #d1d5db; border-radius: 6px; }
.timesheet-actions { display: flex; gap: 0.5rem; }

.timesheet-table input[type="time"] { width: 80px; padding: 0.25rem; border: 1px solid #d1d5db; border-radius: 4px; font-size: 0.75rem; }
.timesheet-table .positive { color: #059669; }
.timesheet-table .negative { color: #dc2626; }
.timesheet-table tr.validated { background: #f0fdf4; }
.timesheet-table .user-cell { font-weight: 600; background: #f9fafb; }

/* Counters */
.counters-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 1px solid #e5e7eb; }
.counters-filters { display: flex; gap: 0.5rem; }
.counters-filters select { padding: 0.5rem; border: 1px solid #d1d5db; border-radius: 6px; }

.counters-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); gap: 1rem; }
.counter-card { background: #f9fafb; border-radius: 8px; overflow: hidden; }
.counter-card .counter-header { background: var(--primary); color: white; padding: 0.75rem 1rem; }
.counter-card .counter-header h4 { margin: 0; font-size: 0.9rem; }
.counter-card .counter-body { padding: 0.5rem; }
.counter-table { width: 100%; font-size: 0.75rem; border-collapse: collapse; }
.counter-table th, .counter-table td { padding: 0.5rem; text-align: right; border-bottom: 1px solid #e5e7eb; }
.counter-table th:first-child, .counter-table td:first-child { text-align: left; }
.counter-table .positive { color: #059669; }
.counter-table .negative { color: #dc2626; }
.counter-table tfoot td { font-weight: 600; background: #f3f4f6; }

/* Config */
.config-tabs { display: flex; gap: 0.5rem; margin-bottom: 1rem; border-bottom: 1px solid #e5e7eb; padding-bottom: 0.5rem; }
.config-tab { padding: 0.5rem 1rem; border: none; background: transparent; cursor: pointer; font-size: 0.875rem; border-radius: 6px 6px 0 0; display: flex; align-items: center; gap: 0.5rem; }
.config-tab:hover { background: #f3f4f6; }
.config-tab.active { background: var(--primary); color: white; }

.config-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
.config-header h3 { margin: 0; font-size: 1rem; }

.templates-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem; }
.template-card { background: white; border: 1px solid #e5e7eb; padding: 1rem; display: flex; justify-content: space-between; align-items: flex-start; }
.template-card h4 { margin: 0 0 0.25rem 0; font-size: 0.9rem; }
.template-card p { margin: 0; font-size: 0.8rem; }

.color-dot { display: inline-block; width: 16px; height: 16px; border-radius: 50%; vertical-align: middle; }

/* Responsive TIME */
@media (max-width: 768px) {
    .planning-layout { flex-direction: column; }
    .planning-sidebar { width: 100%; display: flex; gap: 1rem; overflow-x: auto; padding-bottom: 0.5rem; }
    .sidebar-section { flex-shrink: 0; }
    .templates-list, .absence-types { display: flex; gap: 0.5rem; }
    .template-item { white-space: nowrap; }
    
    .schedule-table { font-size: 0.7rem; }
    .col-employee { width: 100px; }
    .col-day { min-width: 60px; }
    
    .schedule-calendar { grid-template-columns: repeat(2, 1fr); }
    
    .planning-header, .timesheet-header, .counters-header { flex-direction: column; align-items: stretch; }
    .planning-actions, .timesheet-actions { justify-content: center; }
}

/* ==================== AUDIT MODULE ==================== */
.audit-pending-section {
    background: #FEF3C7;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 20px;
}
.audit-pending-section h4 {
    margin: 0 0 15px 0;
    color: #92400E;
}
.audit-pending-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.audit-pending-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: white;
    padding: 12px 15px;
    border-radius: 6px;
    border-left: 4px solid #F59E0B;
}
.audit-pending-item.overdue {
    border-left-color: #DC2626;
    background: #FEE2E2;
}
.audit-pending-info strong {
    display: block;
    margin-bottom: 3px;
}
.audit-deadline {
    font-size: 12px;
    color: #666;
}

.audit-grids-section h4 {
    margin: 20px 0 15px;
    color: #1E3A5F;
}
.audit-grids-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 15px;
}
.audit-grid-card {
    background: #f9f9f9;
    border-radius: 8px;
    padding: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid #eee;
}
.audit-grid-info h5 {
    margin: 0 0 5px 0;
    color: #1E3A5F;
}
.audit-grid-info p {
    margin: 0 0 10px 0;
    font-size: 13px;
    color: #666;
}
.audit-grid-meta {
    display: flex;
    gap: 15px;
    font-size: 12px;
    color: #888;
}
.audit-grid-meta .badge {
    font-size: 10px;
}

.audit-score {
    font-weight: bold;
    padding: 3px 8px;
    border-radius: 4px;
}
.audit-score.score-excellent { background: #D1FAE5; color: #065F46; }
.audit-score.score-good { background: #DBEAFE; color: #1E40AF; }
.audit-score.score-average { background: #FEF3C7; color: #92400E; }
.audit-score.score-low { background: #FEE2E2; color: #991B1B; }

/* Grid Editor */
.form-section {
    background: #f9f9f9;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
}
.form-section h4 {
    margin: 0 0 15px 0;
    color: #1E3A5F;
    font-size: 14px;
}
.checkbox-group {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}
.checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}
.audit-mandatory-options.hidden {
    display: none;
}

/* Questions Editor */
.audit-questions-container {
    padding: 15px;
}
.audit-section {
    margin-bottom: 25px;
}
.audit-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #1E3A5F;
    color: white;
    padding: 10px 15px;
    border-radius: 6px 6px 0 0;
    margin-bottom: 0;
}
.audit-section-header h5 {
    margin: 0;
    font-size: 14px;
}
.audit-question-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 15px;
    background: white;
    border: 1px solid #eee;
    border-top: none;
}
.audit-question-item:last-child {
    border-radius: 0 0 6px 6px;
}
.audit-question-drag {
    color: #ccc;
    cursor: grab;
    padding: 5px;
}
.audit-question-content {
    flex: 1;
}
.audit-question-text {
    font-weight: 500;
    margin-bottom: 8px;
}
.audit-question-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 12px;
    color: #666;
}
.audit-question-actions {
    display: flex;
    gap: 5px;
}

/* Audit Execute */
.audit-info-bar {
    display: flex;
    gap: 20px;
    padding: 15px;
    background: #f5f5f5;
    border-radius: 6px;
    margin-bottom: 20px;
    font-size: 14px;
}
.audit-info-bar span {
    display: flex;
    align-items: center;
    gap: 8px;
}
.audit-execute-section {
    margin-bottom: 30px;
}
.section-title {
    background: #1E3A5F;
    color: white;
    padding: 12px 20px;
    border-radius: 6px;
    margin-bottom: 15px;
    font-size: 16px;
}
.audit-execute-question {
    background: white;
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 15px;
}
.question-header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 15px;
}
.question-number {
    background: #1E3A5F;
    color: white;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: bold;
    flex-shrink: 0;
}
.question-text {
    font-size: 15px;
    font-weight: 500;
    flex: 1;
}
.question-weight {
    background: #E0E7FF;
    color: #3730A3;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 11px;
}

/* Rating Input */
.rating-input {
    margin: 10px 0;
}
.rating-scale {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.rating-option {
    cursor: pointer;
}
.rating-option input {
    display: none;
}
.rating-option span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 2px solid #ddd;
    border-radius: 8px;
    font-weight: bold;
    transition: all 0.2s;
}
.rating-option:hover span {
    border-color: #1E3A5F;
    background: #f0f4f8;
}
.rating-option input:checked + span {
    background: #1E3A5F;
    color: white;
    border-color: #1E3A5F;
}
.rating-labels {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: #888;
    margin-top: 8px;
}

/* Yes/No Input */
.yes-no-input {
    display: flex;
    gap: 15px;
}
.yes-no-option {
    cursor: pointer;
}
.yes-no-option input {
    display: none;
}
.yes-no-option span {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 25px;
    border: 2px solid #ddd;
    border-radius: 8px;
    font-weight: 500;
    transition: all 0.2s;
}
.yes-no-option:hover span {
    border-color: #1E3A5F;
}
.yes-no-option input:checked + span.yes {
    background: #D1FAE5;
    border-color: #059669;
    color: #065F46;
}
.yes-no-option input:checked + span.no {
    background: #FEE2E2;
    border-color: #DC2626;
    color: #991B1B;
}

/* Multiple Choice */
.multiple-choice-input {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.choice-option {
    cursor: pointer;
}
.choice-option input {
    display: none;
}
.choice-option span {
    display: block;
    padding: 12px 15px;
    border: 2px solid #ddd;
    border-radius: 6px;
    transition: all 0.2s;
}
.choice-option:hover span {
    border-color: #1E3A5F;
}
.choice-option input:checked + span {
    background: #1E3A5F;
    color: white;
    border-color: #1E3A5F;
}

/* Comment and Photo */
.question-comment, .question-photo {
    margin-top: 15px;
}
.question-comment label, .question-photo label {
    display: block;
    font-size: 13px;
    color: #666;
    margin-bottom: 5px;
}
.question-comment textarea {
    width: 100%;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 10px;
    font-size: 14px;
}
.photo-upload-area {
    position: relative;
}
.photo-upload-area input[type="file"] {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
}
.photo-preview {
    border: 2px dashed #ddd;
    border-radius: 8px;
    padding: 30px;
    text-align: center;
    color: #999;
    background: #fafafa;
    min-height: 120px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.photo-preview i {
    font-size: 32px;
}
.photo-preview img {
    max-width: 200px;
    max-height: 150px;
    border-radius: 6px;
}

.audit-notes {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #eee;
}
.audit-notes label {
    display: block;
    font-weight: 500;
    margin-bottom: 8px;
}
.audit-notes textarea {
    width: 100%;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 12px;
}

.audit-bottom-actions {
    display: flex;
    justify-content: space-between;
    padding: 20px;
    background: #f5f5f5;
    border-radius: 8px;
    margin-top: 20px;
}

/* Audit View Modal */
.audit-view-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 25px;
    padding-bottom: 20px;
    border-bottom: 2px solid #1E3A5F;
}
.audit-view-info p {
    margin: 5px 0;
}
.audit-view-score {
    text-align: center;
    padding: 15px 25px;
    border-radius: 8px;
}
.audit-view-score .score-value {
    font-size: 32px;
    font-weight: bold;
}
.audit-view-score .score-label {
    font-size: 12px;
    opacity: 0.8;
}
.audit-view-section {
    margin-bottom: 20px;
}
.audit-view-section h5 {
    background: #f5f5f5;
    padding: 10px 15px;
    border-left: 4px solid #1E3A5F;
    margin-bottom: 15px;
}
.audit-view-item {
    padding: 12px 15px;
    border-bottom: 1px solid #eee;
}
.audit-view-question {
    font-weight: 500;
    margin-bottom: 8px;
}
.audit-view-answer .answer-comment {
    font-style: italic;
    color: #666;
    margin-top: 5px;
    font-size: 13px;
}
.audit-view-answer .answer-photo {
    max-width: 150px;
    margin-top: 10px;
    border-radius: 4px;
    cursor: pointer;
}
.rating-display {
    background: #1E3A5F;
    color: white;
    padding: 3px 10px;
    border-radius: 4px;
    font-weight: bold;
}

/* Response type selector */
.response-type-selector { display: flex; gap: 15px; margin: 10px 0; }
.response-type-option { flex: 1; cursor: pointer; }
.response-type-option input { display: none; }
.response-type-card { border: 2px solid #ddd; border-radius: 8px; padding: 15px; text-align: center; transition: all 0.2s; }
.response-type-card i { font-size: 24px; color: #666; display: block; margin-bottom: 8px; }
.response-type-card span { display: block; font-weight: 600; color: #333; }
.response-type-card small { color: #999; font-size: 11px; }
.response-type-option input:checked + .response-type-card { border-color: #1E3A5F; background: #f8fafc; }
.response-type-option input:checked + .response-type-card i { color: #1E3A5F; }

/* Yes/No/NA buttons */
.yesno-buttons { display: flex; gap: 10px; flex-wrap: wrap; }
.yesno-option { display: flex; align-items: center; gap: 8px; padding: 10px 20px; border: 2px solid #ddd; border-radius: 8px; cursor: pointer; transition: all 0.2s; font-weight: 500; }
.yesno-option input { display: none; }
.yesno-option i { font-size: 16px; }
.yesno-option:hover { border-color: #999; }
.yesno-yes.selected, .yesno-option:has(input[value="yes"]:checked) { border-color: #28a745; background: #d4edda; color: #155724; }
.yesno-no.selected, .yesno-option:has(input[value="no"]:checked) { border-color: #dc3545; background: #f8d7da; color: #721c24; }
.yesno-na.selected, .yesno-option:has(input[value="na"]:checked) { border-color: #6c757d; background: #e9ecef; color: #495057; }


/* Choice options */
.choice-options { display: flex; flex-direction: column; gap: 8px; }
.choice-option { display: flex; align-items: center; gap: 10px; padding: 12px 15px; border: 2px solid #ddd; border-radius: 8px; cursor: pointer; transition: all 0.2s; }
.choice-option input { display: none; }
.choice-option .choice-text { font-weight: 500; }
.choice-option:hover { border-color: #999; background: #f9f9f9; }
.choice-option.selected, .choice-option:has(input:checked) { border-color: #1E3A5F; background: #f0f4f8; }
.choice-option:has(input:checked)::before { content: "✓"; color: #1E3A5F; font-weight: bold; margin-right: 5px; }
.choice-options.multiple .choice-option:has(input:checked)::before { content: "☑"; }
.choice-options.single .choice-option:has(input:checked)::before { content: "◉"; }


/* Settings button in header */
.btn-settings { transition: transform 0.3s ease; }
.btn-settings:hover { transform: rotate(90deg); }
.btn-settings.active { color: #1E3A5F; background: #e9ecef; }


/* ==================== CLOSURES MODULE ==================== */
.closure-status-bar { display: flex; align-items: center; gap: 15px; padding: 10px 15px; background: #f8f9fa; border-radius: 8px; margin-bottom: 20px; }
.closure-document-section { background: #f8f9fa; border-radius: 8px; padding: 15px; margin-bottom: 15px; border-left: 4px solid #1E3A5F; }
.closure-document-section h5 { margin: 0 0 15px 0; color: #1E3A5F; }
.closure-fields { margin-top: 15px; padding-top: 15px; border-top: 1px solid #ddd; }
.closure-config-container { max-height: 70vh; overflow-y: auto; }
.closure-config-doc { border: 1px solid #ddd; }
.closure-config-doc .card-header { background: #f8f9fa; padding: 10px 15px; }
.closure-config-doc-header { display: flex; align-items: center; gap: 10px; }
.closure-config-field { display: flex; align-items: center; gap: 10px; }
.closure-config-field .form-group { margin-bottom: 0; }
.input-group { display: flex; align-items: center; }
.input-group input { border-radius: 4px 0 0 4px; }
.input-suffix { background: #e9ecef; border: 1px solid #ced4da; border-left: none; padding: 8px 12px; border-radius: 0 4px 4px 0; color: #666; }

/* Disabled button style */
.btn-disabled, .btn:disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; }

/* ==================== RGPD MODULE ==================== */
.rgpd-info-banner { display: flex; gap: 15px; padding: 20px; background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%); border-radius: 8px; margin-bottom: 25px; border-left: 4px solid #1976d2; }
.rgpd-info-banner i { font-size: 2rem; color: #1976d2; flex-shrink: 0; }
.rgpd-info-banner strong { color: #1565c0; }
.rgpd-info-banner p { margin: 5px 0 0 0; color: #555; }

.consent-intro { text-align: center; padding: 20px 0; }
.consent-intro i { color: #1976d2; }
.consent-intro h4 { margin: 15px 0 10px 0; }

.consent-item { padding: 15px; background: #f8f9fa; border-radius: 8px; margin-bottom: 15px; border-left: 3px solid #ddd; }
.consent-item.required { border-left-color: #dc3545; }
.consent-item .checkbox-label { font-size: 1rem; }
.consent-item p { margin: 8px 0 0 20px; }

.legal-content { max-height: 60vh; overflow-y: auto; padding-right: 15px; }
.legal-content h4 { color: #1E3A5F; margin-top: 25px; margin-bottom: 10px; padding-bottom: 5px; border-bottom: 1px solid #eee; }
.legal-content h4:first-child { margin-top: 0; }
.legal-content ul { margin: 10px 0; padding-left: 25px; }
.legal-content li { margin-bottom: 5px; }

.rgpd-actions { padding-top: 15px; border-top: 1px solid #eee; }
.rgpd-actions h5 { margin-bottom: 15px; }
.btn-group-vertical { display: flex; flex-direction: column; gap: 10px; }
.btn-group-vertical .btn { justify-content: flex-start; text-align: left; }

.rgpd-request-detail .form-row { display: flex; gap: 20px; }
.rgpd-request-detail .form-group { flex: 1; }
.rgpd-request-detail label { font-weight: 600; color: #666; font-size: 0.85rem; text-transform: uppercase; }

.table-simple { width: 100%; }
.table-simple td { padding: 8px 0; border-bottom: 1px solid #eee; }
.table-simple tr:last-child td { border-bottom: none; }

/* Footer légal */
.footer-legal { position: fixed; bottom: 0; left: 0; right: 0; background: #f8f9fa; padding: 8px 20px; font-size: 0.8rem; text-align: center; border-top: 1px solid #ddd; z-index: 100; }
.footer-legal a { color: #666; margin: 0 10px; }
.footer-legal a:hover { color: #1E3A5F; }

/* ==================== DASHBOARD NEW SECTIONS ==================== */
.dashboard-welcome { margin-bottom: 25px; }
.dashboard-welcome h2 { margin: 0 0 5px 0; font-size: 1.8rem; color: #1E3A5F; }
.dashboard-welcome p { margin: 0; }

.dashboard-alerts { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
.dashboard-alerts .alert { display: flex; align-items: center; gap: 15px; margin: 0; }
.dashboard-alerts .alert i { font-size: 1.5rem; }
.dashboard-alerts .alert-content { flex: 1; }
.dashboard-alerts .alert-content strong { display: block; }

.card-alert { border-left: 4px solid #dc3545; }

/* Closures section */
.closure-alert { display: flex; align-items: center; gap: 15px; padding: 12px 15px; background: #fff3cd; border-radius: 8px; }
.closure-alert i { font-size: 1.2rem; }
.closure-alert span { flex: 1; }

.closures-mini-list { display: flex; flex-direction: column; gap: 10px; }
.closure-mini-item { display: flex; align-items: center; gap: 15px; padding: 10px 0; border-bottom: 1px solid #eee; }
.closure-mini-item:last-child { border-bottom: none; }
.closure-date { display: flex; align-items: center; gap: 5px; color: #666; min-width: 80px; }
.closure-hotel { flex: 1; font-weight: 500; }
.closure-amount { display: flex; gap: 10px; font-size: 0.9rem; }

.closure-summary { padding-top: 15px; border-top: 1px solid #eee; }
.summary-item { display: flex; justify-content: space-between; align-items: center; }
.summary-label { color: #666; }
.summary-value { font-size: 1.2rem; font-weight: 600; color: #28a745; }

/* Audit section */
.audit-summary { display: flex; gap: 20px; padding: 15px; background: #f8f9fa; border-radius: 8px; }
.audit-stat { text-align: center; flex: 1; }
.audit-stat-value { font-size: 1.5rem; font-weight: 700; color: #1E3A5F; }
.audit-stat-label { font-size: 0.8rem; color: #666; }

.audits-mini-list { display: flex; flex-direction: column; gap: 10px; margin-top: 15px; }
.audit-mini-item { display: flex; align-items: center; gap: 15px; padding: 10px 0; border-bottom: 1px solid #eee; }
.audit-mini-item:last-child { border-bottom: none; }
.audit-info { flex: 1; }
.audit-title { font-weight: 500; }
.audit-meta { font-size: 0.85rem; color: #666; }
.audit-score { font-weight: 700; padding: 5px 10px; border-radius: 4px; }
.audit-score.score-excellent { background: #d4edda; color: #155724; }
.audit-score.score-good { background: #fff3cd; color: #856404; }
.audit-score.score-average { background: #ffeeba; color: #856404; }
.audit-score.score-low { background: #f8d7da; color: #721c24; }

/* RGPD section */
.rgpd-summary { display: flex; gap: 20px; }
.rgpd-stat { flex: 1; text-align: center; padding: 15px; background: #f8f9fa; border-radius: 8px; }
.rgpd-stat i { font-size: 1.5rem; color: #1E3A5F; margin-bottom: 10px; display: block; }
.rgpd-stat-value { font-size: 1.5rem; font-weight: 700; color: #1E3A5F; }
.rgpd-stat-label { font-size: 0.8rem; color: #666; }
.rgpd-stat.has-pending { background: #fff3cd; }
.rgpd-stat.has-pending i { color: #856404; }

/* Tasks mini list */
.tasks-mini-list { display: flex; flex-direction: column; }
.task-mini-item { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid #eee; cursor: pointer; }
.task-mini-item:last-child { border-bottom: none; }
.task-mini-item:hover { background: #f8f9fa; margin: 0 -15px; padding: 10px 15px; }
.task-mini-item.overdue { background: #fff5f5; }
.task-priority { width: 4px; height: 30px; border-radius: 2px; }
.task-priority.priority-high { background: #dc3545; }
.task-priority.priority-medium { background: #ffc107; }
.task-priority.priority-low { background: #28a745; }
.task-content { flex: 1; }
.task-title { font-weight: 500; }
.task-meta { font-size: 0.85rem; color: #666; }

/* Quick actions colors */
.quick-action.red { color: #dc3545; }
.quick-action.red:hover { background: #fff5f5; }
.quick-action.indigo { color: #6610f2; }
.quick-action.indigo:hover { background: #f3e8ff; }

/* KPI red color */
.kpi-icon.red { background: linear-gradient(135deg, #dc3545, #c82333); }
.kpi-icon.indigo { background: linear-gradient(135deg, #6610f2, #5a0fc8); }

/* ==================== CLOSURES MODULE - REDESIGN ==================== */

/* Tabs */
.closure-tabs { display: flex; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; }
.closure-tab { display: flex; align-items: center; gap: 8px; padding: 12px 20px; background: #fff; border: 2px solid #e0e0e0; border-radius: 10px; font-weight: 500; color: #666; cursor: pointer; transition: all 0.2s ease; }
.closure-tab:hover { border-color: #1E3A5F; color: #1E3A5F; background: #f8f9fa; }
.closure-tab.active { background: #1E3A5F; border-color: #1E3A5F; color: #fff; }
.closure-tab i { font-size: 1rem; }
.closure-tab span { white-space: nowrap; }

/* Alert clôture en attente */
.closure-pending-alert { display: flex; align-items: center; gap: 20px; padding: 20px; background: linear-gradient(135deg, #fff3cd 0%, #ffeeba 100%); border-radius: 12px; margin-bottom: 20px; border-left: 5px solid #ffc107; }
.closure-pending-icon { width: 50px; height: 50px; background: #ffc107; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.closure-pending-icon i { font-size: 1.5rem; color: #856404; }
.closure-pending-content { flex: 1; }
.closure-pending-content strong { font-size: 1.1rem; color: #856404; }
.closure-pending-content p { margin: 5px 0 0 0; color: #856404; }
.closure-pending-alert .btn { flex-shrink: 0; }

/* Amélioration du tableau des clôtures */
.closures-table { width: 100%; }
.closures-table th { background: #f8f9fa; font-weight: 600; text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.5px; color: #666; padding: 12px 15px; border-bottom: 2px solid #e0e0e0; }
.closures-table td { padding: 15px; border-bottom: 1px solid #eee; vertical-align: middle; }
.closures-table tr:hover { background: #f8f9fa; }
.closures-table .date-cell { font-weight: 600; color: #1E3A5F; }
.closures-table .amount-positive { color: #28a745; font-weight: 500; }
.closures-table .amount-negative { color: #dc3545; font-weight: 500; }
.closures-table .amount-balance { font-weight: 700; color: #1E3A5F; }

/* Documents badge amélioré */
.docs-badge { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 20px; font-size: 0.85rem; font-weight: 500; }
.docs-badge.complete { background: #d4edda; color: #155724; }
.docs-badge.incomplete { background: #fff3cd; color: #856404; }
.docs-badge.empty { background: #f8d7da; color: #721c24; }

/* Actions buttons */
.closure-actions { display: flex; gap: 5px; }
.closure-actions .btn { padding: 8px 12px; }

/* ==================== SUIVI CAISSE MODULE ==================== */

/* Header avec filtres */
.cash-tracking-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; flex-wrap: wrap; gap: 15px; }
.cash-tracking-filters { display: flex; gap: 10px; align-items: center; }
.cash-tracking-filters select { min-width: 130px; }
.cash-tracking-actions { display: flex; gap: 10px; }

/* Stats grid */
.cash-stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 15px; margin-bottom: 20px; }
.cash-stat-card { display: flex; align-items: center; gap: 15px; padding: 20px; background: #fff; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.cash-stat-card.highlight { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: #fff; }
.cash-stat-card.highlight .cash-stat-icon { background: rgba(255,255,255,0.2); }
.cash-stat-card.highlight .cash-stat-label { color: rgba(255,255,255,0.8); }
.cash-stat-icon { width: 50px; height: 50px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.cash-stat-icon i { font-size: 1.3rem; color: #fff; }
.cash-stat-icon.green { background: linear-gradient(135deg, #28a745, #20c997); }
.cash-stat-icon.blue { background: linear-gradient(135deg, #007bff, #6f42c1); }
.cash-stat-icon.orange { background: linear-gradient(135deg, #fd7e14, #ffc107); }
.cash-stat-icon.red { background: linear-gradient(135deg, #dc3545, #e83e8c); }
.cash-stat-icon.purple { background: linear-gradient(135deg, #6f42c1, #e83e8c); }
.cash-stat-value { font-size: 1.4rem; font-weight: 700; }
.cash-stat-label { font-size: 0.8rem; color: #666; }

/* Cash table style Excel */
.cash-table { border-collapse: collapse; width: 100%; font-size: 0.9rem; }
.cash-table th { background: #1E3A5F; color: #fff; padding: 12px 10px; text-align: center; font-weight: 600; font-size: 0.8rem; text-transform: uppercase; border: 1px solid #16304d; }
.cash-table th.col-decaissement-header { background: #c0392b; }
.cash-table th.col-sub { background: #e74c3c; font-size: 0.75rem; }
.cash-table td { padding: 10px; border: 1px solid #e0e0e0; text-align: center; }
.cash-table .date-cell { text-align: left; font-weight: 500; white-space: nowrap; }
.cash-table .comment-cell { text-align: left; font-size: 0.85rem; color: #666; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cash-table .amount-cell { font-family: 'Courier New', monospace; }
.cash-table .amount-cell.encaisse { color: #28a745; font-weight: 500; }
.cash-table .amount-cell.remise { color: #007bff; }
.cash-table .amount-cell.achats { color: #fd7e14; }
.cash-table .amount-cell.autres { color: #dc3545; }
.cash-table .amount-cell.total-decaisse { color: #c0392b; font-weight: 500; }
.cash-table .amount-cell.reste.positive { color: #28a745; font-weight: 600; }
.cash-table .amount-cell.reste.negative { color: #dc3545; font-weight: 600; }
.cash-table tr.row-previous-balance { background: #e8f4fd; }
.cash-table tr.row-previous-balance td { font-style: italic; }
.cash-table tr.row-totals { background: #f8f9fa; border-top: 3px solid #1E3A5F; }
.cash-table tr.row-totals td { font-weight: 600; }
.cash-table tr.row-negative { background: #fff5f5; }
.cash-table tr:hover:not(.row-totals):not(.row-previous-balance) { background: #f8f9fa; }

/* Form improvements */
.form-row.three-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }
@media (max-width: 768px) { .form-row.three-cols { grid-template-columns: 1fr; } }
.decaissement-total { display: flex; justify-content: flex-end; align-items: center; gap: 10px; padding: 10px 15px; background: #f8f9fa; border-radius: 8px; margin-top: 10px; }
.decaissement-total span { color: #666; }
.decaissement-total strong { font-size: 1.1rem; color: #dc3545; }

/* ==================== CASH TRACKING INLINE EDIT ==================== */

/* Cellules éditables */
.cash-table td.editable { cursor: pointer; position: relative; }
.cash-table td.editable:hover { background: #e3f2fd !important; }
.cash-table td.editable::after { content: '✎'; position: absolute; right: 5px; top: 50%; transform: translateY(-50%); font-size: 0.7rem; color: #999; opacity: 0; transition: opacity 0.2s; }
.cash-table td.editable:hover::after { opacity: 1; }

/* Input d'édition inline */
.cash-edit-input { width: 100%; padding: 5px 8px; border: 2px solid #007bff; border-radius: 4px; font-size: 0.9rem; text-align: center; }
.cash-edit-input.comment { text-align: left; }
.cash-edit-input:focus { outline: none; box-shadow: 0 0 0 3px rgba(0,123,255,0.2); }

/* Ligne sans données */
.cash-table tr.row-empty { opacity: 0.5; }
.cash-table tr.row-empty:hover { opacity: 1; }

/* Badges de permission */
.cash-permissions-info { display: flex; gap: 10px; margin-bottom: 15px; flex-wrap: wrap; }
.perm-badge { display: inline-flex; align-items: center; gap: 5px; padding: 5px 12px; border-radius: 20px; font-size: 0.8rem; font-weight: 500; }
.perm-badge.full { background: #d4edda; color: #155724; }
.perm-badge.partial { background: #fff3cd; color: #856404; }
.perm-badge.view { background: #e2e3e5; color: #383d41; }
.perm-badge i { font-size: 0.75rem; }

/* Actions cellule */
.cash-table .actions-cell { padding: 5px !important; }
.btn-xs { padding: 4px 8px; font-size: 0.75rem; }

/* Detail modal */
.cash-row-detail .detail-section { margin-bottom: 20px; }
.cash-row-detail .detail-section h5 { margin-bottom: 10px; color: #1E3A5F; border-bottom: 1px solid #eee; padding-bottom: 5px; }
.detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 15px; }
.detail-item { background: #f8f9fa; padding: 12px; border-radius: 8px; }
.detail-item .label { display: block; font-size: 0.75rem; color: #666; margin-bottom: 5px; }
.detail-item .value { font-size: 1.1rem; font-weight: 600; }
.history-list { max-height: 200px; overflow-y: auto; }
.history-item { display: flex; gap: 10px; padding: 8px; border-bottom: 1px solid #eee; font-size: 0.85rem; }
.history-date { color: #666; min-width: 120px; }
.history-user { font-weight: 500; min-width: 100px; }
.history-action { color: #333; }

/* Input error state */
.input-error { border-color: #dc3545 !important; animation: shake 0.3s ease-in-out; }
@keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }

/* Clickable rows in cash tracking */
.clickable-row { cursor: pointer; transition: background-color 0.2s; }
.clickable-row:hover { background-color: #e3f2fd !important; }
.clickable-row:hover td { background-color: #e3f2fd !important; }

/* Summary card orange */
.summary-card .summary-icon.orange { background: linear-gradient(135deg, #f39c12 0%, #d68910 100%); }


/* ==================== DOCUMENT UPLOAD CARDS ==================== */
.documents-upload-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}

.document-upload-card {
    background: #fff;
    border: 2px solid #e0e0e0;
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.document-upload-card:hover {
    border-color: #1E3A5F;
    box-shadow: 0 4px 15px rgba(30, 58, 95, 0.1);
}

.document-upload-card.required {
    border-color: #e74c3c;
    border-left-width: 4px;
}

.document-upload-card.has-file,
.document-upload-card.file-selected {
    border-color: #27ae60;
    background: linear-gradient(135deg, #f0fff4 0%, #fff 100%);
}

.document-upload-card.drag-over {
    border-color: #3498db;
    background: linear-gradient(135deg, #ebf5fb 0%, #fff 100%);
    transform: scale(1.02);
}

.document-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px;
    background: #f8f9fa;
    border-bottom: 1px solid #e0e0e0;
}

.document-icon {
    font-size: 1.8rem;
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.document-title {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.document-name {
    font-weight: 600;
    color: #1E3A5F;
    font-size: 0.95rem;
}

.document-required {
    font-size: 0.75rem;
    color: #e74c3c;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.document-optional {
    font-size: 0.75rem;
    color: #7f8c8d;
    font-style: italic;
}

.document-card-body {
    padding: 15px;
    min-height: 120px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Dropzone */
.document-dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    border: 2px dashed #bdc3c7;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    background: #fafafa;
    min-height: 100px;
}

.document-dropzone:hover {
    border-color: #3498db;
    background: #f0f8ff;
}

.dropzone-icon {
    font-size: 2rem;
    color: #bdc3c7;
    margin-bottom: 10px;
    transition: all 0.3s ease;
}

.document-dropzone:hover .dropzone-icon {
    color: #3498db;
    transform: translateY(-3px);
}

.dropzone-text {
    text-align: center;
}

.dropzone-main {
    display: block;
    font-weight: 500;
    color: #555;
    margin-bottom: 4px;
}

.dropzone-sub {
    display: block;
    font-size: 0.8rem;
    color: #999;
}

.dropzone-formats {
    margin-top: 10px;
    font-size: 0.7rem;
    color: #999;
    background: #f0f0f0;
    padding: 4px 10px;
    border-radius: 20px;
}

/* Hidden file input */
.file-input-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
}

/* Selected file display */
.document-selected {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 15px;
    background: linear-gradient(135deg, #27ae60 0%, #2ecc71 100%);
    border-radius: 10px;
    color: #fff;
}

.selected-file {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
}

.selected-file i {
    font-size: 1.2rem;
}

.selected-filename {
    font-size: 0.85rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.btn-remove-file {
    background: rgba(255,255,255,0.2);
    border: none;
    color: #fff;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    flex-shrink: 0;
}

.btn-remove-file:hover {
    background: rgba(255,255,255,0.4);
    transform: scale(1.1);
}

/* Existing document preview */
.document-preview {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px;
    background: linear-gradient(135deg, #e8f5e9 0%, #f1f8e9 100%);
    border-radius: 10px;
    margin-bottom: 10px;
}

.preview-icon {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
}

.preview-icon.success {
    background: #27ae60;
    color: #fff;
}

.preview-info {
    flex: 1;
}

.preview-status {
    display: block;
    font-weight: 600;
    color: #27ae60;
    margin-bottom: 4px;
}

.preview-link {
    font-size: 0.85rem;
    color: #1E3A5F;
    text-decoration: none;
}

.preview-link:hover {
    text-decoration: underline;
}

.document-replace {
    text-align: center;
}

.replace-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: #f8f9fa;
    border: 1px solid #ddd;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.85rem;
    color: #666;
    transition: all 0.2s;
}

.replace-label:hover {
    background: #e9ecef;
    border-color: #1E3A5F;
    color: #1E3A5F;
}

/* Single upload card (expense receipt) */
.document-upload-card.single-upload {
    max-width: 500px;
}

.document-conditional {
    font-size: 0.75rem;
    color: #e67e22;
    font-weight: 500;
}

/* Badge in card header */
.card-header .badge {
    margin-left: auto;
}

.badge-warning {
    background: linear-gradient(135deg, #f39c12 0%, #e67e22 100%);
    color: #fff;
}

/* ==================== LEAVE TYPE SELECTOR ==================== */
.leave-type-selector {
    margin-bottom: 20px;
}

.leave-type-label {
    display: block;
    font-weight: 600;
    color: #333;
    margin-bottom: 12px;
}

.leave-type-cards {
    display: flex;
    gap: 15px;
}

.leave-type-card {
    flex: 1;
    padding: 20px;
    border: 2px solid #e0e0e0;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
    background: #fff;
}

.leave-type-card:hover {
    border-color: #1E3A5F;
    box-shadow: 0 4px 15px rgba(30, 58, 95, 0.1);
}

.leave-type-card.selected {
    border-color: #1E3A5F;
    background: linear-gradient(135deg, #f0f4f8 0%, #fff 100%);
    box-shadow: 0 4px 15px rgba(30, 58, 95, 0.15);
}

.leave-type-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 12px;
    font-size: 1.5rem;
    color: #fff;
}

.leave-type-name {
    display: block;
    font-weight: 600;
    color: #333;
    margin-bottom: 5px;
}

.leave-type-badge-required {
    display: inline-block;
    font-size: 0.7rem;
    color: #e74c3c;
    background: #ffeaea;
    padding: 3px 8px;
    border-radius: 10px;
    margin-top: 5px;
}

/* Upload zone for leaves */
.upload-zone {
    border: 2px dashed #bdc3c7;
    border-radius: 12px;
    padding: 30px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    background: #fafafa;
}

.upload-zone:hover {
    border-color: #3498db;
    background: #f0f8ff;
}

.upload-zone.drag-over {
    border-color: #27ae60;
    background: #f0fff4;
}

.upload-zone.has-file {
    border-color: #27ae60;
    border-style: solid;
    background: linear-gradient(135deg, #f0fff4 0%, #fff 100%);
}

.upload-zone-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.upload-icon {
    font-size: 3rem;
    color: #bdc3c7;
    transition: all 0.3s;
}

.upload-zone:hover .upload-icon {
    color: #3498db;
    transform: translateY(-5px);
}

.upload-text {
    text-align: center;
}

.upload-main {
    display: block;
    font-weight: 600;
    color: #333;
    margin-bottom: 5px;
}

.upload-sub {
    display: block;
    font-size: 0.85rem;
    color: #999;
}

.upload-formats {
    font-size: 0.75rem;
    color: #999;
    background: #f0f0f0;
    padding: 5px 15px;
    border-radius: 20px;
    margin-top: 10px;
}

.upload-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    padding: 15px;
    background: linear-gradient(135deg, #27ae60 0%, #2ecc71 100%);
    border-radius: 8px;
    color: #fff;
}

.upload-preview i {
    font-size: 2rem;
}

.upload-filename {
    font-weight: 500;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.btn-remove-upload {
    background: rgba(255,255,255,0.2);
    border: none;
    color: #fff;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-remove-upload:hover {
    background: rgba(255,255,255,0.4);
}

/* Leave info box */
.leave-info-box {
    background: #e8f4fd;
    border-left: 4px solid #3498db;
    padding: 12px 15px;
    border-radius: 0 8px 8px 0;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 20px 0;
    font-size: 0.9rem;
    color: #2980b9;
}

.leave-info-box.warning {
    background: #fef5e7;
    border-color: #f39c12;
    color: #b7791f;
}

.leave-info-box i {
    font-size: 1.2rem;
}

/* ==================== LEAVES HISTORY ==================== */
.history-filters {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 10px;
    margin-bottom: 20px;
}

.history-filters .filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    align-items: flex-end;
}

.history-filters .filter-group {
    flex: 1;
    min-width: 150px;
}

.history-filters .filter-group label {
    display: block;
    font-size: 0.8rem;
    color: #666;
    margin-bottom: 5px;
}

.history-filters .filter-group label i {
    margin-right: 5px;
}

.history-summary {
    margin-bottom: 20px;
}

.history-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 15px;
}

.stat-card {
    display: flex;
    align-items: center;
    gap: 15px;
    background: #fff;
    padding: 15px 20px;
    border-radius: 10px;
    border: 1px solid #e0e0e0;
}

.stat-icon {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    color: #fff;
}

.stat-icon.blue { background: linear-gradient(135deg, #3498db 0%, #2980b9 100%); }
.stat-icon.red { background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%); }
.stat-icon.green { background: linear-gradient(135deg, #27ae60 0%, #1e8449 100%); }
.stat-icon.orange { background: linear-gradient(135deg, #f39c12 0%, #d68910 100%); }

.stat-info {
    display: flex;
    flex-direction: column;
}

.stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1E3A5F;
}

.stat-label {
    font-size: 0.8rem;
    color: #666;
}

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

.history-table th {
    background: #1E3A5F;
    color: #fff;
    padding: 12px;
    text-align: left;
    font-size: 0.85rem;
    font-weight: 600;
}

.history-table td {
    padding: 12px;
    border-bottom: 1px solid #e0e0e0;
    vertical-align: middle;
}

.history-table tr:hover {
    background: #f8f9fa;
}

.history-table tr.row-maladie {
    background: #fff5f5;
}

.history-table tr.row-maladie:hover {
    background: #ffecec;
}

.employee-cell {
    display: flex;
    align-items: center;
    gap: 10px;
}

.employee-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1E3A5F 0%, #2c5282 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 600;
}

.employee-info {
    display: flex;
    flex-direction: column;
}

.employee-info strong {
    color: #333;
    font-size: 0.9rem;
}

.employee-info small {
    color: #999;
    font-size: 0.75rem;
}

.leave-type-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border-radius: 20px;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 500;
}

.history-table-container {
    overflow-x: auto;
}

@media (max-width: 768px) {
    .history-filters .filter-row {
        flex-direction: column;
    }
    
    .history-filters .filter-group {
        width: 100%;
    }
    
    .history-stats {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ==================== LEAVE HISTORY STYLES ==================== */
.my-leave-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 15px;
    padding: 20px;
    background: #f8f9fa;
    border-bottom: 1px solid #eee;
}

.my-leave-stats .stat-card {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fff;
    padding: 15px;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.my-leave-stats .stat-card .stat-icon {
    width: 45px;
    height: 45px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: #fff;
}

.my-leave-stats .stat-card.blue .stat-icon { background: linear-gradient(135deg, #3498db, #2980b9); }
.my-leave-stats .stat-card.red .stat-icon { background: linear-gradient(135deg, #e74c3c, #c0392b); }
.my-leave-stats .stat-card.orange .stat-icon { background: linear-gradient(135deg, #f39c12, #e67e22); }
.my-leave-stats .stat-card.green .stat-icon { background: linear-gradient(135deg, #27ae60, #2ecc71); }

.my-leave-stats .stat-info { display: flex; flex-direction: column; }
.my-leave-stats .stat-value { font-size: 1.5rem; font-weight: 700; color: #333; }
.my-leave-stats .stat-label { font-size: 0.8rem; color: #666; }

.my-history-filters {
    display: flex;
    gap: 10px;
    padding: 15px 20px;
    background: #f8f9fa;
    flex-wrap: wrap;
}

.my-history-filters .filter-group {
    flex: 1;
    min-width: 150px;
}

.my-history-filters select {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 0.9rem;
}

.my-history-list {
    padding: 20px;
}

.history-year-group {
    margin-bottom: 25px;
}

.history-year-header {
    font-size: 1.1rem;
    color: #1E3A5F;
    margin-bottom: 15px;
    padding-bottom: 8px;
    border-bottom: 2px solid #1E3A5F;
    display: flex;
    align-items: center;
    gap: 8px;
}

.history-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 15px;
}

.history-card {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s;
}

.history-card:hover {
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    transform: translateY(-2px);
}

.history-card.approved { border-left: 4px solid #27ae60; }
.history-card.rejected { border-left: 4px solid #e74c3c; }
.history-card.pending { border-left: 4px solid #f39c12; }

.history-card.maladie { background: linear-gradient(135deg, #fff 0%, #fff5f5 100%); }

.history-card-header {
    padding: 12px 15px;
    background: #f8f9fa;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.leave-type-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 15px;
    font-size: 0.8rem;
    font-weight: 500;
    color: #fff;
}

.leave-type-pill.cp { background: #3498db; }
.leave-type-pill.maladie { background: #e74c3c; }

.history-card-body {
    padding: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.history-dates {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #555;
}

.history-dates i { color: #1E3A5F; }

.history-days {
    background: #f0f0f0;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.9rem;
}

.history-card-footer {
    padding: 10px 15px;
    background: #fafafa;
    border-top: 1px solid #eee;
    font-size: 0.85rem;
}

.rejection-reason {
    margin-top: 8px;
    padding: 8px 10px;
    background: #ffeaea;
    border-radius: 6px;
    color: #c0392b;
}

.approval-comment {
    margin-top: 8px;
    padding: 8px 10px;
    background: #e8f8f0;
    border-radius: 6px;
    color: #27ae60;
}

.history-card-attachment {
    padding: 10px 15px;
    border-top: 1px solid #eee;
}

/* Row maladie pour tableau */
.row-maladie {
    background: linear-gradient(135deg, #fff 0%, #fff8f8 100%) !important;
}

/* History stats grid */
.history-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 15px;
    margin-bottom: 20px;
}

.history-stats .stat-card {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fff;
    padding: 15px;
    border-radius: 10px;
    border: 1px solid #eee;
}

.history-stats .stat-card .stat-icon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}

.history-stats .stat-icon.blue { background: linear-gradient(135deg, #3498db, #2980b9); }
.history-stats .stat-icon.red { background: linear-gradient(135deg, #e74c3c, #c0392b); }
.history-stats .stat-icon.green { background: linear-gradient(135deg, #27ae60, #2ecc71); }
.history-stats .stat-icon.orange { background: linear-gradient(135deg, #f39c12, #e67e22); }

/* Employee cell in table */
.employee-cell {
    display: flex;
    align-items: center;
    gap: 10px;
}

.employee-avatar {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1E3A5F, #2c5282);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 600;
}

.employee-info {
    display: flex;
    flex-direction: column;
}

.employee-info small {
    color: #666;
    font-size: 0.75rem;
}

/* History table container */
.history-table-container {
    max-height: 500px;
    overflow-y: auto;
}

.history-table th {
    position: sticky;
    top: 0;
    background: #f8f9fa;
    z-index: 1;
}

/* ==================== PHOTO UPLOAD ZONE ==================== */
.photo-upload-zone {
    border: 2px dashed #bdc3c7;
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    background: #fafafa;
    min-height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.photo-upload-zone:hover {
    border-color: #3498db;
    background: #f0f8ff;
}

.photo-upload-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: #999;
}

.photo-upload-content i {
    font-size: 2.5rem;
    color: #bdc3c7;
}

.photo-upload-content span {
    font-weight: 500;
    color: #666;
}

.photo-upload-content small {
    font-size: 0.8rem;
    color: #aaa;
}

.photo-preview {
    position: relative;
    max-width: 200px;
}

.photo-preview img {
    max-width: 100%;
    max-height: 150px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.btn-remove-photo {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #e74c3c;
    color: #fff;
    border: 2px solid #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    transition: transform 0.2s;
}

.btn-remove-photo:hover {
    transform: scale(1.1);
}

/* ==================== BLOCKED ROOMS STYLES ==================== */
.blocked-rooms-summary {
    background: linear-gradient(135deg, #fff 0%, #fef9f9 100%);
}

.blocked-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 15px;
    padding: 20px;
}

.blocked-stat-card {
    display: flex;
    align-items: center;
    gap: 15px;
    background: #fff;
    padding: 15px 20px;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    border: 1px solid #eee;
}

.blocked-stat-icon {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    color: #fff;
}

.blocked-stat-icon.red { background: linear-gradient(135deg, #e74c3c, #c0392b); }
.blocked-stat-icon.orange { background: linear-gradient(135deg, #f39c12, #e67e22); }
.blocked-stat-icon.blue { background: linear-gradient(135deg, #3498db, #2980b9); }
.blocked-stat-icon.green { background: linear-gradient(135deg, #27ae60, #2ecc71); }

.blocked-stat-info { display: flex; flex-direction: column; }
.blocked-stat-value { font-size: 1.6rem; font-weight: 700; color: #333; }
.blocked-stat-label { font-size: 0.8rem; color: #666; }

/* Barre de disponibilité */
.availability-bar {
    height: 12px;
    background: #eee;
    border-radius: 6px;
    margin: 0 20px 10px;
    display: flex;
    overflow: hidden;
}

.availability-fill {
    background: linear-gradient(90deg, #27ae60, #2ecc71);
    transition: width 0.5s ease;
}

.availability-blocked {
    background: linear-gradient(90deg, #e74c3c, #c0392b);
    transition: width 0.5s ease;
}

.availability-legend {
    display: flex;
    justify-content: center;
    gap: 30px;
    padding: 0 20px 15px;
    font-size: 0.85rem;
    color: #666;
}

.availability-legend span { display: flex; align-items: center; gap: 5px; }

/* Filtres chambres bloquées */
.blocked-rooms-filters {
    padding: 15px 20px;
    background: #f8f9fa;
    border-bottom: 1px solid #eee;
}

.blocked-rooms-filters .filter-row {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.blocked-rooms-filters .filter-group {
    flex: 1;
    min-width: 150px;
}

.blocked-rooms-filters .filter-group label {
    display: block;
    font-size: 0.8rem;
    color: #666;
    margin-bottom: 5px;
}

/* KPIs d'analyse */
.blocked-analysis-kpis {
    padding: 20px;
}

.analysis-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 15px;
    margin-bottom: 15px;
}

.analysis-kpi {
    text-align: center;
    padding: 15px 10px;
    background: #f8f9fa;
    border-radius: 10px;
    border: 1px solid #eee;
}

.analysis-kpi.highlight {
    background: linear-gradient(135deg, #fff5f5 0%, #fee 100%);
    border-color: #e74c3c;
}

.analysis-kpi-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1E3A5F;
}

.analysis-kpi.highlight .analysis-kpi-value {
    color: #e74c3c;
}

.analysis-kpi-label {
    font-size: 0.75rem;
    color: #666;
    margin-top: 3px;
}

/* Table chambres bloquées */
.blocked-rooms-table-container {
    max-height: 500px;
    overflow-y: auto;
}

.blocked-rooms-table th {
    position: sticky;
    top: 0;
    background: #1E3A5F;
    color: #fff;
    z-index: 1;
}

.row-blocked {
    background: linear-gradient(135deg, #fff 0%, #fff5f5 100%) !important;
}

.days-badge {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 600;
    background: #e8f4fc;
    color: #3498db;
}

.days-badge.warning {
    background: #fff3cd;
    color: #856404;
}

.days-badge.critical {
    background: #f8d7da;
    color: #721c24;
}

/* Checkbox chambre bloquée */
.room-blocked-checkbox {
    background: #fff8e6;
    border: 1px solid #f0c36d;
    border-radius: 10px;
    padding: 15px;
}

.checkbox-container {
    display: flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
}

.checkbox-container input[type="checkbox"] {
    width: 20px;
    height: 20px;
    margin-right: 10px;
    cursor: pointer;
}

.checkbox-label {
    font-weight: 500;
    color: #856404;
}

.checkbox-label i {
    margin-right: 5px;
    color: #e74c3c;
}

.room-blocked-checkbox small {
    display: block;
    margin-top: 8px;
    margin-left: 30px;
}

/* =====================================================
   TASKS MODULE - Refonte Multi-hôtels, Membres, Pièces jointes
   ===================================================== */

/* Board cards - Hotels tags */
.board-hotels-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 5px;
}

.hotel-mini-tag {
    background: #E8F4FD;
    color: #1565C0;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 500;
}

.hotel-tag-sm {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 500;
}

.kanban-hotels {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 5px;
}

/* Members avatars */
.board-members-avatars {
    display: flex;
    align-items: center;
    margin-right: 15px;
}

.member-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1E3A5F 0%, #2c5282 100%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 600;
    margin-left: -8px;
    border: 2px solid white;
    cursor: default;
}

.member-avatar:first-child {
    margin-left: 0;
}

.member-avatar.more {
    background: #6B7280;
    font-size: 0.7rem;
}

/* Checkbox lists for members/hotels */
.checkbox-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 200px;
    overflow-y: auto;
    padding: 10px;
    background: #f8fafc;
    border-radius: 8px;
}

.checkbox-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: white;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.checkbox-item:hover {
    background: #f1f5f9;
}

.checkbox-item input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: #1E3A5F;
}

/* Members selector */
.members-selector {
    max-height: 300px;
    overflow-y: auto;
}

.members-checkbox-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.member-role-group {
    margin-bottom: 10px;
}

.role-header {
    font-weight: 600;
    color: #1E3A5F;
    padding: 5px 10px;
    background: #e2e8f0;
    border-radius: 4px;
    display: block;
    margin-bottom: 5px;
    font-size: 0.85rem;
}

.member-item {
    padding: 10px 12px;
}

.member-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.member-name {
    font-weight: 500;
    color: #1e293b;
}

.member-role {
    font-size: 0.75rem;
    color: #64748b;
}

.member-hotel {
    font-size: 0.75rem;
    color: #64748b;
}

/* Loading inline */
.loading-inline {
    padding: 20px;
    text-align: center;
    color: #64748b;
}

.loading-inline i {
    margin-right: 8px;
}

/* Assignees selector in task creation */
.assignees-selector {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px;
    background: #f8fafc;
    border-radius: 8px;
    max-height: 200px;
    overflow-y: auto;
}

.assignee-checkbox {
    display: flex;
    align-items: center;
    cursor: pointer;
}

.assignee-checkbox input[type="checkbox"] {
    display: none;
}

.assignee-chip {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: white;
    border: 2px solid #e2e8f0;
    border-radius: 20px;
    font-size: 0.85rem;
    transition: all 0.2s ease;
}

.assignee-checkbox input:checked + .assignee-chip {
    background: #1E3A5F;
    color: white;
    border-color: #1E3A5F;
}

.assignee-avatar-sm {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #667eea;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 600;
}

.assignee-checkbox input:checked + .assignee-chip .assignee-avatar-sm {
    background: white;
    color: #1E3A5F;
}

/* Task card assignees */
.task-assignees {
    display: flex;
    margin-top: 8px;
}

.task-assignees .assignee-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    font-weight: 600;
    margin-left: -6px;
    border: 2px solid white;
}

.task-assignees .assignee-avatar:first-child {
    margin-left: 0;
}

.task-assignees .assignee-avatar.more {
    background: #6B7280;
}

/* Attachments upload zone */
.attachments-upload-zone {
    border: 2px dashed #cbd5e1;
    border-radius: 8px;
    padding: 15px;
    background: #f8fafc;
    transition: all 0.2s ease;
}

.attachments-upload-zone:hover {
    border-color: #1E3A5F;
    background: #f1f5f9;
}

.upload-prompt {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    padding: 20px;
}

.upload-prompt i {
    font-size: 2rem;
    color: #94a3b8;
}

.upload-prompt span {
    color: #64748b;
    font-weight: 500;
}

.upload-prompt small {
    color: #94a3b8;
    font-size: 0.75rem;
}

.attachments-preview {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 10px;
}

.attachment-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: white;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
}

.attachment-item i {
    color: #1E3A5F;
}

.attachment-name {
    flex: 1;
    font-size: 0.85rem;
    color: #334155;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.attachment-size {
    font-size: 0.75rem;
    color: #94a3b8;
}

/* Task detail attachments */
.task-attachments-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 10px;
}

.task-attachment {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: #f8fafc;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
}

.task-attachment i {
    color: #1E3A5F;
    font-size: 1.1rem;
}

.attachment-link {
    flex: 1;
    color: #1E3A5F;
    text-decoration: none;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.attachment-link:hover {
    text-decoration: underline;
}

.add-attachment-inline {
    margin-top: 10px;
}

/* Multi-select assignees in task detail */
.assignees-multi-select {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 200px;
    overflow-y: auto;
}

.assignee-checkbox-sm {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    background: #f8fafc;
}

.assignee-checkbox-sm:hover {
    background: #e2e8f0;
}

.assignee-checkbox-sm.checked {
    background: #dbeafe;
}

.assignee-checkbox-sm input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: #1E3A5F;
}

/* Board settings tabs */
.tabs {
    display: flex;
    gap: 5px;
    margin-bottom: 20px;
    border-bottom: 2px solid #e2e8f0;
    padding-bottom: 10px;
}

.tab {
    padding: 8px 16px;
    background: none;
    border: none;
    color: #64748b;
    font-weight: 500;
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.tab:hover {
    background: #f1f5f9;
    color: #1E3A5F;
}

.tab.active {
    background: #1E3A5F;
    color: white;
}

.tab-content {
    padding: 10px 0;
}

/* Members management */
.members-management h4 {
    margin-bottom: 15px;
    color: #1e293b;
}

.current-members-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 300px;
    overflow-y: auto;
}

.member-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: #f8fafc;
    border-radius: 8px;
}

.member-row .member-avatar {
    margin-left: 0;
    width: 36px;
    height: 36px;
    font-size: 0.8rem;
}

.member-row .member-info {
    flex: 1;
}

.badge-primary {
    background: #1E3A5F;
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 500;
}

/* Form row */
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

@media (max-width: 600px) {
    .form-row {
        grid-template-columns: 1fr;
    }
}

/* =====================================================
   LINEN MODULE - Edit/Delete buttons
   ===================================================== */
.linen-quantities {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
}

.linen-qty-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 15px;
    background: #f8fafc;
    border-radius: 8px;
}

.linen-qty-row span {
    font-weight: 500;
    color: #334155;
}

.linen-qty-row input {
    width: 80px;
    text-align: center;
}

/* =====================================================
   LINEN MODULE - Modern Transaction Cards
   ===================================================== */
.bl-transactions-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
    max-height: 500px;
    overflow-y: auto;
    padding: 5px;
}

.bl-transaction-card {
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    padding: 15px 20px;
    transition: all 0.2s ease;
}

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

.bl-trans-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid #f1f5f9;
}

.bl-trans-date {
    font-weight: 600;
    color: #1e293b;
    display: flex;
    align-items: center;
    gap: 8px;
}

.bl-trans-date i {
    color: #64748b;
}

.bl-trans-header .badge {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    font-size: 0.85rem;
}

.bl-trans-body {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
}

.bl-trans-details {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    flex: 1;
}

.bl-detail-item {
    display: flex;
    flex-direction: column;
    background: #f8fafc;
    padding: 8px 15px;
    border-radius: 8px;
    min-width: 100px;
}

.bl-detail-label {
    font-size: 0.75rem;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.bl-detail-value {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1E3A5F;
}

.bl-trans-meta {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-end;
    min-width: 120px;
}

.bl-trans-user {
    font-size: 0.85rem;
    color: #64748b;
    display: flex;
    align-items: center;
    gap: 6px;
}

.bl-trans-doc {
    font-size: 0.85rem;
    color: #1E3A5F;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: #e8f4fd;
    border-radius: 6px;
    transition: all 0.2s;
}

.bl-trans-doc:hover {
    background: #1E3A5F;
    color: white;
}

.bl-trans-actions {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #f1f5f9;
    justify-content: flex-end;
}

.bl-trans-actions .btn {
    padding: 6px 12px;
}

@media (max-width: 768px) {
    .bl-trans-body {
        flex-direction: column;
    }
    
    .bl-trans-meta {
        flex-direction: row;
        align-items: center;
        width: 100%;
        justify-content: space-between;
        margin-top: 10px;
        padding-top: 10px;
        border-top: 1px dashed #e2e8f0;
    }
    
    .bl-trans-details {
        width: 100%;
    }
    
    .bl-detail-item {
        flex: 1;
        min-width: calc(50% - 10px);
    }
}

/* =====================================================
   MAINTENANCE - Delete button styling
   ===================================================== */
.table-actions .btn-delete {
    color: #dc2626;
}

.table-actions .btn-delete:hover {
    background: #fef2f2;
    color: #b91c1c;
}

/* =====================================================
   TASK DETAIL - Modern Redesign
   ===================================================== */
.task-detail {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 25px;
    min-height: 400px;
}

.task-detail-main {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.task-detail-section {
    background: #f8fafc;
    border-radius: 12px;
    padding: 16px;
}

.task-detail-section > label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 12px;
    font-size: 0.9rem;
}

.task-detail-section > label i {
    color: #64748b;
}

.task-description-box {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 12px 15px;
    min-height: 80px;
    cursor: pointer;
    transition: all 0.2s;
    line-height: 1.6;
}

.task-description-box:hover {
    border-color: #1E3A5F;
    box-shadow: 0 0 0 3px rgba(30, 58, 95, 0.1);
}

/* Attachments */
.task-attachments-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 10px;
}

.task-attachment {
    display: flex;
    align-items: center;
    gap: 10px;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 10px 12px;
    transition: all 0.2s;
}

.task-attachment:hover {
    background: #f1f5f9;
}

.task-attachment i {
    color: #64748b;
    font-size: 1.1rem;
}

.task-attachment .attachment-link {
    flex: 1;
    color: #1E3A5F;
    text-decoration: none;
    font-weight: 500;
}

.task-attachment .attachment-link:hover {
    text-decoration: underline;
}

.task-attachment .attachment-size {
    font-size: 0.8rem;
    color: #94a3b8;
}

.task-attachment .btn-icon {
    color: #94a3b8;
    padding: 4px;
}

.task-attachment .btn-icon:hover {
    color: #ef4444;
    background: #fef2f2;
}

.add-attachment-inline .btn {
    background: white;
    border: 1px dashed #cbd5e1;
    color: #64748b;
}

.add-attachment-inline .btn:hover {
    border-color: #1E3A5F;
    color: #1E3A5F;
    background: #f0f7ff;
}

/* Checklist */
.checklist-progress {
    background: #e2e8f0;
    height: 6px;
    border-radius: 3px;
    margin-bottom: 12px;
    overflow: hidden;
}

.checklist-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, #10B981, #34D399);
    border-radius: 3px;
    transition: width 0.3s ease;
}

.checklist-items {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 12px;
}

.checklist-item {
    display: flex;
    align-items: center;
    gap: 10px;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 10px 12px;
}

.checklist-item input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: #10B981;
}

.checklist-item span {
    flex: 1;
}

.checklist-item span.checked {
    text-decoration: line-through;
    color: #94a3b8;
}

.checklist-item .btn-icon {
    opacity: 0;
    transition: opacity 0.2s;
}

.checklist-item:hover .btn-icon {
    opacity: 1;
}

.checklist-add {
    display: flex;
    gap: 8px;
}

.checklist-add input {
    flex: 1;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 0.9rem;
}

.checklist-add input:focus {
    outline: none;
    border-color: #1E3A5F;
    box-shadow: 0 0 0 3px rgba(30, 58, 95, 0.1);
}

.checklist-add .btn {
    padding: 10px 16px;
    background: #1E3A5F;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.checklist-add .btn:hover {
    background: #2d5a8a;
}

.checklist-add .btn i {
    font-size: 0.9rem;
}

/* Comments */
.task-comments {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: 200px;
    overflow-y: auto;
    margin-bottom: 12px;
}

.task-comment {
    display: flex;
    gap: 12px;
}

.comment-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1E3A5F, #2d5a8a);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.9rem;
    flex-shrink: 0;
}

.comment-content {
    flex: 1;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 10px 14px;
}

.comment-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}

.comment-header strong {
    color: #1e293b;
    font-size: 0.85rem;
}

.comment-header .text-muted {
    font-size: 0.75rem;
}

.comment-content p {
    margin: 0;
    color: #475569;
    line-height: 1.5;
}

.comment-form {
    display: flex;
    gap: 10px;
    align-items: flex-end;
}

.comment-form textarea {
    flex: 1;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 10px 14px;
    resize: none;
    font-size: 0.9rem;
}

.comment-form textarea:focus {
    outline: none;
    border-color: #1E3A5F;
    box-shadow: 0 0 0 3px rgba(30, 58, 95, 0.1);
}

.comment-form .btn {
    padding: 12px 16px;
    border-radius: 10px;
    background: #1E3A5F;
    color: white;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.comment-form .btn:hover {
    background: #2d5a8a;
}

.comment-form .btn i {
    font-size: 1rem;
}

/* Sidebar */
.task-detail-sidebar {
    display: flex;
    flex-direction: column;
    gap: 16px;
    background: #f8fafc;
    border-radius: 12px;
    padding: 16px;
    height: fit-content;
}

.task-detail-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.task-detail-field > label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: #64748b;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.task-detail-field select,
.task-detail-field input[type="date"] {
    padding: 10px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: white;
    font-size: 0.9rem;
    cursor: pointer;
}

.task-detail-field select:hover,
.task-detail-field input[type="date"]:hover {
    border-color: #1E3A5F;
}

/* Assignees selector in sidebar */
.assignees-multi-select {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 180px;
    overflow-y: auto;
}

.assignee-checkbox-sm {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.assignee-checkbox-sm:hover {
    background: #f1f5f9;
}

.assignee-checkbox-sm.checked {
    background: #e0f2fe;
    border-color: #0ea5e9;
}

.assignee-checkbox-sm input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: #0ea5e9;
}

.assignee-avatar-sm {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1E3A5F, #2d5a8a);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.8rem;
}

.assignee-checkbox-sm.checked .assignee-avatar-sm {
    background: linear-gradient(135deg, #0ea5e9, #38bdf8);
}

.assignee-checkbox-sm span:last-child {
    flex: 1;
    font-size: 0.9rem;
    color: #334155;
}

/* Status button */
.task-detail-field .btn-block {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px;
    border-radius: 8px;
    font-weight: 500;
    transition: all 0.2s;
}

.task-detail-field .btn-outline {
    background: white;
    border: 2px solid #e2e8f0;
    color: #64748b;
}

.task-detail-field .btn-outline:hover {
    border-color: #10B981;
    color: #10B981;
    background: #f0fdf4;
}

.task-detail-field .btn-success {
    background: #10B981;
    border: 2px solid #10B981;
    color: white;
}

.task-detail-field .btn-success:hover {
    background: #059669;
    border-color: #059669;
}

.task-detail-sidebar hr {
    border: none;
    border-top: 1px solid #e2e8f0;
    margin: 4px 0;
}

.task-detail-info {
    text-align: center;
    color: #94a3b8;
}

.task-detail-info small {
    line-height: 1.6;
}

.task-detail-sidebar .btn-danger {
    background: white;
    border: 1px solid #fecaca;
    color: #dc2626;
    margin-top: 8px;
}

.task-detail-sidebar .btn-danger:hover {
    background: #fef2f2;
    border-color: #dc2626;
}

/* Responsive */
@media (max-width: 768px) {
    .task-detail {
        grid-template-columns: 1fr;
    }
    
    .task-detail-sidebar {
        order: -1;
    }
    
    .assignees-multi-select {
        flex-direction: row;
        flex-wrap: wrap;
        max-height: none;
    }
    
    .assignee-checkbox-sm {
        flex: 0 0 auto;
    }
}

/* ==================== EVALUATIONS MODERN DESIGN ==================== */

.eval-list-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Header Card */
.eval-header-card {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
    border-radius: var(--radius);
    padding: 25px;
    color: white;
}

.eval-header-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 25px;
}

.eval-header-title h2 {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.eval-header-title h2 i {
    opacity: 0.8;
}

.eval-subtitle {
    opacity: 0.8;
    font-size: 14px;
}

.eval-header-card .btn-primary {
    background: white;
    color: var(--primary);
    border: none;
    font-weight: 600;
}

.eval-header-card .btn-primary:hover {
    background: var(--gray-100);
    transform: translateY(-2px);
}

/* Quick Stats */
.eval-quick-stats {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.eval-stat-card {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    border-radius: 12px;
    padding: 15px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 2px solid transparent;
    min-width: 140px;
}

.eval-stat-card:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: translateY(-2px);
}

.eval-stat-card.active {
    background: white;
    border-color: white;
}

.eval-stat-card.active .eval-stat-value,
.eval-stat-card.active .eval-stat-label {
    color: var(--primary);
}

.eval-stat-card.active .eval-stat-icon {
    background: var(--primary);
    color: white;
}

.eval-stat-icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.eval-stat-icon.total { background: rgba(255, 255, 255, 0.3); }
.eval-stat-icon.draft { background: rgba(251, 191, 36, 0.3); color: #FCD34D; }
.eval-stat-icon.validated { background: rgba(52, 211, 153, 0.3); color: #6EE7B7; }
.eval-stat-icon.archived { background: rgba(148, 163, 184, 0.3); color: #CBD5E1; }
.eval-stat-icon.score { background: rgba(139, 92, 246, 0.3); color: #C4B5FD; }

.eval-stat-info {
    display: flex;
    flex-direction: column;
}

.eval-stat-value {
    font-size: 22px;
    font-weight: 700;
    line-height: 1;
}

.eval-stat-label {
    font-size: 12px;
    opacity: 0.8;
    margin-top: 3px;
}

/* Filters Card */
.eval-filters-card {
    background: white;
    border-radius: var(--radius);
    padding: 20px;
    box-shadow: var(--shadow);
}

.eval-filters-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--gray-200);
}

.eval-filters-title {
    font-weight: 600;
    font-size: 15px;
    color: var(--gray-700);
    display: flex;
    align-items: center;
    gap: 8px;
}

.eval-filters-title i {
    color: var(--gray-400);
}

.filter-badge {
    background: var(--primary);
    color: white;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 10px;
    font-weight: 600;
}

.btn-reset-filters {
    background: none;
    border: none;
    color: var(--danger);
    font-size: 13px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border-radius: 6px;
    transition: all 0.2s;
}

.btn-reset-filters:hover {
    background: rgba(201, 74, 74, 0.1);
}

.eval-filters-grid {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.eval-filter-item {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.eval-filter-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--gray-600);
    display: flex;
    align-items: center;
    gap: 8px;
}

.eval-filter-label i {
    color: var(--gray-400);
    width: 16px;
}

/* Filter Chips */
.eval-filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.filter-chip {
    padding: 8px 16px;
    border-radius: 20px;
    border: 1px solid var(--gray-200);
    background: var(--gray-50);
    color: var(--gray-600);
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-weight: 500;
}

.filter-chip:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: rgba(30, 58, 95, 0.05);
}

.filter-chip.active {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}

.filter-chip.more {
    background: transparent;
    border-style: dashed;
}

/* User Search & Chips */
.eval-filter-search {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.search-input-wrapper {
    position: relative;
    max-width: 400px;
}

.search-input-wrapper i.fa-search {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--gray-400);
    font-size: 14px;
}

.search-input-wrapper input {
    width: 100%;
    padding: 12px 40px 12px 40px;
    border: 2px solid var(--gray-200);
    border-radius: 10px;
    font-size: 14px;
    transition: all 0.2s;
}

.search-input-wrapper input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(30, 58, 95, 0.1);
}

.search-clear {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: var(--gray-200);
    border: none;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gray-500);
    font-size: 10px;
}

.search-clear:hover {
    background: var(--gray-300);
}

.user-chips-container {
    min-height: 40px;
}

.user-chips-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.user-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.2s;
}

.user-chip:hover {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
}

.user-chip:hover .user-chip-avatar {
    background: white;
    color: var(--primary);
}

.user-chip-avatar {
    width: 24px;
    height: 24px;
    background: var(--primary);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
}

.user-chip-name {
    font-size: 13px;
    font-weight: 500;
}

.selected-user-chip {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: var(--primary);
    color: white;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
}

.selected-user-chip button {
    background: rgba(255,255,255,0.2);
    border: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
}

.selected-user-chip button:hover {
    background: rgba(255,255,255,0.3);
}

.more-users {
    color: var(--gray-400);
    font-size: 12px;
    padding: 5px;
}

/* Date Filters */
.eval-date-filters {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.date-presets {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.date-preset {
    padding: 8px 16px;
    border-radius: 8px;
    border: 1px solid var(--gray-200);
    background: white;
    color: var(--gray-600);
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
    font-weight: 500;
}

.date-preset:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.date-preset.active {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}

.date-range-inputs {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.date-input-wrapper {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.date-input-wrapper label {
    font-size: 11px;
    color: var(--gray-500);
    font-weight: 500;
}

.date-input-wrapper input[type="date"] {
    padding: 10px 12px;
    border: 2px solid var(--gray-200);
    border-radius: 8px;
    font-size: 13px;
    color: var(--gray-700);
    min-width: 150px;
}

.date-input-wrapper input[type="date"]:focus {
    outline: none;
    border-color: var(--primary);
}

.date-separator {
    color: var(--gray-400);
    font-size: 16px;
    margin-top: 18px;
}

/* Filters Actions */
.eval-filters-actions {
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid var(--gray-200);
    display: flex;
    justify-content: flex-end;
}

/* Results Card */
.eval-results-card {
    background: white;
    border-radius: var(--radius);
    padding: 20px;
    box-shadow: var(--shadow);
}

/* Evaluation Grid List */
.eval-list-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 16px;
}

.eval-item-card {
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.2s ease;
}

.eval-item-card:hover {
    border-color: var(--primary);
    box-shadow: 0 4px 12px rgba(30, 58, 95, 0.15);
    transform: translateY(-2px);
}

.eval-item-header {
    padding: 12px 16px;
    background: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--gray-200);
}

.eval-item-date {
    font-size: 12px;
    color: var(--gray-500);
    display: flex;
    align-items: center;
    gap: 6px;
}

.eval-item-body {
    padding: 16px;
}

.eval-item-user {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.eval-user-avatar {
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg, var(--primary), var(--primary-light));
    color: white;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 600;
}

.eval-user-info {
    display: flex;
    flex-direction: column;
}

.eval-user-info strong {
    font-size: 15px;
    color: var(--gray-800);
}

.eval-user-info small {
    font-size: 12px;
    color: var(--gray-500);
}

.eval-item-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.eval-meta-item {
    font-size: 11px;
    color: var(--gray-500);
    background: white;
    padding: 4px 10px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.eval-meta-item i {
    color: var(--gray-400);
}

.eval-item-footer {
    padding: 12px 16px;
    background: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid var(--gray-200);
}

.eval-item-score {
    display: flex;
    align-items: center;
}

.score-circle {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
}

.score-circle.score-high {
    background: rgba(45, 139, 111, 0.15);
    color: var(--success);
    border: 2px solid var(--success);
}

.score-circle.score-medium {
    background: rgba(217, 119, 6, 0.15);
    color: var(--warning);
    border: 2px solid var(--warning);
}

.score-circle.score-low {
    background: rgba(201, 74, 74, 0.15);
    color: var(--danger);
    border: 2px solid var(--danger);
}

.score-circle.pending {
    background: var(--gray-100);
    color: var(--gray-400);
    border: 2px dashed var(--gray-300);
}

.eval-item-actions {
    display: flex;
    gap: 8px;
}

.btn-action {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: 1px solid var(--gray-200);
    background: white;
    color: var(--gray-500);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.btn-action:hover {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}

.btn-action.pdf:hover {
    background: #DC2626;
    border-color: #DC2626;
}

.btn-action.delete:hover {
    background: var(--danger);
    border-color: var(--danger);
}

/* Empty State */
.eval-empty-state {
    text-align: center;
    padding: 60px 20px;
}

.eval-empty-state .empty-icon {
    width: 80px;
    height: 80px;
    background: var(--gray-100);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
}

.eval-empty-state .empty-icon i {
    font-size: 36px;
    color: var(--gray-400);
}

.eval-empty-state h3 {
    font-size: 18px;
    color: var(--gray-700);
    margin-bottom: 8px;
}

.eval-empty-state p {
    color: var(--gray-500);
    margin-bottom: 20px;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .eval-header-top {
        flex-direction: column;
        gap: 15px;
    }
    
    .eval-quick-stats {
        overflow-x: auto;
        padding-bottom: 10px;
        flex-wrap: nowrap;
    }
    
    .eval-stat-card {
        min-width: 120px;
        flex-shrink: 0;
    }
    
    .eval-list-grid {
        grid-template-columns: 1fr;
    }
    
    .date-range-inputs {
        flex-direction: column;
        align-items: stretch;
    }
    
    .date-separator {
        display: none;
    }
    
    .date-input-wrapper input[type="date"] {
        width: 100%;
    }
    
    .eval-filters-actions {
        justify-content: stretch;
    }
    
    .eval-filters-actions .btn {
        width: 100%;
    }
}

/* ==================== AUDIT HOTEL SELECTION ==================== */

.hotel-selection-toggle {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.radio-card {
    flex: 1;
    min-width: 200px;
    cursor: pointer;
}

.radio-card input[type="radio"] {
    display: none;
}

.radio-card-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 20px;
    border: 2px solid var(--gray-200);
    border-radius: 12px;
    background: var(--gray-50);
    transition: all 0.2s ease;
}

.radio-card-content i {
    font-size: 28px;
    color: var(--gray-400);
    margin-bottom: 10px;
}

.radio-card-content span {
    font-weight: 600;
    color: var(--gray-700);
    margin-bottom: 5px;
}

.radio-card-content small {
    font-size: 12px;
    color: var(--gray-500);
}

.radio-card:hover .radio-card-content {
    border-color: var(--primary);
    background: white;
}

.radio-card.active .radio-card-content {
    border-color: var(--primary);
    background: rgba(30, 58, 95, 0.05);
}

.radio-card.active .radio-card-content i {
    color: var(--primary);
}

.radio-card.active .radio-card-content span {
    color: var(--primary);
}

/* Hotel checkboxes container */
.hotel-checkboxes-container {
    margin-top: 20px;
    padding: 20px;
    background: var(--gray-50);
    border-radius: 12px;
    border: 1px solid var(--gray-200);
}

.hotel-checkboxes-container > label {
    display: block;
    font-weight: 600;
    margin-bottom: 15px;
    color: var(--gray-700);
}

.hotel-chips-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.hotel-chip-checkbox {
    cursor: pointer;
}

.hotel-chip-checkbox input[type="checkbox"] {
    display: none;
}

.hotel-chip-content {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: white;
    border: 2px solid var(--gray-200);
    border-radius: 25px;
    font-size: 14px;
    color: var(--gray-600);
    transition: all 0.2s ease;
}

.hotel-chip-content i {
    color: var(--gray-400);
}

.hotel-chip-checkbox:hover .hotel-chip-content {
    border-color: var(--primary);
    color: var(--primary);
}

.hotel-chip-checkbox.selected .hotel-chip-content {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
}

.hotel-chip-checkbox.selected .hotel-chip-content i {
    color: white;
}

.hotel-selection-actions {
    margin-top: 15px;
    display: flex;
    gap: 10px;
}

@media (max-width: 768px) {
    .hotel-selection-toggle {
        flex-direction: column;
    }
    
    .radio-card {
        min-width: 100%;
    }
}

/* Hotels badge in grid list */
.hotels-badge {
    display: inline-block;
    padding: 4px 10px;
    background: var(--gray-100);
    border-radius: 4px;
    font-size: 12px;
    color: var(--gray-600);
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hotels-badge.all-hotels {
    background: rgba(30, 58, 95, 0.1);
    color: var(--primary);
}

/* ==================== REVENUE MANAGEMENT ==================== */

.revenue-page {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.revenue-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 20px;
}

.revenue-header h2 {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 24px;
    color: var(--gray-800);
    margin: 0;
}

.revenue-header h2 i {
    color: var(--primary);
}

.revenue-header p {
    color: var(--gray-500);
    margin: 4px 0 0;
}

.revenue-header-actions {
    display: flex;
    gap: 12px;
    align-items: center;
}

.last-update-info {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: var(--gray-100);
    border-radius: 8px;
    font-size: 13px;
    color: var(--gray-600);
    cursor: default;
}

.last-update-info i {
    color: var(--primary);
}

/* Revenue Filters */
.revenue-filters {
    padding: 20px;
}

.filters-row {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    align-items: flex-end;
    margin-bottom: 20px;
}

/* Dynamic Filters Section */
.dynamic-filters-section {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--gray-200);
    align-items: flex-start;
}

.dynamic-filter-group {
    flex: 1;
    min-width: 250px;
}

.dynamic-filter-group label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--gray-600);
    text-transform: uppercase;
    margin-bottom: 10px;
}

.dynamic-filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.dynamic-filter-actions {
    display: flex;
    gap: 8px;
    align-items: flex-end;
    padding-top: 24px;
}

.dynamic-filter-actions .btn-sm {
    padding: 6px 12px;
    font-size: 12px;
}

/* Filter Chips (shared with evolution chart) */
.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 2px solid var(--gray-300);
    border-radius: 20px;
    background: white;
    font-size: 13px;
    color: var(--gray-600);
    cursor: pointer;
    transition: all 0.2s ease;
}

.filter-chip:hover {
    border-color: var(--gray-400);
    background: var(--gray-50);
}

.filter-chip.active {
    border-color: var(--chip-color, var(--primary));
    background: var(--chip-color, var(--primary));
    color: white;
}

.filter-chip .chip-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--chip-color, var(--primary));
    flex-shrink: 0;
}

.filter-chip.active .chip-dot {
    background: white;
}

.filter-chip .chip-badge {
    font-size: 10px;
    padding: 2px 6px;
    background: rgba(255,255,255,0.3);
    border-radius: 10px;
    margin-left: 4px;
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.filter-group label {
    font-size: 12px;
    font-weight: 600;
    color: var(--gray-500);
    display: flex;
    align-items: center;
    gap: 6px;
}

.filter-group label i {
    color: var(--gray-400);
}

.filter-group input,
.filter-group select {
    min-width: 140px;
    padding: 10px 12px;
    border: 2px solid var(--gray-200);
    border-radius: 8px;
    font-size: 14px;
}

.filter-group input:focus,
.filter-group select:focus {
    outline: none;
    border-color: var(--primary);
}

.filter-actions {
    margin-left: auto;
}

.filters-row-secondary {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid var(--gray-100);
}

.competitors-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--gray-600);
}

.legend-dot {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    background: var(--legend-color, var(--primary));
}

/* Revenue Calendar */
.revenue-calendar-container {
    padding: 0;
    overflow: hidden;
}

/* Month Navigation */
.revenue-month-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    margin-bottom: 0;
}

.revenue-month-nav h3 {
    font-size: 20px;
    font-weight: 600;
    color: var(--gray-800);
    margin: 0;
}

/* Monthly Calendar Grid */
.revenue-monthly-calendar {
    padding: 20px;
}

.calendar-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    margin-bottom: 8px;
}

.calendar-weekdays .weekday {
    text-align: center;
    padding: 12px 8px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--gray-500);
    background: var(--gray-50);
    border-radius: 6px;
}

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}

.calendar-day {
    min-height: 100px;
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    padding: 8px;
    display: flex;
    flex-direction: column;
    transition: all 0.2s;
}

.calendar-day:hover:not(.empty) {
    border-color: var(--primary);
    box-shadow: 0 2px 8px rgba(30, 58, 95, 0.1);
}

.calendar-day.empty {
    background: var(--gray-50);
    border-color: transparent;
}

.calendar-day.today {
    border-color: var(--primary);
    border-width: 2px;
    background: rgba(30, 58, 95, 0.03);
}

.calendar-day.past {
    opacity: 0.6;
}

.calendar-day.weekend {
    background: rgba(212, 168, 83, 0.05);
}

.calendar-day .day-number {
    font-size: 14px;
    font-weight: 600;
    color: var(--gray-700);
    margin-bottom: 6px;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 4px;
    transition: background 0.2s;
}

.calendar-day .day-number:hover {
    background: var(--primary);
    color: white;
}

.calendar-day.today .day-number {
    color: var(--primary);
}

.calendar-day.today .day-number:hover {
    color: white;
}

/* Day Comparison Modal */
.day-comparison {
    padding: 0;
}

.comparison-header {
    margin-bottom: 20px;
}

.comparison-header h3 {
    margin: 0 0 5px;
    color: var(--gray-800);
    display: flex;
    align-items: center;
    gap: 10px;
}

.comparison-header p {
    margin: 0;
}

.comparison-table-wrapper {
    overflow-x: auto;
    margin: 0 -20px;
    padding: 0 20px;
}

.comparison-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 600px;
}

.comparison-table th,
.comparison-table td {
    padding: 12px 16px;
    text-align: center;
    border-bottom: 1px solid var(--gray-200);
}

.comparison-table th {
    background: var(--gray-50);
    font-weight: 600;
    font-size: 13px;
    color: var(--gray-700);
}

.comparison-table th.ota-column {
    text-align: left;
    min-width: 140px;
}

.comparison-table th.hotel-column {
    min-width: 120px;
    border-left: 3px solid var(--hotel-color, var(--primary));
}

.comparison-table th .hotel-indicator {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 3px;
    background: var(--hotel-color, var(--primary));
    margin-right: 6px;
}

.comparison-table td.ota-name {
    text-align: left;
    font-size: 13px;
    color: var(--gray-700);
}

.comparison-table td.ota-name i {
    color: var(--gray-400);
    margin-right: 8px;
}

.comparison-table .price-cell {
    font-size: 15px;
    font-weight: 600;
    color: var(--gray-800);
    position: relative;
}

.comparison-table .price-cell.best-price {
    background: rgba(22, 163, 74, 0.1);
    color: #16a34a;
}

.comparison-table .price-cell.worst-price {
    background: rgba(220, 38, 38, 0.08);
    color: #dc2626;
}

.comparison-table .price-cell.no-price {
    color: var(--gray-300);
    font-weight: 400;
}

.comparison-table .price-value {
    display: block;
}

.comparison-table .price-diff {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 5px;
    border-radius: 3px;
    margin-top: 2px;
}

.price-diff.higher {
    background: rgba(220, 38, 38, 0.1);
    color: #dc2626;
}

.price-diff.lower {
    background: rgba(22, 163, 74, 0.1);
    color: #16a34a;
}

.price-diff.equal {
    background: var(--gray-100);
    color: var(--gray-500);
}

.comparison-table .summary-row {
    background: var(--gray-50);
    border-top: 2px solid var(--gray-300);
}

.comparison-table .summary-row td {
    font-size: 16px;
}

.comparison-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--gray-200);
}

.comparison-legend .legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--gray-600);
}

.comparison-legend .legend-dot {
    width: 14px;
    height: 14px;
    border-radius: 3px;
}

.comparison-legend .legend-dot.best {
    background: rgba(22, 163, 74, 0.3);
    border: 2px solid #16a34a;
}

.comparison-legend .legend-dot.worst {
    background: rgba(220, 38, 38, 0.2);
    border: 2px solid #dc2626;
}

/* Modal XL for comparison */
.modal-xl .modal-content {
    max-width: 900px;
}

/* Price Evolution Chart */
.price-evolution {
    padding: 0;
}

.evolution-header {
    margin-bottom: 20px;
}

.evolution-header h3 {
    margin: 0 0 5px;
    color: var(--gray-800);
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Evolution Filters */
.evolution-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    padding: 16px;
    background: var(--gray-50);
    border-radius: 8px;
    margin-bottom: 20px;
    align-items: flex-start;
}

.evolution-filter-group {
    flex: 1;
    min-width: 200px;
}

.evolution-filter-group label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--gray-600);
    text-transform: uppercase;
    margin-bottom: 10px;
}

.evolution-filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.evolution-filter-actions {
    display: flex;
    gap: 8px;
    align-items: flex-end;
    padding-top: 24px;
}

.evolution-filter-actions .btn-sm {
    padding: 6px 12px;
    font-size: 12px;
}

.evolution-chart-container {
    height: 400px;
    margin-bottom: 20px;
}

.evolution-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--gray-200);
}

.evolution-legend-group {
    flex: 1;
    min-width: 200px;
}

.legend-source {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.legend-source .legend-dot {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    background: var(--source-color, var(--primary));
}

.legend-otas {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding-left: 20px;
}

.ota-tag {
    font-size: 11px;
    padding: 3px 8px;
    background: var(--gray-100);
    border-radius: 4px;
    color: var(--gray-600);
}

/* Comparison header with button */
.comparison-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;
}

.comparison-header-left h3 {
    margin: 0 0 5px;
    color: var(--gray-800);
    display: flex;
    align-items: center;
    gap: 10px;
}

.comparison-header-left p {
    margin: 0;
}

.comparison-header-right {
    flex-shrink: 0;
}

.calendar-day .day-rates {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.calendar-day .no-rate {
    color: var(--gray-300);
    font-size: 14px;
    text-align: center;
    margin-top: 10px;
}

/* Rate Chip */
.rate-chip {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px 8px;
    border-radius: 4px;
    background: var(--chip-color, var(--primary));
    cursor: pointer;
    transition: all 0.2s;
}

.rate-chip:hover {
    transform: scale(1.05);
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

.rate-chip .rate-value {
    font-size: 12px;
    font-weight: 600;
    color: white;
}

.rate-chip.cheaper {
    box-shadow: inset 0 0 0 2px rgba(22, 163, 74, 0.5);
}

.rate-chip.expensive {
    box-shadow: inset 0 0 0 2px rgba(220, 38, 38, 0.5);
}

/* Calendar Legend */
.calendar-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    padding: 16px 20px;
    border-top: 1px solid var(--gray-200);
    background: var(--gray-50);
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--gray-600);
}

.legend-color {
    width: 16px;
    height: 16px;
    border-radius: 4px;
}

/* Old calendar styles kept for reference */
.revenue-calendar {
    overflow-x: auto;
}

.calendar-header-row {
    display: flex;
    background: var(--gray-50);
    border-bottom: 2px solid var(--gray-200);
    position: sticky;
    top: 0;
    z-index: 10;
}

.calendar-corner {
    min-width: 100px;
    padding: 16px;
    font-weight: 600;
    color: var(--gray-600);
    background: var(--gray-100);
}

.calendar-source-header {
    flex: 1;
    min-width: 140px;
    padding: 12px 16px;
    font-size: 13px;
    font-weight: 600;
    color: var(--gray-700);
    display: flex;
    align-items: center;
    gap: 8px;
    border-left: 1px solid var(--gray-200);
}

.source-indicator {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    background: var(--source-color, var(--primary));
}

.calendar-body {
    max-height: 600px;
    overflow-y: auto;
}

.calendar-row {
    display: flex;
    border-bottom: 1px solid var(--gray-100);
}

.calendar-row:hover {
    background: var(--gray-50);
}

.calendar-row.weekend {
    background: rgba(37, 99, 235, 0.03);
}

.calendar-date {
    min-width: 100px;
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--gray-50);
    border-right: 1px solid var(--gray-200);
}

.date-day {
    font-size: 11px;
    text-transform: uppercase;
    color: var(--gray-500);
}

.date-num {
    font-size: 20px;
    font-weight: 700;
    color: var(--gray-800);
}

.date-month {
    font-size: 11px;
    color: var(--gray-500);
}

.calendar-cell {
    flex: 1;
    min-width: 140px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-left: 1px solid var(--gray-100);
    cursor: pointer;
    transition: background 0.2s;
}

.calendar-cell.has-data:hover {
    background: rgba(37, 99, 235, 0.08);
}

.calendar-cell.has-data {
    border-left: 3px solid var(--cell-color, var(--primary));
}

.calendar-cell.no-data {
    background: var(--gray-50);
}

.no-data-icon {
    color: var(--gray-300);
    font-size: 18px;
}

.rate-amount {
    font-size: 20px;
    font-weight: 700;
    color: var(--gray-800);
}

.rate-range {
    font-size: 11px;
    color: var(--gray-500);
    margin-top: 2px;
}

.rate-comparison {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
    margin-top: 4px;
}

.rate-comparison.positive {
    background: rgba(220, 38, 38, 0.1);
    color: #dc2626;
}

.rate-comparison.negative {
    background: rgba(22, 163, 74, 0.1);
    color: #16a34a;
}

.rate-ota-count {
    font-size: 10px;
    color: var(--gray-400);
    margin-top: 4px;
}

/* Rate Details Modal */
.rate-details-header {
    margin-bottom: 20px;
}

.rate-details-header h4 {
    margin: 0 0 4px;
    color: var(--gray-800);
}

.rate-details-header p {
    color: var(--gray-500);
    margin: 0;
}

.rate-details-table {
    width: 100%;
}

.rate-details-table .rate-cell {
    font-weight: 600;
    color: var(--primary);
}

/* Revenue Settings */
.settings-section {
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--gray-200);
}

.settings-section:last-child {
    border-bottom: none;
}

.settings-section h4 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 8px;
    color: var(--gray-800);
}

.settings-section h4 i {
    color: var(--primary);
}

.settings-section > p {
    color: var(--gray-500);
    margin: 0 0 20px;
    font-size: 14px;
}

.competitors-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.competitors-header {
    display: grid;
    grid-template-columns: 40px 1fr 1fr 80px;
    gap: 10px;
    padding: 10px;
    background: var(--gray-100);
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    color: var(--gray-600);
}

.competitor-row {
    display: grid;
    grid-template-columns: 40px 1fr 1fr 80px;
    gap: 10px;
    align-items: center;
}

.competitor-num {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gray-100);
    border-radius: 8px;
    font-weight: 600;
    color: var(--gray-500);
    font-size: 13px;
}

.competitor-row .form-group {
    margin: 0;
}

.competitor-row .form-group.small select {
    min-width: 70px;
}

.competitor-row input,
.competitor-row select {
    padding: 8px 10px;
    font-size: 13px;
}

.form-help {
    font-size: 12px;
    color: var(--gray-500);
    margin-top: 4px;
}

.form-help a {
    color: var(--primary);
}

/* Loading Spinner */
.loading-spinner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 60px 20px;
    color: var(--gray-500);
}

.loading-spinner i {
    font-size: 24px;
    color: var(--primary);
}

/* Responsive Revenue */
@media (max-width: 1024px) {
    .filters-row {
        flex-direction: column;
        align-items: stretch;
    }
    
    .filter-group {
        width: 100%;
    }
    
    .filter-group input,
    .filter-group select {
        width: 100%;
    }
    
    .filter-actions {
        margin-left: 0;
    }
    
    .calendar-source-header {
        min-width: 120px;
    }
    
    .calendar-cell {
        min-width: 120px;
    }
}

@media (max-width: 768px) {
    .revenue-header {
        flex-direction: column;
    }
    
    .revenue-header-actions {
        width: 100%;
    }
    
    .revenue-header-actions .btn {
        flex: 1;
    }
    
    .competitors-header,
    .competitor-row {
        grid-template-columns: 30px 1fr;
    }
    
    .competitors-header > div:nth-child(3),
    .competitors-header > div:nth-child(4),
    .competitor-row > .form-group:nth-child(3),
    .competitor-row > .form-group:nth-child(4) {
        display: none;
    }
}