/**
 * ISDV Responsive Styles
 * أنماط التجاوب مع جميع أحجام الشاشات
 * Version: 1.0.0
 */

/* ============================================
   Breakpoints Variables
   ============================================ */
/* 
   xs: 0-575px (mobile phones)
   sm: 576-767px (large phones)
   md: 768-991px (tablets)
   lg: 992-1199px (desktops)
   xl: 1200px+ (large desktops)
*/

/* ============================================
   Extra Small Devices (Mobile Phones)
   ============================================ */
@media (max-width: 575px) {
    /* Typography */
    body {
        font-size: 14px;
    }
    
    h1 { font-size: 28px; }
    h2 { font-size: 24px; }
    h3 { font-size: 20px; }
    h4 { font-size: 18px; }
    h5 { font-size: 16px; }
    
    /* Containers */
    .isdv-container,
    .isdv-container-fluid {
        padding-left: 15px;
        padding-right: 15px;
    }
    
    /* Cards */
    .isdv-card {
        padding: 15px;
    }
    
    /* Buttons */
    .isdv-btn {
        padding: 8px 16px;
        font-size: 14px;
    }
    
    .isdv-btn-large {
        padding: 12px 20px;
        font-size: 16px;
    }
    
    /* Forms */
    .isdv-form-control {
        padding: 10px 12px;
        font-size: 14px;
    }
    
    .isdv-form-container {
        padding: 20px;
    }
    
    /* Tables */
    .isdv-table-responsive {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .isdv-table {
        min-width: 600px;
    }
    
    /* Modals */
    .isdv-modal-content {
        width: 95%;
        margin: 20px auto;
    }
    
    /* Split Landing Page */
    .isdv-split-section {
        min-height: 350px;
    }
    
    .isdv-split-content {
        padding: 20px;
    }
    
    .isdv-split-title {
        font-size: 22px;
    }
    
    .isdv-split-description {
        font-size: 13px;
    }
    
    /* Dashboard */
    .isdv-dashboard-header {
        flex-direction: column;
        text-align: center;
        gap: 15px;
    }
    
    .isdv-membership-details {
        grid-template-columns: 1fr;
    }
    
    .isdv-stat-card {
        flex-direction: column;
        text-align: center;
    }
    
    /* Footer */
    .isdv-footer-container {
        grid-template-columns: 1fr;
        text-align: center;
    }
    
    .isdv-footer-links-list {
        text-align: center;
    }
    
    .isdv-footer-links-list a {
        justify-content: center;
    }
    
    .isdv-footer-bottom .isdv-footer-container {
        flex-direction: column;
        text-align: center;
    }
    
    /* Navigation */
    .isdv-main-nav {
        flex-direction: column;
        align-items: center;
    }
    
    .isdv-nav-links {
        flex-direction: column;
        align-items: center;
        gap: 10px;
        margin-top: 15px;
    }
    
    /* Grid System */
    .isdv-grid-2,
    .isdv-grid-3,
    .isdv-grid-4 {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    /* Flex Utilities */
    .isdv-flex-responsive {
        flex-direction: column;
    }
    
    /* Spacing */
    .isdv-mt-responsive-0 { margin-top: 0; }
    .isdv-mb-responsive-0 { margin-bottom: 0; }
    .isdv-mt-responsive-sm { margin-top: 10px; }
    .isdv-mb-responsive-sm { margin-bottom: 10px; }
    .isdv-mt-responsive-md { margin-top: 15px; }
    .isdv-mb-responsive-md { margin-bottom: 15px; }
}

/* ============================================
   Small Devices (Large Phones)
   ============================================ */
@media (min-width: 576px) and (max-width: 767px) {
    /* Typography */
    h1 { font-size: 32px; }
    h2 { font-size: 28px; }
    h3 { font-size: 22px; }
    
    /* Containers */
    .isdv-container {
        max-width: 540px;
    }
    
    /* Grid */
    .isdv-grid-2,
    .isdv-grid-3 {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .isdv-grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* Split Landing Page */
    .isdv-split-container {
        flex-direction: column;
    }
    
    .isdv-split-section {
        min-height: 400px;
    }
    
    /* Dashboard Stats */
    .isdv-dashboard-stats {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* Forms */
    .isdv-form-row {
        flex-direction: column;
        gap: 15px;
    }
    
    /* Footer */
    .isdv-footer-container {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ============================================
   Medium Devices (Tablets)
   ============================================ */
@media (min-width: 768px) and (max-width: 991px) {
    /* Typography */
    h1 { font-size: 36px; }
    h2 { font-size: 30px; }
    h3 { font-size: 24px; }
    
    /* Containers */
    .isdv-container {
        max-width: 720px;
    }
    
    /* Grid */
    .isdv-grid-2 {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .isdv-grid-3 {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .isdv-grid-4 {
        grid-template-columns: repeat(3, 1fr);
    }
    
    /* Split Landing Page */
    .isdv-split-container {
        flex-direction: row;
    }
    
    .isdv-split-title {
        font-size: 24px;
    }
    
    .isdv-split-description {
        font-size: 14px;
    }
    
    /* Dashboard */
    .isdv-membership-details {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .isdv-dashboard-stats {
        grid-template-columns: repeat(3, 1fr);
    }
    
    /* Tabs */
    .isdv-tab-btn {
        padding: 12px 18px;
        font-size: 13px;
    }
    
    /* Footer */
    .isdv-footer-container {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* Forms */
    .isdv-form-row {
        flex-direction: row;
    }
}

/* ============================================
   Large Devices (Desktops)
   ============================================ */
@media (min-width: 992px) and (max-width: 1199px) {
    /* Containers */
    .isdv-container {
        max-width: 960px;
    }
    
    /* Grid */
    .isdv-grid-4 {
        grid-template-columns: repeat(3, 1fr);
    }
    
    /* Dashboard */
    .isdv-membership-details {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* Footer */
    .isdv-footer-container {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ============================================
   Extra Large Devices (Large Desktops)
   ============================================ */
@media (min-width: 1200px) {
    /* Containers */
    .isdv-container {
        max-width: 1140px;
    }
    
    /* Grid */
    .isdv-grid-4 {
        grid-template-columns: repeat(4, 1fr);
    }
    
    /* Dashboard */
    .isdv-membership-details {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ============================================
   Landscape Orientation
   ============================================ */
@media (orientation: landscape) and (max-height: 500px) {
    /* Adjust for landscape on small screens */
    .isdv-split-section {
        min-height: 300px;
    }
    
    .isdv-login-card,
    .isdv-apply-card {
        margin: 20px auto;
    }
}

/* ============================================
   Print Styles
   ============================================ */
@media print {
    /* Hide non-printable elements */
    .isdv-no-print,
    .isdv-header,
    .isdv-footer,
    .isdv-sidebar,
    .isdv-language-switcher,
    .isdv-social-icons,
    .isdv-logout-btn,
    .isdv-form-actions,
    button,
    .isdv-btn {
        display: none !important;
    }
    
    /* Ensure visibility of content */
    .isdv-members-dashboard,
    .isdv-patients-area,
    .isdv-apply-container,
    .isdv-login-container {
        padding: 0;
        margin: 0;
    }
    
    /* Remove backgrounds and shadows */
    .isdv-card,
    .isdv-membership-card,
    .isdv-dashboard-tabs {
        box-shadow: none;
        border: 1px solid #ddd;
        background: white;
    }
    
    /* Ensure text is readable */
    body {
        font-size: 12pt;
        color: black;
    }
    
    a {
        text-decoration: underline;
        color: black;
    }
}

/* ============================================
   High Contrast Mode
   ============================================ */
@media (prefers-contrast: high) {
    .isdv-btn-primary,
    .isdv-btn-outline,
    .isdv-card,
    .isdv-form-control {
        border: 2px solid currentColor;
    }
    
    .isdv-split-overlay {
        background: rgba(0, 0, 0, 0.7) !important;
    }
}

/* ============================================
   Reduced Motion
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    
    .isdv-card:hover,
    .isdv-btn:hover,
    .isdv-info-card:hover {
        transform: none !important;
    }
}

/* ============================================
   Dark Mode Support
   ============================================ */
@media (prefers-color-scheme: dark) {
    body.isdv-dark-mode,
    .isdv-dark-mode {
        background-color: #121212;
        color: #e0e0e0;
    }
    
    .isdv-dark-mode .isdv-card,
    .isdv-dark-mode .isdv-login-card,
    .isdv-dark-mode .isdv-apply-card,
    .isdv-dark-mode .isdv-dashboard-tabs {
        background-color: #1e1e1e;
        border-color: #333;
    }
    
    .isdv-dark-mode .isdv-form-control {
        background-color: #2d2d2d;
        border-color: #444;
        color: #e0e0e0;
    }
    
    .isdv-dark-mode .isdv-form-control:focus {
        border-color: var(--isdv-sky-blue-dark);
    }
    
    .isdv-dark-mode .isdv-text-dark {
        color: #e0e0e0;
    }
    
    .isdv-dark-mode .isdv-text-light {
        color: #aaa;
    }
    
    .isdv-dark-mode .isdv-light-gray {
        background-color: #333;
    }
}

/* ============================================
   Touch Device Optimizations
   ============================================ */
@media (hover: none) and (pointer: coarse) {
    /* Larger touch targets */
    .isdv-btn,
    .isdv-tab-btn,
    .isdv-nav-link,
    .isdv-footer-links-list a {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }
    
    /* Remove hover effects that might not work */
    .isdv-card:hover,
    .isdv-info-card:hover {
        transform: none;
    }
    
    /* Better spacing for touch */
    .isdv-form-group {
        margin-bottom: 20px;
    }
    
    .isdv-checkbox-label,
    .isdv-radio-label {
        padding: 5px 0;
    }
}

/* ============================================
   Safari Specific Fixes
   ============================================ */
@supports (-webkit-touch-callout: none) {
    /* Fix for Safari on iOS */
    .isdv-split-section {
        background-attachment: scroll;
    }
    
    select.isdv-form-control {
        background-position: right 15px center;
    }
}

/* ============================================
   RTL Specific Responsive Overrides
   ============================================ */
body.rtl .isdv-grid,
body.rtl .isdv-flex,
.isdv-rtl .isdv-grid,
.isdv-rtl .isdv-flex {
    direction: rtl;
}

@media (max-width: 768px) {
    body.rtl .isdv-footer-links-list a i,
    .isdv-rtl .isdv-footer-links-list a i {
        margin-left: 0;
        margin-right: 5px;
    }
    
    body.rtl .isdv-checkbox-group-inline,
    body.rtl .isdv-radio-group-inline,
    .isdv-rtl .isdv-checkbox-group-inline,
    .isdv-rtl .isdv-radio-group-inline {
        align-items: flex-start;
    }
}

/* ============================================
   Utility Classes for Responsive
   ============================================ */
.isdv-hide-xs {
    display: block;
}
.isdv-show-xs {
    display: none;
}

@media (max-width: 575px) {
    .isdv-hide-xs {
        display: none !important;
    }
    .isdv-show-xs {
        display: block !important;
    }
}

.isdv-hide-sm {
    display: block;
}
.isdv-show-sm {
    display: none;
}

@media (min-width: 576px) and (max-width: 767px) {
    .isdv-hide-sm {
        display: none !important;
    }
    .isdv-show-sm {
        display: block !important;
    }
}

.isdv-hide-md {
    display: block;
}
.isdv-show-md {
    display: none;
}

@media (min-width: 768px) and (max-width: 991px) {
    .isdv-hide-md {
        display: none !important;
    }
    .isdv-show-md {
        display: block !important;
    }
}

.isdv-hide-lg {
    display: block;
}
.isdv-show-lg {
    display: none;
}

@media (min-width: 992px) {
    .isdv-hide-lg {
        display: none !important;
    }
    .isdv-show-lg {
        display: block !important;
    }
}