/* Amare back office: the public website's pastel look over MudBlazor. The palette itself lives in
   Components/Layout/AmareTheme.cs; this file adds what a theme cannot — rounding, shadows, the app bar,
   the menu and the sign-in page. Tokens match Web.Public's amare.css. */
:root {
  --pink: #D94F78; --pink-deep: #B93B62; --blush: #FFE3EC; --blush-soft: #FFF0F5;
  --vanilla: #FFF8EE; --mint: #CFF0F2; --mint-deep: #2F8C98;
  --plum: #3B2A33; --plum-soft: #6B5560; --muted: #8A6B77; --line: #F3DCE5;
  --shadow: 0 6px 20px rgba(217, 79, 120, .10); --shadow-lift: 0 14px 34px rgba(217, 79, 120, .18);
}

html, body { font-family: "Montserrat", "Segoe UI", system-ui, sans-serif; background: var(--vanilla); color: var(--plum); -webkit-font-smoothing: antialiased; }
a { color: var(--pink); }
h1:focus { outline: none; }
.eyebrow { display: block; font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--mint-deep); margin-bottom: .3rem; }

/* App bar */
.bo-appbar { background: rgba(255, 240, 245, .94) !important; border-bottom: 1px solid var(--line); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.bo-brand { display: flex; align-items: center; gap: .8rem; margin-left: .4rem; text-decoration: none; }
.bo-brand img { height: 46px; width: auto; }
.bo-brand__label { font-size: .68rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--mint-deep); background: #E3F4F5; padding: .3rem .7rem; border-radius: 999px; }
.bo-user { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.25; margin-right: 1rem; }
.bo-user__name { font-weight: 700; font-size: .85rem; color: var(--plum); }
.bo-user__role { font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
@media (max-width: 640px) { .bo-user, .bo-brand__label { display: none; } }

/* Menu */
.bo-drawer { border-right: 1px solid var(--line); }
.bo-drawer .mud-navmenu { padding: .9rem .7rem; }
.bo-drawer .mud-nav-link { border-radius: 999px; margin: 2px 0; padding: 9px 16px; color: var(--plum); font-weight: 600; font-size: .9rem; }
.bo-drawer .mud-nav-link:hover { background: var(--blush-soft); }
.bo-drawer .mud-nav-link.active { background: var(--blush) !important; color: var(--pink-deep) !important; font-weight: 700; }
.bo-drawer .mud-nav-link.active .mud-nav-link-icon { color: var(--pink) !important; }
/* Group headings: bolder, with a little air between groups; the links inside sit indented under them. */
.bo-drawer .mud-nav-group { margin-bottom: 4px; }
.bo-drawer .mud-nav-group > .mud-nav-link { font-weight: 700; }
.bo-drawer .mud-nav-group .mud-navmenu .mud-nav-link { font-size: .86rem; padding-top: 7px; padding-bottom: 7px; }

/* Content */
.bo-main { min-height: 100vh; background: var(--vanilla); }
.mud-main-content .mud-typography-h4 { color: var(--plum); }
.mud-paper:not(.mud-appbar):not(.mud-drawer):not(.mud-popover):not(.mud-paper-outlined) { box-shadow: var(--shadow); }
.mud-paper-outlined { border-color: var(--line) !important; }
.mud-table { border-radius: 18px; overflow: hidden; }
.mud-table-head .mud-table-cell { background: var(--blush-soft); color: var(--muted); font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.mud-button-root.mud-button { border-radius: 999px; }
.mud-button-filled.mud-button-filled-primary { box-shadow: 0 6px 16px rgba(217, 79, 120, .28); }
.mud-button-filled.mud-button-filled-primary:hover { box-shadow: 0 8px 20px rgba(217, 79, 120, .34); }
.mud-chip { font-weight: 600; }
.mud-alert { border-radius: 14px; }
.mud-dialog { border-radius: 22px; }
.mud-tab { font-weight: 700; }
.mud-input-control .mud-input-outlined-border { border-radius: 12px; }

/* Sign-in, and the other signed-out pages */
.signin { min-height: 100vh; display: grid; place-items: center; padding: 2rem 1rem;
  background: radial-gradient(circle at 12% 18%, var(--blush) 0, transparent 38%), radial-gradient(circle at 88% 82%, var(--mint) 0, transparent 38%), var(--vanilla); }
.signin__card { width: min(430px, 100%); background: #fff; border-radius: 28px; padding: 2.4rem 2.1rem 2rem; box-shadow: var(--shadow-lift); }
.signin__logo { display: block; margin: 0 auto 1.1rem; height: auto; }
.signin__card .eyebrow { text-align: center; }
.signin__title { margin: 0 0 .35rem; font-size: 1.9rem; font-weight: 800; line-height: 1.15; text-align: center; color: var(--plum); }
.signin__lead { margin: 0 0 1.6rem; text-align: center; color: var(--plum-soft); font-size: .95rem; }
.signin__links { margin-top: 1.1rem; text-align: center; }
.signin__note { margin: .9rem 0 0; text-align: center; font-size: .8rem; color: var(--muted); }

/* Framework */
.valid.modified:not([type=checkbox]) { outline: 1px solid #26b050; }
.invalid { outline: 1px solid #e50000; }
.validation-message { color: #e50000; }

.blazor-error-boundary {
    background: #b32121;
    padding: 1rem 1rem 1rem 1.25rem;
    color: white;
}

.blazor-error-boundary::after { content: "An error has occurred."; }