/* =====================================================
   RESPONSIVE.CSS — Mobile-First Full Responsive System
   Covers: Mobile / Tablet / Desktop
   ===================================================== */

/* ── Base: prevent horizontal overflow ── */
*, *::before, *::after { box-sizing: border-box; }
/* body overflow-x intentionally omitted — clip/hidden breaks position:fixed on iOS Safari */
img, video, iframe { max-width: 100%; height: auto; }
* { -webkit-tap-highlight-color: rgba(0,0,0,0); }

/* ── Touch action for all interactive elements ── */
button, a, [role="button"] { touch-action: manipulation; }

/* ══════════════════════════════════════════════════
   MOBILE CARD TABLE SYSTEM
   JS adds class .mobile-card-table + data-label attrs
   ══════════════════════════════════════════════════ */
@media (max-width: 768px) {

    /* Unwrap the scroll container so cards span full width */
    .mobile-card-wrapper {
        overflow-x: visible !important;
        overflow-y: visible !important;
        height: auto !important;
        max-height: none !important;
        border-radius: 0 !important;
    }

    /* ── Table becomes a block stack of cards ── */
    .mobile-card-table,
    .mobile-card-table tbody,
    .mobile-card-table thead,
    .mobile-card-table tfoot,
    .mobile-card-table tr,
    .mobile-card-table td,
    .mobile-card-table th {
        display: block !important;
        width: 100% !important;
    }

    /* ── Hide original header row ── */
    .mobile-card-table thead tr {
        position: absolute !important;
        top: -9999px !important;
        left: -9999px !important;
        visibility: hidden !important;
    }

    /* ── Each row = a card ── */
    .mobile-card-table tbody tr {
        background: white !important;
        border-radius: 14px !important;
        margin-bottom: 12px !important;
        box-shadow: 0 2px 12px rgba(0,0,0,.07), 0 0 0 1px rgba(0,0,0,.05) !important;
        overflow: hidden !important;
        transition: box-shadow .2s !important;
    }

    .mobile-card-table tbody tr:hover {
        box-shadow: 0 4px 20px rgba(0,0,0,.12), 0 0 0 1px rgba(59,130,246,.15) !important;
    }

    /* ── Each cell = a labeled row inside the card ── */
    .mobile-card-table td {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 8px !important;
        padding: 10px 14px !important;
        border: none !important;
        border-bottom: 1px solid #f1f5f9 !important;
        font-size: .875rem !important;
        min-height: 44px !important;
    }

    .mobile-card-table td:last-child {
        border-bottom: none !important;
    }

    /* ── Label from data-label ── */
    .mobile-card-table td::before {
        content: attr(data-label);
        font-weight: 700;
        font-size: .72rem;
        color: #64748b;
        white-space: nowrap;
        flex-shrink: 0;
        min-width: 90px;
        text-align: right;
        line-height: 1.4;
    }

    /* Value side fills remaining space */
    .mobile-card-table td > * {
        flex: 1 !important;
        text-align: left !important;
    }

    /* ── Actions cell: full-width bar at top of card ── */
    .mobile-card-table td[data-label="الإجراءات"],
    .mobile-card-table td:first-child {
        background: #f8fafc !important;
        justify-content: flex-start !important;
        padding: 8px 14px !important;
        border-bottom: 2px solid #e2e8f0 !important;
    }

    .mobile-card-table td[data-label="الإجراءات"]::before,
    .mobile-card-table td:first-child::before {
        display: none !important;
    }

    /* ── Empty label cells: center content ── */
    .mobile-card-table td[data-label=""] {
        justify-content: center !important;
    }
    .mobile-card-table td[data-label=""]::before {
        display: none !important;
    }

    /* Wrap inner content nicely */
    .mobile-card-table td .actions-dropdown { width: auto !important; }
}

/* Dark mode support for mobile cards */
html[data-theme="dark"] .mobile-card-table tbody tr {
    background: #1e293b !important;
    box-shadow: 0 2px 12px rgba(0,0,0,.3), 0 0 0 1px rgba(255,255,255,.06) !important;
}
html[data-theme="dark"] .mobile-card-table td {
    border-bottom-color: #334155 !important;
}
html[data-theme="dark"] .mobile-card-table td[data-label="الإجراءات"],
html[data-theme="dark"] .mobile-card-table td:first-child {
    background: #273549 !important;
    border-bottom-color: #334155 !important;
}
html[data-theme="dark"] .mobile-card-table td::before {
    color: #94a3b8 !important;
}


/* ══════════════════════════════════════════════════
   SCROLL-TO-TOP BUTTON
   ══════════════════════════════════════════════════ */
#scrollTopBtn {
    position: fixed;
    bottom: 24px;
    left: 20px;
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    border: none;
    border-radius: 50%;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(102,126,234,.4);
    cursor: pointer;
    z-index: 1500;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .25s, transform .25s;
    pointer-events: none;
}

#scrollTopBtn.visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

html[data-theme="dark"] #scrollTopBtn {
    box-shadow: 0 4px 16px rgba(102,126,234,.6);
}

/* ══════════════════════════════════════════════════
   DROPDOWN POSITION FIX (mobile)
   Prevents going off-screen
   ══════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .actions-dropdown-menu {
        min-width: 200px !important;
        max-width: calc(100vw - 24px) !important;
    }

    .actions-dropdown-toggle {
        width: 44px !important;
        height: 44px !important;
        font-size: 1.25rem !important;
        border-radius: 10px !important;
    }

    .actions-dropdown-item {
        padding: 12px 16px !important;
        font-size: .9rem !important;
        min-height: 48px !important;
    }
}


/* ══════════════════════════════════════════════════
   LAYOUT: Sidebar + Content
   ══════════════════════════════════════════════════ */
@media (max-width: 576px) {
    .content-area {
        padding: 12px 10px !important;
    }
}
@media (max-width: 400px) {
    .content-area {
        padding: 8px 8px !important;
    }
}


/* ══════════════════════════════════════════════════
   SIDEBAR — touch-friendly + full scroll
   ══════════════════════════════════════════════════ */
@media (max-width: 1024px) {
    .mobile-toggle {
        width: 44px !important;
        height: 44px !important;
        font-size: 20px !important;
        border-radius: 12px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .nav-link-item {
        padding: 14px 12px !important;
        font-size: .9rem !important;
        min-height: 48px !important;
    }

    .nav-link-icon {
        font-size: 22px !important;
    }

    /* تأكيد الـ scroll للـ sidebar على iOS */
    .sidebar-scroll {
        -webkit-overflow-scrolling: touch !important;
        overflow-y: auto !important;
        overscroll-behavior: contain !important;
    }
}

/* على الشاشات القصيرة: ضغط padding السايدبار ليع كل العناصر */
@media (max-width: 1024px) and (max-height: 700px) {
    .nav-link-item {
        padding: 10px 12px !important;
        min-height: 42px !important;
    }
    .nav-section-title {
        padding: 10px 12px 4px !important;
    }
    .sidebar-nav {
        padding: 10px 0 !important;
    }
}


/* ══════════════════════════════════════════════════
   TOP NAVBAR — mobile compact
   ══════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .top-navbar {
        padding: 8px 12px !important;
        min-height: 52px !important;
    }

    /* Hide user name text on small screens */
    .user-info-text { display: none !important; }

    /* Smaller dark mode label */
    #darkModeToggle #darkModeLabel { display: none !important; }
    #darkModeToggle {
        padding: .4rem .55rem !important;
    }
}

@media (max-width: 400px) {
    .top-navbar { padding: 6px 8px !important; }
}


/* ══════════════════════════════════════════════════
   INPUTS & FORMS — full width on mobile
   ══════════════════════════════════════════════════ */
@media (max-width: 768px) {
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="date"],
    input[type="file"],
    input[type="search"],
    textarea,
    select,
    .cu-input,
    .form-control,
    .form-select {
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box !important;
        min-height: 44px !important;
        font-size: 16px !important; /* prevents iOS auto-zoom */
    }

    /* Two-col form grids → single col */
    .cu-body,
    .row.g-3,
    .form-grid-2col {
        grid-template-columns: 1fr !important;
    }

    /* Full-width forms */
    .cu-body { overflow-y: auto !important; height: auto !important; }
    .cu-page { height: auto !important; overflow: auto !important; }
    .cu-col  { overflow-y: visible !important; }

    /* Fix max-width containers */
    [style*="max-width:900px"],
    [style*="max-width: 900px"],
    [style*="max-width:1100px"],
    [style*="max-width: 1100px"] {
        max-width: 100% !important;
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }

    /* Login form */
    .login-card {
        margin: 1rem !important;
        padding: 1.5rem !important;
    }
}


/* ══════════════════════════════════════════════════
   BUTTONS — touch-friendly sizing
   ══════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .btn,
    button[type="submit"],
    button[type="button"],
    input[type="submit"] {
        min-height: 44px !important;
        font-size: .875rem !important;
    }

    /* Action button groups wrap */
    .dmp-actions,
    .stage-actions-row,
    .header-actions-group,
    .btn-group-mobile,
    .header-actions-users,
    .actions-cell {
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
    }

    /* Add buttons full width on small */
    .btn-add-drugs,
    .btn-add-users {
        min-height: 44px !important;
        padding: 0.6rem 1rem !important;
        font-size: .875rem !important;
    }
}

@media (max-width: 400px) {
    .btn-add-drugs span,
    .btn-add-users span {
        display: none !important;
    }
    .btn-add-drugs,
    .btn-add-users {
        padding: 0.6rem 0.85rem !important;
    }
}


/* ══════════════════════════════════════════════════
   PAGE HEADERS — mobile layout
   ══════════════════════════════════════════════════ */
@media (max-width: 640px) {
    /* Drugs header */
    .drugs-header {
        flex-wrap: wrap !important;
        gap: 0.75rem !important;
        padding: 1rem !important;
    }
    .header-actions-group {
        width: 100% !important;
        justify-content: flex-end !important;
    }
    .drugs-title  { font-size: 1.1rem !important; }
    .drugs-subtitle { display: none !important; }
    .header-icon-drugs { width: 40px !important; height: 40px !important; font-size: 1.25rem !important; }

    /* Users header */
    .users-header {
        flex-wrap: wrap !important;
        gap: 0.75rem !important;
    }
    .header-actions-users { width: 100% !important; justify-content: flex-end !important; }
    .users-title  { font-size: 1.1rem !important; }
    .users-subtitle { display: none !important; }
}


/* ══════════════════════════════════════════════════
   STATS CARDS — 2-col grid on mobile
   ══════════════════════════════════════════════════ */
@media (max-width: 640px) {
    .stats-grid-drugs,
    .stats-grid-users,
    .stats-advanced-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.5rem !important;
    }

    .stat-card-drug,
    .stat-card-user {
        padding: 0.875rem 0.75rem !important;
    }

    .stat-icon-drug,
    .stat-icon-user {
        width: 40px !important;
        height: 40px !important;
        font-size: 1.25rem !important;
    }

    .stat-value-drug,
    .stat-value-user {
        font-size: 1.4rem !important;
    }

    .stat-label-drug,
    .stat-label-user {
        font-size: 0.72rem !important;
    }
}

@media (max-width: 380px) {
    .stats-grid-drugs,
    .stats-grid-users,
    .stats-advanced-grid {
        grid-template-columns: 1fr !important;
    }
}


/* ══════════════════════════════════════════════════
   FILTER BUTTONS — horizontal scroll strip
   ══════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .search-card { padding: 0.875rem !important; }

    .filter-row {
        gap: 0.5rem !important;
        flex-wrap: wrap !important;
    }

    .filter-buttons {
        overflow-x: auto !important;
        flex-wrap: nowrap !important;
        -webkit-overflow-scrolling: touch !important;
        padding-bottom: 6px !important;
        max-width: 100% !important;
        scrollbar-width: thin !important;
    }

    .filter-btn {
        white-space: nowrap !important;
        padding: 0.45rem 0.75rem !important;
        font-size: .8rem !important;
        min-height: 40px !important;
        flex-shrink: 0 !important;
    }

    /* Filter tabs (users page) */
    .filter-tabs-users {
        overflow-x: auto !important;
        flex-wrap: nowrap !important;
        -webkit-overflow-scrolling: touch !important;
        padding-bottom: 4px !important;
        scrollbar-width: thin !important;
    }

    .filter-tab {
        white-space: nowrap !important;
        flex-shrink: 0 !important;
        min-height: 40px !important;
    }
}


/* ══════════════════════════════════════════════════
   PAGINATION CONTROLS — stack on mobile
   ══════════════════════════════════════════════════ */
@media (max-width: 640px) {
    .pagination-controls-top {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.4rem !important;
    }

    .page-size-selector { gap: 0.35rem !important; }
    .page-size-buttons  { gap: 0.2rem !important; }
    .page-size-btn {
        padding: 0.35rem 0.6rem !important;
        font-size: .78rem !important;
        min-width: 36px !important;
        min-height: 36px !important;
    }
    .pagination-info { font-size: .8rem !important; }
}

@media (max-width: 480px) {
    .page-size-btn[data-size="500"],
    .page-size-btn[data-size="1000"] { display: none !important; }
}


/* ══════════════════════════════════════════════════
   DRUGS TABLE — جدول أفقي على الموبايل (لا تحويل لـ Cards)
   ══════════════════════════════════════════════════ */
@media (max-width: 768px) {
    /* Wrapper يسمح بالسحب الأفقي */
    .table-wrapper-drugs {
        overflow-x: auto !important;
        overflow-y: visible !important;
        -webkit-overflow-scrolling: touch !important;
        height: auto !important;
        max-height: none !important;
        /* مؤشر بصري للـ scroll */
        scrollbar-width: thin;
        scrollbar-color: #94a3b8 #f1f5f9;
    }

    .table-wrapper-drugs::-webkit-scrollbar { height: 6px; }
    .table-wrapper-drugs::-webkit-scrollbar-track { background: #f1f5f9; border-radius: 4px; }
    .table-wrapper-drugs::-webkit-scrollbar-thumb { background: #94a3b8; border-radius: 4px; }

    /* الجدول يحتفظ بعرضه الطبيعي */
    .modern-table-drugs {
        display: table !important;
        width: auto !important;
        min-width: 900px; /* يضمن وجود scroll أفقي */
    }

    .modern-table-drugs thead,
    .modern-table-drugs tbody,
    .modern-table-drugs tr,
    .modern-table-drugs td,
    .modern-table-drugs th {
        display: revert !important;
        position: revert !important;
        visibility: revert !important;
        width: auto !important;
    }

    /* ضبط حجم خلايا الجدول للموبايل */
    .modern-table-drugs thead th,
    .modern-table-drugs tbody td {
        font-size: .78rem !important;
        padding: 8px 10px !important;
        white-space: nowrap !important;
    }

    /* عمود الإجراءات ثابت على اليمين */
    .modern-table-drugs thead th.actions-col,
    .modern-table-drugs tbody td:first-child {
        position: sticky !important;
        right: 0 !important;
        z-index: 3 !important;
        background: white !important;
        box-shadow: -2px 0 6px rgba(0,0,0,.08) !important;
    }

    html[data-theme="dark"] .modern-table-drugs thead th.actions-col,
    html[data-theme="dark"] .modern-table-drugs tbody td:first-child {
        background: #1e293b !important;
    }
}


/* ══════════════════════════════════════════════════
   TABLE WRAPPER — horizontal scroll للجداول الكبيرة
   ══════════════════════════════════════════════════ */
.table-wrapper-drugs,
.table-wrapper-supplies,
.table-wrapper-materials,
.table-wrapper-users,
.table-responsive,
.table-scroll-wrapper,
.table-wrapper {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

/* المستلزمات والمواد العامة: جدول أفقي مثل الأدوية */
@media (max-width: 768px) {
    .modern-table-supplies,
    .modern-table-materials {
        display: table !important;
        min-width: 800px !important;
    }

    .modern-table-supplies thead,
    .modern-table-supplies tbody,
    .modern-table-supplies tr,
    .modern-table-supplies td,
    .modern-table-supplies th,
    .modern-table-materials thead,
    .modern-table-materials tbody,
    .modern-table-materials tr,
    .modern-table-materials td,
    .modern-table-materials th {
        display: revert !important;
        position: revert !important;
        visibility: revert !important;
        width: auto !important;
    }

    .modern-table-supplies thead th,
    .modern-table-supplies tbody td,
    .modern-table-materials thead th,
    .modern-table-materials tbody td {
        font-size: .78rem !important;
        padding: 8px 10px !important;
        white-space: nowrap !important;
    }
}

/* Remove scroll shadow when in card mode */
.mobile-card-wrapper {
    background: transparent !important;
}


/* ══════════════════════════════════════════════════
   TABLE CARD HEADER
   ══════════════════════════════════════════════════ */
@media (max-width: 640px) {
    .table-header-drugs,
    .table-header-users {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.5rem !important;
        padding: 0.875rem !important;
    }

    .table-title-drugs,
    .table-title-users {
        font-size: 0.95rem !important;
    }
}


/* ══════════════════════════════════════════════════
   MODALS — full-screen on mobile
   ══════════════════════════════════════════════════ */
@media (max-width: 640px) {
    .modal-dialog {
        margin: 0 !important;
        max-width: 100% !important;
        min-height: 100dvh !important;
    }

    .modal-content {
        border-radius: 0 !important;
        min-height: 100dvh !important;
    }

    .modal-header {
        padding: 1rem !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 10 !important;
        background: inherit !important;
    }

    .modal-body {
        padding: 1rem !important;
    }

    .modal-footer {
        padding: 0.75rem 1rem !important;
        position: sticky !important;
        bottom: 0 !important;
        background: inherit !important;
    }
}


/* ══════════════════════════════════════════════════
   COMPANIES PAGE — specific fixes
   ══════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .page-wrap {
        margin: 0 !important;
        padding: 8px !important;
    }

    .page-header {
        padding: 16px !important;
        flex-direction: column !important;
        gap: 8px !important;
        text-align: center !important;
    }

    .page-header h2 { font-size: 1.2rem !important; }

    .action-bar {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    .action-bar input {
        max-width: 100% !important;
        width: 100% !important;
    }

    .actions-cell {
        flex-wrap: wrap !important;
        gap: 4px !important;
    }

    .btn-action {
        padding: 6px 10px !important;
        font-size: .8rem !important;
        min-height: 40px !important;
    }
}


/* ══════════════════════════════════════════════════
   PAYMENT / REPORTS PAGES — table fix
   ══════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .table > :not(caption) > * > * {
        padding: 0.5rem 0.75rem !important;
        font-size: .82rem !important;
    }

    .table { font-size: .82rem !important; }
}


/* ══════════════════════════════════════════════════
   DASHBOARD STAT CARDS
   ══════════════════════════════════════════════════ */
@media (max-width: 640px) {
    .stats-advanced-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: .5rem !important;
    }
}
@media (max-width: 380px) {
    .stats-advanced-grid { grid-template-columns: 1fr !important; }
}


/* ══════════════════════════════════════════════════
   TOUCH ACTIVE STATE
   ══════════════════════════════════════════════════ */
.touch-active {
    opacity: .75 !important;
    transform: scale(.97) !important;
}


/* ══════════════════════════════════════════════════
   CARD: no margin when inside card-table on mobile
   ══════════════════════════════════════════════════ */
@media (max-width: 640px) {
    .table-card-drugs { border-radius: 0.75rem !important; }

    .search-card,
    .table-card-drugs {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}


/* ══════════════════════════════════════════════════
   FOOTER — simplified on mobile
   ══════════════════════════════════════════════════ */
@media (max-width: 480px) {
    .footer-bar { display: none !important; }
}


/* ══════════════════════════════════════════════════
   SEARCHABLE DROPDOWN — fix on mobile
   ══════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .searchable-dropdown .sd-dropdown {
        min-width: calc(100vw - 40px) !important;
        max-width: calc(100vw - 20px) !important;
        left: 0 !important;
        right: auto !important;
    }
}


/* ══════════════════════════════════════════════════
   STAGE PAGES — fix overflow
   ══════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .dmp-stages-section {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .dmp-card {
        min-width: 0 !important;
    }

    .dmp-actions {
        flex-wrap: wrap !important;
        gap: .4rem !important;
    }
}


/* ══════════════════════════════════════════════════
   ACTIONS DROPDOWN — ensure visible above cards
   ══════════════════════════════════════════════════ */
@media (max-width: 768px) {
    /* Allow absolute dropdowns to overflow the card */
    .mobile-card-table tbody tr {
        overflow: visible !important;
    }
}

/* Global action dropdown overlay — always on top, GPU-accelerated for iOS */
#_drugDropOv, #_supDropOv, #_matDropOv {
    -webkit-transform: translate3d(0,0,0) !important;
    transform: translate3d(0,0,0) !important;
    will-change: transform;
}


/* ══════════════════════════════════════════════════
   PRINT — reset responsive
   ══════════════════════════════════════════════════ */
@media print {
    .content-area { padding: 0 !important; }
    .sidebar, .top-navbar, .footer-bar { display: none !important; }
    .main-wrapper { margin-right: 0 !important; }
    #scrollTopBtn { display: none !important; }

    /* Restore tables for print */
    .mobile-card-table,
    .mobile-card-table thead,
    .mobile-card-table tbody,
    .mobile-card-table tr,
    .mobile-card-table td,
    .mobile-card-table th {
        display: revert !important;
        position: static !important;
    }
}