/* ============================================================
   mud-theme.css
   A hand-written stylesheet that reproduces MudBlazor's
   Material Design identity (colors, elevation, typography,
   buttons, inputs, cards) WITHOUT the MudBlazor library.
   Use it with plain Microsoft.AspNetCore.Components only.
   ============================================================ */

/* Roboto — MudBlazor's default type family */
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap");

/* ------------------------------------------------------------
   1. Design tokens (MudBlazor default light palette)
   ------------------------------------------------------------ */
:root {
    /* Brand colors */
    --mud-primary:        #594AE2;
    --mud-primary-hover:  rgba(89, 74, 226, 0.06);
    --mud-primary-active: rgba(89, 74, 226, 0.12);
    --mud-secondary:      #FF4081;
    --mud-tertiary:       #1EC8A5;
    --mud-success:        #00C853;
    --mud-info:           #2196F3;
    --mud-warning:        #FF9800;
    --mud-error:          #F44336;
    --mud-dark:           #424242;

    /* Surfaces & text */
    --mud-surface:        #FFFFFF;
    --mud-background:      #F5F5F5;
    --mud-text-primary:   rgba(0, 0, 0, 0.87);
    --mud-text-secondary: rgba(0, 0, 0, 0.60);
    --mud-text-disabled:  rgba(0, 0, 0, 0.38);
    --mud-divider:        rgba(0, 0, 0, 0.12);
    --mud-input-border:   rgba(0, 0, 0, 0.42);
    --mud-action-hover:   rgba(0, 0, 0, 0.04);

    /* Shape */
    --mud-radius:         4px;
    --mud-radius-lg:      8px;

    /* Material elevation (the exact shadows MudBlazor ships) */
    --mud-elevation-1: 0 2px 1px -1px rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.14), 0 1px 3px 0 rgba(0,0,0,.12);
    --mud-elevation-2: 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12);
    --mud-elevation-3: 0 3px 3px -2px rgba(0,0,0,.2), 0 3px 4px 0 rgba(0,0,0,.14), 0 1px 8px 0 rgba(0,0,0,.12);
    --mud-elevation-4: 0 2px 4px -1px rgba(0,0,0,.2), 0 4px 5px 0 rgba(0,0,0,.14), 0 1px 10px 0 rgba(0,0,0,.12);
    --mud-elevation-6: 0 3px 5px -1px rgba(0,0,0,.2), 0 6px 10px 0 rgba(0,0,0,.14), 0 1px 18px 0 rgba(0,0,0,.12);
    --mud-elevation-8: 0 5px 5px -3px rgba(0,0,0,.2), 0 8px 10px 1px rgba(0,0,0,.14), 0 3px 14px 2px rgba(0,0,0,.12);
}

/* ------------------------------------------------------------
   2. Base typography (Material type scale)
   ------------------------------------------------------------ */
body {
    margin: 0;
    font-family: "Roboto", "Helvetica", "Arial", sans-serif;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--mud-text-primary);
    background-color: var(--mud-background);
    -webkit-font-smoothing: antialiased;
}

h1, .mud-h1 { font-size: 3.75rem; font-weight: 300; line-height: 1.167; letter-spacing: -.01562em; margin: 0 0 .5em; }
h2, .mud-h2 { font-size: 3rem;    font-weight: 300; line-height: 1.2;   letter-spacing: -.00833em; margin: 0 0 .5em; }
h3, .mud-h3 { font-size: 2.125rem;font-weight: 400; line-height: 1.235; margin: 0 0 .5em; }
h4, .mud-h4 { font-size: 1.5rem;  font-weight: 400; line-height: 1.334; letter-spacing: .0073em; margin: 0 0 .5em; }
h5, .mud-h5 { font-size: 1.25rem; font-weight: 500; line-height: 1.6;   letter-spacing: .0094em; margin: 0 0 .5em; }
h6, .mud-h6 { font-size: 1.125rem;font-weight: 500; line-height: 1.6;   letter-spacing: .0075em; margin: 0 0 .5em; }
.mud-text-secondary { color: var(--mud-text-secondary); }
.mud-caption { font-size: .75rem; color: var(--mud-text-secondary); letter-spacing: .03333em; }

/* ------------------------------------------------------------
   3. Buttons (.mud-button + variants)
   Pair with a plain <button> element.
   ------------------------------------------------------------ */
.mud-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 64px;
    padding: 6px 16px;
    border: none;
    border-radius: var(--mud-radius);
    font-family: inherit;
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.75;
    letter-spacing: .02857em;
    text-transform: uppercase;
    cursor: pointer;
    user-select: none;
    background: transparent;
    color: var(--mud-primary);
    transition: background-color .2s, box-shadow .2s, border-color .2s;
}
.mud-button:focus-visible { outline: 2px solid var(--mud-primary); outline-offset: 2px; }
.mud-button:disabled { color: var(--mud-text-disabled); cursor: default; box-shadow: none; pointer-events: none; }

/* Text variant (default) */
.mud-button:hover { background-color: var(--mud-primary-hover); }
.mud-button:active { background-color: var(--mud-primary-active); }

/* Filled / contained variant */
.mud-button--filled {
    color: #fff;
    background-color: var(--mud-primary);
    box-shadow: var(--mud-elevation-2);
}
.mud-button--filled:hover  { background-color: #4d3fc9; box-shadow: var(--mud-elevation-4); }
.mud-button--filled:active { box-shadow: var(--mud-elevation-8); }
.mud-button--filled:disabled { background-color: var(--mud-divider); color: var(--mud-text-disabled); }

/* Outlined variant */
.mud-button--outlined {
    border: 1px solid rgba(89, 74, 226, .5);
    color: var(--mud-primary);
}
.mud-button--outlined:hover { border-color: var(--mud-primary); background-color: var(--mud-primary-hover); }

/* Color modifiers (swap the brand color) */
.mud-button--secondary { --mud-primary: #FF4081; --mud-primary-hover: rgba(255,64,129,.06); }
.mud-button--error     { --mud-primary: #F44336; --mud-primary-hover: rgba(244,67,54,.06); }
.mud-button--success   { --mud-primary: #00C853; --mud-primary-hover: rgba(0,200,83,.06); }

/* ------------------------------------------------------------
   4. Outlined text field (.mud-field)
   Wrap a plain <InputText>/<input>. The label floats using
   :focus and :placeholder-shown — give the input placeholder=" ".
   ------------------------------------------------------------ */
.mud-field { position: relative; display: inline-flex; flex-direction: column; width: 100%; margin: 8px 0; }

.mud-field .mud-input {
    width: 100%;
    box-sizing: border-box;
    padding: 16.5px 14px;
    font-family: inherit;
    font-size: 1rem;
    color: var(--mud-text-primary);
    background: transparent;
    border: 1px solid var(--mud-input-border);
    border-radius: var(--mud-radius);
    outline: none;
    transition: border-color .2s, border-width .2s;
}
.mud-field .mud-input::placeholder { color: transparent; }
.mud-field .mud-input:hover { border-color: var(--mud-text-primary); }
.mud-field .mud-input:focus { border: 2px solid var(--mud-primary); padding: 15.5px 13px; /* keep size on 2px border */ }

.mud-field .mud-label {
    position: absolute;
    left: 12px;
    top: 16px;
    padding: 0 4px;
    color: var(--mud-text-secondary);
    background: var(--mud-surface);
    font-size: 1rem;
    pointer-events: none;
    transition: transform .15s ease, color .15s ease, font-size .15s ease;
    transform-origin: left top;
}
/* Floated state: focused OR has a value */
.mud-field .mud-input:focus + .mud-label,
.mud-field .mud-input:not(:placeholder-shown) + .mud-label {
    transform: translateY(-24px) scale(.75);
    color: var(--mud-primary);
}
.mud-field .mud-input:not(:focus):not(:placeholder-shown) + .mud-label { color: var(--mud-text-secondary); }

/* Validation (works with Blazor's .invalid / ValidationMessage) */
.mud-field .mud-input.invalid,
.mud-field .mud-input[aria-invalid="true"] { border-color: var(--mud-error); }
.mud-field .validation-message,
.mud-field .mud-helper-error { color: var(--mud-error); font-size: .75rem; margin: 4px 14px 0; }
.mud-field .mud-helper { color: var(--mud-text-secondary); font-size: .75rem; margin: 4px 14px 0; }

/* ------------------------------------------------------------
   5. Paper & Card (.mud-paper / .mud-card)
   ------------------------------------------------------------ */
.mud-paper {
    background: var(--mud-surface);
    border-radius: var(--mud-radius);
    box-shadow: var(--mud-elevation-1);
    color: var(--mud-text-primary);
}
.mud-paper--outlined { box-shadow: none; border: 1px solid var(--mud-divider); }
.mud-elevation-4 { box-shadow: var(--mud-elevation-4); }
.mud-elevation-8 { box-shadow: var(--mud-elevation-8); }

.mud-card { background: var(--mud-surface); border-radius: var(--mud-radius); box-shadow: var(--mud-elevation-1); overflow: hidden; }
.mud-card-header  { padding: 16px; display: flex; align-items: center; gap: 12px; }
.mud-card-content { padding: 16px; }
.mud-card-actions { padding: 8px; display: flex; gap: 8px; border-top: 1px solid var(--mud-divider); }

/* ------------------------------------------------------------
   6. Layout helpers (light subset of MudBlazor utilities)
   ------------------------------------------------------------ */
.mud-container { width: 100%; max-width: 1280px; margin-inline: auto; padding-inline: 16px; box-sizing: border-box; }
.d-flex { display: flex; }
.flex-column { flex-direction: column; }
.align-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-space-between { justify-content: space-between; }
.gap-2 { gap: 8px; }
.gap-4 { gap: 16px; }
.pa-4 { padding: 16px; }
.pa-6 { padding: 24px; }
.mt-4 { margin-top: 16px; }
.mb-4 { margin-bottom: 16px; }