/**
 * واجهة الجوال — تُطبَّق فقط على الشاشات الصغيرة
 * لا تغيّر مظهر الكمبيوتر (كل القواعد داخل @media)
 */

/* ─── تسجيل الدخول ─── */
@media (max-width: 768px) {
    .login-portal-wrapper {
        align-items: flex-start;
        justify-content: center;
        padding:
            max(12px, env(safe-area-inset-top))
            max(14px, env(safe-area-inset-right))
            max(20px, env(safe-area-inset-bottom))
            max(14px, env(safe-area-inset-left));
        min-height: 100dvh;
        min-height: -webkit-fill-available;
        height: auto;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .login-card {
        width: 100%;
        max-width: 100%;
        margin: 4px 0 12px;
        padding: 22px 18px 20px;
        border-radius: 16px;
        gap: 18px;
    }

    .login-header h2 {
        font-size: 1.2rem;
        line-height: 1.4;
    }

    .login-header p {
        font-size: 0.8rem;
        line-height: 1.55;
        padding: 0 4px;
    }

    .login-brand-logo {
        width: min(180px, 58vw);
        max-height: 72px;
        margin-bottom: 10px;
    }

    .login-form {
        gap: 12px;
    }

    .login-form .form-group {
        gap: 8px;
    }

    .login-form label {
        font-size: 14px;
    }

    .login-form input[type="text"],
    .login-form input[type="password"] {
        font-size: 16px;
        min-height: 48px;
        padding: 12px 14px;
        border-radius: 10px;
    }

    .login-btn {
        min-height: 50px;
        font-size: 17px;
        border-radius: 10px;
        margin-top: 10px !important;
    }

    .login-error {
        font-size: 13px;
        padding: 10px 12px;
        line-height: 1.45;
    }

    .login-footer {
        padding-top: 12px;
    }

    .login-footer p {
        font-size: 10.5px;
        line-height: 1.5;
    }
}

@media (max-width: 400px) {
    .login-card {
        padding: 18px 14px 16px;
    }

    .login-header h2 {
        font-size: 1.1rem;
    }

    .login-header p {
        font-size: 0.75rem;
    }
}

/* ─── القائمة والتبويبات الرئيسية ─── */
@media (max-width: 768px) {
    .app-header {
        padding: 10px 12px 12px;
        gap: 10px;
        border-radius: 14px;
    }

    .header-top-row {
        flex-wrap: nowrap;
        gap: 8px;
        align-items: stretch;
    }

    .logo-area {
        flex: 1 1 auto;
        min-width: 0;
    }

    .logo-area h1 {
        font-size: 14px !important;
        line-height: 1.35;
    }

    #headerSubtitle {
        display: none;
    }

    .brand-logo {
        width: auto;
        height: 54px;
        max-width: 132px;
        object-fit: contain;
    }

    .header-actions {
        flex: 0 0 auto;
        gap: 8px;
    }

    .theme-toggle-btn,
    .logout-btn {
        min-width: 44px;
        min-height: 44px;
        padding: 10px;
    }

    .user-badge {
        max-width: min(160px, 42vw);
        min-height: 44px;
        padding: 6px 10px;
    }

    .user-display-name {
        font-size: 12px;
    }

    .role-badge {
        font-size: 10px;
    }

    .connection-status-bar {
        font-size: 12px;
        padding: 8px 10px;
    }

    .backup-reminder-inner {
        flex-wrap: wrap;
        gap: 8px;
    }

    .backup-reminder-actions .btn {
        min-height: 40px;
    }

    .app-nav-hub {
        padding: 8px;
        gap: 6px;
    }

    /* إظهار أسماء التبويبات دائماً على الجوال */
    .nav-tab span,
    .nav-tile span {
        display: block !important;
    }

    .nav-hub-row--primary,
    .nav-hub-row--mgmt,
    .nav-hub-row--ops,
    .nav-hub-row--tools {
        grid-template-columns: 1fr !important;
    }

    .nav-tile {
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        text-align: right;
        min-height: 50px;
        padding: 10px 14px;
        font-size: 14px;
        gap: 12px;
        border-radius: 10px;
    }

    .nav-tile i {
        font-size: 18px;
        width: 22px;
        text-align: center;
        flex-shrink: 0;
    }

    .nav-tile span {
        flex: 1;
        line-height: 1.35;
    }

    /* تبويبات مخزن الأعلاف والأقسام الفرعية */
    .fwh-subtabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
        padding-bottom: 4px;
        gap: 8px;
    }

    .fwh-subtab {
        flex-shrink: 0;
        min-height: 44px;
        padding: 10px 14px;
        font-size: 0.85rem;
        scroll-snap-align: start;
    }

    .fwh-subtab span {
        display: inline !important;
    }

    /* ─── مخزن الأعلاف: نماذج وجداول ─── */
    #viewFeedWarehousePanel,
    .fwh-workspace,
    .fwh-module-body {
        min-width: 0;
        max-width: 100%;
    }

    .fwh-workspace {
        gap: 10px;
        overflow-x: hidden;
    }

    .fwh-hero-top {
        padding: 14px 14px 8px;
    }

    .fwh-hero-top h2 {
        font-size: 1.1rem;
    }

    .fwh-hero-top p {
        font-size: 0.78rem;
        line-height: 1.45;
    }

    .fwh-hero-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 6px;
        padding: 0 12px 12px;
    }

    .fwh-stat {
        padding: 10px 8px;
    }

    .fwh-stat .val {
        font-size: 0.95rem;
    }

    .fwh-stat .lbl {
        font-size: 0.62rem;
        line-height: 1.3;
    }

    .fwh-card {
        padding: 12px 14px;
        border-radius: 10px;
        max-width: 100%;
        min-width: 0;
        overflow: hidden;
    }

    .fwh-card h3 {
        font-size: 0.92rem;
        margin-bottom: 10px;
    }

    .fwh-form-grid {
        grid-template-columns: 1fr !important;
        gap: 12px;
    }

    .fwh-form-grid label {
        font-size: 0.85rem;
        gap: 6px;
    }

    .fwh-form-grid .filter-input,
    .fwh-form-grid .filter-select,
    .fwh-form-grid input,
    .fwh-form-grid select {
        font-size: 16px;
        min-height: 48px;
        padding: 10px 12px;
        border-radius: 10px;
    }

    .fwh-form-grid .btn,
    .fwh-card > .btn {
        min-height: 48px;
        font-size: 15px;
        width: 100%;
        justify-content: center;
    }

    .fwh-table-wrap {
        display: block;
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        margin: 0;
        padding-bottom: 6px;
        touch-action: pan-x;
    }

    .fwh-table {
        font-size: 0.82rem;
        min-width: 520px;
        width: max-content;
        max-width: none;
    }

    .fwh-table--pending {
        min-width: 640px;
    }

    .fwh-table th,
    .fwh-table td {
        padding: 10px 8px;
        white-space: nowrap;
    }

    .fwh-table--pending td:nth-child(3),
    .fwh-table--pending td:nth-child(6) {
        white-space: normal;
        max-width: 110px;
    }

    .fwh-table--pending td:last-child {
        white-space: normal;
        vertical-align: top;
        min-width: 128px;
    }

    .fwh-alert {
        font-size: 0.88rem;
        line-height: 1.5;
        padding: 12px;
    }

    .fwh-pending-actions {
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
        min-width: 120px;
    }

    .fwh-pending-actions .btn {
        min-height: 44px;
        padding: 8px 10px;
        font-size: 12px;
        width: 100%;
        white-space: normal;
        justify-content: center;
    }

    .fwh-pending-actions .fwh-print-req {
        width: auto;
        align-self: flex-start;
        min-width: 44px;
    }

    .fwh-chart-grid {
        grid-template-columns: 1fr !important;
    }

    .fwh-empty {
        padding: 24px 12px;
        font-size: 0.9rem;
    }

    /* ─── إدخال البيانات: ورقة الحقل · التغذية · السجلات ─── */
    #viewFieldSheetPanel,
    #viewFeedPanel,
    #viewRecordsPanel {
        min-width: 0;
        max-width: 100%;
        overflow-x: hidden;
    }

    .card {
        padding: 14px 12px !important;
        max-width: 100%;
        min-width: 0;
    }

    /* ورقة الحقل */
    .field-sheet-card {
        gap: 10px;
        overflow: hidden;
    }

    .field-sheet-card .card-header h2 {
        font-size: 1.05rem;
    }

    .field-sheet-info-banner--compact {
        font-size: 11px;
        padding: 8px 10px;
    }

    .field-sheet-steps--compact {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        gap: 8px;
        padding-bottom: 2px;
    }

    .field-sheet-steps--compact .field-sheet-step {
        flex-shrink: 0;
        min-width: 100px;
        font-size: 12px;
        padding: 8px 10px;
    }

    .field-sheet-toolbar--compact {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .field-sheet-toolbar--compact .form-group {
        min-width: 0;
        width: 100%;
    }

    .field-sheet-toolbar--compact .form-group label {
        font-size: 13px;
    }

    .field-sheet-toolbar--compact .filter-select,
    .field-sheet-toolbar--compact .filter-select-sm {
        font-size: 16px !important;
        min-height: 48px !important;
        padding: 10px 12px !important;
        width: 100%;
    }

    .field-sheet-toolbar--compact .btn {
        width: 100%;
        min-height: 48px;
        justify-content: center;
        font-size: 14px;
    }

    .field-sheet-table-wrap {
        display: block;
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        touch-action: pan-x;
        max-height: min(55vh, 520px);
    }

    .field-sheet-table {
        table-layout: auto;
        min-width: 680px;
        width: max-content;
        font-size: 13px;
    }

    .field-sheet-table th,
    .field-sheet-table td {
        padding: 8px 6px;
    }

    .field-sheet-table input,
    .field-sheet-table textarea {
        font-size: 16px;
        min-height: 44px;
        padding: 8px 10px;
        border-radius: 8px;
    }

    .field-sheet-table textarea {
        min-height: 56px;
    }

    .field-sheet-actions {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .field-sheet-overwrite {
        font-size: 14px;
        min-height: 44px;
    }

    #fieldSheetSaveAllBtn {
        width: 100%;
        min-height: 50px;
        font-size: 16px;
        justify-content: center;
    }

    /* قسم التغذية */
    .feed-workspace {
        min-width: 0;
        max-width: 100%;
        overflow-x: hidden;
    }

    .feed-hero-content {
        flex-direction: column;
        align-items: stretch;
    }

    .feed-hero-stats {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 6px;
    }

    .feed-hero-stat {
        min-width: 0;
        padding: 8px 10px;
    }

    .feed-purchase-orders-btn {
        grid-column: 1 / -1;
        width: 100%;
        min-height: 44px;
        justify-content: center;
    }

    .feed-subtabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        gap: 8px;
        padding-bottom: 4px;
    }

    .feed-subtab {
        flex: 0 0 auto;
        min-width: 110px;
        min-height: 44px;
        font-size: 0.82rem;
    }

    .feed-daily-header {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .feed-daily-actions {
        width: 100%;
        flex-wrap: wrap;
        gap: 8px;
    }

    .feed-daily-actions .filter-input {
        flex: 1 1 140px;
        font-size: 16px;
        min-height: 48px;
        padding: 10px 12px;
    }

    .feed-daily-actions .btn {
        min-height: 44px;
        min-width: 44px;
    }

    .feed-daily-summary {
        flex-wrap: wrap;
        gap: 8px;
        font-size: 0.82rem;
    }

    .feed-daily-table-wrap,
    .feed-workspace .table-wrapper {
        display: block;
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        touch-action: pan-x;
    }

    .feed-daily-table {
        min-width: 620px;
        width: max-content;
    }

    .feed-daily-table thead th,
    .feed-daily-table tbody td {
        padding: 10px 8px;
        font-size: 0.82rem;
    }

    .feed-kpi-row {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px;
    }

    .feed-workspace .feed-form .form-row,
    .feed-schedule-settings-body .form-row,
    .entry-form .form-row {
        grid-template-columns: 1fr !important;
        gap: 12px;
    }

    .feed-workspace .feed-form label,
    .entry-form label {
        font-size: 0.85rem;
    }

    .feed-workspace .feed-form input,
    .feed-workspace .feed-form select,
    .feed-schedule-settings-body input,
    .feed-schedule-settings-body select,
    .entry-form input,
    .entry-form select,
    .entry-form textarea,
    .filter-input,
    .filter-select {
        font-size: 16px;
        min-height: 48px;
        padding: 10px 12px;
        border-radius: 10px;
    }

    .feed-save-btn,
    .feed-schedule-settings-body .btn-primary {
        width: 100%;
        min-height: 50px;
        font-size: 16px;
        justify-content: center;
    }

    .feed-workspace .feed-filters {
        flex-direction: column;
        align-items: stretch;
    }

    .feed-workspace .feed-filters .filter-input,
    .feed-workspace .feed-filters .filter-select {
        width: 100%;
    }

    /* عرض السجلات */
    #viewRecordsPanel .records-header {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    #viewRecordsPanel .records-actions {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        gap: 8px;
    }

    #viewRecordsPanel .records-actions .filter-select,
    #viewRecordsPanel .records-actions .btn {
        width: 100%;
        max-width: none;
        min-height: 48px;
        font-size: 14px;
        justify-content: center;
    }

    .records-filter-row {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .records-search-input,
    .records-filter-row .filter-select,
    .records-filter-row .btn {
        width: 100%;
        min-height: 48px;
        font-size: 16px;
    }

    #viewRecordsPanel .table-wrapper {
        display: block;
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        touch-action: pan-x;
        margin-top: 8px;
    }

    #viewRecordsPanel .records-table {
        min-width: 560px;
        width: max-content;
        font-size: 0.85rem;
    }

    #viewRecordsPanel .records-table th,
    #viewRecordsPanel .records-table td {
        padding: 10px 8px;
    }

    #viewRecordsPanel .records-table-hint {
        font-size: 0.82rem;
    }

    #viewRecordsPanel .records-pagination .btn {
        min-height: 44px;
        min-width: 44px;
    }

    /* ─── إدارة النظام والصلاحيات ─── */
    #viewAdminPanel {
        min-width: 0;
        max-width: 100%;
        overflow-x: hidden;
    }

    #viewAdminPanel.admin-panel-layout.active {
        display: flex !important;
        flex-direction: column;
        gap: 12px;
    }

    .admin-users-card .card-header h2 {
        font-size: 1.05rem;
    }

    .admin-users-card .card-header p {
        font-size: 0.82rem;
        line-height: 1.45;
    }

    /* روابط التشغيل */
    .share-link-box {
        padding: 12px;
    }

    .share-link-row {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .share-url-input {
        min-width: 0;
        width: 100%;
        font-size: 14px;
        min-height: 48px;
        padding: 10px 12px;
    }

    .share-link-row .btn,
    .share-link-row .filter-select {
        width: 100%;
        min-height: 48px;
        justify-content: center;
        max-width: none;
    }

    .team-phones-input {
        font-size: 16px;
        min-height: 88px;
        padding: 12px;
    }

    .notify-phones-box .btn {
        width: 100%;
        min-height: 44px;
        justify-content: center;
    }

    /* جدول المستخدمين */
    .users-list-header {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .users-list-header .btn {
        width: 100%;
        min-height: 44px;
        justify-content: center;
    }

    .users-table-wrapper {
        display: block;
        width: 100%;
        max-width: 100%;
        max-height: min(50vh, 420px);
        overflow-x: auto;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }

    .users-table-wrapper .admin-table {
        min-width: 580px;
        width: max-content;
        font-size: 0.85rem;
    }

    .users-table-wrapper .admin-table th,
    .users-table-wrapper .admin-table td {
        padding: 10px 8px;
    }

    .user-action-btns {
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
        min-width: 108px;
    }

    .user-action-btns .btn,
    .user-action-btns button {
        width: 100%;
        min-height: 40px;
        justify-content: center;
        font-size: 11px;
    }

    /* نموذج إنشاء حساب */
    .admin-subform h3 {
        font-size: 1rem;
    }

    /* لوحة الصلاحيات — تنظيم بصري */
    .permissions-panel {
        margin: 12px 0 14px;
        padding: 12px;
        border-radius: 12px;
    }

    .permissions-panel h4 {
        font-size: 0.95rem;
        margin-bottom: 4px;
    }

    .permissions-hint {
        font-size: 0.82rem;
        line-height: 1.45;
        margin-bottom: 12px;
    }

    .permissions-block {
        margin-bottom: 12px;
        padding: 10px 12px;
        border-radius: 10px;
        border: 1px solid rgba(99, 102, 241, 0.2);
        background: rgba(99, 102, 241, 0.06);
    }

    .permissions-block:last-child {
        margin-bottom: 0;
    }

    .permissions-block-title {
        font-size: 0.88rem;
        margin-bottom: 10px;
        padding-bottom: 6px;
        border-bottom: 1px solid rgba(99, 102, 241, 0.15);
        color: #818cf8;
    }

    .permissions-grid,
    .permissions-grid-files {
        grid-template-columns: 1fr !important;
        gap: 8px;
    }

    .permissions-grid-files {
        max-height: min(42vh, 340px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        padding: 4px 2px 6px;
    }

    .perm-check {
        min-height: 48px;
        padding: 12px 14px;
        font-size: 14px;
        line-height: 1.4;
        align-items: flex-start;
        gap: 10px;
        border-radius: 10px;
    }

    .perm-check input[type="checkbox"] {
        width: 20px;
        height: 20px;
        min-width: 20px;
        margin-top: 2px;
        flex-shrink: 0;
    }

    .perm-check i {
        flex-shrink: 0;
        margin-top: 2px;
    }

    .btn-add-user {
        min-height: 50px;
        font-size: 16px;
    }

    /* بطاقات النسخ الاحتياطي */
    .backup-actions-row {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .backup-actions-row .btn {
        width: 100%;
        min-height: 48px;
        justify-content: center;
        font-size: 14px;
    }

    .backup-external-form .form-group {
        margin-bottom: 10px;
    }

    .backup-external-form .form-control {
        font-size: 16px;
        min-height: 48px;
        padding: 10px 12px;
    }

    /* نافذة تعديل الصلاحيات */
    .modal-overlay:has(.edit-user-modal) {
        padding: 0;
        align-items: stretch;
    }

    .edit-user-modal {
        width: 100%;
        max-width: 100%;
        max-height: 100dvh;
        border-radius: 0;
        margin: 0;
    }

    .edit-user-modal .modal-header {
        position: sticky;
        top: 0;
        z-index: 2;
        background: var(--card-bg);
        padding: 14px 12px;
        border-bottom: 1px solid var(--card-border);
    }

    .edit-user-modal .modal-header h3 {
        font-size: 0.95rem;
        line-height: 1.35;
    }

    .edit-user-modal #editUserForm {
        padding: 12px;
    }

    .edit-user-modal .permissions-block-title {
        color: #818cf8;
    }

    /* ─── عام: منع قص النصوص والجداول ─── */
    body {
        padding: 10px 12px 16px;
    }

    .app-container,
    .app-workspace.tab-view.active,
    #sectionViewsContainer {
        min-width: 0;
        max-width: 100%;
        gap: 12px;
    }

    .card-header h2 {
        font-size: 1.05rem;
        line-height: 1.35;
        overflow-wrap: anywhere;
    }

    .card-header p {
        font-size: 13px;
        line-height: 1.45;
    }

    .user-badge {
        max-width: none;
        flex: 1 1 100%;
    }

    .user-display-name {
        white-space: normal;
        overflow: visible;
        text-overflow: unset;
        line-height: 1.3;
    }

    .role-badge {
        white-space: normal;
        text-align: center;
        line-height: 1.25;
    }

    .table-wrapper {
        display: block;
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        touch-action: pan-x;
    }

    .admin-table {
        min-width: 520px;
        width: max-content;
    }

    /* تجاوز أنماط ui-base-lock المضمّنة */
    .registry-open-btn {
        font-size: 14px !important;
        padding: 12px 14px !important;
        min-height: 52px !important;
        white-space: normal !important;
        line-height: 1.35 !important;
        text-align: center;
    }

    .excel-open-grid,
    .registry-open-box {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    /* ─── لوحة المزرعة ─── */
    #viewDashboardPanel {
        min-width: 0;
        max-width: 100%;
        overflow-x: hidden;
    }

    #viewDashboardPanel .records-header {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    #viewDashboardPanel .records-actions,
    .dashboard-toolbar {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        flex-wrap: wrap;
        gap: 8px;
    }

    #viewDashboardPanel .records-actions .filter-select,
    #viewDashboardPanel .records-actions .btn,
    .dashboard-toolbar .btn {
        width: 100%;
        max-width: none;
        min-height: 48px;
        font-size: 14px;
        justify-content: center;
    }

    .dashboard-kpi-row {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px;
    }

    .kpi-card .kpi-label,
    .kpi-card .kpi-sub {
        font-size: 12px;
        white-space: normal;
        line-height: 1.35;
    }

    .dashboard-section-header {
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
    }

    .dashboard-section-stats span {
        white-space: normal;
        font-size: 13px;
    }

    .unit-status-legend,
    .usage-legend {
        flex-wrap: wrap;
        gap: 6px;
        font-size: 12px;
    }

    .unit-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 8px;
    }

    .unit-card {
        min-height: 88px;
        padding: 10px 6px;
    }

    .unit-card .unit-num {
        font-size: 14px;
    }

    .unit-card .unit-status,
    .unit-card .unit-usage,
    .unit-card .unit-fish {
        font-size: 11px;
        white-space: normal;
        line-height: 1.25;
        max-width: 100%;
        overflow: visible;
        text-overflow: unset;
    }

    .dashboard-tasks-actions {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .dashboard-tasks-actions .btn {
        width: 100%;
        min-height: 44px;
        justify-content: center;
    }

    /* ─── إدخال الأقسام (مفقس · أحواض · أقفاص) ─── */
    main[id^="viewSection-"].app-workspace.tab-view.active,
    #sectionViewsContainer main.app-workspace.tab-view.active {
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: 1fr !important;
        min-width: 0;
        overflow-x: hidden;
    }

    .form-section,
    .guide-section {
        width: 100%;
        min-width: 0;
    }

    .dynamic-fields-grid,
    .registry-edit-form {
        grid-template-columns: 1fr !important;
        gap: 12px;
        padding: 12px;
    }

    .guide-grid {
        grid-template-columns: 1fr !important;
    }

    .section-field-tour-banner {
        flex-direction: column;
        font-size: 13px;
        line-height: 1.45;
    }

    .safe-limit-text {
        font-size: 12px;
        line-height: 1.4;
        white-space: normal;
    }

    .form-actions {
        justify-content: stretch;
    }

    .form-actions .save-btn,
    .form-actions .btn-primary {
        width: 100%;
        min-height: 50px;
        font-size: 16px;
        justify-content: center;
    }

    .unit-info-banner,
    .pond-dims-hint {
        font-size: 13px;
        line-height: 1.45;
    }

    /* ─── الموظفين HR ─── */
    #viewHrPanel {
        min-width: 0;
        max-width: 100%;
        overflow-x: hidden;
    }

    .hr-hero-content {
        flex-direction: column;
        align-items: stretch;
        padding: 14px;
    }

    .hr-hero-text h2 {
        font-size: 1.1rem;
    }

    .hr-hero-text p {
        font-size: 0.85rem;
        line-height: 1.45;
    }

    .hr-hero-stats {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
        width: 100%;
    }

    .hr-hero-stat {
        min-width: 0;
    }

    .hr-hero-stat-lbl {
        font-size: 0.72rem;
        white-space: normal;
        line-height: 1.3;
    }

    .hr-subtabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        gap: 8px;
        padding-bottom: 4px;
    }

    .hr-subtab {
        flex-shrink: 0;
        min-height: 44px;
        padding: 10px 14px;
        font-size: 0.85rem;
    }

    .hr-subtab span {
        display: inline !important;
    }

    .hr-form-grid,
    .hr-summary-grid,
    .hr-dash-cards {
        grid-template-columns: 1fr !important;
    }

    .hr-toolbar,
    .hr-filters {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .hr-toolbar .btn,
    .hr-filters .filter-input,
    .hr-filters .filter-select {
        width: 100%;
        min-height: 48px;
        font-size: 16px;
    }

    .hr-table-wrap,
    .hr-employees-table-wrap,
    .hr-shift-table-wrap,
    .hr-shift-days-table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-x;
    }

    .hr-shift-grid-table {
        min-width: 640px;
        width: max-content;
    }

    .hr-att-log-table {
        min-width: 720px;
        width: max-content;
        font-size: 0.85rem;
    }

    .hr-ot-report-table {
        min-width: 680px;
        width: max-content;
    }

    .hr-shift-name-chip {
        white-space: normal;
        overflow: visible;
        text-overflow: unset;
    }

    .hr-att-block--identity,
    .hr-att-times-grid {
        grid-template-columns: 1fr !important;
    }

    .hr-ot-summary-grid {
        grid-template-columns: 1fr 1fr !important;
    }

    /* ─── الوقاية والعلاج ─── */
    #viewHealthPanel {
        min-width: 0;
        max-width: 100%;
        overflow-x: hidden;
    }

    .health-hero-content {
        flex-direction: column;
        align-items: stretch;
    }

    .health-hero-stats {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
        width: 100%;
    }

    .health-subtabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        gap: 8px;
        padding-bottom: 4px;
    }

    .health-subtab {
        flex-shrink: 0;
        min-height: 44px;
    }

    .health-subtab span {
        display: inline !important;
    }

    .health-form-grid,
    .health-unified-treat-grid,
    .health-local-grid {
        grid-template-columns: 1fr !important;
    }

    .health-filters {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .health-filters .filter-input,
    .health-filters .filter-select,
    .health-filters .btn {
        width: 100%;
        min-height: 48px;
        font-size: 16px;
    }

    .health-table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-x;
    }

    .health-table {
        min-width: 560px;
        width: max-content;
        font-size: 0.85rem;
    }

    .health-table td {
        white-space: normal;
        max-width: 140px;
    }

    /* ─── KPI ─── */
    #viewKpiPanel {
        min-width: 0;
        max-width: 100%;
        overflow-x: hidden;
    }

    .kpi-hero-top {
        flex-direction: column;
        align-items: stretch;
    }

    .kpi-hero-text h2 {
        font-size: 1.1rem;
    }

    .kpi-hero-primary {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px;
        padding: 0 12px 14px;
    }

    .kpi-hero-stat .lbl,
    .kpi-summary-group .lbl,
    .kpi-mini-card .lbl {
        font-size: 0.72rem;
        white-space: normal;
        line-height: 1.3;
    }

    .kpi-summary-wrap {
        grid-template-columns: 1fr !important;
    }

    .kpi-subtabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        gap: 8px;
        padding-bottom: 4px;
    }

    .kpi-subtab {
        flex-shrink: 0;
        min-height: 44px;
        white-space: normal;
    }

    .kpi-filters-bar .filter-input,
    .kpi-filters-bar .filter-select {
        font-size: 16px;
        min-height: 48px;
        width: 100%;
    }

    .kpi-table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-x;
    }

    .kpi-table {
        min-width: 520px;
        width: max-content;
    }

    .kpi-table td {
        white-space: normal;
    }

    .kpi-chart-grid,
    .kpi-mini-grid,
    .kpi-compare-grid {
        grid-template-columns: 1fr !important;
    }

    .kpi-chart-box {
        overflow-x: auto;
    }

    /* ─── إعادة التأهيل ─── */
    #viewRehabPanel {
        min-width: 0;
        max-width: 100%;
        overflow-x: hidden;
    }

    .rehab-hero-top {
        flex-direction: column;
        align-items: stretch;
    }

    .rehab-hero-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px;
    }

    .rehab-subtabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        gap: 8px;
        padding-bottom: 4px;
    }

    .rehab-subtab {
        flex-shrink: 0;
        min-height: 44px;
    }

    .rehab-form-grid,
    .rehab-grid-2 {
        grid-template-columns: 1fr !important;
    }

    .rehab-toolbar,
    .rehab-report-actions {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .rehab-toolbar .btn,
    .rehab-report-actions .btn {
        width: 100%;
        min-height: 48px;
        justify-content: center;
    }

    .rehab-table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-x;
    }

    .rehab-table {
        min-width: 560px;
        width: max-content;
    }

    .rehab-table td {
        white-space: normal;
    }

    .rehab-gantt-header,
    .rehab-gantt-row {
        grid-template-columns: minmax(100px, 28%) minmax(0, 1fr) 40px !important;
    }

    .rehab-gantt-month-mark {
        white-space: normal;
        font-size: 0.62rem;
    }

    /* ─── المراسلات ─── */
    #viewCorrespondencePanel {
        min-width: 0;
        max-width: 100%;
        overflow-x: hidden;
    }

    .corr-hero-top {
        flex-direction: column;
        align-items: stretch;
    }

    .rehab-corr-filters {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        gap: 8px;
        padding-bottom: 4px;
    }

    .rehab-corr-filter {
        flex-shrink: 0;
        min-height: 44px;
    }

    .rehab-corr-form-grid {
        grid-template-columns: 1fr !important;
    }

    .rehab-corr-form .filter-input,
    .rehab-corr-form .filter-select,
    .rehab-corr-body {
        font-size: 16px;
        width: 100%;
    }

    .rehab-corr-body {
        min-height: 200px;
    }

    .rehab-corr-form-actions {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .rehab-corr-form-actions .btn {
        width: 100%;
        min-height: 48px;
        justify-content: center;
    }

    .rehab-corr-wrap .rehab-table {
        min-width: 640px;
        width: max-content;
    }

    .rehab-corr-actions {
        flex-direction: column;
        gap: 4px;
        min-width: 88px;
    }

    .rehab-corr-actions .btn {
        width: 100%;
        min-height: 40px;
        white-space: normal;
    }

    /* ─── ملفات Excel ─── */
    #viewExcelFilesPanel {
        min-width: 0;
        max-width: 100%;
        overflow-x: hidden;
    }

    .excel-open-hint {
        font-size: 13px;
        line-height: 1.5;
    }

    /* ─── المزامنة ─── */
    #viewSyncPanel {
        min-width: 0;
        max-width: 100%;
        overflow-x: hidden;
    }

    #viewSyncPanel .records-header {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    #viewSyncPanel .records-header .btn {
        width: 100%;
        min-height: 48px;
        justify-content: center;
    }

    .sync-file-card {
        grid-template-columns: 1fr !important;
        padding: 12px;
    }

    .sync-file-card h4 {
        font-size: 15px;
        flex-wrap: wrap;
        line-height: 1.35;
    }

    .sync-file-meta {
        font-size: 13px;
        line-height: 1.45;
    }

    .sync-file-actions {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        gap: 8px;
    }

    .sync-file-actions .btn {
        width: 100%;
        min-height: 48px;
        font-size: 14px;
        justify-content: center;
        white-space: normal;
    }

    .offline-queue-header {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .offline-queue-header .btn {
        width: 100%;
        min-height: 48px;
    }

    .offline-guide-box ul {
        font-size: 13px;
        line-height: 1.55;
    }

    .sync-compare-footer {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .sync-compare-footer .btn {
        width: 100%;
        min-height: 48px;
        justify-content: center;
    }

    .sync-compare-stats {
        grid-template-columns: 1fr !important;
    }

    /* ─── النوافذ المنبثقة العامة ─── */
    .modal-overlay:not(:has(.edit-user-modal)) {
        padding: 0;
        align-items: stretch;
    }

    .modal-overlay .modal-card:not(.edit-user-modal) {
        width: 100%;
        max-width: 100%;
        max-height: 100dvh;
        border-radius: 0;
        margin: 0;
    }

    .modal-card .modal-header {
        position: sticky;
        top: 0;
        z-index: 2;
        background: var(--card-bg);
        padding: 14px 12px;
    }

    .modal-card .modal-header h3 {
        font-size: 0.95rem;
        line-height: 1.35;
        overflow-wrap: anywhere;
    }

    .modal-body,
    .registry-edit-form {
        grid-template-columns: 1fr !important;
        padding: 12px;
        gap: 12px;
    }

    .modal-detail-item label {
        font-size: 13px;
    }

    .modal-detail-item span {
        font-size: 15px;
        word-break: break-word;
        white-space: normal;
    }

    .modal-footer {
        flex-direction: column;
        align-items: stretch;
        padding: 12px;
        gap: 8px;
    }

    .modal-footer .btn {
        width: 100%;
        min-height: 48px;
        justify-content: center;
    }

    .unit-history-modal {
        max-width: 100%;
    }

    .unit-history-date-range {
        flex-direction: column;
        align-items: stretch;
        font-size: 0.88rem;
    }

    .unit-history-date-hint {
        margin-inline-start: 0;
        font-size: 0.78rem;
        white-space: normal;
    }

    .unit-history-stat-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .unit-history-filter-row,
    .unit-history-filter-end {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .unit-history-filter-end {
        margin-inline-start: 0;
        width: 100%;
    }

    .unit-history-tabs {
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
    }

    .unit-history-tab {
        flex-shrink: 0;
        min-height: 44px;
    }

    .unit-history-body {
        max-height: min(55vh, 480px);
        overflow-y: auto;
    }

    /* ─── عارض Excel ─── */
    .modal-overlay:has(.excel-viewer-modal) {
        padding: 0;
        align-items: stretch;
    }

    .excel-viewer-modal {
        max-width: 100%;
        max-height: 100dvh;
        height: 100dvh;
        border-radius: 0;
    }

    .excel-viewer-meta {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        font-size: 13px;
        padding: 10px 12px;
    }

    .excel-viewer-filename {
        word-break: break-word;
        white-space: normal;
        font-size: 14px;
        line-height: 1.35;
    }

    .excel-view-only-badge {
        margin-inline-start: 0;
        align-self: flex-start;
        font-size: 12px;
    }

    .excel-viewer-table-wrap {
        max-height: calc(100dvh - 140px);
    }

    .excel-preview-table {
        min-width: 640px;
        width: max-content;
        font-size: 13px;
    }

    .excel-preview-table td {
        max-width: none;
    }

    .excel-preview-table th {
        font-size: 12px;
        white-space: normal;
    }

    /* ─── بطاقات إحصائيات صغيرة ─── */
    .fwh-stat .lbl {
        font-size: 0.68rem;
        white-space: normal;
        line-height: 1.25;
    }

    .feed-hero-stat-lbl,
    .hr-hero-stat-lbl {
        white-space: normal;
    }
}

@media (max-width: 400px) {
    .logo-area h1 {
        font-size: 13px !important;
    }

    .nav-tile {
        font-size: 13px;
        min-height: 48px;
    }

    .fwh-hero-grid {
        grid-template-columns: 1fr 1fr !important;
    }

    .fwh-stat .lbl {
        font-size: 0.62rem;
        white-space: normal;
        line-height: 1.25;
    }
}