@font-face { font-family: Almarai; src: url('../fonts/Almarai-Light.ttf') format('truetype'); font-style: normal; font-weight: 300; font-display: swap; }
@font-face { font-family: Almarai; src: url('../fonts/Almarai-Regular.ttf') format('truetype'); font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: Almarai; src: url('../fonts/Almarai-Bold.ttf') format('truetype'); font-style: normal; font-weight: 600 700; font-display: swap; }
@font-face { font-family: Almarai; src: url('../fonts/Almarai-ExtraBold.ttf') format('truetype'); font-style: normal; font-weight: 800 900; font-display: swap; }
html, body, button, input, textarea, select, .table, svg text {
    font-family: Almarai, Tahoma, Arial, sans-serif;
}
body { line-height: 1.65; }
input, textarea, select, button { font: inherit; }
.page-main { min-width: 0; }
.page-main > .page-body { flex: 1; height: auto; min-height: 0; }
.language-switcher { display: flex; gap: 4px; justify-content: center; padding-block: 6px 12px; }
.language-option { display: flex; flex: 1; align-items: center; justify-content: center; gap: 6px; color: var(--text-secondary); text-decoration: none; border: 1px solid transparent; border-radius: 6px; min-height: 38px; padding: 5px; font-size: 11px; }
.language-option img { object-fit: cover; border-radius: 3px; box-shadow: 0 0 0 1px #0001; flex-shrink: 0; }
.language-option:hover { background: var(--bg); color: var(--text); }
.language-option.selected { border-color: var(--primary); background: var(--primary-light); color: var(--primary); }
.language-option:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.page-sidebar.collapsed .language-switcher { flex-direction: column; }
.page-sidebar.collapsed .language-name { display: none; }
.page-sidebar { border-right: 0; border-inline-end: 1px solid var(--border); }
.sidebar-version { font-size: 10px; color: var(--text-secondary); margin-inline-start: auto; }
.page-main.chat-open { margin-inline-end: min(380px, 100vw); }
.ai-chat-panel { inset-inline-end: 0; width: min(380px, 100vw) !important; }
.ai-chat-launcher { inset-inline-end: 24px; }
html[dir='rtl'] .table th, html[dir='rtl'] .table td { text-align: start; }
html[dir='rtl'] .toolbar-right { margin-left: 0; margin-inline-start: auto; }
html[dir='rtl'] .search-input { padding-inline: 32px 30px; }
html[dir='rtl'] .search-icon { left: auto; right: 10px; }
html[dir='rtl'] .search-clear { right: auto; left: 8px; }
html[dir='rtl'] .page-sidebar .collapse-btn .nav-icon { transform: rotate(180deg); }
html[dir='rtl'] .page-sidebar.collapsed .collapse-btn .nav-icon { transform: none; }
html[dir='rtl'] .form-group, html[dir='rtl'] .card-body, html[dir='rtl'] .modal-content { text-align: start; }
/* Keep chart coordinates and scroll synchronization in chronological order. */
.gantt-main, .histogram-body, #logic-diagram-container, #network-body { direction: ltr; }
html[dir='rtl'] .gantt-left { direction: rtl; }
html[dir='rtl'] .gantt-left input, input[type='date'], input[type='number'], input[type='url'], input[type='email'] { direction: ltr; }
html[dir='rtl'] .gantt-left .col-name { text-align: right; }
@media (max-width: 680px) {
    .page-sidebar { width: 64px; }
    .page-sidebar .sidebar-header { padding-inline: 8px; }
    .page-sidebar .sidebar-title, .page-sidebar .sidebar-version, .page-sidebar .nav-label, .language-name { display: none; }
    .page-sidebar .sidebar-nav { padding-inline: 4px; }
    .page-sidebar .nav-item { justify-content: center; padding-inline: 4px; }
    .language-switcher { flex-direction: column; }
    .toolbar { flex-wrap: wrap; }
    .page-main.chat-open { margin-inline-end: 0; }
    .modal-content { max-width: calc(100vw - 24px); }
}

.card-actions { flex-wrap: wrap; }
.card-actions .btn { display: inline-flex; align-items: center; justify-content: center; gap: 4px; white-space: nowrap; text-decoration: none; min-height: 32px; }
.gantt-left .col-date, .gantt-statusbar { unicode-bidi: plaintext; }

@media (max-width: 680px) {
    .project-cards { grid-template-columns: minmax(0, 1fr); }
    .project-card { min-width: 0; }
}