/* ===== acutes_items_modal_html (HTML form, scoped) =====
   ACUTES ITEMS MODAL - Content Styles Only
   Overlay/modal chrome uses centralised px-modal system.

   Loaded eagerly from anvil.yaml native_deps.head_html. Every rule here comes
   from the form's old <style> block; nothing is added and nothing is dropped.

   SCOPE. Every rule is :where(#aim-overlay), NOT :where(.aim-root). The
   toolkit's pxShowOverlay PORTALS #aim-overlay into #px-modal-portal on open,
   so a rule scoped on the form root would stop matching the moment the modal
   opened. :where() contributes zero specificity, so
   :where(#aim-overlay) .aim-table th is (0,1,1) -- byte-identical in weight to
   the bare .aim-table th it replaces. Section deviation D-A3.

   #aim-overlay .px-modal and its 600px twin already name #aim-overlay, so they
   are left exactly as they are: re-scoping them would be a second copy of the
   same ancestor. They are also the section's only two .px-* declarations, and
   they beat the dependency's own .px-modal on specificity (1,1,0 against
   0,1,0) rather than on document order, which is what makes them safe in a
   head link that loads before the dependency injects its theme at startup.

   NO DESIGNER GATE, and there is nothing to gate. The only rule that hides
   this form's content is the DEPENDENCY's .px-modal-overlay { opacity: 0 },
   injected by Python at runtime; the designer runs no Python, so this canvas
   is drag-only today and stays drag-only. There is no live class to gate on.

   FAIL LOUD, CAUGHT NOWHERE. Section rule: a missing-element throw out of
   acutes_items_modal.mjs propagates through the Python call site into the
   app's error handling. Nothing here catches or softens it.

   No url(), no @font-face, no @keyframes, no html rule and no :root block in
   this form: nothing to rewrite. .themed-scrollbar stays the dependency's and
   is not declared here. */


/* Colour tokens */
:where(#aim-overlay) .aim-content {
    --aim-color-yellow: #f59e0b;
    --aim-color-yellow-light: #fef3c7;
    --aim-color-green: #10b981;
    --aim-color-green-light: #d1fae5;
    --aim-color-purple: #8b5cf6;
    --aim-color-purple-light: #ede9fe;
}

[data-theme="dark"] :where(#aim-overlay) .aim-content {
    --aim-color-yellow-light: rgba(245, 158, 11, 0.15);
    --aim-color-green-light: rgba(16, 185, 129, 0.15);
    --aim-color-purple-light: rgba(139, 92, 246, 0.15);
}

#aim-overlay .px-modal {
    max-width: 900px;
    width: 90%;
}

/* Summary subtitle */
:where(#aim-overlay) .aim-summary {
    font-family: var(--px-mono);
    font-size: 0.75rem;
    color: var(--px-text-secondary);
    letter-spacing: 0.05em;
}

/* Filters */
:where(#aim-overlay) .aim-filters {
    display: flex;
    gap: 24px;
    padding: 16px 24px;
    border-bottom: 1px solid var(--px-border);
    flex-shrink: 0;
    flex-wrap: wrap;
}

:where(#aim-overlay) .aim-filter-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--px-font);
    font-size: 0.875rem;
    color: var(--px-text-primary);
    cursor: pointer;
    user-select: none;
}

:where(#aim-overlay) .aim-filter-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--aim-color-purple);
    cursor: pointer;
}

:where(#aim-overlay) .aim-filter-count {
    font-family: var(--px-mono);
    font-size: 0.7rem;
    padding: 2px 6px;
    border-radius: 4px;
    background: var(--px-bg-elevated);
    color: var(--px-text-secondary);
}

/* Table */
:where(#aim-overlay) .aim-table-container {
    flex: 1;
    overflow-y: auto;
    padding: 0;
}

:where(#aim-overlay) .aim-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--px-font);
    font-size: 0.875rem;
}

:where(#aim-overlay) .aim-table thead {
    background: var(--px-bg-elevated);
}

:where(#aim-overlay) .aim-table th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: inherit;
    text-align: left;
    padding: 12px 16px;
    font-family: var(--px-mono);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--px-text-secondary);
    border-bottom: 2px solid var(--px-border);
}

:where(#aim-overlay) .aim-table td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--px-border-subtle);
    color: var(--px-text-primary);
    vertical-align: top;
}

:where(#aim-overlay) .aim-table tbody tr:hover {
    background: var(--px-bg-elevated);
}

/* Category badges */
:where(#aim-overlay) .aim-category {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 12px;
    font-family: var(--px-mono);
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

:where(#aim-overlay) .aim-category-bag {
    background: var(--aim-color-yellow-light);
    color: var(--aim-color-yellow);
}

:where(#aim-overlay) .aim-category-dispatch {
    background: var(--aim-color-green-light);
    color: var(--aim-color-green);
}

:where(#aim-overlay) .aim-category-owings {
    background: var(--aim-color-purple-light);
    color: var(--aim-color-purple);
}

/* Empty state */
:where(#aim-overlay) .aim-empty {
    text-align: center;
    padding: 60px 20px;
    color: var(--px-text-muted);
    font-family: var(--px-font);
}

:where(#aim-overlay) .aim-empty-icon {
    font-size: 3rem;
    margin-bottom: 12px;
    opacity: 0.5;
}

/* Mobile responsive */
@media (max-width: 600px) {
    #aim-overlay .px-modal {
        width: 95%;
    }

    :where(#aim-overlay) .aim-filters {
        padding: 12px 16px;
        gap: 16px;
    }

    :where(#aim-overlay) .aim-table th,
    :where(#aim-overlay) .aim-table td {
        padding: 10px 12px;
        font-size: 0.8rem;
    }

    :where(#aim-overlay) .aim-table th {
        font-size: 0.65rem;
    }

    :where(#aim-overlay) .aim-col-home {
        display: none;
    }
}

/* Undo Interim button */
:where(#aim-overlay) .aim-undo-interim {
    padding: 4px 10px;
    border-radius: 6px;
    border: 1px solid transparent;
    font-family: var(--px-font);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    background: rgba(239, 68, 68, 0.12);
    color: #dc2626;
    transition: opacity 0.2s ease, transform 0.2s ease, background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    white-space: nowrap;
}

:where(#aim-overlay) .aim-undo-interim:hover:not(:disabled) {
    border-color: #dc2626;
    background: rgba(239, 68, 68, 0.2);
}

:where(#aim-overlay) .aim-undo-interim:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

[data-theme="dark"] :where(#aim-overlay) .aim-undo-interim {
    background: rgba(239, 68, 68, 0.2);
    color: #f87171;
}

[data-theme="dark"] :where(#aim-overlay) .aim-undo-interim:hover:not(:disabled) {
    border-color: #f87171;
    background: rgba(239, 68, 68, 0.3);
}