/* StaySmartBillingSuite - Radzen UI Based Application Styles */

/* Root font and layout setup */
html, body {
    font-family: 'Roboto', 'Noto Sans Devanagari', sans-serif;
    margin: 0;
    padding: 0;
    height: 100%;
    background-color: var(--rz-base-100);
    color: var(--rz-text-color);
}

/* Remove Bootstrap button styles, use Radzen instead */
.btn-primary, .btn-link, .btn:focus, .btn:active:focus {
    /* Reset - these are handled by Radzen buttons */
    all: unset;
}

/* Focus styles for Radzen components */
.rz-button:focus-visible,
.rz-textbox:focus,
.rz-dropdown:focus,
.rz-datepicker:focus {
    outline: 2px solid var(--rz-primary);
    outline-offset: 2px;
}

/* Content area styling */
.content {
    padding: 0; /* Removed top padding as it's handled by layout */
}

/* Heading focus styles */
h1:focus, h2:focus, h3:focus, h4:focus, h5:focus, h6:focus {
    outline: none;
}

/* Form validation styles for Radzen components */
.rz-textbox.valid.modified:not([type=checkbox]),
.rz-dropdown.valid.modified,
.rz-datepicker.valid.modified {
    border-color: var(--rz-success);
    box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.2);
}

.rz-textbox.invalid,
.rz-dropdown.invalid,
.rz-datepicker.invalid {
    border-color: var(--rz-danger);
    box-shadow: 0 0 0 2px rgba(244, 67, 54, 0.2);
}

.validation-message {
    color: var(--rz-danger);
    font-size: 0.875rem;
    margin-top: 0.25rem;
}

/* Enhanced error boundary styling */
.blazor-error-boundary {
    background: linear-gradient(135deg, #d32f2f 0%, #b71c1c 100%);
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
    border-radius: 8px;
    margin: 1rem;
    box-shadow: 0 4px 12px rgba(211, 47, 47, 0.3);
    position: relative;
}

.blazor-error-boundary::before {
    content: "?";
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.5rem;
    font-weight: bold;
}

.blazor-error-boundary::after {
    content: "An error has occurred. Please check the console for details.";
    font-weight: 500;
}

/* Utility classes for spacing and alignment */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.d-flex { display: flex; }
.justify-content-between { justify-content: space-between; }
.justify-content-center { justify-content: center; }
.align-items-center { align-items: center; }

.w-100 { width: 100%; }
.h-100 { height: 100%; }

/* Responsive grid helpers */
.row {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -0.5rem;
}

.col {
    flex: 1;
    padding: 0 0.5rem;
}

/* Custom hotel-specific styles */
.hotel-card {
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    padding: 1.5rem;
    transition: all 0.3s ease;
}

.hotel-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.currency-display {
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    color: var(--rz-success);
}

.status-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.375rem 0.75rem;
    border-radius: 1rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.status-available { background-color: #e8f5e8; color: #2e7d32; }
.status-occupied { background-color: #e3f2fd; color: #1976d2; }
.status-maintenance { background-color: #fff3e0; color: #f57c00; }
.status-pending { background-color: #fafafa; color: #616161; }

/* Print styles */
@media print {
    .rz-header,
    .rz-sidebar,
    .rz-footer {
        display: none !important;
    }
    
    .rz-body {
        margin: 0 !important;
        padding: 0 !important;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .rz-button {
        border: 2px solid currentColor;
    }
    
    .hotel-card {
        border: 1px solid var(--rz-text-color);
    }
}

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

/* Logo upload area styling */
.logo-upload-area {
    position: relative;
    border: 2px dashed #ddd;
    border-radius: 8px;
    background-color: #fafafa;
    padding: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
}

.logo-upload-area:hover {
    border-color: var(--rz-primary);
    background-color: #f0f8ff;
}

.logo-upload-area.dragover {
    border-color: var(--rz-primary);
    background-color: #e3f2fd;
    transform: scale(1.02);
}

.logo-preview {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.logo-preview img {
    max-width: 200px;
    max-height: 100px;
    object-fit: contain;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease;
}

.logo-preview img:hover {
    transform: scale(1.05);
}

.logo-validation-error {
    color: var(--rz-danger);
    font-size: 0.875rem;
    margin-top: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.logo-upload-instructions {
    background-color: var(--rz-base-100);
    border-left: 4px solid var(--rz-primary);
    padding: 1rem;
    border-radius: 4px;
    margin-bottom: 1rem;
}

.logo-upload-instructions .instruction-item {
    margin-bottom: 0.25rem;
    font-size: 0.875rem;
    color: var(--rz-text-secondary);
}

.logo-upload-instructions .instruction-item strong {
    color: var(--rz-text-color);
}

/* Dark mode adjustments (if Radzen theme supports it) */
@media (prefers-color-scheme: dark) {
    .hotel-card {
        background-color: var(--rz-base-300);
        border: 1px solid var(--rz-base-400);
    }
    
    .logo-upload-area {
        background-color: var(--rz-base-200);
        border-color: var(--rz-base-400);
    }
    
    .logo-upload-area:hover {
        background-color: var(--rz-base-300);
    }
}