/* ================================================================
   TENANT WIDGET MENU STYLES
   ================================================================ */

/* Spezielle Styling für Tenant-Widget im Menu */
.tenant-widget-menu-item {
    background: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.tenant-widget-menu-item a {
    background: none !important;
    border: none !important;
    padding: 0 !important;
    text-decoration: none !important;
}

.tenant-widget-menu-item:hover {
    background: none !important;
}

/* ================================================================
   BLAZOR ERROR UI STYLES
   ================================================================ */

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

/* ================================================================
   GLOBAL STYLES
   ================================================================ */

body {

}

/* ================================================================
   FORM FIELD HELPER - Required field marker
   ================================================================ */

/* Renders a red asterisk after the label text for required fields.
   Used by FormFieldHelper.razor when Required="true". */
.required::after {
    content: " *";
    color: var(--rz-danger, #dc3545);
}

:root .lpx-brand-logo {
    --lpx-logo: url('/images/logo/leptonx/logo-light.png');
    --lpx-logo-icon: url('/images/logo/leptonx/logo-light-thumbnail.png');
}

/* ================================================================
   TENANT SIMULATION COMPONENT STYLES
   ================================================================ */

/* ================================================================
   Z-INDEX HIERARCHY REFERENCE
   ================================================================
   All z-index overrides in this file follow a single stacking order.
   Update this table whenever you add or change a z-index value.

   Layer                              Class / Selector              z-index
   ──────────────────────────────────  ────────────────────────────  ───────
   1. Tenant simulation box           .tenant-simulation-box            100
   2. Blazor error UI                 #blazor-error-ui                 1000
   3. Radzen dialogs                  .rz-dialog-wrapper               1200
   4. Overlay                         .overlay                         9997
   5. Bootstrap modal backdrop        .modal-backdrop                  9998
   6. Bootstrap modal                 .modal                           9999
   7. Bootstrap modal dialog          .modal-dialog                   10000
   8. ABP modal                       .abp-modal                      10001
   9. SweetAlert2 container           .swal2-container                10002
  10. Notifications (Radzen growl)    .rz-growl                       10003
   ================================================================ */

/* Ensure modal dialogs are properly layered */
.modal {
    z-index: 9999 !important;
}

.modal-backdrop {
    z-index: 9998 !important;
}

/* Bootstrap modal fixes */
.modal-dialog {
    z-index: 10000 !important;
    position: relative;
}

/* ABP modal fixes */
.abp-modal {
    z-index: 10001 !important;
}

/* SweetAlert2 fixes — must render above Bootstrap/ABP modals (10001)
   but below notifications (10003) so toasts remain visible. */
.swal2-container {
    z-index: 10002 !important;
}

/* When SweetAlert2 is visible, pin the Bootstrap backdrop at its
   normal layer so it cannot jump above the SweetAlert2 overlay. */
.swal2-shown .modal-backdrop {
    z-index: 9998 !important;
}

/* Radzen component fixes */
.rz-dialog-wrapper {
    z-index: 1200 !important;
}

/* Force Radzen dialog to be truly centered in viewport (independent of sidebar) */
.rz-dialog {
    position: fixed !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    max-width: 90vw;
    overflow: visible !important; /* allow Radzen dropdown/popups to render outside the dialog bounds */
}

/* Tenant simulation box positioning and styling */
.tenant-simulation-box {
    position: fixed;
    top: 80px;
    right: 20px;
    z-index: 100 !important;
    background: var(--rz-base-background-color, #ffffff);
    border: 2px solid var(--rz-primary, #007bff);
    border-radius: 8px;
    padding: 15px;
    min-width: 300px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.tenant-simulation-box .simulation-header {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.tenant-simulation-box .simulation-header i {
    margin-right: 8px;
    color: var(--rz-primary, #007bff);
}

.tenant-simulation-box .simulation-header strong {
    color: var(--rz-primary, #007bff);
    font-weight: 600;
}

.tenant-simulation-box .alert {
    margin-bottom: 10px;
    padding: 8px 12px;
    font-size: 12px;
    border-radius: 4px;
}

.tenant-simulation-box .form-select {
    margin-bottom: 10px;
    border-radius: 4px;
    border: 1px solid #ced4da;
}

.tenant-simulation-box .btn-group {
    display: flex;
    gap: 8px;
}

.tenant-simulation-box .btn {
    font-size: 12px;
    padding: 6px 12px;
    border-radius: 4px;
    flex: 1;
}

/* Ensure overlays work properly */
.overlay {
    z-index: 9997 !important;
}

/* Support for simulation status indicators */
.simulation-active {
    background-color: #d1ecf1;
    border-color: #bee5eb;
}

.simulation-inactive {
    background-color: #f8f9fa;
    border-color: #e9ecef;
}

/* Animation for simulation state changes */
.tenant-simulation-box.transitioning {
    transition: all 0.3s ease;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .tenant-simulation-box {
        position: fixed;
        top: 60px;
        right: 10px;
        left: 10px;
        min-width: auto;
        max-width: calc(100vw - 20px);
    }
}

/* ================================================================
   MENU COLOR FIXES - Buchhaltungsverwaltung Untermenüs
   ================================================================ */

/* PERMISSION-BASIERTE FARBEN: Aktive Permissions = kräftige Farbe, Inaktive = ausgegraut */
/* Diese Regel überschreibt das ausgrauen für bessere Sichtbarkeit */
.lpx-nav-menu .lpx-nav-menu-item .lpx-nav-sub-menu .lpx-nav-menu-item a {
    color: var(--rz-text-secondary-color, #495057) !important; /* Kräftige dunkle Farbe anstatt ausgegraut */
    opacity: 1 !important;
}

/* Behalte Permission-basierte Optik aber mache sie sichtbarer */
.lpx-nav-menu .lpx-nav-menu-item .lpx-nav-sub-menu .lpx-nav-menu-item a[disabled],
.lpx-nav-menu .lpx-nav-menu-item .lpx-nav-sub-menu .lpx-nav-menu-item.disabled a {
    color: var(--rz-text-secondary-color, #6c757d) !important; /* Weniger ausgegraut aber trotzdem erkennbar */
    opacity: 0.8 !important;
}

/* Aktive/Hover Zustände für Untermenüs */
.lpx-nav-menu .lpx-nav-menu-item .lpx-nav-sub-menu .lpx-nav-menu-item a:hover {
    color: var(--rz-primary, #007bff) !important; /* Blaue Hover-Farbe */
    background-color: rgba(var(--rz-primary-rgb, 0, 123, 255), 0.1) !important;
}

/* Buchhaltungsverwaltung spezifische Fixes */
.lpx-nav-menu .lpx-nav-menu-item[data-menu="Accounting"] .lpx-nav-sub-menu .lpx-nav-menu-item a {
    color: var(--rz-text-secondary-color, #495057) !important;
    font-weight: 500 !important;
}

/* ================================================================
   TENANT IMPERSONATION WIDGET STYLES
   ================================================================ */

/* Tenant Impersonation Widget Styling */
.tenant-impersonation-widget {
    border-radius: 6px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.tenant-impersonation-widget .form-select-sm {
    font-size: 0.875rem;
}

.tenant-impersonation-widget .badge {
    font-size: 0.75rem;
}

/* Allgemeine Menü-Verbesserungen */
.lpx-nav-menu .lpx-nav-menu-item .lpx-nav-sub-menu {
    margin-top: 4px;
}

.lpx-nav-menu .lpx-nav-menu-item .lpx-nav-sub-menu .lpx-nav-menu-item {
    padding-left: 8px;
    margin-bottom: 2px;
}

/* ================================================================
   NOTIFICATION/GROWL UI IMPROVEMENTS
   ================================================================ */

/* Enhanced Radzen Notification System - BobRoss UI/UX Fix */
.rz-growl {
    /* Improved positioning and responsiveness */
    position: fixed;
    top: 80px !important; /* Account for header */
    right: 20px !important;
    min-width: 300px !important; /* Minimum readable width */
    max-width: 600px !important; /* Maximum width to prevent overstretching */
    width: auto !important;
    z-index: 10003 !important; /* Ensure notifications are above other components */
}

/* Flexible notification item container */
.rz-growl-item-container {
    background-color: transparent !important;
    margin-bottom: 8px !important;
    width: 100% !important;
}

/* Enhanced notification item styling */
.rz-growl-item {
    /* Flexible height and improved text handling */
    min-height: 60px !important;
    height: auto !important; /* Allow auto-height for long content */
    max-height: 300px !important; /* Prevent excessive height */
    padding: 16px 20px !important;
    margin: 0 !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    
    /* Text wrapping and overflow handling */
    word-wrap: break-word !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
    line-height: 1.5 !important;
    
    /* Scroll for very long content */
    overflow-y: auto !important;
    overflow-x: hidden !important;
    
    /* Smooth animations */
    transition: all 0.3s ease !important;
    
    /* Ensure proper display */
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
}

/* Icon positioning improvements */
.rz-growl-image {
    flex-shrink: 0 !important; /* Prevent icon from shrinking */
    margin: 4px 0 0 0 !important; /* Align with first line of text */
    font-size: 20px !important;
}

/* Text content styling */
.rz-growl-item .rz-growl-text {
    flex: 1 !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    margin: 0 !important;
    padding-right: 20px !important; /* Space for close button */
}

/* Close button positioning */
.rz-growl-item .rz-growl-close {
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
    width: 24px !important;
    height: 24px !important;
    border-radius: 50% !important;
    background-color: rgba(255, 255, 255, 0.2) !important;
    border: none !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 14px !important;
    opacity: 0.8 !important;
    transition: opacity 0.2s ease !important;
}

.rz-growl-item .rz-growl-close:hover {
    opacity: 1 !important;
    background-color: rgba(255, 255, 255, 0.3) !important;
}

/* Enhanced error notification styling */
.rz-growl-message-error .rz-growl-item {
    border-left: 5px solid var(--rz-danger) !important;
    background: linear-gradient(135deg, var(--rz-danger), var(--rz-danger-dark, #c82333)) !important;
}

/* Enhanced success notification styling */
.rz-growl-message-success .rz-growl-item {
    border-left: 5px solid var(--rz-success) !important;
    background: linear-gradient(135deg, var(--rz-success), var(--rz-success-dark, #218838)) !important;
}

/* Enhanced warning notification styling */
.rz-growl-message-warn .rz-growl-item {
    border-left: 5px solid var(--rz-warning) !important;
    background: linear-gradient(135deg, var(--rz-warning), var(--rz-warning-dark, #e0a800)) !important;
}

/* Enhanced info notification styling */
.rz-growl-message-info .rz-growl-item {
    border-left: 5px solid var(--rz-info) !important;
    background: linear-gradient(135deg, var(--rz-info), var(--rz-info-dark, #138496)) !important;
}

/* ================================================================
   DASHBOARD STAT CARD CLASSES — CSS variable-based
   ================================================================ */

/* Stat card variants used by ContractManagement UnifiedContracts and other dashboards */
.card-stat-primary { background: var(--rz-primary); color: var(--rz-on-primary-color, #fff); }
.card-stat-success { background: var(--rz-success); color: var(--rz-on-success-color, #fff); }
.card-stat-warning { background: var(--rz-warning); color: var(--rz-on-warning-color, #000); }
.card-stat-info    { background: var(--rz-info);    color: var(--rz-on-info-color, #fff); }

/* Mobile responsiveness for notifications */
@media (max-width: 768px) {
    .rz-growl {
        top: 60px !important;
        left: 10px !important;
        right: 10px !important;
        min-width: auto !important;
        max-width: calc(100vw - 20px) !important;
        width: calc(100vw - 20px) !important;
    }
    
    .rz-growl-item {
        padding: 12px 16px !important;
        max-height: 200px !important;
    }
    
    .rz-growl-item .rz-growl-text {
        font-size: 13px !important;
        padding-right: 30px !important;
    }
}

/* Animation improvements */
@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOutRight {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

.rz-growl-item {
    animation: slideInRight 0.3s ease-out !important;
}

.rz-growl-item.rz-growl-item-removing {
    animation: slideOutRight 0.3s ease-in !important;
}