/* Global styles for the Blazor side of FlightDeck. The legacy MVC/AngularJS pages keep
   site.css + Bootstrap 3; this file deliberately does not load there. Component-specific
   styling lives in scoped .razor.css files; only shared tokens and primitives belong here. */

:root {
    --fd-bg: #f3f5f7;
    --fd-surface: #ffffff;
    --fd-border: #e2e6ea;
    --fd-text: #1f2933;
    --fd-text-muted: #616e7c;
    /* Also hard-coded in the themeColors map in Components/App.razor (the head script that keeps
       meta[name=theme-color] in sync runs before this stylesheet applies) and in the PWA icon
       sources under wwwroot/icons/source/. Change all three together. */
    --fd-header: #111827;
    --fd-header-text: #cbd5e1;
    --fd-accent: #2563eb;
    --fd-grid-bg: #ffffff;
    --fd-grid-header-bg: #f8fafc;
    --fd-grid-alt-bg: #f5f7fa;
    --fd-grid-row-hover: #eef3fb;
    --fd-grid-toolbar-bg: #f8fafc;
    --fd-popup-bg: #ffffff;
    --fd-popup-hover: #eef3fb;
    --fd-popup-selected: #dbeafe;
    --fd-popup-selected-text: #1e3a8a;
    --fd-status-displayed-bg: #fcf8e3;
    --fd-status-displayed-text: #6b4f00;
    --fd-status-displayed-border: #e8d9a2;
    --fd-status-needs-bg: #fbe4e6;
    --fd-status-needs-text: #7f1d1d;
    --fd-status-needs-border: #e9b4bb;
    --fd-status-ok-text: #15803d;
    /* Ticket discussion: tint for comments flagged Display to Client. Deliberately softer than
       the --fd-status-displayed-* grid-row tint, which paints whole rows. */
    --fd-message-client-bg: #fffdf5;
    --fd-message-client-border: #f0d47a;
    /* Time clock report row tints. Green/orange carry over from the legacy AngularJS report so
       the cues stay recognizable, softened here to keep --fd-text readable on top. */
    --fd-punch-pto-bg: #dff3e3;
    --fd-punch-pto-hover-bg: #cbe9d4;
    --fd-punch-manual-bg: #fde3c8;
    --fd-punch-manual-hover-bg: #f7d3ae;
    /* Green "create new" button tint, for the .fd-btn-new variant of .btn-inline. */
    --fd-btn-new-bg: #15803d;
    --fd-btn-new-hover-bg: #166534;
    --fd-btn-new-border: #15803d;
    --fd-btn-new-text: #ffffff;
    color-scheme: light;
}

:root[data-theme="dark"] {
    --fd-bg: #0f172a;
    --fd-surface: #111827;
    --fd-border: #334155;
    --fd-text: #e5e7eb;
    --fd-text-muted: #94a3b8;
    --fd-header: #020617;
    --fd-header-text: #cbd5e1;
    --fd-accent: #60a5fa;
    --fd-grid-bg: #0b1220;
    --fd-grid-header-bg: #121b2d;
    --fd-grid-alt-bg: #111b2e;
    --fd-grid-row-hover: #15213a;
    --fd-grid-toolbar-bg: #121b2d;
    --fd-popup-bg: #111b2e;
    --fd-popup-hover: #1a2842;
    --fd-popup-selected: #1e3a8a;
    --fd-popup-selected-text: #dbeafe;
    --fd-status-displayed-bg: #3f320e;
    --fd-status-displayed-text: #fde68a;
    --fd-status-displayed-border: #8b742e;
    --fd-status-needs-bg: #4a1f24;
    --fd-status-needs-text: #fecdd3;
    --fd-status-needs-border: #a24c58;
    --fd-status-ok-text: #6ee7a8;
    --fd-message-client-bg: #2b2410;
    --fd-message-client-border: #6b5a22;
    --fd-punch-pto-bg: #16351f;
    --fd-punch-pto-hover-bg: #1d4429;
    --fd-punch-manual-bg: #3a2610;
    --fd-punch-manual-hover-bg: #4a3116;
    --fd-btn-new-bg: #15803d;
    --fd-btn-new-hover-bg: #1a9c4b;
    --fd-btn-new-border: #1a9c4b;
    --fd-btn-new-text: #ffffff;
    color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --fd-bg: #0f172a;
        --fd-surface: #111827;
        --fd-border: #334155;
        --fd-text: #e5e7eb;
        --fd-text-muted: #94a3b8;
        --fd-header: #020617;
        --fd-header-text: #cbd5e1;
        --fd-accent: #60a5fa;
        --fd-grid-bg: #0b1220;
        --fd-grid-header-bg: #121b2d;
        --fd-grid-alt-bg: #111b2e;
        --fd-grid-row-hover: #15213a;
        --fd-grid-toolbar-bg: #121b2d;
        --fd-popup-bg: #111b2e;
        --fd-popup-hover: #1a2842;
        --fd-popup-selected: #1e3a8a;
        --fd-popup-selected-text: #dbeafe;
        --fd-status-displayed-bg: #3f320e;
        --fd-status-displayed-text: #fde68a;
        --fd-status-displayed-border: #8b742e;
        --fd-status-needs-bg: #4a1f24;
        --fd-status-needs-text: #fecdd3;
        --fd-status-needs-border: #a24c58;
        --fd-status-ok-text: #6ee7a8;
        --fd-message-client-bg: #2b2410;
        --fd-message-client-border: #6b5a22;
        --fd-punch-pto-bg: #16351f;
        --fd-punch-pto-hover-bg: #1d4429;
        --fd-punch-manual-bg: #3a2610;
        --fd-punch-manual-hover-bg: #4a3116;
        --fd-btn-new-bg: #15803d;
        --fd-btn-new-hover-bg: #1a9c4b;
        --fd-btn-new-border: #1a9c4b;
        --fd-btn-new-text: #ffffff;
        color-scheme: dark;
    }
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    /* Rubber-band overscroll in standalone mode exposes a white strip above the dark header. */
    overscroll-behavior-y: none;
}

html {
    background: var(--fd-bg);
    /* Stops iOS inflating text when the phone rotates to landscape. */
    -webkit-text-size-adjust: 100%;
}

body {
    background: var(--fd-bg);
    color: var(--fd-text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    transition: background-color 0.2s ease, color 0.2s ease;
}

:root[data-theme="dark"] .k-input,
:root[data-theme="dark"] .k-picker,
:root[data-theme="dark"] .btn-inline,
:root[data-theme="dark"] .fd-alert,
:root[data-theme="dark"] .fd-chat {
    background-color: var(--fd-surface);
    color: var(--fd-text);
    border-color: var(--fd-border);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .k-input,
    :root:not([data-theme="light"]) .k-picker,
    :root:not([data-theme="light"]) .btn-inline,
    :root:not([data-theme="light"]) .fd-alert,
    :root:not([data-theme="light"]) .fd-chat {
        background-color: var(--fd-surface);
        color: var(--fd-text);
        border-color: var(--fd-border);
    }
}

a {
    color: var(--fd-accent);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

.fd-page-title {
    margin: 0 0 20px;
    font-size: 22px;
    font-weight: 600;
}

/* Responsive criteria-form grid: fields flow into columns as space allows. */
.fd-form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px 24px;
}

.fd-form-actions {
    margin-top: 20px;
}

/* Card action row where the leading controls sit left and the primary add action sits far right. */
.fd-actions-split {
    display: flex;
    align-items: center;
    gap: 10px;
}

.fd-actions-end {
    margin-left: auto;
}

/* An action row leading a card (buttons, file pickers, filters) needs breathing room before the
   table or grid it introduces. Action rows that close a card, such as Save/Cancel, are last
   children and keep their existing spacing. */
.fd-card-body > .fd-form-actions:first-child {
    margin-bottom: 12px;
}

.fd-form-actions + .fd-help-text {
    margin-bottom: 12px;
}

.fd-form-hint {
    margin-left: 10px;
    color: var(--fd-text-muted);
    font-size: 12px;
}

/* Vertical stack of operation buttons (Izenda/Tools consoles). */
.fd-stacked-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
}

/* ---- Form control prominence overrides ----
   The stock Telerik default theme borders are too faint against the gray page background,
   and the unchecked checkbox all but disappears. Strengthen borders and give checkboxes a
   real outline, keeping the theme's coral primary for checked/focus accents. */

.k-input,
.k-picker {
    border-color: #97a3b4;
    background-color: #fff;
}

.k-input:hover,
.k-picker:hover {
    border-color: #64748b;
}

.k-input:focus-within,
.k-picker:focus-within {
    border-color: #ff6358;
    box-shadow: 0 0 0 3px rgba(255, 99, 88, 0.18);
}

.k-checkbox {
    width: 20px;
    height: 20px;
    border: 2px solid #64748b;
    background-color: #fff;
    border-radius: 4px;
}

.k-checkbox:hover {
    border-color: #475569;
}

.k-checkbox:focus,
.k-checkbox.k-focus {
    box-shadow: 0 0 0 3px rgba(255, 99, 88, 0.22);
}

.k-checkbox:checked,
.k-checkbox.k-checked {
    border-color: #ff6358;
    background-color: #ff6358;
}

/* Date/dropdown trigger buttons inside pickers pick up the stronger border too. */
.k-picker .k-input-button,
.k-input .k-input-button,
.k-input .k-clear-value {
    color: #475569;
}

/* ---- Button prominence ----
   Standalone action buttons (Search, Save, Run) were small enough to be easy to miss, so the
   default size grows here. Buttons packed into dense chrome are re-compacted below, otherwise
   growing them pushes out every grid toolbar and pager on the site. Explicitly small buttons
   (.k-button-sm) are left alone. */
.k-button-md {
    padding-block: 8px;
    padding-inline: 18px;
    font-size: 15px;
}

.k-grid .k-button-md,
.k-toolbar .k-button-md,
.k-pager .k-button-md,
.k-window-titlebar .k-button-md,
.k-dialog-titlebar .k-button-md,
.k-upload .k-button-md,
.fd-icon-btn.k-button-md {
    padding-block: 4px;
    padding-inline: 8px;
    font-size: 14px;
}

/* Telerik Grid theme bridge: keep grids visually aligned with the app theme, especially
   when OS dark mode is active and the base Telerik theme remains light-oriented. */
.k-grid {
    background: var(--fd-grid-bg);
    color: var(--fd-text);
    border-color: var(--fd-border);
}

.k-grid .k-grid-header,
.k-grid .k-grid-header-wrap,
.k-grid .k-table-thead,
.k-grid .k-toolbar,
.k-grid .k-grid-toolbar,
.k-grid .k-grid-pager,
.k-grid .k-pager-wrap {
    background: var(--fd-grid-toolbar-bg);
    color: var(--fd-text);
    border-color: var(--fd-border);
}

.k-grid .k-header,
.k-grid .k-table-th,
.k-grid th {
    background: var(--fd-grid-header-bg);
    color: var(--fd-text);
    border-color: var(--fd-border);
}

.k-grid .k-table-td,
.k-grid td,
.k-grid .k-detail-cell,
.k-grid .k-master-row td {
    background: var(--fd-grid-bg);
    color: var(--fd-text);
    border-color: var(--fd-border);
}

/* Zebra striping: Telerik's own theme already marks alternate rows with k-table-alt-row, but
   only styles the <tr>; our per-cell background rule above paints over it, so repaint the cells. */
.k-grid .k-table-alt-row td {
    background: var(--fd-grid-alt-bg);
}

.k-grid tbody tr:hover td,
.k-grid .k-table-row:hover td {
    background: var(--fd-grid-row-hover);
}

.k-grid .k-grid-content,
.k-grid .k-grid-content-locked,
.k-grid .k-table,
.k-grid .k-table-tbody {
    background: var(--fd-grid-bg);
    color: var(--fd-text);
}

/* Frozen (Locked="true") columns render as sticky cells that the Telerik theme paints opaquely at
   a higher specificity than the plain td/th rules above - .k-grid .k-master-row.k-table-row
   .k-table-td.k-grid-content-sticky is (0,5,0) against our (0,2,0) - so without these the frozen
   column stays light against a dark grid. Matching specificity is enough because app.css loads
   after the theme. Keep the alt-row rule after the base rule, mirroring the theme's own order. */
.k-grid .k-master-row.k-table-row .k-table-td.k-grid-content-sticky,
.k-grid .k-master-row .k-grid-content-sticky,
.k-grid .k-grid-content-sticky {
    background: var(--fd-grid-bg);
    color: var(--fd-text);
    border-color: var(--fd-border);
}

.k-grid .k-master-row.k-table-alt-row .k-table-td.k-grid-content-sticky,
.k-grid .k-table-alt-row .k-grid-content-sticky {
    background: var(--fd-grid-alt-bg);
}

.k-grid .k-master-row.k-table-row:is(:hover, .k-hover) .k-table-td.k-grid-content-sticky,
.k-grid .k-table-row:hover .k-grid-content-sticky {
    background: var(--fd-grid-row-hover);
}

.k-grid .k-grid-header .k-table-th.k-grid-header-sticky,
.k-grid .k-grid-header .k-table-td.k-grid-header-sticky,
.k-grid .k-grid-header .k-grid-header-sticky.k-sorted,
.k-grid .k-grid-footer .k-grid-footer-sticky {
    background: var(--fd-grid-header-bg);
    color: var(--fd-text);
    border-color: var(--fd-border);
}

.k-grid .k-grid-sticky-container {
    background: var(--fd-grid-bg);
    border-color: var(--fd-border);
}

/* Telerik overlay bridge: grid filter/column menus and popup lists are rendered at the root
   (outside component scope), so theme them explicitly to avoid bright popups on dark pages. */
.k-animation-container .k-popup,
.k-animation-container .k-menu-popup,
.k-animation-container .k-list-container,
.k-animation-container .k-grid-filter-menu,
.k-animation-container .k-column-menu,
.k-animation-container .k-filter-menu,
.k-animation-container .k-filter-menu-container,
.k-popup,
.k-list-container {
    background: var(--fd-popup-bg) !important;
    color: var(--fd-text) !important;
    border-color: var(--fd-border) !important;
}

.k-animation-container .k-popup .k-item,
.k-animation-container .k-popup .k-link,
.k-animation-container .k-popup .k-menu-link,
.k-animation-container .k-popup .k-columnmenu-item,
.k-animation-container .k-popup .k-check-wrap,
.k-animation-container .k-popup .k-input,
.k-animation-container .k-popup .k-picker,
.k-animation-container .k-popup .k-button,
.k-animation-container .k-popup .k-checkbox-label,
.k-animation-container .k-popup .k-list .k-item,
.k-animation-container .k-popup .k-list .k-list-item,
.k-animation-container .k-popup .k-list-optionlabel,
.k-animation-container .k-popup .k-chip,
.k-animation-container .k-popup .k-chip-label {
    color: var(--fd-text) !important;
}

.k-animation-container .k-popup .k-item:hover,
.k-animation-container .k-popup .k-link:hover,
.k-animation-container .k-popup .k-menu-link:hover,
.k-animation-container .k-popup .k-columnmenu-item:hover,
.k-animation-container .k-popup .k-list .k-item:hover,
.k-animation-container .k-popup .k-list .k-list-item:hover,
.k-animation-container .k-popup .k-focus,
.k-animation-container .k-popup .k-hover {
    background: var(--fd-popup-hover) !important;
}

.k-animation-container .k-popup .k-list .k-state-selected,
.k-animation-container .k-popup .k-list .k-selected,
.k-animation-container .k-popup .k-list .k-list-item.k-selected,
.k-animation-container .k-popup .k-list .k-item.k-selected,
.k-animation-container .k-popup .k-chip.k-selected {
    background: var(--fd-popup-selected) !important;
    color: var(--fd-popup-selected-text) !important;
}

.k-animation-container .k-popup .k-list,
.k-animation-container .k-popup .k-list-scroller,
.k-animation-container .k-popup .k-list-content,
.k-animation-container .k-popup .k-list-ul,
.k-animation-container .k-list-container > .k-list {
    background: var(--fd-popup-bg) !important;
    color: var(--fd-text) !important;
}

.k-animation-container .k-popup .k-list .k-item,
.k-animation-container .k-popup .k-list .k-list-item,
.k-animation-container .k-popup .k-list .k-list-optionlabel,
.k-animation-container .k-popup .k-list .k-optionlabel,
.k-animation-container .k-popup .k-list .k-link {
    color: var(--fd-text) !important;
}

.k-animation-container .k-popup .k-list .k-item a,
.k-animation-container .k-popup .k-list .k-list-item a,
.k-animation-container .k-popup .k-list .k-link {
    color: inherit !important;
}

.k-animation-container .k-popup .k-separator,
.k-animation-container .k-popup .k-list-group-separator,
.k-animation-container .k-popup .k-columnmenu-item,
.k-animation-container .k-popup .k-filter-menu-container,
.k-animation-container .k-popup .k-actions,
.k-animation-container .k-popup .k-table-th,
.k-animation-container .k-popup .k-table-td {
    border-color: var(--fd-border);
}

/* Date/time pickers use the same popup shell, but the calendar/time surfaces need their own
   contrast rules because Telerik renders them with lighter defaults. */
.k-animation-container .k-calendar,
.k-animation-container .k-calendar-container,
.k-animation-container .k-datetimepicker-popup,
.k-animation-container .k-time-container,
.k-animation-container .k-time-list-wrapper {
    background: var(--fd-popup-bg);
    color: var(--fd-text);
    border-color: var(--fd-border);
}

.k-animation-container .k-calendar .k-header,
.k-animation-container .k-calendar .k-calendar-header,
.k-animation-container .k-calendar .k-calendar-nav,
.k-animation-container .k-calendar .k-nav-fast,
.k-animation-container .k-calendar .k-nav-prev,
.k-animation-container .k-calendar .k-nav-next,
.k-animation-container .k-time-list-wrapper .k-header {
    background: var(--fd-grid-toolbar-bg);
    color: var(--fd-text);
    border-color: var(--fd-border);
}

.k-animation-container .k-calendar .k-content,
.k-animation-container .k-calendar .k-calendar-table,
.k-animation-container .k-calendar .k-calendar-view,
.k-animation-container .k-time-list-wrapper .k-list,
.k-animation-container .k-time-list-wrapper .k-list-scroller,
.k-animation-container .k-time-list-wrapper .k-list-content {
    background: var(--fd-popup-bg) !important;
    color: var(--fd-text) !important;
}

.k-animation-container .k-calendar th,
.k-animation-container .k-calendar td,
.k-animation-container .k-calendar .k-link,
.k-animation-container .k-time-list-wrapper .k-item,
.k-animation-container .k-time-list-wrapper .k-list-optionlabel {
    color: var(--fd-text);
}

.k-animation-container .k-calendar .k-link,
.k-animation-container .k-time-list-wrapper .k-item {
    border-color: transparent !important;
}

.k-animation-container .k-calendar .k-link:hover,
.k-animation-container .k-calendar .k-state-hover .k-link,
.k-animation-container .k-calendar .k-today .k-link,
.k-animation-container .k-time-list-wrapper .k-item:hover,
.k-animation-container .k-time-list-wrapper .k-state-hover {
    background: var(--fd-popup-hover) !important;
    color: var(--fd-text) !important;
}

.k-animation-container .k-calendar .k-state-selected .k-link,
.k-animation-container .k-calendar .k-state-selected:hover .k-link,
.k-animation-container .k-time-list-wrapper .k-state-selected,
.k-animation-container .k-time-list-wrapper .k-selected {
    background: var(--fd-accent) !important;
    color: #ffffff !important;
}

.k-animation-container .k-calendar .k-other-month .k-link,
.k-animation-container .k-calendar .k-disabled .k-link,
.k-animation-container .k-time-list-wrapper .k-disabled {
    color: var(--fd-text-muted);
}

.k-animation-container .k-calendar .k-footer {
    background: var(--fd-grid-toolbar-bg);
    border-color: var(--fd-border);
}

/* Telerik Editor theme bridge. The editors on the ticket page run in Div edit mode
   (EditMode="@EditorEditMode.Div"); in the default Iframe mode the typing surface is a separate
   document that these rules - and the theme tokens they read - cannot reach, so it stayed white on
   dark pages. Keep the two in step: an editor that goes back to Iframe mode loses this styling. */
.k-editor {
    background-color: var(--fd-surface);
    color: var(--fd-text);
    border-color: var(--fd-border);
}

.k-editor .k-toolbar,
.k-editor .k-editor-toolbar {
    background-color: var(--fd-grid-toolbar-bg);
    color: var(--fd-text);
    border-color: var(--fd-border);
}

/* Toolbar tools are flat buttons: the theme gives them color:inherit and paints hover with a
   currentColor overlay, so setting the toolbar's own color above is all they need. */
.k-editor .k-toolbar .k-separator,
.k-editor .k-toolbar .k-toolbar-separator {
    border-color: var(--fd-border);
}

.k-editor .k-editor-content,
.k-editor .k-editor-content > .ProseMirror {
    background-color: var(--fd-surface);
    color: var(--fd-text);
}

.k-editor .k-editor-content > .ProseMirror .k-placeholder::before {
    color: var(--fd-text-muted);
}

/* Table borders inside the content are hard-coded to #ddd by the theme. */
.k-editor-content td,
.k-editor-content th {
    border-color: var(--fd-border);
}

/* The context toolbar that pops up over a selected image, link, or table renders at the document
   root rather than inside .k-editor. */
.k-floating-toolbar,
.k-floating-toolbar .k-toolbar {
    background-color: var(--fd-grid-toolbar-bg);
    color: var(--fd-text);
    border-color: var(--fd-border);
}

/* Dialogs and windows: the ticket page hosts two of the editors inside a TelerikDialog, and the
   editor's own link/image/table tools open Telerik windows. Both default to a light shell. */
.k-dialog,
.k-window {
    background-color: var(--fd-surface);
    color: var(--fd-text);
    border-color: var(--fd-border);
}

.k-dialog .k-dialog-titlebar,
.k-window .k-window-titlebar {
    background-color: var(--fd-grid-toolbar-bg);
    color: var(--fd-text);
    border-color: var(--fd-border);
}

.k-dialog .k-dialog-content,
.k-window .k-window-content {
    color: var(--fd-text);
}

.k-dialog .k-dialog-actions,
.k-dialog .k-actions,
.k-window .k-actions {
    background-color: var(--fd-grid-toolbar-bg);
    border-color: var(--fd-border);
}

/* Hierarchical / master-detail grids: keep expander cells, detail rows, and child row bands
   aligned with the dark grid surface instead of the light Telerik defaults. */
.k-grouping-header,
.k-grid .k-grouping-header,
.k-grouping-header .k-group-indicator,
.k-grid .k-grouping-header .k-group-indicator,
.k-grouping-header .k-grouping-dropclue,
.k-grid .k-grouping-header .k-grouping-dropclue {
    background: var(--fd-grid-toolbar-bg) !important;
    color: var(--fd-text) !important;
    border-color: var(--fd-border) !important;
}

.k-grouping-header .k-group-indicator,
.k-grid .k-grouping-header .k-group-indicator {
    border: 1px solid var(--fd-border) !important;
    border-radius: 4px;
}

.k-grouping-header .k-group-indicator:hover,
.k-grid .k-grouping-header .k-group-indicator:hover,
.k-grouping-header .k-group-indicator.k-state-hover,
.k-grid .k-grouping-header .k-group-indicator.k-state-hover {
    background: var(--fd-grid-row-hover) !important;
}

.k-grid .k-hierarchy-cell,
.k-grid .k-hierarchy-col,
.k-grid .k-detail-row > td,
.k-grid .k-detail-cell,
.k-grid .k-grouping-row > td,
.k-grid .k-group-footer td,
.k-grid .k-grid-content tr.k-detail-row td {
    background: var(--fd-grid-bg) !important;
    color: var(--fd-text);
    border-color: var(--fd-border);
}

.k-grid .k-hierarchy-cell .k-icon,
.k-grid .k-grouping-row .k-icon,
.k-grid .k-detail-row .k-icon {
    color: var(--fd-text-muted);
}

.k-grid .k-grouping-row > td,
.k-grid .k-group-header,
.k-grid .k-group-footer td {
    background: var(--fd-grid-toolbar-bg) !important;
    color: var(--fd-text);
}

.k-grid .k-detail-row:hover > td,
.k-grid .k-master-row:hover td,
.k-grid .k-grouping-row:hover > td {
    background: var(--fd-grid-row-hover) !important;
}

/* Time clock report row tints (PTO / manual entry), carried over from the legacy report, which
   set them on the <tr>. That no longer works: every rule above paints the cells instead, so the
   row background never shows through. Paint the cells, and outrank the !important hover rule
   directly above so the cue survives while the pointer is over the row. */
.k-grid .k-master-row.punch-clock-pto td,
.k-grid .k-master-row.punch-clock-pto .k-table-td,
.k-grid .k-master-row.punch-clock-pto .k-grid-content-sticky {
    background: var(--fd-punch-pto-bg) !important;
}

.k-grid .k-master-row.punch-clock-pto:hover td,
.k-grid .k-master-row.punch-clock-pto:hover .k-table-td,
.k-grid .k-master-row.punch-clock-pto:hover .k-grid-content-sticky {
    background: var(--fd-punch-pto-hover-bg) !important;
}

.k-grid .k-master-row.punch-clock-manual-entry td,
.k-grid .k-master-row.punch-clock-manual-entry .k-table-td,
.k-grid .k-master-row.punch-clock-manual-entry .k-grid-content-sticky {
    background: var(--fd-punch-manual-bg) !important;
}

.k-grid .k-master-row.punch-clock-manual-entry:hover td,
.k-grid .k-master-row.punch-clock-manual-entry:hover .k-table-td,
.k-grid .k-master-row.punch-clock-manual-entry:hover .k-grid-content-sticky {
    background: var(--fd-punch-manual-hover-bg) !important;
}

.k-grid .k-grouping-row td,
.k-grid .k-grouping-row .k-group-cell,
.k-grid .k-grouping-row .k-group-cell + td,
.k-grid .k-group-footer td,
.k-grid .k-group-footer .k-group-cell,
.k-grid .k-group-footer .k-group-cell + td {
    background: var(--fd-grid-toolbar-bg) !important;
    color: var(--fd-text) !important;
    border-color: var(--fd-border) !important;
}

.k-grid .k-grouping-row .k-icon,
.k-grid .k-group-footer .k-icon {
    color: var(--fd-text-muted) !important;
}

/* Streaming output console (SQL exec pages). */
.fd-console {
    margin: 0;
    padding: 12px 16px;
    list-style: none;
    background: #0f172a;
    color: #e2e8f0;
    border-radius: 6px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 13px;
    max-height: 320px;
    overflow-y: auto;
}

.fd-console li {
    padding: 1px 0;
}

/* Compact inline action links inside grid rows. */
.btn-inline {
    display: inline-block;
    padding: 3px 10px;
    margin-right: 6px;
    border: 1px solid var(--fd-border);
    border-radius: 4px;
    background: #fff;
    color: var(--fd-text);
    font-size: 12px;
    text-decoration: none;
}

.btn-inline:hover {
    background: var(--fd-bg);
    text-decoration: none;
}

/* Green "create new" variant. The :root prefix matches the specificity of the dark-theme
   .btn-inline override near the top of this file, so the green survives in both themes. */
:root .btn-inline.fd-btn-new {
    background: var(--fd-btn-new-bg);
    border-color: var(--fd-btn-new-border);
    color: var(--fd-btn-new-text);
    /* Bigger than the row action links next to it: this one starts a workflow. */
    padding: 6px 14px;
    font-size: 14px;
}

:root .btn-inline.fd-btn-new:hover {
    background: var(--fd-btn-new-hover-bg);
}

/* Pushes a toolbar item to the far right of a Telerik grid toolbar. */
.fd-toolbar-right {
    margin-left: auto;
    margin-right: 0;
}

/* Same-size icon-only action buttons/links, laid out side by side in a grid row. */
.fd-row-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}

.fd-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    margin-right: 0;
}

/* Truncated multi-line preview for template/notes cells. */
.fd-template-preview {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    white-space: pre-wrap;
}

/* Dashboard layout: single column until there is room for two. Fixed at two so the
   card pairs (sprint/team, then the two charts) stay on the rows they were authored in. */
.fd-dashboard {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0 20px;
    align-items: start;
}

@media (min-width: 940px) {
    .fd-dashboard {
        grid-template-columns: 1fr 1fr;
    }
}

/* Opt a card out of top alignment so it fills its grid row and matches its neighbor. */
.fd-dashboard .fd-card-equal {
    align-self: stretch;
}

.fd-kv {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 4px 16px;
    margin: 0 0 12px;
}

.fd-kv dt {
    color: var(--fd-text-muted);
    font-size: 13px;
}

.fd-kv dd {
    margin: 0;
    font-weight: 600;
}

.fd-subhead {
    margin: 12px 0 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--fd-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.fd-name-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 2px 12px;
}

.fd-name-grid.fd-muted {
    color: var(--fd-text-muted);
}

/* Alerts (converted from Bootstrap alert-info / alert-danger usage on legacy pages) */
.fd-alert {
    border: 1px solid var(--fd-border);
    border-radius: 6px;
    padding: 12px 16px;
    margin: 0 0 16px;
    background: var(--fd-surface);
}

.fd-alert-danger {
    border-color: #fca5a5;
    background: #fef2f2;
    color: #991b1b;
}

.fd-alert-info {
    border-color: #93c5fd;
    background: #eff6ff;
    color: #1e40af;
}

.fd-scroll-target {
    animation: fd-scroll-highlight 2s ease-out;
}

@keyframes fd-scroll-highlight {
    from {
        background-color: #fef08a;
    }
    to {
        background-color: transparent;
    }
}

.fd-help-text {
    color: var(--fd-text-muted);
    font-size: 12px;
    margin-top: 4px;
}

/* Plain data tables (CompAutorun process editor, dialog detail tables) */
.fd-table-scroll {
    overflow-x: auto;
}

.fd-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.fd-table th,
.fd-table td {
    border-bottom: 1px solid var(--fd-border);
    padding: 6px 8px;
    text-align: left;
    vertical-align: middle;
}

.fd-table th {
    font-weight: 600;
    white-space: nowrap;
}

.fd-table tbody tr:nth-child(odd) {
    background: var(--fd-bg);
}

.fd-table-center {
    text-align: center !important;
}

/* Azure AI guide chat */
.fd-chat {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--fd-border);
    border-radius: 10px;
    overflow: hidden;
}

.fd-chat-box {
    max-height: 500px;
    min-height: 200px;
    overflow-y: auto;
    padding: 16px;
    background: var(--fd-bg);
}

.fd-chat-message {
    display: flex;
    margin: 8px 0;
}

.fd-chat-message.fd-chat-user {
    justify-content: flex-end;
}

.fd-chat-message.fd-chat-bot {
    justify-content: flex-start;
}

.fd-chat-content {
    max-width: 80%;
    padding: 10px 14px;
    font-size: 14px;
    line-height: 1.5;
    word-wrap: break-word;
    border-radius: 14px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    background: var(--fd-surface);
}

.fd-chat-user .fd-chat-content {
    background: var(--fd-accent);
    color: #ffffff;
}

.fd-chat-input {
    display: flex;
    gap: 8px;
    padding: 10px;
    border-top: 1px solid var(--fd-border);
    background: var(--fd-surface);
}

.fd-chat-input .k-input {
    flex: 1;
}

/* Selected cross-client command summary */
.fd-command-info {
    border: 1px solid var(--fd-border);
    border-radius: 6px;
    padding: 10px 14px;
    margin: 12px 0;
    background: var(--fd-bg);
}

.fd-command-info p {
    margin: 4px 0 0;
    color: var(--fd-text-muted);
    font-size: 13px;
}

/* Client Support ticket manager + editor */
.fd-ticket-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.fd-date-pair {
    display: flex;
    gap: 8px;
    align-items: center;
}

.fd-legend {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.fd-legend-item {
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 12px;
    border: 1px solid var(--fd-border);
    font-weight: 600;
}

.fd-legend-displayed {
    background-color: var(--fd-status-displayed-bg);
    color: var(--fd-status-displayed-text);
    border-color: var(--fd-status-displayed-border);
}

.fd-legend-needs-response {
    background-color: var(--fd-status-needs-bg);
    color: var(--fd-status-needs-text);
    border-color: var(--fd-status-needs-border);
}

.k-grid tr.fd-row-display-to-client td {
    background-color: var(--fd-status-displayed-bg);
    color: var(--fd-status-displayed-text);
}

.k-grid tr.fd-row-needs-response td {
    background-color: var(--fd-status-needs-bg);
    color: var(--fd-status-needs-text);
}

.k-grid tr.fd-row-display-to-client:hover td {
    background-color: var(--fd-status-displayed-bg);
}

.k-grid tr.fd-row-needs-response:hover td {
    background-color: var(--fd-status-needs-bg);
}

.fd-browser-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 4px 12px;
}

.fd-message {
    border: 1px solid var(--fd-border);
    border-radius: 6px;
    margin-top: 12px;
    background: var(--fd-surface);
    color: var(--fd-text);
}

.fd-message-client {
    border-color: var(--fd-message-client-border);
    background: var(--fd-message-client-bg);
}

.fd-message-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--fd-border);
    font-size: 13px;
    flex-wrap: wrap;
}

.fd-message-client .fd-message-header {
    border-bottom-color: var(--fd-message-client-border);
}

.fd-message-body {
    padding: 10px 12px;
    overflow-x: auto;
}

/* Message bodies are stored HTML: comments typed in the editor inherit the theme, but forwarded
   email arrives carrying its own colors. In dark mode an element that brings a background (almost
   always a light one) would inherit the theme's light text and become unreadable, so give those
   elements dark text and let them render as a self-contained light island. Elements that set their
   own inline color still win, since that lands on the element itself. */
:root[data-theme="dark"] .fd-message-body [bgcolor],
:root[data-theme="dark"] .fd-message-body [style*="background"] {
    color: #1f2933;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .fd-message-body [bgcolor],
    :root:not([data-theme="light"]) .fd-message-body [style*="background"] {
        color: #1f2933;
    }
}

.fd-message-body img {
    max-width: 100%;
    height: auto;
}

/* Identity (static SSR) pages */
.fd-auth-container {
    max-width: 480px;
    margin: 40px auto;
    background: var(--fd-surface);
    border: 1px solid var(--fd-border);
    border-radius: 10px;
    /* Bottom inset keeps the Log in button clear of the iPhone home indicator. */
    padding: 28px 32px calc(28px + env(safe-area-inset-bottom));
}

.fd-auth-container.fd-auth-wide {
    max-width: 860px;
}

.fd-auth-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.fd-auth-form label {
    font-size: 13px;
    font-weight: 600;
    display: block;
    margin-bottom: 4px;
}

/* Matched by exclusion rather than by type: Blazor's InputText renders no type attribute at all
   unless one is passed explicitly, and most of the Identity fields don't pass one. Keying off
   input[type="text"] silently left those fields unstyled at the browser's default width. */
.fd-auth-form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="button"]) {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--fd-border);
    border-radius: 6px;
    font-size: 14px;
}

.fd-auth-form input:focus {
    outline: none;
    border-color: var(--fd-accent);
}

.fd-auth-button {
    background: var(--fd-accent);
    color: #ffffff;
    border: none;
    border-radius: 6px;
    padding: 10px 16px;
    font-size: 14px;
    cursor: pointer;
}

.fd-auth-button:hover {
    filter: brightness(1.08);
}

.fd-auth-button-secondary {
    background: var(--fd-surface);
    color: var(--fd-text);
    border: 1px solid var(--fd-border);
}

.fd-auth-errors,
.validation-message {
    color: #b91c1c;
    font-size: 13px;
    margin: 4px 0;
    list-style: none;
    padding: 0;
}

.fd-auth-status {
    border: 1px solid #86efac;
    background: #f0fdf4;
    color: #166534;
    border-radius: 6px;
    padding: 8px 12px;
    margin-bottom: 12px;
    font-size: 13px;
}

.fd-auth-checkbox {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
}

.fd-auth-links {
    margin-top: 14px;
    font-size: 13px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.fd-manage-grid {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 24px;
}

.fd-manage-nav {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 14px;
}

.fd-recovery-codes {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px 18px;
    font-family: ui-monospace, monospace;
    margin: 12px 0;
}

/* Static-SSR (Account/Manage) shell: same dark header as the interactive layout, but global —
   MainLayout's .fd-header/.fd-brand are scoped CSS and do not reach these layouts. */
.fd-auth-header {
    display: flex;
    align-items: center;
    /* Login is the first screen an installed app shows, so it needs the same notch clearance as
       MainLayout's header. */
    padding-top: env(safe-area-inset-top);
    padding-right: calc(20px + env(safe-area-inset-right));
    padding-bottom: 0;
    padding-left: calc(20px + env(safe-area-inset-left));
    background: var(--fd-header);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.fd-auth-brand {
    padding: 14px 12px 14px 0;
    color: #fff;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-decoration: none;
}

.fd-auth-brand:hover {
    color: #fff;
    text-decoration: none;
}

/* Nav search dropdown items: label left, owning menu section right. Global because Telerik
   renders the popup at the root, outside the layout's scoped CSS. */
.fd-nav-search-section {
    float: right;
    margin-left: 16px;
    color: var(--fd-text-muted);
    font-size: 12px;
}

/* ---------------------------------------------------------------------------------------------
   Phone and installed-PWA behaviour. The safe-area work is split: MainLayout.razor.css handles
   the interactive shell, this file handles everything outside it (the static-SSR auth chrome
   above, the reconnect modal, and the global primitives below).
   --------------------------------------------------------------------------------------------- */

@media (max-width: 700px) {
    /* iOS zooms the viewport when a control smaller than 16px takes focus and never zooms back
       out. Telerik inputs and the auth form both render at 14px, so without this every field tap
       leaves the page stranded at a magnified scroll position.

       !important is deliberate. This has to beat both Telerik's component CSS and this file's own
       .fd-auth-form input rule, and it is a viewport-level accessibility override rather than a
       style choice, so losing a specificity race to any future rule would be a silent regression. */
    input,
    select,
    textarea,
    .k-input-inner,
    .k-picker .k-input-inner {
        font-size: 16px !important;
    }

    /* Keep wide content scrolling inside its own container instead of making the whole document
       scroll sideways, which breaks the sticky header. This is the bounded version: no column
       hiding, no stacked-card grid modes, no per-report layouts. */
    .fd-page .k-grid {
        max-width: 100%;
    }

    .fd-page .k-grid .k-grid-content,
    .fd-page .k-grid .k-grid-header-wrap {
        -webkit-overflow-scrolling: touch;
    }

    .fd-page > table,
    .fd-page .fd-report-table {
        display: block;
        max-width: 100%;
        overflow-x: auto;
    }
}

/* Opt-in for individual wide report pages: wraps content in its own horizontal scroller and
   hints that there is more to the right. Adopt page by page rather than all at once. */
.fd-scroll-x {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    background:
        linear-gradient(to right, var(--fd-surface) 30%, rgba(255, 255, 255, 0)) left center,
        linear-gradient(to left, var(--fd-surface) 30%, rgba(255, 255, 255, 0)) right center;
    background-repeat: no-repeat;
    background-size: 24px 100%;
    background-attachment: local, local;
}

@media (display-mode: standalone) {
    /* Long-pressing nav chrome in an installed app pops the iOS link callout, which reads as a
       bug rather than a feature. Left enabled on page content, where copying a link is useful. */
    .fd-header a,
    .fd-menu a,
    .fd-auth-header a {
        -webkit-touch-callout: none;
    }
}

/* Blazor's reconnect overlay. The markup is in Components/App.razor, outside MainLayout, so this
   cannot live in a scoped .razor.css file. Both selector forms are styled on purpose: .NET 8
   toggles classes, .NET 9+ also sets a components-reconnect-state attribute. */
#components-reconnect-modal {
    display: none;
}

#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected,
#components-reconnect-modal[components-reconnect-state="show"],
#components-reconnect-modal[components-reconnect-state="failed"],
#components-reconnect-modal[components-reconnect-state="rejected"] {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 2000; /* above .fd-header at 1030 */
    align-items: center;
    justify-content: center;
    padding: calc(20px + env(safe-area-inset-top)) 20px calc(20px + env(safe-area-inset-bottom));
    background: rgba(2, 6, 23, 0.55);
    backdrop-filter: blur(2px);
}

.fd-reconnect-card {
    max-width: 380px;
    padding: 24px 28px;
    border: 1px solid var(--fd-border);
    border-radius: 10px;
    background: var(--fd-surface);
    color: var(--fd-text);
    box-shadow: 0 16px 40px rgba(2, 6, 23, 0.35);
    text-align: center;
}

.fd-reconnect-title {
    font-size: 16px;
    font-weight: 700;
}

.fd-reconnect-body {
    margin: 8px 0 16px;
    color: var(--fd-text-muted);
}

.fd-reconnect-button {
    padding: 9px 20px;
    border: none;
    border-radius: 6px;
    background: var(--fd-accent);
    color: #fff;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

/* While retries are still running, offer the attempt counter and hide the give-up copy; once
   Blazor gives up, swap them. The Reload button is shown throughout. */
.fd-reconnect-when-failed,
#components-reconnect-modal.components-reconnect-failed .fd-reconnect-when-show,
#components-reconnect-modal.components-reconnect-rejected .fd-reconnect-when-show,
#components-reconnect-modal[components-reconnect-state="failed"] .fd-reconnect-when-show,
#components-reconnect-modal[components-reconnect-state="rejected"] .fd-reconnect-when-show {
    display: none;
}

#components-reconnect-modal.components-reconnect-failed .fd-reconnect-when-failed,
#components-reconnect-modal.components-reconnect-rejected .fd-reconnect-when-failed,
#components-reconnect-modal[components-reconnect-state="failed"] .fd-reconnect-when-failed,
#components-reconnect-modal[components-reconnect-state="rejected"] .fd-reconnect-when-failed {
    display: block;
}

/* Circuit-death banner. Blazor reveals it by setting an inline display:block on the outer element,
   which is why the layout lives on the inner div: an inline style would win over anything set here. */
#blazor-error-ui {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2000; /* same layer as the reconnect modal, above .fd-header at 1030 */
    padding: 12px calc(16px + env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) calc(16px + env(safe-area-inset-left));
    background: #7f1d1d;
    color: #fff;
    box-shadow: 0 -6px 20px rgba(2, 6, 23, 0.35);
}

.fd-error-ui-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
}

.fd-error-ui-button {
    padding: 6px 16px;
    border: none;
    border-radius: 6px;
    background: #fff;
    color: #7f1d1d;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.fd-error-ui-dismiss {
    padding: 4px 8px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: #fff;
    font: inherit;
    cursor: pointer;
}

/* Monaco host for the SQL tool pages. Monaco cannot size itself, so the height comes from here (or
   the component's Height parameter) and the border makes it read as a form field like the textarea
   it replaced. */
.fd-sql-editor {
    height: 260px;
    border: 1px solid #97a3b4;
    border-radius: 4px;
    overflow: hidden;
}

/* BlazorMonaco renders its own div inside this one, and Monaco sizes itself to THAT element, not to
   this wrapper. Without a height on the child the editor collapses to about 5px: it still works, but
   only the top few pixels are hit-testable, so a click anywhere in the box lands on the wrapper
   instead and the editor never takes focus - no caret, no typing, no suggestions. Measured 5px
   before this rule and 258px after. */
.fd-sql-editor > div {
    height: 100%;
}

.fd-sql-editor:focus-within {
    border-color: #ff6358;
    box-shadow: 0 0 0 3px rgba(255, 99, 88, 0.18);
}

/* Fallback card rendered by PageErrorBoundary in place of the page that failed. */
.fd-error-title {
    font-weight: 700;
    margin-bottom: 6px;
}

.fd-error-detail {
    margin-top: 12px;
}

.fd-error-detail pre {
    max-height: 320px;
    margin: 8px 0 0;
    padding: 12px;
    overflow: auto;
    border-radius: 6px;
    background: var(--fd-bg);
    color: var(--fd-text);
    font-size: 12px;
    white-space: pre-wrap;
    word-break: break-word;
}

/* App setting editor cells. A setting that does not exist on a site must never be mistaken for a
   setting that exists holding an empty string, so both get an explicit label and their own
   treatment; a blank cell is not a valid state anywhere in this grid. The state classes are also
   used standalone (as spans) by the Pending Changes grid. */
.fd-cell {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 20px;
}

.fd-cell-value {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fd-cell-missing {
    border-bottom: 1px dashed var(--fd-text-muted);
    color: var(--fd-text-muted);
    font-style: italic;
}

.fd-cell-empty,
.fd-cell-na {
    color: var(--fd-text-muted);
    font-style: italic;
}

.fd-cell-na {
    opacity: 0.6;
}

.fd-cell-modified {
    padding: 0 6px;
    border: 1px solid var(--fd-status-displayed-border);
    border-radius: 4px;
    background: var(--fd-status-displayed-bg);
    color: var(--fd-status-displayed-text);
    font-weight: 600;
}

.fd-cell-removed {
    padding: 0 6px;
    border: 1px solid var(--fd-status-needs-border);
    border-radius: 4px;
    background: var(--fd-status-needs-bg);
    color: var(--fd-status-needs-text);
    font-style: italic;
    text-decoration: line-through;
}

/* Revealed on cell hover or keyboard focus; opacity rather than display so the button stays in the
   tab order for keyboard users. */
.fd-cell-action {
    flex: 0 0 auto;
    padding: 0 5px;
    border: none;
    border-radius: 3px;
    opacity: 0;
    background: transparent;
    color: var(--fd-text-muted);
    font: inherit;
    line-height: 1.4;
    cursor: pointer;
    transition: opacity 0.12s ease;
}

.k-grid td:hover .fd-cell-action,
.fd-cell-action:focus-visible {
    opacity: 1;
}

.fd-cell-action:hover {
    background: var(--fd-status-needs-bg);
    color: var(--fd-status-needs-text);
}

/* A value SecretKeys flagged as a credential, masked until the user reveals it. Deliberately
   low-contrast and letter-spaced so a screen-share or a shoulder does not pick up the length as a
   hint. The cell renders no title attribute while masked. */
.fd-cell-secret .fd-cell-value {
    color: var(--fd-text-muted);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    letter-spacing: 1px;
}

.fd-result-ok {
    color: var(--fd-status-ok-text);
    font-weight: 600;
}

.fd-result-fail {
    color: var(--fd-status-needs-text);
    font-weight: 600;
}

/* Setting-key metadata marker. The note lives in the title attribute so it degrades to a native
   tooltip if the Telerik tooltip is unavailable. */
.fd-key-cell {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 20px;
}

.fd-setting-key {
    flex: 1 1 auto;
    overflow: hidden;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* A setting whose value is not identical across every loaded column. The marker lives on the frozen
   key cell so it stays on screen while the value columns scroll sideways, and it uses the accent
   rather than the warning and error tints already spoken for by the modified and removed cell
   states. The bar is a flex item rather than a border so it does not have to fight the grid's own
   cell padding. */
.fd-key-diff::before {
    content: "";
    flex: 0 0 3px;
    align-self: stretch;
    border-radius: 2px;
    background: var(--fd-accent);
}

.fd-key-diff .fd-setting-key {
    color: var(--fd-text);
    font-weight: 700;
}

.fd-key-diff-badge {
    flex: 0 0 auto;
    padding: 0 7px;
    border: 1px solid var(--fd-accent);
    border-radius: 10px;
    color: var(--fd-accent);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.7;
    white-space: nowrap;
    cursor: help;
}

.fd-setting-info {
    margin-left: 6px;
    color: var(--fd-accent);
    font-size: 13px;
    cursor: help;
}

/* Missing-section opt-in in the Add Setting Key dialog. Uses the same tokens as the rest of the
   dialog so it reads as part of the form rather than as an alert. */
.fd-setting-note {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 4px 8px;
    align-items: start;
    margin-top: 14px;
    padding: 12px 14px;
    border: 1px solid var(--fd-border);
    border-left: 3px solid var(--fd-accent);
    border-radius: 4px;
    background: var(--fd-grid-alt-bg);
}

.fd-setting-note label {
    cursor: pointer;
    line-height: 1.5;
}

/* The hint spans both columns so it lines up under the label, not under the checkbox. */
.fd-setting-note .fd-form-hint {
    grid-column: 1 / -1;
    margin: 0;
}

.fd-section-name {
    display: inline-block;
    margin: 0 2px;
    padding: 1px 6px;
    border: 1px solid var(--fd-border);
    border-radius: 3px;
    background: var(--fd-surface);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
    color: var(--fd-text);
}