/* ══════════════════════════════════════════════════════════════════
   AmlShield — Polished Form Controls (system-wide)
   Reusable patterns for inline-add cards, field labels, level pills,
   target chips, and modern outlined inputs inside dialogs.

   Loaded after MudBlazor.min.css so these rules win the cascade.
   ══════════════════════════════════════════════════════════════════ */

/* ── Unified "row surface" gray ────────────────────────────────────
   One gray used everywhere that needs a quiet banded surface:
   · add-card background
   · table header row
   · empty-state tips
   Keeping a single token guarantees both surfaces render identically. */
:root {
    --aml-row-bg: #fafbfc;
    --aml-row-border: #e4e7ec;
}
[data-theme="dark"],
.mud-theme-dark {
    --aml-row-bg: #14141b;
    --aml-row-border: rgba(255, 255, 255, 0.08);
}

/* ── Inline-Add Card ─────────────────────────────────────────────
   Used at the top of list-management dialogs (escalation levels,
   compliance group members, conditions, etc.) to host a quick-add
   form above a data table. */
.aml-add-card {
    background: var(--aml-row-bg);
    border: 1px solid var(--aml-row-border);
    border-radius: 8px;
    padding: 14px 16px;
    margin-bottom: 16px;
}

.aml-add-card-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    font-size: 13px;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}
.aml-add-card-title .mud-icon-root {
    font-size: 18px !important;
    color: var(--mud-palette-primary);
}
.aml-add-card-meta {
    margin-inline-start: auto;
    font-size: 11px;
    color: var(--mud-palette-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 500;
}

/* Two-row 4-col form grid */
.aml-form-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}
.aml-form-grid.row-2 {
    margin-top: 12px;
    grid-template-columns: 1fr 1fr 1fr auto;
    align-items: end;
}
@media (max-width: 768px) {
    .aml-form-grid,
    .aml-form-grid.row-2 {
        grid-template-columns: 1fr 1fr;
    }
}
@media (max-width: 480px) {
    .aml-form-grid,
    .aml-form-grid.row-2 {
        grid-template-columns: 1fr;
    }
}

/* Tiny uppercase field label above each input */
.aml-field-label {
    display: block;
    font-size: 10.5px;
    font-weight: 500;
    color: var(--mud-palette-text-secondary);
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    line-height: 1.2;
    user-select: none;
}
.aml-field-label .req {
    color: var(--mud-palette-error);
    margin-inline-start: 2px;
}

/* ── Outlined inputs INSIDE add-card / form-grid ──────────────────
   Force MudBlazor outlined inputs into a tight, modern look that
   matches the concept exactly: 34px height, 10px horizontal padding,
   13px text, 6px radius, no floating labels. */

.aml-form-grid .mud-input-control,
.aml-add-card .mud-input-control,
.aml-form-grid .mud-input-control-input-container,
.aml-add-card .mud-input-control-input-container,
.aml-form-grid .mud-input-control-helper-container,
.aml-add-card .mud-input-control-helper-container {
    margin-top: 0 !important;
}

/* The outlined wrapper (background + border container) */
.aml-form-grid .mud-input.mud-input-outlined,
.aml-add-card .mud-input.mud-input-outlined {
    background: var(--mud-palette-surface);
    border-radius: 6px;
    margin-top: 0 !important;
}

/* The input row — strict 34px height, exact 10px horizontal padding */
.aml-form-grid .mud-input.mud-input-outlined .mud-input-slot,
.aml-add-card  .mud-input.mud-input-outlined .mud-input-slot,
.aml-form-grid .mud-select.mud-input-outlined .mud-input-slot,
.aml-add-card  .mud-select.mud-input-outlined .mud-input-slot {
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    padding: 0 10px !important;
    font-size: 13px !important;
    line-height: 1 !important;
    box-sizing: border-box !important;
}

/* The actual <input> / <select> element — no extra padding */
.aml-form-grid .mud-input.mud-input-outlined .mud-input-slot input,
.aml-form-grid .mud-input.mud-input-outlined .mud-input-slot .mud-select-input,
.aml-add-card  .mud-input.mud-input-outlined .mud-input-slot input,
.aml-add-card  .mud-input.mud-input-outlined .mud-input-slot .mud-select-input {
    padding: 0 !important;
    margin: 0 !important;
    height: 34px !important;
    line-height: 34px !important;
    font-size: 13px !important;
    color: var(--mud-palette-text-primary);
    background: transparent !important;
}

/* Adornment (clear/dropdown/search icons) — keep them tight inside the 34px row */
.aml-form-grid .mud-input.mud-input-outlined .mud-input-adornment,
.aml-add-card  .mud-input.mud-input-outlined .mud-input-adornment {
    margin: 0 !important;
}
.aml-form-grid .mud-input.mud-input-outlined .mud-input-adornment .mud-icon-root,
.aml-add-card  .mud-input.mud-input-outlined .mud-input-adornment .mud-icon-root,
.aml-form-grid .mud-input.mud-input-outlined .mud-input-adornment .mud-icon-button,
.aml-add-card  .mud-input.mud-input-outlined .mud-input-adornment .mud-icon-button {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    padding: 0 !important;
    font-size: 18px !important;
}

/* Outline border — thin, tinted, with smooth focus ring */
.aml-form-grid .mud-input-outlined .mud-input-outlined-border,
.aml-add-card  .mud-input-outlined .mud-input-outlined-border {
    border-color: var(--mud-palette-lines-default) !important;
    border-width: 1px !important;
    border-radius: 6px !important;
    top: 0 !important;
    transition: border-color 150ms ease, box-shadow 150ms ease;
}
.aml-form-grid .mud-input-outlined:hover:not(.mud-input-focused):not(.mud-disabled) .mud-input-outlined-border,
.aml-add-card  .mud-input-outlined:hover:not(.mud-input-focused):not(.mud-disabled) .mud-input-outlined-border {
    border-color: var(--mud-palette-text-secondary) !important;
}
.aml-form-grid .mud-input-outlined.mud-input-focused .mud-input-outlined-border,
.aml-add-card  .mud-input-outlined.mud-input-focused .mud-input-outlined-border {
    border-color: var(--mud-palette-primary) !important;
    border-width: 1.5px !important;
    box-shadow: 0 0 0 3px rgba(var(--mud-palette-primary-rgb), 0.12);
}

/* Hide MudBlazor's floating label + the gap it cuts in the fieldset border */
.aml-form-grid .mud-input-label,
.aml-add-card  .mud-input-label {
    display: none !important;
}
.aml-form-grid .mud-input.mud-input-outlined .mud-input-outlined-border legend,
.aml-add-card  .mud-input.mud-input-outlined .mud-input-outlined-border legend {
    width: 0 !important;
    max-width: 0 !important;
    padding: 0 !important;
    visibility: hidden !important;
}

/* Helper text — small, tight, doesn't push layout much */
.aml-form-grid .mud-input-helper-text,
.aml-add-card  .mud-input-helper-text {
    font-size: 11px !important;
    margin-top: 3px !important;
    margin-bottom: 0 !important;
    line-height: 1.3 !important;
    padding: 0 !important;
    color: var(--mud-palette-text-secondary);
}

/* Hide native numeric spinners */
.aml-add-card  input[type="number"]::-webkit-outer-spin-button,
.aml-add-card  input[type="number"]::-webkit-inner-spin-button,
.aml-form-grid input[type="number"]::-webkit-outer-spin-button,
.aml-form-grid input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}
.aml-add-card  input[type="number"],
.aml-form-grid input[type="number"] {
    -moz-appearance: textfield !important;
}

/* Disabled fields — read as muted, not broken */
.aml-form-grid .mud-input-outlined.mud-disabled .mud-input-outlined-border,
.aml-add-card  .mud-input-outlined.mud-disabled .mud-input-outlined-border {
    border-color: var(--mud-palette-divider) !important;
    border-style: dashed !important;
}
.aml-form-grid .mud-input.mud-input-outlined.mud-disabled .mud-input-slot,
.aml-add-card  .mud-input.mud-input-outlined.mud-disabled .mud-input-slot {
    background: var(--mud-palette-action-disabled-background);
    color: var(--mud-palette-text-disabled);
}

/* ── Outlined "Add" button — quiet but clear, matches field height ── */
.aml-btn-add,
.aml-btn-add.mud-button-root {
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 18px !important;
    border: 1.5px solid var(--mud-palette-primary) !important;
    color: var(--mud-palette-primary) !important;
    background: transparent !important;
    border-radius: 6px !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    box-shadow: none !important;
    transition: background 150ms ease, border-color 150ms ease;
}
.aml-btn-add:hover,
.aml-btn-add.mud-button-root:hover {
    background: rgba(var(--mud-palette-primary-rgb), 0.08) !important;
    box-shadow: none !important;
}
.aml-btn-add:disabled,
.aml-btn-add.mud-button-root.mud-disabled {
    border-color: var(--mud-palette-divider) !important;
    color: var(--mud-palette-text-disabled) !important;
    background: transparent !important;
    cursor: not-allowed !important;
}
.aml-btn-add .mud-button-icon-start,
.aml-btn-add.mud-button-root .mud-button-icon-start {
    margin-inline-end: 6px !important;
    margin-inline-start: -2px !important;
}
.aml-btn-add .mud-icon-root,
.aml-btn-add.mud-button-root .mud-icon-root {
    font-size: 16px !important;
    width: 16px !important;
    height: 16px !important;
}

/* ── Polished table ────────────────────────────────────────────── */
.aml-data-table {
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-divider);
    border-radius: 8px;
    overflow: hidden;
}
.aml-data-table table {
    width: 100%;
    border-collapse: collapse;
}
.aml-data-table thead th {
    background: var(--aml-row-bg);
    text-align: start;
    font-size: 11px;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 10px 14px;
    border-bottom: 1px solid var(--mud-palette-divider);
    white-space: nowrap;
}
.aml-data-table tbody td {
    padding: 12px 14px;
    font-size: 13px;
    color: var(--mud-palette-text-primary);
    border-bottom: 1px solid var(--mud-palette-divider);
    vertical-align: middle;
}
.aml-data-table tbody tr:last-child td { border-bottom: none; }
.aml-data-table tbody tr:hover { background: var(--aml-row-bg); }

/* Empty body */
.aml-data-table .aml-empty {
    padding: 48px 24px;
    text-align: center;
}
.aml-data-table .aml-empty .icon {
    font-size: 40px !important;
    color: var(--mud-palette-text-disabled);
    margin-bottom: 12px;
}
.aml-data-table .aml-empty .title {
    font-size: 14px;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    margin-bottom: 6px;
}
.aml-data-table .aml-empty .desc {
    font-size: 12px;
    color: var(--mud-palette-text-secondary);
    max-width: 360px;
    margin: 0 auto;
}
.aml-data-table .aml-empty-tips {
    margin-top: 20px;
    max-width: 460px;
    margin-inline: auto;
    text-align: start;
    background: var(--aml-row-bg);
    border: 1px solid var(--aml-row-border);
    border-radius: 6px;
    padding: 12px 16px;
    font-size: 12px;
    color: var(--mud-palette-text-secondary);
    line-height: 1.7;
}
.aml-data-table .aml-empty-tips strong { color: var(--mud-palette-text-primary); }

/* ── Level pill (numbered circular badge) ─────────────────────── */
.aml-level-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    font-weight: 700;
    font-size: 12px;
    background: rgba(var(--mud-palette-primary-rgb), 0.1);
    color: var(--mud-palette-primary);
}

/* ── Target type chip ─────────────────────────────────────────── */
.aml-target-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.6;
    margin-inline-end: 8px;
}
.aml-target-chip.role  { background: rgba(var(--mud-palette-primary-rgb), 0.1);  color: var(--mud-palette-primary);  }
.aml-target-chip.user  { background: rgba(var(--mud-palette-success-rgb), 0.1);  color: var(--mud-palette-success);  }
.aml-target-chip.group { background: rgba(var(--mud-palette-info-rgb), 0.1);     color: var(--mud-palette-info);     }

/* Mono helper */
.aml-mono {
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    font-size: 13px;
    color: var(--mud-palette-text-primary);
}

/* Quiet icon button (for Edit/Delete in tables) */
.aml-ic-btn {
    background: transparent !important;
    border: none !important;
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    color: var(--mud-palette-text-disabled) !important;
    border-radius: 5px !important;
    transition: color 150ms, background 150ms;
}
.aml-ic-btn:hover {
    color: var(--mud-palette-primary) !important;
    background: rgba(var(--mud-palette-primary-rgb), 0.08) !important;
}
.aml-ic-btn.danger:hover {
    color: var(--mud-palette-error) !important;
    background: rgba(var(--mud-palette-error-rgb), 0.08) !important;
}