/* The font comes from ITAM.UI's stylesheet and the shared theme - IBM Plex Sans Thai, bundled with
   the app. The Blazor template's Helvetica stack used to sit here and, loading after the shared
   sheet, quietly won: the theme named a Thai face and the body still rendered in Helvetica. */

a, .btn-link {
    color: #006bb7;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid var(--mud-palette-error);
}

.validation-message {
    color: var(--mud-palette-error);
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

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

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* ---- Tickets / Helpdesk board enhancements ---- */
@keyframes itam-fade-in-up {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Clickable KPI cards */
.kpi-card {
    cursor: pointer;
    height: 100%;
    transition: transform .18s ease;
    animation: itam-fade-in-up .3s ease;
}
.kpi-card .mud-paper {
    height: 100%;
    border-radius: 12px;
    transition: box-shadow .18s ease, border-color .18s ease;
}
.kpi-card:hover {
    transform: translateY(-4px);
}
.kpi-card:hover .mud-paper {
    box-shadow: 0 8px 20px rgba(0, 0, 0, .12);
}
.kpi-card.active .mud-paper {
    border-color: var(--mud-palette-primary, #2563eb) !important;
    border-width: 2px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .15);
}
/* Stat cards (non-clickable) — same entrance + hover lift as the filter cards */
.kpi-metric, .kpi-metric.mud-paper {
    height: 100%;
    border-radius: 12px;
    animation: itam-fade-in-up .3s ease;
    transition: box-shadow .18s ease, transform .18s ease;
}
.kpi-metric:hover, .kpi-metric.mud-paper:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, .12);
}

/* Day-grouped list */
.day-group {
    animation: itam-fade-in-up .25s ease both;
    border-radius: 12px;
}
.day-group-header {
    padding: .1rem .2rem;
    user-select: none;
    border-radius: 8px;
    transition: background .15s ease;
}
.day-group-header:hover {
    background: var(--mud-palette-background-gray, #f3f4f6);
}

/* Ticket rows */
.ticket-row {
    border: 1px solid var(--mud-palette-lines-default, #e5e7eb);
    border-left: 4px solid var(--accent, #9ca3af);
    border-radius: 10px;
    padding: .6rem .75rem;
    background: var(--mud-palette-surface, #fff);
    animation: itam-fade-in-up .25s ease;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.ticket-row:hover {
    transform: translateX(3px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .08);
    background: var(--mud-palette-background-gray, #f9fafb);
}
/* ─────────────  Global search palette (Ctrl+K) — GlobalSearch.razor  ───────────── */
.gs-trigger {
    display: flex;
    align-items: center;
    gap: .4rem;
    height: 2rem;
    padding: 0 .6rem;
    border: 1px solid var(--mud-palette-divider, #d1d5db);
    border-radius: 999px;
    background: var(--mud-palette-background, #fff);
    color: var(--mud-palette-text-secondary, #6b7280);
    cursor: pointer;
    font-size: .85rem;
}
.gs-trigger:hover { background: var(--mud-palette-background-gray, #f3f4f6); }
.gs-trigger-text { opacity: .85; }
.gs-kbd {
    border: 1px solid var(--mud-palette-divider, #d1d5db);
    border-radius: 5px;
    padding: 0 .35rem;
    font-size: .7rem;
    line-height: 1.35;
    color: var(--mud-palette-text-disabled, #9ca3af);
    white-space: nowrap;
}
/* Narrow screens keep the icon only — the header is crowded enough on a phone. */
@media (max-width: 900px) {
    .gs-trigger-text, .gs-trigger .gs-kbd { display: none; }
}

.gs-backdrop {
    position: fixed;
    inset: 0;
    /* Between MudBlazor's app bar (1300) and its dialog container (1400): at 1200 this was
       below the app bar, so the header stayed lit above the dim. Measured, not guessed. */
    z-index: 1350;
    background: rgba(15, 23, 42, .45);
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-top: 12vh;
}
.gs-panel {
    width: min(680px, 94vw);
    max-height: 70vh;
    display: flex;
    flex-direction: column;
    background: var(--mud-palette-surface, #fff);
    border-radius: 14px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
    overflow: hidden;
    animation: itam-fade-in-up .18s ease;
}
.gs-inputrow {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .7rem .9rem;
    border-bottom: 1px solid var(--mud-palette-lines-default, #e5e7eb);
}
.gs-input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-size: 1rem;
    color: var(--mud-palette-text-primary, #111827);
}
.gs-results { overflow-y: auto; padding: .35rem 0 .5rem; }
.gs-group {
    padding: .5rem .9rem .25rem;
    font-size: .72rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--mud-palette-text-disabled, #9ca3af);
}
.gs-row {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .45rem .9rem;
    cursor: pointer;
}
.gs-row-sel { background: var(--mud-palette-lines-default, #eef2ff); }
.gs-row-ico { color: var(--mud-palette-text-disabled, #9ca3af); }
.gs-row-text { flex: 1; min-width: 0; }
.gs-row-title { font-size: .92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gs-row-sub {
    font-size: .76rem;
    color: var(--mud-palette-text-secondary, #6b7280);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.gs-badge {
    font-size: .74rem;
    padding: .1rem .45rem;
    border-radius: 6px;
    background: var(--mud-palette-lines-default, #f3f4f6);
    color: var(--mud-palette-text-secondary, #6b7280);
    white-space: nowrap;
}
.gs-hint { padding: 1rem .9rem; font-size: .85rem; color: var(--mud-palette-text-secondary, #6b7280); }
.gs-hint-dim { color: var(--mud-palette-text-disabled, #9ca3af); font-size: .78rem; margin-top: .35rem; }

/* ---------------------------------------------------------------------------------------------
   Bootstrap utilities that carry a fixed colour.

   Bootstrap is still loaded here for its layout helpers (d-flex, ms-2, mb-3), but its colour
   utilities are constants: .text-muted is #6c757d whatever the theme is. With MudBlazor driving a
   light/dark palette that reads as dark grey on a dark ground, which is how every KPI card sublabel
   and page subtitle on the dashboard became unreadable the first time dark mode was switched on -
   151 call sites, and not one of them a compile error. Pointing the utility at the palette fixes
   all of them in one place, and keeps working for whatever gets written next.
   --------------------------------------------------------------------------------------------- */
.text-muted {
    color: var(--mud-palette-text-secondary) !important;
}

.text-danger {
    color: var(--mud-palette-error) !important;
}

/* ---------------------------------------------------------------------------------------------
   Tab width.

   The 160px floor MudBlazor puts under every tab is an inline style, so it is lifted through
   AppTabs.MinimumTabWidth rather than from here - a stylesheet cannot outrank an inline style.
   What is left here is the horizontal padding, so a label is not flush against the tab edge.
   --------------------------------------------------------------------------------------------- */
.mud-tabs .mud-tab {
    padding-left: 14px;
    padding-right: 14px;
}

/* ── the two utilities Bootstrap used to supply ───────────────────────────────────────────────
   MudBlazor ships d-flex, justify-* and the spacing scale, but no text alignment helpers, and
   these are the last thing the app was still loading a whole framework for. */
.text-end { text-align: right; }
.text-center { text-align: center; }
.text-start { text-align: left; }

/* ── grid headers ─────────────────────────────────────────────────────────────────────────────
   Every column carries a sort arrow and a filter funnel now, and they take their room out of the
   title: "รหัสถัดไป" in a 150px column came out as three stacked lines and made the header row
   taller than three rows of data. The title stays on one line and the column takes the width it
   needs - the grid scrolls sideways, which is the cheaper thing to spend. */
.mud-table-head th,
.mud-table-cell-header {
    white-space: nowrap;
}

.mud-table-head th .mud-table-sort-label {
    flex-wrap: nowrap;
}

/* ─── the floating action menu ───────────────────────────────────────────────────────────────
   It is fixed in the corner, so it sits on top of whatever the page put there. Two of them used
   to, and on /tickets the upper one covered the ล้างตัวกรอง button outright. There is one now,
   and the page is given room for it: content stops above the circle rather than under it. */
.qa-anchor {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 1200;
}

:root {
    /* Room under the page for the floating action menu. Named because a full-height panel has
       to subtract exactly this: /chat and /chat/inbox are sized to one screen, and when this
       padding appeared they became one screen plus 96px and the page started scrolling. */
    --itam-fab-clear: 96px;
}

.mud-main-content {
    /* the circle plus its shadow, plus a thumb's width of air */
    padding-bottom: var(--itam-fab-clear);
}