/* =========================================================================
   Customer Portal — portal-only styles. The app shell (header, navigation, footer, sign-in page) and
   the content building blocks (page header, cards, KPI tiles, lists, timelines, filter bar) are shared
   with the staff app: TicketingSystem.UI.Shared css/shell.css + css/content.css, loaded before this
   file together with tokens.css and components.css. Page-specific styles live in .razor.css files.
   Theme: DevExpress Fluent Light with the product accent (App.razor, UseBootstrapStyles).
   ========================================================================= */

:root {
    /* Portal role names mapped onto the shared tokens; the page .razor.css files use these.
       (The ts- prefix stays reserved for UI.Shared.) */
    --portal-accent-soft: var(--ts-accent-soft);
    --color-success: var(--ts-tone-success);
    --color-info: var(--ts-tone-info);
    --color-warning: var(--ts-tone-warning);
    --color-danger: var(--ts-tone-danger);
    --color-neutral: var(--ts-tone-neutral);

    --surface-page: var(--ts-surface-page);
    --surface-card: var(--ts-surface);
    --surface-sidebar: var(--ts-surface-subtle);
    --border-subtle: var(--ts-border);
    --border-strong: var(--ts-border-strong);
    --text-primary: var(--ts-text);
    --text-secondary: var(--ts-text-muted);
}

/* ---------- base -------------------------------------------------------- */
/* The root keeps the browser's 16px: DevExpress Fluent sizes are rem-based, so its Medium size mode
   (14px text, 32px controls) and the shared rem-based styles come out the same as in the staff app. */
html, body {
    margin: 0;
    padding: 0;
    background: var(--surface-page);
    color: var(--text-primary);
    font-family: var(--ts-font-family);
    line-height: 1.45;
    min-height: 100vh;
}

body { font-size: var(--ts-font-size-md); }

a { color: var(--ts-accent); text-decoration: none; }
a:hover { color: var(--ts-accent-hover); text-decoration: underline; }

h1 { font-size: 1.5rem; font-weight: 600; margin: 0 0 var(--ts-space-4) 0; }
h1:focus { outline: none; }

.btn .bi { margin-right: 4px; }

/* Visible keyboard focus in the accent colour (replaces Bootstrap's faint grey glow). */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
input[type=file]:focus-visible {
    outline: 2px solid var(--ts-accent);
    outline-offset: 2px;
    box-shadow: none;
}

/* Native file picker button styled like a secondary button. */
input[type=file] { font-size: 0.875rem; max-width: 100%; }

input[type=file]::file-selector-button {
    margin-right: 10px;
    padding: 5px 12px;
    border: 1px solid var(--border-strong);
    border-radius: var(--ts-radius-sm);
    background: var(--surface-card);
    color: var(--text-primary);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

input[type=file]::file-selector-button:hover { background: var(--surface-page); }
.due-date, .ts-datetime { font-variant-numeric: var(--ts-numeric); }

/* =========================================================================
   Chips. StatusChip / PriorityPill / SlaBadge and maintenance chips use the shared .ts-* styles
   from UI.Shared components.css; only portal-specific tweaks live here.
   ========================================================================= */

/* SlaBadge may wrap (due time above/beside the badge) in narrow cells instead of overflowing. */
.ts-sla { flex-wrap: wrap; row-gap: 2px; }

/* =========================================================================
   Chip strip — segmented control for in-page toggles (maintenance window).
   ========================================================================= */
.chip-strip { display: inline-flex; gap: 6px; flex-wrap: wrap; }

.chip-strip .chip {
    background: var(--surface-card);
    border: 1px solid var(--border-strong);
    color: var(--text-secondary);
    font-size: 0.8125rem;
    font-weight: 500;
    padding: 4px 12px;
    border-radius: 999px;
    cursor: pointer;
    line-height: 1.5;
}

.chip-strip .chip:hover { background: var(--surface-page); color: var(--text-primary); }

.chip-strip .chip--active,
.chip-strip .chip--active:hover {
    background: var(--ts-accent);
    border-color: var(--ts-accent);
    color: #ffffff;
}

/* =========================================================================
   Forms
   ========================================================================= */
.required-mark { color: var(--color-danger); margin-left: 4px; font-weight: 700; }

.validation-message {
    color: var(--color-danger);
    font-size: 0.8125rem;
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.validation-message::before { content: "⚠"; font-size: 0.9rem; }

.comment-memo, .form-field { width: 100%; }

/* =========================================================================
   List pages: filter inputs, grids
   ========================================================================= */
.filter-combo { min-width: 200px; }
.filter-textbox { width: 100%; }

/* Grid rows double as navigation targets. */
.tickets-grid .dxbl-grid-table > tbody > tr,
.machines-grid .dxbl-grid-table > tbody > tr,
.machine-tickets-grid .dxbl-grid-table > tbody > tr { cursor: pointer; }

.ticket-title-cell { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ticket-title-cell__text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

/* =========================================================================
   Feedback: load errors, skeletons
   ========================================================================= */
.load-error {
    display: flex;
    align-items: center;
    gap: var(--ts-space-3);
    flex-wrap: wrap;
    padding: var(--ts-space-3) var(--ts-space-4);
    border: 1px solid rgba(217, 119, 6, 0.35);
    border-left: 4px solid var(--color-warning);
    border-radius: 6px;
    background: #fffbeb;
    color: var(--text-primary);
}

.load-error__icon { color: var(--color-warning); font-size: 1.1rem; }
.load-error__text { flex: 1; min-width: 200px; }

.skeleton {
    background: linear-gradient(90deg, #eef0f3 0%, #f7f8fa 50%, #eef0f3 100%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.4s ease-in-out infinite;
    border-radius: 4px;
}

@keyframes skeleton-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.skeleton-table {
    background: var(--surface-card);
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    overflow: hidden;
}

.skeleton-row { display: flex; gap: 16px; padding: 12px 16px; border-bottom: 1px solid var(--border-subtle); }
.skeleton-row:last-child { border-bottom: none; }
.skeleton-cell { height: 14px; }
.skeleton-cell--sm { width: 80px; flex: 0 0 80px; }
.skeleton-cell--md { width: 140px; flex: 0 0 140px; }
.skeleton-cell--grow { flex: 1; min-width: 80px; }

@media (max-width: 575.98px) {
    .filter-combo { flex: 1; min-width: 0; }
}

/* =========================================================================
   Blazor framework UI bits
   ========================================================================= */
#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

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

.blazor-error-boundary {
    background: var(--color-danger);
    padding: 1rem;
    color: white;
    border-radius: 6px;
}

.blazor-error-boundary::after { content: "An error has occurred." }