/*
	This CSS file matches the color scheme from MudBlazor to Bootstrap when utilized for authentication.
	The file remains available at all times for demonstration purposes,
	but it is exclusively employed in the 'App.razor' component when authentication is enabled.
*/

.btn-primary {
    text-transform: uppercase;
    --bs-btn-bg: var(--mud-palette-primary) !important;
    --bs-btn-hover-bg: var(--mud-palette-primary-darken) !important;
}

.nav-pills {
    --bs-nav-pills-link-active-bg: var(--mud-palette-primary) !important;
}

.nav {
    --bs-nav-link-color: var(--mud-palette-primary) !important;
    --bs-nav-link-hover-color: var(--mud-palette-primary-darken) !important;
}

.hide-grid-header {
    display: none;
}

.mud-table-cell {
    padding: 3px 6px; /* vertical, horizontal */
}

.matrix-cc-grid .mud-table-cell {
    padding: 0 !important;
}

.pivot-scroll {
    max-height: calc(100vh - 12rem);
    overflow: auto;
}

.pivot-table .mud-table-container {
    /* MudSimpleTable nests .mud-table-container (its own overflow-x: auto div)
       one level inside the root div our Class="pivot-table" lands on. That
       inner div is the nearest scroll container and breaks position:sticky
       against .pivot-scroll (the div that actually scrolls vertically). */
    overflow: visible !important;
}

.pivot-table table {
    border-collapse: separate;
    border-spacing: 0;
    /* the table overflows MudSimpleTable's (screen-wide) root, which is what paints the surface;
       paint it on the table too, or columns scrolled into view show the page background through */
    background-color: var(--mud-palette-surface);
}

.pivot-td-center {
    vertical-align: middle;
}

.pivot-td-inner {
    display: flex;
    align-items: center;
    justify-content: center;
}

.pivot-td-empty:hover {
    background-color: var(--mud-palette-success);
}

.ce-pick-panel {
    height: 100%;
}

.ce-pick-list {
    overflow-y: auto;
    border-top: 1px solid var(--mud-palette-lines-default);
}

/* fixed row height: the list is virtualized with ItemSize="44" */
.ce-pick-row {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 44px;
    box-sizing: border-box;
    padding: 4px 8px;
    cursor: pointer;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.ce-pick-row:hover {
    background-color: var(--mud-palette-action-default-hover);
}

.ce-pick-row-selected {
    background-color: var(--mud-palette-primary-hover);
}

.ce-pick-row-disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

/* assigned via position: counts as selected, can't be changed */
.ce-pick-row-locked {
    cursor: not-allowed;
    background-color: var(--mud-palette-action-disabled-background);
}

/* category color (GT_Color): a bar on the left edge, and a light tint once selected.
   Locked rows keep their grey background so the padlock still reads as "not editable". */
.ce-pick-row-colored {
    border-left: 8px solid var(--ce-pick-color);
    /* the bar takes the row's usual 8px left padding, so text lines up with uncolored rows */
    padding-left: 0;
}

.ce-pick-row-colored.ce-pick-row-selected {
    background-color: color-mix(in srgb, var(--ce-pick-color) 14%, transparent);
}

/* Training Plans: employee list + three training panels */
.tp-grid {
    display: grid;
    grid-template-columns: minmax(260px, 320px) repeat(3, minmax(240px, 1fr));
    gap: 12px;
    overflow-x: auto;
}

/* Class Event dialog: two panels stacked in one column (Modules/Trainers, Costs/Class Options) */
.ce-pick-col {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

.ce-pick-col > .ce-pick-panel {
    height: auto;
}

.ce-cost-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 4px 0 8px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.ce-cost-total {
    border-top: 1px solid var(--mud-palette-lines-default);
}

.tp-emp-row-current {
    background-color: var(--mud-palette-primary-hover);
    border-left: 3px solid var(--mud-palette-primary);
}

.ce-pick-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.ce-pick-text > .mud-typography {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* five panel columns side by side; scrolls horizontally if the window is too narrow */
.ce-pick-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(240px, 1fr));
    gap: 12px;
    overflow-x: auto;
}

.pivot-td-disabled {
    background-color: var(--mud-palette-action-disabled-background);
    opacity: 0.6;
}

.pivot-th-l1,
.pivot-th-l2 {
    position: sticky;
    z-index: 2;
    height: 2.5rem;
    background-color: var(--mud-palette-surface);
}

.pivot-th-l1 {
    top: 0;
    z-index: 3;
}

.pivot-th-l2 {
    top: 2.5rem;
}



.page {
    overflow: hidden;
}

.mud-input-label-inputcontrol {
    font-weight: bold !important;
}

.mud-typography-caption {
    font-weight: bold !important;
}

.page-background {
    background-image: var(--app-bg-image);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    min-height: 100vh;
}

.page-background.gradient-bg {
    background-image: linear-gradient(180deg, #F4FAFF 0%, #D6EAF8 100%);
}

/*.dialog-background {
   background-image: url('images/SCRetainBack.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-color: var(--app-background-color);
}*/

.dialog-background {
    /* 1. Keep your existing background image setup */
    background-image: url('images/SCRetainBack.png');
    background-size: cover;
    background-position: center;
    /* 2. Layer a semi-transparent white background color over it */
    /* Alpha value (0.6) = 60% white tint. Increase for a lighter image. */
    background-color: rgba(255, 255, 255, 0.7) !important;
    /* 3. Instruct CSS to blend the white color to lighten the image */
    background-blend-mode: lighten !important;
    backdrop-filter: blur(10px);

}

/* Every dialog: the background photo under a near-white tint (as .light-dialog) so the text reads clearly; the photo
   still shows faintly at the edges. Dialogs need no class for this. */
.mud-dialog,
.mud-dialog.dialog-background {
    background-image: url('images/SCRetainBack.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: rgba(255, 255, 255, 0.92) !important;
    background-blend-mode: lighten !important;
    border-radius: 8px;
}

/* Forms on the photo background (sign up, walkthrough, users): a near-white tint so the
   labels and inputs read clearly; the photo still shows faintly at the edges. */
.light-dialog.mud-dialog {
    background-color: rgba(255, 255, 255, 0.92) !important;
    background-blend-mode: lighten !important;
    border-radius: 8px;
}

/* MudAlert's default (text) variant writes the message in a pale tint of the severity color, which washes out on
   the tinted dialogs: dark text instead, a stronger tint behind it; the icon keeps the severity color */
.mud-dialog .mud-alert[class*="mud-alert-text-"] .mud-alert-message {
    color: var(--mud-palette-text-primary);
}

.mud-dialog .mud-alert-text-info { background-color: color-mix(in srgb, var(--mud-palette-info) 16%, white) !important; }
.mud-dialog .mud-alert-text-warning { background-color: color-mix(in srgb, var(--mud-palette-warning) 20%, white) !important; }
.mud-dialog .mud-alert-text-error { background-color: color-mix(in srgb, var(--mud-palette-error) 16%, white) !important; }
.mud-dialog .mud-alert-text-success { background-color: color-mix(in srgb, var(--mud-palette-success) 16%, white) !important; }

/* Employee dialog: the History tab takes the Info tab's height (measured in EmployeeDialog), so the dialog doesn't
   change size with an employee's history; the table scrolls under its header instead */
.employee-history {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}
.employee-history-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}
.employee-history-scroll thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background-color: var(--mud-palette-surface);
}

/* Employee dialog Info tab: department / type / position / status, green when eligible (as the Employee list) */
.history-eligible input { color: green !important; }
.history-ineligible input { color: red !important; }

/* App Log: an exception's stack trace, scrolling rather than stretching the row */
.app-log-exception {
    max-height: 40vh;
    overflow: auto;
    margin: 0;
    padding: 0.75rem;
    font-size: 0.75rem;
    white-space: pre;
    background-color: var(--mud-palette-background-gray);
    border-radius: 4px;
}

/* Sign Up: the license agreement (tblEula.LA_Html) in a scrolling box */
.eula-text {
    max-height: 260px;
    overflow-y: auto;
    background-color: white;
    font-size: 0.8125rem;
    line-height: 1.45;
}
.eula-text h2, .eula-text h3 { font-size: 0.875rem; font-weight: 600; margin: 0.9rem 0 0.3rem; }
.eula-text p { margin: 0 0 0.5rem; }
.eula-text ul { margin: 0 0 0.5rem 1.25rem; padding: 0; }
.eula-text table { border-collapse: collapse; width: 100%; margin-bottom: 0.5rem; }
.eula-text th, .eula-text td { border: 1px solid var(--mud-palette-lines-default); padding: 0.25rem 0.5rem; text-align: left; vertical-align: top; }
/* License Agreement page: the preview uses the page's height, not the dialog's box */
.eula-text.eula-page { max-height: calc(100vh - 12rem); }

.confirm-dialog .mud-dialog-title {
    padding-bottom: 0.5rem;
}

.confirm-dialog .mud-dialog-content {
    padding-top: 0.5rem;
    padding-bottom: 1rem;
}

.confirm-dialog .mud-dialog-actions {
    margin-top: 1.5rem;
    padding: 0 1.5rem 1.25rem;
    gap: 0.75rem;
}

:root {
    --app-bg-image: url('images/SCRetainBack.png');
        --app-background-color: #E3F2FD;
    
}

.dark-theme {
    --app-bg-image: url('images/SCRetainBack.png');
    --app-background-color: #424242; !important;
}

.mud-data-grid {
    opacity: 0.9;
}

/* ---------- Class Event Summary (read-only, completed events) ---------- */
.ces {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 1500px;
    margin: 0 auto;
    padding-bottom: 16px;
}

.ces-hero {
    border-radius: 12px;
    padding: 24px 28px 20px;
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--mud-palette-success) 14%, var(--mud-palette-surface)),
        color-mix(in srgb, var(--mud-palette-primary) 10%, var(--mud-palette-surface)));
    border: 1px solid var(--mud-palette-lines-default);
}

.ces-hero-top {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
    gap: 16px 32px;
}

.ces-title {
    font-weight: 600;
    line-height: 1.15;
    margin-top: 4px;
}

.ces-when {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 0.95rem;
}

.ces-when > div {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ces-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 12px;
    margin-top: 20px;
}

.ces-stat {
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 10px;
    padding: 10px 14px;
    color: var(--mud-palette-text-secondary);
}

.ces-stat-value {
    font-size: 1.6rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--mud-palette-text-primary);
}

.ces-stat-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.ces-stat-total {
    background: var(--mud-palette-success);
    border-color: var(--mud-palette-success);
    color: var(--mud-palette-success-text);
}

.ces-stat-total .ces-stat-value {
    color: var(--mud-palette-success-text);
}

.ces-body {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr);
    gap: 16px;
    align-items: start;
}

@media (max-width: 960px) {
    .ces-body {
        grid-template-columns: minmax(0, 1fr);
    }
}

.ces-main,
.ces-side {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.ces-card {
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 12px;
    padding: 16px 20px;
}

.ces-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 1.05rem;
    margin-bottom: 12px;
}

.ces-count {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 1px 8px;
    border-radius: 10px;
    background: var(--mud-palette-action-default-hover);
    color: var(--mud-palette-text-secondary);
}

.ces-group-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--mud-palette-text-secondary);
    margin: 4px 0 8px;
}

.ces-text {
    min-width: 0;
}

.ces-name {
    font-size: 0.9rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ces-sub {
    font-size: 0.78rem;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* attendees */
.ces-people {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 8px 16px;
}

.ces-person {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.ces-avatar {
    flex: 0 0 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 600;
    background: color-mix(in srgb, var(--mud-palette-primary) 15%, transparent);
    color: var(--mud-palette-primary);
}

/* training: Modules | Classes | Work Instructions, stacking when narrow */
.ces-training {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px 20px;
}

.ces-training-col {
    min-width: 0;
}

.ces-item {
    border-left: 4px solid var(--ces-accent);
    background: color-mix(in srgb, var(--ces-accent) 8%, transparent);
    border-radius: 0 6px 6px 0;
    padding: 5px 10px;
    margin-bottom: 6px;
}

/* cost statement */
.ces-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 6px 0;
    border-bottom: 1px dashed var(--mud-palette-lines-default);
}

.ces-amount {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.ces-group-label + .ces-line {
    padding-top: 0;
}

.ces-line + .ces-group-label {
    margin-top: 14px;
}

.ces-total {
    display: flex;
    justify-content: space-between;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 2px solid var(--mud-palette-text-primary);
    font-size: 1.15rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* class options */
.ces-options {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 6px 16px;
    margin: 0;
}

.ces-options dt {
    font-size: 0.85rem;
    color: var(--mud-palette-text-secondary);
}

.ces-options dd {
    margin: 0;
    font-size: 0.9rem;
    overflow-wrap: anywhere;
}

/* ---------- Employee Training Matrix (MatrixEmployee) ---------- */
.mtx-group {
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 1px; /* let colspan decide the width; long module names ellipsize */
}

.mtx-col {
    text-align: center;
    font-size: 0.78rem;
    min-width: 90px;
    max-width: 160px;
    white-space: normal;
    line-height: 1.2;
}

/* the module's own (rolled-up) column */
.mtx-col-module {
    background-color: color-mix(in srgb, var(--mud-palette-primary) 7%, transparent);
    font-weight: 600;
}

/* sticky header: mix onto the surface so rows scrolling underneath don't show through */
.pivot-th-l2.mtx-col-module {
    background-color: color-mix(in srgb, var(--mud-palette-primary) 7%, var(--mud-palette-surface));
}

/* divider at the start of each module group */
.mtx-group-start {
    border-left: 2px solid var(--mud-palette-lines-default) !important;
}

.mtx-name {
    white-space: nowrap;
}

/* frozen Employee / Position / Complete columns: fixed widths so each knows its left offset */
.pivot-table {
    --mtx-w1: 220px;
    --mtx-w2: 170px;
    --mtx-w3: 130px;
}

.mtx-freeze {
    position: sticky;
    z-index: 1;
    background-color: var(--mud-palette-surface);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mtx-freeze-1 { left: 0; width: var(--mtx-w1); min-width: var(--mtx-w1); max-width: var(--mtx-w1); }
.mtx-freeze-2 { left: var(--mtx-w1); width: var(--mtx-w2); min-width: var(--mtx-w2); max-width: var(--mtx-w2); }
.mtx-freeze-3 {
    left: calc(var(--mtx-w1) + var(--mtx-w2));
    width: var(--mtx-w3); min-width: var(--mtx-w3); max-width: var(--mtx-w3);
}

/* edge between the frozen block and the scrolling columns */
.mtx-freeze-last {
    box-shadow: 4px 0 4px -2px rgba(0, 0, 0, 0.15);
}

/* the Export cell above the three */
.mtx-freeze-head { left: 0; }

/* header cells are sticky both ways, so they sit above the frozen body cells and the scrolling headers */
th.mtx-freeze {
    z-index: 4;
}

/* keep the row hover visible across the frozen cells (their own background would hide it) */
.pivot-table tbody tr:hover td.mtx-freeze {
    /* hover tint layered over the opaque surface, so scrolled columns never show through */
    background-image: linear-gradient(var(--mud-palette-action-default-hover), var(--mud-palette-action-default-hover));
}

/* % complete: 100 green, 0 red, anything between amber */
.mtx-pct {
    font-weight: 600;
    font-size: 0.8rem;
    font-variant-numeric: tabular-nums;
}

/* text: the status color mixed with the theme's text color, so amber stays readable on white
   (darkens in light mode, lightens in dark mode); bars below keep the pure colors */
.mtx-pct-done { color: color-mix(in srgb, var(--mud-palette-success) 60%, var(--mud-palette-text-primary)); }
.mtx-pct-part { color: color-mix(in srgb, var(--mud-palette-warning) 45%, var(--mud-palette-text-primary)); }
.mtx-pct-none { color: color-mix(in srgb, var(--mud-palette-error) 75%, var(--mud-palette-text-primary)); }

/* overall column after Position: bar + % */
.mtx-overall {
    min-width: 110px;
}

.mtx-overall-inner {
    display: flex;
    align-items: center;
    gap: 8px;
}

.mtx-bar {
    flex: 1;
    height: 6px;
    border-radius: 3px;
    background-color: var(--mud-palette-lines-default);
    overflow: hidden;
}

.mtx-bar-fill {
    height: 100%;
    border-radius: 3px;
}

.mtx-bar-fill.mtx-pct-done { background-color: var(--mud-palette-success); }
.mtx-bar-fill.mtx-pct-part { background-color: var(--mud-palette-warning); }
.mtx-bar-fill.mtx-pct-none { background-color: var(--mud-palette-error); }

/* ---------- nav menu: tell a MudNavGroup from its children ---------- */
/* group headers read as section headings (MudBlazor drops nested group headers to 400; lift them too) */
.mud-nav-group > .mud-nav-link > .mud-nav-link-text,
.mud-nav-group * .mud-nav-group > .mud-nav-link > .mud-nav-link-text,
.mud-nav-group * .mud-nav-group > .mud-nav-link.mud-expanded > .mud-nav-link-text {
    font-weight: 600;
}

/* an open group's header gets a light tint */
.mud-nav-group > .mud-nav-link.mud-expanded {
    background-color: color-mix(in srgb, var(--mud-palette-primary) 8%, transparent);
}

/* indent rail down the left of a group's children, under the group's icon */
.mud-nav-group * .mud-navmenu {
    position: relative;
}

.mud-nav-group * .mud-navmenu::before {
    content: "";
    position: absolute;
    top: 4px;
    bottom: 4px;
    left: 27px;
    width: 2px;
    border-radius: 1px;
    background-color: color-mix(in srgb, var(--mud-palette-primary) 35%, transparent);
    pointer-events: none;
}

/* a group inside a group: its rail sits one step further in */
.mud-nav-group * .mud-navmenu .mud-nav-group * .mud-navmenu::before {
    left: 41px;
}

/* children: a touch smaller and softer than their group */
.mud-nav-group * .mud-navmenu .mud-nav-item .mud-nav-link-text {
    font-size: 0.85rem;
}

.mud-nav-group * .mud-navmenu .mud-nav-item .mud-nav-link .mud-nav-link-icon {
    font-size: 1.25rem;
    opacity: 0.8;
}

/* mini (collapsed) drawer shows icons only: no rails */
.mud-drawer--closed.mud-drawer-mini .mud-navmenu::before {
    display: none;
}

/* ---------- retrainSC Claims ---------- */
.rc-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 12px;
}

.rc-overdue {
    border-color: var(--mud-palette-error);
    color: var(--mud-palette-error);
}

.rc-course {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
}

.rc-course-name {
    flex: 1;
    min-width: 0;
}

.rc-num {
    min-width: 96px;
    text-align: right;
    font-variant-numeric: tabular-nums;
    display: flex;
    flex-direction: column;
}

.rc-num > span {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--mud-palette-text-secondary);
}

.rc-amount {
    font-weight: 600;
}

.rc-bad {
    color: var(--mud-palette-error);
}

/* drawer: keep the logo header its full height; a long (expanded) nav menu scrolls below it instead of
   squeezing the header, which let the menu draw over the logo */
.mud-drawer .mud-drawer-header {
    flex-shrink: 0;
}

.audience-label-oneline {
    white-space: normal;
}

@media (min-width: 960px) {
    .audience-label-oneline {
        white-space: nowrap;
    }
}

/* ---------- Dashboard (/Dashboard) ---------- */
.db-header { margin-bottom: 8px; }
.db-sysmsg-text { font-weight: 400; }
/* system notices are always amber, whatever their type (the icon still shows the type) */
.mud-alert.db-sysmsg { background-color: #ffc107; color: rgba(0, 0, 0, 0.87); }
.mud-alert.db-sysmsg .mud-alert-icon,
.mud-alert.db-sysmsg .mud-alert-close .mud-icon-button { color: rgba(0, 0, 0, 0.87); }

.db-activity { background-color: var(--mud-palette-surface); }
.db-activity-list { display: grid; gap: 6px; }
.db-activity-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 6px;
    border-left: 3px solid var(--mud-palette-info);
    background-color: var(--mud-palette-background-gray);
    font-size: .9rem;
}
.db-activity-item.db-sev-success { border-left-color: var(--mud-palette-success); }
.db-activity-item.db-sev-warning { border-left-color: var(--mud-palette-warning); }
.db-activity-icon { margin-top: 2px; flex-shrink: 0; }
.db-sev-info .db-activity-icon { color: var(--mud-palette-info); }
.db-sev-success .db-activity-icon { color: var(--mud-palette-success); }
.db-sev-warning .db-activity-icon { color: var(--mud-palette-warning); }

.db-card { height: 100%; display: flex; flex-direction: column; }
.db-card-header { padding-bottom: 0; }
.db-card-content { flex-grow: 1; }
.db-card-actions { flex-wrap: wrap; gap: 6px; border-top: 1px solid var(--mud-palette-lines-default); }

.db-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.db-stat {
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid var(--mud-palette-lines-default);
    min-width: 0;
}
.db-stat-total { border-color: var(--mud-palette-primary); }
.db-stat-value { font-size: 1.6rem; font-weight: 600; line-height: 1.2; color: var(--mud-palette-primary); font-variant-numeric: tabular-nums; }
.db-stat-label { font-size: .78rem; color: var(--mud-palette-text-secondary); }

.db-list { display: grid; gap: 2px; }
.db-list-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 0;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    min-width: 0;
}
.db-list-row:last-child { border-bottom: none; }
.db-rank {
    width: 22px; height: 22px; flex-shrink: 0;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .75rem; font-weight: 600;
    background-color: var(--mud-palette-primary-hover);
    color: var(--mud-palette-primary);
}
.db-list-name { flex-grow: 1; min-width: 0; font-size: .9rem; }
.db-list-detail { font-size: .75rem; color: var(--mud-palette-text-secondary); }
.db-list-amount { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }

.db-quarters { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.db-quarter {
    text-align: center;
    padding: 6px 4px;
    border-radius: 6px;
    border: 1px solid var(--mud-palette-lines-default);
    min-width: 0;
}
.db-quarter-name { font-size: .75rem; font-weight: 600; color: var(--mud-palette-text-secondary); }
.db-quarter-amount { font-weight: 600; font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; }
.db-quarter-status { font-size: .7rem; color: var(--mud-palette-text-secondary); white-space: nowrap; }
.db-quarter-future { opacity: .55; }
.db-quarter-overdue { border-color: var(--mud-palette-error); }
.db-quarter-overdue .db-quarter-status { color: var(--mud-palette-error); }

@media (max-width: 600px) {
    .db-stat-value { font-size: 1.3rem; }
    .db-quarters { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Icon picker (IconPicker.razor) ---------- */
.icon-picker-preview {
    width: 56px; height: 56px; display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--mud-palette-lines-default); border-radius: 8px;
}
.icon-picker-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 4px;
    max-height: 240px; overflow-y: auto; padding: 4px;
    border: 1px solid var(--mud-palette-lines-default); border-radius: 8px; margin-bottom: 4px;
}
.icon-picker-item {
    height: 44px; display: flex; align-items: center; justify-content: center;
    border: 1px solid transparent; border-radius: 6px; background: none; cursor: pointer;
    color: var(--mud-palette-text-primary);
}
.icon-picker-item:hover { background-color: var(--mud-palette-action-default-hover); }
.icon-picker-item.selected {
    border-color: var(--mud-palette-primary); color: var(--mud-palette-primary);
    background-color: var(--mud-palette-primary-hover);
}
.hl-icon-cell { display: flex; align-items: center; justify-content: center; }
/* HLCategoryDistDialog: the employees to pick from */
.hl-pick-list {
    max-height: 320px; overflow-y: auto; padding: 4px 8px;
    border: 1px solid var(--mud-palette-lines-default); border-radius: 8px;
}
/* HLCategoryDialog: every tab the same fixed height, so switching tabs doesn't resize the dialog */
.hl-tab-body {
    height: min(640px, calc(100vh - 260px));
    overflow-y: auto;
}
/* HLFieldCategoryDialog: one form field and its items */
.hl-field-dialog-body { max-height: min(640px, calc(100vh - 220px)); overflow-y: auto; padding-right: 4px; }
.hl-item-list { display: grid; gap: 2px; max-height: 260px; overflow-y: auto; margin-bottom: 4px; }
.hl-item-row { display: flex; align-items: center; gap: 4px; }
/* HLFieldCategoryList's preview: about the width of the caller's form */
.hl-form-preview-wrap {
    max-width: 560px; padding: 16px; border-radius: 8px;
    border: 1px solid var(--mud-palette-lines-default); background-color: var(--mud-palette-surface);
}

/* ImageUploadField (company logo) */
.image-upload-preview {
    width: 96px; height: 96px; display: flex; align-items: center; justify-content: center; overflow: hidden;
    border: 1px solid var(--mud-palette-lines-default); border-radius: 8px; background-color: var(--mud-palette-background-gray);
}
.image-upload-preview img { max-width: 100%; max-height: 100%; object-fit: contain; }
.company-logo-thumb { max-height: 28px; max-width: 72px; object-fit: contain; }
/* CompanyDialog: Company / Hotline tabs keep one height so the dialog doesn't resize */
.company-tab-body {
    height: min(560px, calc(100vh - 300px));
    overflow-y: auto;
    overflow-x: hidden;
}
/* date / time picker field widths. Not Style=: MudBlazor 9.9 also puts a picker's Style on its pop-up
   calendar / clock, so a max-width there squeezes the pop-up to the field's width. Class only sizes the field. */
.mud-picker.picker-w-140 { max-width: 140px; }
.mud-picker.picker-w-160 { width: 160px; }
.mud-picker.picker-w-170 { max-width: 170px; }
/* HotlinePublic (/hotline?id=...): public, phone-first */
.hl-public-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.hl-public-logo img { display: block; max-height: 64px; max-width: 45vw; object-fit: contain; }
.hl-public-name { text-align: right; overflow-wrap: anywhere; }
.hl-public-text { white-space: pre-line; overflow-wrap: anywhere; }
.hl-public-card { height: 100%; }
.mud-icon-root.hl-public-card-icon { font-size: 5rem; width: 5rem; height: 5rem; }
/* HLLandingPreviewDialog: the public landing page in a phone- or desktop-sized frame */
.hl-preview-url { overflow-wrap: anywhere; user-select: all; }
.hl-preview-stage { display: flex; justify-content: center; background: var(--mud-palette-background-gray); border-radius: 8px; padding: 12px; overflow: auto; }
.hl-preview-frame { border: 0; background: #fff; height: min(720px, calc(100vh - 280px)); }
.hl-preview-phone { width: 390px; max-width: 100%; border: 10px solid #222; border-radius: 28px; }
.hl-preview-desktop { width: 100%; border: 1px solid var(--mud-palette-lines-default); border-radius: 4px; }
/* HotlineLink: public link + QR code */
.hotline-link-url { min-width: 260px; flex: 1 1 320px; }
.hotline-qr { display: block; background: #fff; border: 1px solid var(--mud-palette-lines-default); border-radius: 4px; }
/* the landing page's form cards open the form */
a.hl-public-card-link { display: block; height: 100%; color: inherit; text-decoration: none; }
a.hl-public-card-link .hl-public-card { transition: transform .12s ease, box-shadow .12s ease; }
a.hl-public-card-link:hover .hl-public-card, a.hl-public-card-link:focus-visible .hl-public-card { transform: translateY(-2px); box-shadow: var(--mud-elevation-10); }
a.hl-public-card-link:focus-visible { outline: 2px solid var(--mud-palette-primary); outline-offset: 2px; border-radius: 4px; }
/* HLEntryForm (public form and the Form Fields preview) and the answers after sending */
.hl-entry-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.mud-icon-root.hl-entry-icon { font-size: 3rem; width: 3rem; height: 3rem; flex: 0 0 auto; }
.hl-form-logo { max-height: 40px; max-width: 30vw; object-fit: contain; }
.hl-saved-label { font-weight: 600; width: 40%; vertical-align: top; }
.hl-saved-value { white-space: pre-line; overflow-wrap: anywhere; }

/* Hotline Submissions: long answers wrap, within reason */
.hl-entry-cell {
    display: block;
    max-width: 320px;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* Hotline Dashboard totals */
.hl-db-tile { height: 100%; border-radius: 10px; }

/* Company dialog, Hotline tab: the greeting player and the recording dot */
.hotline-audio { width: 100%; max-width: 420px; height: 36px; margin-top: 4px; }
.hotline-rec-dot { animation: hotline-rec 1s ease-in-out infinite; }
@keyframes hotline-rec { 50% { opacity: .2; } }

/* Hotline Dashboard: Getting started */
.hl-start { border-left: 4px solid var(--mud-palette-primary); }
.hl-start-steps { display: flex; flex-direction: column; gap: 4px; }
.hl-start-step { display: flex; align-items: flex-start; gap: 12px; padding: 8px 10px; border-radius: 8px; }
.hl-start-step.next { background: var(--mud-palette-primary-hover); }
.hl-start-step.done .mud-typography-subtitle2 { color: var(--mud-palette-text-secondary); text-decoration: line-through; }
.hl-start-check { margin-top: 2px; flex-shrink: 0; }
.hl-start-go { flex-shrink: 0; align-self: center; }
@media (max-width: 600px) {
    .hl-start-step { flex-wrap: wrap; }
    .hl-start-go { margin-left: 36px; }
}

/* Hotline report dialog: both tabs one height, so switching doesn't resize it; longer content scrolls */
.hl-entry-tab { height: min(60vh, 520px); overflow-y: auto; }

/* Hotline Texts: the recipient picker */
.hl-msg-count { border-left: 4px solid var(--mud-palette-primary); }
.hl-msg-who { max-height: 140px; overflow-y: auto; }
.hl-msg-list { max-height: 300px; overflow-y: auto; border: 1px solid var(--mud-palette-lines-default); border-radius: 6px; }
.hl-msg-person { display: flex; align-items: center; gap: 8px; padding: 2px 10px 2px 2px; border-bottom: 1px solid var(--mud-palette-lines-default); }
.hl-msg-person:last-child { border-bottom: none; }
.hl-msg-person.unreachable { opacity: .65; }