/* Matthew (AI), 2026-10-24 14:16, shared styles for the services host. Colours and font come from the tenant theme variables
   written into the page head by ThemeCss (brand.* settings in books_services.tblTenantSettings). */

body {
    font-family: var(--brand-font);
    color: #22304d;
    background: #fff;
}

/* Matthew (AI), 2026-10-25 11:37, the same font throughout: the tenant's brand.font (Nunito for both tenants since 12:32). Bootstrap and Kendo
   take it from the variables ThemeCss writes; these are the places that name their own font instead (sb-admin-2's sidebar and headings,
   form controls, Telerik popups appended to <body>). Font Awesome icons keep theirs because they're never matched here. */
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6,
.btn, .form-control, .form-select, .input-group-text, .dropdown-menu, .tooltip, .popover, .badge, .table,
.sidebar, .sidebar .nav-item .nav-link, .sidebar-heading, .sidebar-brand, .topbar {
    font-family: var(--brand-font);
}

/* Matthew (AI), 2026-10-25 11:37, the top bar matches LitziNaplan's: flat #3A6FE8, 50px, white text, logo scaled to fit, small pill buttons.
   Kleanz uses its own brand colour. min-height rather than height so the mobile menu can open below the bar. */
.svc-topbar {
    --svc-topbar-bg: #3A6FE8;
    background-color: var(--svc-topbar-bg) !important;
    background-image: none;
    color: #fff;
    min-height: 50px;
    padding-top: 0;
    padding-bottom: 0;
    position: relative;   /* own stacking context, so a full-bleed page background can't paint over it (as NAPLAN found) */
    z-index: 2;
}
.tenant-kleanz .svc-topbar { --svc-topbar-bg: var(--brand-primary); }
.svc-topbar .navbar-brand { padding-top: 0; padding-bottom: 0; }
.svc-topbar .navbar-brand img { max-width: 104px; max-height: 32px; }
.svc-topbar .svc-brand-suffix, .svc-topbar .svc-wordmark { color: #fff; }
.svc-topbar .nav-link { color: rgba(255, 255, 255, .85); padding: 0 .5rem; line-height: 50px; }
.svc-topbar .nav-link:hover, .svc-topbar .nav-link:focus, .svc-topbar .nav-link.active { color: #fff; }
.svc-topbar .svc-topbar-user { color: #fff; font-weight: 700; }
/* sb-admin-2 pins ".topbar .nav-item .nav-link" to 70px, taller than the whole bar */
.svc-topbar.topbar { height: 50px; }
.svc-topbar.topbar .nav-item .nav-link { height: 50px; }
.svc-topbar .svc-tenant-badge { background: rgba(255, 255, 255, .2); }
@media (max-width: 767.98px) {
    .svc-topbar .navbar-brand img { max-width: 88px; max-height: 28px; }
    .svc-topbar .navbar-collapse .nav-link { line-height: 2.5rem; }
    .svc-topbar .navbar-collapse { padding-bottom: .5rem; }
}

/* Matthew (AI), 2026-10-25 11:43, quiet cross-links in the public footer (as LitziNaplan's np-seo-footer) */
.svc-seo-links a { color: #5a6672; text-decoration: none; }
.svc-seo-links a:hover { text-decoration: underline; }
.svc-seo-legal { font-size: .75rem; color: #97a1ab; }

.svc-wordmark { font-weight: 700; letter-spacing: .02em; color: var(--brand-primary); font-size: 1.5rem; }
.svc-brand-suffix { font-weight: 700; color: var(--brand-primary); }

.btn-primary { --bs-btn-bg: var(--brand-primary); --bs-btn-border-color: var(--brand-primary); --bs-btn-hover-bg: var(--brand-accent); --bs-btn-hover-border-color: var(--brand-accent); --bs-btn-disabled-bg: var(--brand-primary); --bs-btn-disabled-border-color: var(--brand-primary); }
.btn-outline-primary { --bs-btn-color: var(--brand-primary); --bs-btn-border-color: var(--brand-primary); --bs-btn-hover-bg: var(--brand-primary); --bs-btn-hover-border-color: var(--brand-primary); }

.svc-hero { background: linear-gradient(135deg, color-mix(in srgb, var(--brand-accent) 12%, #fff), #fff); }

/* account pages */
.svc-account { min-height: 100vh; background: color-mix(in srgb, var(--brand-primary) 6%, #f8f9fc); padding: 16px; }
.svc-account-card { width: 100%; max-width: 420px; }

/* admin (sb-admin-2 sidebar recoloured per tenant) */
.svc-sidebar { background: var(--brand-primary); min-height: 100vh; }
.svc-tenant-badge { background: var(--brand-accent); color: #fff; font-size: .8rem; }

/* Matthew (AI), 2026-10-25 05:56, Phase 3 classroom: remote tiles in a responsive grid, the screen share above them, a small mirrored self view */
.cr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; }
.cr-tile { position: relative; background: #1f2430; border-radius: 10px; overflow: hidden; aspect-ratio: 4 / 3; border: 3px solid transparent; }
.cr-tile.cr-speaking { border-color: var(--brand-accent); }
.cr-tile.cr-staff { outline: 2px dashed #9aa0a6; }
.cr-media, .cr-media video { width: 100%; height: 100%; object-fit: cover; }
.cr-name { position: absolute; left: 8px; bottom: 6px; background: rgba(0, 0, 0, .55); color: #fff; font-size: .8rem; padding: 2px 8px; border-radius: 6px; }
.cr-screen { position: relative; background: #000; border-radius: 10px; overflow: hidden; }
.cr-screen video { width: 100%; max-height: 60vh; object-fit: contain; display: block; }
.cr-local { width: 160px; aspect-ratio: 4 / 3; background: #1f2430; color: #cfd3da; border-radius: 8px; overflow: hidden; font-size: .75rem; display: flex; align-items: center; justify-content: center; }
.cr-local video { width: 100%; height: 100%; object-fit: cover; }
.cr-mirror { transform: scaleX(-1); }
.cr-chat { height: 320px; overflow-y: auto; }

/* Matthew (AI), 2026-10-25 14:14, date and time fields open their picker on any click (js/datefields.js), so they look clickable */
input[type="date"], input[type="datetime-local"], input[type="time"], input[type="month"] { cursor: pointer; }
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator { cursor: pointer; }

/* Matthew (AI), 2026-10-25 14:20, the user's dropdown on the top bar (UserMenu.razor): someone who is both customer and contractor gets a
   long list, so it scrolls; items keep normal line height (the bar's nav-link rules don't reach .dropdown-item) */
.svc-topbar .svc-user-menu { max-height: calc(100vh - 70px); overflow-y: auto; min-width: 15rem; font-size: .925rem; }
.svc-topbar .svc-user-menu .dropdown-item { color: var(--bs-body-color); }
.svc-topbar .svc-user-menu .dropdown-item:active { color: #fff; background-color: var(--svc-topbar-bg); }
.svc-topbar .svc-user-menu .dropdown-header { font-weight: 700; text-transform: uppercase; font-size: .75rem; letter-spacing: .03em; }
@media (max-width: 767.98px) {
    .svc-topbar .navbar-collapse .svc-user-menu { max-height: none; }
}

/* Matthew (AI), 2026-10-25 15:37, the admin file viewer dialog (FileViewer.razor): 80% of the window; images fit inside, PDFs fill it */
.svc-file-viewer { background: transparent; }
.svc-file-viewer .modal-dialog { max-width: 80vw; width: 80vw; }
.svc-file-viewer-body { height: 80vh; display: flex; align-items: center; justify-content: center; background: #f1f3f5; overflow: auto; }
.svc-file-viewer-body img { max-width: 100%; max-height: 100%; object-fit: contain; }
.svc-file-viewer-body iframe { width: 100%; height: 100%; border: 0; background: #fff; }
@media (max-width: 767.98px) {
    .svc-file-viewer .modal-dialog { max-width: 96vw; width: 96vw; margin: 2vw auto; }
}

/* Matthew (AI), 2026-10-31 06:16, a compact Telerik grid: smaller text and tighter cell padding so more columns and rows fit (admin lists) */
.svc-grid-sm { font-size: 0.8125rem; }
.svc-grid-sm .k-table-td, .svc-grid-sm .k-table-th { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.svc-grid-sm .btn-sm { --bs-btn-padding-y: 0.1rem; --bs-btn-padding-x: 0.4rem; --bs-btn-font-size: 0.75rem; }

/* Matthew (AI), 2026-10-26 11:40, admin dashboard count cards (StatCard.razor): the whole card is a link, so lift it slightly on hover */
.svc-stat-card { transition: box-shadow .15s ease, transform .15s ease; }
.svc-stat-card:hover { box-shadow: 0 .4rem 1rem rgba(0, 0, 0, .12) !important; transform: translateY(-1px); }
.svc-stat-card.border-warning { border-left: 4px solid var(--bs-warning) !important; }