/* ============================================================================
   AiMS Web App - Global Styles
   CIDBEC Design System: Dark navy sidebar, teal accents, Manrope font
   ============================================================================ */

:root {
    --aims-navy: #0D1B2A;
    --aims-navy-light: #1A2332;
    --aims-teal: #4DD9C0;
    --aims-teal-dark: #004D46;
    --aims-red: #DC2626;
    --aims-header-height: 64px;
    --aims-sidebar-width: 260px;

    /* Adaptive tokens — Light Mode defaults */
    --aims-page-bg: #F7F8FA;
    --aims-surface-bg: #FFFFFF;
    --aims-text-primary: #0D1B2A;
    --aims-text-secondary: #64748B;
    --aims-border-color: #E2E8F0;
    --aims-icon-btn-bg: #F0F1F3;
    --aims-icon-btn-hover: #E2E8F0;
    --aims-card-shadow: 0 4px 24px rgba(0, 0, 0, 0.10);
    --aims-row-alt: #F7F8FA;
    --aims-table-header-bg: #F7F8FA;
    --aims-table-header-text: #64748B;
    --aims-btn-secondary-bg: #FFFFFF;
    --aims-btn-secondary-text: #64748B;
    --aims-filter-input-bg: #F7F8FA;
    --aims-filter-text: #64748B;
    --aims-page-btn-bg: #F7F8FA;
    --aims-tab-container-bg: #E8ECF0;
    --aims-tab-inactive-text: #64748B;
    --aims-text-muted: #64748B;
    --aims-bg-secondary: #F1F5F9;
    --aims-bg-tertiary: #E2E8F0;
    --aims-module-header: #475569;
}

/* ============================================================================
   Dark Mode Tokens
   Wireframe source: aims_wireframes_desktop_v1.pen (R02–R06 Dark Mode frames)
   Activated via [data-theme="dark"] on <html> element
   ============================================================================ */

[data-theme="dark"] {
    color-scheme: dark;
    --aims-page-bg: #0F1923;
    --aims-surface-bg: #1A2332;
    --aims-text-primary: #E2E8F0;
    --aims-text-secondary: #A0AEC0;
    --aims-border-color: #334155;
    --aims-icon-btn-bg: #1A2332;
    --aims-icon-btn-hover: #2A3A4E;
    --aims-card-shadow: 0 4px 24px rgba(0, 0, 0, 0.30);
    --aims-row-alt: #0F1923;
    --aims-table-header-bg: #0D1B2A;
    --aims-table-header-text: #E2E8F0;
    --aims-btn-secondary-bg: #1A2332;
    --aims-btn-secondary-text: #A0AEC0;
    --aims-filter-input-bg: #0D1B2A;
    --aims-filter-text: #A0AEC0;
    --aims-page-btn-bg: #0D1B2A;
    --aims-tab-container-bg: #1A2332;
    --aims-tab-inactive-text: #A0AEC0;
    --aims-text-muted: #94A3B8;
    --aims-bg-secondary: #1E293B;
    --aims-bg-tertiary: #0D1B2A;
    --aims-module-header: #4DD9C0;
}

[data-theme="dark"] select.aims-auth-input,
[data-theme="dark"] select.aims-auth-input option {
    background-color: var(--aims-surface-bg);
    color: var(--aims-text-primary);
}

[data-theme="dark"] select.aims-auth-input option:hover,
[data-theme="dark"] select.aims-auth-input option:checked {
    background-color: #2A3A4E;
}

*, *::before, *::after {
    box-sizing: border-box;
}

html, body {
    font-family: 'Manrope', sans-serif;
    margin: 0;
    padding: 0;
    height: 100%;
    overflow-x: hidden;
}

h1:focus {
    outline: none;
}

/* Radzen validation z-index fix */
.rz-validation-message {
    z-index: 10000 !important;
}

.rz-dropdown-popup,
.rz-datepicker-popup {
    z-index: 9999;
}

/* Radzen Dropdown dark mode overrides */
[data-theme="dark"] .rz-dropdown-items li,
[data-theme="dark"] .rz-multiselect-items li,
[data-theme="dark"] .rz-autocomplete-items li,
[data-theme="dark"] .rz-dropdown-item,
[data-theme="dark"] .rz-listbox-item {
    color: #E2E8F0 !important;
}

[data-theme="dark"] .rz-dropdown-items li:hover,
[data-theme="dark"] .rz-multiselect-items li:hover,
[data-theme="dark"] .rz-dropdown-item:hover,
[data-theme="dark"] .rz-listbox-item:hover {
    background-color: #2A3A4E !important;
    color: #FFFFFF !important;
}

[data-theme="dark"] .rz-dropdown-items li.rz-state-highlight,
[data-theme="dark"] .rz-multiselect-items li.rz-state-highlight,
[data-theme="dark"] .rz-dropdown-item.rz-state-highlight {
    background-color: #1A3A4E !important;
    color: #FFFFFF !important;
}

[data-theme="dark"] .rz-dropdown,
[data-theme="dark"] .rz-multiselect,
[data-theme="dark"] .rz-autocomplete {
    color: #E2E8F0 !important;
}

[data-theme="dark"] .rz-textbox,
[data-theme="dark"] .rz-inputtext {
    color: #E2E8F0 !important;
}

[data-theme="dark"] .rz-dropdown-popup,
[data-theme="dark"] .rz-dropdown-panel,
[data-theme="dark"] .rz-multiselect-panel {
    color: #E2E8F0;
}

/* ============================================================================
   Sidebar Styles — Same in both Light and Dark modes
   ============================================================================ */

.aims-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: var(--aims-sidebar-width);
    height: 100vh;
    background-color: var(--aims-navy);
    padding: 24px 20px 20px 20px;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    z-index: 100;
}

.aims-sidebar-logo {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 20px;
}

.aims-sidebar-logo img {
    height: 35px;
    width: 160px;
    object-fit: contain;
}

.aims-sidebar-logo-title {
    color: var(--aims-teal);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.aims-sidebar-logo-subtitle {
    color: var(--aims-teal);
    font-size: 10px;
    font-weight: 400;
}

.aims-sidebar-logo-divider {
    background-color: var(--aims-teal);
    height: 2px;
    width: 60px;
    border: none;
}

.aims-sidebar-menu {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding-top: 28px;
    overflow-y: auto;
}

.aims-sidebar-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.aims-sidebar-group-label {
    color: var(--aims-teal);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.5px;
    padding: 0 12px;
    margin-bottom: 4px;
}

.aims-sidebar-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 6px;
    cursor: pointer;
    color: #A0AEC0;
    transition: all 0.2s ease;
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    width: 100%;
    background: none;
    border: none;
    text-align: left;
}

.aims-sidebar-item:hover {
    color: #E2E8F0;
    background-color: rgba(255, 255, 255, 0.05);
}

.aims-sidebar-item.active {
    color: #4DD9C0;
    font-weight: 700;
    background-color: rgba(255, 255, 255, 0.1);
}

.aims-sidebar-item.active i {
    color: #4DD9C0;
}

.aims-sidebar-item i {
    font-size: 18px;
    width: 18px;
    height: 18px;
}

.aims-sidebar-bottom {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-top: 20px;
}

.aims-sidebar-divider {
    height: 1px;
    background-color: rgba(26, 35, 50, 0.3);
    border: none;
}

.aims-sidebar-profile {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 8px;
    background-color: rgba(255, 255, 255, 0.05);
}

.aims-sidebar-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 600;
    color: #FFFFFF;
}

.aims-sidebar-avatar.admin {
    background-color: #145A52;
}

.aims-sidebar-avatar.fasiliti {
    background-color: #145A52;
}

.aims-sidebar-profile-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.aims-sidebar-profile-name {
    color: #E2E8F0;
    font-size: 12px;
    font-weight: 600;
}

.aims-sidebar-profile-role {
    color: #A0AEC0;
    font-size: 10px;
}

.aims-sidebar-controls {
    display: flex;
    justify-content: space-between;
    padding: 12px 12px 0 12px;
}

.aims-sidebar-controls button {
    background: none;
    border: none;
    cursor: pointer;
    color: #A0AEC0;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease;
}

.aims-sidebar-controls button:hover {
    color: #FFFFFF;
}

/* ============================================================================
   Header Styles — Adapts to Dark Mode
   ============================================================================ */

.aims-header {
    position: fixed;
    top: 0;
    left: var(--aims-sidebar-width);
    right: 0;
    height: var(--aims-header-height);
    background-color: var(--aims-surface-bg);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    z-index: 90;
    border-bottom: 1px solid var(--aims-border-color);
}

.aims-header-left {
    display: flex;
    flex-direction: column;
    gap: 4px;
    justify-content: center;
}

.aims-header-breadcrumb {
    display: flex;
    align-items: center;
    font-size: 13px;
}

/* STORY-132 — page-title header mode (wireframe kcZAt/yqGJE: 12px eyebrow
   "Incident Complaint" #A0AEC0 + 22px title "Complaint Assessment" Inter-700
   in the shared TopBar, no breadcrumb trail, no search icon — VERIFY
   reconcile attempt 3 measured 12px/22px, not the earlier 16px/27px guess).
   Activated opt-in via BreadcrumbState.SetCustomHeader; G59 dark overrides
   keep the title on the --aims-text-primary token and re-tint the eyebrow. */
/* NOTE (STORY-077): the shared header metrics below (gap 2px / eyebrow 400 /
   line-height 1.25) are the STORY-132 values verified for the page-title header
   mode. STORY-077's Add/Edit frames measure a slightly tighter pair (gap 4,
   eyebrow 500), but that is SHARED APP CHROME consumed by every SetCustomHeader
   page (Incident Complaint Assessment included) — not this story's to change.
   Recorded as an accepted divergence (DV-7) instead of edited here. */
.aims-header-page {
    display: flex;
    flex-direction: column;
    gap: 2px;
    justify-content: center;
}

.aims-header-eyebrow {
    font-family: 'Manrope', sans-serif;
    font-size: 12px;
    line-height: 1.25;
    font-weight: 400;
    color: #A0AEC0;
}

.aims-header-title {
    font-family: 'Manrope', sans-serif;
    font-size: 22px;
    line-height: 1.25;
    font-weight: 700;
    color: var(--aims-text-primary);
    margin: 0;
    padding: 0;
    border: none;
}

[data-theme="dark"] .aims-header-eyebrow {
    color: var(--aims-text-secondary);
}

/* Radzen Breadcrumb — wireframe overrides */
.rz-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Manrope', sans-serif;
    font-size: 13px;
}

.rz-breadcrumb-item + .rz-breadcrumb-item::before {
    content: "/";
    color: #8A9AAA;
    font-weight: normal;
    padding: 0 4px;
}

.rz-breadcrumb-item .rz-link {
    color: #64748B;
    font-weight: 500;
    text-decoration: none;
}
.rz-breadcrumb-item .rz-link:hover {
    color: #1A1A2E;
}

.rz-breadcrumb-item:last-child {
    color: #1A1A2E;
    font-weight: 600;
}

[data-theme="dark"] .rz-breadcrumb-item .rz-link {
    color: #94A3B8;
}
[data-theme="dark"] .rz-breadcrumb-item:last-child {
    color: #E2E8F0;
}
[data-theme="dark"] .rz-breadcrumb-item + .rz-breadcrumb-item::before {
    color: #475569;
}

.aims-header-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.aims-header-icon-btn {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background-color: var(--aims-icon-btn-bg);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--aims-text-secondary);
    transition: background-color 0.2s ease;
}

.aims-header-icon-btn:hover {
    background-color: var(--aims-icon-btn-hover);
}

/* ============================================================================
   Content Area — Adapts to Dark Mode
   ============================================================================ */

.aims-content {
    margin-left: var(--aims-sidebar-width);
    margin-top: var(--aims-header-height);
    min-height: calc(100vh - var(--aims-header-height));
    background-color: var(--aims-page-bg);
    padding: 24px;
}

/* ============================================================================
   Dark Mode Utility Classes
   ============================================================================ */

.aims-text-primary {
    color: var(--aims-text-primary);
}

.aims-text-secondary {
    color: var(--aims-text-secondary);
}

.aims-page-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--aims-text-primary);
    margin: 0;
}

.aims-section-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--aims-text-primary);
    margin: 0;
}

.aims-card-title {
    margin: 8px 0 4px;
    color: var(--aims-text-primary);
}

.aims-card-subtitle {
    color: var(--aims-text-secondary);
    margin: 0;
    font-size: 13px;
}

.aims-stat-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--aims-text-secondary);
}

.aims-stat-value {
    font-size: 24px;
    font-weight: 700;
    color: var(--aims-text-primary);
}

.aims-stat-value-accent {
    font-size: 24px;
    font-weight: 700;
    color: var(--aims-teal);
}

.aims-description {
    font-size: 13px;
    color: var(--aims-text-secondary);
}

/* ============================================================================
   Dark Mode Radzen Overrides
   ============================================================================ */

[data-theme="dark"] .rz-card {
    background-color: var(--aims-surface-bg);
    border-color: var(--aims-border-color);
    color: var(--aims-text-primary);
}

/* ============================================================================
   Auth Layout Styles — Wireframe: UM-S01, IDMC-S01–S04
   Design tokens: 160deg gradient, 400px card, #F7F8FA form bg, 48px inputs
   NOTE: Auth pages are always light mode — excluded from dark mode
   ============================================================================ */

.aims-auth-container {
    display: flex;
    min-height: 100vh;
    width: 100%;
}

/* Left brand panel */
.aims-auth-brand-panel {
    flex: 0 0 50%;
    background: linear-gradient(160deg, #0D1B2A 0%, #093B37 33%, #004D46 66%, #145A52 100%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 48px 56px;
    color: #FFFFFF;
}

.aims-auth-brand-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    max-height: 600px;
}

.aims-auth-logo {
    margin-bottom: 40px;
}

.aims-auth-logo img {
    height: 26px;
    width: 120px;
    object-fit: contain;
}

.aims-auth-hero {
    display: flex;
    flex-direction: column;
}

.aims-auth-hero-title {
    font-size: 32px;
    font-weight: 800;
    line-height: 1.3;
    margin: 0 0 8px 0;
    color: #FFFFFF;
}

.aims-auth-hero-subtitle1 {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.6;
    color: #A0AEC0;
    margin: 0 0 4px 0;
}

.aims-auth-hero-subtitle2 {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;
    color: #A0AEC0;
    max-width: 480px;
    margin: 0;
}

.aims-auth-hero-divider {
    width: 60px;
    height: 3px;
    background-color: var(--aims-teal);
    border-radius: 2px;
    margin: 24px 0 20px 0;
}

.aims-auth-features {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.aims-auth-feature {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 13px;
    font-weight: 500;
    color: #E2E8F0;
}

.aims-auth-feature-icon {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 8px;
    background-color: #004D46;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #E2E8F0;
}

.aims-auth-feature-icon .rz-icon {
    font-size: 18px;
}

.aims-auth-contact {
    margin-top: auto;
    padding-top: 40px;
}

.aims-auth-contact-title {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.3px;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 12px;
}

.aims-auth-contact-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 8px;
}

.aims-auth-contact-item .rz-icon {
    font-size: 16px;
}

/* Right form panel */
.aims-auth-form-panel {
    flex: 0 0 50%;
    background-color: var(--aims-page-bg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 60px;
    position: relative;
}

.aims-auth-form-wrapper {
    width: 100%;
    max-width: 440px;
}

/* Form card */
.aims-auth-card {
    background: var(--aims-surface-bg);
    border-radius: 16px;
    box-shadow: var(--aims-card-shadow);
    padding: 36px 32px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.aims-auth-card-header {
    margin-bottom: 0;
}

.aims-auth-card-header-centered {
    text-align: center;
    margin-bottom: 0;
}

.aims-auth-card-title {
    font-size: 26px;
    font-weight: 800;
    color: var(--aims-text-primary);
    margin: 0 0 6px 0;
}

.aims-auth-card-subtitle {
    font-size: 13px;
    font-weight: 400;
    color: var(--aims-text-secondary);
    margin: 0;
}

.aims-auth-card-icon {
    width: 56px;
    height: 56px;
    border-radius: 28px;
    background-color: rgba(77, 217, 192, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px auto;
}

/* Form fields */
.aims-auth-form-fields {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.aims-auth-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Custom labels matching wireframe UM-S01 */
.aims-auth-label {
    display: block;
    font-family: 'Manrope', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.3px;
    color: #4A5568;
    margin-bottom: 0;
}

/* Input group with positioned icons */
.aims-auth-input-group {
    position: relative;
    display: flex;
    align-items: center;
}

.aims-auth-input-icon-left {
    position: absolute;
    left: 14px;
    display: flex;
    align-items: center;
    pointer-events: none;
    z-index: 1;
}

.aims-auth-input-icon-right {
    position: absolute;
    right: 8px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    color: var(--aims-text-secondary);
}

/* Custom input fields matching wireframe: 48px height, 8px radius, 1.5px border */
.aims-auth-input {
    width: 100%;
    height: 48px;
    border: 1.5px solid var(--aims-border-color);
    border-radius: 8px;
    padding: 0 16px;
    font-family: 'Manrope', sans-serif;
    font-size: 14px;
    color: var(--aims-text-primary);
    background: var(--aims-surface-bg);
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.aims-auth-input::placeholder {
    color: #A0AEC0;
}

.aims-auth-input:focus {
    border-color: #4DD9C0;
    box-shadow: 0 0 0 3px rgba(77, 217, 192, 0.15);
}

.aims-auth-input.has-icon-left {
    padding-left: 44px;
}

.aims-auth-input.has-icon-both {
    padding-left: 44px;
    padding-right: 44px;
}

/* Options row (remember me + forgot password) */
.aims-auth-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.aims-auth-remember {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 500;
    color: #4A5568;
    cursor: pointer;
}

.aims-auth-remember input[type="checkbox"] {
    width: 18px;
    height: 18px;
    border-radius: 4px;
    border: 1.5px solid #E2E8F0;
    accent-color: var(--aims-teal-dark);
    cursor: pointer;
}

/* Auth links */
.aims-auth-link {
    color: #004D46;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.aims-auth-link:hover {
    opacity: 0.8;
}

/* Primary button — wireframe spec: #004D46 teal, icon+text */
.aims-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 42px;
    padding: 0 20px;
    background-color: #004D46;
    color: #FFFFFF;
    border: none;
    border-radius: 8px;
    font-family: 'Manrope', sans-serif;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 77, 70, 0.25);
    transition: background-color 0.2s ease, opacity 0.2s ease;
}
.aims-btn-primary:hover {
    background-color: #006B5F;
}
.aims-btn-primary .rz-icon {
    font-size: 18px;
}

/* Full-width modifier for auth pages (100% width, 50px height) */
.aims-btn-primary.aims-btn-fullwidth {
    width: 100%;
    height: 50px;
    font-size: 16px;
}

[data-theme="dark"] .aims-btn-primary {
    background-color: #0D3D38;
}
[data-theme="dark"] .aims-btn-primary:hover {
    background-color: #1A5C52;
}

/* DEPRECATED: use aims-btn-primary with aims-btn-fullwidth instead */
.aims-auth-submit-btn {
    width: 100%;
    height: 50px;
    background-color: #004D46;
    color: #FFFFFF;
    border: none;
    border-radius: 8px;
    font-family: 'Manrope', sans-serif;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 4px 12px rgba(0, 77, 70, 0.25);
    transition: background-color 0.2s ease;
}
.aims-auth-submit-btn:hover {
    background-color: #006B5F;
}
.aims-auth-submit-btn .rz-icon {
    font-size: 18px;
}
[data-theme="dark"] .aims-auth-submit-btn {
    background-color: #0D3D38;
}
[data-theme="dark"] .aims-auth-submit-btn:hover {
    background-color: #1A5C52;
}

/* Secondary/Outline button — wireframe spec */
.aims-btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 42px;
    padding: 0 20px;
    background: transparent;
    color: #4A5568;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    font-family: 'Manrope', sans-serif;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.aims-btn-secondary:hover {
    background-color: #F7FAFC;
    border-color: #CBD5E0;
}
.aims-btn-secondary .rz-icon {
    font-size: 18px;
}
[data-theme="dark"] .aims-btn-secondary {
    color: #CBD5E1;
    border-color: #475569;
}
[data-theme="dark"] .aims-btn-secondary:hover {
    background-color: #1E293B;
    border-color: #64748B;
}

/* Danger button — wireframe spec */
.aims-btn-danger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 38px;
    padding: 0 16px;
    background-color: #DC2626;
    color: #FFFFFF;
    border: none;
    border-radius: 8px;
    font-family: 'Manrope', sans-serif;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease;
}
.aims-btn-danger:hover {
    background-color: #B91C1C;
}
.aims-btn-danger .rz-icon {
    font-size: 16px;
}
[data-theme="dark"] .aims-btn-danger {
    background-color: #991B1B;
}
[data-theme="dark"] .aims-btn-danger:hover {
    background-color: #DC2626;
}

/* Icon action button — grid row actions */
.aims-btn-icon-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: transparent;
    color: #4A5568;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}
.aims-btn-icon-action:hover {
    background-color: #F1F5F9;
    color: #1A1A2E;
}
.aims-btn-icon-action .rz-icon {
    font-size: 18px;
}
[data-theme="dark"] .aims-btn-icon-action {
    color: #94A3B8;
}
[data-theme="dark"] .aims-btn-icon-action:hover {
    background-color: #1E293B;
    color: #E2E8F0;
}

/* Disabled states for all button variants */
.aims-btn-primary:disabled,
.aims-btn-secondary:disabled,
.aims-btn-danger:disabled,
.aims-btn-icon-action:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Card divider */
.aims-auth-card-divider {
    display: flex;
    align-items: center;
    justify-content: center;
}

.aims-auth-card-divider-line {
    width: 100%;
    height: 1px;
    background-color: var(--aims-border-color);
}

/* Card footer */
.aims-auth-card-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.aims-auth-card-footer-text {
    font-size: 13px;
    font-weight: 500;
    color: var(--aims-text-secondary);
}

/* Card back link */
.aims-auth-card-back {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Card notice */
.aims-auth-card-notice {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: #8A9AAA;
    justify-content: center;
}

.aims-auth-card-notice span {
    font-size: 11px;
}

/* Copyright */
.aims-auth-copyright {
    position: absolute;
    bottom: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: var(--aims-text-secondary);
}

.aims-auth-version {
    font-size: 10px;
    color: #8A9AAA;
}

/* Auth responsive — canonical tiers (design-system §10: 1024 / 768 / 480; audit §2).
   The < 480 tier deliberately carries no auth rules: the approved mobile frame IS a
   390px-wide design, so the < 768 tier *is* the small-mobile design. See plan §11 D-3.
   SELECTOR-AUDIT (2026-09-23): 18 of the 19 selectors overridden below are auth-exclusive
   (0 non-auth consumers). The one exception is .aims-auth-input, which 40 non-auth .razor
   files emit — chiefly the list pages' search boxes, the Idmc CRUD forms, and the shared
   DocumentManager — so it is scoped to the auth root below and those pages keep the base
   rule. See plan §3.2 audit table for the method and the corrected count. */

/* Tablet — 768–1023: side-by-side, narrower visual panel (frame rRn17) */
@media (max-width: 1023px) {
    .aims-auth-brand-panel {
        flex: 0 0 380px;
        padding: 40px 36px;
    }

    .aims-auth-brand-content {
        max-height: none;
    }

    .aims-auth-logo {
        margin-bottom: 20px;
    }

    .aims-auth-logo img {
        width: 110px;
        height: 24px;
    }

    .aims-auth-hero-title {
        font-size: 30px;
    }

    .aims-auth-hero-subtitle1 {
        font-size: 14px;
    }

    .aims-auth-hero-subtitle2 {
        font-size: 12px;
    }

    .aims-auth-hero-divider {
        width: 50px;
    }

    .aims-auth-features {
        gap: 10px;
    }

    .aims-auth-form-panel {
        /* FIX-3. Tablet is a ROW, so `flex` governs WIDTH here and the mobile "never shrink"
           contract does not apply. With `1 0 auto` the panel took its content width (measured
           412), and 380 + 412 = 792 overflows a 768 viewport — masked only by the global
           `body { overflow-x: hidden }`. Allow horizontal shrink; `min-width: 0` lifts the
           automatic min-content floor that would otherwise block it. */
        flex: 1 1 auto;
        min-width: 0;
        padding: 40px 48px;
    }

    .aims-auth-form-wrapper {
        max-width: 340px;
    }

    .aims-auth-card {
        padding: 28px 24px;
        gap: 18px;
        border-radius: 14px;
    }

    /* SCOPED: the bare .aims-auth-input is emitted by 40 non-auth pages (audit below). */
    .aims-auth-container .aims-auth-input {
        height: 44px;
        font-size: 16px;   /* AC-08 rationale, applied to both sub-desktop tiers — plan §11 D-2 */
    }

    .aims-auth-submit-btn {
        height: 46px;
    }

    .aims-auth-copyright {
        position: relative;
        bottom: auto;
        margin-top: 16px;
    }
}

/* Mobile — < 768: stacked, shrinkable 260px band (frame UzDyn at 390×844) */
@media (max-width: 767px) {
    .aims-auth-container {
        flex-direction: column;
        /* FIX-2. Bound the container to the viewport so the band's shrink actually engages.
           The BASE rule is `min-height: 100vh`, which lets a content-sized container GROW — it
           measured 749px inside a 640px viewport, so there was never a shortfall for flex-shrink
           to absorb and the band stayed at 260 at EVERY viewport, including 390x420. Overridden
           here inside the tier; the base declaration at L573-574 is untouched (D-4 revised). */
        height: 100vh;
    }

    /* AC-01/AC-10. flex-basis + max-height fix the band at 260px when there is room and let it
       shrink when there is not. The shrink only does work once the CONTAINER has a bounded
       height (see the `height: 100vh` above) — with the base `min-height: 100vh` the container
       grew to content instead, so this rule never fired on any viewport. */
    .aims-auth-brand-panel {
        flex: 0 1 260px;
        max-height: 260px;
        /* `auto`, NOT `0`: the band floors at its own content so it can never clip the logo or
           the hero. The residual overflow becomes body scroll — AC-07's fallback, by design. */
        min-height: auto;
        padding: 44px 24px 32px;   /* top 44 = iOS status-bar clearance (AC-12) */
        gap: 16px;
    }

    .aims-auth-brand-content {
        height: auto;
        max-height: none;
        justify-content: center;
        gap: 16px;
    }

    .aims-auth-logo {
        margin-bottom: 0;
    }

    .aims-auth-logo img {
        width: 100px;
        height: 22px;
    }

    .aims-auth-hero {
        align-items: center;
        text-align: center;
    }

    .aims-auth-hero-title {
        font-size: 28px;
    }

    .aims-auth-hero-subtitle1 {
        font-size: 12px;
        font-weight: 600;
        line-height: 1.4;
    }

    /* Frame content decision (user-confirmed 2026-09-18): the mobile band keeps only
       the logo + AiMS + the system name. */
    .aims-auth-hero-subtitle2,
    .aims-auth-hero-divider,
    .aims-auth-features,
    .aims-auth-contact {
        display: none;
    }

    .aims-auth-form-panel {
        flex: 1 0 auto;   /* grow to fill, NEVER shrink — see the shrink contract below */
        padding: 24px 20px 40px;   /* bottom 40 = home-indicator clearance (AC-12) */
        justify-content: center;
    }

    .aims-auth-form-wrapper {
        max-width: 100%;
    }

    .aims-auth-card {
        padding: 24px 20px;
        gap: 20px;
        border-radius: 16px;
    }

    .aims-auth-card-title {
        font-size: 22px;
    }

    /* SCOPED: the bare .aims-auth-input is emitted by 40 non-auth pages (audit below). */
    .aims-auth-container .aims-auth-input {
        height: 44px;
        font-size: 16px;   /* AC-08: ≥16px stops iOS focus auto-zoom */
    }

    .aims-auth-submit-btn {
        height: 48px;
    }

    .aims-auth-copyright {
        position: relative;
        bottom: auto;
        margin-top: 4px;
    }
}

/* Sidebar/Header responsive */
@media (max-width: 768px) {
    .aims-sidebar {
        width: 0;
        overflow: hidden;
    }

    .aims-sidebar.mobile-open {
        width: var(--aims-sidebar-width);
    }

    .aims-header {
        left: 0;
    }

    .aims-content {
        margin-left: 0;
    }
}

/* IDMC Dashboard Welcome */
.aims-welcome {
    padding: 24px;
}

.aims-welcome-header {
    margin-bottom: 32px;
}

.aims-welcome-header h2 {
    font-size: 24px;
    font-weight: 700;
    color: var(--aims-navy);
    margin: 0 0 8px;
}

.aims-welcome-header p {
    font-size: 14px;
    color: var(--aims-text-muted, #64748B);
    margin: 0;
}

.aims-welcome-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}

.aims-welcome-card {
    cursor: pointer;
    text-align: center;
    padding: 24px !important;
    transition: transform 0.15s, box-shadow 0.15s;
}

.aims-welcome-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.aims-welcome-card h4 {
    margin: 12px 0 4px;
    font-size: 16px;
    font-weight: 600;
}

.aims-welcome-card p {
    margin: 0;
    font-size: 13px;
    color: var(--aims-text-muted, #64748B);
}

/* Permission denied message */
.aims-permission-denied {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border-radius: 8px;
    background: var(--aims-bg-secondary, #F1F5F9);
    color: var(--aims-text-muted, #64748B);
    font-size: 14px;
}

/* Auth error message */
.aims-auth-error {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    margin-bottom: 16px;
    border-radius: 8px;
    background: #FEF2F2;
    border: 1px solid #FECACA;
    color: #991B1B;
    font-size: 14px;
}

/* Header user info */
.aims-header-user {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s;
}

.aims-header-user:hover {
    background: var(--aims-bg-secondary, #F1F5F9);
}

.aims-header-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    color: white;
    background: var(--aims-teal);
}

.aims-header-user-info {
    display: flex;
    flex-direction: column;
}

.aims-header-user-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--aims-navy);
}

.aims-header-user-role {
    font-size: 11px;
    color: var(--aims-text-muted, #64748B);
}

/* Sidebar toggle button */
.aims-sidebar-toggle {
    display: none;
}

@media (max-width: 768px) {
    .aims-sidebar-toggle {
        display: flex;
    }

    .aims-header-user-info {
        display: none;
    }
}

/* Dark mode overrides for new elements */
[data-theme="dark"] .aims-welcome-header h2 {
    color: var(--aims-text-primary, #E2E8F0);
}

[data-theme="dark"] .aims-auth-error {
    background: #451a1a;
    border-color: #7f1d1d;
    color: #fca5a5;
}

[data-theme="dark"] .aims-header-user:hover {
    background: var(--aims-bg-tertiary, #1E293B);
}

[data-theme="dark"] .aims-header-user-name {
    color: var(--aims-text-primary, #E2E8F0);
}

[data-theme="dark"] .aims-header-user-role {
    color: var(--aims-text-muted, #94A3B8);
}

/* Not authorized redirect */
.aims-auth-redirect {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    color: var(--aims-text-muted, #64748B);
}

/* ============================================================================
   Profile Management Page — Wireframe: IDMC-S05, IDMC-S22
   Two-column card layout: profile view (left) + change password (right)
   ============================================================================ */

.aims-profile-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 24px;
}

.aims-profile-card {
    background: var(--aims-surface-bg);
    border: 1px solid var(--aims-border-color);
    border-radius: 12px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.aims-profile-card-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--aims-border-color);
}

.aims-profile-avatar {
    width: 56px;
    height: 56px;
    border-radius: 28px;
    background-color: rgba(77, 217, 192, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.aims-profile-name {
    font-size: 18px;
    font-weight: 700;
    color: var(--aims-text-primary);
    margin: 0 0 4px;
}

.aims-profile-role-badge {
    font-size: 12px;
    font-weight: 600;
    color: var(--aims-teal);
    margin: 0;
}

.aims-profile-fields {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.aims-profile-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.aims-profile-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.3px;
    color: var(--aims-text-secondary);
    text-transform: uppercase;
}

.aims-profile-value {
    font-size: 14px;
    font-weight: 500;
    color: var(--aims-text-primary);
    padding: 8px 12px;
    min-height: 38px;
    background: var(--aims-bg-secondary, #F1F5F9);
    border-radius: 6px;
    border: 1px solid var(--aims-border-color);
}

.aims-profile-notice {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 12px;
    border-radius: 8px;
    background: var(--aims-bg-secondary, #F1F5F9);
    font-size: 12px;
    color: var(--aims-text-secondary);
    line-height: 1.4;
    width: 100%;
    box-sizing: border-box;
}

.aims-profile-section-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--aims-text-primary);
    margin: 0;
}

.aims-profile-form-fields {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.aims-profile-banner {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    margin-bottom: 16px;
    border-radius: 8px;
    background: #FFFBEB;
    border: 1px solid #FDE68A;
    color: #92400E;
    font-size: 14px;
    font-weight: 500;
}

.aims-profile-success {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border-radius: 8px;
    background: #ECFDF5;
    border: 1px solid #A7F3D0;
    color: #065F46;
    font-size: 14px;
}

.aims-profile-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 40px;
    color: var(--aims-text-secondary);
}

/* Profile responsive */
@media (max-width: 1200px) {
    .aims-profile-grid {
        grid-template-columns: 1fr;
    }
}

/* Profile dark mode */
[data-theme="dark"] .aims-profile-banner {
    background: #451a03;
    border-color: #78350f;
    color: #fbbf24;
}

[data-theme="dark"] .aims-profile-success {
    background: #064e3b;
    border-color: #065f46;
    color: #6ee7b7;
}

[data-theme="dark"] .aims-profile-value {
    background: var(--aims-bg-tertiary, #1E293B);
}

[data-theme="dark"] .aims-profile-notice {
    background: var(--aims-bg-tertiary, #1E293B);
}

/* ============================================================================
   Badge Styles (used across List, Detail, Edit pages)
   ============================================================================ */

.aims-user-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.aims-badge-active {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    background: #DCFCE7;
    color: #166534;
}

.aims-badge-inactive {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    background: #FEE2E2;
    color: #991B1B;
}

[data-theme="dark"] .aims-badge-active {
    background: #064E3B;
    color: #6EE7B7;
}

[data-theme="dark"] .aims-badge-inactive {
    background: #7F1D1D;
    color: #FCA5A5;
}

.aims-badge-locked {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    background: #EDE9FE;
    color: #6D28D9;
}

[data-theme="dark"] .aims-badge-locked {
    background: #4C1D95;
    color: #C4B5FD;
}

.aims-badge-pending {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    background: #FEF3C7;
    color: #92400E;
}

[data-theme="dark"] .aims-badge-pending {
    background: #451a03;
    color: #fbbf24;
}

.aims-badge-draft {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    background: #E2E8F0;
    color: #475569;
}

[data-theme="dark"] .aims-badge-draft {
    background: #1E293B;
    color: #94A3B8;
}

.aims-badge-verified {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    background: #DCFCE7;
    color: #166534;
}

[data-theme="dark"] .aims-badge-verified {
    background: #064E3B;
    color: #6EE7B7;
}

/* ============================================================================
   User Tabs (List.razor status filter)
   ============================================================================ */

.aims-user-tabs {
    display: flex;
    gap: 0;
    background: var(--aims-tab-container-bg);
    border-radius: 8px;
    padding: 4px;
    margin-bottom: 20px;
}

.aims-tab {
    padding: 8px 16px;
    border: none;
    background: transparent;
    color: var(--aims-tab-inactive-text);
    font-size: 13px;
    font-weight: 600;
    font-family: 'Manrope', sans-serif;
    cursor: pointer;
    border-radius: 6px;
    transition: background 0.15s, color 0.15s;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.aims-tab:hover {
    background: rgba(255, 255, 255, 0.5);
}

[data-theme="dark"] .aims-tab:hover {
    background: rgba(255, 255, 255, 0.08);
}

.aims-tab.active {
    background: var(--aims-surface-bg);
    color: var(--aims-text-primary);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.aims-tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
    background: var(--aims-teal);
    color: #0D1B2A;
}

/* ============================================================================
   Field Error (used in Create, Edit forms)
   ============================================================================ */

.aims-field-error {
    display: block;
    font-size: 13px;
    color: #DC2626;
    margin-top: 4px;
}

[data-theme="dark"] .aims-field-error {
    color: #f87171;
}

/* ============================================================================
   Dark Mode Overrides — Auth & Form Elements
   ============================================================================ */

[data-theme="dark"] .aims-welcome-header p {
    color: var(--aims-text-muted, #94A3B8);
}

[data-theme="dark"] .aims-auth-label {
    color: #CBD5E1;
}

[data-theme="dark"] .aims-auth-remember {
    color: #CBD5E1;
}

[data-theme="dark"] .aims-auth-remember input[type="checkbox"] {
    border-color: #475569;
}

[data-theme="dark"] .aims-auth-link {
    color: #4DD9C0;
}

[data-theme="dark"] .aims-auth-link:hover {
    color: #6EE7B7;
}

/* Modal */
.aims-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.aims-modal {
    background: #fff;
    border-radius: 12px;
    width: 90%;
    max-height: 85vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}

.aims-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 1px solid #E2E8F0;
}

.aims-modal-header h3 {
    margin: 0;
    font-size: 18px;
    color: #1E293B;
}

.aims-modal-close {
    background: none;
    border: none;
    font-size: 24px;
    color: #64748B;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
}

.aims-modal-close:hover {
    color: #1E293B;
}

.aims-modal-body {
    padding: 24px;
}

[data-theme="dark"] .aims-modal {
    background: #1E293B;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .aims-modal-header {
    border-bottom-color: #334155;
}

[data-theme="dark"] .aims-modal-header h3 {
    color: #F1F5F9;
}

[data-theme="dark"] .aims-modal-close {
    color: #94A3B8;
}

[data-theme="dark"] .aims-modal-close:hover {
    color: #F1F5F9;
}

/* ============================================================================
   404 Not Found Page
   ============================================================================ */

.aims-notfound-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - var(--aims-header-height) - 48px);
    padding: 60px 24px;
    text-align: center;
}

.aims-notfound-code {
    font-size: 120px;
    font-weight: 800;
    color: var(--aims-teal);
    line-height: 1;
    margin: 0;
    letter-spacing: -2px;
}

.aims-notfound-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--aims-text-primary);
    margin: 16px 0 8px;
}

.aims-notfound-description {
    font-size: 14px;
    color: var(--aims-text-secondary);
    max-width: 420px;
    line-height: 1.6;
    margin: 0 0 32px;
}

.aims-notfound-actions {
    display: flex;
    gap: 12px;
    align-items: center;
}

/* ============================================================================
   403 Forbidden Page
   ============================================================================ */

.aims-forbidden-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - var(--aims-header-height) - 48px);
    padding: 60px 24px;
    text-align: center;
}

.aims-forbidden-code {
    font-size: 120px;
    font-weight: 800;
    color: var(--aims-red);
    line-height: 1;
    margin: 0;
    letter-spacing: -2px;
}

.aims-forbidden-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--aims-text-primary);
    margin: 16px 0 8px;
}

.aims-forbidden-description {
    font-size: 14px;
    color: var(--aims-text-secondary);
    max-width: 420px;
    line-height: 1.6;
    margin: 0 0 32px;
}

.aims-forbidden-actions {
    display: flex;
    gap: 12px;
    align-items: center;
}

/* ============================================================================
   Green Switch Override — Facility Management Code (overrides Radzen default)
   ============================================================================ */

.facility-switch .rz-switch-checked,
.facility-switch input:checked + .rz-switch-toggle {
    background-color: #22c55e !important;
    border-color: #16a34a !important;
}

.facility-switch .rz-switch-circle {
    background-color: #166534 !important;
}

/* ============================================================================
   Green Switch Override — Financial Code (overrides Radzen default)
   ============================================================================ */

.finance-switch .rz-switch-checked,
.finance-switch input:checked + .rz-switch-toggle {
    background-color: #22c55e !important;
    border-color: #16a34a !important;
}

.finance-switch .rz-switch-circle {
    background-color: #166534 !important;
}

/* ============================================================================
   Green Switch Override — Asset Type (overrides Radzen default)
   ============================================================================ */

.asset-type-switch .rz-switch-checked,
.asset-type-switch input:checked + .rz-switch-toggle {
    background-color: #22c55e !important;
    border-color: #16a34a !important;
}

.asset-type-switch .rz-switch-circle {
    background-color: #166534 !important;
}

/* ============================================================================
   Status Toggle — Allocation Source (wireframe AHZ1n / Uv7X6)
   Solid 48x28 knobless capsule (STORY-077 VERIFY reconcile, attempt 2).
   Frame AHZ1n node mMUoz / track Xqbv0 draws a solid green pill with no knob
   node, and ui-spec-allocation-add.json divergences[] states
   '48x28 solid-green no-knob switch' — the state reads through the track
   colour plus the adjacent Active/Inactive label, never a moving knob.
   Radzen v11.2.4 markup: the .rz-switch ROOT carries .rz-switch-checked, the
   track colour lives on .rz-switch-circle (absolute inset:0), and the knob is
   .rz-switch-circle::before (suppressed below). The previous descendant
   selector (.allocation-switch .rz-switch-checked) and the non-existent
   input:checked + .rz-switch-toggle never matched — hence the indigo
   #4340D2 theme knob overflowing the 14px track.
   G59 — the green is theme-independent (pinned in both themes); the unchecked
   track uses #E2E8F0 (light) / #334155 (dark), both pinned below.
   ============================================================================ */

.allocation-switch {
    width: 48px;
    min-width: 48px;
    height: 28px;
    border-radius: 14px;
    margin-inline-end: 0;
}

.allocation-switch .rz-switch-circle {
    background-color: #E2E8F0 !important;
    border-radius: 14px;
}

.allocation-switch.rz-switch-checked .rz-switch-circle {
    background-color: #22C55E !important;
}

/* Knob removed — VERIFY reconcile (attempt 2): the frame has no knob node;
   Radzen renders the knob as .rz-switch-circle::before, so suppress the
   pseudo-element in BOTH states. The switch stays interactive (the track is
   the hit target) and checked vs unchecked remains legible through the track
   colour + the Active/Inactive text label. */
.allocation-switch .rz-switch-circle::before,
.allocation-switch.rz-switch-checked .rz-switch-circle::before {
    display: none !important;
}

[data-theme="dark"] .allocation-switch .rz-switch-circle {
    background-color: #334155 !important;
}

[data-theme="dark"] .allocation-switch.rz-switch-checked .rz-switch-circle {
    background-color: #22C55E !important;
}

/* ============================================================================
   Status Toggle — Project (STORY-090, AD-S15 Add/Edit frames yUSFp / VpHw4)
   Mirrors the allocation-switch pattern above (the sibling settings switch, and
   the one already reconciled against the Radzen v11.2.4 markup): the .rz-switch
   ROOT carries .rz-switch-checked, the track colour lives on .rz-switch-circle
   (absolute inset:0), and the knob is .rz-switch-circle::before (suppressed
   below). The older descendant selector form
   (.project-switch .rz-switch-checked) and the non-existent
   input:checked + .rz-switch-toggle never match, so they are deliberately NOT
   reproduced here. The switch itself is declared in ProjectForm.razor as
   <RadzenSwitch Class="project-switch" />.
   G59 — every colour is pinned in BOTH themes: the green is theme-independent,
   the unchecked track uses #E2E8F0 (light) / #334155 (dark).
   ============================================================================ */

.project-switch {
    width: 48px;
    min-width: 48px;
    height: 28px;
    border-radius: 14px;
    margin-inline-end: 0;
}

.project-switch .rz-switch-circle {
    background-color: #E2E8F0 !important;
    border-radius: 14px;
}

.project-switch.rz-switch-checked .rz-switch-circle {
    background-color: #22C55E !important;
}

/* Knob removed — same shape as allocation-switch: the frame draws a solid
   capsule with no knob node, so suppress the pseudo-element in BOTH states.
   The switch stays interactive (the track is the hit target) and checked vs
   unchecked remains legible through the track colour + the Active/Inactive
   text label. */
.project-switch .rz-switch-circle::before,
.project-switch.rz-switch-checked .rz-switch-circle::before {
    display: none !important;
}

[data-theme="dark"] .project-switch .rz-switch-circle {
    background-color: #334155 !important;
}

[data-theme="dark"] .project-switch.rz-switch-checked .rz-switch-circle {
    background-color: #22C55E !important;
}

/* ============================================================================
   Status Toggle — Vendor (STORY-106, AD-S07 Add/Edit frames PRZ9N / KLgxj)
   Third member of the settings-switch family, mirroring allocation-switch and
   project-switch above: the .rz-switch ROOT carries .rz-switch-checked, the
   track colour lives on .rz-switch-circle (absolute inset:0), and the knob is
   .rz-switch-circle::before (suppressed below). The frame draws a solid green
   capsule with no knob node, so the state reads through the track colour plus
   the adjacent Status label. Declared in VendorForm.razor as
   <RadzenSwitch Class="vendor-switch" />.
   G59 — every colour is pinned in BOTH themes: the green is theme-independent,
   the unchecked track uses #E2E8F0 (light) / #334155 (dark).
   ============================================================================ */

.vendor-switch {
    width: 48px;
    min-width: 48px;
    height: 28px;
    border-radius: 14px;
    margin-inline-end: 0;
}

.vendor-switch .rz-switch-circle {
    background-color: #E2E8F0 !important;
    border-radius: 14px;
}

.vendor-switch.rz-switch-checked .rz-switch-circle {
    background-color: #22C55E !important;
}

/* Knob removed — same shape as the two siblings: the frame draws a solid
   capsule with no knob node, so suppress the pseudo-element in BOTH states.
   The switch stays interactive (the track is the hit target) and checked vs
   unchecked remains legible through the track colour + the Status label. */
.vendor-switch .rz-switch-circle::before,
.vendor-switch.rz-switch-checked .rz-switch-circle::before {
    display: none !important;
}

[data-theme="dark"] .vendor-switch .rz-switch-circle {
    background-color: #334155 !important;
}

[data-theme="dark"] .vendor-switch.rz-switch-checked .rz-switch-circle {
    background-color: #22C55E !important;
}

/* ============================================================================
   Inactive-row subdued treatment — Vendor list (STORY-106, AC6 / D-15, DV-12)
   The AD-S07 List frame (qbmhT) dims the COMPANY NAME of an inactive row while
   the Status badge keeps its own colours. Nothing else in the app has a
   row-level subdued treatment — the sibling settings grids render status as a
   badge only — so this is a NEW class with no existing consumer. The shared
   aims-badge-active / aims-badge-inactive pairs above are therefore NOT touched
   (G103): the badge stays the single place the Active/Inactive pair is styled.
   Applied by Vendor/List.razor to the Company-Name cell of rows whose
   IsActive is false.
   G59 — mapped to the --aims-text-muted token (#64748B light / #94A3B8 dark)
   with the dark counterpart pinned explicitly below. --rz-grid-cell-color
   carries the same value so the rule also lands when the class is placed on
   the <td> itself rather than on an inner <span>.
   ============================================================================ */

.vendor-row-inactive {
    --rz-grid-cell-color: var(--aims-text-muted, #64748B);
    color: var(--aims-text-muted, #64748B);
}

[data-theme="dark"] .vendor-row-inactive {
    --rz-grid-cell-color: var(--aims-text-muted, #94A3B8);
    color: var(--aims-text-muted, #94A3B8);
}

/* ============================================================================
   Status Toggle — Action Proposal (STORY-143, AD-S14 Add/Edit frames
   p1tR3S / aTc2T and l57EJy / F5ZHr)
   Fourth member of the settings-switch family, mirroring allocation-switch,
   project-switch and vendor-switch above: the .rz-switch ROOT carries
   .rz-switch-checked, the track colour lives on .rz-switch-circle (absolute
   inset:0), and the knob is .rz-switch-circle::before (suppressed below). The
   frame's toggle ref is ZAA46 "Toggle Switch Green" — a solid 48x28 green
   capsule with no knob node — so the state reads through the track colour plus
   the adjacent Active/Inactive label. Declared in ActionProposalForm.razor as
   <RadzenSwitch Class="action-proposal-switch" />.
   G59 — every colour is pinned in BOTH themes: the green is theme-independent,
   the unchecked track uses #E2E8F0 (light) / #334155 (dark).
   ============================================================================ */

.action-proposal-switch {
    width: 48px;
    min-width: 48px;
    height: 28px;
    border-radius: 14px;
    margin-inline-end: 0;
}

.action-proposal-switch .rz-switch-circle {
    background-color: #E2E8F0 !important;
    border-radius: 14px;
}

.action-proposal-switch.rz-switch-checked .rz-switch-circle {
    background-color: #22C55E !important;
}

/* Knob removed — same shape as the three siblings: the frame draws a solid
   capsule with no knob node, so suppress the pseudo-element in BOTH states.
   The switch stays interactive (the track is the hit target) and checked vs
   unchecked remains legible through the track colour + the Status label. */
.action-proposal-switch .rz-switch-circle::before,
.action-proposal-switch.rz-switch-checked .rz-switch-circle::before {
    display: none !important;
}

[data-theme="dark"] .action-proposal-switch .rz-switch-circle {
    background-color: #334155 !important;
}

[data-theme="dark"] .action-proposal-switch.rz-switch-checked .rz-switch-circle {
    background-color: #22C55E !important;
}

/* ============================================================================
   Inactive-row subdued treatment — Action Proposal list (STORY-143, AC6, DV-5)
   The AD-S14 List frame (V4HwM) draws no row-level dimming — only the red
   Inactive badge — but AC6 cites the Vendor precedent, so the ACTION PROPOSAL
   cell of an inactive row gets the same subdued treatment as
   .vendor-row-inactive above. The shared aims-badge-active /
   aims-badge-inactive pairs are therefore NOT touched (G103): the badge stays
   the single place the Active/Inactive pair is styled.
   Applied by ActionProposal/List.razor to the Action-Proposal cell of rows
   whose IsActive is false.
   G59 — mapped to the --aims-text-muted token (#64748B light / #94A3B8 dark)
   with the dark counterpart pinned explicitly below. --rz-grid-cell-color
   carries the same value so the rule also lands when the class is placed on
   the <td> itself rather than on an inner <span>.
   ============================================================================ */

.action-proposal-row-inactive {
    --rz-grid-cell-color: var(--aims-text-muted, #64748B);
    color: var(--aims-text-muted, #64748B);
}

[data-theme="dark"] .action-proposal-row-inactive {
    --rz-grid-cell-color: var(--aims-text-muted, #94A3B8);
    color: var(--aims-text-muted, #94A3B8);
}

/* ============================================================================
   Status Toggle — Asset Category (STORY-146, AD-S16 Add/Edit frames
   OuchZ / NvlTj and HJt8W / UUABf)
   Fifth member of the settings-switch family, mirroring allocation-switch,
   project-switch, vendor-switch and action-proposal-switch above: the .rz-switch
   ROOT carries .rz-switch-checked, the track colour lives on .rz-switch-circle
   (absolute inset:0), and the knob is .rz-switch-circle::before (suppressed
   below). The frame's node is "Status Toggle" (IoOok in the Add frame OuchZ,
   J8rYH in Edit frame HJt8W) whose only children are "Track" (48x28,
   cornerRadius 14, fill #22C55E in BOTH the light and dark frames) and
   "Label" — no knob node — so the state reads through the track colour plus
   the adjacent Active/Inactive label. Declared in AssetCategoryForm.razor as
   <RadzenSwitch Class="asset-category-switch" />.
   G59 — every colour is pinned in BOTH themes: the green is theme-independent
   (the dark frames draw the same #22C55E), the unchecked track uses #E2E8F0
   (light) / #334155 (dark) — the family's shared light/dark token pair (G103),
   the unchecked state being absent from the frames.
   ============================================================================ */

.asset-category-switch {
    width: 48px;
    min-width: 48px;
    height: 28px;
    border-radius: 14px;
    margin-inline-end: 0;
}

.asset-category-switch .rz-switch-circle {
    background-color: #E2E8F0 !important;
    border-radius: 14px;
}

.asset-category-switch.rz-switch-checked .rz-switch-circle {
    background-color: #22C55E !important;
}

/* Knob removed — same shape as the four siblings: the frame draws a solid
   capsule with no knob node, so suppress the pseudo-element in BOTH states.
   The switch stays interactive (the track is the hit target) and checked vs
   unchecked remains legible through the track colour + the Status label. */
.asset-category-switch .rz-switch-circle::before,
.asset-category-switch.rz-switch-checked .rz-switch-circle::before {
    display: none !important;
}

[data-theme="dark"] .asset-category-switch .rz-switch-circle {
    background-color: #334155 !important;
}

[data-theme="dark"] .asset-category-switch.rz-switch-checked .rz-switch-circle {
    background-color: #22C55E !important;
}

/* ============================================================================
   Inactive-row subdued treatment — Asset Category list (STORY-146, AC6)
   The AD-S16 List frame (ZPwfa) draws no row-level dimming — Row 06 carries the
   red Inactive badge (#FEE2E2 / #991B1B) while its code/name cells keep the
   normal #0D1B2A fill — but AC6 cites the Vendor precedent ("inactive rows
   subdued in list"), so the code and name cells of an inactive row get the same
   subdued treatment as .vendor-row-inactive and .action-proposal-row-inactive
   above. The shared aims-badge-active / aims-badge-inactive pairs are therefore
   NOT touched (G103): the badge stays the single place the Active/Inactive pair
   is styled.
   Applied by AssetCategory/List.razor to the Category Code AND Category Name
   cells of rows whose IsActive is false.
   G59 — mapped to the --aims-text-muted token (#64748B light / #94A3B8 dark)
   with the dark counterpart pinned explicitly below. --rz-grid-cell-color
   carries the same value so the rule also lands when the class is placed on
   the <td> itself rather than on an inner <span>.
   ============================================================================ */

.asset-category-row-inactive {
    --rz-grid-cell-color: var(--aims-text-muted, #64748B);
    color: var(--aims-text-muted, #64748B);
}

[data-theme="dark"] .asset-category-row-inactive {
    --rz-grid-cell-color: var(--aims-text-muted, #94A3B8);
    color: var(--aims-text-muted, #94A3B8);
}

/* ============================================================================
   Status Toggle — Warning Notification Parameter (STORY-147, AD-S06 List/Edit
   frames zaaER / LQJC9 and ejlyy / R2yJL)
   Sixth member of the settings-switch family, mirroring allocation-switch,
   project-switch, vendor-switch, action-proposal-switch and asset-category-switch
   above: the .rz-switch ROOT carries .rz-switch-checked, the track colour lives
   on .rz-switch-circle (absolute inset:0), and the knob is
   .rz-switch-circle::before (suppressed below). The frames draw a solid 48x28
   capsule with no knob node, so the state reads through the track colour plus the
   adjacent Active/Inactive label. Declared in WarningParameterForm.razor as
   <RadzenSwitch Class="warning-parameter-switch" />.
   G59 — every colour is pinned in BOTH themes: the green is theme-independent,
   the unchecked track uses #E2E8F0 (light) / #334155 (dark) — the family's shared
   light/dark token pair (G103), the unchecked state being absent from the frames.
   G29 — declared globally, NOT in a .razor.css: CSS isolation cannot reach
   Radzen's internal DOM, so the switch rules must live here.
   ============================================================================ */

.warning-parameter-switch {
    width: 48px;
    min-width: 48px;
    height: 28px;
    border-radius: 14px;
    margin-inline-end: 0;
}

.warning-parameter-switch .rz-switch-circle {
    background-color: #E2E8F0 !important;
    border-radius: 14px;
}

.warning-parameter-switch.rz-switch-checked .rz-switch-circle {
    background-color: #22C55E !important;
}

/* Knob removed — same shape as the five siblings: the frames draw a solid
   capsule with no knob node, so suppress the pseudo-element in BOTH states.
   The switch stays interactive (the track is the hit target) and checked vs
   unchecked remains legible through the track colour + the Status label. */
.warning-parameter-switch .rz-switch-circle::before,
.warning-parameter-switch.rz-switch-checked .rz-switch-circle::before {
    display: none !important;
}

[data-theme="dark"] .warning-parameter-switch .rz-switch-circle {
    background-color: #334155 !important;
}

[data-theme="dark"] .warning-parameter-switch.rz-switch-checked .rz-switch-circle {
    background-color: #22C55E !important;
}

/* ============================================================================
   Inactive-row subdued treatment — Warning Notification Parameter list
   (STORY-147, AC5 family / DV-5)
   The AD-S06 List frame (zaaER) draws no row-level dimming — only the red
   Inactive badge — but AC5 cites the Vendor precedent ("inactive rows subdued in
   list"), so the WARNING CATEGORY cell of an inactive row gets the same subdued
   treatment as .vendor-row-inactive, .action-proposal-row-inactive and
   .asset-category-row-inactive above. The shared aims-badge-active /
   aims-badge-inactive pairs are therefore NOT touched (G103): the badge stays
   the single place the Active/Inactive pair is styled.
   Applied by WarningParameter/List.razor to the Warning Category cell of rows
   whose IsActive is false.
   G59 — mapped to the --aims-text-muted token (#64748B light / #94A3B8 dark)
   with the dark counterpart pinned explicitly below. --rz-grid-cell-color
   carries the same value so the rule also lands when the class is placed on
   the <td> itself rather than on an inner <span>.
   ============================================================================ */

.warning-parameter-row-inactive {
    --rz-grid-cell-color: var(--aims-text-muted, #64748B);
    color: var(--aims-text-muted, #64748B);
}

[data-theme="dark"] .warning-parameter-row-inactive {
    --rz-grid-cell-color: var(--aims-text-muted, #94A3B8);
    color: var(--aims-text-muted, #94A3B8);
}

/* ============================================================================
   Status Toggle — Satellite Location (STORY-148, AD-S13 Add/Edit frames
   I4jxi / J3ZHOA and h7A2U / p3Jhq)
   Seventh member of the settings-switch family, mirroring allocation-switch,
   project-switch, vendor-switch, action-proposal-switch, asset-category-switch
   and warning-parameter-switch above: the .rz-switch ROOT carries
   .rz-switch-checked, the track colour lives on .rz-switch-circle (absolute
   inset:0), and the knob is .rz-switch-circle::before (suppressed below). The
   frame's node is "Toggle Switch Green" under the Status Field — a solid 48x28
   capsule with no knob node — so the state reads through the track colour plus
   the adjacent Active/Inactive label. Declared in SatelliteLocationForm.razor
   as <RadzenSwitch Class="satellite-location-switch" />.
   G59 — every colour is pinned in BOTH themes: the green is theme-independent,
   the unchecked track uses #E2E8F0 (light) / #334155 (dark) — the family's shared
   light/dark token pair (G103), the unchecked state being absent from the frames.
   G29 — declared globally, NOT in a .razor.css: CSS isolation cannot reach
   Radzen's internal DOM, so the switch rules must live here.
   ============================================================================ */

.satellite-location-switch {
    width: 48px;
    min-width: 48px;
    height: 28px;
    border-radius: 14px;
    margin-inline-end: 0;
}

.satellite-location-switch .rz-switch-circle {
    background-color: #E2E8F0 !important;
    border-radius: 14px;
}

.satellite-location-switch.rz-switch-checked .rz-switch-circle {
    background-color: #22C55E !important;
}

/* Knob removed — same shape as the six siblings: the frames draw a solid
   capsule with no knob node, so suppress the pseudo-element in BOTH states.
   The switch stays interactive (the track is the hit target) and checked vs
   unchecked remains legible through the track colour + the Status label. */
.satellite-location-switch .rz-switch-circle::before,
.satellite-location-switch.rz-switch-checked .rz-switch-circle::before {
    display: none !important;
}

[data-theme="dark"] .satellite-location-switch .rz-switch-circle {
    background-color: #334155 !important;
}

[data-theme="dark"] .satellite-location-switch.rz-switch-checked .rz-switch-circle {
    background-color: #22C55E !important;
}

/* ============================================================================
   Inactive-row subdued treatment — Satellite Location list (STORY-148, AC6)
   AC6 cites the Vendor precedent ("inactive rows subdued in list"), so the
   Location Code AND Location Name cells of an inactive row get the same subdued
   treatment as .vendor-row-inactive, .action-proposal-row-inactive,
   .asset-category-row-inactive and .warning-parameter-row-inactive above — both
   text cells, because this entity has two identity columns and dimming only one
   would leave the row half subdued (the sibling's single-cell form does not carry
   over). The Status badge itself stays the state readout: the shared
   aims-badge-active / aims-badge-inactive pairs are NOT touched (G103).
   Applied by SatelliteLocation/List.razor to the Location Code AND Location Name
   cells of rows whose IsActive is false.
   G59 — mapped to the --aims-text-muted token (#64748B light / #94A3B8 dark)
   with the dark counterpart pinned explicitly below. --rz-grid-cell-color
   carries the same value so the rule also lands when the class is placed on
   the <td> itself rather than on an inner <span>.
   ============================================================================ */

.satellite-location-row-inactive {
    --rz-grid-cell-color: var(--aims-text-muted, #64748B);
    color: var(--aims-text-muted, #64748B);
}

[data-theme="dark"] .satellite-location-row-inactive {
    --rz-grid-cell-color: var(--aims-text-muted, #94A3B8);
    color: var(--aims-text-muted, #94A3B8);
}

/* ============================================================================
   STORY-091 — Maintenance Application Wizard (Corrective) — Shared Styles
   Matches wireframes byRW7, c3IswM, YA8yo, Fnv5Y, e8NlhG
   ============================================================================ */

/* --- Wizard Container --- */
.aims-wizard {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* ============================================================================
   Stepper — 4-step progress indicator
   Wireframe: white card, centered circles + connector lines
   ============================================================================ */
.aims-stepper {
    background: #FFFFFF;
    border-radius: 8px;
    padding: 24px 32px;
}

.aims-stepper-steps {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
}

.aims-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    user-select: none;
}

.aims-step-circle {
    width: 36px;
    height: 36px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: Manrope, sans-serif;
    font-size: 14px;
    font-weight: 700;
    flex-shrink: 0;
}

.aims-step-circle.active {
    background: #0D1B2A;
    color: #FFFFFF;
}

.aims-step-circle.done {
    background: #16A34A;
    color: #FFFFFF;
}

.aims-step-circle.pending {
    background: #F0F1F3;
    color: #A0AEC0;
}

.aims-step-label {
    font-family: Manrope, sans-serif;
    font-size: 12px;
    line-height: 1.15;
    text-align: center;
    white-space: pre-line;
}

.aims-step-label.active {
    font-weight: 600;
    color: #0D1B2A;
}

.aims-step-label.done {
    font-weight: 600;
    color: #16A34A;
}

.aims-step-label.pending {
    font-weight: 500;
    color: #A0AEC0;
}

.aims-step-connector {
    width: 60px;
    height: 2px;
    background: #E2E8F0;
    flex-shrink: 0;
    margin-top: -16px; /* align with center of circle */
}

/* Connector turns green once the step preceding it is completed (wireframe
   Stepper Card: connector after a done step = #16A34A in both themes). */
.aims-step-connector.done {
    background: #16A34A;
}

/* ============================================================================
   Form Panel — white card containing all step content
   ============================================================================ */
.aims-form-panel {
    background: #FFFFFF;
    border-radius: 8px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ============================================================================
   Badge — teal step indicator
   ============================================================================ */
.aims-badge-teal {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #E8F8F5;
    border-radius: 4px;
    padding: 4px 10px;
    font-family: Manrope, sans-serif;
    font-size: 11px;
    font-weight: 600;
    color: #0D1B2A;
    width: fit-content;
}

/* ============================================================================
   Cards — bordered containers with grey header
   ============================================================================ */
.aims-card {
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    overflow: hidden;
}

.aims-card-header {
    background: #F7F8FA;
    padding: 11px 20px;
    font-family: Manrope, sans-serif;
    font-size: 12px;
    font-weight: 700;
    color: #0D1B2A;
    letter-spacing: 0.3px;
}

/* Report title (Step 1) — wireframe node yvKYn: centered, 15px/700, #0D1B2A.
   Modifier on top of .aims-card-header so other card headers stay left-aligned. */
.aims-card-header.aims-report-title {
    text-align: center;
    font-size: 15px;
}

.aims-card-body {
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Optional descriptive subtitle rendered inside a wizard card header (wireframe
   "Card Subtitle": #64748B 12/normal light, #94A3B8 12/normal dark). Named
   distinctly to avoid colliding with the pre-existing .aims-card-subtitle
   (dashboard stat cards, line ~484). */
.aims-wizard-card-subtitle {
    display: block;
    margin-top: 2px;
    font-family: Manrope, sans-serif;
    font-size: 12px;
    font-weight: normal;
    color: #64748B;
    letter-spacing: 0;
}
[data-theme="dark"] .aims-wizard-card-subtitle { color: #94A3B8; }

/* ============================================================================
   Field Pairs — two-column read-only rows (450px per column)
   ============================================================================ */
.aims-field-row {
    display: flex;
    gap: 16px;
}

.aims-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 450px;
}

.aims-field-full {
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 100%;
}

/* STORY-114: stretch variant — field pairs share the row width equally (Step 1 header card) */
.aims-field-row-stretch .aims-field {
    width: auto;
    flex: 1 1 0;
    min-width: 0;
}

.aims-field-label {
    font-family: Manrope, sans-serif;
    font-size: 11px;
    font-weight: 500;
    color: #64748B;
}

.aims-field-value {
    border: 1px solid #E2E8F0;
    border-radius: 6px;
    padding: 9px 12px;
    min-height: 36px;
    display: flex;
    align-items: center;
    background: #F8FAFC;
    font-family: Manrope, sans-serif;
    font-size: 13px;
    color: #475569;
}

.aims-field-value-sm {
    height: 36px;
}

.aims-field-value-lg {
    min-height: 80px;
    align-items: flex-start;
}

/* ============================================================================
   Image Thumbnails
   ============================================================================ */
.aims-thumbnails {
    display: flex;
    gap: 10px;
}

.aims-thumb {
    width: 100px;
    height: 75px;
    border: 1px solid #E2E8F0;
    border-radius: 6px;
    background: #F1F5F9;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 4px;
    cursor: pointer;
    overflow: hidden;
}

.aims-thumb-icon {
    font-size: 24px;
}

.aims-thumb-name {
    font-family: Manrope, sans-serif;
    font-size: 9px;
    color: #94A3B8;
}

/* ============================================================================
   Spinner — inline loading indicator used by wizard Submit buttons.
   Referenced via animation:aims-spin in Step1/2/3 razor; the keyframes and
   base class live here so the spinners actually animate.
   ============================================================================ */
@keyframes aims-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
.aims-spinner-sm {
    box-sizing: border-box;
    vertical-align: middle;
}

/* ============================================================================
   Buttons
   ============================================================================ */
.aims-btn-teal {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 40px;
    padding: 9px 20px;
    border: none;
    border-radius: 6px;
    background: #4DD9C0;
    font-family: Manrope, sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #0D1B2A;
    cursor: pointer;
    white-space: nowrap;
}

.aims-btn-teal:hover { opacity: 0.9; }
.aims-btn-teal:disabled { opacity: 0.5; cursor: not-allowed; }

.aims-btn-outline {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 40px;
    padding: 9px 20px;
    border: 1px solid #E2E8F0;
    border-radius: 6px;
    background: #FFFFFF;
    font-family: Manrope, sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #475569;
    cursor: pointer;
    white-space: nowrap;
}

.aims-btn-outline:hover { background: #F8FAFC; }

/* ============================================================================
   Wizard Actions — bottom bar with buttons
   ============================================================================ */
.aims-wizard-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

.aims-wizard-actions-between {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

/* ── Wizard responsive ────────────────────────── */
@media (max-width: 900px) {
    .aims-stepper { padding: 16px 12px; }
    .aims-stepper-steps { gap: 0; }
    .aims-step-label { font-size: 10px; }
    .aims-step-connector { flex: 0 0 30px; }
    .aims-field-row { flex-direction: column; gap: 10px; }
    .aims-field-row .aims-field { width: 100%; }
    .aims-field-row-stretch .aims-field { flex: 0 0 auto; }
    .aims-card-body { padding: 12px 16px; }
    .aims-wizard-actions-between { flex-direction: column; gap: 10px; }
    .aims-wizard-actions-between > button,
    .aims-wizard-actions-between > div { width: 100%; justify-content: center; }
}
@media (max-width: 600px) {
    .aims-stepper { padding: 10px 8px; }
    .aims-step-circle { width: 28px; height: 28px; font-size: 12px; }
    .aims-step-label { font-size: 9px; white-space: normal; }
    .aims-step-connector { flex: 0 0 16px; }
    .aims-form-panel { padding: 12px; }
    .aims-card-header { padding: 8px 14px; font-size: 11px; }
    .aims-wizard-actions-between button { width: 100%; }
}

/* ============================================================================
   Info Note — blue callout (Step 3 voucher wireframe rbvOm/hhX4y)
   ============================================================================ */
.aims-info-note {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: #EFF6FF;
    border: 1px solid #BFDBFE;
    border-radius: 8px;
    padding: 12px 16px;
    font-family: Manrope, sans-serif;
    font-size: 12px;
    line-height: 1.5;
    color: #1E40AF;
}
.aims-info-note-icon { color: #3B82F6; flex-shrink: 0; }
[data-theme="dark"] .aims-info-note { background: #1E3A5F; border-color: #1E4D8C; color: #93C5FD; }
[data-theme="dark"] .aims-info-note-icon { color: #60A5FA; }

/* ============================================================================
   Error Banner
   ============================================================================ */
.aims-error-banner {
    background: #FEF2F2;
    border: 1px solid #FECACA;
    border-radius: 8px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: Manrope, sans-serif;
    font-size: 13px;
    color: #991B1B;
}

/* ============================================================================
   Search Input — wireframe-style input with icon
   ============================================================================ */
.aims-search-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 560px;
}

.aims-search-input-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid #E2E8F0;
    border-radius: 6px;
    padding: 9px 12px;
    height: 40px;
    background: #FFFFFF;
}

.aims-search-input-wrap input {
    flex: 1;
    border: none;
    outline: none;
    font-family: Manrope, sans-serif;
    font-size: 13px;
    color: #475569;
    background: transparent;
}

.aims-search-input-wrap input::placeholder {
    color: #94A3B8;
}

/* ============================================================================
   Vendor Table
   ============================================================================ */
.aims-vendor-table {
    display: flex;
    flex-direction: column;
}

.aims-vendor-table-header {
    display: flex;
    gap: 4px;
    align-items: center;
    height: 36px;
    padding: 0 12px;
    background: #F0F1F3;
}

[data-theme="dark"] .aims-vendor-table-header { background: #1E293B; }

.aims-vendor-table-row {
    display: flex;
    gap: 4px;
    align-items: center;
    height: 44px;
    padding: 0 12px;
}

.aims-vendor-table-row:nth-child(odd) { background: #FFFFFF; }
.aims-vendor-table-row:nth-child(even) { background: #F7F8FA; }

/* Dark theme — vendor-table rows follow the wireframe Step 1 dark palette
   (k0PK5B: header #1E293B, odd row #1A2332, even row #0F1923). The light
   rules above are hardcoded hexes with no theme override, so without these
   the rows stayed pure white in dark mode. */
[data-theme="dark"] .aims-vendor-table-row:nth-child(odd) { background: #1A2332; }
[data-theme="dark"] .aims-vendor-table-row:nth-child(even) { background: #0F1923; }

.aims-vendor-th {
    font-family: Manrope, sans-serif;
    font-size: 11px;
    font-weight: 600;
    color: #0D1B2A;
    flex-shrink: 0;
}

[data-theme="dark"] .aims-vendor-th { color: #E2E8F0; }

.aims-vendor-td {
    font-family: Manrope, sans-serif;
    font-size: 12px;
    color: #475569;
    flex-shrink: 0;
}


.aims-empty-icon {
    font-size: 36px;
    color: #A0AEC0;
}

.aims-empty-text {
    font-family: Manrope, sans-serif;
    font-size: 14px;
    color: #94A3B8;
}

/* ============================================================================
   Modal
   ============================================================================ */
.aims-modal-overlay {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.5); display: flex; align-items: center;
    justify-content: center; z-index: 9999;
}
.aims-modal {
    background: #FFFFFF; border-radius: 12px; width: 520px;
    max-height: 90vh; overflow-y: auto; box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}
.aims-modal-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 20px; height: 56px; background: #F8FAFC;
    border-bottom: 1px solid #E2E8F0; border-radius: 12px 12px 0 0;
}
.aims-modal-header h3 { font-family:Manrope,sans-serif;font-size:16px;font-weight:600;color:#0D1B2A;margin:0; }
.aims-modal-close { background:none;border:none;font-size:22px;color:#64748B;cursor:pointer; }
.aims-modal-body { padding: 20px; display: flex; flex-direction: column; gap: 16px; }
.aims-modal-footer {
    display: flex; justify-content: flex-end; gap: 12px; padding: 0 20px;
    height: 56px; align-items: center; background: #F8FAFC;
    border-top: 1px solid #E2E8F0; border-radius: 0 0 12px 12px;
}
[data-theme="dark"] .aims-stepper { background: var(--aims-surface-bg); }
[data-theme="dark"] .aims-form-panel { background: var(--aims-surface-bg); }
[data-theme="dark"] .aims-card { border-color: var(--aims-border-color); }
[data-theme="dark"] .aims-card-header { background: var(--aims-page-bg); color: var(--aims-text-primary); }
[data-theme="dark"] .aims-card-body { background: var(--aims-surface-bg); }
[data-theme="dark"] .aims-field-value { background: var(--aims-surface-bg); border-color: var(--aims-border-color); color: var(--aims-text-primary); }
[data-theme="dark"] .aims-field-label { color: var(--aims-text-secondary); }
[data-theme="dark"] .aims-badge-teal { background: #1A3A3A; }
[data-theme="dark"] .aims-btn-outline { background: var(--aims-surface-bg); border-color: #475569; color: var(--aims-text-primary); }
[data-theme="dark"] .aims-search-input-wrap { background: var(--aims-page-bg); border-color: var(--aims-border-color); }
[data-theme="dark"] .aims-search-input-wrap input { color: var(--aims-text-primary); }
[data-theme="dark"] .aims-error-banner { background: #451A1A; border-color: #7F1D1D; color: #FCA5A5; }
[data-theme="dark"] .aims-vendor-th { color: var(--aims-text-secondary); }
[data-theme="dark"] .aims-empty-icon { color: var(--aims-text-muted); }
[data-theme="dark"] .aims-empty-text { color: var(--aims-text-muted); }

/* ============================================================================
   STORY-091 — Dark Mode Wizard Inputs
   ============================================================================ */
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="date"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] textarea,
[data-theme="dark"] select {
    background: var(--aims-page-bg) !important;
    color: var(--aims-text-primary) !important;
    border-color: var(--aims-border-color) !important;
}
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
    color: var(--aims-text-muted) !important;
}
[data-theme="dark"] .rz-dropdown,
[data-theme="dark"] .rz-dropdown-trigger,
[data-theme="dark"] .rz-dropdown-panel {
    background: var(--aims-page-bg) !important;
    color: var(--aims-text-primary) !important;
    border-color: var(--aims-border-color) !important;
}
[data-theme="dark"] .rz-inputtext,
[data-theme="dark"] .rz-textarea,
[data-theme="dark"] .rz-datepicker-input {
    background: var(--aims-page-bg) !important;
    color: var(--aims-text-primary) !important;
    border-color: var(--aims-border-color) !important;
}
[data-theme="dark"] .rz-dropdown-items li {
    background: var(--aims-surface-bg);
    color: var(--aims-text-primary);
}
[data-theme="dark"] .rz-dropdown-items li:hover,
[data-theme="dark"] .rz-dropdown-items li.rz-state-highlight {
    background: var(--aims-border-color);
    color: #F1F5F9;
}

/* ============================================================================
   STORY-091 — Stepper Dark Mode Fixes
   ============================================================================ */
[data-theme="dark"] .aims-stepper { background: var(--aims-surface-bg); }
[data-theme="dark"] .aims-step-label.active { color: var(--aims-text-primary) !important; }
[data-theme="dark"] .aims-step-label.done { color: #16A34A !important; }
[data-theme="dark"] .aims-step-label.pending { color: #64748B !important; }
[data-theme="dark"] .aims-step-circle.active { background: #E2E8F0; color: #1A2332; }
[data-theme="dark"] .aims-step-circle.done { background: #16A34A; }
[data-theme="dark"] .aims-step-circle.pending { background: #1E293B; color: #64748B; }
[data-theme="dark"] .aims-step-circle.pending span { color: #64748B !important; }
[data-theme="dark"] .aims-step-connector { background: #E2E8F0; }
[data-theme="dark"] .aims-step-connector.done { background: #16A34A; }

[data-theme="dark"] .aims-form-panel h2 { color: var(--aims-text-primary) !important; }
[data-theme="dark"] .aims-form-panel p { color: var(--aims-text-secondary) !important; }
[data-theme="dark"] .aims-badge-teal span { color: var(--aims-teal) !important; }

/* ============================================================================
   STORY-091 — Vendor Dialog Modal Dark Mode (wireframe xmqdA)
   ============================================================================ */
[data-theme="dark"] .aims-modal,
[data-theme="dark"] .aims-modal-overlay > div {
    background: var(--aims-surface-bg) !important;
}
[data-theme="dark"] .aims-modal-header {
    background: var(--aims-surface-bg) !important;
    border-color: #2D3748 !important;
}
[data-theme="dark"] .aims-modal-header h3,
[data-theme="dark"] .aims-modal-header span {
    color: var(--aims-text-primary) !important;
}
[data-theme="dark"] .aims-modal-close,
[data-theme="dark"] .aims-modal-close span {
    background: var(--aims-navy) !important;
    border-color: #2D3748 !important;
    color: var(--aims-text-secondary) !important;
}
[data-theme="dark"] .aims-modal-body {
    background: var(--aims-surface-bg) !important;
}
[data-theme="dark"] .aims-modal-body label,
[data-theme="dark"] .aims-modal-body span {
    color: var(--aims-text-secondary) !important;
}
[data-theme="dark"] .aims-modal-body select {
    background: var(--aims-navy) !important;
    color: var(--aims-text-primary) !important;
    border-color: #4A5568 !important;
}
[data-theme="dark"] .aims-modal-footer {
    background: var(--aims-surface-bg) !important;
    border-color: #2D3748 !important;
}

/* ============================================================================
   STORY-091 — Vendor Dialog (replaces inline styles for dark mode support)
   ============================================================================ */
.aims-dialog { background: #FFFFFF; border: 1px solid #E2E8F0; }
.aims-dialog-titlebar { background: #F7F8FA; border-bottom: 1px solid #E2E8F0; }
.aims-dialog-title { color: #0D1B2A; }
.aims-dialog-close { background: #FFFFFF; border: 1px solid #E2E8F0; }
.aims-dialog-close span { color: #64748B; }
.aims-dialog-label { color: #64748B; }
.aims-dialog-input { background: #FFFFFF; border: 1px solid #E2E8F0; color: #475569; }

/* Validation error state — must beat the dark-theme border-color !important overrides
   ([data-theme="dark"] input[type="number"/"date"], textarea, select = specificity 0,2,1).
   input.aims-input-error (0,2,2 in dark) wins. */
input.aims-input-error,
[data-theme="dark"] input.aims-input-error {
    border-color: #EF4444 !important;
}
.aims-dialog-select { background: #FFFFFF; border: 1px solid #E2E8F0; color: #475569; }
.aims-dialog-vendorinfo { background: #FAFBFC; border: 1px solid #E2E8F0; }
.aims-dialog-vendorinfo .aims-dialog-label { color: #64748B; }
.aims-dialog-upload { background: #F7F8FA; border: 2px solid #E2E8F0; }
.aims-dialog-footer { background: #FAFBFC; border-top: 1px solid #E2E8F0; }
.aims-dialog-cancel { background: #FFFFFF; border: 1px solid #E2E8F0; color: #64748B; }
.aims-dialog-save { background: #4DD9C0; color: #0D1B2A; }

/* Dark Mode */
[data-theme="dark"] .aims-dialog { background: var(--aims-surface-bg); border-color: #2D3748; }
[data-theme="dark"] .aims-dialog-titlebar { background: var(--aims-surface-bg); border-color: #2D3748; }
[data-theme="dark"] .aims-dialog-title { color: var(--aims-text-primary); }
[data-theme="dark"] .aims-dialog-close { background: var(--aims-navy); border-color: #2D3748; }
[data-theme="dark"] .aims-dialog-close span { color: var(--aims-text-secondary); }
[data-theme="dark"] .aims-dialog-label { color: var(--aims-text-secondary); }
[data-theme="dark"] .aims-dialog-input { background: var(--aims-navy); border-color: #4A5568; color: var(--aims-text-primary); }
[data-theme="dark"] .aims-dialog-select { background: var(--aims-navy); border-color: #4A5568; color: var(--aims-text-primary); }
[data-theme="dark"] .aims-dialog-vendorinfo { background: var(--aims-navy); border-color: #2D3748; }
[data-theme="dark"] .aims-dialog-vendorinfo .aims-dialog-label { color: #718096; }
[data-theme="dark"] .aims-dialog-upload { background: var(--aims-navy); border-color: #2D3748; }
[data-theme="dark"] .aims-dialog-footer { background: var(--aims-surface-bg); border-color: #2D3748; }
[data-theme="dark"] .aims-dialog-cancel { background: var(--aims-navy); border-color: #2D3748; color: var(--aims-text-secondary); }
[data-theme="dark"] .aims-dialog-save { background: var(--aims-teal); color: var(--aims-navy); }

.aims-btn-teal-outline {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 40px;
    padding: 9px 20px;
    border: 1px solid var(--aims-teal);
    border-radius: 6px;
    background: transparent;
    font-family: Manrope, sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: var(--aims-teal);
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s ease;
}
.aims-btn-teal-outline:hover { background: rgba(77, 217, 192, 0.12); }
.aims-btn-teal-outline:disabled { opacity: 0.5; cursor: not-allowed; }

/* --- Vendor Table Row Styling (wireframe qeFbf) --- */
.aims-vendor-td { color: var(--aims-text-primary); }
.aims-vendor-th { color: var(--aims-text-secondary); }
[data-theme="dark"] .aims-vendor-td { color: #E2E8F0; }
[data-theme="dark"] .aims-vendor-table-row { border-color: var(--aims-border-color); }

.aims-empty-state { align-items: center; text-align: center; }

.aims-badge-priority {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    background: #FEE2E2;
    color: #991B1B;
}

[data-theme="dark"] .aims-badge-priority {
    background: #450a0a;
    color: #f87171;
}

.aims-badge-action-status {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    background: #DBEAFE;
    color: #1E40AF;
}

[data-theme="dark"] .aims-badge-action-status {
    background: #1e3a5f;
    color: #93c5fd;
}

.aims-badge-corrective {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    background: #FEF3C7;
    color: #92400E;
}

[data-theme="dark"] .aims-badge-corrective {
    background: #451a03;
    color: #fbbf24;
}

.aims-badge-preventive {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    background: #DBEAFE;
    color: #1E40AF;
}

[data-theme="dark"] .aims-badge-preventive {
    background: #1e3a5f;
    color: #93c5fd;
}

/* ───────────────────────────────────────────────────────────────
   RadzenDataGrid — match aims-vendor-table aesthetic via CSS variables
   Base class: drop on any wrapper <div> around a RadzenDataGrid.
   Add a layout modifier class (e.g. .aims-base-grid-assets) for
   per-column center/left alignment when needed.
   ─────────────────────────────────────────────────────────────── */
.aims-base-grid {
    --rz-grid-background-color: #FFFFFF;
    --rz-grid-header-background-color: #F0F1F3;
    --rz-grid-header-color: #0D1B2A;
    --rz-grid-header-font-size: 11px;
    --rz-grid-header-font-weight: 600;
    --rz-grid-header-cell-padding: 2px 6px;
    --rz-grid-header-padding: 0;
    --rz-grid-cell-color: #475569;
    --rz-grid-cell-font-size: 12px;
    --rz-grid-cell-line-height: 1.4;
    --rz-grid-cell-padding: 13px 6px;
    --rz-grid-header-title-padding-inline: 0;
    --rz-grid-header-cell-border-bottom: 1px solid #E2E8F0;
    --rz-grid-bottom-cell-border: 1px solid #F1F5F9;
    font-family: Manrope, sans-serif;
}

/* ── Default data grid — compact cell/header font (9px) ── */
.aims-default-grid {
    --rz-grid-cell-font-size: 12px;
    --rz-grid-header-font-size: 12px;
    --rz-grid-cell-padding: 6px 4px;
    --rz-grid-header-cell-padding: 1px 4px;
}
    --rz-grid-background-color: #FFFFFF;
    --rz-grid-header-background-color: #F0F1F3;
    --rz-grid-header-color: #0D1B2A;
    --rz-grid-header-font-size: 11px;
    --rz-grid-header-font-weight: 600;
    --rz-grid-header-cell-padding: 2px 6px;
    --rz-grid-header-padding: 0;
    --rz-grid-cell-color: #475569;
    --rz-grid-cell-font-size: 12px;
    --rz-grid-cell-line-height: 1.4;
    --rz-grid-cell-padding: 13px 6px;
    --rz-grid-header-title-padding-inline: 0;
    --rz-grid-header-cell-border-bottom: 1px solid #E2E8F0;
    --rz-grid-bottom-cell-border: 1px solid #F1F5F9;
    font-family: Manrope, sans-serif;
}
.aims-base-grid .rz-datatable-thead th,
.aims-base-grid .rz-datatable-thead th .rz-cell-data {
    font-family: Manrope, sans-serif !important;
    padding: 2px 6px !important;
}
.aims-base-grid .rz-datatable-data td,
.aims-base-grid .rz-datatable-data td .rz-cell-data {
    padding: 13px 6px !important;
}
/* even rows slightly darker in light mode */
.aims-base-grid .rz-grid-table-striped tbody > tr:nth-child(even) > td {
    background-color: #F7F8FA !important;
}

[data-theme="dark"] .aims-base-grid {
    --rz-grid-background-color: #1A2332;
    --rz-grid-header-background-color: #0F1923;
    --rz-grid-header-color: #A0AEC0;
    --rz-grid-cell-color: #E2E8F0;
    --rz-grid-header-cell-border-bottom: 1px solid #2D3748;
    --rz-grid-bottom-cell-border: 1px solid #2D3748;
}
[data-theme="dark"] .aims-base-grid .rz-grid-table-striped tbody > tr:nth-child(even) > td {
    background-color: #162230 !important;
}

/* Print styles — hide chrome on acknowledge print (STORY-098) */
@media print {
    .aims-sidebar,
    .aims-header,
    .aims-wizard-actions-between,
    .aims-stepper {
        display: none !important;
    }

    .aims-wizard > .aims-form-panel {
        display: none !important;
    }

    .print-ack-full {
        display: block !important;
        color: #000000 !important;
    }

    .print-ack-full * {
        color: #000000 !important;
    }

    .print-ack-full table td {
        padding: 4px 8px;
        font-size: 12px;
    }

    body,
    .aims-wizard,
    .aims-form-panel,
    .aims-card {
        margin: 0 !important;
        padding: 0 !important;
        box-shadow: none !important;
        border: none !important;
    }
}

@media screen {
    .print-ack-full {
        display: none !important;
    }
}