/*
 * The only custom stylesheet. Everything else comes from Tabler's classes; a rule belongs here only
 * when no Tabler class can do the job, and says why.
 */

/*
 * Blazor.Bootstrap's stylesheet reads Bootstrap's --bs-* variables, but Tabler publishes the same
 * values as --tblr-*. Without these aliases its components render with no colours or borders.
 * The table border maps to the general border colour because Tabler only defines its table
 * variable on .table, where a :root alias cannot see it.
 */
:root {
    --bs-body-color: var(--tblr-body-color);
    --bs-body-bg: var(--tblr-body-bg);
    --bs-emphasis-color: var(--tblr-emphasis-color);
    --bs-secondary-color: var(--tblr-secondary-color);
    --bs-secondary-bg: var(--tblr-secondary-bg);
    --bs-tertiary-bg: var(--tblr-tertiary-bg);
    --bs-border-color: var(--tblr-border-color);
    --bs-table-border-color: var(--tblr-border-color);
    --bs-border-radius: var(--tblr-border-radius);
    --bs-border-radius-sm: var(--tblr-border-radius-sm);
    --bs-border-radius-md: var(--tblr-border-radius-md);
    --bs-border-radius-lg: var(--tblr-border-radius-lg);
    --bs-link-hover-color: var(--tblr-link-hover-color);
    --bs-white: var(--tblr-white);
    --bs-black: var(--tblr-black);
    --bs-gray-100: var(--tblr-gray-100);
    --bs-gray-300: var(--tblr-gray-300);
    --bs-primary: var(--tblr-primary);
    --bs-primary-bg-subtle: var(--tblr-primary-bg-subtle);
    --bs-secondary: var(--tblr-secondary);
    --bs-secondary-rgb: var(--tblr-secondary-rgb);
    --bs-secondary-bg-subtle: var(--tblr-secondary-bg-subtle);
    --bs-secondary-border-subtle: var(--tblr-secondary-border-subtle);
    --bs-secondary-text-emphasis: var(--tblr-secondary-text-emphasis);
    --bs-success: var(--tblr-success);
    --bs-success-rgb: var(--tblr-success-rgb);
    --bs-success-bg-subtle: var(--tblr-success-bg-subtle);
    --bs-success-border-subtle: var(--tblr-success-border-subtle);
    --bs-success-text-emphasis: var(--tblr-success-text-emphasis);
    --bs-info: var(--tblr-info);
    --bs-info-bg-subtle: var(--tblr-info-bg-subtle);
    --bs-info-border-subtle: var(--tblr-info-border-subtle);
    --bs-info-text-emphasis: var(--tblr-info-text-emphasis);
    --bs-warning: var(--tblr-warning);
    --bs-warning-bg-subtle: var(--tblr-warning-bg-subtle);
    --bs-warning-border-subtle: var(--tblr-warning-border-subtle);
    --bs-warning-text-emphasis: var(--tblr-warning-text-emphasis);
    --bs-danger: var(--tblr-danger);
    --bs-danger-rgb: var(--tblr-danger-rgb);
    --bs-danger-bg-subtle: var(--tblr-danger-bg-subtle);
    --bs-danger-border-subtle: var(--tblr-danger-border-subtle);
    --bs-danger-text-emphasis: var(--tblr-danger-text-emphasis);
    --bs-light: var(--tblr-light);
    --bs-dark: var(--tblr-dark);
}

/* Blazor's error bar stays hidden until the framework shows it after an unhandled exception. */
#blazor-error-ui {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2000;
}

/*
 * QuickGrid renders a sortable column's title as a <button>. With QuickGrid's own theme switched
 * off (Theme=""), the button keeps the browser's default font and colour instead of matching
 * Tabler's table header.
 */
.quickgrid button.col-title {
    color: inherit;
    font: inherit;
    text-transform: inherit;
    letter-spacing: inherit;
}

/*
 * Tabler sizes the empty-state icon for its SVG icons (width/height). The icon font sizes by
 * font-size instead, so without this the glyph renders at body-text size inside a 3rem box.
 */
.empty-icon .ti {
    font-size: var(--tblr-empty-icon-size);
}

/*
 * With paging on, QuickGrid pads a short last page with blank rows so the table keeps its height.
 * Under Tabler's row borders those read as a stack of empty lines, so hide them. Real rows always
 * carry aria-rowindex; the padding rows never do.
 */
.quickgrid > tbody > tr:not([aria-rowindex]) {
    display: none;
}

/*
 * The TDS mark stays one size and in one place whether the sidebar is expanded or folded. Tabler
 * sizes a brand image by height and caps it at the brand's width, which shrinks it in the 64px folded
 * sidebar. Fix the width instead, and give the brand the same side padding in both states, trimmed
 * just enough to fit that width when folded, so the mark does not shift as the sidebar changes.
 */
.navbar-vertical .navbar-brand-image {
    width: 2.5rem;
    height: auto;
    max-width: none;
}

.navbar-vertical .navbar-brand {
    padding-inline: 0.75rem;
}

/*
 * The breadcrumb in the top header (Components/BreadcrumbBar.razor). It never wraps: a long label such as
 * an email subject is cut with an ellipsis at about 40 characters (its full text is the hover title), and
 * on a narrow screen only the parent and the current page are shown. Tabler's breadcrumb wraps instead.
 */
header nav[aria-label="Breadcrumb"] {
    min-width: 0;
}

header .breadcrumb {
    flex-wrap: nowrap;
}

header .breadcrumb-item > a,
header .breadcrumb-item > span {
    display: inline-block;
    max-width: 40ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
}

@media (max-width: 767.98px) {
    header .breadcrumb-item:not(:nth-last-child(-n+2)) {
        display: none;
    }

    header .breadcrumb-item:nth-last-child(2)::before {
        content: none;
    }
}

/*
 * The email preview (Pages/Services/Email/EmailView.razor) is an iframe, which has no height of its own;
 * no Tabler class gives a fixed height, so the one srcdoc iframe in the app gets it here.
 */
iframe[srcdoc] {
    height: 600px;
}

/*
 * An archived meeting's recording (Pages/Services/Meetings/MeetingView.razor) plays in a video element, which
 * keeps its video's own size; no Tabler class makes it fill the card and stop at a height that leaves the
 * transcript beside it in view, so the one video in the app gets both here, letterboxed.
 */
video[controls] {
    width: 100%;
    max-height: 60vh;
    background: #000;
}

/*
 * Pages shown before anyone is signed in (the sign-in landing, and the /authentication steps): a dark grey
 * cross-hatch filling the window, with the card centred on it. Tabler's page-center centres within the page's
 * height, which is only as tall as its content inside #app, so the page is given the window's height.
 */
.page-signed-out {
    min-height: 100vh;
    background-color: #2b2f36;
    background-image:
        repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 14px),
        repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 14px);
}

/* The sign-in landing's card is taller than an empty block: more room around the mark and the button. */
.sign-in-card .empty {
    padding-block: 3.5rem;
}

/*
 * The "Sign in with Microsoft" button, drawn to Microsoft's branding guidelines for the light theme: white, a
 * #8c8c8c border, #5e5e5e Segoe UI semibold 15px, the 21px four-square logo 12px from the text, 41px tall.
 */
.btn-microsoft {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    height: 41px;
    padding: 0 12px;
    border: 1px solid #8c8c8c;
    border-radius: 0;
    background: #fff;
    color: #5e5e5e;
    font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}

.btn-microsoft:hover {
    background: #f3f3f3;
}

.btn-microsoft:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}