/* App shell for every client page (MainLayout): the daily-flow format applied to MudBlazor pages.
   Colour and font tokens (--d-*) are defined in daily.css from the shared theme.
   Popovers, dialogs and snackbars render outside .tf-app and keep MudBlazor's own look. */

.tf-app * { box-sizing: border-box; }

.tf-app-shell {
    width: 100%;
    max-width: 520px;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    padding: 0 20px;
}

.tf-app-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 56px; }
.tf-app-brand { text-decoration: none; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tf-app-actions { display: flex; align-items: center; gap: 4px; color: var(--d-muted); flex-shrink: 0; }
.tf-app-signin { color: var(--d-accent); font-weight: 600; font-size: 14px; text-decoration: none; padding: 8px; }
.tf-app-main { flex: 1; padding: 4px 0 24px 0; }

.tf-app a:focus-visible, .tf-app button:focus-visible { outline: 3px solid var(--d-accent); outline-offset: 2px; }

/* Pages were laid out for a wide desktop; fit them to the single column. */
.tf-app .mud-container { max-width: 100%; padding-left: 0 !important; padding-right: 0 !important; }
.tf-app .mud-container.mt-4, .tf-app .mud-container.mt-6, .tf-app .mud-container.my-4 { margin-top: 8px !important; }

/* Grids: the column is phone width at any screen size, so only the xs sizes apply. */
.tf-app .mud-grid-item { flex-grow: 0; flex-basis: 100%; max-width: 100%; }
.tf-app .mud-grid-item.mud-grid-item-xs-1 { flex-basis: 8.333%; max-width: 8.333%; }
.tf-app .mud-grid-item.mud-grid-item-xs-2 { flex-basis: 16.667%; max-width: 16.667%; }
.tf-app .mud-grid-item.mud-grid-item-xs-3 { flex-basis: 25%; max-width: 25%; }
.tf-app .mud-grid-item.mud-grid-item-xs-4 { flex-basis: 33.333%; max-width: 33.333%; }
.tf-app .mud-grid-item.mud-grid-item-xs-5 { flex-basis: 41.667%; max-width: 41.667%; }
.tf-app .mud-grid-item.mud-grid-item-xs-6 { flex-basis: 50%; max-width: 50%; }
.tf-app .mud-grid-item.mud-grid-item-xs-7 { flex-basis: 58.333%; max-width: 58.333%; }
.tf-app .mud-grid-item.mud-grid-item-xs-8 { flex-basis: 66.667%; max-width: 66.667%; }
.tf-app .mud-grid-item.mud-grid-item-xs-9 { flex-basis: 75%; max-width: 75%; }
.tf-app .mud-grid-item.mud-grid-item-xs-10 { flex-basis: 83.333%; max-width: 83.333%; }
.tf-app .mud-grid-item.mud-grid-item-xs-11 { flex-basis: 91.667%; max-width: 91.667%; }
.tf-app .mud-grid-item.mud-grid-item-xs-12 { flex-basis: 100%; max-width: 100%; }

/* Cards and panels: flat surface, thin line, generous radius (the daily card). */
.tf-app .mud-paper,
.tf-app .mud-card {
    background-color: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: 18px;
    box-shadow: none;
}
.tf-app .mud-paper .mud-paper { border-radius: 14px; }
.tf-app [class*="mud-elevation-"] { box-shadow: none; }
.tf-app .mud-card-header, .tf-app .mud-card-content { padding: 20px 20px 12px 20px; }
.tf-app .mud-card-actions { padding: 0 20px 20px 20px; gap: 8px; }

/* Text: serif headings from the theme, muted secondary text, eyebrow-style captions. */
.tf-app .mud-typography-h3,
.tf-app .mud-typography-h4,
.tf-app .mud-typography-h5,
.tf-app .mud-typography-h6 { color: var(--d-text); letter-spacing: 0; }
.tf-app .mud-typography-overline { font-size: 12px; letter-spacing: 0.12em; font-weight: 600; color: var(--d-muted); }
.tf-app .mud-secondary-text { color: var(--d-muted) !important; }
.tf-app-main a:not([class]), .tf-app .mud-link { color: var(--d-accent); }

/* Buttons: tall, rounded, sentence case; the filled primary is the daily call to action. */
.tf-app .mud-button-root { border-radius: 14px; }
.tf-app .mud-button-filled { min-height: 48px; padding: 0 20px; box-shadow: none; }
.tf-app .mud-button-filled.mud-button-filled-size-large { min-height: 56px; border-radius: 16px; font-size: 17px; }
.tf-app .mud-button-outlined { min-height: 44px; border-color: var(--d-line); }
.tf-app .mud-button-filled:hover, .tf-app .mud-button-filled:focus { box-shadow: none; }

/* Lists: full-width rows split by the line colour, like the Week list. */
.tf-app .mud-list { background: transparent; }
.tf-app .mud-list-item { min-height: 56px; border-bottom: 1px solid var(--d-line); }
.tf-app .mud-list-item:last-child { border-bottom: none; }
.tf-app .mud-divider { border-color: var(--d-line); }

/* Title rows (heading plus button) wrap instead of squeezing at phone width. */
.tf-app .flex-row.justify-space-between { flex-wrap: wrap; row-gap: 12px; }

/* Chips, tabs, alerts, tables. */
.tf-app .mud-chip { border-radius: 999px; }
.tf-app .mud-chip-outlined { border-color: var(--d-line); }
.tf-app .mud-tabs-tabbar { background: transparent; border-bottom: 1px solid var(--d-line); }
.tf-app .mud-tab { text-transform: none; font-weight: 600; min-width: 0; }
.tf-app .mud-alert { border-radius: 14px; }
.tf-app .mud-table { background: var(--d-surface); }
.tf-app .mud-table-container { overflow-x: auto; }
.tf-app .mud-progress-linear { border-radius: 999px; }

/* Page furniture in the daily format, for pages written for the shell (Me). */
.tf-app h1.tf-app-title { font-family: var(--d-heading-font); font-size: 32px; line-height: 1.15; font-weight: 600; margin: 6px 0 0 0; color: var(--d-text); }
.tf-app h2.tf-app-section { font-family: var(--d-font); font-size: 12px; letter-spacing: 0.12em; font-weight: 600; color: var(--d-muted); margin: 28px 0 8px 0; }
.tf-app-rows { list-style: none; margin: 0; padding: 0; }
.tf-app-rows li { border-bottom: 1px solid var(--d-line); }
.tf-app-rows li:last-child { border-bottom: none; }
.tf-app .tf-app-rows a { min-height: 64px; display: flex; align-items: center; gap: 14px; padding: 10px 0; color: var(--d-text); text-decoration: none; }
.tf-app-rows svg { flex-shrink: 0; margin-left: auto; color: var(--d-muted); }
.tf-app-rowtext { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tf-app-rowtitle { font-size: 16px; }
.tf-app-rowsub { font-size: 13px; color: var(--d-muted); }
.tf-app-account { display: flex; align-items: center; justify-content: space-between; min-height: 56px; color: var(--d-text); }