/* أقل من 375px فقط — يُحمّل آخر ملف CSS في الصفحة */
@media screen and (max-width: 374px) {
  :root {
    --layout-pad-x: 14px;
    --layout-pad-y: 8px;
    --section-gap: 6px;
    --card-pad: 8px;
    --btn-pad-y: 5px;
    --btn-pad-x: 7px;
    --input-pad-y: 5px;
    --input-pad-x: 8px;
    --sidebar-width: 248px;
    --page-title-size: 17px;
    --kpi-value-size: clamp(15px, 4.2vw, 18px);
    --kpi-label-size: 12px;
  }

  html {
    font-size: 12.5px;
  }

  .btn {
    gap: 4px !important;
    padding: var(--btn-pad-y) var(--btn-pad-x) !important;
    font-size: 10px !important;
    line-height: 1.2 !important;
    min-height: 0 !important;
  }

  .btn-sm {
    padding: 4px 6px !important;
    font-size: 10px !important;
  }

  .page-header {
    gap: 4px !important;
    margin-bottom: 6px !important;
  }

  .main-content {
    padding: var(--layout-pad-y) var(--layout-pad-x) !important;
  }

  .main-content.files-page {
    padding: var(--layout-pad-y) 14px !important;
  }

  .sidebar,
  .sidebar.open {
    width: min(86vw, var(--sidebar-width)) !important;
    max-width: var(--sidebar-width);
  }

  .page-header h1,
  .page-header .page-title-text {
    font-size: 17px !important;
    line-height: 1.2;
    gap: 6px;
  }

  .page-header .page-icon .app-icon {
    font-size: 0.85em;
  }

  /* ── عناوين النماذج والحقول (كل الصفحات) ── */
  .main-content .input-group label,
  .main-content form label,
  .card .input-group label,
  .filters-bar .input-group label,
  .files-form-grid .input-group label,
  .invoice-contact-options legend {
    font-size: 11px !important;
    margin-bottom: 3px !important;
    line-height: 1.25 !important;
    letter-spacing: 0 !important;
  }

  .main-content .input,
  .main-content .select,
  .main-content .textarea,
  .main-content form .input,
  .main-content form .select,
  .main-content form .textarea {
    font-size: 11px !important;
    padding: var(--input-pad-y) var(--input-pad-x) !important;
    min-height: 0 !important;
    line-height: 1.25 !important;
  }

  .filters-bar .input-group {
    min-width: 0 !important;
    flex: 1 1 100% !important;
  }

  .filters-bar .input,
  .filters-bar .select,
  .filters-bar input[type="date"],
  .filters-bar input[type="search"] {
    font-size: 11px !important;
    padding: var(--input-pad-y) var(--input-pad-x) !important;
    min-height: 0 !important;
    line-height: 1.25 !important;
  }

  .filters-bar .input-group label {
    font-size: 10px !important;
    margin-bottom: 2px !important;
  }

  .main-content .input-group {
    margin-bottom: 8px !important;
  }

  .form-hint,
  .label-optional {
    font-size: 10px !important;
    line-height: 1.3 !important;
  }

  /* ── عناوين الأقسام والبطاقات ── */
  .main-content h2,
  .main-content .card > h2,
  .main-content .card > h3,
  .main-content .panel-card > h3,
  .modal h2,
  .modal h3,
  .modal-header h2,
  .modal-header h3,
  .client-section-title,
  .entity-history-head h3,
  .entity-card-title,
  .project-card-title,
  .files-section h3,
  .page-toolbar h3,
  .tabs-group .tabs-header h3 {
    font-size: 12px !important;
    margin-bottom: 5px !important;
    line-height: 1.25 !important;
  }

  .main-content .card > h3,
  .chart-card h3,
  .dashboard-tables .card > h3 {
    font-size: 12px !important;
    margin-bottom: 5px !important;
  }

  .card.panel-card,
  .main-content form.card {
    padding: var(--card-pad) !important;
  }

  .kpi-grid .kpi-card .label,
  .kpi-card .label {
    font-size: 12px !important;
    margin-bottom: 4px;
  }

  .kpi-grid .kpi-card .value,
  .kpi-card .value,
  .kpi-card .value .money-amount,
  .kpi-card .value .money-value,
  .kpi-card .value .kpi-main {
    font-size: clamp(15px, 4.2vw, 18px) !important;
  }

  .kpi-compare {
    font-size: 10px !important;
  }

  /* ── جداول — رؤوس أصغر ومتناسقة ── */
  .main-content table thead th,
  .main-content table th,
  table thead th,
  table th {
    font-size: 10px !important;
    font-weight: 600 !important;
    padding: 5px 3px !important;
    line-height: 1.2 !important;
    white-space: nowrap;
  }

  .main-content table tbody td,
  .main-content table td,
  table tbody td,
  table td {
    font-size: 10px !important;
    padding: 4px 3px !important;
    line-height: 1.25 !important;
  }

  table {
    font-size: 10px !important;
  }

  .entity-card-meta,
  .project-card-meta {
    font-size: 10px !important;
  }

  .entity-card-meta .label,
  .project-card-meta .label {
    font-size: 9px !important;
  }

  .entity-card-title,
  .project-card-title,
  .entity-card-title a,
  .project-card-title a {
    font-size: 12px !important;
  }

  table td .badge,
  .entity-card-status .badge,
  .project-card-status .badge,
  .entity-card .badge,
  .project-card .badge {
    font-size: 9px !important;
    padding: 2px 5px !important;
    line-height: 1.2 !important;
    font-weight: 600 !important;
    width: auto !important;
    max-width: 100%;
  }

  .entity-card-status,
  .project-card-status {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-top: 4px !important;
  }

  .entity-card,
  .project-card {
    padding: var(--card-pad) var(--card-pad) var(--space-1) !important;
    gap: var(--space-1) !important;
  }

  .entity-card-progress,
  .project-card-progress {
    padding-top: 6px !important;
    margin-top: 2px !important;
  }

  .entity-card-progress .progress-bar,
  .project-card-progress .progress-bar {
    height: 6px !important;
  }

  table td .money-value,
  table td .money-amount {
    font-size: inherit !important;
  }

  .sar-icon,
  td .sar-icon,
  .money-value .sar-icon,
  table .sar-icon,
  .kpi-card .value .sar-icon {
    width: 1em !important;
    height: 1.05em !important;
    min-width: 12px !important;
    min-height: 12px !important;
    flex-shrink: 0 !important;
  }

  table td .progress-pct-label {
    font-size: 9px !important;
  }

  .filters-bar {
    gap: 6px !important;
    padding: var(--card-pad) !important;
    margin-bottom: var(--section-gap) !important;
  }

  .view-toggle {
    gap: 4px !important;
    width: 100% !important;
  }

  .view-toggle button {
    padding: 4px 7px !important;
    font-size: 10px !important;
    line-height: 1.2 !important;
  }

  .table-actions {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: 3px !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 4.5rem !important;
    margin: 0 !important;
  }

  .table-actions > .btn,
  .table-actions > a.btn,
  .table-actions > button {
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 3px 5px !important;
    font-size: 9px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
  }

  .page-actions,
  .header-actions,
  .invoice-view-actions,
  .entity-card-actions,
  .project-card-actions {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    row-gap: 4px !important;
    width: 100% !important;
    align-items: stretch !important;
    margin: 0 !important;
  }

  .page-actions > .btn,
  .page-actions > a.btn,
  .page-actions > button,
  .page-actions .export-dropdown,
  .header-actions > .btn,
  .header-actions > a.btn,
  .header-actions > button,
  .header-actions > .export-dropdown,
  .header-actions .export-dropdown,
  .invoice-view-actions > .btn,
  .invoice-view-actions > a.btn,
  .entity-card-actions > .btn,
  .entity-card-actions > a.btn,
  .project-card-actions > .btn,
  .project-card-actions > a.btn {
    flex: 1 1 calc(50% - 2px) !important;
    max-width: calc(50% - 2px) !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: var(--btn-pad-y) var(--btn-pad-x) !important;
    font-size: 10px !important;
  }

  .header-actions .export-dropdown,
  .page-actions .export-dropdown {
    display: flex !important;
    min-width: 0 !important;
  }

  .header-actions .export-dropdown .export-toggle,
  .header-actions .export-dropdown > .btn,
  .page-actions .export-dropdown .export-toggle,
  .page-actions .export-dropdown > .btn {
    width: 100% !important;
    margin: 0 !important;
    padding: var(--btn-pad-y) var(--btn-pad-x) !important;
    font-size: 10px !important;
  }

  .page-header .header-actions .btn,
  .page-header .page-actions .btn {
    padding: var(--btn-pad-y) var(--btn-pad-x) !important;
    font-size: 10px !important;
  }

  .page-actions > .btn:only-child,
  .page-actions > a.btn:only-child,
  .page-actions > button:only-child,
  .header-actions > .btn:only-child,
  .header-actions > a.btn:only-child,
  .header-actions > button:only-child,
  .table-actions > .btn:only-child,
  .table-actions > a.btn:only-child,
  .table-actions > button:only-child {
    flex: 1 1 100% !important;
    max-width: 100% !important;
  }

  .page-header > .btn,
  .page-header > a.btn {
    flex: 0 1 auto !important;
    max-width: none !important;
    width: auto !important;
    padding: var(--btn-pad-y) var(--btn-pad-x) !important;
  }

  .dash-custom-range {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: flex-end !important;
  }

  .dash-custom-range #dash-apply {
    flex: 1 1 calc(50% - 2px) !important;
    max-width: calc(50% - 2px) !important;
    padding: var(--btn-pad-y) var(--btn-pad-x) !important;
  }

  .chart-empty,
  .empty-state,
  .empty-hint,
  td.empty-state {
    font-size: 11px !important;
    line-height: 1.35 !important;
    padding: 8px !important;
  }

  .charts-grid {
    gap: var(--space-1) !important;
    margin-bottom: var(--section-gap) !important;
  }

  .chart-card {
    padding: var(--card-pad) !important;
  }

  .chart-wrap {
    min-height: 0 !important;
  }

  .chart-legend-item,
  .chart-legend-label,
  .chart-legend-meta {
    font-size: 10px !important;
  }

  /* نوافذ الاستيراد والتصدير */
  #modal-import .modal,
  .modal.modal-import,
  .modal.modal-export,
  .export-modal-overlay .modal {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 14px !important;
    max-width: min(100%, calc(100vw - 2 * var(--layout-pad-x))) !important;
    border-radius: var(--radius-md) !important;
  }

  #modal-import .modal h3,
  .modal.modal-import h3,
  .modal.modal-export h3,
  .export-modal-overlay .modal > h3 {
    font-size: 12px !important;
    margin: 0 0 2px !important;
    padding-inline-end: 2.25rem;
    line-height: 1.3 !important;
  }

  #modal-import .modal-close,
  .modal.modal-import .modal-close,
  .modal.modal-export .modal-close,
  .export-modal-overlay .modal-close {
    position: absolute;
    top: 8px;
    inset-inline-start: 8px;
    width: 28px !important;
    height: 28px !important;
    font-size: 16px !important;
  }

  .export-format-list {
    gap: 4px !important;
  }

  .export-format-list button {
    font-size: 11px !important;
    padding: 8px 10px !important;
  }

  #modal-import .input-group,
  .modal.modal-import .input-group {
    margin-bottom: 0 !important;
  }

  #modal-import .input-group label,
  .modal.modal-import .input-group label {
    font-size: 10px !important;
    margin-bottom: 2px !important;
  }

  #modal-import input[type="file"],
  .modal.modal-import input[type="file"] {
    width: 100% !important;
    font-size: 10px !important;
    padding: var(--input-pad-y) var(--input-pad-x) !important;
  }

  #modal-import .import-preview,
  #modal-import #import-preview {
    font-size: 10px !important;
    max-height: 120px;
    overflow: auto;
    margin: 0 !important;
    padding: 6px !important;
  }

  #import-preview table th,
  #import-preview table td {
    font-size: 9px !important;
    padding: 3px 4px !important;
  }

  #modal-import .modal-import-actions,
  .modal.modal-import .modal-import-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
    margin-top: 4px;
  }

  #modal-import .modal-import-actions .btn,
  #modal-import .modal > .btn,
  .modal.modal-import .modal-import-actions .btn {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 auto !important;
    margin: 0 !important;
    font-size: 10px !important;
    padding: var(--btn-pad-y) var(--btn-pad-x) !important;
  }

  /* ── صفحة الإعدادات ── */
  .profile-page .tabs-group {
    margin-top: 4px !important;
  }

  .profile-page .tabs-group .tabs-header {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: stretch !important;
    gap: 8px !important;
    row-gap: 8px !important;
    margin-bottom: 8px !important;
    padding-bottom: 8px !important;
  }

  .profile-page .tabs-group .tab-btn {
    flex: 1 1 calc(50% - 4px) !important;
    min-width: 0 !important;
    margin: 0 !important;
    font-size: 10px !important;
    padding: 6px 8px !important;
    line-height: 1.25 !important;
    box-sizing: border-box !important;
  }

  .profile-page .tabs-group .tab-panel {
    padding: 4px 0 0 !important;
  }

  .profile-page .tabs-group .tab-panel.active {
    gap: 8px !important;
  }

  .profile-page .tabs-group .tab-panel .card,
  .profile-page .tabs-group .tab-panel form.card,
  .profile-page .settings-types-card,
  .profile-page .numbering-card {
    padding: 6px 8px !important;
  }

  .profile-page .numbering-block {
    padding: 6px 8px !important;
  }

  .profile-page .profile-admin-notice {
    padding: 6px 8px !important;
    gap: 6px !important;
  }

  .profile-page .profile-hero {
    gap: 6px !important;
    margin-bottom: 0 !important;
  }

  .profile-page .input-group {
    margin-bottom: 6px !important;
  }

  .profile-page .input-group label {
    font-size: 10px !important;
    margin-bottom: 2px !important;
  }

  .profile-page .input,
  .profile-page .select,
  .profile-page .textarea,
  .profile-page form .input,
  .profile-page form .select,
  .profile-page form .textarea {
    font-size: 10px !important;
    padding: 5px 7px !important;
  }

  .profile-page .settings-section-title {
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    margin-bottom: 4px !important;
    color: var(--color-soft-orange) !important;
  }

  .profile-page .settings-hint,
  .profile-page .settings-preview,
  .profile-page .profile-avatar-hint {
    font-size: 10px !important;
    line-height: 1.45 !important;
    margin-bottom: 6px !important;
  }

  .profile-page .profile-admin-notice p {
    font-size: 10px !important;
    line-height: 1.45 !important;
  }

  .profile-page .profile-admin-notice strong {
    font-size: inherit !important;
  }

  .profile-page .numbering-block h3 {
    font-size: 9px !important;
    font-weight: 500 !important;
    margin-bottom: 3px !important;
    line-height: 1.3 !important;
    color: rgba(244, 241, 236, 0.55) !important;
  }

  .profile-page .numbering-block .settings-hint {
    font-size: 9px !important;
    margin-bottom: 4px !important;
  }

  .profile-page .numbering-preview {
    font-size: 9px !important;
    line-height: 1.4 !important;
  }

  .profile-page .numbering-preview strong {
    font-size: inherit !important;
    color: rgba(242, 147, 47, 0.85) !important;
  }

  .profile-page .numbering-check {
    font-size: 10px !important;
    min-height: 0 !important;
    gap: 6px !important;
    padding: 0 !important;
    align-items: center !important;
  }

  .profile-page .numbering-check input[type="checkbox"] {
    width: 14px !important;
    height: 14px !important;
    min-width: 14px !important;
    min-height: 14px !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
  }

  .profile-page .numbering-check label {
    font-size: 10px !important;
    line-height: 1.35 !important;
    margin: 0 !important;
    font-weight: 400 !important;
  }

  .profile-page .sim-toggle-label {
    font-size: 10px !important;
  }

  .profile-page .simulation-setting-head {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }

  .profile-page .simulation-setting-copy {
    flex: none !important;
    width: 100% !important;
  }

  .profile-page .sim-toggle {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    align-self: stretch !important;
    width: 100% !important;
    gap: 8px !important;
    padding: 6px 8px !important;
    border: 1px solid rgba(242, 147, 47, 0.18) !important;
    border-radius: var(--radius-sm) !important;
    background: rgba(0, 0, 0, 0.12) !important;
    box-sizing: border-box !important;
  }

  .profile-page .sim-toggle-track {
    order: 2 !important;
    width: 36px !important;
    height: 20px !important;
    flex-shrink: 0 !important;
  }

  .profile-page .sim-toggle-track::after {
    width: 14px !important;
    height: 14px !important;
    top: 2px !important;
    right: 2px !important;
  }

  .profile-page .sim-toggle input:checked + .sim-toggle-track::after {
    transform: translateX(-16px) !important;
  }

  .profile-page .sim-toggle-label {
    order: 1 !important;
    flex: 1 !important;
    text-align: start !important;
    margin: 0 !important;
  }

  .profile-page .settings-type-add-form {
    gap: 6px !important;
    margin-bottom: 8px !important;
    padding-bottom: 8px !important;
  }

  .profile-page .settings-type-add-form .input,
  .profile-page .settings-type-add-form textarea,
  .profile-page .settings-type-add-form select {
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  /* أنواع المشاريع — بطاقات */
  .profile-page .settings-types-table-wrap {
    overflow-x: visible !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .profile-page .settings-types-table {
    display: block !important;
    width: 100% !important;
    border-collapse: separate !important;
  }

  .profile-page .settings-types-table thead {
    display: none !important;
  }

  .profile-page .settings-types-table tbody {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
  }

  .profile-page .settings-types-table tbody tr {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    padding: 6px 8px !important;
    border: 1px solid #2a2a30 !important;
    border-radius: var(--radius-md) !important;
    background: rgba(0, 0, 0, 0.15) !important;
  }

  .profile-page .settings-types-table tbody tr.row-new {
    border-color: rgba(242, 147, 47, 0.45) !important;
  }

  .profile-page .settings-types-table td {
    display: block !important;
    width: 100% !important;
    padding: 0 !important;
    border: none !important;
    min-width: 0 !important;
  }

  .profile-page .settings-types-table td:nth-child(2) {
    display: none !important;
  }

  .profile-page .settings-types-table td::before {
    display: block;
    font-size: 10px !important;
    font-weight: 600 !important;
    color: rgba(244, 241, 236, 0.55);
    margin-bottom: 3px;
    line-height: 1.25;
  }

  .profile-page .settings-types-table td:nth-child(1)::before { content: 'الاسم'; }
  .profile-page .settings-types-table td:nth-child(3)::before { content: 'الحقول'; }
  .profile-page .settings-types-table td:nth-child(4)::before { content: 'الترتيب'; }
  .profile-page .settings-types-table td:nth-child(5)::before { content: 'الحالة'; }
  .profile-page .settings-types-table td:nth-child(6)::before { content: 'إجراءات'; }

  .profile-page .settings-types-table .input,
  .profile-page .settings-types-table .input-sm,
  .profile-page .settings-types-table select,
  .profile-page .settings-types-table textarea {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    font-size: 10px !important;
    padding: 5px 7px !important;
  }

  .profile-page .settings-types-table .pt-edit-label {
    width: 100% !important;
    min-width: 0 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    word-break: break-word !important;
    font-size: 10px !important;
  }

  .profile-page .settings-types-table .pt-edit-desc {
    min-width: 0 !important;
    resize: vertical;
  }

  .profile-page .settings-types-table .pt-edit-sort {
    width: 100% !important;
    max-width: 5rem !important;
  }

  .profile-page .settings-types-table .settings-type-actions {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: 4px !important;
    width: 100% !important;
  }

  .profile-page .settings-types-table .settings-type-actions .btn {
    flex: none !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    font-size: 10px !important;
    padding: 5px 8px !important;
    margin: 0 !important;
  }

  .profile-page .form-actions .btn,
  .profile-page .profile-danger-actions .btn,
  .profile-page .settings-types-toolbar .btn,
  .profile-page .numbering-block .btn {
    font-size: 10px !important;
    padding: var(--btn-pad-y) var(--btn-pad-x) !important;
  }

  .trash-hint {
    font-size: 10px !important;
    padding: var(--space-1) var(--space-2) !important;
    margin-bottom: var(--section-gap) !important;
    line-height: 1.35 !important;
  }

  .sidebar-toggle {
    width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
  }

  /* ── صفحة الملفات: العنوان أكبر من النص والمسار ── */
  .files-page .page-subtitle {
    font-size: 10px !important;
    line-height: 1.4 !important;
    margin-top: 4px !important;
  }

  .files-page .files-section-title,
  .files-page h2.files-section-title {
    font-size: 13px !important;
    margin-bottom: 3px !important;
    line-height: 1.25 !important;
  }

  .files-page .files-section-desc,
  .files-page .files-modal-desc {
    font-size: 10px !important;
    line-height: 1.4 !important;
    margin: 0 !important;
  }

  .files-page .files-section-desc strong {
    font-size: inherit !important;
  }

  .files-breadcrumb,
  .files-breadcrumb-empty {
    font-size: 10px !important;
    min-height: 0 !important;
    gap: 2px !important;
  }

  .files-breadcrumb button {
    font-size: 10px !important;
    padding: 3px 6px !important;
  }

  .files-tree-hint,
  .files-tree-root .empty-state,
  .files-drag-hint {
    font-size: 10px !important;
    line-height: 1.35 !important;
    padding: 10px 6px !important;
  }

  .files-toolbar {
    margin-bottom: 8px !important;
    padding-bottom: 6px !important;
    gap: 6px !important;
  }

  .files-explorer-card,
  .files-upload-card {
    padding: var(--card-pad) !important;
  }

  .files-tree-root {
    min-height: 140px !important;
    padding: 8px !important;
  }

  .files-section {
    margin-bottom: var(--section-gap) !important;
  }

  .files-section-head {
    margin-bottom: 6px !important;
  }

  .tree-name {
    font-size: 10px !important;
  }

  .tree-meta {
    font-size: 9px !important;
  }

  .tree-icon {
    font-size: 13px !important;
  }

  .tree-row {
    padding: 6px 4px !important;
  }

  .export-menu {
    inset-inline-start: 0 !important;
    inset-inline-end: auto !important;
    left: auto !important;
    right: auto !important;
    max-width: min(10rem, calc(100vw - var(--layout-pad-x) * 2)) !important;
  }

  /* ── صفحة تسجيل الدخول ── */
  .login-brand {
    padding: var(--layout-pad-y) var(--layout-pad-x) var(--section-gap) !important;
  }

  .login-brand-inner {
    max-width: 100%;
  }

  .login-company-logo {
    width: 72px !important;
    margin-bottom: 6px !important;
  }

  .login-company-logo img {
    max-height: 52px;
  }

  .login-brand h1 {
    font-size: 17px !important;
    line-height: 1.35 !important;
    margin-bottom: 6px !important;
    letter-spacing: 0.02em !important;
  }

  .login-brand .login-desc {
    font-size: 12px !important;
    line-height: 1.55 !important;
    margin-bottom: 10px !important;
  }

  .login-person {
    gap: 6px !important;
    margin-bottom: 0 !important;
  }

  .login-person-logo {
    width: 32px !important;
    height: 32px !important;
  }

  .login-person-name {
    font-size: 14px !important;
    line-height: 32px !important;
  }

  .login-form-panel {
    padding: 10px var(--layout-pad-x) 12px !important;
    min-height: auto !important;
  }

  .login-card-header {
    margin-bottom: 10px !important;
  }

  .login-card-header h2 {
    font-size: 16px !important;
    margin-bottom: 4px !important;
  }

  .login-card-header p {
    font-size: 11px !important;
    line-height: 1.45 !important;
  }

  .login-form-panel .input-group {
    margin-bottom: 8px !important;
  }

  .login-form-panel .input-group label {
    font-size: 11px !important;
    margin-bottom: 4px !important;
    line-height: 1.3 !important;
  }

  .login-form-panel .input,
  .login-field-icon .login-input-wrap .input {
    font-size: 12px !important;
    padding-top: 7px !important;
    padding-bottom: 7px !important;
    padding-left: 8px !important;
    padding-right: 36px !important;
    min-height: 0 !important;
    line-height: 1.3 !important;
    background: var(--color-black) !important;
    color: var(--color-paper) !important;
  }

  .login-field-icon .login-input-wrap .app-icon {
    width: 16px !important;
    height: 16px !important;
    right: 10px !important;
    font-size: 14px !important;
  }

  .login-submit.btn {
    font-size: 12px !important;
    padding: 8px 12px !important;
    margin-top: 8px !important;
    line-height: 1.3 !important;
    min-height: 36px !important;
    gap: 6px !important;
  }

  .login-submit .app-icon {
    font-size: 13px !important;
  }

  .login-legal {
    margin-top: 10px !important;
    padding-top: 8px !important;
  }

  .login-legal-main {
    font-size: 10px !important;
  }

  .login-legal p {
    font-size: 9px !important;
    line-height: 1.5 !important;
  }
}

/* ≤321px — أضيق من iPhone SE */
@media screen and (max-width: 321px) {
  :root {
    --layout-pad-x: 10px;
    --layout-pad-y: 7px;
    --card-pad: 7px;
    --page-title-size: 15px;
    --btn-pad-y: 4px;
    --btn-pad-x: 6px;
    --input-pad-y: 4px;
    --input-pad-x: 7px;
  }

  html {
    font-size: 11.5px;
  }

  .page-header h1,
  .page-header .page-title-text {
    font-size: var(--page-title-size) !important;
  }

  .filters-bar .input,
  .filters-bar .select,
  .main-content .input,
  .main-content .select {
    font-size: 10px !important;
    padding: var(--input-pad-y) var(--input-pad-x) !important;
  }

  .entity-card-status .badge,
  .project-card-status .badge,
  table td .badge {
    font-size: 8px !important;
    padding: 2px 4px !important;
  }

  .entity-card-title,
  .project-card-title,
  .entity-card-title a,
  .project-card-title a {
    font-size: 11px !important;
  }

  .entity-card-meta,
  .project-card-meta {
    font-size: 9px !important;
  }

  .sar-icon,
  td .sar-icon,
  .money-value .sar-icon {
    min-width: 11px !important;
    min-height: 11px !important;
  }
}