/*
 * Site additions. css/app.css is src/FMDbApp/wwwroot/css/app.css verbatim - the companion app's
 * theme, and the source of truth for every colour and control on the two grid pages. This file is
 * what a browser-hosted site needs that a page inside a MAUI window did not: a shell with the head
 * on every page, the sign-in card, the home grid, the loading states, and the Radzen dialog the
 * shortlist manager and the season attributes open in. Loaded after app.css so it can override.
 */

/* ---- the shell -------------------------------------------------------------------------------
   The head at the top, the page under it. The page area is the one thing that scrolls (the grid
   pages own their own scrolling inside it, and their .fm-page fills it), so a tall page like Home
   scrolls without the head or the hex field moving. */
.br-shell {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.br-shell > .fm-head {
    flex: 0 0 auto;
    margin: 18px 20px 0;
    padding-bottom: 14px;
}

.br-main {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
}

/* The pages sit under the layout's head, so they carry less top padding than the app's did. */
.br-main > .fm-page,
.br-gated > .fm-page {
    padding-top: 12px;
}

/* A page that reads a career, under RequireCareer: the build banner, when there is one, then the page
   taking the rest of the height the way it took all of it before. Always present, banner or not, so
   the banner coming and going never rebuilds the page. */
.br-gated {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.br-gated > .fm-page {
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
}

.br-build-banner {
    flex: 0 0 auto;
    flex-wrap: wrap;
    align-items: center;
    margin: 12px 20px 0;
}

/* The build's progress, amber like the pill while it builds. */
.br-build-meter {
    flex: 0 0 120px;
    height: 4px;
    border-radius: 2px;
    background: var(--surface-3);
    overflow: hidden;
}

.br-build-meter > span {
    display: block;
    height: 100%;
    background: var(--amber);
    transition: width .4s ease;
}

/* The mark at the head's left. A link home, drawn as the mark alone: the title beside it is the
   page's, not the app's. */
.br-mark {
    display: inline-flex;
    flex: 0 0 auto;
    line-height: 0;
    border-radius: 50%;
}

.br-mark:hover {
    filter: brightness(1.1);
}

/* The pill while the career is being built: amber, because the figures are not there yet - or, for a
   career built before, because newer ones are on their way. */
.fm-save-pill--building {
    border-color: rgba(232, 151, 61, .35);
    background: rgba(232, 151, 61, .12);
    color: var(--amber);
}

.fm-save-pill--building .fm-save-dot {
    background: var(--amber);
}

/* A save in the picker whose half the server has pruned: still offered, but choosing it costs a
   rebuild of about half a minute, so it reads as available-but-cold rather than as the ready ones. */
.br-save-cold {
    color: var(--muted);
}

/* A shortlisted player the save being read does not hold - a newgen born after it, or someone
   outside its loaded leagues. Marked rather than hidden: the list is the site's and keeps him, and a
   member who disappeared when the user changed save is the behaviour this is meant to remove. */
.br-absent-here {
    opacity: .55;
    text-decoration: line-through;
    text-decoration-thickness: 1px;
}

.br-account .rz-profile-menu {
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: 16px;
}

.br-account-name {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--text);
    padding: 0 6px;
}

/* ---- loading states --------------------------------------------------------------------------
   One quiet line, centred, wherever the page is waiting on the server: the runtime boot, the
   career list, the first search. */
.br-boot {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    min-height: 60vh;
    color: var(--text-3);
}

.br-boot--inline {
    min-height: 120px;
}

.br-boot-text {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .13em;
    text-transform: uppercase;
}

/* Over the grid rather than instead of it, so the grid's own frame is on screen from the first
   paint and the rows appear inside it. */
.br-grid-host {
    position: relative;
}

.br-loading {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(20, 28, 46, .82);
}

/* ---- panels ------------------------------------------------------------------------------------
   The design's .panel: one surface with one border, for anything that is not the grid app. */
.br-panel {
    background: var(--surface);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-md);
    box-shadow: inset 0 1px 0 var(--edge);
}

.br-panel--pad {
    padding: 22px 24px;
}

.br-empty {
    max-width: 640px;
}

.br-empty .fm-modal-title {
    font-size: 17px;
}

.br-steps {
    margin: 12px 0 0;
    padding-left: 20px;
    color: var(--text-2);
    font-size: 13px;
    line-height: 1.6;
}

.br-steps strong {
    color: var(--text);
    font-weight: 600;
}

.br-progress {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 16px;
}

.br-link {
    color: var(--blue-lt);
    text-decoration: none;
}

.br-link:hover {
    text-decoration: underline;
}

/* ---- sign in -----------------------------------------------------------------------------------
   One card, centred on the field. The wordmark is the app's home-page one: three weights of one
   word - "FM" the quietest, "Back" in the heading white, "room" in the brand red-light. */
.br-auth {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100%;
    padding: 40px 20px;
    box-sizing: border-box;
    overflow: auto;
}

.br-auth-card {
    width: min(420px, 100%);
    padding: 28px 28px 24px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-top-color: var(--line-top);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow);
}

.br-auth-brand {
    display: flex;
    align-items: center;
    gap: 14px;
}

.br-wordmark {
    font-family: var(--display);
    font-size: 30px;
    font-weight: 600;
    letter-spacing: -.05em;
    line-height: 1;
}

.br-wordmark .fm { color: var(--text-2); }
.br-wordmark .back { color: var(--text); }
.br-wordmark .room { color: var(--red-lt); }

.br-auth-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 22px;
}

.br-auth-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 6px;
}

/* ---- home --------------------------------------------------------------------------------------
   designs/index.html: the card grid, under its Home label. Four columns rather than wrapping fixed-width
   cards, so the two secondary cards sit under the first two on the same column edges. */
.br-home {
    max-width: 1180px;
    margin: 0 auto;
    width: 100%;
    height: auto;
    gap: 20px;
    padding-top: 18px;
    padding-bottom: 60px;
}

.br-shead {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 11px;
    min-width: 0;
}

/* The heading over the home page's cards. */
.br-home-title {
    margin: 0;
    font-family: var(--display);
    font-size: 21px;
    font-weight: 600;
    letter-spacing: -.02em;
    color: var(--text);
}

/* A numbered step in the change-save dialog: its label above its dropdown, as the app's popup has them. */
.br-change-step {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.br-change-lab {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-2);
}

/* One upload in the queue dialog: the save, then either its bar or its place in the queue. */
.br-upload {
    border: 1px solid var(--line-soft);
    border-radius: 7px;
    padding: 10px 12px;
}

.br-upload-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 6px;
    font-size: 12.5px;
}

.br-upload-when {
    flex: 0 0 auto;
    font-size: 10px;
    color: var(--text-3);
}

.br-pgrid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.br-pgrid--secondary {
    margin-top: 14px;
}

@media (max-width: 1040px) {
    .br-pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
    .br-pgrid { grid-template-columns: minmax(0, 1fr); }
}

/* One page, as a card. The card lifts its edge to blue under the pointer, which is the only thing
   on the grid that says a card is a door. */
.br-pcard {
    position: relative;
    display: block;
    text-decoration: none;
    color: inherit;
    background: var(--surface);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-md);
    overflow: hidden;
    transition: border-color .12s, transform .12s, opacity .12s;
}

.br-pcard:hover {
    border-color: var(--blue-edge);
    transform: translateY(-2px);
}

/* Drawn back to the same 0.42 a disabled button uses, never removed. Still a target. */
.br-pcard.off {
    opacity: .42;
}

.br-thumb {
    height: 132px;
    border-bottom: 1px solid var(--line-soft);
    background: var(--surface-2);
    position: relative;
    overflow: hidden;
    line-height: 0;
}

/* The mark's red arrow, as the card's own edge. */
.br-thumb::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--red), rgba(226, 58, 49, 0) 55%);
    opacity: .75;
}

.br-card-body {
    padding: 14px;
}

.br-card-body h3 {
    margin: 0 0 5px;
    font-family: var(--display);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -.02em;
    color: var(--text);
}

.br-card-body p {
    margin: 0;
    color: var(--text-2);
    font-size: 12.5px;
    line-height: 1.45;
}

/* A page not ported yet takes a tag in the corner, in the same shape the design gives the paid
   padlock - a fact about the site's phase, not about the career. */
.br-card-soon {
    position: absolute;
    top: 9px;
    right: 9px;
    z-index: 1;
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--text-2);
    background: rgba(11, 17, 30, .82);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 3px 8px;
}

/* ---- player page (placeholder) ------------------------------------------------------------------ */
.br-player-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.br-player-name {
    margin: 0 0 4px;
    font-family: var(--display);
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -.03em;
}

.br-facts {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px 18px;
    margin: 18px 0;
}

.br-fact {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 10px 12px;
    background: var(--surface-2);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-sm);
    font-size: 13px;
}

/* ---- Radzen dialogs ----------------------------------------------------------------------------
   The shortlist manager and the season attributes open in RadzenDialog rather than in the in-page
   modal the app used; restated in the app's modal colours so the two kinds of popup read as one. */
.br-dialog.rz-dialog {
    background: var(--surface);
    border: 1px solid var(--line);
    border-top-color: var(--line-top);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow);
    color: var(--text);
}

.br-dialog .rz-dialog-titlebar {
    background: var(--surface-2);
    border-bottom: 1px solid var(--line-soft);
    padding: 12px 18px;
}

.br-dialog .rz-dialog-title {
    font-family: var(--display);
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
}

.br-dialog .rz-dialog-content {
    padding: 0;
    background: var(--surface);
}

.br-dialog-body {
    max-height: 64vh;
    overflow-y: auto;
}

.br-dialog-foot {
    margin: 0;
}

/* Change save: how many careers are in use, and the way to free one. */
.br-change-careers {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 6px;
}

.br-confirm.rz-dialog {
    background: var(--surface);
    border: 1px solid var(--line);
    color: var(--text);
}

/* The season attributes: three panels of name and number, as the app's attribute view. */
.br-attr-band {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 6px 0 10px;
    border-bottom: 1px solid var(--line-soft);
    margin-bottom: 12px;
}

.br-attr-groups {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 14px 22px;
}

.br-attr-row {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 2px 0;
    font-size: 12.5px;
    border-bottom: 1px solid rgba(255, 255, 255, .04);
}

.br-attr-name {
    color: var(--text-2);
}

.br-attr-row > span:last-child {
    font-family: var(--mono);
    font-variant-numeric: tabular-nums;
}


/* ---- the head ---------------------------------------------------------------------------------- */

/* The home page's title: the wordmark at the head's title size, in place of the word "Home". */
.br-head-wordmark .br-wordmark {
    font-size: 27px;
}

/* The account menu's face: one icon, the email being the menu's first line. */
.br-account-icon {
    font-size: 19px;
    color: var(--text-2);
    padding: 0 2px;
    vertical-align: middle;
}

/* The last build failed, or the server cannot be reached: the pill says so before it is opened. */
.fm-save-pill--failed {
    border-color: rgba(226, 58, 49, .4);
    background: rgba(226, 58, 49, .12);
    color: var(--red-lt);
}

.fm-save-pill--failed .fm-save-dot {
    background: var(--red-lt);
}

/* The save pill's dialog (Components/SaveInfoDialog.razor): the save, then its facts as label pairs. */
.br-save-info-head {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 12px;
    font-size: 14px;
}

.br-save-info-head span {
    font-size: 12px;
    color: var(--text-2);
}

.br-save-info-facts {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 6px 16px;
    margin: 0;
    font-size: 12.5px;
}

.br-save-info-facts dt {
    color: var(--text-3);
}

.br-save-info-facts dd {
    margin: 0;
    font-family: var(--mono);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

.br-save-info-facts dd.ok { color: var(--green); }
.br-save-info-facts dd.busy { color: var(--amber); }
.br-save-info-facts dd.bad { color: var(--red-lt); }