/* App-level styles. Colours come from the active Radzen theme's CSS variables so every theme works. */

html, body {
    height: 100%;
}

.app-layout {
    min-height: 100vh;
}

.app-body {
    padding: 16px;
}

.app-header__title {
    margin-left: 4px;
}

.app-header__user {
    white-space: nowrap;
}

.app-subheader {
    margin-bottom: 16px;
}

.app-subheader__description {
    color: var(--rz-text-secondary-color);
}

/* Divider inside Container (Radzen has no separator component). */
.app-rule {
    margin: 16px 0;
    border: 0;
    border-top: 1px solid var(--rz-base-300, rgba(128, 128, 128, 0.3));
}

/* Let alert content span the full width so a trailing action can sit at the end. */
.app-alert-full .rz-alert-item,
.app-alert-full .rz-alert-message {
    flex: 1;
}

/* The message lays out as a column, so the content needs an explicit width. */
.app-alert-full .rz-alert-content {
    width: 100%;
}

.app-container {
    margin-bottom: 16px;
}

/* Grids whose rows open a detail page. */
.clickable-rows .rz-data-row {
    cursor: pointer;
}

/* Cells paint their own background, so the highlight has to target them. The theme's own
   grid hover colour is almost white and base greys match the header, so tint the primary colour. */
.clickable-rows .rz-data-row:hover > td {
    background-color: color-mix(in srgb, var(--rz-primary, #ff6d41) 14%, white) !important;
}

.app-footer {
    padding: 8px 16px;
}

/* Busy overlay (AppState.IsLoading). */
.app-loader {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--rz-overlay-background-color, rgba(0, 0, 0, 0.25));
}

/* Session warning toast (SessionTimeoutMonitor): fixed bottom-right corner. */
.session-toast {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 1500;
    width: 360px;
    max-width: calc(100vw - 32px);
    box-shadow: var(--rz-shadow-4, 0 4px 16px rgba(0, 0, 0, 0.25));
}

/* Standard Blazor error banner. */
#blazor-error-ui {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 3000;
    padding: 0.6rem 1.25rem;
    background: var(--rz-warning-lighter, #ffffe0);
    color: var(--rz-text-color, #000);
    box-shadow: var(--rz-shadow-2, 0 -1px 2px rgba(0, 0, 0, 0.2));
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

/* Brand logo at the top of the sidebar (every theme). The JPEG has a white background, so it gets a
   white backing that is invisible on light themes and keeps the logo readable on dark ones. */
.app-brand {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 16px 16px 8px 25px;
}

.app-brand__logo {
    width: 150px;
    height: auto;
    background: #ffffff;
    border-radius: 6px;
}

/* Header user block: "Hi, <name>" plus an initial tile. Colours follow the active theme. */
.app-header__hi {
    color: var(--rz-text-secondary-color);
    font-size: 0.9rem;
}

.app-header__user {
    font-weight: 500;
}

.app-header__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
    border-radius: 4px;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--rz-success);
    background: var(--rz-success-lighter);
}

/* Sub header: title, optional separator, description on one row. */
.app-subheader__main {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.app-subheader__separator {
    display: none;
}

/* Container card: title and description sit on one baseline. */
.app-container__titles {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
}

/* Footer: copyright left, Contact + Privacy Policy links right. */
.app-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.app-footer__links {
    display: flex;
    gap: 1.25rem;
}

.app-footer__link {
    color: var(--rz-text-secondary-color);
    text-decoration: none;
}

.app-footer__link:hover {
    color: var(--rz-primary);
}

/* Strips native button chrome so the Privacy Policy trigger matches the Contact link. */
.app-footer__link--button {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: inherit;
    cursor: pointer;
    appearance: none;
}

.app-privacy-policy {
    max-height: 60vh;
    overflow-y: auto;
    padding-right: 10px;
}

.app-privacy-policy h6 {
    margin-top: 1rem;
    font-weight: 600;
}

/* Production Schedule: Mon-Fri board. Status modifiers set --schedule-accent for cards, pills and legend dots. */
.schedule-status--inprogress { --schedule-accent: var(--rz-info, #0d9488); }
.schedule-status--planned { --schedule-accent: var(--rz-base-500, #94a3b8); }
.schedule-status--onhold { --schedule-accent: var(--rz-warning, #f59e0b); }
.schedule-status--complete { --schedule-accent: var(--rz-success, #10b981); }

.schedule-toolbar {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.schedule-legend {
    display: flex;
    gap: 0.25rem;
}

.schedule-legend__item {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 2px 10px;
    border: 1px solid transparent;
    border-radius: 12px;
    background: none;
    font: inherit;
    font-size: 0.85rem;
    color: var(--rz-text-secondary-color);
    cursor: pointer;
}

.schedule-legend__item:hover,
.schedule-legend__item--active {
    border-color: var(--schedule-accent);
    background: color-mix(in srgb, var(--schedule-accent) 14%, transparent);
    color: var(--rz-text-color);
}

/* A mouse click leaves the button focused; only keyboard focus should draw a ring. */
.schedule-legend__item:focus:not(:focus-visible) {
    outline: none;
    box-shadow: none;
}

.schedule-legend__dot {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    background: var(--schedule-accent);
}

.schedule-nav {
    display: flex;
    gap: 0.25rem;
}

.schedule-board {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 16px;
    align-items: start;
    margin-bottom: 16px;
}

.schedule-column {
    border: 1px solid var(--rz-base-300, rgba(128, 128, 128, 0.3));
    border-radius: 8px;
    overflow: hidden;
    background: var(--rz-base-background-color, #fff);
}

.schedule-column__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 16px;
    background: var(--rz-base-200, #eef0f2);
}

.schedule-column--today .schedule-column__header {
    background: var(--rz-primary);
    color: var(--rz-on-primary, #fff);
}

.schedule-column__dow {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: var(--rz-text-secondary-color);
}

.schedule-column--today .schedule-column__dow {
    color: inherit;
}

.schedule-column__date {
    font-weight: 600;
}

.schedule-column__today {
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 700;
    background: rgba(255, 255, 255, 0.25);
}

.schedule-column__body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 60px;
    padding: 12px;
}

.schedule-card {
    padding: 8px 12px;
    border-left: 4px solid var(--schedule-accent);
    border-radius: 6px;
    background: color-mix(in srgb, var(--schedule-accent) 8%, transparent);
    cursor: pointer;
}

.schedule-card:hover {
    background: color-mix(in srgb, var(--schedule-accent) 16%, transparent);
}

.schedule-card__top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.schedule-card__number {
    font-family: monospace;
    font-size: 0.7rem;
    color: var(--rz-text-secondary-color);
}

.schedule-card__pill {
    padding: 0 8px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 500;
    white-space: nowrap;
    background: color-mix(in srgb, var(--schedule-accent) 22%, transparent);
}

.schedule-card__title {
    margin-top: 4px;
    font-weight: 600;
    font-size: 0.9rem;
}

.schedule-card__meta {
    font-size: 0.75rem;
    color: var(--rz-text-secondary-color);
}

.schedule-card__progress {
    height: 4px;
    margin-top: 8px;
}

.schedule-summary__tile {
    padding: 12px 16px;
    border: 1px solid var(--rz-base-300, rgba(128, 128, 128, 0.3));
    border-radius: 8px;
    background: var(--rz-base-background-color, #fff);
}

.schedule-summary__tile--today {
    border: 2px solid var(--rz-primary);
}

.schedule-summary__units {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.2;
}

.schedule-summary__caption {
    font-size: 0.8rem;
    color: var(--rz-text-secondary-color);
}

/* Part numbers and codes. */
.app-mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.85em;
}

.app-image-preview {
    max-height: 70vh;
}

.app-grid-thumbnail {
    max-height: 60px;
}

.bom-search {
    width: 320px;
}

.dashboard-kpi__note {
    color: var(--rz-text-secondary-color);
}

.dashboard-status-chart {
    height: 300px;
}

.dashboard-status-chart__total {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.dashboard-status-chart__total strong {
    font-size: 1.75rem;
    line-height: 1.1;
}

.settings-card {
    max-width: 820px;
}

.settings-hint {
    color: var(--rz-text-secondary-color);
}