/*
 * Harmony.WebDesktop — app-level styles.
 *
 * The design system (Harmony.Desktop.UI) ships everything structural. What
 * lives here is only what belongs to this application shell specifically:
 * the sidebar user box, the chrome-free page layout used by sign-in, and
 * Blazor's own error bar.
 */

/* Every routable page carries an <h1> because <FocusOnNavigate Selector="h1">
   moves keyboard focus there on navigation. The heading is visually redundant
   next to the topbar title, so it is hidden from sight but not from assistive
   technology or the focus call. */
.visually-hidden-h1 {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.hd-mono {
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: .9em;
}

/* ── Account menu (appbar, right) ──────────────────────────────────── */
.hd-avatarbtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    cursor: pointer;
    line-height: 0;
}
.hd-avatarbtn:hover { background: var(--c-hover); }

.hd-usercard {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 14px;
    min-width: 0;
}
.hd-usercard__id { min-width: 0; }
.hd-usercard__name {
    font-size: 14px;
    font-weight: 620;
    color: var(--c-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.hd-usercard__meta {
    font-size: 12px;
    color: var(--c-text-ter);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.hd-usermenu__form { display: block; padding: 5px; }
.hd-usermenu__form .hd-menu__item {
    width: 100%;
    box-sizing: border-box;
    text-decoration: none;
}

/* ── Chrome-free pages (sign-in, signed-out) ───────────────────────── */
.hd-plainpage {
    min-height: 100%;
    display: grid;
    place-items: center;
    padding: 24px;
    background:
        radial-gradient(circle at 15% 0%, color-mix(in srgb, var(--color-ios-blue) 12%, transparent), transparent 45%),
        var(--c-bg);
}
.hd-authcard {
    width: min(100%, 400px);
    background: var(--c-bg-elev);
    border: 1px solid var(--c-separator);
    border-radius: 18px;
    box-shadow: var(--shadow-hd-dialog);
    padding: 30px 28px;
}
.hd-authcard__brand {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 18px;
}
.hd-authcard__title {
    font-size: 19px;
    font-weight: 680;
    letter-spacing: -0.025em;
    color: var(--c-text);
    margin-bottom: 4px;
}
.hd-authcard__sub {
    color: var(--c-text-ter);
    font-size: 13.5px;
    margin-bottom: 22px;
}

/* The brand is a link in the shell; strip the anchor styling so it reads as
   the mark and not as navigation chrome. */
.hd-brand-link {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    border-radius: 8px;
    min-width: 0;
}
.hd-brand-link:hover { opacity: .85; }
.hd-authcard form { display: flex; flex-direction: column; gap: 14px; }

.hd-alert {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
    border-radius: var(--radius-hd);
    background: color-mix(in srgb, var(--color-ios-red) 12%, transparent);
    color: var(--color-ios-red);
    font-size: 13px;
}

/* ── Notifications ─────────────────────────────────────────────────── */
.hd-notif {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
    padding: 11px 14px;
    border: 0;
    border-bottom: 1px solid var(--c-separator);
    background: transparent;
    text-align: start;
    cursor: pointer;
    color: var(--c-text);
}
.hd-notif:last-child { border-bottom: 0; }
.hd-notif:hover { background: var(--c-hover); }
.hd-notif.is-unread { background: var(--c-selected); }
.hd-notif.is-unread:hover { background: color-mix(in srgb, var(--c-selected) 70%, var(--c-hover)); }
.hd-notif__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    color: #fff;
}
.hd-notif__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.hd-notif__title { font-size: 13.5px; font-weight: 600; }
.hd-notif__msg {
    font-size: 12.5px;
    color: var(--c-text-sec);
    /* Two lines then ellipsis: a notification body can be a full paragraph and
       a popover row is not where it should be read in full. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.hd-notif__time { font-size: 11.5px; color: var(--c-text-ter); }
.hd-notif__dot {
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    margin-top: 6px;
    border-radius: 999px;
    background: var(--color-ios-blue);
}

/* Footer link of the bell popover — the popover shows a dozen items, the inbox
   holds the rest. */
.hd-notif__all {
    display: block;
    padding: 11px 14px;
    border-top: 1px solid var(--c-separator);
    text-align: center;
    font-size: 13px;
    font-weight: 550;
    color: var(--c-focus);
    text-decoration: none;
    position: sticky;
    bottom: 0;
    background: var(--c-bg-elev);
}
.hd-notif__all:hover { background: var(--c-hover); }

.hd-linkbtn {
    border: 0;
    background: transparent;
    padding: 0;
    font-size: 12.5px;
    font-weight: 550;
    color: var(--c-focus);
    cursor: pointer;
}
.hd-linkbtn:hover { text-decoration: underline; }

/* ── Dashboard ─────────────────────────────────────────────────────── */
.hd-hero { margin-bottom: 22px; }
.hd-hero__greet {
    font-size: clamp(1.5rem, 2.6vw, 2rem);
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 1.1;
    color: var(--c-text);
}
.hd-hero__sub {
    margin-top: 5px;
    font-size: 14.5px;
    color: var(--c-text-ter);
}

.hd-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 14px;
}

/* Stat tiles are their own surface rather than HdCard: they carry no header
   and no separator, so a card's chrome would only add weight around a number. */
.hd-stat {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
        "icon value"
        "icon label";
    align-items: center;
    column-gap: 13px;
    padding: 16px 18px;
    background: var(--c-bg-elev);
    border-radius: var(--radius-hd-lg);
    box-shadow: var(--shadow-hd-card), inset 0 0 0 1px var(--c-separator);
}
.hd-stat__icon {
    grid-area: icon;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    color: var(--tint);
    /* 12% of the semantic colour: enough to read as tinted, light enough that
       the icon keeps its contrast in both themes. */
    background: color-mix(in srgb, var(--tint) 12%, transparent);
}
.hd-stat__value {
    grid-area: value;
    font-size: 24px;
    font-weight: 690;
    letter-spacing: -0.03em;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
}
.hd-stat__label {
    grid-area: label;
    font-size: 12.5px;
    color: var(--c-text-ter);
    line-height: 1.25;
}

/* ── Tasks ─────────────────────────────────────────────────────────── */
.hd-tasks {
    display: grid;
    grid-template-columns: minmax(14rem, 17rem) minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}
.hd-listpane { padding: 6px; display: flex; flex-direction: column; gap: 2px; }
@media (max-width: 767px) {
    .hd-tasks { grid-template-columns: 1fr; }
}
.hd-task-row {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 9px 14px;
    border-bottom: 1px solid var(--c-separator);
}
.hd-task-row:last-child { border-bottom: 0; }
.hd-task-row:hover { background: var(--c-hover); }
.hd-task-row__title { font-weight: 500; }
.hd-task-row.is-done .hd-task-row__title {
    text-decoration: line-through;
    color: var(--c-text-ter);
}
.hd-task-row__note { font-size: 12.5px; color: var(--c-text-ter); }
.hd-check {
    appearance: none;
    width: 18px;
    height: 18px;
    margin-top: 2px;
    border: 1.5px solid var(--c-text-ter);
    border-radius: 999px;
    cursor: pointer;
    flex: 0 0 auto;
    position: relative;
    transition: background-color 100ms ease, border-color 100ms ease;
}
.hd-check:checked {
    background: var(--color-ios-green);
    border-color: var(--color-ios-green);
}
.hd-check:checked::after {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 5px;
    height: 9px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: translateY(-1px) rotate(45deg);
}

/* ── Unhandled-exception bar ───────────────────────────────────────────
   Distinct from the reconnect overlay: this one means the circuit is alive but
   something threw, so it is an inline notice rather than a blocking modal. */
#blazor-error-ui {
    display: none;
    position: fixed;
    z-index: 900;
    inset-inline: 0;
    bottom: 0;
    margin: 16px auto;
    width: min(94vw, 32rem);
    align-items: center;
    gap: 12px;
    padding: 13px 44px 13px 16px;
    border-radius: var(--radius-hd-lg);
    background: var(--color-ios-red);
    color: #fff;
    font-size: 13.5px;
    box-shadow: var(--shadow-hd-popover);
}
#blazor-error-ui.visible { display: flex; }
#blazor-error-ui .reload {
    margin-inline-start: auto;
    color: #fff;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
    white-space: nowrap;
}
#blazor-error-ui .dismiss {
    position: absolute;
    inset-inline-end: 14px;
    cursor: pointer;
    opacity: .8;
}
#blazor-error-ui .dismiss:hover { opacity: 1; }