/* ============================================================
   UI Design System — Components
   Cards, buttons, alerts, badges, modals, widgets,
   tables, forms, toasts
   v1.0 | lib.myoasishealth.ca/v1/css/ui-components.css
   ============================================================ */

/* ============================================================
   CARDS
   ============================================================ */
.ui-card {
    background: var(--ui-surface-2);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-lg);
    box-shadow: var(--ui-shadow-sm);
    overflow: hidden;
}

.ui-card__header {
    padding: var(--ui-spacing-md) var(--ui-spacing-lg);
    border-bottom: 1px solid var(--ui-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ui-spacing-sm);
}

.ui-card__title {
    font-size: var(--ui-text-base);
    font-weight: 600;
    margin: 0;
    color: var(--ui-body-text);
}

.ui-card__subtitle {
    font-size: var(--ui-text-xs);
    color: var(--ui-text-muted);
    margin: 0.125rem 0 0;
}

.ui-card__actions {
    display: flex;
    align-items: center;
    gap: var(--ui-spacing-xs);
    flex-shrink: 0;
    margin-left: auto;
}

.ui-card__body {
    padding: var(--ui-spacing-lg);
}

.ui-card__footer {
    padding: var(--ui-spacing-sm) var(--ui-spacing-lg);
    border-top: 1px solid var(--ui-border);
    background: var(--ui-surface-1);
    font-size: var(--ui-text-sm);
    color: var(--ui-text-muted);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* ---- Statistics card ---- */
.ui-card--stat {
    position: relative;
    overflow: hidden;
}

.ui-card--stat .ui-card__body {
    padding: var(--ui-spacing-lg);
    display: flex;
    flex-direction: column;
    gap: var(--ui-spacing-xs);
}

.ui-card__stat-label {
    font-size: var(--ui-text-xs);
    font-weight: 600;
    color: var(--ui-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.ui-card__stat-value {
    font-size: var(--ui-h2);
    font-weight: 700;
    line-height: 1;
    color: var(--ui-body-text);
}

.ui-card__stat-change {
    font-size: var(--ui-text-xs);
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 0.2em;
}

.ui-card__stat-change--up   { color: var(--ui-success); }
.ui-card__stat-change--down { color: var(--ui-danger); }
.ui-card__stat-change--flat { color: var(--ui-text-muted); }

.ui-card__stat-icon {
    position: absolute;
    right: var(--ui-spacing-lg);
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    border-radius: var(--ui-radius-lg);
    background: var(--ui-primary-light);
    color: var(--ui-primary);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ---- Metric card ---- */
.ui-card--metric .ui-card__body {
    display: flex;
    align-items: center;
    gap: var(--ui-spacing-md);
}

.ui-card__metric-icon {
    width: 56px;
    height: 56px;
    border-radius: var(--ui-radius-lg);
    background: var(--ui-primary-light);
    color: var(--ui-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* ---- Action card ---- */
.ui-card--action {
    cursor: pointer;
    transition: box-shadow 0.15s, transform 0.15s;
}

.ui-card--action:hover {
    box-shadow: var(--ui-shadow-md);
    transform: translateY(-2px);
}

/* ---- Summary card (colored left border) ---- */
.ui-card--summary {
    border-left: 4px solid var(--ui-primary);
}

/* Stats grid */
.ui-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--ui-spacing-md);
}

/* ============================================================
   BUTTONS
   ============================================================ */
.ui-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ui-spacing-xs);
    padding: 0.5rem var(--ui-spacing-md);
    font-family: var(--ui-font-family);
    font-size: var(--ui-text-sm);
    font-weight: 500;
    line-height: 1.5;
    border-radius: var(--ui-radius-md);
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s, box-shadow 0.15s, opacity 0.15s;
    white-space: nowrap;
    user-select: none;
    vertical-align: middle;
}

.ui-btn:focus-visible {
    outline: 2px solid var(--ui-primary);
    outline-offset: 2px;
}

/* Variants */
.ui-btn--primary   { background: var(--ui-primary);   border-color: var(--ui-primary);   color: #fff; }
.ui-btn--primary:hover  { background: var(--ui-primary-hover); border-color: var(--ui-primary-hover); color: #fff; }

.ui-btn--secondary { background: var(--ui-secondary); border-color: var(--ui-secondary); color: #fff; }
.ui-btn--secondary:hover { background: #5a6268; border-color: #5a6268; color: #fff; }

.ui-btn--success   { background: var(--ui-success);   border-color: var(--ui-success);   color: #fff; }
.ui-btn--success:hover  { background: #157347; border-color: #157347; color: #fff; }

.ui-btn--warning   { background: var(--ui-warning);   border-color: var(--ui-warning);   color: #000; }
.ui-btn--warning:hover  { background: #e0a800; border-color: #e0a800; color: #000; }

.ui-btn--danger    { background: var(--ui-danger);    border-color: var(--ui-danger);    color: #fff; }
.ui-btn--danger:hover   { background: #bb2d3b; border-color: #bb2d3b; color: #fff; }

/* Outline variants */
.ui-btn--outline-primary { background: transparent; border-color: var(--ui-primary); color: var(--ui-primary); }
.ui-btn--outline-primary:hover { background: var(--ui-primary); color: #fff; }

.ui-btn--outline-secondary { background: transparent; border-color: var(--ui-secondary); color: var(--ui-secondary); }
.ui-btn--outline-secondary:hover { background: var(--ui-secondary); color: #fff; }

.ui-btn--outline-danger { background: transparent; border-color: var(--ui-danger); color: var(--ui-danger); }
.ui-btn--outline-danger:hover { background: var(--ui-danger); color: #fff; }

/* Ghost (icon toolbar buttons) */
.ui-btn--ghost { background: transparent; border-color: transparent; color: var(--ui-text-muted); }
.ui-btn--ghost:hover { background: var(--ui-surface-3); color: var(--ui-body-text); }

/* Sizes */
.ui-btn--sm {
    padding: 0.25rem 0.625rem;
    font-size: var(--ui-text-xs);
    border-radius: var(--ui-radius-sm);
}

.ui-btn--lg {
    padding: 0.625rem var(--ui-spacing-lg);
    font-size: var(--ui-text-base);
    border-radius: var(--ui-radius-lg);
}

/* Icon-only button */
.ui-btn--icon {
    padding: 0.4rem;
    aspect-ratio: 1;
}

/* States */
.ui-btn:disabled,
.ui-btn[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.ui-btn.is-loading {
    position: relative;
    color: transparent !important;
    pointer-events: none;
}

.ui-btn.is-loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1em;
    height: 1em;
    margin: -0.5em;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: ui-spin 0.6s linear infinite;
}

@keyframes ui-spin {
    to { transform: rotate(360deg); }
}

/* Button group */
.ui-btn-group {
    display: inline-flex;
    gap: 0;
}

.ui-btn-group .ui-btn {
    border-radius: 0;
}

.ui-btn-group .ui-btn:first-child { border-radius: var(--ui-radius-md) 0 0 var(--ui-radius-md); }
.ui-btn-group .ui-btn:last-child  { border-radius: 0 var(--ui-radius-md) var(--ui-radius-md) 0; }

/* ============================================================
   ALERTS
   ============================================================ */
.ui-alert {
    padding: var(--ui-spacing-md);
    border-radius: var(--ui-radius-md);
    border: 1px solid transparent;
    display: flex;
    align-items: flex-start;
    gap: var(--ui-spacing-sm);
    font-size: var(--ui-text-sm);
}

.ui-alert__icon { flex-shrink: 0; margin-top: 1px; }

.ui-alert__body { flex: 1; }

.ui-alert__title {
    font-weight: 600;
    margin: 0 0 0.25rem;
    font-size: var(--ui-text-sm);
}

.ui-alert__text { margin: 0; }

.ui-alert__dismiss {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    color: currentColor;
    opacity: 0.6;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    transition: opacity 0.15s;
}

.ui-alert__dismiss:hover { opacity: 1; }

/* Color variants */
.ui-alert--success {
    background: var(--ui-success-light);
    border-color: var(--ui-success);
    color: #0f5132;
}

.ui-alert--warning {
    background: var(--ui-warning-light);
    border-color: var(--ui-warning);
    color: #664d03;
}

.ui-alert--danger {
    background: var(--ui-danger-light);
    border-color: var(--ui-danger);
    color: #842029;
}

.ui-alert--info {
    background: var(--ui-info-light);
    border-color: var(--ui-info);
    color: #055160;
}

/* Dark mode text adjustments */
[data-theme="dark"] .ui-alert--success { color: #86efac; }
[data-theme="dark"] .ui-alert--warning { color: #fde68a; }
[data-theme="dark"] .ui-alert--danger  { color: #fca5a5; }
[data-theme="dark"] .ui-alert--info    { color: #67e8f9; }

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .ui-alert--success { color: #86efac; }
    :root:not([data-theme="light"]) .ui-alert--warning { color: #fde68a; }
    :root:not([data-theme="light"]) .ui-alert--danger  { color: #fca5a5; }
    :root:not([data-theme="light"]) .ui-alert--info    { color: #67e8f9; }
}

/* Banner (full-width, no border radius) */
.ui-alert--banner {
    border-radius: 0;
    border-left: none;
    border-right: none;
}

/* ============================================================
   BADGES
   ============================================================ */
.ui-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2em 0.55em;
    font-size: var(--ui-text-xs);
    font-weight: 600;
    line-height: 1;
    border-radius: var(--ui-radius-pill);
    white-space: nowrap;
    vertical-align: baseline;
}

/* Status (soft) */
.ui-badge--success   { background: var(--ui-success-light);  color: #198754; }
.ui-badge--warning   { background: var(--ui-warning-light);  color: #92400e; }
.ui-badge--danger    { background: var(--ui-danger-light);   color: #dc3545; }
.ui-badge--info      { background: var(--ui-info-light);     color: #0369a1; }
.ui-badge--secondary { background: var(--ui-surface-3);      color: var(--ui-text-muted); }
.ui-badge--primary   { background: var(--ui-primary-light);  color: var(--ui-primary); }

/* Solid */
.ui-badge--solid-success  { background: var(--ui-success);  color: #fff; }
.ui-badge--solid-warning  { background: var(--ui-warning);  color: #000; }
.ui-badge--solid-danger   { background: var(--ui-danger);   color: #fff; }
.ui-badge--solid-primary  { background: var(--ui-primary);  color: #fff; }

/* Status dot prefix */
.ui-badge--dot::before {
    content: '';
    display: inline-block;
    width: 0.45em;
    height: 0.45em;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

/* Security-specific */
.ui-badge--role       { background: #ede9fe; color: #7c3aed; }
.ui-badge--permission { background: #fef3c7; color: #b45309; }

/* ============================================================
   MODALS
   ============================================================ */
.ui-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 600;
    padding: var(--ui-spacing-md);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, visibility 0.2s;
}

.ui-modal-overlay.is-open {
    opacity: 1;
    visibility: visible;
}

.ui-modal {
    background: var(--ui-surface-2);
    border-radius: var(--ui-radius-lg);
    box-shadow: var(--ui-shadow-lg);
    width: 100%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    transform: scale(0.96) translateY(-8px);
    transition: transform 0.2s;
    border: 1px solid var(--ui-border);
}

.ui-modal-overlay.is-open .ui-modal {
    transform: scale(1) translateY(0);
}

.ui-modal--sm         { max-width: 420px; }
.ui-modal--md         { max-width: 600px; }
.ui-modal--lg         { max-width: 900px; }
.ui-modal--xl         { max-width: 1200px; }
.ui-modal--fullscreen {
    max-width: 100%;
    width: 100%;
    height: 100%;
    max-height: 100%;
    border-radius: 0;
    margin: 0;
}

.ui-modal__header {
    padding: var(--ui-spacing-md) var(--ui-spacing-lg);
    border-bottom: 1px solid var(--ui-border);
    display: flex;
    align-items: center;
    gap: var(--ui-spacing-sm);
    flex-shrink: 0;
}

.ui-modal__title {
    font-size: var(--ui-h5);
    font-weight: 600;
    margin: 0;
    flex: 1;
}

.ui-modal__close {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--ui-text-muted);
    padding: var(--ui-spacing-xs);
    border-radius: var(--ui-radius-md);
    display: flex;
    align-items: center;
    transition: background 0.15s, color 0.15s;
    flex-shrink: 0;
}

.ui-modal__close:hover {
    background: var(--ui-surface-3);
    color: var(--ui-body-text);
}

.ui-modal__body {
    padding: var(--ui-spacing-lg);
    overflow-y: auto;
    flex: 1;
}

.ui-modal__footer {
    padding: var(--ui-spacing-md) var(--ui-spacing-lg);
    border-top: 1px solid var(--ui-border);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--ui-spacing-sm);
    flex-shrink: 0;
    flex-wrap: wrap;
}

.ui-modal__footer--between {
    justify-content: space-between;
}

/* ============================================================
   FORMS
   ============================================================ */
.ui-form-group {
    margin-bottom: var(--ui-spacing-md);
}

.ui-label {
    display: block;
    font-size: var(--ui-text-sm);
    font-weight: 500;
    color: var(--ui-body-text);
    margin-bottom: 0.375rem;
}

.ui-label--required::after {
    content: ' *';
    color: var(--ui-danger);
}

.ui-input,
.ui-select,
.ui-textarea {
    display: block;
    width: 100%;
    padding: 0.5rem var(--ui-spacing-sm);
    font-family: var(--ui-font-family);
    font-size: var(--ui-text-sm);
    line-height: 1.5;
    color: var(--ui-body-text);
    background: var(--ui-surface-3);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-md);
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
    appearance: none;
}

.ui-input::placeholder,
.ui-textarea::placeholder {
    color: var(--ui-text-muted);
}

.ui-input:focus,
.ui-select:focus,
.ui-textarea:focus {
    outline: none;
    border-color: var(--ui-primary);
    box-shadow: 0 0 0 3px var(--ui-primary-light);
    background: var(--ui-surface-2);
}

.ui-input.is-invalid,
.ui-select.is-invalid,
.ui-textarea.is-invalid {
    border-color: var(--ui-danger);
}

.ui-input.is-invalid:focus,
.ui-select.is-invalid:focus,
.ui-textarea.is-invalid:focus {
    box-shadow: 0 0 0 3px var(--ui-danger-light);
}

.ui-input.is-valid,
.ui-select.is-valid,
.ui-textarea.is-valid {
    border-color: var(--ui-success);
}

.ui-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236c757d' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.625rem center;
    background-size: 1rem;
    padding-right: 2.25rem;
    cursor: pointer;
}

.ui-textarea {
    min-height: 100px;
    resize: vertical;
}

.ui-form-help {
    font-size: var(--ui-text-xs);
    color: var(--ui-text-muted);
    margin-top: 0.3rem;
}

.ui-form-error {
    font-size: var(--ui-text-xs);
    color: var(--ui-danger);
    margin-top: 0.3rem;
    display: none;
}

.ui-form-error.is-visible {
    display: block;
}

/* Checkbox / radio */
.ui-check {
    display: flex;
    align-items: flex-start;
    gap: var(--ui-spacing-sm);
    cursor: pointer;
    font-size: var(--ui-text-sm);
}

.ui-check__input {
    width: 1rem;
    height: 1rem;
    margin-top: 0.2em;
    accent-color: var(--ui-primary);
    flex-shrink: 0;
    cursor: pointer;
}

/* Input with inline icon/addon */
.ui-input-group {
    position: relative;
    display: flex;
    align-items: stretch;
}

.ui-input-group .ui-input {
    flex: 1;
}

.ui-input-group__prefix,
.ui-input-group__suffix {
    display: flex;
    align-items: center;
    padding: 0 var(--ui-spacing-sm);
    background: var(--ui-surface-3);
    border: 1px solid var(--ui-border);
    color: var(--ui-text-muted);
    font-size: var(--ui-text-sm);
    white-space: nowrap;
}

.ui-input-group__prefix {
    border-right: none;
    border-radius: var(--ui-radius-md) 0 0 var(--ui-radius-md);
}

.ui-input-group__suffix {
    border-left: none;
    border-radius: 0 var(--ui-radius-md) var(--ui-radius-md) 0;
}

.ui-input-group .ui-input:first-child { border-radius: var(--ui-radius-md) 0 0 var(--ui-radius-md); }
.ui-input-group .ui-input:last-child  { border-radius: 0 var(--ui-radius-md) var(--ui-radius-md) 0; }

/* ============================================================
   TABLES (DataTables overrides + wrapper)
   ============================================================ */
.ui-table-wrapper {
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-lg);
    overflow: hidden;
    background: var(--ui-surface-2);
}

.ui-table-toolbar {
    padding: var(--ui-spacing-md);
    border-bottom: 1px solid var(--ui-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ui-spacing-md);
    flex-wrap: wrap;
    background: var(--ui-surface-2);
}

.ui-table-toolbar__left,
.ui-table-toolbar__right {
    display: flex;
    align-items: center;
    gap: var(--ui-spacing-sm);
    flex-wrap: wrap;
}

/* DataTables search box */
.dataTables_filter label {
    display: flex;
    align-items: center;
    gap: var(--ui-spacing-sm);
    font-size: var(--ui-text-sm);
    color: var(--ui-text-muted);
}

.dataTables_filter input {
    padding: 0.35rem 0.625rem;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-md);
    background: var(--ui-surface-3);
    color: var(--ui-body-text);
    font-size: var(--ui-text-sm);
    font-family: var(--ui-font-family);
    transition: border-color 0.15s, box-shadow 0.15s;
}

.dataTables_filter input:focus {
    outline: none;
    border-color: var(--ui-primary);
    box-shadow: 0 0 0 3px var(--ui-primary-light);
}

/* Table head */
table.dataTable thead th,
table.dataTable thead td {
    font-size: var(--ui-text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ui-text-muted);
    background: var(--ui-surface-1);
    border-bottom: 1px solid var(--ui-border);
    padding: var(--ui-spacing-sm) var(--ui-spacing-md);
    white-space: nowrap;
}

/* Table body */
table.dataTable tbody td {
    padding: var(--ui-spacing-sm) var(--ui-spacing-md);
    vertical-align: middle;
    border-bottom: 1px solid var(--ui-border);
    font-size: var(--ui-text-sm);
    color: var(--ui-body-text);
    background: var(--ui-surface-2);
}

table.dataTable tbody tr:last-child td { border-bottom: none; }

table.dataTable tbody tr:hover td { background: var(--ui-surface-1); }

/* Compact style */
.ui-table--compact table.dataTable thead th,
.ui-table--compact table.dataTable thead td,
.ui-table--compact table.dataTable tbody td {
    padding: 0.3rem var(--ui-spacing-sm);
    font-size: var(--ui-text-xs);
}

/* DataTables info + pagination */
.dataTables_info {
    font-size: var(--ui-text-xs);
    color: var(--ui-text-muted);
    padding: var(--ui-spacing-sm) var(--ui-spacing-md);
}

.dataTables_paginate {
    padding: var(--ui-spacing-sm) var(--ui-spacing-md);
    display: flex;
    gap: 0.25rem;
}

.dataTables_paginate .paginate_button {
    padding: 0.3rem 0.625rem;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-md);
    cursor: pointer;
    font-size: var(--ui-text-xs);
    color: var(--ui-body-text) !important;
    background: var(--ui-surface-2) !important;
    transition: background 0.15s, border-color 0.15s;
}

.dataTables_paginate .paginate_button:hover:not(.disabled) {
    background: var(--ui-surface-3) !important;
    border-color: var(--ui-border) !important;
}

.dataTables_paginate .paginate_button.current {
    background: var(--ui-primary) !important;
    border-color: var(--ui-primary) !important;
    color: #fff !important;
}

.dataTables_paginate .paginate_button.disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ============================================================
   DASHBOARD WIDGETS
   ============================================================ */

/* Activity feed */
.ui-feed {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ui-feed__item {
    display: flex;
    gap: var(--ui-spacing-sm);
    padding: var(--ui-spacing-sm) 0;
    border-bottom: 1px solid var(--ui-border);
    font-size: var(--ui-text-sm);
}

.ui-feed__item:last-child { border-bottom: none; }

.ui-feed__avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--ui-primary-light);
    color: var(--ui-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: var(--ui-text-xs);
    font-weight: 700;
}

.ui-feed__body { flex: 1; min-width: 0; }

.ui-feed__description { color: var(--ui-body-text); }
.ui-feed__description strong { font-weight: 600; }

.ui-feed__time {
    font-size: var(--ui-text-xs);
    color: var(--ui-text-muted);
    margin-top: 0.125rem;
    white-space: nowrap;
}

/* Trend chart card */
.ui-trend-chart {
    height: 200px;
    position: relative;
}

/* Security component badges */
.ui-user-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: var(--ui-text-sm);
    font-weight: 500;
    color: var(--ui-body-text);
}

.ui-user-badge__avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--ui-primary-light);
    color: var(--ui-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6rem;
    font-weight: 700;
    flex-shrink: 0;
}

/* Session status indicator */
.ui-session-status {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: var(--ui-text-xs);
    color: var(--ui-text-muted);
}

.ui-session-status__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

.ui-session-status--active .ui-session-status__dot   { background: var(--ui-success); }
.ui-session-status--expired .ui-session-status__dot  { background: var(--ui-danger); }
.ui-session-status--warning .ui-session-status__dot  { background: var(--ui-warning); }

/* ============================================================
   TOAST NOTIFICATIONS
   ============================================================ */
.ui-toast-container {
    position: fixed;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: var(--ui-spacing-sm);
    pointer-events: none;
    max-width: 360px;
    width: 100%;
}

.ui-toast-container--bottom-right {
    bottom: var(--ui-spacing-lg);
    right: var(--ui-spacing-lg);
}

.ui-toast-container--bottom-left {
    bottom: var(--ui-spacing-lg);
    left: var(--ui-spacing-lg);
}

.ui-toast-container--top-right {
    top: calc(var(--ui-header-height) + var(--ui-spacing-md));
    right: var(--ui-spacing-lg);
}

.ui-toast-container--top-center {
    top: calc(var(--ui-header-height) + var(--ui-spacing-md));
    left: 50%;
    transform: translateX(-50%);
}

.ui-toast {
    background: var(--ui-surface-2);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-md);
    box-shadow: var(--ui-shadow-md);
    padding: var(--ui-spacing-sm) var(--ui-spacing-md);
    display: flex;
    align-items: center;
    gap: var(--ui-spacing-sm);
    font-size: var(--ui-text-sm);
    pointer-events: all;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.25s, transform 0.25s;
    border-left: 4px solid transparent;
}

.ui-toast.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.ui-toast--success { border-left-color: var(--ui-success); }
.ui-toast--success .ui-toast__icon { color: var(--ui-success); }

.ui-toast--warning { border-left-color: var(--ui-warning); }
.ui-toast--warning .ui-toast__icon { color: #92400e; }

.ui-toast--danger  { border-left-color: var(--ui-danger); }
.ui-toast--danger  .ui-toast__icon { color: var(--ui-danger); }

.ui-toast--info    { border-left-color: var(--ui-info); }
.ui-toast--info    .ui-toast__icon { color: #0369a1; }

.ui-toast__icon    { flex-shrink: 0; }
.ui-toast__message { flex: 1; color: var(--ui-body-text); }

.ui-toast__close {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--ui-text-muted);
    padding: 0;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    transition: color 0.15s;
}

.ui-toast__close:hover { color: var(--ui-body-text); }

/* Stack from bottom on mobile */
@media (max-width: 575.98px) {
    .ui-toast-container--bottom-right,
    .ui-toast-container--bottom-left {
        left: var(--ui-spacing-sm);
        right: var(--ui-spacing-sm);
        bottom: var(--ui-spacing-sm);
        max-width: none;
        width: auto;
    }
}