/* ============================================================
 * Inventory catalog widgets (W66-W78)
 * Shared design tokens used across both the catalog list page
 * and the catalog item editor page.
 * ============================================================ */

/* --- shared entity page header layout --- */
.widget-entity-header {
    min-height: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
}
.widget-entity-title-bar {
    /* color + text-shadow delegated to canonical .theme-text in HTML. */
    box-sizing: border-box;
    display: flex;
    align-items: center;
    font-size: 22px;
    min-width: 0;
}
.widget-entity-title-bar i {
    color: rgb(140, 140, 140);
    flex: 0 0 auto;
}
.widget-entity-title-stack {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.widget-entity-title-text {
    color: rgb(200, 200, 200);
    font-size: 22px;
    line-height: 1;
    margin: 0;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: 0px 0px 5px black;
    white-space: nowrap;
}
.widget-entity-title-meta {
    font-size: 18px;
    color: rgb(120, 120, 120);
    min-width: 0;
    text-shadow: 0px 0px 5px black;
}
.widget-entity-title-actions {
    display: flex;
    flex: 1 1 420px;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    min-width: 0;
}

.widget-entity-header-nowrap {
    flex-wrap: nowrap;
}

.widget-entity-header-nowrap .widget-entity-title-bar {
    flex: 0 0 auto;
}

.widget-entity-search-input.widget-search-input {
    flex: 1 1 360px;
    min-width: 260px;
}

.widget-layout:is([data-widget-size-x="2"], [data-widget-size-x="3"], [data-widget-composed-size-x="2"], [data-widget-composed-size-x="3"]).widget-entity-header-nowrap {
    flex-wrap: wrap;
}

.widget-layout:is([data-widget-size-x="2"], [data-widget-size-x="3"], [data-widget-composed-size-x="2"], [data-widget-composed-size-x="3"]) .widget-entity-search-actions {
    flex: 1 1 100%;
    flex-wrap: wrap;
    justify-content: stretch;
}

.widget-layout:is([data-widget-size-x="2"], [data-widget-size-x="3"], [data-widget-composed-size-x="2"], [data-widget-composed-size-x="3"]) .widget-entity-search-input.widget-search-input {
    box-sizing: border-box;
    flex: 1 1 100%;
    min-width: 0;
}

.widget-layout:is([data-widget-size-x="2"], [data-widget-size-x="3"], [data-widget-composed-size-x="2"], [data-widget-composed-size-x="3"]) .widget-entity-search-actions button {
    flex: 1 1 calc((100% - 20px) / 2);
    min-width: 0;
}

/* --- Widget action button layout helper --- */
.widget-action-primary,
.widget-action-ghost,
.widget-action-destructive,
.widget-action-accept {
    align-items: center;
    box-shadow: 0px 0px 5px black;
    color: rgb(175, 175, 175);
    display: inline-flex;
    gap: 10px;
    min-height: 40px;
    padding: 10px 15px;
    text-shadow: 0px 0px 5px black;
    transition: 0.5s ease;
}

.widget-action-primary,
.widget-action-ghost {
    background-color: rgb(40, 60, 80);
}

.widget-action-destructive {
    background-color: rgb(110, 0, 0);
}

.widget-action-accept {
    background-color: rgb(40, 80, 60);
}

/* Keyboard focus ring for reusable widget actions. */
.widget-action-primary:focus-visible,
.widget-action-ghost:focus-visible,
.widget-action-destructive:focus-visible,
.widget-action-accept:focus-visible {
    outline: none;
    box-shadow: 0px 0px 5px black, 0px 0px 0px 2px rgba(70, 110, 150, 0.7);
}

/* Disabled state: dim text and suppress hover/press via pointer-events. */
.widget-action-primary.disabled,
.widget-action-ghost.disabled,
.widget-action-destructive.disabled,
.widget-action-accept.disabled {
    color: rgb(120, 120, 120);
    cursor: not-allowed;
    pointer-events: none;
}

/* Shared input :focus — persistent outer halo + slightly brighter text. Scoped
   to .input-shadow so we don't strip native focus outlines from inputs that
   haven't opted into the custom halo. */
input.input-shadow:focus,
input.widget-icon-input:focus,
input.widget-profile-icon-input:focus,
select.input-shadow:focus,
textarea.input-shadow:focus {
    outline: none;
    color: rgb(200, 200, 200);
    box-shadow: inset 0px 0px 3px black, 0px 0px 5px rgb(175, 175, 175);
}

input[aria-invalid="true"],
textarea[aria-invalid="true"] {
    outline: 2px solid rgba(190, 70, 70, 0.85);
    outline-offset: 1px;
}

.widget-field-validation-message {
    width: 100%;
    margin-top: 5px;
    color: rgb(220, 125, 125);
    font-size: 14px;
    line-height: 1.3;
    text-shadow: 0 0 4px black;
}

/* --- W68 category filter bar --- */
.widget-filter-label {
    font-size: 18px;
    color: rgb(140, 140, 140);
    margin: 0;
    text-shadow: 0px 0px 5px black;
}

.widget-filter-pills {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    min-width: 0;
}

.widget-padding-inline-compact {
    padding-left: 6px;
    padding-right: 6px;
}

/* ============================================================
 * Manager schedule (W145-W147)
 * ============================================================ */
.schedule-header-host {
    align-content: center;
}

.schedule-header-host > .widget-responsive-toolbar {
    align-items: center;
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr) auto;
}

.schedule-view-toggle {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(2, minmax(90px, 1fr));
}

.widget-selection-button[aria-pressed="true"] {
    background-color: rgb(50, 70, 90);
    box-shadow: inset 0 0 0 1px rgba(155, 190, 220, 0.35);
    color: rgb(205, 205, 205);
    text-shadow: 0 0 5px black;
}

.widget-selection-button[aria-pressed="true"] .widget-filter-label {
    color: inherit;
}

.schedule-header-host .widget-button-group {
    display: grid;
    gap: 10px;
    grid-template-columns: 40px minmax(90px, 1fr) 40px;
}

.schedule-header-host [data-schedule-week="previous"],
.schedule-header-host [data-schedule-week="next"] {
    height: 40px;
    min-height: 40px;
    width: 40px;
}

.schedule-header-host .widget-toolbar-actions {
    display: flex;
    flex-wrap: wrap;
}

.schedule-actions-selector {
    --dropdown-width: 210px;
    flex: 0 1 210px;
    margin-bottom: 0;
}

.schedule-actions-selector .widget-dropdown-action[aria-disabled="true"] {
    color: rgb(120, 120, 120);
    cursor: not-allowed;
}

.schedule-header-host .widget-content-title {
    text-align: center;
}

.schedule-week-label-compact {
    display: none;
}

.schedule-header-host .widget-responsive-auto-form-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.schedule-header-host .option-selector {
    margin-bottom: 0;
}

.schedule-readiness-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.schedule-readiness-item {
    border: 0;
    cursor: pointer;
    font: inherit;
    width: 100%;
}

.schedule-readiness-item:focus-visible {
    box-shadow: 0 0 5px black, 0 0 0 2px rgba(70, 110, 150, 0.7);
    outline: none;
}

.schedule-shift-block.schedule-issue-focus,
.schedule-month-shift.schedule-issue-focus,
.schedule-mobile-view [data-shift-id].schedule-issue-focus {
    box-shadow: 0 0 0 3px rgb(235, 200, 80), 0 0 8px black;
    outline: none;
}

.schedule-header-host:is([data-widget-size-x="3"], [data-widget-composed-size-x="3"]) .schedule-readiness-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.schedule-header-host:is([data-widget-size-x="2"], [data-widget-composed-size-x="2"]) .schedule-readiness-grid {
    grid-template-columns: minmax(0, 1fr);
}

.schedule-mobile-view {
    display: none;
}

.schedule-month-view {
    display: none;
    overflow: auto;
}

.schedule-day-controls {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

.schedule-month-grid {
    background-color: rgb(30, 30, 30);
    border-radius: 7px;
    box-shadow: 0 0 5px black;
    display: grid;
    grid-template-columns: repeat(7, minmax(120px, 1fr));
    min-width: 840px;
    overflow: hidden;
}

.schedule-month-compact-grid {
    display: none;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    min-width: 0;
    width: 100%;
}

.schedule-month-compact-weekday {
    background-color: rgb(45, 65, 85);
    box-sizing: border-box;
    font-weight: bold;
    min-width: 0;
    padding: 8px 2px;
    text-align: center;
    transition: background-color 0.5s ease, box-shadow 0.5s ease, color 0.5s ease, text-shadow 0.5s ease;
}

.schedule-month-compact-cell {
    background-color: rgb(55, 55, 55);
    border: 1px solid rgb(35, 35, 35);
    box-sizing: border-box;
    display: grid;
    grid-template-rows: minmax(74px, 1fr) 30px;
    min-width: 0;
    padding: 4px;
    position: relative;
    transition: background-color 0.5s ease, box-shadow 0.5s ease, color 0.5s ease, text-shadow 0.5s ease;
}

.schedule-month-compact-date {
    align-items: stretch;
    background: transparent;
    border: 0;
    color: white;
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 2px;
    position: relative;
    text-align: left;
    text-shadow: 0 0 5px black;
    width: 100%;
    z-index: 1;
}

.schedule-month-counts,
.schedule-month-empty {
    display: flex;
    flex-direction: column;
    font-size: 11px;
    line-height: 15px;
    min-width: 0;
    overflow-wrap: anywhere;
}

.schedule-month-empty {
    color: rgb(190, 190, 190);
}

.schedule-month-add {
    height: 28px;
    min-height: 28px;
    position: relative;
    width: 100%;
    z-index: 1;
}

.schedule-workspace-host:is([data-widget-size-x="2"], [data-widget-size-x="3"], [data-widget-composed-size-x="2"], [data-widget-composed-size-x="3"]) .schedule-month-desktop-grid {
    display: none;
}

.schedule-workspace-host:is([data-widget-size-x="2"], [data-widget-size-x="3"], [data-widget-composed-size-x="2"], [data-widget-composed-size-x="3"]) .schedule-month-compact-grid {
    display: grid;
}

.schedule-workspace-host:is([data-widget-size-x="2"], [data-widget-composed-size-x="2"]) .schedule-month-compact-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.schedule-workspace-host:is([data-widget-size-x="2"], [data-widget-composed-size-x="2"]) .schedule-day-controls {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.schedule-workspace-host:is([data-widget-size-x="3"], [data-widget-composed-size-x="3"]) .schedule-day-controls {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.schedule-workspace-host:is([data-widget-size-x="2"], [data-widget-composed-size-x="2"]) .schedule-month-compact-weekday,
.schedule-workspace-host:is([data-widget-size-x="2"], [data-widget-composed-size-x="2"]) .schedule-month-cell-outside {
    display: none;
}

.schedule-month-weekday {
    background-color: rgb(75, 75, 75);
    box-shadow: inset 0 -1px 0 rgb(50, 50, 50);
    box-sizing: border-box;
    font-weight: 600;
    padding: 10px;
    text-align: center;
    transition: background-color 0.5s ease, box-shadow 0.5s ease, color 0.5s ease, text-shadow 0.5s ease;
}

.schedule-month-cell {
    background-color: rgb(44, 44, 44);
    border-bottom: 1px solid rgb(50, 50, 50);
    border-right: 1px solid rgb(50, 50, 50);
    box-sizing: border-box;
    cursor: pointer;
    min-height: 130px;
    min-width: 0;
    padding: 10px;
    transition: background-color 0.5s ease, box-shadow 0.5s ease, color 0.5s ease, text-shadow 0.5s ease;
}

.schedule-month-cell-outside {
    background-color: rgb(35, 35, 35);
    cursor: default;
}

.schedule-month-date {
    display: block;
    font-weight: 600;
    margin-bottom: 8px;
    text-align: right;
}

.schedule-month-shifts {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.schedule-month-shift {
    align-items: center;
    border: 1px solid transparent;
    box-shadow: 0 0 4px black;
    box-sizing: border-box;
    color: rgb(200, 200, 200);
    display: grid;
    font-size: 14px;
    gap: 2px;
    min-height: 36px;
    min-width: 0;
    padding: 5px 8px;
    text-align: left;
    text-shadow: 0 0 5px black;
}

.schedule-month-shift span,
.schedule-month-shift small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.schedule-holiday-indicator {
    align-items: center;
    color: var(--theme-warning, #f0b429);
    display: inline-flex;
    font-size: 0.78rem;
    gap: 6px;
    line-height: 1.2;
    max-width: 100%;
    text-shadow: var(--text-shadow);
}

.schedule-holiday-indicator span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.schedule-holiday-closure {
    color: var(--theme-red, #dc5d67);
}

.schedule-month-cell > .schedule-holiday-indicator,
.schedule-month-compact-date .schedule-holiday-indicator {
    margin-bottom: 6px;
    width: 100%;
}

.schedule-mobile-holiday-dot {
    margin-left: 6px;
}

.schedule-month-more {
    color: rgb(145, 145, 145);
    font-size: 14px;
    text-shadow: 0 0 5px black;
}

.schedule-desktop-grid {
    box-sizing: border-box;
    min-width: 0;
    overflow: auto;
}

.schedule-workspace-host .widget-data-table {
    box-shadow: none;
    min-width: 1120px;
    table-layout: fixed;
    width: 100%;
}

.schedule-workspace-host .widget-data-table th,
.schedule-workspace-host .widget-data-table td {
    box-sizing: border-box;
    height: 112px;
    padding: 10px;
    vertical-align: top;
    width: calc((100% - 180px) / 7);
}

.schedule-workspace-host .widget-data-table thead th {
    height: 58px;
}

.schedule-workspace-host .widget-data-table th > span,
.schedule-workspace-host .widget-data-table th > small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.schedule-workspace-host .widget-data-table th > small {
    color: rgb(140, 140, 140);
    font-size: 12px;
    margin-top: 5px;
}

.schedule-workspace-host .schedule-employee-column {
    left: 0;
    min-width: 180px;
    position: sticky;
    width: 180px;
    z-index: 2;
}

.schedule-workspace-host thead .schedule-employee-column {
    z-index: 3;
}

.schedule-workspace-host .widget-data-table tbody th.schedule-employee-cell {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    top: auto;
}

.schedule-workspace-host tbody tr:nth-child(odd) .schedule-employee-cell {
    background-color: rgb(65, 65, 65);
}

.schedule-workspace-host tbody tr:nth-child(even) .schedule-employee-cell {
    background-color: rgb(58, 58, 58);
}

.schedule-workspace-host td[data-schedule-cell] {
    cursor: pointer;
    min-width: 0;
    transition: background-color 0.5s ease, box-shadow 0.5s ease, color 0.5s ease, text-shadow 0.5s ease;
}

.schedule-workspace-host td[data-schedule-cell]:focus-visible,
.schedule-month-cell:focus-visible,
.schedule-month-shift:focus-visible,
.schedule-shift-block:focus-visible {
    box-shadow: inset 0 0 0 2px rgb(90, 135, 180), 0 0 5px rgb(175, 175, 175);
    outline: none;
}

.schedule-cell-time-off {
    background-color: rgba(105, 45, 45, 0.3) !important;
}

.schedule-cell-unavailable {
    background-color: rgba(70, 70, 70, 0.38) !important;
}

.schedule-cell-state {
    align-items: center;
    color: rgb(165, 165, 165);
    display: flex;
    font-size: 12px;
    gap: 6px;
    margin-bottom: 10px;
    min-width: 0;
    text-shadow: 0 0 5px black;
}

.schedule-shift-block {
    align-items: flex-start;
    border: 1px solid transparent;
    border-radius: 6px;
    box-shadow: 0 0 5px black;
    box-sizing: border-box;
    color: rgb(210, 210, 210);
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 10px;
    min-height: 58px;
    min-width: 0;
    overflow: hidden;
    padding: 8px;
    position: relative;
    text-align: left;
    text-shadow: 0 0 5px black;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
    width: 100%;
}

.schedule-shift-block:last-child {
    margin-bottom: 0;
}

.schedule-shift-block span,
.schedule-shift-block small {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.schedule-shift-block i {
    color: rgb(225, 175, 80);
    position: absolute;
    right: 8px;
    top: 8px;
}

.schedule-shift-draft {
    background-color: rgb(45, 65, 85);
    border-style: dashed;
    border-color: rgb(105, 145, 185);
}

.schedule-shift-published {
    background-color: rgb(45, 80, 60);
    border-color: rgb(80, 125, 95);
}

.shift-editor-panel {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 720px;
    padding: var(--widget-space-spacious, 20px);
    width: calc(100% - 40px);
}

.schedule-actions-dialog {
    width: min(420px, calc(100vw - 40px));
}

.schedule-copy-notice {
    align-items: center;
    display: flex;
    gap: 8px;
    line-height: 20px;
    margin: 0;
}

.schedule-defaults-last-field > input {
    margin-bottom: 0;
}

.shift-editor-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: -5px;
    padding: 5px;
}

.shift-editor-header {
    align-items: start;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 40px;
}

.shift-editor-header .widget-content-title {
    text-align: left;
}

.shift-editor-helper {
    font-size: 18px;
    line-height: 22px;
    margin-top: 10px;
}

.shift-editor-panel input,
.shift-editor-panel textarea {
    box-sizing: border-box;
    min-width: 0;
    width: 100%;
}

.shift-editor-panel .widget-toggle-switch input {
    min-width: 0;
    width: 0;
}

.shift-editor-panel textarea {
    min-height: 90px;
    resize: vertical;
}

.shift-editor-weekdays {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    margin-bottom: 10px;
    min-width: 0;
}

.shift-editor-day-toggle {
    box-sizing: border-box;
    height: 40px;
    min-width: 0;
    padding: 0;
}

.widget-dialog-actions {
    align-items: center;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-width: 0;
    width: 100%;
}

.widget-dialog-actions > button {
    box-sizing: border-box;
    margin: 0;
    min-width: 0;
    width: 100%;
}

.widget-dialog-action-full,
.widget-dialog-actions > button:only-child {
    grid-column: 1 / -1;
}

.shift-editor-panel > .widget-dialog-actions {
    padding-top: 10px;
    position: relative;
    z-index: 4;
}

.widget-status-value {
    border-radius: 7px;
    box-sizing: border-box;
    min-height: 40px;
    padding: 10px;
    text-shadow: 0 0 5px black;
}

.shift-editor-status-label {
    text-shadow: 0 0 5px black;
}

.schedule-workspace-host:is([data-widget-size-x="2"], [data-widget-size-x="3"], [data-widget-size-x="4"], [data-widget-composed-size-x="2"], [data-widget-composed-size-x="3"], [data-widget-composed-size-x="4"]) .schedule-desktop-grid {
    display: none;
}

.schedule-workspace-host:is([data-widget-size-x="2"], [data-widget-size-x="3"], [data-widget-size-x="4"], [data-widget-composed-size-x="2"], [data-widget-composed-size-x="3"], [data-widget-composed-size-x="4"]) .schedule-mobile-view {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.schedule-header-host:is([data-widget-size-x="2"], [data-widget-size-x="3"], [data-widget-composed-size-x="2"], [data-widget-composed-size-x="3"]) > .widget-responsive-toolbar {
    grid-template-columns: minmax(0, 1fr);
}

.schedule-header-host:is([data-widget-size-x="2"], [data-widget-size-x="3"], [data-widget-composed-size-x="2"], [data-widget-composed-size-x="3"]) .widget-toolbar-actions > button {
    flex: 1 1 140px;
}

.schedule-header-host:is([data-widget-size-x="2"], [data-widget-composed-size-x="2"]) .widget-responsive-auto-form-grid {
    grid-template-columns: minmax(0, 1fr);
}

.schedule-header-host:is([data-widget-size-x="2"], [data-widget-composed-size-x="2"]) .schedule-view-toggle {
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
}

@media screen and (min-width: 736px) and (max-width: 900px) {
    .schedule-header-host > .widget-responsive-toolbar {
        grid-template-columns: auto auto minmax(0, 1fr);
    }

    .schedule-header-host .widget-toolbar-actions {
        grid-column: 1 / -1;
        justify-content: flex-end;
    }

    .schedule-header-host .widget-button-group {
        grid-template-columns: repeat(3, 40px);
    }

    .schedule-header-host .schedule-today-label {
        display: none;
    }

    .schedule-header-host .widget-content-title {
        font-size: 18px;
    }

    .schedule-header-host .schedule-week-label-full {
        display: none;
    }

    .schedule-header-host .schedule-week-label-compact {
        display: inline;
    }
}

/* --- W69 catalog table --- */
.widget-table-toolbar-summary,
.widget-table-toolbar-range {
    color: rgb(140, 140, 140);
    text-shadow: 0px 0px 5px black;
}
.widget-scroll-table-container {
    margin: 0;
}

.grid-widget-shell[data-grid-height-policy="content"] > .widget-scroll-table-widget.widget-layout .widget-scroll-table-container {
    overflow-x: auto;
    overflow-y: auto;
}

.widget-wide-data-table {
    min-width: 860px;
}

/* Wide data tables use the same solid header as the rest of MiniDesk tables. */
.widget-wide-data-table thead th {
    padding:10px 15px;
    white-space: nowrap;
}
.widget-wide-data-table td {
    /* color + text-shadow inherit from the `.theme-text` table root. */
    padding:10px 15px;
}
.widget-wide-data-table tr {
    transition: 0.5s ease;
}
.widget-wide-data-table tr:active {
    box-shadow: 0px 0px 0px rgb(175, 175, 175), inset 0px 0px 5px black;
    transition: 0s;
}
.widget-num-cell {
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.widget-badge {
    align-items: center;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 6px;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.55);
    box-sizing: border-box;
    display: inline-flex;
    font-size: 14px;
    font-weight: bold;
    height: 22px;
    line-height: 22px;
    max-height: 22px;
    max-width: none;
    padding: 0 8px;
    vertical-align: middle;
    white-space: nowrap;
    width: max-content;
    text-shadow: 0px 0px 5px black;
}

.widget-badge-uppercase {
    text-transform: uppercase;
}

.widget-badge-danger {
    background-color: rgba(200, 60, 60, 0.25);
}

.widget-badge-warning {
    background-color: rgba(220, 170, 60, 0.25);
}

.widget-badge-muted {
    background-color: rgba(110, 110, 110, 0.25);
}

.widget-text-muted {
    color: rgb(120, 120, 120);
}
.widget-icon-button {
    /* Icon-only table actions still use canonical button color/text/hover
     * classes in markup; this helper only controls compact table sizing. */
    width: 32px;
    height: 32px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

/* --- Widget recommendation split layout --- */
.widget-recommendation-layout {
    display: flex;
    flex-wrap: wrap;
    flex: 1;
    min-height: 0;
}
.widget-recommendation-panel {
    /* bg + inset shadow delegated to canonical .content-level-1 .input-shadow in HTML. */
    flex: 1 1 180px;
    border-radius: 7px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.widget-recommendation-value {
    font-size: 28px;
    font-weight: bold;
    color: rgb(110, 180, 110);
    line-height: 1.1;
    text-shadow: 0px 0px 5px black;
}
.widget-recommendation-confidence {
    color: rgb(140, 140, 140);
    display: flex;
    align-items: center;
    text-shadow: 0px 0px 5px black;
}
.widget-confidence-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
}
.widget-confidence-high {
    background-color: rgb(110, 180, 110);
}

.widget-confidence-medium {
    background-color: rgb(220, 170, 60);
}

.widget-confidence-low {
    background-color: rgb(200, 90, 70);
}

.widget-recommendation-rationale {
    /* bg + inset shadow delegated to canonical .content-level-1 .input-shadow in HTML.
     * color (160,160,160) is custom dimmer-than-theme-text — text-shadow stays alongside. */
    flex: 1;
    min-width: 0;
    border-radius: 7px;
    padding:10px 15px;
    overflow-y: auto;
    color: rgb(160, 160, 160);
    line-height: 1.5;
    text-shadow: 0px 0px 5px black;
}
.widget-recommendation-rationale strong {
    color: rgb(190, 190, 190);
}

/* -----------------------------------------------------------------
 * Inventory / New Purchase Order (W79-W84)
 * ---------------------------------------------------------------- */

/* --- Import from Supplier widgets (W85–W88) --- */
.widget-layout:is([data-widget-size-x="2"], [data-widget-size-x="3"], [data-widget-size-x="4"], [data-widget-composed-size-x="2"], [data-widget-composed-size-x="3"], [data-widget-composed-size-x="4"]) .widget-grid-size-two-column {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* --- Reconciliation widgets (W89–W93) --- */
/* --- Reconciliation Session widgets (W94-W101) --- */
/* --- Price Recommendations widgets (W102–W106) --- */
/* --- Job Templates Library widgets (W107-W110) --- */
/* --- Job Template Editor widgets (W111-W116) --- */
/* .widget-form-field label visual is entirely canonical - body provides color
 * rgb(175,175,175) + font-size 18px via inheritance, base `label` provides
 * text-shadow + transition, and base `label:hover` (gated) provides the
 * white + grey-shadow shift. No .widget-form-field label rule needed. */
.widget-form-field input,
.widget-form-field select,
.widget-form-field textarea {
    /* bg/box-shadow/transition come from canonical .content-level-0
     * .input-shadow, and base input/textarea supplies the text treatment.
     * Form controls intentionally do not wear .theme-text. */
    resize: none;
}
.widget-form-field input,
.widget-form-field select {
    height: 40px;
    padding: 0 15px;
}
.widget-form-field textarea {
    padding: 15px;
}
/* :hover rules for .widget-form-field input/select/textarea moved to hoverStyles.css (gated on pointer). */
.widget-form-field input:focus,
.widget-form-field select:focus,
.widget-form-field textarea:focus {
    color: rgb(200, 200, 200);
    box-shadow: inset 0px 0px 3px black, 0px 0px 5px rgb(175, 175, 175);
}
.widget-form-field input[readonly],
.widget-form-field textarea[readonly] {
    color: rgb(120, 120, 120);
    background-color: rgb(40, 40, 40);
    cursor: not-allowed;
}

.widget-form-field input.widget-kiosk-copy-input[readonly],
.widget-form-field textarea.widget-kiosk-copy-input[readonly] {
    background-color: rgb(30, 30, 30);
    color: rgb(175, 175, 175);
    cursor: copy;
}
.widget-table-panel {
    background-color: rgb(30, 30, 30);
    border-radius: 7px;
    box-shadow: inset 0px 0px 3px black;
    box-sizing: border-box;
    color: rgb(175, 175, 175);
    overflow: auto;
    text-shadow: 0px 0px 5px black;
    transition: 0.5s ease;
}

.widget-scroll-table-panel {
    background-color: rgb(30, 30, 30);
    border-radius: 7px;
    box-shadow: inset 0px 0px 3px black, inset 0px 0px 8px rgba(0, 0, 0, 0.35), 0px 0px 5px rgba(175, 175, 175, 0);
    box-sizing: border-box;
    color: rgb(175, 175, 175);
    flex: 1 1 auto;
    min-height: 0;
    outline: 1px solid rgba(0, 0, 0, 0.75);
    outline-offset: -1px;
    overflow: auto;
    padding: 20px;
    text-shadow: 0px 0px 5px black;
    transition: background-color 0.5s ease, box-shadow 0.5s ease, color 0.5s ease, text-shadow 0.5s ease, border-color 0.5s ease, outline-color 0.5s ease;
    width: 100%;
}

.widget-scroll-table-panel table {
    border-radius: 7px;
}

.widget-scroll-table-panel table thead th:first-child {
    border-top-left-radius: 7px;
}

.widget-scroll-table-panel table thead th:last-child {
    border-top-right-radius: 7px;
}

.widget-scroll-table-panel table tbody tr:last-child td:first-child {
    border-bottom-left-radius: 7px;
}

.widget-scroll-table-panel table tbody tr:last-child td:last-child {
    border-bottom-right-radius: 7px;
}

.widget-table-panel table {
    border-radius: 7px;
}
.widget-table-panel table thead th:first-child {
    border-top-left-radius: 7px;
}
.widget-table-panel table thead th:last-child {
    border-top-right-radius: 7px;
}
.widget-table-panel table tbody tr:last-child td:first-child {
    border-bottom-left-radius: 7px;
}
.widget-table-panel table tbody tr:last-child td:last-child {
    border-bottom-right-radius: 7px;
}
.widget-col-qty {
    width: 60px;
}
.widget-col-count {
    width: 80px;
}
.widget-col-money {
    width: 90px;
}
.widget-col-status {
    width: 120px;
}
.widget-col-code {
    width: 140px;
}
.widget-col-match {
    width: 160px;
}
.widget-preview-form {
    flex: 0 0 auto;
    grid-template-columns: minmax(180px, 1fr) minmax(0, 2fr);
    margin-bottom: 0;
}

.widget-preview-payload-field {
    grid-column: 2;
}
.widget-preview-form .widget-form-field > input,
.widget-preview-form .widget-form-field > textarea {
    margin-bottom: 0;
}
.widget-preview-payload-field textarea {
    min-height: 118px;
}
.widget-state-title {
    align-items: center;
    color: rgb(210, 210, 210);
    display: flex;
    flex: 0 0 auto;
    font-size: 18px;
    justify-content: center;
    min-width: 0;
    text-shadow: 0px 0px 5px black;
}
.widget-state-title i {
    color: rgb(140, 140, 140);
    flex: 0 0 auto;
    text-shadow: 0px 0px 5px black;
}
.widget-scan-bar {
    /* bg + inset shadow delegated to canonical .content-level-0 .input-shadow in HTML. */
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    border-radius: 7px;
    padding:5px 10px;
    transition: 0.5s ease;
}
/* :hover rule for .widget-scan-bar moved to hoverStyles.css (gated on pointer). */
.widget-scan-bar:focus-within {
    box-shadow: inset 0px 0px 3px black, 0px 0px 5px rgb(175, 175, 175);
}
.widget-scan-bar i.fa-barcode {
    font-size: 18px;
    color: rgb(140, 140, 140);
    text-shadow: 0px 0px 5px black;
}
.widget-scan-bar input {
    /* Canonical `input` base provides height/border/font-size/color/outline.
     * Parent `.widget-scan-bar` supplies the bg well, so this input overrides
     * to transparent + box-shadow: none. text-shadow comes from .theme-text
     * carried in HTML. */
    flex: 1;
    min-width: min(220px, 100%);
    box-sizing: border-box;
    background: transparent;
    box-shadow: none;
    padding:0 5px;
}
.widget-scan-bar .widget-action-accept,
.widget-scan-bar .widget-action-primary {
    flex: 0 1 auto;
    max-width: 100%;
    white-space: normal;
}
.widget-scan-bar input:focus {
    color: rgb(200, 200, 200);
    box-shadow: none;
}
.widget-manual-form {
    /* bg + inset shadow delegated to canonical .content-level-1 .input-shadow in HTML. */
    border: none;
    border-radius: 7px;
    margin-bottom: 20px;
    max-height: 1000px;
    opacity: 1;
    overflow: hidden;
    transition:
        max-height 0.4s ease,
        opacity 0.3s ease,
        padding 0.3s ease,
        margin-bottom 0.3s ease,
        box-shadow 0.5s ease;
}
/* :hover rule for .widget-manual-form moved to hoverStyles.css (gated on pointer). */
.widget-manual-form.collapsed {
    max-height: 0;
    opacity: 0;
    padding-top: 0;
    padding-bottom: 0;
    margin-bottom: 0;
    pointer-events: none;
}
.widget-form-caption {
    align-items: center;
    display: flex;
    gap: 5px;
    margin-bottom: 10px;
}

.widget-form-caption i {
    color: rgb(140, 140, 140);
    text-shadow: 0px 0px 5px black;
}
.widget-manual-form .widget-form-field input,
.widget-manual-form .widget-form-field select,
.widget-manual-form textarea {
    /* bg delegated to canonical .content-level-0 (carried by each input). */
    box-sizing: border-box;
}
/* :hover rules for .widget-manual-form inputs moved to hoverStyles.css (gated on pointer). */
.widget-manual-form .widget-form-field input:focus,
.widget-manual-form .widget-form-field select:focus,
.widget-manual-form textarea:focus {
    background-color: rgb(35, 35, 35);
}
.widget-form-submit-row {
    align-items: end;
    display: flex;
    flex-wrap: wrap;
}

.widget-form-submit-row textarea {
    /* bg/box-shadow/transition come from canonical .content-level-0
     * .input-shadow. Width, padding, and radius are helper-composed in markup. */
    box-sizing: border-box;
    min-height: 40px;
    resize: vertical;
}
/* :hover rule for .widget-form-submit-row textarea moved to hoverStyles.css (gated on pointer). */
.widget-form-submit-row textarea:focus {
    background-color: rgb(35, 35, 35);
    box-shadow: inset 0px 0px 3px black, 0px 0px 5px rgb(175, 175, 175);
}
.widget-lines-table th,
.widget-lines-table td {
    /* color + text-shadow inherit from the `<table class="widget-lines-table theme-text">` root. */
    text-align: left;
}
.widget-lines-table tbody tr {
    transition: 0.5s ease;
}
/* :hover rule for .widget-lines-table tbody tr moved to hoverStyles.css (gated on pointer). */
.widget-lines-table .line-name {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}
.widget-lines-table .line-meta {
    color: rgb(120, 120, 120);
    margin-top: 2px;
}
.widget-lines-table .inline-input {
    /* bg/box-shadow/transition come from canonical .content-level-0
     * .input-shadow, with sizing handled locally for table cells. */
    width: 100%;
    box-sizing: border-box;
    padding: 0 15px;
}
/* :hover rule for .widget-lines-table .inline-input moved to hoverStyles.css (gated on pointer). */
.widget-lines-table .inline-input:focus {
    box-shadow: inset 0px 0px 3px black, 0px 0px 5px rgb(175, 175, 175);
    color: rgb(200, 200, 200);
}
.widget-lines-table .total-cell {
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.widget-lines-table .remove-cell {
    text-align: center;
}
.widget-lines-action-column {
    width: 40px;
}
.widget-lines-new-row td {
    background-color: rgba(60, 110, 160, 0.08);
}
/* :hover rule for .widget-lines-new-row moved to hoverStyles.css (gated on pointer). */

/* --- Match badges --- */
.widget-match-badge {
    align-items: center;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 6px;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.55);
    box-sizing: border-box;
    display: inline-flex;
    font-size: 14px;
    height: 22px;
    line-height: 22px;
    max-height: 22px;
    max-width: none;
    padding: 0 8px;
    text-shadow: 0px 0px 5px black;
    vertical-align: middle;
    white-space: nowrap;
    width: max-content;
}
.widget-match-badge.matched   { background-color: rgba(60, 140, 60, 0.25); }
.widget-match-badge.cost-up,
.widget-match-badge.cost-down { background-color: rgba(220, 170, 60, 0.25); }
.widget-match-badge.new       { background-color: rgba(60, 110, 160, 0.25); }

.widget-count-pill {
    align-items: center;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 6px;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.55);
    box-sizing: border-box;
    display: inline-flex;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    height: 22px;
    line-height: 22px;
    max-height: 22px;
    max-width: none;
    padding: 0 8px;
    text-shadow: 0px 0px 5px black;
    vertical-align: middle;
    white-space: nowrap;
    width: max-content;
}
.widget-count-pill-new  { background-color: rgba(60, 110, 160, 0.25); }
.widget-count-pill-ok   { background-color: rgba(60, 140, 60, 0.25); }
.widget-count-pill-warn { background-color: rgba(220, 170, 60, 0.25); }

/* ===========================================================
 * Tab bar helpers (generic — used by Import from Supplier, and
 * any future page that wants a horizontal tab strip).
 * =========================================================== */
.widget-tab-bar {
    align-items: stretch;
    background-color: rgb(40, 60, 80);
    border-radius: 7px;
    box-shadow: 0px 0px 5px black;
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    overflow: hidden;
}
.widget-tab-bar .widget-tab {
    background-color: transparent;
    border-right: 1px solid rgba(155, 190, 220, 0.2);
    box-sizing: border-box;
    color: rgb(175, 175, 175);
    cursor: pointer;
    display: flex;
    align-items: center;
    flex: 1 1 180px;
    min-height: 40px;
    padding: 10px 18px;
    text-shadow: 0px 0px 5px black;
    transition: 0.5s ease;
    user-select: none;
}
.widget-tab-bar .widget-tab:last-child {
    border-right: 0;
}
/* :hover rule for .widget-tab-bar .widget-tab moved to hoverStyles.css (gated on pointer). */
.widget-tab-bar .widget-tab.active {
    background-color: rgb(55, 85, 115);
    box-shadow: inset 0px -3px 0px rgb(100, 145, 185);
    color: rgb(200, 200, 200);
}
.widget-tab-bar .widget-tab .widget-tab-count {
    background: rgb(60,60,60);
    color: rgb(200,200,200);
    padding: 1px 7px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: bold;
    text-shadow: 0px 0px 5px black;
}

/* ===========================================================
 * Widget list-card helpers: compact selectable cards for list rows
 * with an optional logo, title/meta, subject, and status row.
 * =========================================================== */
.widget-list-card {
    background-color: rgb(30, 30, 30);
    border-radius: 7px;
    box-shadow: inset 0px 0px 3px black;
    box-sizing: border-box;
    color: rgb(175, 175, 175);
    cursor: pointer;
    text-shadow: 0px 0px 5px black;
    transition: 0.5s ease;
}
/* :hover rule for .widget-list-card moved to hoverStyles.css (gated on pointer). */
.widget-list-card.selected { background: rgba(50,90,130,0.15); }
.widget-list-card-logo {
    width: 22px;
    height: 22px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: white;
    flex-shrink: 0;
}
.widget-list-card-logo-large {
    width: 44px;
    height: 44px;
    border-radius: 7px;
    font-size: 16px;
}
.widget-logo-cyan {
    background: #0891b2;
}
.widget-list-card-title {
    font-weight: bold;
    color: rgb(220,220,220);
    flex: 1;
}
.widget-list-card-meta {
    color: rgb(120,120,120);
}
.widget-list-card-subject {
    color: rgb(180,180,180);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.widget-list-card-status-row {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top:5px;
    color: rgb(130,130,130);
}

/* ===========================================================
 * Status pill (generic — small colored label).
 * Modifiers: .parsed (green), .partial (amber), .error (red).
 * =========================================================== */
.widget-status-pill {
    align-items: center;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 6px;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.55);
    box-sizing: border-box;
    display: inline-flex;
    font-weight: bold;
    font-size: 14px;
    height: 22px;
    text-transform: uppercase;
    letter-spacing: 0;
    line-height: 22px;
    max-height: 22px;
    max-width: none;
    padding: 0 8px;
    text-shadow: 0px 0px 5px black;
    vertical-align: middle;
    white-space: nowrap;
    width: max-content;
}
.widget-status-pill.parsed  { background-color: rgba(60, 140, 60, 0.25); }
.widget-status-pill.partial { background-color: rgba(220, 170, 60, 0.25); }
.widget-status-pill.error   { background-color: rgba(200, 60, 60, 0.25); }

/* Variance-type modifiers for the reconciliation tables. */
.widget-status-pill.missing       { background-color: rgba(200, 60, 60, 0.25); }
.widget-status-pill.extra         { background-color: rgba(60, 110, 160, 0.25); }
.widget-status-pill.unresolved    { background-color: rgba(220, 170, 60, 0.25); }
.widget-status-pill.clean,
.widget-status-pill.closed        { background-color: rgba(60, 140, 60, 0.25); }
.widget-status-pill.muted         { background-color: rgba(110, 110, 110, 0.25); }

/* ===========================================================
 * Unit-tag chip (generic — monospace identifier for an
 * inventory_unit, e.g. "1177903-002").
 * =========================================================== */
.widget-code-tag {
    font-family: monospace;
    background: rgb(50,50,50);
    color: rgb(200,200,200);
    padding:2px 5px;
    border-radius: 4px;
    font-size: 14px;
}

/* ===========================================================
 * Progress bar row (generic — label + inset track + fill).
 * Fill width and color are set with helper classes per instance.
 * =========================================================== */
.widget-progress-label-row {
    display: flex;
    justify-content: space-between;
    color: rgb(200,200,200);
    text-shadow: 0px 0px 5px black;
}
.widget-progress-track {
    background: rgb(30,30,30);
    height: 8px;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: inset 0px 0px 3px black;
}
.widget-progress-fill {
    height: 100%;
    width: var(--widget-progress-fill-width, 0%);
}
.widget-progress-fill-ok {
    background: rgb(110,180,110);
}
.widget-progress-fill-warn {
    background: rgb(220,170,60);
}
.widget-progress-fill-danger {
    background: rgb(220,90,90);
}

/* ===========================================================
 * Scan log (generic — monospace feed of scan events with
 * color-coded status: .ok green, .warn amber, .muted grey).
 * =========================================================== */
.widget-status-log {
    font-family: monospace;
    color: rgb(180,180,180);
    line-height: 1.7;
    text-shadow: 0px 0px 5px black;
}
.widget-status-log .widget-status-ok    { color: rgb(130,200,130); }
.widget-status-log .widget-status-muted { color: rgb(120,120,120); }

.widget-choice-tile {
    width: 100%;
    min-width: 0;
    min-height: 82px;
    align-items: center;
    justify-content: flex-start;
    padding: 10px 15px;
    text-align: left;
}
.widget-choice-tile i {
    flex: 0 0 24px;
    text-align: center;
    font-size: 18px;
    color: rgb(190, 190, 190);
}
.widget-choice-tile span {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 4px;
    line-height: 1.15;
}
.widget-choice-tile strong,
.widget-choice-tile small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.widget-choice-tile strong {
    font-size: 18px;
    font-weight: 700;
}
.widget-choice-tile small {
    color: rgb(145, 145, 145);
    font-size: 14px;
}

.widget-helper-text {
    color: rgb(130,130,130);
    text-shadow: 0px 0px 5px black;
}
.widget-helper-text i {
    margin-right:5px;
}
.widget-stack-list {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.widget-stack-list > .widget-list-card {
    margin-bottom: 0;
}

.widget-record-list {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 10px;
    list-style: none;
    margin: 0;
    min-width: 0;
    padding: 0;
}

.widget-list-display-surface.widget-record-list {
    gap: 10px;
    padding: var(--widget-space-spacious, 20px);
}

.widget-record-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.widget-record-group-title {
    color: rgb(150, 150, 150);
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
}

.widget-record-row {
    align-items: center;
    background-color: rgb(30, 30, 30);
    border-radius: 7px;
    box-shadow: inset 0 0 3px black;
    box-sizing: border-box;
    display: grid;
    gap: 8px 12px;
    grid-template-columns: minmax(0, 1fr) auto;
    min-width: 0;
    padding: 10px;
}

.widget-record-row-interactive {
    transition: background-color 0.5s ease, box-shadow 0.5s ease;
}

.widget-record-row-flat {
    box-shadow: none;
}

.widget-record-row-contrast {
    background-color: rgb(45, 45, 45);
}

.widget-record-row-shadow {
    box-shadow: 0 0 5px black;
}

.widget-record-row-spacious {
    padding: var(--widget-space-spacious, 20px);
}

.widget-record-row-interactive:focus-within {
    box-shadow: inset 0 0 3px black, 0 0 5px rgb(175, 175, 175);
}

.widget-record-main {
    min-width: 0;
}

.widget-record-title {
    color: rgb(190, 190, 190);
    font-weight: 600;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.widget-record-secondary,
.widget-record-meta {
    color: rgb(140, 140, 140);
    font-size: 14px;
    min-width: 0;
}

.widget-record-secondary {
    margin-top: 3px;
    overflow-wrap: anywhere;
}

.widget-record-meta {
    text-align: right;
}

.widget-record-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}

.widget-record-action {
    align-items: center;
    display: inline-flex;
    justify-content: center;
    text-decoration: none;
}

.widget-form-label-optional {
    color: rgb(130, 130, 130);
    font-size: 14px;
}

.widget-text-panel {
    color: rgb(180,180,180);
    line-height: 1.5;
    text-shadow: 0px 0px 5px black;
}

.widget-line-height-readable {
    line-height: 1.6;
}

.widget-text-center {
    text-align: center;
}

.widget-text-left {
    text-align: left;
}

.widget-text-right {
    text-align: right;
}

.widget-table-panel td.widget-text-left,
.widget-financial-table td.widget-text-left {
    text-align: left;
}

.widget-table-panel td[colspan].widget-text-left,
.widget-financial-table td[colspan].widget-text-left {
    text-align: left;
}

.widget-table-panel td.widget-text-right,
.widget-financial-table td.widget-text-right {
    text-align: right;
}

.widget-status-icon-large {
    font-size: 100px;
    text-shadow: 0 0 2px black;
}

.widget-status-success {
    color: green;
}

.widget-status-danger {
    color: red;
}

.widget-muted-section-label {
    color: rgb(130,130,130);
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

/* ===========================================================
 * Filter pill bar (generic — horizontal chip-style filter bar
 * used by Price Recommendations and future report pages).
 * =========================================================== */
.widget-filter-pill {
    min-height: 40px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    user-select: none;
    white-space: nowrap;
}


.widget-note-success {
    background: rgba(60,140,60,0.12);
    color: rgb(200,220,200);
}
.widget-item-subtext {
    color: rgb(130,130,130);
    margin-top: 3px;
    text-shadow: 0px 0px 5px black;
}
/* ===========================================================
 * Job-template card grid (generic — 3-column responsive grid
 * of clickable preview cards; used by Job Templates Library).
 * =========================================================== */
.widget-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
}
.widget-card-grid-compact {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(120px, 100%), 1fr));
}
.widget-card-tile {
    background-color: rgb(30, 30, 30);
    box-shadow: inset 0px 0px 3px black;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 20px;
    border-radius: 7px;
    cursor: pointer;
    transition: 0.5s ease;
    color: rgb(200,200,200);
}

/* :hover rule for .widget-card-tile moved to hoverStyles.css (gated on pointer). */
.widget-card-tile:active {
    box-shadow: 0px 0px 0px rgb(175, 175, 175), inset 0px 0px 5px black;
    transition: 0s;
}
.widget-card-icon {
    color: rgb(130,180,220);
}
.widget-card-badge {
    background: rgba(60,140,60,0.25);
    color: rgb(130,200,130);
    font-size: 14px;
    border-radius: 10px;
    font-weight: normal;
}
.widget-card-desc {
    color: rgb(180,180,180);
    line-height: 1.5;
    max-height: 60px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.widget-card-tag {
    font-size: 14px;
    background: rgb(45,45,45);
    color: rgb(200,200,200);
    border-radius: 8px;
}

/* ===========================================================
 * Step row (generic — drag-ordered list row used by the Job
 * Template Editor's Default Steps widget; reusable for any
 * future ordered-list editor).
 * =========================================================== */

/* ===========================================================
 * Tab-driven visibility — widgets on the Import page declare
 * `data-visible-when="<slug>"`. Parsed Inbox is the default
 * visible state, so if data-active-tab isn't set yet (first
 * paint before W86 runs, or W87/W88 placed before W86 exists),
 * the content still renders. Non-default slugs (search-catalog,
 * recent-api) stay hidden unless their tab is active.
 * =========================================================== */
.app-content-area [data-visible-when="search-catalog"],
.app-content-area [data-visible-when="recent-api"] {
    display: none;
}
.app-content-area[data-active-tab="search-catalog"] [data-visible-when="parsed-inbox"],
.app-content-area[data-active-tab="recent-api"]     [data-visible-when="parsed-inbox"] {
    display: none;
}
.app-content-area[data-active-tab="search-catalog"] [data-visible-when="search-catalog"],
.app-content-area[data-active-tab="recent-api"]     [data-visible-when="recent-api"] {
    display: flex;
}

/* MiniChat personal notes workspace */
.chat-personal-notes-active .chat-conversation-area > :not(#chat-personal-notes-workspace) {
    display: none !important;
}

.chat-ai-active .chat-conversation-area > :not(#chat-ai-workspace) { display: none !important; }
.chat-ai-workspace { display: flex; flex: 1; min-width: 0; min-height: 0; flex-direction: column; overflow: hidden; }
.chat-ai-header { grid-template-columns: minmax(0, 1fr) auto; }
.chat-ai-header > .widget-room-header-controls { justify-self: end; }
.chat-ai-header-icon { background-color: rgb(45, 80, 75) !important; box-shadow: 0 0 5px black !important; color: rgb(190, 225, 215) !important; font-size: 18px; }
.widget-luma-icon {
    background-color: currentColor;
    display: inline-block;
    filter: drop-shadow(0 0 3px black);
    flex: 0 0 auto;
    height: 1em;
    -webkit-mask: url("../images/luma-icon.svg") center / contain no-repeat;
    mask: url("../images/luma-icon.svg") center / contain no-repeat;
    width: 1em;
}
.widget-luma-icon::before {
    content: none !important;
}
.chat-ai-header-icon .widget-luma-icon,
.chat-ai-welcome-icon .widget-luma-icon {
    height: 70%;
    width: 70%;
}
.chat-ai-sidebar-button .widget-luma-icon {
    height: 70%;
    width: 70%;
}
.ai-assistance-header-icon .widget-luma-icon {
    height: 70%;
    width: 70%;
}
.widget-luma-icon.widget-option-list-icon {
    height: 1em;
    width: 25px;
}
.widget-square-control > .widget-luma-icon {
    height: 22px;
    width: 22px;
}
.chat-ai-main { display: flex; flex: 1; min-height: 0; position: relative; }
.chat-ai-history { border-radius: 7px; box-sizing: border-box; margin: 0 0 12px 12px; overflow-y: auto; padding: 10px; width: min(280px, 40%); }
.chat-ai-history-item { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 42px; padding: 8px 10px; margin-bottom: 10px; text-align: left; }
.chat-ai-conversation { display: flex; flex: 1; min-width: 0; min-height: 0; flex-direction: column; }
.chat-ai-messages { display: flex; flex: 1; min-height: 0; flex-direction: column; gap: 20px; overflow-y: auto; }
.chat-ai-welcome { margin: auto; max-width: 520px; text-align: center; }
.chat-ai-welcome h3,
.chat-ai-welcome p { text-shadow: 0 0 5px black; }
.chat-ai-welcome-icon { align-items: center; background-color: rgb(45, 80, 75); border-radius: 7px; box-shadow: 0 0 5px black; color: rgb(190, 225, 215); display: inline-flex; font-size: 22px; height: 52px; justify-content: center; text-shadow: 0 0 5px black; width: 52px; }
.chat-ai-message { max-width: min(720px, 88%); padding: 15px 20px; border-radius: 8px; background-color: rgb(45, 45, 45); box-shadow: 0 0 5px black; }
.chat-ai-message-user { align-self: flex-end; }
.chat-ai-message-assistant { align-self: flex-start; }
.chat-ai-message-label { margin-bottom: 10px; color: var(--theme-blue, #4a91c7); font-weight: 700; text-shadow: 0 0 5px black; }
.chat-ai-message-content { line-height: 1.5; text-shadow: 0 0 5px black; }
.chat-ai-citations { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 15px; color: var(--text-grey); font-size: .9em; }
.chat-ai-citation { min-height: 32px; padding: 5px 10px; color: inherit; background: transparent; border: 1px solid transparent; border-radius: 7px; transition: color .5s ease, border-color .5s ease, background-color .5s ease; }
.chat-ai-citation:hover { color: var(--theme-text); border-color: currentColor; }
.chat-ai-thinking { align-self: flex-start; color: var(--text-grey); }
.chat-ai-composer { padding-right: 63px; transition: padding-right 0.5s ease; }
.chat-ai-composer.chat-ai-composer-context-action { padding-right: 105px; }
.chat-ai-composer .chat-entry-box { font-family: Arial, Helvetica, sans-serif; }
.chat-ai-composer .chat-entry-box.chat-ai-input-empty { padding-left: 34px !important; }
.chat-ai-input-placeholder-icon { color: rgb(117, 117, 117); font-size: 16px; left: 22px; line-height: 24px; pointer-events: none; position: absolute; top: 22px; z-index: 2; }
.chat-ai-retry-action { right: 59px; }
.chat-ai-stop-action { right: 59px; }
.chat-ai-send-action { right: 17px; }
@media (max-width: 735px) { .chat-ai-history { inset: 0 auto 12px 0; position: absolute; width: min(300px, 85%); z-index: 5; } }

.chat-personal-notes-workspace {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
    position: relative;
}

.chat-personal-notes-header {
    flex: 0 0 auto;
    grid-template-columns: auto minmax(220px, 1fr) auto;
}

.chat-personal-notes-header-icon {
    font-size: 30px;
}

.chat-personal-notes-header-icon > .widget-count-badge {
    bottom: 1px;
    position: absolute;
    right: 1px;
    z-index: 1;
}

.chat-personal-notes-header > .widget-room-header-controls {
    grid-column: 3;
    justify-self: end;
}

.chat-personal-notes-toolbar {
    align-items: center;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    min-width: 0;
}

.chat-personal-notes-toolbar .widget-action-button {
    margin: 0;
    min-height: 40px;
}

.chat-personal-notes-toolbar .widget-search-input {
    min-width: 0;
    width: 100%;
}

.chat-personal-notes-body {
    box-sizing: border-box;
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 20px;
    min-height: 0;
    overflow-y: auto;
}

.chat-personal-notes-error {
    align-items: center;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 20px;
    justify-content: center;
    min-height: 100%;
    text-align: center;
    width: 100%;
}

.chat-personal-notes-error-message {
    align-items: center;
    display: inline-flex;
    gap: 10px;
    justify-content: center;
    max-width: 100%;
}

.chat-personal-notes-section {
    display: grid;
    gap: 10px;
}

.chat-personal-notes-grid {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.chat-personal-note-card {
    --personal-note-accent: rgb(90, 135, 175);
    --personal-note-surface: rgb(32, 42, 52);
    --personal-note-surface-hover: rgb(37, 49, 61);
    background-color: var(--personal-note-surface);
    border-left: 5px solid var(--personal-note-accent);
    box-shadow: 0 0 5px black;
    box-sizing: border-box;
    cursor: pointer;
    display: grid;
    gap: 10px;
    min-width: 0;
    padding: var(--widget-space-spacious, 20px);
    transition: 0.5s ease;
}

.chat-personal-note-drag {
    cursor: grab;
}

.chat-personal-note-drag:active {
    cursor: grabbing;
}

.chat-personal-note-card.chat-personal-note-dragging {
    opacity: 0.55;
}

.chat-personal-note-card.chat-personal-note-drop-target {
    box-shadow: 0 0 5px black, inset 0 0 0 1px rgba(175, 175, 175, 0.45);
}

.chat-personal-note-open {
    background: transparent;
    border: 0;
    color: inherit;
    cursor: pointer;
    display: grid;
    font: inherit;
    gap: 10px;
    min-width: 0;
    padding: 0;
    text-align: left;
}

.chat-personal-note-card-header {
    align-items: start;
    display: grid;
    gap: 20px;
    grid-template-columns: minmax(0, 1fr) auto;
    justify-content: space-between;
    min-width: 0;
}

.chat-personal-note-heading {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.chat-personal-note-title-row {
    align-items: center;
    display: flex;
    min-width: 0;
}

.chat-personal-note-title,
.chat-personal-note-body {
    overflow-wrap: anywhere;
    transition: 0.5s ease;
}

.chat-personal-note-actions {
    display: flex;
    justify-content: flex-end;
}

.chat-personal-note-body {
    color: rgb(175, 175, 175);
    margin: 0;
    white-space: pre-wrap;
}

.chat-personal-note-updated {
    color: rgb(130, 130, 130);
    font-size: 14px;
    text-shadow: 0 0 5px black;
}

.chat-personal-note-card.widget-personal-note-green {
    --personal-note-accent: rgb(90, 160, 110);
    --personal-note-surface: rgb(30, 45, 35);
    --personal-note-surface-hover: rgb(35, 53, 41);
}

.chat-personal-note-card.widget-personal-note-yellow {
    --personal-note-accent: rgb(200, 165, 75);
    --personal-note-surface: rgb(48, 42, 28);
    --personal-note-surface-hover: rgb(57, 50, 32);
}

.chat-personal-note-card.widget-personal-note-red {
    --personal-note-accent: rgb(190, 90, 90);
    --personal-note-surface: rgb(48, 32, 32);
    --personal-note-surface-hover: rgb(57, 37, 37);
}

.chat-personal-note-card.widget-personal-note-neutral {
    --personal-note-accent: rgb(135, 135, 135);
    --personal-note-surface: rgb(40, 40, 40);
    --personal-note-surface-hover: rgb(47, 47, 47);
}

.chat-personal-note-editor-layer {
    inset: 0;
    overflow-y: auto;
    position: absolute;
    z-index: 8;
}

.chat-personal-note-editor-backdrop {
    align-items: flex-start;
    background-color: rgba(0, 0, 0, 0.55);
    box-sizing: border-box;
    display: flex;
    min-height: 100%;
    justify-content: center;
    padding: var(--widget-space-spacious, 20px);
    width: 100%;
}

.chat-personal-note-editor-panel {
    border-radius: 7px;
    box-sizing: border-box;
    display: grid;
    gap: 20px;
    max-width: 620px;
    padding: var(--widget-space-spacious, 20px);
    width: 100%;
}

.chat-personal-note-editor-header,
.chat-personal-note-editor-footer {
    align-items: center;
    display: flex;
    gap: 20px;
    justify-content: space-between;
}

.chat-personal-note-editor-footer .widget-action-button {
    margin-left: auto;
}

.chat-personal-note-editor-form {
    display: grid;
    gap: 20px;
}

.chat-personal-note-editor-form textarea {
    box-sizing: border-box;
    min-height: 180px;
    resize: vertical;
}

.chat-personal-note-colors {
    border: 0;
    margin: 0;
    min-width: 0;
    padding: 0;
}

.chat-personal-note-color-row {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(5, 40px);
    margin-top: 10px;
}

.chat-personal-note-color {
    background-color: rgb(55, 75, 95);
    border: 0;
    border-radius: 7px;
    box-shadow: 0 0 5px black;
    cursor: pointer;
    height: 40px;
    outline: 1px solid rgba(205, 205, 205, 0.2);
    outline-offset: -2px;
    transition: 0.5s ease;
    width: 40px;
}

.chat-personal-note-color.widget-personal-note-green { background-color: rgb(55, 95, 70); }
.chat-personal-note-color.widget-personal-note-yellow { background-color: rgb(105, 85, 45); }
.chat-personal-note-color.widget-personal-note-red { background-color: rgb(105, 55, 55); }
.chat-personal-note-color.widget-personal-note-neutral { background-color: rgb(70, 70, 70); }

.chat-personal-note-color:hover {
    box-shadow: 0 0 7px black;
    outline-color: rgba(205, 205, 205, 0.45);
}

.chat-personal-note-color-selected {
    box-shadow: 0 0 7px black;
    outline-color: rgba(220, 230, 235, 0.85);
    outline-width: 2px;
}

.chat-personal-note-color:active {
    box-shadow: inset 0 0 3px black, 0 0 3px black;
}

.chat-personal-note-open:focus-visible,
.chat-personal-notes-button:focus-visible {
    box-shadow: 0 0 0 2px rgba(155, 190, 220, 0.8);
    outline: none;
}

.chat-personal-note-color:focus-visible {
    box-shadow: 0 0 7px black;
    outline-color: rgba(155, 190, 220, 0.9);
    outline-offset: 2px;
    outline-width: 2px;
}

.chat-personal-note-save-status {
    color: rgb(160, 160, 160);
    text-shadow: 0 0 5px black;
}

.chat-personal-note-shared-by {
    color: rgb(165, 175, 185);
    display: block;
    font-size: 16px;
    margin-top: 10px;
    text-shadow: 0 0 5px black;
}

.chat-personal-note-share-results {
    display: grid;
    gap: 10px;
    margin-top: 20px;
    min-height: 94px;
    place-content: stretch;
}

.chat-personal-note-share-search {
    margin-bottom: 0;
}

.chat-personal-note-dialog-title {
    align-items: center;
    display: flex;
    gap: 10px;
    margin-bottom: 0;
    text-align: left;
}

.chat-personal-note-share-recipient {
    gap: 10px;
    grid-template-columns: 54px minmax(0, 1fr) auto;
    min-height: 74px;
    margin-bottom: 0;
    margin-top: 0;
    padding: 10px;
}

.chat-personal-note-share-results > .widget-empty-state {
    min-height: 54px;
}

.chat-personal-note-share-identity {
    display: grid;
    min-width: 0;
}

.chat-personal-note-share-legal-name {
    color: rgb(155, 155, 155);
    font-size: 16px;
    line-height: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: 0 0 5px black;
    white-space: nowrap;
}

@font-face {
    font-display: block;
    font-family: "MiniDesk Placeholder Icons";
    font-style: normal;
    font-weight: 400;
    src: url("../vendor/fontawesome/webfonts/fa-solid-900.woff2") format("woff2");
    unicode-range: U+0023-0024, U+E000-F8FF;
}
/* Tenant Plan and Billing settings */
.plan-billing-panel { display: grid; gap: 20px; }
.plan-billing-notice { display: flex; align-items: center; gap: 15px; padding: 15px; border-radius: 6px; }
.plan-billing-notice > i { color: rgb(50, 90, 130); font-size: 28px; }
.plan-billing-notice strong, .plan-billing-notice span { display: block; text-shadow: 0 0 5px black; }
.plan-billing-notice span { margin-top: 5px; font-size: 16px; }
.plan-billing-quantity-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.plan-billing-quantity-grid input { box-sizing: border-box; width: 100%; min-height: 40px; margin: 0; padding: 0 12px; border: 0; border-radius: 7px; color: rgb(175, 175, 175); font-size: 18px; }
.plan-billing-section { display: grid; gap: 0; }
.plan-billing-offer-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 20px; border-radius: 6px; }
.plan-billing-offer.widget-list-card { background-color: rgb(60, 60, 60); box-shadow: 0 0 5px black; }
.plan-billing-offer { box-sizing: border-box; min-height: 76px; display: grid; grid-template-columns: 24px 28px minmax(0, 1fr); align-items: start; gap: 10px; margin: 0; padding: 12px; cursor: pointer; }
.plan-billing-offer > input { width: 20px; height: 20px; margin: 2px 0 0; }
.plan-billing-offer > i { color: rgb(50, 90, 130); font-size: 20px; text-align: center; }
.plan-billing-offer-copy strong, .plan-billing-offer-copy span { display: block; text-shadow: 0 0 5px black; }
.plan-billing-offer-copy span { margin-top: 5px; font-size: 16px; line-height: 1.35; }
.plan-billing-empty { grid-column: 1 / -1; padding: 20px; text-align: center; text-shadow: 0 0 5px black; }
.plan-billing-inline-message { min-height: 20px; text-align: center; }
@media (max-width: 735px) {
    .plan-billing-quantity-grid, .plan-billing-offer-list { grid-template-columns: 1fr; }
    .plan-billing-offer-list { padding: 15px; }
}

/* Print agent settings */
.printing-settings-panel {
    display: grid;
    gap: 20px;
}

.printing-settings-section {
    box-sizing: border-box;
    display: grid;
    gap: 0;
    min-width: 0;
}

.printing-settings-surface {
    border-radius: 7px;
    box-sizing: border-box;
    display: grid;
    gap: 10px;
    min-width: 0;
    padding: var(--widget-space-spacious, 20px);
}

.printing-pairing-row {
    align-items: center;
    display: grid;
    gap: 20px;
    grid-template-columns: minmax(0, 1fr) minmax(160px, 200px);
}

.printing-release-row {
    align-items: center;
    display: grid;
    gap: 20px;
    grid-template-columns: minmax(0, 1fr) minmax(160px, 200px);
}

.printing-release-row > div {
    display: grid;
    gap: 5px;
    min-width: 0;
}

.printing-release-row > button {
    box-sizing: border-box;
    margin: 0;
    min-height: 40px;
    width: 100%;
}

.printing-pairing-row > input,
.printing-pairing-row > button {
    box-sizing: border-box;
    margin: 0;
    min-height: 40px;
    width: 100%;
}

.printing-settings-heading-row {
    align-items: center;
    display: flex;
    gap: 20px;
    justify-content: space-between;
}

.printing-agent-list {
    border-radius: 7px;
    box-sizing: border-box;
    display: grid;
    gap: 10px;
    min-width: 0;
    padding: var(--widget-space-spacious, 20px);
}

.printing-route-list {
    border-radius: 7px;
    box-sizing: border-box;
    display: grid;
    gap: 10px;
    padding: var(--widget-space-spacious, 20px);
}

.printing-route-row {
    align-items: center;
    display: grid;
    gap: 20px;
    grid-template-columns: minmax(180px, 0.65fr) minmax(220px, 1fr);
}

.printing-route-label {
    align-items: center;
    display: grid;
    gap: 10px;
    grid-template-columns: 24px minmax(0, 1fr);
    margin: 0;
    text-shadow: 0 0 5px black;
}

.printing-route-select {
    box-sizing: border-box;
    min-width: 0;
    width: 100%;
}

.printing-agent-item {
    align-items: center;
    cursor: default;
    display: grid;
    gap: 20px;
    grid-template-columns: 44px minmax(0, 1fr) auto 40px 40px;
    min-width: 0;
    padding: var(--widget-space-spacious, 20px);
}

.printing-printer-item {
    grid-template-columns: 44px minmax(0, 1fr) minmax(170px, 220px) auto 40px;
}

.printing-job-item {
    grid-template-columns: 44px minmax(0, 1fr) auto 40px;
}

.printing-printer-item .option-selector {
    --dropdown-length: 100%;
    min-width: 0;
    width: var(--dropdown-length);
}

.printing-printer-kind {
    min-width: 0;
    width: 100%;
}

.printing-agent-details {
    display: grid;
    gap: 5px;
    min-width: 0;
}

.printing-agent-title,
.printing-agent-meta {
    min-width: 0;
    overflow-wrap: anywhere;
}

.printing-agent-title {
    color: rgb(220, 220, 220);
    font-weight: bold;
}

.printing-agent-meta {
    color: rgb(150, 150, 150);
}

@media (max-width: 735px) {
    .printing-pairing-row,
    .printing-release-row {
        grid-template-columns: minmax(0, 1fr);
    }

    .printing-route-row {
        gap: 10px;
        grid-template-columns: minmax(0, 1fr);
    }

    .printing-agent-item {
        gap: 10px;
        grid-template-columns: 44px minmax(0, 1fr) 40px 40px;
    }

    .printing-printer-item {
        grid-template-columns: 44px minmax(0, 1fr) auto 40px;
    }

    .printing-printer-item > .option-selector {
        grid-column: 2 / -1;
    }

    .printing-agent-item > .widget-list-badge {
        grid-column: 2;
        grid-row: 2;
    }

    .printing-agent-revoke {
        grid-column: 4;
        grid-row: 1 / span 2;
    }

    .printing-agent-status {
        grid-column: 3;
        grid-row: 1 / span 2;
    }
}
.ai-assistance-dialog {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: min(900px, calc(100vw - 40px));
    max-height: none;
}

.ai-assistance-heading {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.ai-assistance-heading > div:last-child {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.ai-assistance-heading .widget-content-title {
    line-height: 1;
    margin: 0;
}

.ai-assistance-dialog > .shift-editor-header {
    align-items: start;
    min-height: 40px;
}

.ai-assistance-dialog > .shift-editor-header > .widget-square-control {
    align-self: start;
}

.ai-assistance-header-icon {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    border-radius: 5px;
    color: rgb(175, 175, 175);
    background: rgb(40, 60, 80);
    box-shadow: 0 0 5px black;
}

.ai-assistance-body,
.ai-assistance-output,
.ai-assistance-result-section {
    min-width: 0;
}

.ai-assistance-output,
.ai-assistance-result-section,
.ai-assistance-source-list {
    display: grid;
    gap: 10px;
}

.ai-assistance-result-section > .widget-content-title {
    margin: 0;
}

.ai-assistance-sources {
    box-sizing: border-box;
    min-width: 0;
    border-radius: 7px;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.ai-assistance-ordered-list {
    border-radius: 7px;
    box-sizing: border-box;
    counter-reset: ai-assistance-item;
    display: grid;
    gap: 10px;
    list-style: none;
    margin: 0;
    min-width: 0;
    padding: 10px 20px;
    width: 100%;
}

.ai-assistance-ordered-list > li {
    border-bottom: 1px solid rgba(175, 175, 175, 0.12);
    box-sizing: border-box;
    counter-increment: ai-assistance-item;
    display: grid;
    gap: 10px;
    grid-template-columns: 30px minmax(0, 1fr);
    min-width: 0;
    overflow-wrap: anywhere;
    padding: 10px 0;
    width: 100%;
    word-break: break-word;
}

.ai-assistance-ordered-list > li:last-child {
    border-bottom: 0;
}

.ai-assistance-ordered-list > li::before {
    align-items: center;
    align-self: start;
    background: rgb(40, 60, 80);
    border-radius: 4px;
    box-shadow: 0 0 5px black;
    color: rgb(200, 200, 200);
    content: counter(ai-assistance-item);
    display: flex;
    height: 30px;
    justify-content: center;
    text-shadow: 0 0 5px black;
    width: 30px;
}

.ai-assistance-result-copy {
    display: grid;
    gap: 5px;
    min-width: 0;
}

.ai-assistance-result-detail {
    min-width: 0;
}

.ai-assistance-result-detail > span {
    font-weight: bold;
}

.ai-assistance-tab-stack {
    margin-top: 0;
}

.ai-assistance-tab-stack,
.ai-assistance-tab-stack > .widget-tab-panel {
    min-width: 0;
}

.ai-assistance-tab-stack > .widget-tab-panel:not(.widget-tab-panel-hidden) {
    display: grid;
    gap: 20px;
}

.ai-assistance-prompt-body .widget-form-field > input,
.ai-assistance-prompt-body .widget-form-field > select,
.ai-assistance-prompt-body .widget-form-field > textarea,
.ai-assistance-prompt-body .widget-form-field > .option-selector {
    margin-bottom: 0;
}

.ai-assistance-prompt-region {
    min-width: 0;
}

.ai-assistance-prompt-content {
    display: grid;
    gap: 10px;
    min-width: 0;
}

.ai-assistance-prompt-loading {
    font-size: 18px;
    inset: 0;
}

.ai-assistance-editable-prompt {
    min-width: 0;
    position: relative;
}

.ai-assistance-editable-prompt > textarea {
    box-sizing: border-box;
    display: block;
    margin: 0;
    width: 100%;
}

.ai-assistance-prompt-loading > i,
.ai-assistance-prompt-loading > span {
    color: rgb(200, 200, 200);
}

.ai-assistance-dialog button:not(.widget-square-control) {
    align-items: center;
    display: inline-flex;
    gap: 10px;
    justify-content: center;
}

.ai-assistance-dialog > .widget-dialog-actions > button {
    min-height: 50px;
}

.ai-assistance-dialog > .widget-dialog-actions {
    gap: 20px;
}

.ai-assistance-dialog .widget-button-loading {
    overflow: hidden;
    position: relative;
}

.ai-assistance-source-list {
    margin-top: 10px;
}

.ai-assistance-source-list span,
.ai-assistance-result-item > span {
    display: flex;
    gap: 10px;
}

.ai-assistance-selectable {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.ai-assistance-selectable > span {
    display: grid;
}

.ai-assistance-proposed-repairs .ai-assistance-selectable {
    align-items: start;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
}

.ai-assistance-proposed-repairs .ai-assistance-selectable > input {
    grid-column: 2;
    grid-row: 1;
    margin-top: 2px;
}

.ai-assistance-proposed-repairs .ai-assistance-selectable > span {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
}

.ai-assistance-warning {
    color: rgb(190, 90, 100);
}

.ai-assistance-result-warnings {
    margin-top: 10px;
}

.ai-assistance-action-row {
    flex-wrap: wrap;
    gap: 20px;
}

.ai-assistance-action-row > button {
    min-height: 50px;
    flex: 1 1 180px;
}

.ai-assistance-external-result {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.ai-assistance-external-result > div {
    display: grid;
    gap: 5px;
    min-width: 0;
}

.ai-assistance-external-result .widget-action-group > button {
    align-items: center;
    display: inline-flex;
    gap: 8px;
    height: auto;
    justify-content: center;
    line-height: normal;
    min-height: 50px;
    padding-bottom: 5px;
    padding-top: 5px;
    white-space: normal;
}

@media (max-width: 735px) {
    .ai-assistance-tab-bar .widget-tab {
        flex-basis: 50%;
    }

    .ai-assistance-external-result {
        align-items: stretch;
        flex-direction: column;
    }

    .ai-assistance-external-result > div {
        box-sizing: border-box;
        width: 100%;
    }
}