/* App-specific overrides on top of MudBlazor's theme.
   Most layout/typography lives in MudBlazor now — this file holds only the
   things MudBlazor doesn't cover (button-label case, framework error UI). */

html, body {
    margin: 0;
    height: 100%;
}

a { color: inherit; }

/* MudBlazor button labels: skip the Material Design uppercase. */
.mud-button-label {
    text-transform: none !important;
}

/* Body draws on MudBlazor's palette variables so the page background flips
   along with the MudThemeProvider's IsDarkMode (set from ThemeService). Without
   this, the body would stay frozen on whatever color was hard-coded here. */
body {
    background: var(--mud-palette-background);
    color: var(--mud-palette-text-primary);
    font-family: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* Notification bell badge (rendered via MudBlazor's MudBadge — kept here for
   legacy edge cases; safe to delete once the layout is fully verified). */
.notification-bell { position: relative; padding-right: 1rem; }
.notification-badge {
    position: absolute;
    top: 0.1rem;
    right: 0.1rem;
    background: #b91c1c;
    color: #fff;
    font-size: 0.65rem;
    font-weight: 600;
    line-height: 1;
    border-radius: 999px;
    padding: 0.15rem 0.35rem;
    min-width: 1.1rem;
    text-align: center;
}

/* Blazor framework UI — hidden by default, the framework shows it on circuit
   errors. Without `display:none` it'd always be visible. */
#blazor-error-ui {
    background: #2a1212;
    border-top: 1px solid rgba(239, 68, 68, 0.4);
    color: #fca5a5;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.4);
    display: none;
    left: 0;
    padding: 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}
#blazor-error-ui .reload {
    color: var(--mud-palette-primary);
    text-decoration: underline;
    margin-left: 0.5rem;
}
#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 1rem;
    top: 0.5rem;
}

/* ---- Responsive document rows (Dashboard / Trash / share pages) ----
   Each row is a flex line: [icon + name] [meta] [action buttons]. On desktop
   they sit on one line with the name flex-growing. On phones the name takes the
   full width on its own line and the actions/meta wrap below it — otherwise the
   fixed-width date + action buttons crush the name down to ~1 char and it breaks
   one letter per line. min-width:0 on the name cell lets the flex item shrink
   below its content so the link wraps/ellipsizes instead of overflowing. */
.doc-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.doc-name {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 200px;
    min-width: 0;
}
/* Break long, space-less filenames sensibly. Covers both the Dashboard's link
   (<a>) and the Trash / share pages' plain MudText (.mud-typography) names. */
.doc-name a,
.doc-name .mud-typography {
    word-break: break-word;
    overflow-wrap: anywhere;
}
.doc-meta {
    white-space: nowrap;
    flex: 0 0 auto;
    color: var(--mud-palette-text-secondary);
}
.doc-actions {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    flex-wrap: wrap;
}

@media (max-width: 600px) {
    .doc-name { flex-basis: 100%; }
    /* Actions first under the name, then the meta line last. */
    .doc-actions { flex-basis: 100%; justify-content: flex-start; order: 2; }
    /* Full-width now, so drop the desktop nowrap — long metas (e.g. Trash's
       "deleted … · purged in …") would otherwise overflow the viewport. */
    .doc-meta { flex-basis: 100%; order: 3; white-space: normal; }
}