/* ===========================================================================
   AddGen — matches the "Liquid Clipper" mockups (Dashboard.png / Settings.png).
   Tailwind (via Play CDN in App.razor) provides utility classes; this file adds
   the glass-panel look, the background gradient, and a few form-control resets.
   =========================================================================== */

html, body {
    background: #05070d;
    color: #f8fafc;
    margin: 0;
    padding: 0;
}

body {
    /* Same layered radial gradients as the mockup: subtle blue glow top-left,
       violet on the right, a deeper blue near the fold. Kept static (no JS). */
    background:
        radial-gradient(ellipse 900px 600px at 15% -10%, rgba(59, 130, 246, .22), transparent 60%),
        radial-gradient(ellipse 900px 700px at 90% 10%, rgba(139, 92, 246, .16), transparent 60%),
        radial-gradient(ellipse 1200px 900px at 50% 110%, rgba(37, 99, 235, .12), transparent 60%),
        #05070d;
    background-attachment: fixed;
    min-height: 100vh;
}

/* Glass panel — used for stat cards, table wrapper, settings sections. */
.glass-panel {
    background: rgba(20, 24, 39, .55);
    border: 1px solid rgba(255, 255, 255, .06);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 10px 30px -20px rgba(0, 0, 0, .8);
}

/* Text input with the same dark inset + subtle border as the reference. Uses !important so
   Tailwind's Preflight base styles (which reset every input to a white background) don't win. */
.glass-input {
    background-color: rgba(0, 0, 0, .35) !important;
    border: 1px solid rgba(255, 255, 255, .06);
    color: #f1f5f9;
    transition: border-color .15s ease, background-color .15s ease;
}
.glass-input:focus {
    outline: none;
    border-color: rgba(59, 130, 246, .5);
    background-color: rgba(0, 0, 0, .5) !important;
}
.glass-input::placeholder {
    color: #475569;
    opacity: 1;
}

/* Custom scrollbar — matches the dark theme. */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .08); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, .16); }

/* Row hover highlight in the Generated Addresses table. */
.row-hover:hover { background: rgba(255, 255, 255, .025); }

/* Blazor error UI (kept from template, restyled). */
#blazor-error-ui {
    color-scheme: light only;
    background: #b91c1c;
    color: white;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0,0,0,0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}
#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

/* Prevent the Chrome autofill from repainting inputs light-blue. Applies to every input in
   the app because Chrome's autofill selector fires on plain URL fields too when the browser
   has cached a value under a matching hostname / port. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill {
    -webkit-text-fill-color: #f1f5f9 !important;
    -webkit-box-shadow: 0 0 0 1000px rgba(0, 0, 0, .35) inset !important;
    caret-color: #f1f5f9 !important;
    transition: background-color 100000s ease-in-out 0s !important;
    background-clip: content-box !important;
}
.glass-input:-webkit-autofill,
.glass-input:-webkit-autofill:hover,
.glass-input:-webkit-autofill:focus,
.glass-input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px rgba(0, 0, 0, .35) inset !important;
}

/* Material Symbols default weight/opsz so the icons don't render fat. */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    line-height: 1;
    vertical-align: middle;
}

/* ---------------------------------------------------------------------------
   Anchor styles for the top-right user pill + dropdown. Tailwind's Play CDN
   is loaded async, so between page navigations there's a small window where
   the pill would flash with the browser's default (light) button chrome
   before Tailwind's utilities apply. These plain-CSS rules cover exactly
   that gap: same colors as the Tailwind classes so they overlap cleanly.
   --------------------------------------------------------------------------- */
/* Top nav bar — plain CSS baseline covers the moment before Tailwind resolves the arbitrary
   `bg-[#0a0d17]/80` value. Same colour as the Tailwind class so no visual jump either way. */
body > header {
    background-color: rgba(10, 13, 23, 0.8);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

button.user-pill {
    background-color: rgba(255, 255, 255, 0.05);
    color: #e2e8f0;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 0.5rem;
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: background-color .15s ease;
    cursor: pointer;
}
button.user-pill:hover,
button.user-pill.is-open {
    background-color: rgba(255, 255, 255, 0.1);
}
.user-menu {
    background-color: #0f1220;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.5rem;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .5);
    color: #f8fafc;
}