/* ============================================================================
   dynamic-ui.css
   Adapted from DynamicBlazorUI/wwwroot/css/site.css
   Full design system: navbar, sidebar, app cards, breadcrumb, form-page.
   Loaded alongside the POC's site.css from _Host.cshtml — do NOT delete site.css.
   ============================================================================ */

/* ═══════════════════════════════════════════════════════
   Dynamic Blazor UI — Site Stylesheet
   Matches MVC project design (no Yeti dependencies)
   ═══════════════════════════════════════════════════════ */

/* ── Reset & Base ───────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 14px; }

body {
    font-family: 'IBM Plex Sans Arabic', 'Inter', system-ui, sans-serif;
    background: #f1f5f9;
    color: #1e293b;
    min-height: 100vh;
}
[dir="rtl"] { font-family: 'IBM Plex Sans Arabic', sans-serif; }
[dir="ltr"] { font-family: 'Inter', sans-serif; }

a { text-decoration: none; color: inherit; }
button { font-family: inherit; cursor: pointer; }

/* ── Layout ─────────────────────────────────────────────── */
#app, .page-wrapper {
    display: flex; flex-direction: column; min-height: 100vh;
}
.layout-body {
    display: flex; flex: 1; overflow: hidden;
}

/* ── Navbar ─────────────────────────────────────────────── */
.top-navbar {
    height: 56px;
    background: #fff;
    border-bottom: 1px solid #e2e8f0;
    display: flex; align-items: center; padding: 0 20px; gap: 12px;
    position: sticky; top: 0; z-index: 100;
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
}

.navbar-menu-toggler {
    background: none; border: none;
    width: 36px; height: 36px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    color: #64748b; font-size: 18px; transition: background .15s; flex-shrink: 0;
}
.navbar-menu-toggler:hover { background: #f1f5f9; }

.navbar-brand {
    display: flex; align-items: center; gap: 8px;
    font-weight: 700; font-size: 15px; color: #1e293b; user-select: none;
}
.navbar-brand__icon { color: #3b82f6; font-size: 20px; }

.navbar-spacer { flex: 1; }
.navbar-actions { display: flex; align-items: center; gap: 8px; }

.navbar-lang-btn {
    background: #f1f5f9; border: 1px solid #e2e8f0;
    color: #475569; padding: 5px 14px; border-radius: 20px;
    font-size: 12px; font-weight: 600;
    display: flex; align-items: center; gap: 6px; transition: all .15s;
}
.navbar-lang-btn:hover { background: #3b82f6; color: #fff; border-color: #3b82f6; }
.navbar-lang-btn__label { font-size: 12px; }

/* ── NavBar User & Logout ───────────────────────────────── */
.navbar-user {
    display: flex; align-items: center; gap: 6px;
    padding: 5px 12px; border-radius: 20px;
    background: #f0f9ff; border: 1px solid #bae6fd;
    color: #0369a1; font-size: 13px; font-weight: 600;
}
.navbar-user__icon { font-size: 16px; }
.navbar-user__admin {
    background: #fef3c7; color: #d97706;
    border-radius: 10px; padding: 1px 7px;
    font-size: 11px; font-weight: 700;
}
.navbar-logout-btn {
    background: #fef2f2; border: 1px solid #fecaca;
    color: #dc2626; padding: 6px 10px; border-radius: 8px;
    font-size: 16px; display: flex; align-items: center;
    cursor: pointer; transition: all .15s;
}
.navbar-logout-btn:hover { background: #dc2626; color: #fff; border-color: #dc2626; }

/* ── Sidebar ─────────────────────────────────────────────── */
.app-sidebar {
    width: 240px; background: #fff;
    border-inline-end: 1px solid #e2e8f0;
    overflow-y: auto; flex-shrink: 0;
    transition: width .25s ease; position: relative; z-index: 50;
}
.app-sidebar.collapsed { width: 0; overflow: hidden; }

.sidebar-section { padding: 14px 0; }
.sidebar-section__title {
    font-size: 10.5px; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; color: #94a3b8; padding: 0 16px; margin-bottom: 8px;
}
.sidebar-nav { padding: 0 8px; }

.nav-item {
    width: 100%; background: none; border: none;
    display: flex; align-items: center; gap: 10px;
    padding: 9px 10px; border-radius: 8px; margin-bottom: 2px;
    font-size: 13px; font-weight: 500; color: #475569;
    text-align: start; transition: background .15s, color .15s;
}
.nav-item:hover { background: #f8fafc; color: #1e293b; }
.nav-item.active { background: #eff6ff; color: #2563eb; }

.nav-item__icon   { font-size: 15px; flex-shrink: 0; }
.nav-item__label  { flex: 1; }
.nav-item__arrow  {
    font-size: 11px; color: #94a3b8;
    margin-inline-start: auto; transition: transform .2s;
}
.nav-item.active .nav-item__arrow { transform: rotate(180deg); color: #2563eb; }

.sidebar-dropdown {
    margin: 2px 0 4px; border-radius: 8px;
    overflow: hidden; animation: dropDown .2s ease-out;
}
@keyframes dropDown {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.sidebar-dropdown__item {
    display: flex; align-items: center; gap: 9px;
    padding: 8px 10px 8px 26px;
    font-size: 12.5px;
    /* Dark-sidebar tokens — the old hardcoded #64748b was a light-theme
       leftover and was unreadable on the navy sidebar. */
    color: var(--mx-sidebar-text);
    border: none; background: none; width: 100%; text-align: start;
    transition: background .15s, color .15s;
}
.sidebar-dropdown__item:hover {
    background: var(--mx-sidebar-item-hover);
    color: var(--mx-sidebar-text-active);
}
.sidebar-dropdown__item--active {
    background: var(--mx-sidebar-item-active);
    color: var(--mx-sidebar-text-active);
    font-weight: 600;
}

.sidebar-dropdown__icon  { font-size: 13px; flex-shrink: 0; }
.sidebar-dropdown__label { flex: 1; }
.sidebar-dropdown__loading,
.sidebar-dropdown__empty {
    padding: 10px 16px; font-size: 12px; color: #9ca3af; text-align: center;
}

.sidebar-loading {
    display: flex; align-items: center; gap: 8px;
    padding: 12px 10px; color: #94a3b8; font-size: 13px;
}
.sidebar-empty {
    display: flex; flex-direction: column; align-items: center;
    padding: 20px 10px; color: #94a3b8; font-size: 13px; text-align: center; gap: 6px;
}
.sidebar-empty__icon { font-size: 28px; }

/* ── Main Content ────────────────────────────────────────── */
.main-content { flex: 1; overflow-y: auto; display: flex; flex-direction: column; min-width: 0; }
.content-area  { padding: 20px; flex: 1; }

/* ── Breadcrumb ──────────────────────────────────────────── */
.page-header-compact {
    display: flex; align-items: center; gap: 16px;
    padding: 0 20px; min-height: 46px;
    background: #fff; border-bottom: 1px solid #e2e8f0; flex-wrap: wrap;
}
.page-header-compact__title {
    font-size: 14px; font-weight: 700; color: #1e293b; white-space: nowrap; flex-shrink: 0;
}
.page-header-compact__title::after {
    content: ''; display: inline-block; width: 1px; height: 14px;
    background: #d1d5db; margin-inline-start: 16px; vertical-align: middle;
}
.breadcrumb-inline { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.breadcrumb-inline__item { font-size: 12.5px; color: #94a3b8; white-space: nowrap; }
/* Reset default button chrome for the clickable "back to list" breadcrumb item. */
button.breadcrumb-inline__item {
    background: none; border: none; padding: 0; margin: 0;
    font-family: inherit; cursor: pointer;
}
.breadcrumb-inline__item--link {
    color: #3b82f6; transition: color .15s;
    display: flex; align-items: center; gap: 4px;
}
.breadcrumb-inline__item--link:hover { color: #1d4ed8; }
.breadcrumb-inline__item--active { color: #1e293b; font-weight: 600; }
.breadcrumb-inline__sep { font-size: 10px; color: #cbd5e1; }

/* ── Home — App Cards ────────────────────────────────────── */
.page-apps        { max-width: 960px; margin: 0 auto; }
.page-apps__header{ text-align: center; margin-bottom: 28px; padding-top: 8px; }
.page-apps__title { font-size: 20px; font-weight: 700; color: var(--mx-text-strong); margin-bottom: 6px; }
.page-apps__sub   { font-size: 13.5px; color: var(--mx-text-muted); }

.apps-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
}

.app-card {
    background: #fff; border-radius: 14px; border: 1px solid #e2e8f0;
    padding: 20px 18px; display: flex; align-items: center; gap: 14px;
    transition: transform .18s, box-shadow .18s, border-color .18s;
    position: relative; overflow: hidden; width: 100%; text-align: start;
}
.app-card::before {
    content: ''; position: absolute;
    inset-inline-start: 0; top: 0; bottom: 0; width: 4px;
    background: var(--app-color, #3b82f6);
}
.app-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,.10);
    border-color: var(--app-color, #3b82f6);
}
.app-card__icon-wrap {
    width: 46px; height: 46px; border-radius: 12px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: rgba(59,130,246,.12);
}
.app-card__icon  { font-size: 22px; color: var(--app-color, #3b82f6); }
.app-card__body  { flex: 1; min-width: 0; }
.app-card__name  { font-size: 14px; font-weight: 700; color: #0f172a; margin-bottom: 3px; }
.app-card__desc  { font-size: 12px; color: #94a3b8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-card__arrow { color: #cbd5e1; font-size: 14px; flex-shrink: 0; }
.app-card:hover .app-card__arrow { color: var(--app-color, #3b82f6); }

/* ── App Welcome Page ────────────────────────────────────── */
.app-welcome {
    display: flex; flex-direction: column; align-items: center;
    justify-content: center; text-align: center; padding: 48px 20px; gap: 12px;
}
.app-welcome__icon-wrap {
    width: 72px; height: 72px; border-radius: 20px;
    display: flex; align-items: center; justify-content: center; margin-bottom: 4px;
}
.app-welcome__icon  { font-size: 34px; }
.app-welcome__title { font-size: 22px; font-weight: 700; color: #0f172a; }
.app-welcome__sub   { font-size: 13.5px; color: #94a3b8; margin-bottom: 16px; }

.menus-grid {
    display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; max-width: 600px;
}
.menu-card {
    background: #fff; border: 1px solid #e2e8f0; border-radius: 12px;
    padding: 14px 20px; display: flex; align-items: center; gap: 10px;
    font-size: 13.5px; color: #475569; font-weight: 500;
}
.menu-card__icon { font-size: 17px; color: #3b82f6; }

/* ── Data Grid ───────────────────────────────────────────── */
.list-page { display: flex; flex-direction: column; gap: 14px; }

.grid-toolbar {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 12px 16px;
}
.grid-toolbar__start { display: flex; align-items: center; gap: 8px; flex: 1; flex-wrap: wrap; }
.grid-toolbar__end   { display: flex; align-items: center; gap: 8px; }

.search-input-wrap {
    display: flex; align-items: center; gap: 8px;
    background: #f8fafc; border: 1px solid #e2e8f0;
    border-radius: 8px; padding: 7px 12px; flex: 1; max-width: 300px;
}
.search-input-wrap span { color: #94a3b8; font-size: 14px; }
.search-input-wrap input {
    border: none; background: none; outline: none;
    font-size: 13px; color: #1e293b; flex: 1; font-family: inherit;
}
.search-input-wrap input::placeholder { color: #94a3b8; }

.btn {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 8px 16px; border-radius: 8px; border: none;
    font-size: 13px; font-weight: 600; transition: all .15s; font-family: inherit;
}
.btn-add    { background: #3b82f6; color: #fff; }
.btn-add:hover { background: #2563eb; }
.btn-sec {
    background: #f1f5f9; color: #475569; border: 1px solid #e2e8f0;
}
.btn-sec:hover { background: #e2e8f0; color: #1e293b; }
.btn-cancel { background: #fee2e2; color: #dc2626; border: none; }
.btn-sm { padding: 5px 12px; font-size: 12px; }

.stat-pill {
    font-size: 12px; color: #64748b; background: #f1f5f9;
    border-radius: 20px; padding: 4px 12px; white-space: nowrap;
}

.grid-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; overflow: hidden; }

.data-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.data-table thead { background: #f8fafc; }
.data-table th {
    padding: 10px 14px; font-size: 11.5px; font-weight: 700; color: #64748b;
    text-align: start; border-bottom: 1px solid #e2e8f0; white-space: nowrap; letter-spacing: .02em;
}
.data-table td {
    padding: 9px 14px; border-bottom: 1px solid #f1f5f9; color: #334155; vertical-align: middle;
}
.data-table tr:last-child td { border-bottom: none; }
.data-table tbody tr:hover td { background: #fafbfd; }
.data-table .pk-cell { font-weight: 700; color: #1e293b; font-size: 12.5px; font-family: monospace; }

.action-btn {
    background: none; border: none;
    width: 32px; height: 32px; border-radius: 6px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 15px; transition: all .15s;
}
.action-view   { background: #eff6ff; color: #3b82f6; }
.action-edit   { background: #f0fdf4; color: #16a34a; }
.action-delete { background: #fef2f2; color: #dc2626; }
.action-view:hover   { background: #3b82f6; color: #fff; }
.action-edit:hover   { background: #16a34a; color: #fff; }
.action-delete:hover { background: #dc2626; color: #fff; }
.action-btns { display: flex; gap: 6px; }

.grid-empty { padding: 52px 20px; text-align: center; }
.grid-empty__icon { font-size: 36px; color: #cbd5e1; margin-bottom: 10px; display: block; }
.grid-empty__text { font-size: 14px; color: #94a3b8; }
.grid-empty__sub  { font-size: 12.5px; color: #cbd5e1; margin-top: 4px; }

/* ── Inline Form Panel ───────────────────────────────────── */
.inline-form-panel {
    background: #fff; border: 1px solid #e2e8f0; border-radius: 12px;
    overflow: hidden; animation: slideDown .22s ease-out;
}
@keyframes slideDown {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.inline-form-panel__header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 20px;
    background: linear-gradient(135deg, #2563eb, #3b82f6);
    color: #fff;
}
.inline-form-panel__title {
    font-size: 14px; font-weight: 700; display: flex; align-items: center; gap: 8px;
}
.inline-form-panel__close {
    background: rgba(255,255,255,.2); border: none;
    width: 30px; height: 30px; border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 16px; transition: background .15s;
}
.inline-form-panel__close:hover { background: rgba(255,255,255,.35); }

/* Toolbar between header and body */
.inline-form-panel__toolbar {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 8px;
    padding: 10px 16px; border-bottom: 1px solid #f1f5f9;
    background: #fafafa;
}
.inline-form-panel__toolbar-start,
.inline-form-panel__toolbar-end { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.inline-form-panel__body { padding: 20px; }
.inline-form-panel__footer {
    display: flex; align-items: center; justify-content: flex-end; gap: 10px;
    padding: 14px 20px; border-top: 1px solid #f1f5f9; background: #f8fafc;
}

/* ── Grid Loading Overlay ────────────────────────────────── */
.grid-loading-overlay {
    position: absolute; inset: 0; z-index: 10;
    background: rgba(255,255,255,.82); backdrop-filter: blur(2px);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 14px; border-radius: 12px;
    animation: fadeInOverlay .15s ease-out;
    min-height: 120px;
}
@keyframes fadeInOverlay {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.grid-loading-spinner {
    width: 42px; height: 42px;
    border: 4px solid #e2e8f0; border-top-color: #3b82f6;
    border-radius: 50%; animation: gridSpin 1s linear infinite;
}
@keyframes gridSpin { to { transform: rotate(360deg); } }
.grid-loading-text {
    font-size: 13.5px; font-weight: 600; color: #64748b; margin: 0;
}

/* Limit toggle loading indicator */
.limit-loading {
    display: flex; align-items: center; gap: 6px;
    font-size: 12.5px; color: #3b82f6; font-weight: 500;
    animation: fadeInOverlay .2s ease-out;
}
.limit-loading .las { font-size: 14px; }

/* ── Not Connected ───────────────────────────────────────── */
.not-connected {
    padding: 52px 20px; text-align: center;
    background: #fff; border: 1px solid #e2e8f0; border-radius: 12px;
}
.not-connected__icon { font-size: 36px; color: #94a3b8; margin-bottom: 10px; display: block; }
.not-connected__text { font-size: 14px; color: #64748b; font-weight: 600; }
.not-connected__id   { font-size: 12px; color: #cbd5e1; font-family: monospace; margin-top: 4px; }

/* ── Form Page ───────────────────────────────────────────── */
.form-page-loading {
    display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 12px; min-height: 300px; color: #94a3b8;
}
.form-page-loading .las { font-size: 32px; }
.form-page-notfound {
    display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 12px; min-height: 300px; text-align: center; color: #64748b;
}
.form-page-notfound .las { font-size: 48px; color: #cbd5e1; }
.form-page-notfound h2 { font-size: 18px; color: #374151; font-weight: 700; }

.form-page__header { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.form-page__back {
    background: #f1f5f9; border: 1px solid #e2e8f0; border-radius: 8px;
    width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
    color: #475569; font-size: 16px; transition: all .15s; flex-shrink: 0;
}
.form-page__back:hover { background: #e2e8f0; }
.form-page__title-wrap { flex: 1; }
/* Blazor sets focus on this heading after every navigation (accessibility:
   lets screen readers announce the new page). Keep it focusable, but the
   default browser outline stretches across the full block width and reads
   as a stray empty input box — suppress it instead. */
.form-page__title      { font-size: 17px; font-weight: 700; color: #0f172a; margin-bottom: 2px; outline: none; }
.form-page__type-badge {
    display: inline-block; padding: 2px 10px; border-radius: 12px;
    font-size: 11px; font-weight: 700; background: #dbeafe; color: #1d4ed8;
}

/* ── Report View ─────────────────────────────────────────── */
.report-header {
    background: #fff; border: 1px solid #e2e8f0; border-radius: 12px;
    padding: 20px 22px; margin-bottom: 16px; display: flex; align-items: center; gap: 16px;
}
.report-header__icon-wrap {
    width: 50px; height: 50px; border-radius: 12px;
    background: #fef3c7; display: flex; align-items: center; justify-content: center;
}
.report-header__icon  { font-size: 24px; color: #d97706; }
.report-header__title { font-size: 17px; font-weight: 700; color: #0f172a; margin-bottom: 3px; }
.report-header__sub   { font-size: 12.5px; color: #94a3b8; }
.report-placeholder {
    background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 56px 20px; text-align: center;
}
.report-placeholder__icon { font-size: 40px; color: #fbbf24; margin-bottom: 12px; display: block; }
.report-placeholder__text { font-size: 15px; color: #374151; font-weight: 600; margin-bottom: 6px; }
.report-placeholder__sub  { font-size: 13px; color: #9ca3af; }

/* ── Badges ─────────────────────────────────────────────── */
.badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 700;
}
.badge-list      { background: #dbeafe; color: #1d4ed8; }
.badge-entry     { background: #dcfce7; color: #16a34a; }
.badge-report    { background: #fef9c3; color: #b45309; }
.badge-custom    { background: #f1f5f9; color: #475569; }

/* ── Modal ───────────────────────────────────────────────── */
.modal-backdrop {
    position: fixed; inset: 0;
    background: rgba(0,0,0,.45); backdrop-filter: blur(3px);
    display: flex; align-items: center; justify-content: center;
    z-index: 500; animation: fadeInBg .15s ease-out;
}
@keyframes fadeInBg { from { opacity: 0; } to { opacity: 1; } }

.modal-content {
    background: #fff; border-radius: 16px;
    width: 90%; max-width: 500px; max-height: 90vh; overflow-y: auto;
    animation: slideUpModal .18s ease-out;
}
@keyframes slideUpModal {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}
.modal-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 20px; border-bottom: 1px solid #f1f5f9;
}
.modal-title {
    font-size: 15px; font-weight: 700; color: #0f172a;
    display: flex; align-items: center; gap: 8px;
}
.modal-close {
    background: #f1f5f9; border: none;
    width: 32px; height: 32px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    color: #64748b; font-size: 15px; transition: all .15s;
}
.modal-close:hover { background: #fee2e2; color: #dc2626; }
.modal-body { padding: 20px; }
.modal-footer {
    display: flex; align-items: center; justify-content: flex-end; gap: 8px;
    padding: 14px 20px; border-top: 1px solid #f1f5f9;
}

.modal-detail-row {
    display: flex; align-items: baseline; gap: 12px;
    padding: 9px 0; border-bottom: 1px solid #f1f5f9;
}
.modal-detail-row:last-child { border-bottom: none; }
.modal-detail-label { font-size: 12px; color: #94a3b8; flex-shrink: 0; min-width: 80px; }
.modal-detail-value { font-size: 13px; color: #1e293b; font-weight: 500; }

.modal-body--center { text-align: center; padding: 28px 20px; }
.modal-danger-icon  { font-size: 40px; color: #fca5a5; display: block; margin-bottom: 12px; }
.modal-body__text   { font-size: 14px; color: #374151; margin-bottom: 6px; }
.modal-body__sub    { font-size: 12.5px; color: #94a3b8; }

/* ── Fields modal list ───────────────────────────────────── */
.field-check-list { display: flex; flex-direction: column; gap: 2px; }
.field-check-item {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px; border-radius: 8px; cursor: pointer;
    transition: background .12s;
}
.field-check-item:hover { background: #f8fafc; }
.field-check-item input[type="checkbox"] { flex-shrink: 0; accent-color: #3b82f6; }
.field-check-item__name { flex: 1; font-size: 13px; font-weight: 500; color: #1e293b; }
.field-check-item__key  { font-size: 11px; color: #94a3b8; font-family: monospace; }
.pk-badge { font-size: 10px; font-weight: 700; background: #dbeafe; color: #1d4ed8; padding: 1px 7px; border-radius: 10px; }

/* ── Limit toggle (radio group) ─────────────────────────── */
.limit-toggle {
    display: flex; align-items: center; gap: 10px;
    background: #f8fafc; border: 1px solid #e2e8f0;
    border-radius: 8px; padding: 5px 12px; font-size: 12.5px; font-weight: 500; color: #475569;
}
.limit-toggle label { display: flex; align-items: center; gap: 4px; cursor: pointer; }

/* ── Form Dynamic (FormInputView) ───────────────────────── */
.form-dyn { padding: 0; max-width: 100%; }

.form-dyn-card {
    background: #fff; border: 1px solid #e2e8f0; border-radius: 12px;
    margin-bottom: 14px; overflow: hidden;
    transition: box-shadow .2s;
}
.form-dyn-card:hover { box-shadow: 0 4px 20px -4px rgba(0,0,0,.08); }

.form-dyn-card__header {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 20px; background: #f8fafc; border-bottom: 1px solid #e2e8f0;
}
.form-dyn-card__icon {
    width: 36px; height: 36px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center; font-size: 16px;
}
.form-dyn-card__title { font-size: 14px; font-weight: 700; color: #1e293b; margin: 0; }
.form-dyn-card__body  { padding: 20px; }

.form-dyn-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px 20px;
}
.form-dyn-grid--full { grid-column: 1 / -1; }
.form-dyn-group { display: flex; flex-direction: column; gap: 6px; }

.form-dyn-label { font-size: 12.5px; font-weight: 600; color: #1e293b; }
.form-dyn-label--required::after { content: ' *'; color: #ef4444; }

.form-dyn-input,
.form-dyn-select,
.form-dyn-textarea {
    width: 100%; padding: 9px 14px;
    border: 1px solid #e2e8f0; border-radius: 10px;
    font-size: 13.5px; font-family: inherit;
    background: #fff; color: #1e293b;
    transition: border-color .15s, box-shadow .15s;
    box-sizing: border-box;
}
.form-dyn-input:focus,
.form-dyn-select:focus,
.form-dyn-textarea:focus {
    outline: none; border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59,130,246,.15);
}
.form-dyn-input:disabled { background: #f8fafc; opacity: .6; cursor: not-allowed; }

.form-dyn-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: left .75rem center;
    background-repeat: no-repeat; background-size: 1.25em;
    padding-inline-end: 2.5rem;
}
[dir="ltr"] .form-dyn-select { background-position: right .75rem center; }

.form-dyn-textarea { min-height: 96px; resize: vertical; line-height: 1.6; }

.form-dyn-check {
    display: flex; align-items: center; gap: 10px; padding: 8px 0; cursor: pointer;
}
.form-dyn-check input[type="checkbox"] {
    width: 18px; height: 18px; accent-color: #3b82f6; flex-shrink: 0;
}
.form-dyn-check span { font-size: 13.5px; color: #1e293b; }

.form-dyn-money { display: flex; align-items: center; }
.form-dyn-money .form-dyn-input { border-end-end-radius: 0; border-start-end-radius: 0; }
[dir="ltr"] .form-dyn-money .form-dyn-input {
    border-end-end-radius: 0; border-start-end-radius: 0;
    border-end-start-radius: 10px; border-start-start-radius: 10px;
}
.form-dyn-addon {
    padding: 9px 14px; background: #f1f5f9;
    border: 1px solid #e2e8f0; border-inline-start: none;
    border-start-end-radius: 10px; border-end-end-radius: 10px;
    font-size: 13px; color: #64748b; white-space: nowrap;
}
[dir="ltr"] .form-dyn-addon {
    border-start-end-radius: 0; border-end-end-radius: 0;
    border-start-start-radius: 10px; border-end-start-radius: 10px;
    border-inline-start: 1px solid #e2e8f0; border-inline-end: none;
}

.form-dyn-placeholder {
    display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 12px; padding: 56px 20px;
    text-align: center; color: #94a3b8;
    background: #fff; border: 1px solid #e2e8f0; border-radius: 12px;
}
.form-dyn-placeholder .las { font-size: 40px; opacity: .35; }
.form-dyn-placeholder p { font-size: 13.5px; margin: 0; }

.form-dyn-toast {
    position: fixed; bottom: 2rem; inset-inline-start: 2rem;
    padding: 14px 20px; border-radius: 10px;
    display: flex; align-items: center; gap: 10px;
    box-shadow: 0 8px 32px -4px rgba(0,0,0,.2);
    z-index: 9999; animation: slideUpToast .25s ease-out;
}
@keyframes slideUpToast {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}
.form-dyn-toast--success { background: #22c55e; color: #fff; }
.form-dyn-toast--error   { background: #ef4444; color: #fff; }

/* ── Entry Toolbar ───────────────────────────────────────── */
.entry-toolbar {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 10px;
    background: #fff; border: 1px solid #e2e8f0; border-radius: 12px;
    padding: 12px 18px; margin-bottom: 14px;
}
.entry-toolbar__start,
.entry-toolbar__end { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* New button - green tint */
.btn-new {
    background: #f0fdf4; color: #16a34a;
    border: 1px solid #bbf7d0; border-radius: 8px;
    padding: 8px 16px; font-size: 13px; font-weight: 600;
    display: flex; align-items: center; gap: 6px;
    cursor: pointer; transition: all .15s;
}
.btn-new:hover { background: #dcfce7; border-color: #86efac; }

/* Save button - primary blue */
.btn-save {
    background: #3b82f6; color: #fff; border: none;
    border-radius: 8px; padding: 8px 18px;
    font-size: 13px; font-weight: 600;
    display: flex; align-items: center; gap: 6px;
    cursor: pointer; transition: background .15s;
}
.btn-save:hover { background: #2563eb; }
.btn-save:disabled { opacity: .65; cursor: not-allowed; }

/* Attachments button - amber tint */
.btn-attach {
    background: #fefce8; color: #b45309;
    border: 1px solid #fef08a; border-radius: 8px;
    padding: 8px 14px; font-size: 13px; font-weight: 500;
    display: flex; align-items: center; gap: 6px;
    cursor: pointer; transition: all .15s;
}
.btn-attach:hover { background: #fef9c3; border-color: #fde047; }

/* ── Radio Group (for RadioButtons ContrlType) ───────────── */
.radio-group {
    display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 0;
}
.radio-group__item {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 16px; border: 1.5px solid #e2e8f0; border-radius: 8px;
    cursor: pointer; font-size: 13.5px; font-weight: 500; color: #374151;
    transition: all .15s; user-select: none;
}
.radio-group__item:hover { border-color: #3b82f6; background: #eff6ff; color: #1d4ed8; }
.radio-group__item input[type="radio"] {
    width: 16px; height: 16px; accent-color: #3b82f6; cursor: pointer; flex-shrink: 0;
}
.radio-group__item:has(input:checked) {
    border-color: #3b82f6; background: #eff6ff; color: #1d4ed8;
}
.radio-group__empty { font-size: 12.5px; color: #94a3b8; padding: 8px 0; }

/* ── Entry Dropdown (More menu) ──────────────────────────── */
.entry-dropdown { position: relative; }
.entry-dropdown__toggle { gap: 6px; }
.entry-dropdown__menu {
    display: none; position: absolute;
    top: calc(100% + 6px); inset-inline-end: 0;
    background: #fff; border: 1px solid #e2e8f0; border-radius: 10px;
    box-shadow: 0 8px 24px -4px rgba(0,0,0,.12);
    min-width: 185px; z-index: 200;
    animation: dropIn .15s ease-out;
}
@keyframes dropIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.entry-dropdown.open .entry-dropdown__menu { display: block; }
.entry-dropdown__item {
    display: flex; align-items: center; gap: 10px;
    width: 100%; padding: 10px 16px;
    border: none; background: none;
    font-size: 13.5px; font-family: inherit; color: #374151;
    text-align: start; cursor: pointer; transition: background .12s;
}
.entry-dropdown__item:first-child { border-radius: 10px 10px 0 0; }
.entry-dropdown__item:last-child  { border-radius: 0 0 10px 10px; }
.entry-dropdown__item:hover { background: #f8fafc; color: #1d4ed8; }
.entry-dropdown__item .las { font-size: 15px; color: #94a3b8; }
.entry-dropdown__item:hover .las { color: #3b82f6; }
.entry-dropdown__item--active { background: #eff6ff; color: #1d4ed8; font-weight: 600; }
.entry-dropdown__item--active .las { color: #3b82f6; }
.entry-dropdown__divider { height: 1px; background: #f1f5f9; margin: 4px 0; }

/* ── Mobile ──────────────────────────────────────────────── */
.sidebar-overlay {
    display: none; position: fixed; inset: 0;
    background: rgba(0,0,0,.4); z-index: 49;
}
.sidebar-overlay.visible { display: block; }

@media (max-width: 768px) {
    .app-sidebar {
        position: fixed; top: 56px; bottom: 0;
        inset-inline-start: 0; z-index: 200;
        transform: translateX(-100%); width: 240px !important;
    }
    [dir="rtl"] .app-sidebar { transform: translateX(100%); }
    .app-sidebar.mobile-open { transform: translateX(0) !important; }
    .apps-grid { grid-template-columns: 1fr; }
    .content-area { padding: 12px; }
}

/* ═══════════════════════════════════════════════════════════
   Applications Page — 3-Panel Browser
   ═══════════════════════════════════════════════════════════ */

/* Page wrapper */
.apps-page {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    background: #f8fafc;
}

/* Hero header */
.apps-hero {
    background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%);
    padding: 24px 28px 20px;
    flex-shrink: 0;
}
.apps-hero__content { max-width: 600px; }
.apps-hero__title {
    margin: 0 0 6px;
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    letter-spacing: -.3px;
}
.apps-hero__subtitle {
    margin: 0;
    font-size: 14px;
    color: rgba(255,255,255,.75);
}

/* 3-column grid */
.apps-grid-wrapper {
    display: grid;
    grid-template-columns: 260px 300px 1fr;
    gap: 0;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

/* Shared column base */
.apps-col,
.menus-col,
.content-col {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    min-height: 0;
}
.apps-col   { background: #fff;    border-inline-end: 1px solid #e2e8f0; padding: 16px 12px; }
.menus-col  { background: #f8fafc; border-inline-end: 1px solid #e2e8f0; padding: 16px 12px; }
.content-col { background: #f1f5f9; padding: 20px; }

/* Column title */
.col-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: .6px;
    margin: 0 0 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e2e8f0;
}
.col-title .las { font-size: 15px; color: #94a3b8; }

/* Apps list */
.apps-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* App button */
.app-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 11px 14px;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    background: #fff;
    color: #374151;
    font-size: 14px;
    font-family: inherit;
    font-weight: 500;
    text-align: start;
    cursor: pointer;
    transition: all .15s;
}
.app-btn:hover {
    border-color: #93c5fd;
    background: #eff6ff;
    color: #1d4ed8;
}
.app-btn--active {
    border-color: #3b82f6;
    background: #eff6ff;
    color: #1e40af;
    font-weight: 600;
}
.app-btn__icon {
    font-size: 18px;
    color: #3b82f6;
    flex-shrink: 0;
}
.app-btn--active .app-btn__icon { color: #1e40af; }
.app-btn__name { flex: 1; }
.app-btn__arrow {
    font-size: 12px;
    color: #cbd5e1;
    flex-shrink: 0;
    transition: color .15s;
}
.app-btn:hover .app-btn__arrow,
.app-btn--active .app-btn__arrow { color: #3b82f6; }

/* Menu group */
.menu-group { margin-bottom: 10px; }
.menu-group__header {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 9px 12px;
    border-radius: 8px;
    background: #e0e7ff;
    color: #3730a3;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 4px;
}
.menu-group__header .las { font-size: 15px; }
.menu-group__forms {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-inline-start: 8px;
}

/* Form item */
.form-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 12px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: #475569;
    font-size: 13.5px;
    font-family: inherit;
    font-weight: 500;
    text-align: start;
    cursor: pointer;
    transition: all .15s;
}
.form-item:hover {
    background: #fff;
    border-color: #e2e8f0;
    color: #1e40af;
}
.form-item--active {
    background: #fff;
    border-color: #93c5fd;
    color: #1e40af;
    font-weight: 600;
}
.form-item__icon {
    font-size: 14px;
    color: #94a3b8;
    flex-shrink: 0;
}
.form-item--active .form-item__icon { color: #3b82f6; }
.form-item__name { flex: 1; }
.form-item__badge {
    font-size: 10.5px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 20px;
    background: #dbeafe;
    color: #1d4ed8;
    flex-shrink: 0;
}

/* Empty / error states */
.state-empty,
.state-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 56px 24px;
    text-align: center;
    border-radius: 14px;
    border: 2px dashed #e2e8f0;
    background: #fff;
}
.state-empty { color: #94a3b8; }
.state-error { color: #ef4444; border-color: #fecaca; background: #fff5f5; }
.state-empty__icon,
.state-error__icon {
    font-size: 44px;
    opacity: .4;
}
.state-empty p,
.state-error p {
    margin: 0;
    font-size: 14px;
    font-weight: 500;
}

/* Form viewer */
.form-viewer {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    overflow: hidden;
}
.form-viewer__header {
    padding: 14px 20px;
    border-bottom: 1px solid #f1f5f9;
    background: #fff;
}
.form-viewer__header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: #1e293b;
}
.form-viewer__body { padding: 20px; }

/* ── Applications page responsive ───────────────────────── */
@media (max-width: 1100px) {
    .apps-grid-wrapper {
        grid-template-columns: 220px 260px 1fr;
    }
}

@media (max-width: 860px) {
    .apps-grid-wrapper {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto 1fr;
        overflow-y: auto;
    }
    .apps-col, .menus-col, .content-col {
        overflow-y: visible;
        border-inline-end: none;
        border-bottom: 1px solid #e2e8f0;
    }
    .content-col { border-bottom: none; min-height: 300px; }
}

/* ═══════════════════════════════════════════════════════════
   NavBar — App Pill Buttons
   ═══════════════════════════════════════════════════════════ */

.navbar-apps-dropdown {
    margin-inline-start: 8px;
}

.nav-app-pill {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border: 1.5px solid transparent;
    border-radius: 20px;
    background: #f8fafc;
    color: #475569;
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: all .18s;
    position: relative;
}
.nav-app-pill:hover {
    background: color-mix(in srgb, var(--pill-color) 10%, white);
    border-color: color-mix(in srgb, var(--pill-color) 40%, white);
    color: var(--pill-color);
}
.nav-app-pill--active {
    background: color-mix(in srgb, var(--pill-color) 12%, white);
    border-color: var(--pill-color);
    color: var(--pill-color);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--pill-color) 15%, transparent);
}
/* Active indicator dot at bottom */
.nav-app-pill--active::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--pill-color);
}

.nav-app-pill__icon {
    font-size: 15px;
    flex-shrink: 0;
}
.nav-app-pill__name {
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ═══════════════════════════════════════════════════════════
   Sidebar — Current App Header
   ═══════════════════════════════════════════════════════════ */

.sidebar-app-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px 12px;
    border-bottom: 1px solid #f1f5f9;
    background: color-mix(in srgb, var(--app-clr) 8%, white);
}
.sidebar-app-header__icon {
    font-size: 22px;
    color: var(--app-clr);
    flex-shrink: 0;
}
.sidebar-app-header__info { min-width: 0; }
.sidebar-app-header__name {
    font-size: 13.5px;
    font-weight: 700;
    color: #1e293b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sidebar-app-header__sub {
    font-size: 11px;
    color: #94a3b8;
    margin-top: 1px;
}

/* ═══════════════════════════════════════════════════════════
   Dashboard Page (Applications.razor redesign)
   ═══════════════════════════════════════════════════════════ */

.dash-page {
    padding: 20px 24px;
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* ── Slim Path Breadcrumb ── */
.dash-path {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    color: #94a3b8;
    padding: 8px 0 0;
}
.dash-path__icon { font-size: 14px; }
.dash-path__seg { color: #64748b; font-weight: 500; }
.dash-path__seg--active { color: #1e40af; font-weight: 600; }
.dash-path__sep { font-size: 10px; color: #cbd5e1; }

/* ── Welcome Row ── */
.dash-welcome {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}
.dash-welcome__title {
    font-size: 22px;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 4px;
}
.dash-welcome__name { color: #3b82f6; }
.dash-welcome__sub  { font-size: 14px; color: #64748b; }

.dash-badge-admin {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    border: 1px solid #fcd34d;
    border-radius: 20px;
    color: #92400e;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}

/* ── Stats Row ── */
.dash-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}
.dash-stat {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 16px 18px;
    box-shadow: 0 1px 4px rgba(0,0,0,.04);
}
.dash-stat__ico {
    width: 44px; height: 44px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--sc) 12%, white);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.dash-stat__ico .las {
    font-size: 20px;
    color: var(--sc);
}
.dash-stat__val {
    font-size: 22px;
    font-weight: 800;
    color: #1e293b;
    line-height: 1;
    margin-bottom: 3px;
}
.dash-stat__lbl {
    font-size: 12px;
    color: #94a3b8;
    font-weight: 500;
}

/* ── Body Layout ── */
.dash-body {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 20px;
    align-items: start;
}

/* ── Section Title ── */
.dash-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 700;
    color: #374151;
    margin-bottom: 14px;
}
.dash-section-title .las { color: #94a3b8; }

/* ── App Cards Section ── */
.dash-apps-section {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 1px 4px rgba(0,0,0,.04);
}

.dash-apps-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 12px;
}

.dash-app-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    border: 2px solid #e2e8f0;
    border-radius: 14px;
    background: #fff;
    text-align: start;
    cursor: pointer;
    transition: all .2s;
    position: relative;
    overflow: hidden;
}
.dash-app-card::before {
    content: '';
    position: absolute;
    inset-inline-start: 0; top: 0; bottom: 0;
    width: 4px;
    background: var(--cc, #3b82f6);
    border-radius: 0 4px 4px 0;
    opacity: 0;
    transition: opacity .2s;
}
.dash-app-card:hover {
    border-color: color-mix(in srgb, var(--cc) 40%, white);
    box-shadow: 0 4px 16px color-mix(in srgb, var(--cc) 15%, transparent);
    transform: translateY(-2px);
}
.dash-app-card:hover::before { opacity: 1; }
.dash-app-card--active {
    border-color: var(--cc);
    background: color-mix(in srgb, var(--cc) 5%, white);
    box-shadow: 0 4px 20px color-mix(in srgb, var(--cc) 20%, transparent);
}
.dash-app-card--active::before { opacity: 1; }

.dash-app-card__iconbox {
    width: 48px; height: 48px;
    border-radius: 13px;
    background: color-mix(in srgb, var(--cc) 12%, white);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.dash-app-card__iconbox .las,
.dash-app-card__iconbox [class*=" las"],
.dash-app-card__iconbox [class*=" la-"] {
    font-size: 22px;
    color: var(--cc);
}
.dash-app-card__info { flex: 1; min-width: 0; }
.dash-app-card__name {
    font-size: 14px;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dash-app-card__desc {
    font-size: 12px;
    color: #94a3b8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dash-app-card__arrow {
    font-size: 13px;
    color: #cbd5e1;
    flex-shrink: 0;
    transition: color .2s;
}
.dash-app-card:hover .dash-app-card__arrow,
.dash-app-card--active .dash-app-card__arrow { color: var(--cc); }

/* Loading placeholder */
.dash-loading {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 32px;
    color: #94a3b8;
    font-size: 14px;
    justify-content: center;
}
.dash-loading .la-spin { font-size: 20px; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Right Panel ── */
.dash-right {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Shared card title */
.dash-card-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    font-weight: 700;
    color: #374151;
    margin-bottom: 14px;
}
.dash-card-title .las { color: #94a3b8; font-size: 16px; }

/* ── Search Card ── */
.dash-search-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 18px;
    box-shadow: 0 1px 4px rgba(0,0,0,.04);
}
.dash-search-wrap {
    position: relative;
    margin-bottom: 8px;
}
.dash-search-wrap__icon {
    position: absolute;
    inset-inline-start: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: 15px;
    pointer-events: none;
}
.dash-search-input {
    width: 100%;
    padding: 10px 14px 10px 40px;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    font-size: 13.5px;
    font-family: inherit;
    color: #1e293b;
    outline: none;
    transition: border-color .15s;
    background: #f8fafc;
}
[dir="rtl"] .dash-search-input { padding: 10px 40px 10px 14px; }
.dash-search-input:focus {
    border-color: #3b82f6;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(59,130,246,.1);
}

.dash-search-results {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 8px;
    max-height: 260px;
    overflow-y: auto;
}
.dash-search-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border: none;
    border-radius: 8px;
    background: transparent;
    text-align: start;
    cursor: pointer;
    transition: background .12s;
    font-family: inherit;
    width: 100%;
}
.dash-search-item:hover { background: #f8fafc; }
.dash-search-item__icon {
    font-size: 15px;
    flex-shrink: 0;
}
.si--form  { color: #3b82f6; }
.si--menu  { color: #8b5cf6; }
.dash-search-item__text { flex: 1; min-width: 0; }
.dash-search-item__name {
    font-size: 13px;
    font-weight: 600;
    color: #1e293b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dash-search-item__path {
    font-size: 11.5px;
    color: #94a3b8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dash-search-item__arr { font-size: 11px; color: #cbd5e1; flex-shrink: 0; }

.dash-search-empty,
.dash-search-hint {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 12px;
    color: #94a3b8;
    font-size: 13px;
    border-radius: 8px;
    background: #f8fafc;
    margin-top: 8px;
}
.dash-search-empty .las,
.dash-search-hint .las { font-size: 16px; }

/* ── Chart Card ── */
.dash-chart-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 18px;
    box-shadow: 0 1px 4px rgba(0,0,0,.04);
}

/* Bar chart */
.dash-bar-chart {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 18px;
}
.dash-bar-row {
    display: flex;
    align-items: center;
    gap: 10px;
}
.dash-bar-label {
    font-size: 12px;
    font-weight: 600;
    color: #475569;
    width: 80px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 0;
    text-align: end;
}
[dir="ltr"] .dash-bar-label { text-align: start; }
.dash-bar-track {
    flex: 1;
    height: 10px;
    background: #f1f5f9;
    border-radius: 10px;
    overflow: hidden;
}
.dash-bar-fill {
    height: 100%;
    border-radius: 10px;
    transition: width .6s cubic-bezier(.4,0,.2,1);
    min-width: 4px;
}
.dash-bar-count {
    font-size: 12px;
    font-weight: 700;
    color: #64748b;
    width: 24px;
    text-align: center;
    flex-shrink: 0;
}

/* Donut mini rings */
.dash-rings {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
    padding-top: 6px;
    border-top: 1px solid #f1f5f9;
}
.dash-ring {
    width: 52px; height: 52px;
    border-radius: 50%;
    position: relative;
    flex-shrink: 0;
}
.dash-ring__hole {
    position: absolute;
    inset: 9px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}
.dash-ring__num {
    font-size: 11px;
    font-weight: 800;
    color: #1e293b;
}

/* ── Dashboard Responsive ── */
@media (max-width: 1200px) {
    .dash-body { grid-template-columns: 1fr 320px; }
}
@media (max-width: 900px) {
    .dash-body { grid-template-columns: 1fr; }
    .dash-stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .dash-page { padding: 14px 16px; }
    .dash-stats { grid-template-columns: 1fr 1fr; gap: 10px; }
    .dash-apps-grid { grid-template-columns: 1fr; }
}


/* ============================================================================
   Additions for POC — components that reference classes not in site.css:
   AppCard (uses __stripe / __logo / __open-btn), Footer (page-footer).
   ============================================================================ */

.page-footer {
    padding: 16px 20px;
    background: var(--mx-surface);
    border-top: 1px solid var(--mx-border);
    text-align: center;
    color: var(--mx-text-muted);
    font-size: 12.5px;
}
.page-footer__copy { margin: 0; }

/* AppCard extras — the site.css .app-card is the horizontal pill.
   For the grid on /apps we use a vertical card with a color stripe. */
.app-card__stripe {
    height: 4px;
    width: 100%;
    display: block;
}
.app-card__logo {
    width: 56px; height: 56px; margin: 12px auto 8px;
    border-radius: 14px; border: 1px solid transparent;
    display: flex; align-items: center; justify-content: center;
}
.app-card__logo-icon { font-size: 26px; }
.app-card .app-card__logo-img { width: auto; height: auto; max-width: 44px; max-height: 44px; object-fit: contain; }
.app-card__footer   { margin-top: 8px; }
.app-card__open-btn {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12.5px; font-weight: 700;
}

/* =============================================================================
   MINDEXIA OVERRIDES — appended after the ported freelancer shell
   -----------------------------------------------------------------------------
   The original dynamic-ui.css has hard-coded Tailwind blue palette. This block
   remaps every meaningful surface/color to Mindexia tokens so the brand paints
   through consistently, without touching the layout structure above.
   All selectors below use higher specificity or come last, so they win.
   ============================================================================= */

/* ── Body / font — align with tokens ─────────────────────────────────────── */
body,
[dir="rtl"],
[dir="ltr"] {
    font-family: var(--mx-font-ar);
    background: var(--mx-bg);
    color: var(--mx-text);
}
[dir="ltr"] { font-family: var(--mx-font-en); }

/* ── Top Navbar ─────────────────────────────────────────────────────────── */
.top-navbar {
    background: var(--mx-surface);
    border-bottom: 1px solid var(--mx-border);
    box-shadow: var(--mx-shadow-xs);
}
.navbar-brand,
.navbar-brand a {
    color: var(--mx-brand);
    font-weight: 700;
    font-family: var(--mx-font-en);
    letter-spacing: -0.01em;
}
.navbar-menu-toggler {
    color: var(--mx-text);
    background: transparent;
    border-radius: var(--mx-radius);
}
.navbar-menu-toggler:hover { background: var(--mx-surface-alt); color: var(--mx-brand); }

.navbar-actions button,
.navbar-lang-btn,
.navbar-logout-btn {
    background: transparent;
    color: var(--mx-text);
    border-radius: var(--mx-radius);
    transition: background var(--mx-t-fast), color var(--mx-t-fast);
}
.navbar-lang-btn:hover     { background: var(--mx-brand-soft); color: var(--mx-brand); }
.navbar-logout-btn:hover   { background: var(--mx-danger-50);  color: var(--mx-danger); }
.navbar-user { color: var(--mx-text-muted); }

/* ── Sidebar ────────────────────────────────────────────────────────────── */
.app-sidebar {
    background: var(--mx-sidebar-bg);
    color: var(--mx-sidebar-text);
    border-left: 1px solid transparent;
}
.sidebar-section > h4,
.sidebar-section-title {
    color: rgba(255,255,255,0.5);
    font-size: var(--mx-fs-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 600;
}
.nav-item, .sidebar-dropdown, .sidebar-item {
    color: var(--mx-sidebar-text);
    border-radius: var(--mx-radius);
    transition: background var(--mx-t-fast), color var(--mx-t-fast);
}
.nav-item:hover, .sidebar-item:hover, .sidebar-dropdown:hover {
    background: var(--mx-sidebar-item-hover);
    color: var(--mx-sidebar-text-active);
}
.nav-item.active,
.sidebar-item.active,
.nav-item[aria-current="page"] {
    background: var(--mx-sidebar-item-active);
    color: var(--mx-sidebar-text-active);
    border-inline-end: 3px solid var(--mx-sidebar-marker);
    font-weight: 600;
}

/* ── Content area ───────────────────────────────────────────────────────── */
.main-content, .content-area {
    background: var(--mx-bg);
    color: var(--mx-text);
}

/* ── Breadcrumb ─────────────────────────────────────────────────────────── */
.page-header-compact {
    background: var(--mx-surface);
    border-bottom: 1px solid var(--mx-border);
    color: var(--mx-text);
    padding: var(--mx-space-3) var(--mx-space-5);
}
.breadcrumb-inline a { color: var(--mx-text-brand); }
.breadcrumb-inline a:hover { color: var(--mx-accent-hover); }
.breadcrumb-inline .separator,
.breadcrumb-inline .divider { color: var(--mx-text-muted); }

/* ── App / Menu cards (Apps page) ───────────────────────────────────────── */
.apps-grid .app-card,
.menu-card {
    background: var(--mx-surface);
    border: 1px solid var(--mx-border);
    border-radius: var(--mx-radius-lg);
    box-shadow: var(--mx-shadow-xs);
    transition: transform var(--mx-t-base), box-shadow var(--mx-t-base), border-color var(--mx-t-base);
}
.apps-grid .app-card:hover,
.menu-card:hover {
    border-color: var(--mx-brand);
    box-shadow: var(--mx-shadow-md);
    transform: translateY(-2px);
}

.app-welcome {
    background: linear-gradient(135deg, var(--mx-brand-soft), transparent);
    border: 1px solid var(--mx-border);
    border-radius: var(--mx-radius-lg);
    color: var(--mx-text);
    padding: var(--mx-space-6);
}
.app-welcome h1, .app-welcome h2 { color: var(--mx-brand); }

/* ── Toolbar / search / dropdowns ───────────────────────────────────────── */
.grid-toolbar {
    background: var(--mx-surface);
    border: 1px solid var(--mx-border);
    border-radius: var(--mx-radius-md);
    padding: var(--mx-space-3) var(--mx-space-4);
}
.search-input-wrap {
    background: var(--mx-surface-alt);
    border: 1px solid var(--mx-border);
    border-radius: var(--mx-radius);
}
.search-input-wrap:focus-within {
    border-color: var(--mx-border-focus);
    box-shadow: var(--mx-shadow-focus);
}
.search-input-wrap input {
    background: transparent;
    border: none;
    height: auto;
}
.search-input-wrap input:focus { box-shadow: none; }
.search-input-wrap span { color: var(--mx-text-faint); }

/* ── List page / data grid rows ─────────────────────────────────────────── */
.list-page .grid-row,
.list-page table th {
    background: var(--mx-brand);
    color: var(--mx-text-inverse);
}
.list-page table td { border-bottom: 1px solid var(--mx-border); color: var(--mx-text); }
.list-page table tbody tr:hover td { background: var(--mx-surface-hover); }

/* ── Sidebar/nav badges ─────────────────────────────────────────────────── */
.nav-badge {
    background: var(--mx-sidebar-item-active);
    color: var(--mx-sidebar-text-active);
    border-radius: var(--mx-radius-pill);
    padding: 1px var(--mx-space-2);
    font-size: var(--mx-fs-xs);
    font-weight: 600;
}

/* =============================================================================
   Sidebar toggle fix (2 Jul 2026)
   -----------------------------------------------------------------------------
   Original design assumed sidebar was always visible on desktop and only a
   drawer on mobile — clicking ☰ only opened the mobile drawer. On desktop the
   button just added a fullscreen overlay on top of the still-visible sidebar,
   which is exactly what the user saw as a bug.

   New model — TWO classes controlled by the same boolean (_isOpen):
     .sidebar-visible → user wants the sidebar shown
     .sidebar-hidden  → user wants it collapsed / drawer closed

   Desktop (min-width: 769px):
     .sidebar-visible → normal 240px column
     .sidebar-hidden  → width 0, no border, no padding (fully collapsed)

   Mobile (max-width: 768px):
     .app-sidebar is a fixed drawer positioned off-screen by default.
     .sidebar-visible → translateX(0) → slides in as a drawer.
     .sidebar-hidden  → stays translated off-screen.
     The overlay is ONLY rendered on mobile.
   ============================================================================= */

/* ── Base — visible column on desktop ─────────────────────────────────────── */
.app-sidebar {
    width: 240px;
    background: var(--mx-sidebar-bg);
    color: var(--mx-sidebar-text);
    border: none;
    overflow-y: auto;
    flex-shrink: 0;
    transition: width var(--mx-t-slow), transform var(--mx-t-slow);
}

.app-sidebar.sidebar-hidden {
    width: 0;
    overflow: hidden;
    padding: 0;
    border: none;
}

/* Any inner text tries to wrap awkwardly at width 0 — clamp it */
.app-sidebar.sidebar-hidden * {
    white-space: nowrap;
    pointer-events: none;
}

/* ── Overlay — desktop-invisible ──────────────────────────────────────────── */
/* The original freelancer CSS at line 745 sets `.sidebar-overlay.visible {
   display: block }` unconditionally. That's why the darkening covers the
   whole desktop screen when the sidebar toggle is clicked. These two rules
   BEAT that (same specificity, defined later in the file). Mobile brings
   `.visible` back inside the @media block below. */
.sidebar-overlay,
.sidebar-overlay.visible {
    display: none !important;
}

/* ── Mobile — sidebar becomes a slide-in drawer ───────────────────────────── */
@media (max-width: 768px) {
    .app-sidebar {
        position: fixed;
        top: 56px;                /* below the navbar */
        bottom: 0;
        inset-inline-start: 0;
        z-index: var(--mx-z-sidebar);
        width: 260px !important;
        max-width: 85vw;
        transform: translateX(-100%);
        box-shadow: var(--mx-shadow-lg);
    }
    [dir="rtl"] .app-sidebar { transform: translateX(100%); }

    /* Mobile "visible" — slide in */
    .app-sidebar.sidebar-visible { transform: translateX(0) !important; }

    /* Mobile "hidden" — stay off-screen (redundant safety net) */
    .app-sidebar.sidebar-hidden {
        width: 260px !important;   /* keep width so animation looks smooth */
        transform: translateX(-100%) !important;
        overflow: hidden;
    }
    [dir="rtl"] .app-sidebar.sidebar-hidden {
        transform: translateX(100%) !important;
    }

    /* Overlay visible on mobile only when the drawer is open.
       Full styling here (not inherited) because the desktop rule uses !important. */
    .sidebar-overlay.visible {
        display: block !important;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.45);
        z-index: calc(var(--mx-z-sidebar) - 1);
        cursor: pointer;
    }
}

/* ── Hamburger button visibility ─────────────────────────────────────────── */
/* On desktop the hamburger stays visible too — it now means "collapse". */
.navbar-menu-toggler {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--mx-radius);
    background: transparent;
    border: 1px solid transparent;
    color: var(--mx-text);
    cursor: pointer;
    transition: background var(--mx-t-fast), color var(--mx-t-fast);
}
.navbar-menu-toggler:hover {
    background: var(--mx-brand-soft);
    color: var(--mx-brand);
}
.navbar-menu-toggler .las { font-size: 22px; }

/* =============================================================================
   Brand logo — used in NavBar and Login. The SVG contains both the mx mark
   AND the "MINDEXIA" wordmark stacked. In the navbar we only want the mark,
   so we crop the SVG using object-fit + a fixed viewport.
   ============================================================================= */

.navbar-brand {
    display: inline-flex;
    align-items: center;
    gap: var(--mx-space-2);
    height: 100%;
    padding: 0 var(--mx-space-2);
    cursor: pointer;
    border-radius: var(--mx-radius);
    transition: background var(--mx-t-fast);
}
.navbar-brand:hover { background: var(--mx-brand-soft); }

/* Show only the top ~70% of the SVG (the mx mark) — hide the MINDEXIA wordmark.
   The SVG viewBox is 0 0 2048 2048; the mark occupies roughly rows 100-1400.
   object-view-box works in newer browsers; the width/height + clip-path is
   the safe fallback. */
.navbar-brand__logo {
    height: 36px;
}

/* =============================================================================
   App-card fix (Apps page grid)
   -----------------------------------------------------------------------------
   The freelancer's CSS at line 203 sets `.app-card { display: flex; ... }` and
   adds a colored `::before` stripe on the leading edge. That contradicts the
   agreed design (centered card, gradient logo tile, name + sub below).
   These rules pin the layout to the design system and remove the stripe.
   ============================================================================= */

.apps-grid .app-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start;
    text-align: center !important;
    gap: var(--mx-space-2);
    padding: var(--mx-space-5) !important;
    overflow: visible !important;
    background: var(--mx-surface) !important;
    border: 1px solid var(--mx-border) !important;
    border-radius: var(--mx-radius-lg) !important;
    color: inherit;
}

/* Kill the colored leading-edge stripe the freelancer's CSS injects. */
.apps-grid .app-card::before {
    content: none !important;
    display: none !important;
    background: transparent !important;
    width: 0 !important;
}

/* The gradient logo tile — 64x64 with brand gradient. If the customer
   registered a real image (App.LogoSrc), the <img> renders inside the tile. */
.apps-grid .app-card .app-logo {
    width: 64px;
    height: 64px;
    border-radius: var(--mx-radius-md);
    background: linear-gradient(135deg, var(--mx-navy-600), var(--mx-sky-400));
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: var(--mx-fs-3xl);
    font-family: var(--mx-font-ar);
    letter-spacing: -0.02em;
    box-shadow: var(--mx-shadow-sm);
    flex-shrink: 0;
    margin: 0 auto var(--mx-space-2);
    overflow: hidden;
}
.apps-grid .app-card .app-logo img {
    width: 70%;
    height: 70%;
    object-fit: contain;
    /* Keep image logos as-is (they may be white-on-color icons); no filter. */
}

.apps-grid .app-card .app-name {
    color: var(--mx-text-strong);
    font-weight: 600;
    font-size: var(--mx-fs-md);
    margin: 0;
    line-height: 1.3;
}

.apps-grid .app-card .app-sub {
    color: var(--mx-text-muted);
    font-size: var(--mx-fs-sm);
    margin: 0;
    line-height: 1.3;
}

.apps-grid .app-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--mx-shadow-md);
    border-color: var(--mx-brand) !important;
}

/* Also hide any leftover freelancer sub-elements just in case they render. */
.apps-grid .app-card .app-card__icon-wrap,
.apps-grid .app-card .app-card__body,
.apps-grid .app-card .app-card__arrow,
.apps-grid .app-card .app-card__stripe {
    display: none !important;
}