/* ==========================================================================
   FinanceProject — Dialogs (Corporate)
   File: wwwroot/css/dialogs.css
   Applies to dialogs that use: <MudDialog Class="fp-dialog">
   ========================================================================== */

/* --------------------------------------------------------------------------
   00. Tokens (easy theming)
   -------------------------------------------------------------------------- */
:root {
    --fp-dlg-radius: 16px;
    --fp-dlg-pad: 18px;
    --fp-dlg-bg: #ffffff;
    --fp-dlg-border: rgba(15, 23, 42, 0.10);
    --fp-dlg-shadow: 0 18px 45px rgba(2, 6, 23, 0.18);
    --fp-dlg-text: #0f172a;
    --fp-dlg-muted: rgba(15, 23, 42, 0.62);
    --fp-dlg-field-bg: rgba(2, 6, 23, 0.02);
    --fp-dlg-field-border: rgba(15, 23, 42, 0.12);
    --fp-dlg-field-border-focus: rgba(30, 64, 175, 0.55); /* aligns with your theme primary-ish */
    --fp-dlg-ring: 0 0 0 4px rgba(30, 64, 175, 0.14);
    --fp-dlg-divider: rgba(15, 23, 42, 0.08);
    --fp-dlg-chip-bg: rgba(15, 23, 42, 0.04);
    --fp-dlg-success: rgba(21, 128, 61, 1);
    --fp-dlg-danger: rgba(185, 28, 28, 1);
    --fp-dlg-scroll-thumb: rgba(2, 6, 23, 0.22);
    --fp-dlg-scroll-track: rgba(2, 6, 23, 0.06);
}

/* --------------------------------------------------------------------------
   01. Dialog shell / layout
   -------------------------------------------------------------------------- */
.fp-dialog {
    border-radius: var(--fp-dlg-radius);
    background: var(--fp-dlg-bg);
    border: 1px solid var(--fp-dlg-border);
    box-shadow: var(--fp-dlg-shadow);
    overflow: hidden;
}

    /* MudBlazor renders content/actions wrappers; keep consistent padding */
    .fp-dialog .mud-dialog-content {
        padding: var(--fp-dlg-pad);
        color: var(--fp-dlg-text);
    }

    .fp-dialog .mud-dialog-actions {
        padding: 12px var(--fp-dlg-pad);
        border-top: 1px solid var(--fp-dlg-divider);
        background: linear-gradient(to bottom, rgba(255,255,255,0.6), rgba(255,255,255,1));
    }

/* Title + subtitle */
.fp-dialog-title {
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--fp-dlg-text);
    line-height: 1.2;
}

.fp-dialog .mud-typography-body2,
.fp-dialog .mud-typography-body1 {
    color: var(--fp-dlg-muted);
}

/* Small “header separation” feel without needing extra markup */
.fp-dialog .mud-dialog-content > .mud-stack {
    gap: 12px;
}

/* --------------------------------------------------------------------------
   02. Fields / inputs (MudTextField etc.)
   -------------------------------------------------------------------------- */
.fp-dialog-field {
    border-radius: 14px;
}

/* Outlined input root */
.fp-dialog .mud-input-control .mud-input-outlined-border {
    border-color: var(--fp-dlg-field-border);
}

/* Input surface */
.fp-dialog .mud-input-outlined {
    background: var(--fp-dlg-field-bg);
    border-radius: 14px;
}

/* Label */
.fp-dialog .mud-input-label {
    color: rgba(15, 23, 42, 0.72);
    font-weight: 600;
}

/* Focus ring */
.fp-dialog .mud-input:focus-within .mud-input-outlined-border {
    border-color: var(--fp-dlg-field-border-focus);
}

.fp-dialog .mud-input:focus-within .mud-input-outlined {
    box-shadow: var(--fp-dlg-ring);
}

/* Helper text / validation */
.fp-dialog .mud-input-helper-text {
    color: rgba(15, 23, 42, 0.55);
}

.fp-dialog .mud-input-error .mud-input-outlined-border {
    border-color: rgba(185, 28, 28, 0.55);
}

.fp-dialog .mud-input-error .mud-input-outlined {
    box-shadow: 0 0 0 4px rgba(185, 28, 28, 0.12);
}

/* --------------------------------------------------------------------------
   03. Actions (Cancel/Save)
   -------------------------------------------------------------------------- */
.fp-dialog-actions {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

/* Buttons: make them look like corporate admin actions */
.fp-dialog .mud-button-root {
    border-radius: 12px;
    text-transform: none;
    font-weight: 700;
    letter-spacing: 0;
    padding: 10px 14px;
    min-height: 40px;
}

/* Text button (Cancel) -> subtle */
.fp-dialog .mud-button-text {
    color: rgba(15, 23, 42, 0.72);
}

    .fp-dialog .mud-button-text:hover {
        background: rgba(2, 6, 23, 0.04);
    }

/* Filled primary (Save) -> crisp */
.fp-dialog .mud-button-filled-primary {
    box-shadow: 0 10px 22px rgba(30, 64, 175, 0.18);
}

    .fp-dialog .mud-button-filled-primary:hover {
        transform: translateY(-1px);
        box-shadow: 0 14px 26px rgba(30, 64, 175, 0.22);
    }

/* Disabled states */
.fp-dialog .mud-button-disabled {
    opacity: 0.55;
}

/* --------------------------------------------------------------------------
   04. Scrollable list panel (roles/permissions list)
   Your markup uses MudPaper + inline max-height + overflow:auto
   -------------------------------------------------------------------------- */
.fp-dialog .fp-dialog-field.mud-paper-outlined {
    border-color: var(--fp-dlg-divider);
    background: rgba(2, 6, 23, 0.015);
    border-radius: 14px;
}

/* Make checklists feel like a professional “settings” list */
.fp-dialog .fp-dialog-field .mud-stack {
    gap: 2px;
}

/* Checkbox row */
.fp-dialog .mud-checkbox {
    border-radius: 12px;
    padding: 8px 10px;
}

    .fp-dialog .mud-checkbox:hover {
        background: rgba(2, 6, 23, 0.04);
    }

    /* Checkbox label typography */
    .fp-dialog .mud-checkbox .mud-checkbox-label {
        font-weight: 650;
        color: rgba(15, 23, 42, 0.84);
    }

    /* Checkbox icon tint: keep it calm */
    .fp-dialog .mud-checkbox .mud-icon-root {
        opacity: 0.92;
    }

/* Scrollbar (WebKit + modern browsers) */
.fp-dialog *::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.fp-dialog *::-webkit-scrollbar-track {
    background: var(--fp-dlg-scroll-track);
    border-radius: 999px;
}

.fp-dialog *::-webkit-scrollbar-thumb {
    background: var(--fp-dlg-scroll-thumb);
    border-radius: 999px;
    border: 2px solid rgba(255,255,255,0.6);
}

/* --------------------------------------------------------------------------
   05. Switch (Active toggle in edit dialogs)
   -------------------------------------------------------------------------- */
.fp-dialog .mud-switch {
    padding: 6px 0;
}

    .fp-dialog .mud-switch span,
    .fp-dialog .mud-switch-label {
        font-weight: 650;
        color: rgba(15, 23, 42, 0.82);
    }

/* --------------------------------------------------------------------------
   06. Dialog-specific polish (optional helpers)
   -------------------------------------------------------------------------- */

/* A) “Assign Roles” and “Set Role Permissions” dialogs:
      Make the list panel read like a settings section */
.fp-dialog .fp-dialog-title + .mud-typography-body2 {
    margin-top: -4px;
}

/* B) Password dialog:
      keep field extra clean and aligned */
.fp-dialog .mud-input-control {
    margin-top: 6px;
}

/* C) Compact on small screens */
@media (max-width: 600px) {
    .fp-dialog .mud-dialog-content {
        padding: 14px;
    }

    .fp-dialog .mud-dialog-actions {
        padding: 10px 14px;
    }

    .fp-dialog-actions {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .fp-dialog .mud-button-root {
        width: 100%;
    }
}