/* Shared visual tokens. Keep the existing Persian fonts and theme switcher. */
:root {
    --app-surface: #fff;
    --app-canvas: #f5f6fa;
    --app-border: #e3e7ef;
    --app-muted-surface: #f7f8fc;
    --app-radius: 1rem;
    --app-shadow: 0 3px 16px rgba(34, 48, 74, .045);
}

.dark-style, [data-bs-theme="dark"] {
    --app-surface: #2b2c40;
    --app-canvas: #232333;
    --app-border: #44465f;
    --app-muted-surface: #323449;
    --app-shadow: 0 3px 16px rgba(0, 0, 0, .12);
}

.app-workspace .content-wrapper { background: var(--app-canvas); }
.app-workspace .layout-page { min-width: 0; }
.app-workspace-content { width: 100%; min-width: 0; padding-block: 1.75rem; }
.app-workspace .card, .public-shell .card {
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius);
    background-color: var(--app-surface);
    box-shadow: var(--app-shadow);
}

.app-page-toolbar {
    padding-block-end: 1.25rem;
    border-block-end: 1px solid var(--app-border);
    gap: 1rem;
}
.app-page-toolbar h1, .app-page-toolbar h4 { font-size: 1.35rem; font-weight: 700; line-height: 1.65; }
.app-page-toolbar p { max-width: 65ch; font-size: .9rem; line-height: 1.9; }
.app-page-icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.app-page-actions { margin-inline-start: auto; }
.app-workspace .card-header, .app-workspace .card-body, .public-shell .card-body { padding: 1.25rem; }
.app-kpi-card .card-body { min-height: 125px; }
.app-kpi-card h4 { font-size: 1.65rem; font-variant-numeric: tabular-nums; line-height: 1.5; }
.app-kpi-card:hover { transform: none; }

.app-workspace .app-data-table-card .table-responsive,
.app-workspace .app-table-section .table-responsive {
    background: var(--app-surface);
    border: 1px solid var(--app-border);
    border-radius: .75rem;
    overflow-x: auto;
}
.app-workspace .table { margin-bottom: 0; color: inherit; }
.app-workspace .table thead th {
    background: var(--app-muted-surface);
    color: inherit;
    font-size: .82rem;
    font-weight: 600;
    white-space: nowrap;
    padding: .9rem 1rem;
}
.dark-style .app-workspace .table thead th,
[data-bs-theme="dark"] .app-workspace .table thead th {
    background-color: var(--app-muted-surface) !important;
    color: #e5e7f2 !important;
    border-color: var(--app-border) !important;
    box-shadow: inset 0 0 0 9999px var(--app-muted-surface) !important;
}
.app-workspace .table td { vertical-align: middle; padding: .95rem 1rem; border-color: var(--app-border); }
.app-workspace .table tbody tr:hover { background: var(--app-muted-surface); }
.app-workspace .btn { border-radius: .6rem; }
.app-workspace .form-control, .app-workspace .form-select { border-radius: .6rem; }
.app-workspace .badge { line-height: 1.5; }
.app-workspace :is(a, button, input, select, textarea):focus-visible,
.public-shell :is(a, button, input, select, textarea):focus-visible {
    outline: 2px solid var(--bs-primary, #696cff);
    outline-offset: 3px;
}
.app-workspace .menu-link.active {
    background: rgba(105, 108, 255, .12);
    color: var(--bs-primary, #696cff);
    font-weight: 700;
    box-shadow: inset -3px 0 var(--bs-primary, #696cff);
}
.app-workspace .menu-header { letter-spacing: 0; }
.app-insight-row { display: flex; flex-wrap: wrap; gap: 1.5rem 3rem; }
.app-insight-row > div { display: grid; gap: .5rem; }
.app-analytics-meta { padding: .85rem 1rem; border: 1px solid var(--app-border); border-radius: .75rem; background: var(--app-muted-surface); }
.app-analytics-visual-card { border-color: var(--app-border); }
.app-analytics-donut-layout { display: flex; align-items: center; justify-content: space-around; gap: 1.5rem; min-height: 13rem; }
.app-analytics-donut { width: 10rem; height: 10rem; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; flex-shrink: 0; position: relative; color: var(--bs-body-color); }
.app-analytics-donut::before { content: ""; position: absolute; inset: 1.2rem; border-radius: 50%; background: var(--app-surface); }
.app-analytics-donut strong, .app-analytics-donut span { position: relative; z-index: 1; }
.app-analytics-donut strong { font-size: 1.55rem; line-height: 1.4; }
.app-analytics-donut span { color: var(--bs-secondary-color, #8592a3); font-size: .8rem; }
.app-analytics-legend { display: grid; gap: .8rem; min-width: 10rem; }
.app-analytics-legend > div { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .5rem; font-size: .82rem; }
.app-analytics-legend strong { font-variant-numeric: tabular-nums; }
.app-analytics-dot { width: .65rem; height: .65rem; border-radius: 50%; }
.app-analytics-dot-active { background: #39da8a; }
.app-analytics-dot-maintenance { background: #696cff; }
.app-analytics-dot-warning { background: #ffab00; }
.app-analytics-dot-offline { background: #8592a3; }
.app-analytics-bars { display: grid; gap: 1.1rem; }
.app-analytics-bar-row { display: grid; gap: .45rem; font-size: .85rem; }
.app-analytics-bar-row .progress { height: .65rem; background: var(--app-muted-surface); border-radius: 999px; }
.app-analytics-bar-row .progress-bar { border-radius: inherit; }
.app-analytics-callout { display: flex; align-items: center; gap: .65rem; padding: .7rem .8rem; border-radius: .6rem; background: var(--app-muted-surface); color: var(--bs-secondary-color, #8592a3); font-size: .85rem; }
.app-analytics-callout i { color: var(--bs-primary, #696cff); font-size: 1.15rem; }
.app-health-progress { width: 7rem; height: .6rem; accent-color: var(--bs-primary, #696cff); }
.app-maintenance-insight-card { border-color: var(--app-border); }
.app-maintenance-donut-wrap { display: flex; align-items: center; justify-content: space-around; gap: 1.5rem; min-height: 12rem; }
.app-maintenance-donut { width: 9.5rem; height: 9.5rem; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; flex-shrink: 0; position: relative; color: var(--bs-body-color); }
.app-maintenance-donut::before { content: ""; position: absolute; inset: 1.15rem; border-radius: 50%; background: var(--app-surface); }
.app-maintenance-donut strong, .app-maintenance-donut span { position: relative; z-index: 1; }
.app-maintenance-donut strong { font-size: 1.45rem; line-height: 1.4; }
.app-maintenance-donut span { color: var(--bs-secondary-color, #8592a3); font-size: .8rem; }
.app-maintenance-legend { display: grid; gap: .85rem; min-width: 10rem; }
.app-maintenance-legend > div { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .5rem; font-size: .85rem; }
.app-maintenance-legend strong { font-variant-numeric: tabular-nums; }
.app-maintenance-dot { width: .65rem; height: .65rem; border-radius: 50%; }
.app-maintenance-dot-success { background: #39da8a; }
.app-maintenance-dot-warning { background: #ffab00; }
.app-maintenance-dot-danger { background: #ff5b5c; }
.app-maintenance-action-list { display: grid; gap: .55rem; }
.app-maintenance-action-item { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .65rem .75rem; border: 1px solid var(--app-border); border-radius: .6rem; background: var(--app-muted-surface); }
.app-skip-link {
    position: fixed;
    inset-block-start: .5rem;
    inset-inline-start: 1rem;
    transform: translateY(-200%);
    z-index: 2000;
    padding: .75rem 1rem;
    border-radius: .5rem;
    color: var(--bs-primary, #696cff);
    background: var(--app-surface);
}
.app-skip-link:focus { transform: translateY(0); }
.app-workspace .app-live-statusbar, .app-workspace .app-token-box {
    background: var(--app-muted-surface);
    border-color: var(--app-border);
}
.app-operations-overview { padding: 1.25rem; border: 1px solid var(--app-border); border-radius: var(--app-radius); background: var(--app-surface); box-shadow: var(--app-shadow); }
.app-operations-link { display: flex; align-items: center; gap: .75rem; padding: .9rem 1rem; border: 1px solid var(--app-border); border-radius: .75rem; color: inherit; text-decoration: none; background: var(--app-muted-surface); transition: border-color .15s ease, color .15s ease, transform .15s ease; }
.app-operations-link i:first-child { color: var(--bs-primary, #696cff); font-size: 1.25rem; }
.app-operations-link:hover { color: var(--bs-primary, #696cff); border-color: var(--bs-primary, #696cff); transform: translateY(-1px); }

@media (max-width: 767.98px) {
    .app-workspace-content { padding: 1rem; }
    .app-workspace .card-body, .app-workspace .card-header { padding: 1rem; }
    .app-page-toolbar { align-items: flex-start; }
    .app-page-actions { width: 100%; margin-inline-start: 0; }
    .app-page-actions > .btn { flex: 1; }
    .app-page-toolbar h1, .app-page-toolbar h4 { font-size: 1.15rem; }
    .app-kpi-card .card-body { min-height: 112px; }
    .app-workspace .table td, .app-workspace .table th { padding: .75rem; }
    .app-maintenance-donut-wrap { flex-direction: column; }
    .app-maintenance-legend { width: 100%; }
    .app-analytics-donut-layout { flex-direction: column; }
    .app-analytics-legend { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .app-workspace .card, .app-workspace .btn,
    .public-shell .card, .passenger-notification-item { transition: none; transform: none; }
}