/* Home-screen content sections.
   ----------------------------------------------------------------------------------------------
   A global sheet, NOT a component's .razor.css, and deliberately so. Blazor's CSS isolation only
   matches elements authored in the same .razor file; these rules style markup rendered by child
   components (ProductResourcesSection, NewsSection, and so on), so as a scoped file they would
   silently apply to nothing - the trap that left much of this repo's .razor.css dead.

   Since it is global, the selectors carry their own scope via the home- prefix. Linked from
   App.razor alongside admin-ui.css.

   Palette from OML-CORP-DESIGN-SYSTEM-REFERENCE-2026-08.md: #F3F3F3 page, #FFFFFF surfaces,
   #E5E5E5 borders, #18181F primary fill. */

.home-sections {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-top: 8px;
}

.home-card {
    background: #FFFFFF;
    border: 1px solid #E5E5E5;
    border-radius: 10px;
    padding: 24px 28px 28px;
}

/* Two columns on wide screens, stacked below. The intro column is narrower than the schedule
   because a paragraph and a short list need less room than a four-column table. */
.home-card-split {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 40px;
}

.home-col {
    min-width: 0; /* lets the table column shrink instead of forcing the grid wider */
}

.home-card-title {
    font-size: 15px;
    font-weight: 600;
    color: #5A5A5A;
    margin: 0 0 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid #E5E5E5;
    text-wrap: balance;
}

.home-intro {
    font-size: 14px;
    line-height: 1.6;
    color: #35353B;
    margin: 0 0 18px;
    max-width: 62ch; /* keeps running text readable rather than spanning the whole card */
}

.home-subheading {
    font-size: 19px;
    font-weight: 700;
    color: #18181F;
    margin: 0 0 14px;
    text-wrap: balance;
}

.home-empty {
    font-size: 14px;
    color: #5A5A5A;
    margin: 0;
}

.home-error {
    font-size: 13px;
    color: #A9291B;
    margin: 10px 0 0;
}

.home-sections-loading {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 24px 0;
    font-size: 14px;
    color: #5A5A5A;
}

/* ---------------------------------------------------------------- lists

   The square bullet in the app accent is the legacy list marker, kept because it is the one piece
   of visual identity these lists carry. */
.home-tick-list {
    list-style: none;
    margin: 0 0 22px;
    padding: 0;
}

.home-tick-list li {
    position: relative;
    padding-left: 18px;
    margin-bottom: 9px;
    font-size: 14px;
    line-height: 1.45;
    color: #35353B;
}

.home-tick-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.52em;
    width: 6px;
    height: 6px;
    background: #009677;
}

/* ---------------------------------------------------------------- buttons */

.home-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    line-height: 1;
    cursor: pointer;
    border: 1px solid transparent;
    text-decoration: none;
    transition: background-color 120ms ease, border-color 120ms ease;
}

.home-btn-primary {
    background: #18181F;
    color: #FFFFFF;
}

.home-btn-primary:hover:not(:disabled) {
    background: #2E2E38;
}

.home-btn-secondary {
    background: #FFFFFF;
    color: #18181F;
    border-color: #DBDBDB;
    margin-top: 18px;
}

.home-btn-secondary:hover:not(:disabled) {
    border-color: #18181F;
}

.home-btn:disabled {
    opacity: 0.6;
    cursor: default;
}

.home-btn:focus-visible,
.home-resource-link:focus-visible {
    outline: 2px solid #009677;
    outline-offset: 2px;
}

.home-btn-icon {
    font-size: 15px;
    line-height: 1;
}

.home-btn-spinner {
    margin-right: 2px;
}

/* ---------------------------------------------------------------- schedule table */

/* The table scrolls inside this box so a long title never makes the whole page scroll sideways. */
.home-table-scroll {
    overflow-x: auto;
}

.home-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
}

/* No row borders - rows alternate against the page grey for separation, per the design system's
   table treatment. */
.home-table tbody tr:nth-child(odd) {
    background: #F7F7F7;
}

.home-table td {
    padding: 9px 12px;
    color: #35353B;
    vertical-align: middle;
}

.home-cell-num {
    font-weight: 700;
    color: #18181F;
    width: 1%;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.home-cell-date {
    white-space: nowrap;
    width: 1%;
}

.home-cell-title {
    min-width: 220px;
}

.home-cell-price {
    text-align: right;
    width: 1%;
}

/* The price is a published, quoted figure - the pill marks it as a fixed value rather than another
   data column. */
.home-price-pill {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 4px;
    background: #5A5A5A;
    color: #FFFFFF;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

/* ---------------------------------------------------------------- recent clients */

.home-client-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px 40px;
}

.home-client-month {
    font-size: 18px;
    font-weight: 700;
    color: #18181F;
    margin: 14px 0 12px;
}

/* ---------------------------------------------------------------- product resources */

.home-resource-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
}

/* Each product's own brand colour, passed in as --product-accent, matching the application cards
   directly above. */
.home-resource-product {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #18181F;
    margin: 0 0 14px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--product-accent, #009677);
}

.home-resource-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.home-resource-list li + li {
    border-top: 1px solid #F3F4F4;
}

.home-resource-link {
    display: flex;
    align-items: center;
    /* Explicit, because a button's user-agent centring otherwise wins and every resource row sits
       centred in its column - which reads as ragged rather than as a list. */
    justify-content: flex-start;
    gap: 10px;
    width: 100%;
    padding: 11px 2px;
    background: none;
    border: 0;
    font-family: inherit;
    font-size: 14px;
    color: #35353B;
    text-align: left;
    cursor: pointer;
}

.home-resource-link:hover:not(:disabled) .home-resource-name {
    color: #18181F;
    text-decoration: underline;
}

.home-resource-link:disabled {
    opacity: 0.6;
    cursor: default;
}

.home-resource-icon {
    flex: 0 0 auto;
    color: var(--rem-ink-green, #00795f);
    display: inline-flex;
}

.home-resource-name {
    min-width: 0;
}

/* ---------------------------------------------------------------- responsive */

@media (max-width: 1100px) {
    .home-client-grid,
    .home-resource-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 820px) {
    .home-card-split {
        grid-template-columns: minmax(0, 1fr);
        gap: 28px;
    }

    .home-client-grid,
    .home-resource-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .home-card {
        padding: 20px 18px 22px;
    }
}

/* Visually hidden but still read aloud - used for the schedule table's header row and the
   "opens in a new tab" hint. */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ---------------------------------------------------------------- home screen admin

   The editor for everything above. Lives in this sheet rather than a .razor.css because it styles
   markup rendered inside MudTabs' own panels - which carry MudBlazor's isolation scope, not the
   component's, so scoped rules would not reach it. */

/* ---------------------------------------------------------------- Static Contents admin

   Only what is genuinely this screen's: the row and grid geometry for the list tabs, the month
   picker, and the textarea. Everything else - cards, fields, inputs, buttons, the segmented
   control - comes from the .au-* primitives in admin-ui.css, so this screen looks like the rest
   of REMadmin rather than like MudBlazor with REMeasure's buttons on it. */

.home-admin { padding-bottom: 2rem; }

/* A textarea has to be told it may grow; .au-input fixes the height for single-line fields. */
.admin-ui .home-admin-area,
.admin-ui .home-admin-clients {
    height: auto;
    min-height: 76px;
    padding: var(--rem-spacing-sm, 8px) var(--rem-spacing-md, 12px);
    line-height: 1.5;
    resize: vertical;
    font-family: inherit;
}

.admin-ui .home-admin-clients { min-height: 320px; }

.home-admin-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--rem-spacing-sm, 8px);
    flex-wrap: wrap;
}

/* ---- workshops: an ordinal, the name, and the controls that reorder it ---- */

.home-admin-row {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) auto auto auto;
    gap: var(--rem-spacing-sm, 8px);
    align-items: center;
}

.home-admin-ord {
    font-size: var(--rem-font-size-sm, 12px);
    color: var(--rem-color-text-muted, #66706e);
    font-variant-numeric: tabular-nums;
    text-align: right;
}

/* Remove is the one destructive control here, so it is the only one that carries the colour. */
.admin-ui .au-action.home-admin-remove {
    color: var(--rem-color-feedback-critical, #a14732);
    border-color: var(--rem-color-feedback-critical, #a14732);
}

.admin-ui .au-action.home-admin-remove:hover:not(:disabled) {
    background: #fdf0ec;
}

/* ---- schedule: dates, title, price ---- */

.home-admin-grid-head,
.home-admin-grid-row {
    display: grid;
    grid-template-columns: 32px minmax(0, 1.1fr) minmax(0, 1.6fr) minmax(0, 1fr) auto;
    gap: var(--rem-spacing-sm, 8px);
    align-items: center;
}

.home-admin-grid-head {
    font-size: var(--rem-font-size-xs, 11px);
    font-weight: var(--rem-font-weight-bold, 700);
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--rem-color-text-secondary, #5a5a5a);
    padding-bottom: var(--rem-spacing-2xs, 4px);
    border-bottom: var(--rem-border-hairline, 1px) solid var(--rem-color-border-default, #ececec);
}

@media (max-width: 900px) {
    .home-admin-row,
    .home-admin-grid-row { grid-template-columns: minmax(0, 1fr); }
    .home-admin-grid-head { display: none; }
    .home-admin-ord { text-align: left; }
}

/* ---- recent clients: the month list beside the month being edited ---- */

.home-admin-months {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: var(--rem-spacing-lg, 16px);
    align-items: start;
}

@media (max-width: 900px) {
    .home-admin-months { grid-template-columns: minmax(0, 1fr); }
}

.home-admin-monthlist {
    display: flex;
    flex-direction: column;
    gap: var(--rem-spacing-2xs, 4px);
}

.home-admin-month {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--rem-spacing-sm, 8px);
    padding: var(--rem-spacing-sm, 8px) var(--rem-spacing-md, 12px);
    border: var(--rem-border-hairline, 1px) solid transparent;
    border-radius: var(--rem-radius-md, 8px);
    background: transparent;
    font-family: inherit;
    font-size: var(--rem-font-size-base, 13px);
    color: var(--rem-color-text-primary, #18181f);
    cursor: pointer;
    text-align: left;
}

.home-admin-month:hover { background: var(--rem-black-5, #f1f2f2); }

.home-admin-month.is-active {
    background: color-mix(in srgb, var(--au-accent) 14%, #ffffff);
    border-color: var(--au-accent);
    font-weight: var(--rem-font-weight-semibold, 600);
}

.home-admin-count {
    font-size: var(--rem-font-size-xs, 11px);
    color: var(--rem-color-text-secondary, #5a5a5a);
    font-variant-numeric: tabular-nums;
}

.home-admin-monthedit {
    display: flex;
    flex-direction: column;
    gap: var(--rem-spacing-md, 12px);
    min-width: 0;
}

/* The section's key, beside its name. It is what the home screen looks the section up by and
   what a bug report names, so it is shown rather than hidden - quietly, in monospace. */
.home-admin-key {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: var(--rem-font-size-xs, 11px);
    color: var(--rem-color-text-muted, #66706e);
    background: var(--rem-black-5, #f1f2f2);
    padding: 2px var(--rem-spacing-xs, 6px);
    border-radius: var(--rem-radius-sm, 6px);
}

/* -------------------------------------------------------------------------
   Home page admin - downloadable files folded into a section (Product
   Resources columns, Training & Workshops registration form).
   ------------------------------------------------------------------------- */
.home-files-group { display: flex; flex-direction: column; gap: 0.5rem; padding: 0.85rem 0; border-top: 1px solid var(--rem-black-10, #e6e7e8); }
.home-files-group:first-of-type { border-top: 0; }
.home-files-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.home-files-label { font-size: 0.875rem; font-weight: 600; color: var(--rem-black, #18181f); }
.home-files-upload { cursor: pointer; }
.home-files-upload input { display: none; }
.home-files-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.home-files-item { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
    padding: 0.45rem 0.6rem; border-radius: 7px; background: var(--rem-black-5, #f1f2f2); }
.home-files-name { text-align: left; color: var(--au-accent, #30505c); text-decoration: underline; text-underline-offset: 2px; }

/* display-text: upload row + per-file editable label */
.home-files-upload-row { display: flex; align-items: center; gap: 0.5rem; }
.home-files-display { width: 15rem; max-width: 40vw; }
.home-files-info { display: flex; flex-direction: column; gap: 0.15rem; flex: 1 1 auto; min-width: 0; }
.home-files-name-edit { width: 100%; max-width: 26rem; }
.home-files-filename { font-size: 0.6875rem; color: var(--rem-color-text-muted, #66706e); font-family: ui-monospace, Menlo, Consolas, monospace; }
.home-files-actions { display: flex; align-items: center; gap: 0.4rem; flex: 0 0 auto; }