/*
 * Responsive Styles for ICSHD Geniuses Plugin
 *
 * This stylesheet is used to make the plugin's frontend and backend interfaces
 * responsive to different screen sizes (mobile, tablet, desktop).
 *
 * @package ICSHD_Geniuses
 * @subpackage Assets/CSS
 * @version 1.0.0
 * @author  Your Name/ICSHD Team
 */

/*
 * -----------------------------------------------------------------------------
 * Custom Fonts Declaration
 * Ensure these paths are correct relative to this CSS file.
 * If this CSS is in 'assets/css/', and font is in 'assets/js/vendor/arabic-fonts/',
 * the path would be '../js/vendor/arabic-fonts/ae_AlArabi.ttf'.
 * -----------------------------------------------------------------------------
 */
@font-face {
    font-family: 'aeAlArabi'; /* Define a name for your font */
    src: url('../js/vendor/arabic-fonts/ae_AlArabi.ttf') format('truetype');
    /* You can add more font formats for broader browser compatibility if available:
     * src: url('../js/vendor/arabic-fonts/ae_AlArabi.eot?#iefix') format('embedded-opentype'),
     * url('../js/vendor/arabic-fonts/ae_AlArabi.woff2') format('woff2'),
     * url('../js/vendor/arabic-fonts/ae_AlArabi.woff') format('woff'),
     * url('../js/vendor/arabic-fonts/ae_AlArabi.svg#aeAlArabi') format('svg');
     */
    font-weight: normal;
    font-style: normal;
    font-display: swap; /* Tells the browser how to display text while the font is loading */
}

/*
 * -----------------------------------------------------------------------------
 * Font Application (Apply your custom font to relevant elements)
 * -----------------------------------------------------------------------------
 */
body,
h1, h2, h3, h4, h5, h6,
p, a, span, div, li, ul, ol,
input, textarea, select, button,
.icshd-container,
.icshd-student-dashboard,
.icshd-training-interface,
.icshd-form label,
.wp-list-table {
    font-family: 'aeAlArabi', 'Droid Arabic Kufi', 'Arial', sans-serif; /* Apply the font, with fallbacks */
    direction: rtl; /* Ensure Right-to-Left for Arabic text */
    text-align: right; /* Default text alignment for Arabic */
}

/* Specific adjustments for elements that might need left alignment even in RTL context */
.icshd-left-aligned-element {
    text-align: left;
}


/*
 * -----------------------------------------------------------------------------
 * Responsive Styles - Breakpoints
 * -----------------------------------------------------------------------------
 */

/*
 * Small screens / Mobile (e.g., up to 768px)
 * Adjust layout for smaller viewports.
 */
@media (max-width: 768px) {
    /* General adjustments for plugin containers */
    .icshd-container,
    .icshd-student-dashboard,
    .icshd-training-interface {
        padding: 10px;
        margin: 10px;
        box-sizing: border-box; /* Ensures padding/border are included in element's total width/height */
        width: auto; /* Allow content to adjust naturally */
    }

    /* Adjustments for forms */
    .icshd-form label,
    .icshd-form input[type="text"],
    .icshd-form input[type="email"],
    .icshd-form input[type="password"],
    .icshd-form textarea,
    .icshd-form select {
        width: 100%; /* Make form elements take full width */
        box-sizing: border-box;
        margin-bottom: 10px;
    }

    /* Hide specific elements on mobile if they take up too much space */
    .icshd-some-desktop-only-element {
        display: none;
    }

    /* Adjust columns in tables (if using custom tables, not wp-list-table which handles some responsiveness) */
    .icshd-students-table,
    .icshd-trainers-table {
        display: block;
        width: 100%;
        overflow-x: auto; /* Allows horizontal scrolling for wide tables */
        -webkit-overflow-scrolling: touch; /* Improves scrolling on iOS */
        white-space: nowrap; /* Prevent text wrapping inside cells to maintain column width */
    }
    /* Make table headers/cells more compact on mobile if needed */
    .icshd-students-table th, .icshd-students-table td {
        padding: 8px 5px;
        font-size: 0.9em;
    }


    /* For WP admin tables: hide less important columns on small screens */
    .wp-list-table td.column-email,
    .wp-list-table th.column-email,
    .wp-list-table td.column-registered-date,
    .wp-list-table th.column-registered-date {
        display: none; /* Hide email and registration date on small screens */
    }

    /* Adjustments for buttons */
    .icshd-button-group .button {
        display: block;
        width: 100%;
        margin-bottom: 5px;
    }

    /* Dashboard sections on admin side */
    #dashboard-widgets-wrap .postbox-container {
        width: 100% !important; /* Force full width for dashboard columns */
        float: none; /* Remove float for stacking */
        margin-right: 0;
        margin-bottom: 20px; /* Add space between stacked boxes */
    }
}

/*
 * Medium screens / Tablets (e.g., 769px to 1024px)
 * Minor adjustments for tablets.
 */
@media (min-width: 769px) and (max-width: 1024px) {
    .icshd-container,
    .icshd-student-dashboard,
    .icshd-training-interface {
        padding: 20px;
        margin: 20px auto;
        max-width: 90%; /* Limit width on tablets */
    }

    /* Dashboard sections on admin side (if needed for 2 columns) */
    #dashboard-widgets-wrap .postbox-container {
        width: 49% !important; /* Maintain two columns for tablets */
        float: right; /* For RTL layout, float right */
        margin-left: 2%; /* Add some spacing */
        margin-right: 0; /* Remove left margin from previous default */
    }
    #dashboard-widgets-wrap .postbox-container:nth-of-type(odd) { /* Adjust for RTL if needed, nth-of-type(odd) would be the first in a row from right to left */
        margin-left: 0;
    }
}

/*
 * Large screens / Desktops (e.g., 1025px and up)
 * Default styles for larger viewports.
 */
@media (min-width: 1025px) {
    .icshd-container,
    .icshd-student-dashboard,
    .icshd-training-interface {
        max-width: 1200px; /* Max width for content on large screens */
        margin: 30px auto; /* Center content */
        padding: 30px;
    }

    /* Ensure elements designed for desktops are visible */
    .icshd-some-desktop-only-element {
        display: block; /* or inline-block, flex, etc. */
    }

    /* Ensure admin dashboard columns are aligned */
    #dashboard-widgets-wrap .postbox-container {
        width: 49% !important; /* Two columns */
        float: right; /* For RTL, float right */
        margin-left: 2%;
        margin-right: 0;
    }
    #dashboard-widgets-wrap .postbox-container:nth-of-type(odd) { /* For RTL, this will be the one on the far right */
        margin-left: 0;
    }
}