/* ===================================================
   Akshaya Vault - RadzenDialog Styles
   Material3 Theme - Dynamic Light & Dark Mode
   Green Header Theme works with theme-detector.js
   =================================================== */

/* ===== Light Mode (Default) ===== */
.rz-panel-titlebar {
    flex-direction: row-reverse;
    justify-content: left;
}
/* Main dialog container */
.rz-dialog {
    background-image: url("../images/background.svg");
    border: 2px solid var(--forest-green) !important;
    border-radius: var(--rz-border-radius-3, 16px) !important;
    box-shadow: 0 8px 40px rgba(45, 134, 89, 0.2) !important;
}

/* Dialog header/title bar - GREEN THEME */
.rz-dialog-titlebar {
    background: linear-gradient(135deg, var(--forest-green) 0%, var(--deep-forest) 100%) !important;
    padding: 1rem !important;
    border-bottom: none !important;
    border-radius: var(--rz-border-radius-3, 16px) var(--rz-border-radius-3, 16px) 0 0 !important;
}

.rz-dialog-titlebar-close 
.rz-dialog-side-titlebar-close  {
    font-size: var(--rz-dialog-close-font-size);
    color: white !important;
    vertical-align: var(--rz-dialog-close-vertical-align)
}

/* Dialog title text */
.rz-dialog-title {
    font-weight: 700 !important;
    font-size: 1.5rem !important;
    font-family: 'Montserrat', 'Segoe UI', system-ui, -apple-system, sans-serif !important;
}
/* Close button (X) */
.rz-dialog-titlebar-icon {
    color: white !important;
    transition: background 0.2s ease !important;
}

.rz-dialog-titlebar-icon:hover {
    background: rgba(255, 255, 255, 0.2) !important;
    border-radius: 4px !important;
}

/* Dialog overlay (background behind dialog) */
.rz-dialog-mask {
    background-color: rgba(0, 0, 0, 0.5) !important;
    backdrop-filter: blur(4px) !important;
    transition: background-color 0.3s ease !important;
}


/* ===== Smooth Theme Transitions ===== */

.rz-dialog,
.rz-dialog-titlebar,
.rz-dialog-content,
.rz-dialog-mask {
    transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease !important;
}
/* ===== Material3 Compatibility ===== */

.rz-dialog {
    --rz-dialog-elevation: 24;
    border-radius: var(--rz-border-radius-3, 16px) !important;
}

.rz-dialog-titlebar {
    border-radius: var(--rz-border-radius-3, 16px) var(--rz-border-radius-3, 16px) 0 0 !important;
    background: var(--forest-green) !important;
}

/* Themed error dialog (ErrorHost -> ErrorDialog): it renders its own header, severity
   badge and Dismiss button, so suppress Radzen's generic titlebar entirely - otherwise an
   empty green bar sits on top of the card. */
.pims-error-dialog-host .rz-dialog-titlebar {
    display: none !important;
}

.pims-error-dialog-host .rz-dialog-content {
    border-radius: var(--rz-border-radius-3, 16px) !important;
}

.modal-close {
    position: sticky;
    top: 1rem;
    right: 1rem;
    float: right;
    width: 40px;
    height: 40px;
    background: white;
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 10px var(--shadow);
    transition: all 0.3s ease;
    z-index: 10;
}

/* ===== Tight-padding side dialogs (Notifications, Settings) =====
   Targets Radzen's built-in "rz-dialog-side-content" wrapper, which only side dialogs
   (OpenSideAsync) render - regular/centered dialogs use "rz-dialog-content" instead, so
   this leaves them untouched without needing a custom ContentCssClass on each call.
   The app has exactly two side dialogs (Notifications, Settings); both want this padding.
   Setting --rz-dialog-content-padding globally was the old approach and disturbed every
   other dialog's content spacing - hence the targeted class here. */
.rz-dialog-side-content {
    flex: 0 1 auto;
    overflow: auto;
    padding: 0.25rem !important;
}

/* ===== Print Styles ===== */

@media print {
    .rz-dialog-mask {
        display: none !important;
    }

    .rz-dialog {
        box-shadow: none !important;
        border: 2px solid #000 !important;
        position: relative !important;
        page-break-inside: avoid !important;
    }

    .rz-dialog-titlebar {
        background: var(--forest-green) !important;
        -webkit-print-color-adjust: exact !important;
        -moz-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
}