/* ============================================
   MANAGEMENT LOGIN - CLEAN WHITE DESIGN
   ============================================ */

/* Main Wrapper - Clean White + Gradient */
.management-login-wrapper {
    width: 100vw;
    height: 100dvh;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 50%, #f0f4f8 100%);
}

/* Decorative Gradient Circles */
.gradient-circle {
    position: absolute;
    border-radius: 50%;
    opacity: 0.08;
    pointer-events: none;
    animation: floatSlow 20s ease-in-out infinite;
}

.gradient-circle-1 {
    width: var(--px-500);
    height: var(--px-500);
    top: -15%;
    right: -10%;
    background: linear-gradient(135deg, #055059 0%, #067182 100%);
    animation-delay: 0s;
}

.gradient-circle-2 {
    width: var(--px-400);
    height: var(--px-400);
    bottom: -10%;
    left: -8%;
    background: linear-gradient(135deg, #16a34a 0%, #22c55e 100%);
    animation-delay: 3s;
}

.gradient-circle-3 {
    width: var(--px-300);
    height: var(--px-300);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: linear-gradient(135deg, #fef6dd 0%, #f4e5b8 100%);
    animation-delay: 6s;
}

@keyframes floatSlow {
    0%, 100% {
        transform: translate(0, 0) scale(1);
    }

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

/* Main Container */
.management-login-container {
    position: relative;
    z-index: 10;
    width: 100%;
    max-width: var(--px-460);
    padding: var(--px-32) var(--px-24);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--px-32);
    animation: fadeInUp 0.8s var(--transition-elegant);
    overflow: auto;
}

/* Logo Section */
.login-logo-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--px-8);
}

.logo-circle {
    width: var(--px-180);
    height: var(--px-180);
    border-radius: 50%;
    background: #f4e5b8;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--px-8);
    box-shadow: 0 8px 32px rgba(5, 80, 89, 0.2), 0 2px 8px rgba(0, 0, 0, 0.05);
    animation: scaleIn 0.6s var(--transition-elegant) 0.2s both;
}

.logo-image {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: contain;
}

.login-main-title {
    font: normal normal 700 var(--s-28);
    color: #1f2937;
    margin: 0;
    letter-spacing: -0.5px;
}

.login-main-subtitle {
    font: normal normal 400 var(--s-14);
    color: #6b7280;
    margin: 0;
    text-align: center;
    display: none;
}

/* Login Card */
.login-card {
    width: 100%;
    background: white;
    border-radius: var(--px-12);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
    overflow: hidden;
    animation: scaleIn 0.6s var(--transition-elegant) 0.4s both;
    padding: var(--px-16);
    min-height: max-content;
}

/* Tab Switcher */
.login-tab-switcher {
    position: relative;
    display: flex;
    background: #eee;
    padding: var(--px-4);
    border-radius: var(--px-8);
}

.login-tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--px-8);
    padding: var(--px-12) var(--px-16);
    background: transparent;
    border: none;
    border-radius: var(--px-8);
    cursor: pointer;
    transition: all var(--transition-smooth);
    position: relative;
    z-index: 2;
    color: #6b7280;
    font: normal normal 500 var(--s-14);
}

    .login-tab.active {
        color: #055059;
    }

.tab-icon {
    width: var(--px-20);
    height: var(--px-20);
    transition: transform var(--transition-smooth);
}

.login-tab.active .tab-icon {
    transform: scale(1.1);
}

.tab-text {
    font-weight: 500;
}

/* Tab Indicator */
.tab-indicator {
    position: absolute;
    bottom: var(--px-4);
    left: var(--px-4);
    width: calc(50% - var(--px-4));
    height: calc(100% - var(--px-8));
    background: white;
    border-radius: var(--px-8);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.08);
    transition: transform var(--transition-smooth);
    z-index: 1;
}

.login-tab:last-of-type.active ~ .tab-indicator {
    transform: translateX(100%);
}

/* Tab Content */
.login-tab-content {
    padding: var(--px-16);
}

.tab-panel {
    display: none;
    animation: fadeIn 0.4s var(--transition-elegant);
}

    .tab-panel.active {
        display: flex;
        flex-direction: column;
        gap: var(--px-16);
    }

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

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

/* Form Styles - Clean Design */
.login-form-clean {
    display: flex;
    flex-direction: column;
    gap: var(--px-20);
}

.form-group-clean {
    display: flex;
    flex-direction: column;
    gap: var(--px-8);
}

.form-label-clean {
    font: normal normal 500 var(--s-13);
    color: #374151;
}

.input-wrapper-clean {
    position: relative;
    display: flex;
    align-items: center;
}

.input-icon-clean {
    position: absolute;
    left: var(--px-14);
    width: var(--px-20);
    height: var(--px-20);
    color: #9ca3af;
    pointer-events: none;
}

.form-input-clean {
    width: 100%;
    padding: var(--px-14) var(--px-14) var(--px-14) var(--px-44);
    background: #f9fafb;
    border: 2px solid #e5e7eb;
    border-radius: var(--px-12);
    font: normal normal 400 var(--s-14);
    color: #1f2937;
    transition: all var(--transition-smooth);
}

    .form-input-clean::placeholder {
        color: #9ca3af;
    }

    .form-input-clean:focus {
        outline: none;
        background: white;
        border-color: #055059;
        box-shadow: 0 0 0 4px rgba(5, 80, 89, 0.1);
    }

/* Password Toggle */
.toggle-password-clean {
    position: absolute;
    right: var(--px-14);
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--px-4);
    border-radius: var(--px-4);
    transition: all var(--transition-smooth);
}

    .toggle-password-clean:hover {
        background: #f3f4f6;
    }

.eye-icon-clean {
    width: var(--px-20);
    height: var(--px-20);
    color: #6b7280;
}

.toggle-password-clean.active .eye-icon-clean {
    color: #055059;
}

/* Login Button - Clean Design */
.btn-login-clean {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--px-8);
    width: 100%;
    padding: var(--px-14) var(--px-20);
    background: linear-gradient(135deg, #055059 0%, #067182 100%);
    color: white;
    font: normal normal 600 var(--s-15);
    border: none;
    border-radius: var(--px-12);
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(5, 80, 89, 0.3);
    transition: all var(--transition-smooth);
    margin-top: var(--px-8);
}

    .btn-login-clean:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(5, 80, 89, 0.4);
    }

    .btn-login-clean:active {
        transform: translateY(0);
    }

.btn-arrow {
    width: var(--px-20);
    height: var(--px-20);
    transition: transform var(--transition-smooth);
}

.btn-login-clean:hover .btn-arrow {
    transform: translateX(4px);
}

/* Loading State */
.btn-login-clean.loading {
    pointer-events: none;
    opacity: 0.7;
}

    .btn-login-clean.loading::after {
        content: '';
        position: absolute;
        width: var(--px-20);
        height: var(--px-20);
        border: 2px solid rgba(255, 255, 255, 0.3);
        border-top-color: white;
        border-radius: 50%;
        animation: spin 0.8s linear infinite;
    }

/* Passcode Panel */
.passcode-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--px-16);
}

/* Passcode Display - Clean */
.passcode-display-clean {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--px-20);
    width: 100%;
}

.passcode-dots-clean {
    display: flex;
    gap: var(--px-16);
    justify-content: center;
}

.passcode-dot-clean {
    width: var(--px-20);
    height: var(--px-20);
    border-radius: 50%;
    background: #e5e7eb;
    transition: all var(--transition-smooth);
}

    .passcode-dot-clean.filled {
        background: #055059;
        box-shadow: 0 0 0 4px rgba(5, 80, 89, 0.1);
        transform: scale(1.2);
    }

.passcode-hint-clean {
    font: normal normal 400 var(--s-12);
    color: #9ca3af;
    margin: 0;
    text-align: center;
}

/* Number Pad - Clean Design */
.numpad-clean {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--px-20);
    width: 100%;
    max-width: var(--px-240);
}

.numpad-btn-clean {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f9fafb;
    border: 1px solid var(--bs-gray-300);
    border-radius: var(--px-12);
    font: normal normal 700 var(--s-24);
    color: #1f2937;
    cursor: pointer;
    transition: all var(--transition-fast);
}

    .numpad-btn-clean:hover {
        background: white;
        border-color: #055059;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(5, 80, 89, 0.15);
    }

    .numpad-btn-clean:active {
        transform: scale(0.95);
    }

    .numpad-btn-clean svg {
        width: var(--px-32);
        height: var(--px-32);
        color: #6b7280;
    }

.numpad-clear-clean,
.numpad-backspace-clean {
    background: 0;
    border: 0;
}

    .numpad-clear-clean:hover,
    .numpad-backspace-clean:hover {
        background: #fee2e2;
        border-color: #fca5a5;
    }

    .numpad-clear-clean svg,
    .numpad-backspace-clean svg {
        color: var(--hotel-primary-light);
    }

/* Info Text */
.login-info-text {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--px-8);
    padding: var(--px-12);
    background: #f0f9ff;
    border: 1px solid #bfdbfe;
    border-radius: var(--px-8);
}

.info-icon-small {
    width: var(--px-16);
    height: var(--px-16);
    color: #3b82f6;
    flex-shrink: 0;
}

.login-info-text span {
    font: normal normal 400 var(--s-12);
    color: #1e40af;
}

/* Footer - Clean */
.login-footer-clean {
    text-align: center;
    flex: 1;
    display: flex;
}

    .login-footer-clean p {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: var(--px-8);
        font: normal normal 400 var(--s-12);
        color: #9ca3af;
        margin: 0;
    }

.footer-icon {
    width: var(--px-16);
    height: var(--px-16);
}

/* Shake Animation */
@keyframes shake {
    0%, 100% {
        transform: translateX(0);
    }

    10%, 30%, 50%, 70%, 90% {
        transform: translateX(-8px);
    }

    20%, 40%, 60%, 80% {
        transform: translateX(8px);
    }
}

.shake {
    animation: shake 0.5s;
}

/* Responsive Design */
@media (max-width: 768px) {
    .management-login-container {
        padding: var(--px-24) var(--px-16);
        gap: var(--px-24);
    }

    .logo-circle {
        width: var(--px-160);
        height: var(--px-160);
    }

    .login-main-title {
        font: normal normal 700 var(--s-24);
    }

    .login-tab-content {
    }

    .numpad-clean {
        max-width: var(--px-240);
        gap: var(--px-10);
    }
}

@media (max-width: 640px) {
    .management-login-container {
        padding: var(--px-20) var(--px-12);
        gap: var(--px-20);
    }

    .logo-circle {
        /* width: var(--px-140); */
        /* height: var(--px-140); */
    }

    .login-main-title {
        font: normal normal 700 var(--s-20);
    }

    .login-card {
        border-radius: var(--px-16);
        max-width: 85%;
    }

    .login-tab-content {
    }

    .login-tab {
        font: normal normal 500 var(--s-13);
        padding: var(--px-10) var(--px-12);
    }

    .tab-icon {
        width: var(--px-18);
        height: var(--px-18);
    }

    .numpad-clean {
        max-width: var(--px-220);
        gap: var(--px-8);
    }

    .numpad-btn-clean {
        font: normal normal 600 var(--s-18);
    }

    .passcode-dots-clean {
        gap: var(--px-12);
    }

    .passcode-dot-clean {
        width: var(--px-12);
        height: var(--px-12);
    }
}

@media (max-width: 480px) {
    .management-login-container {
        padding: var(--px-16) var(--px-10);
        gap: var(--px-16);
    }

    .login-tab-content {
    }

    .tab-text {
        display: none;
    }

    .numpad-clean {
        max-width: var(--px-240);
    }

    .login-info-text {
        padding: var(--px-10);
    }

        .login-info-text span {
            font: normal normal 400 var(--s-11);
        }
}

/* Landscape Orientation */
@media (max-height: 600px) and (orientation: landscape) {
    .management-login-container {
        padding: var(--px-16) var(--px-20);
        gap: var(--px-16);
    }

    .login-logo-section {
        gap: var(--px-8);
    }

    .logo-circle {
        width: var(--px-60);
        height: var(--px-60);
    }

    .login-tab-content {
        padding: var(--px-20) var(--px-24);
    }

    .numpad-clean {
        gap: var(--px-8);
        max-width: var(--px-200);
    }
}

/* Print Styles */
@media print {
    .gradient-circle {
        display: none;
    }

    .management-login-container {
        box-shadow: none;
    }
}

/* ============================================
   HOTEL SELECTION POPUP
   ============================================ */

.hotel-selection-popup {
    border-radius: var(--px-16) !important;
}

.hotel-selection-close {
    color: #6b7280 !important;
    font-size: var(--s-24) !important;
}

    .hotel-selection-close:hover {
        color: #1f2937 !important;
    }

.hotel-selection-container {
    padding: var(--px-8) 0;
}

.hotel-selection-subtitle {
    font: normal normal 400 var(--s-14);
    color: #6b7280;
    margin: 0 0 var(--px-24) 0;
    text-align: center;
}

.hotel-cards-grid {
    display: flex;
    flex-direction: column;
    gap: var(--px-12);
    max-height: var(--px-500);
    overflow-y: auto;
    padding: var(--px-4);
}

/* Hotel Card */
.hotel-card {
    display: flex;
    align-items: center;
    gap: var(--px-16);
    padding: var(--px-16);
    background: #f9fafb;
    border: 2px solid #e5e7eb;
    border-radius: var(--px-12);
    cursor: pointer;
    transition: all var(--transition-smooth);
}

    .hotel-card:hover {
        background: white;
        border-color: #055059;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(5, 80, 89, 0.15);
    }

    .hotel-card:active {
        transform: translateY(0);
    }

.hotel-card-icon {
    width: var(--px-56);
    height: var(--px-56);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: var(--px-8);
    overflow: hidden;
}

    .hotel-card-icon svg {
        width: var(--px-32);
        height: var(--px-32);
        color: #055059;
    }

.hotel-logo {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hotel-card-body {
    flex: 1;
    min-width: 0;
}

.hotel-card-title {
    font: normal normal 600 var(--s-16);
    color: var(--txt-color);
    margin: 0 0 var(--px-4) 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hotel-card-address {
    font: normal normal 400 var(--s-13);
    color: #6b7280;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Hotel Card Actions */
.hotel-card-actions {
    display: flex;
    align-items: center;
    gap: var(--px-12);
}

/* Bypass Button */
.btn-bypass {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: var(--px-40);
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    border: none;
    border-radius: var(--px-8);
    cursor: pointer;
    transition: all var(--transition-smooth);
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);
    gap: 12px;
    color: white;
    font: normal normal 700 var(--s-16);
}

    .btn-bypass:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4);
    }

    .btn-bypass:active {
        transform: translateY(0) scale(0.98);
    }

    .btn-bypass svg {
        width: var(--px-20);
        height: var(--px-20);
        color: white;
    }

.hotel-card-arrow {
    width: var(--px-24);
    height: var(--px-24);
    flex-shrink: 0;
    color: #9ca3af;
    transition: all var(--transition-smooth);
}

    .hotel-card-arrow svg {
        width: 100%;
        height: 100%;
    }

.hotel-card:hover .hotel-card-arrow {
    color: #055059;
    transform: translateX(4px);
}

/* Current Hotel Badge */
.hotel-card.current {
    background: #e0f2f1;
    border-color: #055059;
    cursor: default;
}

    .hotel-card.current:hover {
        transform: none;
        box-shadow: none;
    }

/* Single Hotel - Non-clickable */
.hotel-card.single-hotel {
    cursor: default;
    background: #f0f9ff;
    border-color: #bfdbfe;
}

    .hotel-card.single-hotel:hover {
        transform: none;
        box-shadow: none;
        border-color: #bfdbfe;
    }

    .hotel-card.single-hotel .hotel-card-arrow {
        display: none;
    }

.current-badge {
    display: inline-block;
    padding: var(--px-4) var(--px-8);
    background: var(--hotel-gold);
    color: white;
    font: normal normal 600 var(--s-11);
    border-radius: var(--px-4);
    margin-top: var(--px-4);
}

/* ============================================
   USER LOGIN POPUP
   ============================================ */

.user-login-popup {
    border-radius: var(--px-16) !important;
}

.user-login-container {
    padding: var(--px-8) 0;
}

.user-login-subtitle {
    font: normal normal 400 var(--s-14);
    color: #6b7280;
    margin: 0 0 var(--px-24) 0;
    text-align: center;
}

.user-login-form {
    display: flex;
    flex-direction: column;
    gap: var(--px-20);
}

    .user-login-form .form-group {
        display: flex;
        flex-direction: column;
        gap: var(--px-8);
    }

    .user-login-form label {
        font: normal normal 500 var(--s-13);
        color: #374151;
        margin: 0;
    }

    .user-login-form .form-input {
        width: 100%;
        padding: var(--px-12) var(--px-16);
        background: #f9fafb;
        border: 2px solid #e5e7eb;
        border-radius: var(--px-10);
        font: normal normal 400 var(--s-14);
        color: #1f2937;
        transition: all var(--transition-smooth);
    }

        .user-login-form .form-input::placeholder {
            color: #9ca3af;
        }

        .user-login-form .form-input:focus {
            outline: none;
            background: white;
            border-color: #055059;
            box-shadow: 0 0 0 4px rgba(5, 80, 89, 0.1);
        }

/* Password Input Wrapper */
.password-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

    .password-input-wrapper .form-input {
        padding-right: var(--px-48);
    }

/* Toggle Password Button */
.toggle-password-btn {
    position: absolute;
    right: var(--px-12);
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--px-6);
    border-radius: var(--px-6);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-smooth);
}

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

.toggle-password.btn.active {
    background: #e0f2f1;
}

.eye-icon {
    width: var(--px-20);
    height: var(--px-20);
    color: #6b7280;
    transition: color var(--transition-smooth);
}

.toggle-password-btn.active .eye-icon {
    color: #055059;
}

/* User Login Popup Buttons */
.btn-user-login {
    background: linear-gradient(135deg, #055059 0%, #067182 100%) !important;
    border: none !important;
    border-radius: var(--px-10) !important;
    padding: var(--px-12) var(--px-24) !important;
    font: normal normal 600 var(--s-14) !important;
    transition: all var(--transition-smooth) !important;
}

    .btn-user-login:hover {
        transform: translateY(-2px) !important;
        box-shadow: 0 4px 12px rgba(5, 80, 89, 0.3) !important;
    }

.btn-cancel {
    background: #e5e7eb !important;
    color: #374151 !important;
    border: none !important;
    border-radius: var(--px-10) !important;
    padding: var(--px-12) var(--px-24) !important;
    font: normal normal 600 var(--s-14) !important;
    transition: all var(--transition-smooth) !important;
}

    .btn-cancel:hover {
        background: #d1d5db !important;
        transform: translateY(-2px) !important;
    }

.btn-primary svg {
    width: var(--px-20);
    height: var(--px-20);
    color: white;
}

.container-body-layout {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* ============================================
   GROUP HEADER - COLLAPSIBLE
   ============================================ */

.group-header {
    position: relative;
    cursor: pointer;
    user-select: none;
    transition: all var(--transition-smooth);
    padding: var(--px-20);
    background: white;
    border-radius: 0 0 var(--px-8) var(--px-8);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

    .group-header:hover {
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }

    .group-header::after {
        content: '';
        position: absolute;
        right: var(--px-20);
        top: 50%;
        transform: translateY(-50%) rotate(180deg);
        width: var(--px-24);
        height: var(--px-24);
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236b7280'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        transition: transform var(--transition-smooth);
    }

.settings-group.collapsed .group-header::after {
    transform: translateY(-50%) rotate(0deg);
}

/* Hide group items when collapsed (default state) */
.settings-group .group-items {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.4s var(--transition-elegant), opacity 0.3s var(--transition-smooth), margin 0.3s var(--transition-smooth);
    margin-top: 0;
}

.settings-group:not(.collapsed) .group-items {
    max-height: 2000px;
    opacity: 1;
    margin-top: 0;
    background: white;
    border-radius: 0 0 var(--px-8) var(--px-8);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid #e0e0e0;
}

.settings-group:not(.collapsed) .group-header {
    border-radius: unset;
    box-shadow: unset;
    border-bottom: 1px solid #e0e0e0;
}

/* Feature card visibility - keep it visible always or make it collapsible too */
.settings-group .feature-card {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.4s var(--transition-elegant), opacity 0.3s var(--transition-smooth), margin 0.3s var(--transition-smooth);
    margin-top: 0;
}

.settings-group:not(.collapsed) .feature-card {
    max-height: 1000px;
    opacity: 1;
    margin-top: var(--px-20);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .group-header::after {
        right: var(--px-12);
        width: var(--px-20);
        height: var(--px-20);
    }
}


.btn-settings svg,
.btn-notification svg {
    width: var(--px-28);
    height: var(--px-28);
    color: var(--bs-gray-700)
}

/* ============================================
   CLIENT ACCOUNTS SECTION
   ============================================ */

.clients-account-view {
    padding: 0 var(--px-16);
}

.no-clients-message {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--px-40) var(--px-20);
    background: #f9fafb;
    border: 2px dashed #e5e7eb;
    border-radius: var(--px-12);
    gap: var(--px-16);
    margin: 16px 0px;
}

.no-clients-icon {
    width: var(--px-64);
    height: var(--px-64);
    color: #d1d5db;
}

.no-clients-text {
    font: normal normal 500 var(--s-16);
    color: #9ca3af;
    margin: 0;
}

.client-accounts-grid {
    display: flex;
    gap: var(--px-20);
    width: 100%;
}

/* Client Account Card */
.client-account-card {
    width: 100%;
    overflow: hidden;
    transition: all var(--transition-smooth);
}

    .client-account-card:hover {
        transform: translateY(-4px);
    }

.client-card-header {
    display: flex;
    align-items: center;
    gap: var(--px-12);
    padding: var(--px-16) 0;
    background: 0;
    border-bottom: 1px solid #e5e7eb;
}

.client-icon-wrapper {
    width: var(--px-48);
    height: var(--px-48);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    border-radius: var(--px-8);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.client-icon {
    width: var(--px-28);
    height: var(--px-28);
    color: #055059;
}

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

.client-name {
    font: normal normal 700 var(--s-16);
    color: #1f2937;
    margin: 0 0 var(--px-4) 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.client-folio {
    font: normal normal 500 var(--s-13);
    color: #6b7280;
}

.client-card-body {
    padding: var(--px-16) 0;
}

.client-detail-row {
    display: flex;
    align-items: flex-start;
    gap: var(--px-10);
    padding: var(--px-12);
    background: #f9fafb;
    border-radius: var(--px-8);
    margin-bottom: var(--px-12);
}

.detail-icon {
    width: var(--px-18);
    height: var(--px-18);
    color: #6b7280;
    flex-shrink: 0;
    margin-top: var(--px-2);
}

.detail-text {
    flex: 1;
    font: normal normal 400 var(--s-13);
    color: #374151;
    line-height: 1.5;
}

/* Client Rate Section */
.client-rate-section {
    margin-top: var(--px-16);
    padding: var(--px-14);
    background: var(--hotel-pearl);
    border: 1px solid #f4e5b8;
    border-radius: var(--px-10);
}

.rate-header {
    display: flex;
    align-items: center;
    gap: var(--px-8);
    margin-bottom: var(--px-12);
}

.rate-icon {
    width: var(--px-20);
    height: var(--px-20);
    color: #d97706;
}

.rate-label {
    font: normal normal 600 var(--s-14);
    color: #92400e;
}

.rate-content {
    display: flex;
    flex-direction: column;
    gap: var(--px-10);
    position: relative;
}

.rate-code-badge {
    display: inline-block;
    padding: var(--px-6) var(--px-12);
    background: white;
    border: 1px solid #d97706;
    border-radius: var(--px-6);
    font: normal normal 700 var(--s-13);
    color: #d97706;
    width: fit-content;
    position: absolute;
    right: 0;
}

.rate-description {
    font: normal normal 500 var(--s-14);
    color: #1f2937;
    margin: 0;
    line-height: 1.5;
}

.rate-period {
    display: flex;
    align-items: center;
    gap: var(--px-6);
    font: normal normal 400 var(--s-12);
    color: #6b7280;
}

.period-icon {
    width: var(--px-16);
    height: var(--px-16);
    color: #9ca3af;
}

.rate-note {
    font: normal normal 400 var(--s-12);
    color: #78350f;
    margin: var(--px-8) 0 0 0;
    padding: var(--px-8);
    background: rgba(255, 255, 255, 0.5);
    border-radius: var(--px-6);
    line-height: 1.4;
}

.btn-view-all-rates {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--px-6);
    width: 100%;
    margin-top: var(--px-12);
    padding: var(--px-10);
    background: white;
    border: 1px solid #d97706;
    border-radius: var(--px-8);
    font: normal normal 600 var(--s-13);
    color: #d97706;
    cursor: pointer;
    transition: all var(--transition-smooth);
}

    .btn-view-all-rates:hover {
        background: #fef6dd;
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(217, 119, 6, 0.2);
    }

.arrow-icon {
    width: var(--px-16);
    height: var(--px-16);
    transition: transform var(--transition-smooth);
}

.btn-view-all-rates:hover .arrow-icon {
    transform: translateX(4px);
}

.no-rate-message {
    display: flex;
    align-items: center;
    gap: var(--px-10);
    padding: var(--px-12);
    background: #f3f4f6;
    border: 1px dashed #d1d5db;
    border-radius: var(--px-8);
    margin-top: var(--px-12);
}

.info-icon {
    width: var(--px-20);
    height: var(--px-20);
    color: #9ca3af;
    flex-shrink: 0;
}

.no-rate-message span {
    font: normal normal 400 var(--s-13);
    color: #6b7280;
}

/* All Rates Modal */
.client-rates-popup {
    border-radius: var(--px-16) !important;
}

.all-rates-container {
    padding: var(--px-8) 0;
}

.all-rates-subtitle {
    font: normal normal 500 var(--s-14);
    color: #6b7280;
    margin: 0 0 var(--px-20) 0;
    text-align: center;
}

.rates-list {
    display: flex;
    flex-direction: column;
    gap: var(--px-16);
    max-height: 500px;
    overflow-y: auto;
    padding: var(--px-4);
}

.rate-item {
    padding: var(--px-16);
    background: #f9fafb;
    border: 2px solid #e5e7eb;
    border-radius: var(--px-10);
    transition: all var(--transition-smooth);
}

    .rate-item.active {
        background: linear-gradient(135deg, #fef6dd 0%, #fef9ea 100%);
        border-color: #d97706;
    }

    .rate-item:hover {
        transform: translateX(4px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }

.rate-item-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--px-12);
}

.current-badge {
    padding: var(--px-4) var(--px-10);
    background: var(--hotel-gold);
    color: white;
    font: normal normal 600 var(--s-11);
    border-radius: var(--px-4);
}

/* Responsive Design */
@media (max-width: 1024px) {
    .client-accounts-grid {
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    }
}

@media (max-width: 768px) {
    .client-accounts-grid {
        grid-template-columns: 1fr;
    }

    .clients-account-view {
        margin-top: var(--px-16);
    }

    .client-card-header {
        padding: var(--px-12);
    }

    .client-icon-wrapper {
        width: var(--px-40);
        height: var(--px-40);
    }

    .client-icon {
        width: var(--px-24);
        height: var(--px-24);
    }

    .client-name {
        font: normal normal 700 var(--s-14);
    }

    .client-folio {
        font: normal normal 500 var(--s-12);
    }
}

@media (max-width: 480px) {
    .client-account-card {
        border-radius: var(--px-8);
    }

    .client-card-body {
        padding: var(--px-12);
    }

    .client-rate-section {
        padding: var(--px-12);
    }

    .rate-code-badge {
        padding: var(--px-4) var(--px-8);
        font: normal normal 700 var(--s-12);
    }
}

.client-card-info {
    position: relative;
}

.client-account-title {
    position: absolute;
    top: var(--px-12);
    right: var(--px-16);
    font: normal normal 500 var(--s-14);
    color: var(--bs-gray-700);
}