/* ---------- Base ---------- */
/* The notch, the rounded corners and the home indicator of a phone (viewport-fit=cover in App.razor). They are 0 in a normal
   browser window; a variable so the layout below can be checked by setting it by hand. */
:root {
    --tl-safe-top: env(safe-area-inset-top, 0px);
    --tl-safe-right: env(safe-area-inset-right, 0px);
    --tl-safe-bottom: env(safe-area-inset-bottom, 0px);
    --tl-safe-left: env(safe-area-inset-left, 0px);
}

body {
    background: var(--mud-palette-background);
    -webkit-font-smoothing: antialiased;
    /* Landscape on a notched phone: keep the page out from under the notch (the fixed bars handle themselves). */
    padding-left: var(--tl-safe-left);
    padding-right: var(--tl-safe-right);
}

.tl-mono {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.tl-muted { color: var(--mud-palette-text-secondary); }

/* ---------- App bar & drawer ---------- */
.tl-appbar {
    backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--mud-palette-lines-default);
    /* Below the status bar or notch when the page is drawn under it. */
    height: calc(var(--mud-appbar-height) + var(--tl-safe-top));
    padding-top: var(--tl-safe-top);
    padding-left: var(--tl-safe-left);
    padding-right: var(--tl-safe-right);
}

.mud-main-content { padding-top: calc(var(--mud-appbar-height) + var(--tl-safe-top)); }

/* Sticky footer: the content area is at least the viewport tall and .tl-page grows, so the footer sits at the bottom of the
   screen while a page is still loading (an empty body slot) and does not jump down when the page arrives. The phone rule
   further down keeps the room for the bottom bar as padding-bottom of .tl-page, which stays inside this height. */
.mud-main-content {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
}
.tl-page { flex: 1 0 auto; display: flex; flex-direction: column; }
.tl-body, .tl-body-skel { flex: 0 0 auto; margin-bottom: 32px; }

.tl-drawer { border-right: none !important; }

.tl-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    height: calc(var(--mud-appbar-height) + var(--tl-safe-top));
    padding: var(--tl-safe-top) 20px 0 calc(20px + var(--tl-safe-left));
    font-weight: 800;
    font-size: 1.15rem;
    letter-spacing: -0.02em;
    color: #fff;
    text-decoration: none;
}

.tl-brand-mark {
    display: inline-flex;
    align-items: center;
    width: 38px;
    height: 32px;
}

.tl-brand-mark svg { width: 100%; height: 100%; }

.tl-drawer .mud-nav-link {
    margin: 2px 12px;
    border-radius: 10px;
    padding: 9px 12px;
    font-weight: 500;
    transition: background-color .15s ease, color .15s ease;
}

.tl-drawer .mud-nav-link:hover:not(.active) {
    background: rgba(255, 255, 255, .06);
    color: #fff;
}

.tl-drawer .mud-nav-link.active {
    background: rgba(124, 108, 240, .22);
    color: #fff;
}

.tl-drawer .mud-nav-link.active .mud-nav-link-icon { color: #A79CFF; }

/* Account menu at the right of the app bar (AccountMenu.razor): a native <details> dropdown. */
.tl-account { position: relative; }
.tl-account-trigger {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 6px 4px 4px;
    border-radius: 999px;
    cursor: pointer;
    list-style: none;
    user-select: none;
    color: inherit;
}
.tl-account-trigger::-webkit-details-marker { display: none; }
.tl-account-trigger:hover, .tl-account[open] .tl-account-trigger { background: var(--mud-palette-action-default-hover); }
.tl-account-trigger:focus-visible { outline: 2px solid var(--mud-palette-primary); outline-offset: 2px; }
.tl-account-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    font-weight: 700;
    font-size: .9rem;
}
.tl-account-name {
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .875rem;
    font-weight: 500;
}
.tl-account-chevron { transition: transform .15s ease; }
.tl-account[open] .tl-account-chevron { transform: rotate(180deg); }
.tl-account-panel {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    z-index: 1300;
    min-width: 230px;
    max-width: calc(100vw - 24px);
    padding: 6px;
    border-radius: 12px;
    border: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    box-shadow: 0 12px 32px rgba(15, 12, 40, .18);
}
.tl-account-head { padding: 8px 10px 10px; border-bottom: 1px solid var(--mud-palette-lines-default); margin-bottom: 6px; }
.tl-account-head-name { font-weight: 600; }
.tl-account-head-email { font-size: .8rem; color: var(--mud-palette-text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-account-panel a, .tl-account-panel button {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    width: 100%;
    margin: 0;
    padding: 8px 10px;
    border: 0;
    border-radius: 8px;
    background: none;
    color: inherit;
    font: inherit;
    font-size: .9rem;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}
.tl-account-panel a:hover, .tl-account-panel button:hover { background: var(--mud-palette-action-default-hover); }
.tl-account-panel .mud-icon-root { color: var(--mud-palette-text-secondary); }
.tl-account-sep { height: 1px; margin: 6px 0; background: var(--mud-palette-lines-default); }
@media (max-width: 959.98px) {
    .tl-account-name, .tl-account-chevron { display: none; }
    .tl-account-trigger { padding: 4px; }
}

/* Bottom navigation: only on phones, below sm (600 px), where the drawer is hidden. Tablets keep the drawer (O-44). */
.tl-bottomnav, .tl-appbar-brand { display: none; }

@media (max-width: 599.98px) {
    #nav-drawer, .tl-hamburger { display: none !important; }

    .tl-appbar-brand {
        display: block;
        font-weight: 800;
        font-size: 1.1rem;
        letter-spacing: -0.02em;
        color: inherit;
        text-decoration: none;
    }

    .tl-bottomnav {
        position: fixed;
        inset: auto 0 0 0;
        z-index: 1050;
        display: flex;
        padding: 0 var(--tl-safe-right) var(--tl-safe-bottom) var(--tl-safe-left);
        background: var(--mud-palette-drawer-background);
        border-top: 1px solid rgba(255, 255, 255, .08);
    }

    .tl-tab {
        flex: 1 1 0;
        min-width: 0;
        min-height: 56px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        color: rgba(255, 255, 255, .62);
        font-size: .68rem;
        font-weight: 500;
        text-decoration: none;
    }

    .tl-tab.active { color: #A79CFF; }
    button.tl-tab { background: none; border: 0; font: inherit; font-size: .68rem; font-weight: 500; cursor: pointer; }
    .tl-tab .mud-icon-root { font-size: 1.5rem; }

    /* Room for the bar so nothing hides behind it. */
    .tl-page { padding-bottom: calc(56px + var(--tl-safe-bottom) + 24px) !important; }

    /* Outside a MudLayout the drawer is not given position:fixed, so say it here. */
    .tl-more-backdrop { position: fixed; inset: 0; z-index: 1049; background: rgba(0, 0, 0, .45); }
    .tl-more.mud-paper { position: fixed; inset: auto 0 0 0; z-index: 1051; overflow-x: hidden; padding-bottom: var(--tl-safe-bottom); border-radius: 16px 16px 0 0; border-top: 1px solid rgba(255, 255, 255, .14); background: var(--mud-palette-drawer-background); }
    .tl-more .mud-nav-link { min-height: 48px; color: var(--mud-palette-drawer-text); }
    .tl-more .mud-nav-link .mud-nav-link-icon { color: var(--mud-palette-drawer-icon); }
    .tl-more .mud-nav-link:hover:not(.active) { color: #fff; }
    .tl-more .mud-nav-link.active { color: #fff; }
    .tl-more .mud-nav-link.active .mud-nav-link-icon { color: #A79CFF; }
    .tl-more button.mud-nav-link { width: calc(100% - 24px); background: none; border: 0; cursor: pointer; font: inherit; text-align: left; display: flex; align-items: center; }
}

.tl-nav-section {
    padding: 18px 24px 6px;
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .38);
}

.tl-drawer form .mud-nav-link {
    display: flex;
    align-items: center;
    width: calc(100% - 24px);
    background: none;
    border: 0;
    cursor: pointer;
    font: inherit;
    text-align: left;
}

/* ---------- Cards ---------- */
.tl-card {
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius);
}

.tl-stat {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    height: 100%;
}

.tl-stat-icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    flex-shrink: 0;
}

.tl-stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

/* Money on a stat card (StatCard.Amounts): the number never breaks, the currency code is small, and the other
   currencies share one muted line, wrapping between amounts only, so the cards of a row keep one height. */
.tl-stat-number { white-space: nowrap; }

/* A money value is a touch smaller than hours, so "12,450.00 EUR" fits one line in a quarter-width card at 1280 px. */
.tl-stat-money { font-size: 1.375rem; }

.tl-stat-currency {
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--mud-palette-text-secondary);
}

.tl-stat-more {
    display: flex;
    flex-wrap: wrap;
    gap: 0 10px;
    margin-top: 2px;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.5;
    color: var(--mud-palette-text-secondary);
    font-variant-numeric: tabular-nums;
}

.tl-stat-more span { white-space: nowrap; }

.tl-tint-primary { background: color-mix(in srgb, var(--mud-palette-primary) 14%, transparent); color: var(--mud-palette-primary); }
.tl-tint-secondary { background: color-mix(in srgb, var(--mud-palette-secondary) 16%, transparent); color: var(--mud-palette-secondary); }
.tl-tint-tertiary { background: color-mix(in srgb, var(--mud-palette-tertiary) 16%, transparent); color: var(--mud-palette-tertiary); }
.tl-tint-success { background: color-mix(in srgb, var(--mud-palette-success) 16%, transparent); color: var(--mud-palette-success); }

/* ---------- Timer hero ---------- */
.tl-hero {
    position: relative;
    overflow: hidden;
    padding: 28px;
    border-radius: 18px;
    color: #fff;
    background:
        radial-gradient(circle at 85% -20%, rgba(255, 255, 255, .22), transparent 45%),
        linear-gradient(135deg, #5B47E0 0%, #3F2FB8 100%);
    box-shadow: 0 18px 40px -18px rgba(91, 71, 224, .7);
}

.tl-hero.running {
    background:
        radial-gradient(circle at 85% -20%, rgba(255, 255, 255, .28), transparent 45%),
        linear-gradient(135deg, #F59E0B 0%, #E1621D 100%);
    box-shadow: 0 18px 40px -18px rgba(225, 98, 29, .75);
}

.tl-hero-time {
    font-size: clamp(2.5rem, 6vw, 3.75rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.03em;
}

.tl-hero-label { opacity: .8; font-size: .85rem; }

.tl-hero .tl-hero-input {
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    border-radius: 14px;
    box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .35);
}

.tl-pulse {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #fff;
    animation: tl-pulse 1.6s ease-out infinite;
}

@keyframes tl-pulse {
    0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .7); }
    100% { box-shadow: 0 0 0 12px rgba(255, 255, 255, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .tl-pulse { animation: none; }
}

/* ---------- Running chip in app bar ---------- */
.tl-running-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 4px 4px 12px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--mud-palette-secondary) 16%, transparent);
    color: var(--mud-palette-text-primary);
    font-size: .85rem;
    font-weight: 600;
}

.tl-running-chip .tl-dot { background: var(--mud-palette-secondary); }

/* ---------- Lists ---------- */
.tl-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* MudBlazor has no text-truncate utility; without it long names and descriptions wrap and overflow their rows. */
.text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.tl-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 20px;
    border-top: 1px solid var(--mud-palette-table-lines);
}

.tl-row:first-child { border-top: 0; }
.tl-row:hover { background: var(--mud-palette-table-hover); }
.tl-row .tl-row-actions { opacity: 0; transition: opacity .15s; }
.tl-row:hover .tl-row-actions, .tl-row:focus-within .tl-row-actions { opacity: 1; }

@media (hover: none) {
    .tl-row .tl-row-actions { opacity: 1; }
}

.tl-day-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-background-gray);
    border-radius: var(--mud-default-borderradius) var(--mud-default-borderradius) 0 0;
}

/* ---------- Project cards ---------- */
.tl-project {
    position: relative;
    padding: 20px;
    height: 100%;
    overflow: hidden;
    transition: transform .15s ease, box-shadow .15s ease;
}

.tl-project::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: var(--tl-accent);
}

.tl-project:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px -16px rgba(26, 22, 48, .35);
}

.tl-avatar {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
}

/* ---------- Empty state ---------- */
.tl-empty {
    text-align: center;
    padding: 48px 24px;
}

.tl-empty .tl-stat-icon {
    margin: 0 auto 14px;
    width: 56px;
    height: 56px;
    border-radius: 16px;
}

/* ---------- Auth layout ---------- */
.tl-auth {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    min-height: 100vh;
    min-height: 100dvh; /* the visible height on a phone, whose address bar comes and goes */
    background: var(--mud-palette-background);
}

.tl-auth-side {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 40px 48px;
    color: #fff;
    background:
        radial-gradient(circle at 15% 110%, rgba(245, 158, 11, .45), transparent 45%),
        radial-gradient(circle at 90% 0%, rgba(124, 108, 240, .55), transparent 50%),
        #17132D;
}

.tl-brand-lg { padding: 0; height: auto; font-size: 1.35rem; }

.tl-auth-title {
    font-size: clamp(1.75rem, 3vw, 2.6rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.1;
    margin: 0 0 14px;
    max-width: 14ch;
}

.tl-auth-text { opacity: .75; max-width: 40ch; line-height: 1.6; margin: 0; }
.tl-auth-foot { opacity: .45; font-size: .8rem; margin: 0; }

.tl-auth-main {
    display: grid;
    place-items: center;
    padding: 40px 20px;
}

.tl-auth-card { width: 100%; max-width: 420px; }

@media (max-width: 900px) {
    .tl-auth { grid-template-columns: 1fr; }
    .tl-auth-side { padding: 24px 20px; gap: 16px; }
    .tl-auth-side > div, .tl-auth-foot { display: none; }
}

/* ---------- Invoice editor ---------- */
.tl-num input { text-align: right; font-family: "JetBrains Mono", ui-monospace, monospace; }
.tl-num-left input { font-family: "JetBrains Mono", ui-monospace, monospace; }

/* Short buttons such as "Select all" stay on one line. */
.mud-button-root { white-space: nowrap; }

/* ---------- Business logo preview (Settings) ---------- */
.tl-logo-box {
    flex: none;
    width: 96px;
    height: 96px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 12px;
    border: 1px solid var(--mud-palette-lines-default);
    background-color: #fff;
    background-image: conic-gradient(#e9e9ef 25%, transparent 0 50%, #e9e9ef 0 75%, transparent 0);
    background-size: 16px 16px;
}
.tl-logo-box img { width: 100%; height: 100%; object-fit: contain; object-position: center; display: block; padding: 6px; box-sizing: border-box; }

/* ---------- Line codes dialog ---------- */
.tl-code-row { display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 14px; border: 1px solid var(--mud-palette-lines-default); border-radius: 10px; }
.tl-code-row .tl-code-text { flex: 1 1 auto; min-width: 0; }
.tl-code-row .tl-code-name { font-weight: 600; overflow-wrap: anywhere; }
.tl-code-row .tl-code-desc { overflow-wrap: anywhere; }

/* ---------- Rating pop-up ---------- */
.tl-rate-scrim {
    position: fixed;
    inset: 0;
    z-index: 1600;
    display: grid;
    place-items: center;
    padding: 16px;
    background: rgba(26, 22, 48, .45);
}

.tl-rate {
    position: relative;
    width: min(440px, 100%);
    max-height: 100%;
    overflow-y: auto;
    padding: 24px;
    border-radius: 16px;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    box-shadow: 0 24px 60px rgba(10, 8, 30, .35);
    outline: none;
}

.tl-rate-x {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--mud-palette-text-secondary);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}
.tl-rate-x:hover { background: var(--mud-palette-action-default-hover); }

.tl-rate-progress { display: flex; gap: 6px; margin-bottom: 16px; }
.tl-rate-progress span { flex: 1; height: 4px; border-radius: 2px; background: var(--mud-palette-lines-default); }
.tl-rate-progress span.on { background: var(--mud-palette-primary); }

.tl-rate-title { margin: 0 28px 4px 0; font-size: 1.3rem; line-height: 1.25; font-weight: 700; text-wrap: balance; }
.tl-rate-sub { margin: 0 0 18px; color: var(--mud-palette-text-secondary); font-size: .9rem; }
.tl-rate-label { min-height: 1.4em; margin-top: 8px; color: var(--mud-palette-text-secondary); font-size: .85rem; }
.tl-rate-hint { color: var(--mud-palette-text-secondary); font-size: .8rem; }
.tl-rate-actions { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 18px; }

.tl-rate-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 12px;
    padding: 12px 0;
    border-top: 1px solid var(--mud-palette-lines-default);
}

.tl-rate-done { text-align: center; padding: 8px 0; }
.tl-rate-done .tl-rate-title { margin-right: 0; }
.tl-rate-check {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    margin: 0 auto 12px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--mud-palette-primary) 14%, transparent);
    color: var(--mud-palette-primary);
}

.tl-stars { display: flex; gap: 4px; }
.tl-stars button {
    padding: 2px;
    border: 0;
    border-radius: 6px;
    background: none;
    color: var(--mud-palette-lines-inputs);
    line-height: 0;
    cursor: pointer;
}
.tl-stars button.lit { color: var(--mud-palette-secondary); }
.tl-stars button:focus-visible { outline: 2px solid var(--mud-palette-primary); outline-offset: 2px; }
.tl-stars .mud-icon-root { width: 26px; height: 26px; transition: transform .12s; }
.tl-stars button:active .mud-icon-root { transform: scale(.88); }
.tl-stars-big .mud-icon-root { width: 44px; height: 44px; }

@media (prefers-reduced-motion: reduce) {
    .tl-stars .mud-icon-root { transition: none; }
}


/* Settings: balanced two-column flow of cards */
.tl-settings { column-count: 2; column-gap: 24px; }
.tl-settings > * { break-inside: avoid; margin-bottom: 24px; }
.tl-settings > .tl-card { display: block; }
@media (max-width: 959.98px) { .tl-settings { column-count: 1; } }

.tl-app-foot { margin-top: auto; padding: 16px 0; text-align: center; font-size: .8rem; opacity: .6; }
.tl-app-foot a, .tl-auth-foot a { color: inherit; text-decoration: underline; }

/* Line codes dialog: aligned form row */
.tl-code-form { display: grid; grid-template-columns: 1fr; gap: 8px; align-items: center; }
.tl-code-form-actions { display: flex; gap: 8px; align-items: center; }
.tl-code-form-actions .mud-button-root { height: 40px; }
@media (min-width: 600px) { .tl-code-form { grid-template-columns: 1fr 1fr 1.4fr auto; } }

/* ---------- Phone shell: snackbar, rating pop-up ---------- */
/* Snackbars at the bottom sit above the bottom bar and the home indicator, not behind them. */
@media (max-width: 599.98px) {
    .mud-snackbar-location-bottom-left,
    .mud-snackbar-location-bottom-center,
    .mud-snackbar-location-bottom-right { bottom: calc(56px + var(--tl-safe-bottom) + 12px) !important; }
}

.tl-rate-scrim { padding: max(16px, var(--tl-safe-top)) max(16px, var(--tl-safe-right)) max(16px, var(--tl-safe-bottom)) max(16px, var(--tl-safe-left)); }

/* ---------- Install card (InstallPrompt, Dashboard) ---------- */
.tl-install {
    position: relative;
    display: flex;
    gap: 14px;
    align-items: flex-start;
    margin-bottom: 24px;
    padding: 16px 44px 16px 16px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 14px;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
}

.tl-install-icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--mud-palette-primary) 16%, transparent);
    color: var(--mud-palette-primary);
}

.tl-install-body { min-width: 0; flex: 1 1 auto; }
.tl-install-title { margin: 0 0 2px; font-size: 1rem; font-weight: 700; line-height: 1.4; }
.tl-install-text { margin: 0; font-size: .9rem; line-height: 1.5; color: var(--mud-palette-text-secondary); }
.tl-install-steps { margin: 10px 0 0; padding-left: 1.3em; font-size: .9rem; line-height: 1.6; }
.tl-install-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

.tl-install-btn {
    min-height: 40px;
    padding: 8px 18px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 999px;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: .875rem;
    font-weight: 600;
    cursor: pointer;
}

.tl-install-btn:hover:not(:disabled) { background: var(--mud-palette-action-default-hover); }
.tl-install-btn:disabled { opacity: .6; cursor: default; }
.tl-install-primary { border-color: transparent; background: var(--mud-palette-primary); color: var(--mud-palette-primary-text); }
.tl-install-primary:hover:not(:disabled) { background: var(--mud-palette-primary-darken); }

.tl-install-x {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--mud-palette-text-secondary);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
}

.tl-install-x:hover { background: var(--mud-palette-action-default-hover); }
.tl-install button:focus-visible { outline: 2px solid var(--mud-palette-primary); outline-offset: 2px; }

/* ---------- Loading skeletons ---------- */
/* Before the page component exists (InteractiveServerNoPrerender: the server sends only the shell, the page appears once
   the circuit is up) MainLayout shows a generic skeleton next to the empty body slot. Blazor leaves only comment markers in
   an unrendered slot and comments do not stop :empty from matching, so the skeleton goes away the moment the page renders.
   It fades in after a short delay so a fast load never shows it. */
.tl-body-skel {
    opacity: 0;
    animation: tl-skel-in .2s ease-out .2s forwards;
}
.tl-body:not(:empty) + .tl-body-skel { display: none; }
@keyframes tl-skel-in { to { opacity: 1; } }

.tl-skel-header { margin-bottom: 24px; padding-top: 4px; }
.tl-skel-stats { display: grid; gap: 24px; grid-template-columns: 1fr; margin-bottom: 24px; }
@media (min-width: 600px) { .tl-skel-stats { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1280px) { .tl-skel-stats { grid-template-columns: repeat(4, 1fr); } }
.tl-skel-cards { display: grid; gap: 24px; grid-template-columns: 1fr; }
@media (min-width: 960px) { .tl-skel-cards { grid-template-columns: repeat(2, 1fr); } }
.tl-skel-icon { border-radius: 12px; flex-shrink: 0; }
.tl-skel-thead, .tl-skel-trow { display: flex; align-items: center; gap: 24px; padding: 12px 20px; }
.tl-skel-thead { border-bottom: 1px solid var(--mud-palette-lines-default); }
.tl-skel-trow { min-height: 48px; border-top: 1px solid var(--mud-palette-table-lines); }
.tl-skel-thead + .tl-skel-trow { border-top: 0; }

@media (prefers-reduced-motion: reduce) {
    .tl-body-skel { animation-duration: 0s; }
    .tl-skel .mud-skeleton { animation: none !important; }
}
.tl-skel-hero { border-radius: 18px; margin-bottom: 24px; }
.tl-skel-cards > :only-child { grid-column: 1 / -1; }

/* ---------- Date pickers ---------- */
/* A date range's title ("Thu, 01 Oct - Mon 12 Oct") is 34px and never wraps, so on a phone it widened the calendar
   past the screen edge. Smaller, allowed to wrap, and the calendar never wider than the screen. */
.mud-picker-datepicker-toolbar .mud-button-date { font-size: 1.5rem; line-height: 1.25; white-space: normal; text-align: left; }
.mud-picker-popover { max-width: calc(100vw - 16px) !important; } /* MudBlazor writes max-width:none inline */

/* Billing: the forecast card sits in the page header, right of the title; on phones it wraps under it at full width. */
.tl-billing-forecast { flex: 0 1 320px; min-width: 0; max-width: 360px; }
@media (max-width: 599.98px) {
    .tl-billing-forecast { flex: 1 1 100%; max-width: none; }
}

/* A native select on the static sign-up forms (HeardFromSelect), drawn like MudBlazor's outlined fields beside it. */
.tl-native-field { display: flex; flex-direction: column; gap: 6px; }
.tl-native-field label { font-size: .875rem; color: var(--mud-palette-text-primary); }
.tl-native-field select {
    font: inherit; font-size: 1rem; padding: 14px 12px; border-radius: var(--mud-default-borderradius, 4px);
    border: 1px solid var(--mud-palette-lines-inputs); background: var(--mud-palette-surface); color: var(--mud-palette-text-primary);
}
.tl-native-field select:hover { border-color: var(--mud-palette-text-primary); }
.tl-native-field select:focus { outline: 2px solid var(--mud-palette-primary); outline-offset: -1px; border-color: var(--mud-palette-primary); }