:root{--returned:#f8e199;--rejected:#f89c8d;--completed:#62e5a7;--bg:#f6f7f9;--card:#fff;--text:#18202a;--muted:#64748b;--line:#d9e0e8;--primary:#2563eb;--danger:#b91c1c;--soft:#eef4ff}*{box-sizing:border-box}body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:var(--bg);color:var(--text)}a{color:var(--primary);text-decoration:none}.topbar{margin-top:10px;border-radius: 10px;display:flex;align-items:center;gap:22px;padding:14px 22px;background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5}.brand a{font-weight:800;color:var(--text)}nav{display:flex;gap:14px;flex:1}.logout{margin-left:auto}.logout button{background:#f1f5f9;color:#334155}.container{max-width:1120px;margin:28px auto;padding:0 18px}.card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:20px;margin:16px 0;box-shadow:0 8px 26px rgba(15,23,42,.05)}.narrow{max-width:520px;margin:60px auto}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}.row{display:flex;align-items:center;justify-content:space-between;gap:16px}.action{color:var(--text)}h1{font-size:32px;margin:0 0 18px}h2{font-size:20px;margin:0 0 8px}.muted,.hint{color:var(--muted)}label{display:block;font-weight:650;margin:14px 0 6px}input,select,textarea{width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:12px;background:#fff;font:inherit}select[multiple]{min-height:130px}textarea{min-height:110px}.codearea{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;min-height:520px}button,.button{display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:12px;padding:10px 14px;background:#e2e8f0;color:#0f172a;font-weight:700;cursor:pointer}.primary{background:var(--primary);color:#fff}.danger{background:var(--danger);color:#fff}.buttonrow{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}.field{margin-bottom:14px}.required{color:var(--danger)}.pill{display:inline-flex;background:var(--soft);color:#1e40af;border:1px solid #bfdbfe;border-radius:99px;padding:3px 10px;font-size:13px}.timeline-item{padding:10px 0;border-bottom:1px solid var(--line)}.alert{background:#fff1f2;color:#991b1b;border:1px solid #fecdd3;padding:12px;border-radius:12px;margin-bottom:12px}.signature-box{border:2px dashed #93c5fd;background:#eff6ff;border-radius:16px;padding:16px;margin:16px 0}canvas{width:100%;max-width:620px;height:180px;background:#fff;border:1px solid var(--line);border-radius:12px;touch-action:none}.hidden{display:none!important}.checkline{display:flex;align-items:center;gap:8px;font-weight:500}.checkline input{width:auto}#signaturePreview{text-align:center}#signaturePreview img{max-width:100%;border:1px solid #ccc;box-shadow:0 0 6px rgba(0,128,0,.4);background:#fff}.readonly-value{background:#f8fafc;border:1px solid var(--line);border-radius:12px;padding:10px 12px}.redacted-value{display:inline-block;background:#111;color:#111;border-radius:6px;padding:6px 18px;user-select:none}.repeater-field{border:1px solid var(--line);border-radius:16px;padding:14px;background:#fbfdff}.repeater-controls{display:flex;gap:10px;align-items:end;flex-wrap:wrap}.repeater-controls select{max-width:360px}.repeater-item{background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px;margin:12px 0}.repeater-item-head{display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid var(--line);padding-bottom:8px;margin-bottom:10px}.readonly-block{background:#fff}.readonly-line{margin:6px 0}@media(max-width:720px){.topbar{flex-wrap:wrap}.row{align-items:flex-start;flex-direction:column}nav{order:3;width:100%;overflow:auto}.container{margin-top:18px}.repeater-controls{display:block}.repeater-controls select{max-width:none;margin-bottom:8px}}
/* --- Base Desktop Styles --- */
.topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background-color: #ffffff;
    border-bottom: 1px solid #e2e8f0;
    position: relative;
}

.brand a {
    font-size: 20px;
    font-weight: bold;
    color: #0f4a7e;
    text-decoration: none;
}

.nav-container {
    display: flex;
    align-items: center;
    gap: 20px;
}

.nav-container nav {
    display: flex;
    gap: 15px;
}

.nav-container nav a {
    color: #0f4a7e;
    text-decoration: none;
    font-weight: 500;
}

.nav-container nav a:hover {
    text-decoration: underline;
}

.logout-btn {
    background: none;
    border: 1px solid #e2e8f0;
    padding: 6px 12px;
    border-radius: 4px;
    color: #475569;
    cursor: pointer;
}

.mobile-toggle {
    display: none;
    background: none;
    border: none;
    color: #0f4a7e;
    cursor: pointer;
    padding: 5px;
}

/* --- Mobile Breakpoint (768px and below) --- */
@media (max-width: 768px) {
    .mobile-toggle {
        display: block; /* Show the hamburger */
    }

    .nav-container {
        display: none; /* Hide standard layout */
        flex-direction: column;
        align-items: flex-start;
        position: absolute;
        top: 100%; /* Drop right below the topbar */
        left: 0;
        width: 100%;
        background-color: #ffffff;
        padding: 15px 20px;
        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        border-top: 1px solid #e2e8f0;
        z-index: 1000;
    }

    /* Class toggled by JavaScript */
    .nav-container.active {
        display: flex;
    }

    .nav-container nav {
        flex-direction: column;
        width: 100%;
        gap: 15px;
        margin-bottom: 15px;
    }

    .logout {
        width: 100%;
    }

    .logout-btn {
        width: 100%;
        text-align: left;
        padding: 10px;
    }
}
/* --- Searchable Pill Multiselect --- */
.ms-wrapper {
    position: relative;
    width: 100%;
    margin-top: 5px;
}

.ms-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    padding: 6px 8px;
    background: #ffffff;
    min-height: 42px;
    cursor: text;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.ms-container:focus-within {
    border-color: #0f4a7e;
    box-shadow: 0 0 0 3px rgba(15, 74, 126, 0.1);
}

.ms-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.ms-pill {
    background-color: #e0f2fe;
    color: #075985;
    padding: 4px 10px;
    border-radius: 16px;
    font-size: 13px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
    border: 1px solid #bae6fd;
}

.ms-pill-close {
    cursor: pointer;
    font-weight: bold;
    color: #0284c7;
    font-size: 16px;
    line-height: 1;
}

.ms-pill-close:hover {
    color: #dc2626; /* Turn red on hover */
}

.ms-search {
    border: none !important;
    outline: none !important;
    flex: 1;
    min-width: 120px;
    padding: 4px 6px;
    font-size: 14px;
    background: transparent;
    box-shadow: none !important;
    margin: 0 !important;
}

.ms-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin: 4px 0 0 0;
    padding: 0;
    list-style: none;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1);
    max-height: 220px;
    overflow-y: auto;
    z-index: 50;
    display: none;
}

.ms-dropdown li {
    padding: 10px 15px;
    cursor: pointer;
    font-size: 14px;
    color: #334155;
    border-bottom: 1px solid #f1f5f9;
}

.ms-dropdown li:last-child {
    border-bottom: none;
}

.ms-dropdown li:hover {
    background-color: #f8fafc;
    color: #0f4a7e;
    font-weight: 500;
}
/* --- Drag and Drop Visual Indicators --- */
.drag-over-top {
    border-top: 3px solid var(--primary, #2563eb) !important;
}

.drag-over-bottom {
    border-bottom: 3px solid var(--primary, #2563eb) !important;
}

.canvas-field.dragging, .sub-field-item.dragging {
    opacity: 0.4;
    border: 2px dashed #cbd5e1 !important;
}

html {
	width:calc(100vw - 20px);
	margin-inline:auto;
	scrollbar-gutter: stable;
	overflow-y: scroll;
}

/* --- Approvals UI Styles --- */
.meta-card { background: #f8fafc; border: 1px solid var(--line); border-radius: 8px; padding: 16px; margin-bottom: 24px; display: flex; gap: 24px; flex-wrap: wrap; }
.meta-item { display: flex; flex-direction: column; gap: 4px; }
.meta-label { font-size: 11px; text-transform: uppercase; color: var(--muted); font-weight: 600; letter-spacing: 0.5px; }
.meta-value { font-size: 14px; color: var(--text); font-weight: 500; }
.status-highlight { color: #0369a1; font-weight: 600; }

.readonly-card h3 { margin-top: 0; margin-bottom: 20px; border-bottom: 1px solid var(--line); padding-bottom: 10px; }

.action-panel { border: 2px solid var(--primary); border-radius: 8px; overflow: hidden; margin-top: 40px; box-shadow: 0 10px 15px -3px rgba(3, 105, 161, 0.1); }
.action-header { background: #f0f9ff; padding: 16px 20px; border-bottom: 1px solid #bae6fd; display: flex; align-items: center; gap: 10px; }
.action-header h3 { margin: 0; color: #0369a1; font-size: 18px; }
.action-body { padding: 24px; background: #fff; }

.attestation-box { background: #f8fafc; padding: 16px; border-radius: 6px; border: 1px solid var(--line); margin-top: 20px; }
.attestation-box strong { display: block; margin-bottom: 4px; color: var(--text); }
.attestation-box .muted { font-size: 14px; line-height: 1.5; }
.attestation-box input[type="checkbox"] { margin-top: 4px; }
.attestation-box .checkline { align-items: flex-start; margin: 0; }

.canvas-wrapper { border: 1px solid var(--line); border-radius: 6px; background: #f8fafc; width: fit-content; overflow: hidden; margin-bottom: 12px; }
.canvas-wrapper canvas { touch-action: none; cursor: crosshair; display: block; background: #fff; margin: 0; border: none; }

.sig-controls { margin-bottom: 16px; }
.typed-wrap { background: #f8fafc; padding: 16px; border: 1px solid var(--line); border-radius: 6px; margin-bottom: 16px; max-width: 620px; }
.typed-input-row { display: flex; gap: 8px; margin-top: 8px; }
.typed-input-row input { flex-grow: 1; }
.signature-preview { background: #f8fafc; padding: 16px; border: 1px solid var(--line); border-radius: 6px; margin-bottom: 16px; max-width: 620px; text-align: center; }
.signature-preview img { max-width: 100%; border: 1px solid var(--line); background: #fff; border-radius: 4px; }

.action-divider { border: 0; border-top: 1px solid var(--line); margin: 30px 0 20px 0; }
.action-buttons { display: flex; gap: 12px; justify-content: flex-end; flex-wrap: wrap; }

/* Ghost & Outline Button Modifiers */
.ghost-btn { background: transparent; border: 1px solid var(--line); }
.danger-outline { background: transparent; color: var(--danger); border: 1px solid var(--danger); }
.warning-outline { background: #fffbeb; color: #92400e; border: 1px solid #fcd34d; }
.approve-btn { padding: 10px 24px; font-size: 16px; }

.pill.completed {
	background:var(--completed);
}
.pill.rejected {
	background:var(--rejected);
}
.pill.returned_for_changes {
	background:var(--returned);
}

/* Form layout grid — col_span on fields and fieldsets */
.form-layout-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: min-content;
    gap: 16px;
    align-items: start;
    align-content: start;
}

.form-layout-item.layout-span-full { grid-column: span 12; }
.form-layout-item.layout-span-half { grid-column: span 6; }
.form-layout-item.layout-span-third { grid-column: span 4; }
.form-layout-item.layout-span-two_thirds { grid-column: span 8; }

.form-layout-item.layout-valign-bottom {
    align-self: end;
}

.fieldset-group.form-layout-item {
    margin-bottom: 0;
}

.fieldset-inner-grid,
.stack-inner-grid {
    display: grid;
    gap: 14px;
    align-items: start;
}

.stack-inner-grid {
    gap: 10px;
}

.fieldset-inner-grid.fieldset-cols-1,
.stack-inner-grid.stack-cols-1 { grid-template-columns: 1fr; }
.fieldset-inner-grid.fieldset-cols-2,
.stack-inner-grid.stack-cols-2 { grid-template-columns: repeat(2, 1fr); }
.fieldset-inner-grid.fieldset-cols-3,
.stack-inner-grid.stack-cols-3 { grid-template-columns: repeat(3, 1fr); }

.fieldset-inner-grid.fieldset-align-left,
.stack-inner-grid.stack-align-left { text-align: left; }
.fieldset-inner-grid.fieldset-align-center,
.stack-inner-grid.stack-align-center { text-align: center; }
.fieldset-inner-grid.fieldset-align-right,
.stack-inner-grid.stack-align-right { text-align: right; }

.fieldset-inner-grid .field,
.stack-inner-grid .field {
    margin-bottom: 0;
}

.stack-inner-grid .static-text-field {
    margin-bottom: 0;
}

.stack-group-title {
    display: block;
    font-weight: 650;
    margin: 0 0 4px;
}

.stack-group-help {
    margin-top: 0;
    margin-bottom: 8px;
}

.form-layout-grid .static-text-field {
    align-self: start;
}

.form-layout-item > .field,
.fieldset-inner-grid > .field {
    margin-bottom: 0;
}

.readonly-empty-placeholder {
    visibility: hidden;
    pointer-events: none;
    margin: 0;
}

.readonly-empty-slot {
    min-height: 3.25rem;
}

    .nav-tabs { display: flex; gap: 8px; border-bottom: 2px solid var(--line); margin-bottom: 24px; overflow-x: auto; white-space: nowrap; }
    .nav-tabs a { text-decoration: none; padding: 10px 16px; color: var(--muted); font-weight: 500; border-bottom: 2px solid transparent; margin-bottom: 0; transition: all 0.2s; border-radius: 6px 6px 0 0; }
    .nav-tabs a:hover { background: #e8eaec; color: var(--text); }
    .badge { display: inline-block; padding: 2px 8px; border-radius: 12px; font-size: 11px; font-weight: bold; margin-left: 6px; background: #e2e8f0; color: #475569; }

    .nav-tabs a[data-tab="active"].active { color: var(--primary); border-bottom-color: var(--primary); background: var(--soft); }
    .nav-tabs a[data-tab="active"] .badge { background: #dbeafe; color: var(--primary); }
    .nav-tabs a[data-tab="active"].active .badge { background: var(--primary); color: #fff; }

    .nav-tabs a[data-tab="returned"].active { color: #854d0e; border-bottom-color: #ca8a04; background: #fef9c3; }
    .nav-tabs a[data-tab="returned"] .badge { background: var(--returned); color: #854d0e; }
    .nav-tabs a[data-tab="returned"].active .badge { background: #ca8a04; color: #fff; }

    .nav-tabs a[data-tab="completed"].active { color: #14532d; border-bottom-color: #16a34a; background: #ecfdf5; }
    .nav-tabs a[data-tab="completed"] .badge { background: var(--completed); color: #14532d; }
    .nav-tabs a[data-tab="completed"].active .badge { background: #16a34a; color: #fff; }

    .nav-tabs a[data-tab="rejected"].active { color: #7f1d1d; border-bottom-color: var(--danger); background: #fef2f2; }
    .nav-tabs a[data-tab="rejected"] .badge { background: var(--rejected); color: #7f1d1d; }
    .nav-tabs a[data-tab="rejected"].active .badge { background: var(--danger); color: #fff; }
	
@media (max-width: 768px) {
    .form-layout-item.layout-span-half,
    .form-layout-item.layout-span-third,
    .form-layout-item.layout-span-two_thirds {
        grid-column: span 12;
    }

    .fieldset-inner-grid.fieldset-cols-2,
    .fieldset-inner-grid.fieldset-cols-3,
    .stack-inner-grid.stack-cols-2,
    .stack-inner-grid.stack-cols-3 {
        grid-template-columns: 1fr;
    }
}

/* Admin CRUD pages (users, roles) — fit grid below sticky nav without page scroll */
.admin-crud-shell {
    display: flex;
    flex-direction: column;
    height: calc(100dvh - 120px);
    min-height: 360px;
}
.admin-crud-shell-header {
    flex-shrink: 0;
    margin-bottom: 10px;
}
.admin-crud-shell-header h1 {
    margin: 0 0 2px;
    font-size: 1.45rem;
    line-height: 1.2;
}
.admin-crud-shell-header p {
    margin: 0;
    font-size: 13px;
    line-height: 1.35;
}
.admin-crud-shell-body {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 14px;
    align-items: stretch;
}

.roles-table {
    width: 100%;
}
.roles-table .col-level {
    width: 4.5rem;
    white-space: nowrap;
    text-align: center;
}
.roles-table tbody td.col-level {
    text-align: center;
}
.roles-table .role-row {
    cursor: pointer;
    transition: background 0.1s;
}
.roles-table .role-row:hover {
    background: #f8fafc;
}
.roles-table .role-desc {
    display: block;
    margin-top: 3px;
    font-size: 11px;
    line-height: 1.35;
    color: var(--muted);
}
.roles-table .role-key-pill {
    display: inline-block;
    max-width: 100%;
    font-family: monospace;
    font-size: 11px;
    white-space: nowrap;
}
.admin-crud-pane.card {
    margin: 0;
    padding: 0;
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.admin-crud-toolbar {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    padding: 10px 12px;
    border-bottom: 1px solid var(--line);
    background: #fff;
}
.admin-crud-tab-toggle {
    display: inline-flex;
    gap: 6px;
    background: #f1f5f9;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 4px;
}
.admin-crud-tab-toggle .button {
    padding: 6px 12px;
}
.admin-crud-tab-toggle .button:not(.primary) {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
}
.admin-crud-tab-toggle .badge {
    font-size: 11px;
    padding: 1px 6px;
    border-radius: 999px;
    margin-left: 4px;
}
.admin-crud-tab-toggle .button.primary .badge {
    background: #fff;
}
.admin-crud-tab-toggle .button:not(.primary) .badge {
    background: #e2e8f0;
}
.admin-crud-scroll {
    flex: 1;
    min-height: 0;
    overflow: auto;
}
.admin-crud-scroll table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #f8fafc;
    box-shadow: 0 1px 0 var(--line);
}
.admin-crud-edit-panel {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    overflow: hidden;
}
.admin-crud-edit-empty {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
    color: var(--muted);
    text-align: center;
    font-size: 14px;
}
.admin-crud-edit-empty-copy {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    max-width: 220px;
    line-height: 1.45;
}
.admin-crud-edit-empty-action {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
}
.admin-crud-edit-empty-action .button {
    padding: 6px 12px;
    font-size: 13px;
}

.admin-crud-edit-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}
.admin-crud-edit-header {
    flex-shrink: 0;
    padding: 10px 12px 8px;
    border-bottom: 1px solid var(--line);
}
.admin-crud-edit-header h3 {
    margin: 0 0 2px;
    font-size: 1rem;
}
.admin-crud-edit-header p {
    margin: 0;
    font-size: 12px;
}
.admin-crud-edit-actions {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 8px 12px;
    border-bottom: 1px solid var(--line);
    background: #f8fafc;
}
.admin-crud-edit-actions .button {
    flex: 0 0 auto;
    padding: 7px 14px;
    font-size: 13px;
    white-space: nowrap;
}
.admin-crud-form-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 12px;
}
.admin-crud-checklist {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.admin-crud-checklist label {
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: 6px;
    font-size: 13px;
}
.admin-crud-scroll th,
.admin-crud-scroll td {
    padding: 10px 12px;
}
.system-role-pill {
    display: inline-block;
    margin-left: 6px;
    background: #ede9fe;
    color: #5b21b6;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 999px;
    letter-spacing: 0.03em;
    vertical-align: middle;
}
@media (max-width: 960px) {
    .admin-crud-shell {
        height: auto;
        min-height: 0;
    }
    .admin-crud-shell-body {
        grid-template-columns: 1fr;
    }
    .admin-crud-pane.card {
        max-height: 45vh;
    }
    .admin-crud-edit-panel.card {
        max-height: 50vh;
    }
}
/* =============================================================================
   AppModal — shared alert / confirm dialogs
   ============================================================================= */
body.app-modal-open {
    overflow: hidden;
}
.app-modal-root {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10050;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.app-modal-root.is-open {
    display: flex;
}
.app-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.48);
    backdrop-filter: blur(2px);
}
.app-modal {
    position: relative;
    width: 100%;
    max-width: 420px;
    background: var(--card, #fff);
    border: 1px solid var(--line, #d9e0e8);
    border-radius: 16px;
    padding: 24px 24px 20px;
    box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.28);
    animation: app-modal-in 0.16s ease-out;
}
@keyframes app-modal-in {
    from { opacity: 0; transform: translateY(8px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
.app-modal-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    margin-bottom: 14px;
    background: #eff6ff;
}
.app-modal-root.variant-warning .app-modal-icon { background: #fffbeb; }
.app-modal-root.variant-danger .app-modal-icon { background: #fef2f2; }
.app-modal-root.variant-success .app-modal-icon { background: #ecfdf5; }
.app-modal-root.variant-info .app-modal-icon { background: #eff6ff; }
.app-modal-title {
    margin: 0 0 8px;
    font-size: 18px;
    font-weight: 700;
    color: var(--text, #18202a);
    line-height: 1.3;
}
.app-modal-message {
    margin: 0 0 20px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--muted, #64748b);
    white-space: pre-wrap;
}
.app-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}
.app-modal-actions .button {
    min-width: 96px;
}
.app-modal-ok.danger {
    background: var(--danger, #b91c1c);
    color: #fff;
}
.app-modal-cancel {
    background: #f1f5f9;
    color: #334155;
}

/* --- Layout shell (brand, flash, nav badge) --- */
.brand-link {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
.brand-logo {
  width: 28px;
  height: 28px;
  display: block;
}
.nav-approvals {
  display: flex;
  align-items: center;
  gap: 6px;
}
.nav-badge {
  background: var(--danger);
  color: #fff;
  padding: 2px 6px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: bold;
  line-height: 1;
}
.alert-banner {
  padding: 12px 16px;
  border-radius: 6px;
  margin-bottom: 20px;
  font-weight: 500;
  border: 1px solid transparent;
}
.alert-banner--success {
  background: #dcfce7;
  color: #166534;
  border-color: #bbf7d0;
}
.alert-banner--error {
  background: #fee2e2;
  color: #991b1b;
  border-color: #fecaca;
}