/* wwwroot/css/dialog.css */

/* -------------------------------------------------------
   RoofRunner Dialog Theme
   ------------------------------------------------------- */

.rr-dialog {
    --rr-radius-xl: 22px;
    --rr-radius-lg: 16px;
    --rr-radius-md: 12px;
    --rr-bg: color-mix(in srgb, var(--mud-palette-surface), #000 2%);
    --rr-card-bg: color-mix(in srgb, var(--mud-palette-surface), #000 1%);
    --rr-input-bg: color-mix(in srgb, var(--mud-palette-surface), #000 6%);
    --rr-input-bg-hover: color-mix(in srgb, var(--mud-palette-surface), #000 9%);
    --rr-border: color-mix(in srgb, var(--mud-palette-lines-default), var(--mud-palette-text-primary) 10%);
    --rr-border-strong: color-mix(in srgb, var(--mud-palette-lines-default), var(--mud-palette-text-primary) 22%);
    --rr-muted: color-mix(in srgb, var(--mud-palette-text-primary), transparent 35%);
    --rr-shadow: 0 18px 55px rgba(0, 0, 0, 0.18);
}

    /* -------------------------------------------------------
   Dialog shell
   ------------------------------------------------------- */

    .rr-dialog .mud-dialog,
    .mud-dialog.rr-dialog {
        border-radius: var(--rr-radius-xl) !important;
        overflow: hidden;
        background: var(--rr-bg);
        box-shadow: var(--rr-shadow);
    }

        .rr-dialog .mud-dialog-content,
        .mud-dialog.rr-dialog .mud-dialog-content {
            padding: 22px 24px 14px;
            background: radial-gradient(circle at top left, rgba(30, 174, 219, 0.08), transparent 34%), radial-gradient(circle at bottom right, rgba(217, 70, 239, 0.06), transparent 30%), var(--rr-bg);
        }

        .rr-dialog .mud-dialog-actions,
        .mud-dialog.rr-dialog .mud-dialog-actions {
            padding: 14px 24px 20px;
            background: color-mix(in srgb, var(--rr-bg), #000 3%);
            border-top: 1px solid var(--rr-border);
        }

        /* -------------------------------------------------------
   Cards / sections
   ------------------------------------------------------- */

        .rr-dialog-card,
        .rr-dialog .mud-card,
        .rr-dialog .mud-paper,
        .mud-dialog.rr-dialog .mud-card,
        .mud-dialog.rr-dialog .mud-paper {
            border-radius: var(--rr-radius-lg) !important;
        }

.rr-dialog-card {
    background: var(--rr-card-bg) !important;
    border: 1px solid var(--rr-border);
    box-shadow: none !important;
}

.rr-dialog-content {
    padding: 20px !important;
}

.rr-dialog-section {
    font-weight: 700 !important;
    letter-spacing: -0.01em;
}

.rr-dialog-muted,
.finances-muted,
.pd-muted,
.obj-muted {
    color: var(--rr-muted) !important;
}

.rr-dialog .mud-divider,
.mud-dialog.rr-dialog .mud-divider {
    border-color: var(--rr-border) !important;
}

/* -------------------------------------------------------
   Inputs / Selects / DatePicker / TimePicker
   ------------------------------------------------------- */

.rr-dialog .mud-input-control,
.mud-dialog.rr-dialog .mud-input-control {
    margin-top: 2px;
}

.rr-dialog .mud-input,
.rr-dialog .mud-field,
.mud-dialog.rr-dialog .mud-input,
.mud-dialog.rr-dialog .mud-field {
    background: var(--rr-input-bg) !important;
    border-radius: var(--rr-radius-md) !important;
    transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 120ms ease;
}

    .rr-dialog .mud-input:hover,
    .rr-dialog .mud-field:hover,
    .mud-dialog.rr-dialog .mud-input:hover,
    .mud-dialog.rr-dialog .mud-field:hover {
        background: var(--rr-input-bg-hover) !important;
    }

.rr-dialog .mud-input-outlined,
.mud-dialog.rr-dialog .mud-input-outlined {
    border-radius: var(--rr-radius-md) !important;
}

.rr-dialog .mud-input-outlined-border,
.mud-dialog.rr-dialog .mud-input-outlined-border {
    border-color: var(--rr-border) !important;
    border-radius: var(--rr-radius-md) !important;
}

.rr-dialog .mud-input:focus-within,
.rr-dialog .mud-field:focus-within,
.mud-dialog.rr-dialog .mud-input:focus-within,
.mud-dialog.rr-dialog .mud-field:focus-within {
    background: color-mix(in srgb, var(--rr-input-bg), var(--mud-palette-primary) 4%) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mud-palette-primary), transparent 82%);
}

    .rr-dialog .mud-input:focus-within .mud-input-outlined-border,
    .mud-dialog.rr-dialog .mud-input:focus-within .mud-input-outlined-border {
        border-color: var(--mud-palette-primary) !important;
    }

.rr-dialog .mud-input-label,
.mud-dialog.rr-dialog .mud-input-label {
    font-weight: 600;
    color: color-mix(in srgb, var(--mud-palette-text-primary), transparent 15%) !important;
}

.rr-dialog .mud-input-slot,
.rr-dialog input,
.rr-dialog textarea,
.mud-dialog.rr-dialog .mud-input-slot,
.mud-dialog.rr-dialog input,
.mud-dialog.rr-dialog textarea {
    color: var(--mud-palette-text-primary) !important;
}

    .rr-dialog input::placeholder,
    .rr-dialog textarea::placeholder,
    .mud-dialog.rr-dialog input::placeholder,
    .mud-dialog.rr-dialog textarea::placeholder {
        color: color-mix(in srgb, var(--mud-palette-text-primary), transparent 55%) !important;
    }

/* -------------------------------------------------------
   Validation: roter Text, keine rote Box
   ------------------------------------------------------- */

.rr-dialog .mud-input-control-error .mud-input,
.rr-dialog .mud-input-control-error .mud-field,
.mud-dialog.rr-dialog .mud-input-control-error .mud-input,
.mud-dialog.rr-dialog .mud-input-control-error .mud-field {
    background: var(--rr-input-bg) !important;
    box-shadow: none !important;
}

    .rr-dialog .mud-input-control-error .mud-input:hover,
    .rr-dialog .mud-input-control-error .mud-field:hover,
    .mud-dialog.rr-dialog .mud-input-control-error .mud-input:hover,
    .mud-dialog.rr-dialog .mud-input-control-error .mud-field:hover {
        background: var(--rr-input-bg-hover) !important;
    }

    .rr-dialog .mud-input-control-error .mud-input:focus-within,
    .rr-dialog .mud-input-control-error .mud-field:focus-within,
    .mud-dialog.rr-dialog .mud-input-control-error .mud-input:focus-within,
    .mud-dialog.rr-dialog .mud-input-control-error .mud-field:focus-within {
        background: color-mix(in srgb, var(--rr-input-bg), var(--mud-palette-primary) 4%) !important;
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--mud-palette-primary), transparent 82%) !important;
    }

.rr-dialog .mud-input-control-error .mud-input-outlined-border,
.mud-dialog.rr-dialog .mud-input-control-error .mud-input-outlined-border {
    border-color: var(--rr-border) !important;
}

.rr-dialog .mud-error-text,
.rr-dialog .mud-input-helper-text.mud-error-text,
.rr-dialog .mud-input-control-error .mud-input-helper-text,
.mud-dialog.rr-dialog .mud-error-text,
.mud-dialog.rr-dialog .mud-input-helper-text.mud-error-text,
.mud-dialog.rr-dialog .mud-input-control-error .mud-input-helper-text {
    color: var(--mud-palette-error) !important;
    font-size: 0.75rem;
    font-weight: 500;
    margin-top: 4px;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    box-shadow: none !important;
}

/* Custom validation text */
.rr-validation-error {
    color: var(--mud-palette-error) !important;
    font-size: 0.75rem !important;
    font-weight: 500 !important;
    margin-top: 4px !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    box-shadow: none !important;
}

/* Disabled fields */
.rr-dialog .mud-disabled,
.mud-dialog.rr-dialog .mud-disabled {
    opacity: 0.72 !important;
}

.rr-dialog .mud-input.mud-disabled,
.rr-dialog .mud-field.mud-disabled,
.mud-dialog.rr-dialog .mud-input.mud-disabled,
.mud-dialog.rr-dialog .mud-field.mud-disabled {
    background: color-mix(in srgb, var(--rr-input-bg), transparent 18%) !important;
}

/* File input */
.rr-dialog input[type="file"],
.mud-dialog.rr-dialog input[type="file"] {
    width: 100%;
    padding: 12px;
    border-radius: var(--rr-radius-md);
    border: 1px dashed var(--rr-border-strong);
    background: var(--rr-input-bg);
    cursor: pointer;
}

    .rr-dialog input[type="file"]:hover,
    .mud-dialog.rr-dialog input[type="file"]:hover {
        background: var(--rr-input-bg-hover);
        border-color: var(--mud-palette-primary);
    }

/* -------------------------------------------------------
   Buttons
   ------------------------------------------------------- */

.rr-dialog .mud-button,
.mud-dialog.rr-dialog .mud-button {
    border-radius: 999px !important;
    text-transform: none !important;
    font-weight: 700 !important;
    letter-spacing: 0;
}

.rr-primary-btn,
.rr-dialog .mud-button-filled.mud-button-filled-dark,
.mud-dialog.rr-dialog .mud-button-filled.mud-button-filled-dark {
    background: linear-gradient(135deg, #111827, #1f2937 48%, #0f172a) !important;
    color: white !important;
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.22) !important;
}

    .rr-primary-btn:hover,
    .rr-dialog .mud-button-filled.mud-button-filled-dark:hover,
    .mud-dialog.rr-dialog .mud-button-filled.mud-button-filled-dark:hover {
        filter: brightness(1.08);
        transform: translateY(-1px);
    }

.rr-dialog .mud-button-outlined,
.mud-dialog.rr-dialog .mud-button-outlined {
    border-color: var(--rr-border-strong) !important;
}

.rr-dialog .mud-icon-button,
.mud-dialog.rr-dialog .mud-icon-button {
    border-radius: 999px !important;
}

/* -------------------------------------------------------
   Alerts / Chips / Progress
   ------------------------------------------------------- */

.rr-dialog .mud-alert,
.mud-dialog.rr-dialog .mud-alert {
    border-radius: var(--rr-radius-lg) !important;
    border-width: 1px !important;
}

.rr-dialog .mud-chip,
.mud-dialog.rr-dialog .mud-chip {
    border-radius: 999px !important;
    font-weight: 600;
}

.rr-dialog .mud-progress-linear,
.mud-dialog.rr-dialog .mud-progress-linear {
    border-radius: 999px;
    overflow: hidden;
}

/* -------------------------------------------------------
   Tables
   ------------------------------------------------------- */

.finances-table,
.rr-dialog .mud-table,
.mud-dialog.rr-dialog .mud-table {
    border-radius: var(--rr-radius-lg);
    overflow: hidden;
    border: 1px solid var(--rr-border);
    background: var(--rr-card-bg) !important;
}

    .finances-table .mud-table-head,
    .rr-dialog .mud-table-head,
    .mud-dialog.rr-dialog .mud-table-head {
        background: color-mix(in srgb, var(--mud-palette-surface), #000 7%);
    }

    .finances-table .mud-table-cell,
    .rr-dialog .mud-table-cell,
    .mud-dialog.rr-dialog .mud-table-cell {
        border-bottom-color: var(--rr-border) !important;
    }

    .finances-table .mud-table-row:hover,
    .rr-dialog .mud-table-row:hover,
    .mud-dialog.rr-dialog .mud-table-row:hover {
        background: color-mix(in srgb, var(--mud-palette-primary), transparent 92%) !important;
    }

/* -------------------------------------------------------
   Comments / task details
   ------------------------------------------------------- */

.rr-comments-scroll {
    max-height: 320px;
    overflow-y: auto;
    padding-right: 4px;
}

.rr-comment-item {
    background: color-mix(in srgb, var(--mud-palette-surface), #000 3%) !important;
    border-color: var(--rr-border) !important;
}

.htd-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.htd-card-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* -------------------------------------------------------
   Scrollbar
   ------------------------------------------------------- */

.rr-dialog *::-webkit-scrollbar,
.mud-dialog.rr-dialog *::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.rr-dialog *::-webkit-scrollbar-thumb,
.mud-dialog.rr-dialog *::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--mud-palette-text-primary), transparent 75%);
    border-radius: 999px;
    border: 3px solid transparent;
    background-clip: content-box;
}

    .rr-dialog *::-webkit-scrollbar-thumb:hover,
    .mud-dialog.rr-dialog *::-webkit-scrollbar-thumb:hover {
        background: color-mix(in srgb, var(--mud-palette-text-primary), transparent 62%);
        border: 3px solid transparent;
        background-clip: content-box;
    }

/* -------------------------------------------------------
   Responsive
   ------------------------------------------------------- */

@media (max-width: 600px) {
    .rr-dialog .mud-dialog-content,
    .mud-dialog.rr-dialog .mud-dialog-content {
        padding: 16px 14px 10px;
    }

    .rr-dialog .mud-dialog-actions,
    .mud-dialog.rr-dialog .mud-dialog-actions {
        padding: 12px 14px 16px;
        gap: 8px;
    }

        .rr-dialog .mud-dialog-actions .mud-button,
        .mud-dialog.rr-dialog .mud-dialog-actions .mud-button {
            flex: 1;
        }
}