/*
 * ============================================================================
 * STYLES_FINAL.CSS - Global Stylesheet for Student Portal (FINAL VERSION)
 * ============================================================================
 * Purpose: Complete styling for the finalized Master Information Section
 * 
 * FINAL MODIFICATIONS - LINE 4:
 * - Implemented precise label-right/value-left alignment
 * - Added specific CSS classes for justified layout
 * - Full name field: no label styling
 * - Citizenship, DOB, POB: space-between label-value layout
 * 
 * Key CSS Classes for Line 4:
 * - .master-line-4-final: Main container (flexbox, RTL)
 * - .line4-field: Individual field container
 * - .line4-no-label: Full name field (no label)
 * - .line4-with-label: Labeled fields with justified layout
 * - .field-label-right: Label positioned on right
 * - .field-value-right: Value positioned on right
 * ============================================================================
 */

/* ============================================================================
   SECTION 1: CSS RESET & GLOBAL STYLES
   ============================================================================ */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    /* Color Palette */
    --primary-color: #2563eb;
    --primary-hover: #1d4ed8;
    --secondary-color: #64748b;
    --success-color: #10b981;
    --error-color: #ef4444;
    --background-color: #f8fafc;
    --card-background: #ffffff;
    --text-primary: #1e293b;
    --text-secondary: #64748b;
    --border-color: #e2e8f0;
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    
    /* Spacing */
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 1.5rem;
    --spacing-lg: 2rem;
    --spacing-xl: 3rem;
    
    /* Border Radius */
    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    
    /* Typography */
    --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 
                   'Helvetica Neue', Arial, sans-serif;
}

body {
    font-family: var(--font-family);
    font-size: 16px;
    line-height: 1.6;
    color: var(--text-primary);
    /*background-color: var(--background-color); MIC*/
    min-height: 100vh;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    line-height: 1.2;
    margin-bottom: var(--spacing-sm);
}

h1 { font-size: 2rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.25rem; }

a {
    text-decoration: none;
    color: var(--primary-color);
    transition: color 0.2s ease;
}

a:hover {
    color: var(--primary-hover);
}

/* ============================================================================
   SECTION 2: LOGIN PAGE STYLES
   ============================================================================ */

.login-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.login-container {
    background: var(--card-background);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: var(--spacing-xl);
    width: 100%;
    max-width: 420px;
    margin: var(--spacing-md);
}

.login-header {
    text-align: center;
    margin-bottom: var(--spacing-lg);
}

.login-header h1 {
    color: var(--text-primary);
    margin-bottom: var(--spacing-xs);
}

.login-header .subtitle {
    color: var(--text-secondary);
    font-size: 0.95rem;
}

.login-form {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.form-group label {
    font-weight: 500;
    color: var(--text-primary);
    font-size: 0.95rem;
}

.form-input {
    padding: 0.75rem 1rem;
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    font-size: 1rem;
    transition: all 0.2s ease;
    outline: none;
}

.form-input:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.form-input::placeholder {
    color: #94a3b8;
}

.btn-primary {
    background-color: var(--primary-color);
    color: white;
    padding: 0.875rem 1.5rem;
    border: none;
    border-radius: var(--radius-md);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-top: var(--spacing-sm);
}

.btn-primary:hover {
    background-color: var(--primary-hover);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.btn-primary:active {
    transform: translateY(0);
}

.login-footer {
    margin-top: var(--spacing-lg);
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.875rem;
}

/* ============================================================================
   SECTION 3: NAVIGATION MENU STYLES
   ============================================================================ */

.main-header {
    background-color: var(--card-background);
    box-shadow: var(--shadow-sm);
    position: sticky;
    top: 0;
    z-index: 1000;
    border-bottom: 1px solid var(--border-color);
}

.header-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 var(--spacing-md);
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 70px;
}

.logo h1 {
    font-size: 1.5rem;
    color: var(--primary-color);
    margin: 0;
}

.main-nav {
    flex: 1;
    display: flex;
    justify-content: flex-end;
}

.nav-menu {
    display: flex;
    list-style: none;
    gap: var(--spacing-xs);
    align-items: center;
}

.nav-menu li {
    margin: 0;
}

.nav-link {
    display: block;
    padding: 0.625rem 1.25rem;
    color: var(--text-secondary);
    font-weight: 500;
    font-size: 0.95rem;
    border-radius: var(--radius-md);
    transition: all 0.2s ease;
    white-space: nowrap;
}

.nav-link:hover {
    background-color: var(--background-color);
    color: var(--primary-color);
}

.nav-link.active {
    background-color: var(--primary-color);
    color: white;
}

.nav-link.active:hover {
    background-color: var(--primary-hover);
}

.nav-link.logout {
    color: var(--error-color);
    border: 1px solid var(--error-color);
}

.nav-link.logout:hover {
    background-color: var(--error-color);
    color: white;
}

/* ============================================================================
   SECTION 4: INFO PAGE LAYOUT STYLES
   ============================================================================ */

.info-page {
    padding-top: 0;
}

.main-content {
    max-width: 1400px;
    margin: 0 auto;
    padding: var(--spacing-md) var(--spacing-md);
}
/*
.action-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-md);
    flex-wrap: wrap;
    gap: var(--spacing-sm);
}
*/

.action-bar {
    display: flex;
    flex-direction: row;              /* Horizontal layout */
    justify-content: space-between;   /* Separate left and right groups */
    align-items: center;              /* Vertical centering */
    /*margin-bottom: var(--spacing-md);mic*/
    flex-wrap: wrap;
    gap: var(--spacing-md); /*modifi from sm to md*/
    direction: rtl;                   /* RTL direction for entire bar */
    /*padding: var(--spacing-sm) 0; mic*/   
}

/*
 * ============================================================================
 * QR CODE CONTAINER STYLES
 * ============================================================================
 * Purpose: Style the QR code verification element in the action bar
 */

.qr-code-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    /*padding: 0.75rem; mic*/
    background-color: #ffffff;
    /*border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm); mic*/
    margin-left: 10px;
    margin-top: 5px;
    flex-shrink: 0;                   /* Prevent QR code from shrinking */
}

.qr-code-placeholder {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f8fafc;
    border-radius: var(--radius-sm);
}

/* QR Code image styling (applied after generation) */
.qr-code-placeholder img {
    max-width: 100%;
    max-height: 100%;
    display: block;
}

.qr-code-label {
    font-size: 0.4rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-align: center;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Right-side group: Logo + Title wrapper */
.header-right-group {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1rem;                        /* Space between logo and title */
    direction: rtl;                   /* Maintain RTL for this group */
}

/* Logo styling */
.header-logo {
    height: 60px;                     /* Adjust height as needed */
    width: auto;                      /* Maintain aspect ratio */
    object-fit: contain;              /* Preserve logo proportions */
    flex-shrink: 0;                   /* Prevent logo from shrinking */
    margin-right: 10px;  /*mic*/
    margin-top:10px; /*mic*/
}

#pageTitle {
    margin: 0;                        /* Remove default margins */
    font-size: 1.5rem;
    color: var(--text-primary);
    white-space: nowrap;              /* Prevent title wrapping */
}

.btn-print {
    background-color: var(--secondary-color);
    color: white;
    padding: 0.625rem 1.5rem;
    border: none;
    border-radius: var(--radius-md);
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    /*margin-left: 175px; mic*/
    margin-left: 0; /* Remove the previous margin */
    gap: var(--spacing-xs);
    flex-shrink: 0;                   /* Prevent button from shrinking */
}

.btn-print:hover {
    background-color: #475569;
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

/* Button group for print and save PDF buttons */
.button-group {
    display: flex;
    gap: var(--spacing-sm);
    align-items: center;
    flex-shrink: 0;
}

/* Save PDF Button */
.btn-save-pdf {
    background-color: var(--primary-color);
    color: white;
    padding: 0.625rem 1.5rem;
    border: none;
    border-radius: var(--radius-md);
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    flex-shrink: 0;
}

.btn-save-pdf:hover {
    background-color: var(--primary-hover);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.btn-save-pdf:active {
    transform: translateY(0);
}

.loading {
    text-align: center;
    padding: var(--spacing-xl);
    color: var(--text-secondary);
    font-size: 1.1rem;
}

.info-section {
    background: var(--card-background);
    /*border-radius: var(--radius-lg);mic*/
    /*padding: 1.25rem 1.5rem;mic*/
    margin-bottom: var(--spacing-md);
    box-shadow: var(--shadow-sm);
    /*border: 1px solid var(--border-color);mic*/
}

.section-title {
    color: var(--primary-color);
    border-bottom: 2px solid var(--primary-color);
    padding-bottom: 0.5rem;
    margin-bottom: 1rem;
    font-size: 1.4rem;
}

/* ============================================================================
   SECTION 5: MASTER INFORMATION SECTION STYLES (FINAL VERSION)
   ============================================================================
   Purpose: Complete styling for the finalized 5-line Master Section layout
   
   Layout Structure:
   - Lines 1-3: Centered text, combined fields without labels
   - Line 4 (FINALIZED): Four fields with precise label-right/value-left alignment
   - Line 5: Two fields with labels in horizontal layout (RTL)
*/

/*
 * ----------------------------------------------------------------------------
 * Master Section RTL Container
 * ----------------------------------------------------------------------------
 * Applied to the entire master section for right-to-left text direction
 */
 
.master-section-rtl {
    direction: rtl;
}

/*
 * ----------------------------------------------------------------------------
 * Master Information Container
 * ----------------------------------------------------------------------------
 * Main container holding all five lines
 * Minimal vertical spacing for compact display
 */
.master-info-container {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
    direction: rtl;
    padding: 0.5rem 0;
}

/*
 * ----------------------------------------------------------------------------
 * Base Master Line Styles
 * ----------------------------------------------------------------------------
 * Common styles applied to all five lines
 */
.master-line {
    width: 100%;
    padding: 0.5rem 1rem;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--text-primary);
}

/*
 * ----------------------------------------------------------------------------
 * Lines 1-3: Centered Combined Text (No Labels)
 * ----------------------------------------------------------------------------
 * Purpose: Display combined field values centered on the line
 * Format: Value1 - Value2 (or more values separated by hyphens)
 * 
 * Used for:
 * - Line 1: College - Campus
 * - Line 2: Completion - Term
 * - Line 3: Degree - Major - Status - Language
 */
.master-line-centered {
    text-align: center;
    font-weight: 400;
    background-color: #f8fafc;
    border-radius: var(--radius-sm);
    padding: 0rem 1rem;
    /*padding: 0.6rem 1rem;mic*/
    font-size: 1.05rem;
}

/*
 * ============================================================================
 * LINE 4: FINAL VERSION - PRECISE LABEL-RIGHT/VALUE-LEFT ALIGNMENT
 * ============================================================================
 * 
 * IMPLEMENTATION OVERVIEW:
 * This section implements the finalized Line 4 layout with four fields:
 * 1. Full Name (wsecardm_full_name_ar) - NO LABEL
 * 2. Citizenship (wsecardm_citizen) - WITH LABEL "الجنسية :"
 * 3. Date of Birth (wsecardm_dob) - WITH LABEL "تاريخ الولادة :"
 * 4. Place of Birth (wsecardm_pob) - WITH LABEL "مكان الولادة :"
 * 
 * CRITICAL ALIGNMENT REQUIREMENT:
 * For fields 2, 3, and 4 (citizenship, dob, pob):
 * - Label must be aligned to the RIGHT of the field container
 * - Value must be aligned to the LEFT of the field container
 * - This creates a space-between effect within each labeled field
 * ============================================================================
 */

/*
 * ----------------------------------------------------------------------------
 * Line 4 Main Container
 * ----------------------------------------------------------------------------
 * Purpose: Hold all four fields in a single horizontal line with RTL order
 * Layout: Flexbox with space distribution and proper gaps
 * Direction: RTL (right-to-left) for Arabic text
 */

 /*   old modification
.master-line-4-final {
    display: flex;
    flex-direction: row;          
    justify-content: space-between; 
    align-items: stretch;        
    gap: 1rem;                   
    padding: 0.75rem 1rem;mic
    padding: 0rem 1rem;
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    direction: rtl;              
}
*/

/*
 * ----------------------------------------------------------------------------
 * Individual Field Container (Common Base for All Four Fields)
 * ----------------------------------------------------------------------------
 * Purpose: Base styling for each field within Line 4
 * Applied to: All four fields (full name, citizenship, dob, pob)
 */
 /* old modification

.line4-field {
    flex: 1;                      // Equal width distribution 
    min-width: 150px;             // Minimum width to prevent over-compression 
    display: flex;
    align-items: center;          // Vertical centering 
    //padding: 0.5rem;mic
    padding: 0rem;
    background-color: #f8fafc;     Subtle background for visual separation 
    border-radius: var(--radius-sm);
}
*/

/*
 * ----------------------------------------------------------------------------
 * Field Type 1: Full Name (No Label)
 * ----------------------------------------------------------------------------
 * Purpose: Display only the value (full name in Arabic) without any label
 * Applied to: wsecardm_full_name_ar field only
 * Layout: Simple centered text display
 */
 /* OLD MODIFI
.line4-no-label {
    justify-content: right;      //Center the text within the field 
}
*/
/*
 * Value display for no-label field (full name)
 * Styling: Bold, larger text for prominence
 */
 /*

.line4-no-label .field-value-only {
    font-weight: 600;
    font-size: 1.05rem;
    color: var(--text-primary);
    text-align: right;
}
    */

/*
 * ----------------------------------------------------------------------------
 * Field Type 2: Labeled Fields with Justified Alignment
 * ----------------------------------------------------------------------------
 * Purpose: Display label and value with PRECISE alignment
 * Applied to: Citizenship, DOB, and POB fields
 * 
 * CRITICAL LAYOUT REQUIREMENT:
 * - Label positioned on the RIGHT side of the field container
 * - Value positioned on the LEFT side of the field container
 * - Space-between creates maximum separation
 * 
 * Layout Method: Flexbox with space-between justification
 */
 /* old modifi
.line4-with-label {
    //justify-content: space-between;// CRITICAL: Label RIGHT, Value LEFT 
    flex-direction: row;            // Horizontal layout for label-value pair 
    gap: 0.75rem;                   // Minimum gap between label and value 
}

*/

/*
 * ----------------------------------------------------------------------------
 * Label Styling (Positioned RIGHT within field container)
 * ----------------------------------------------------------------------------
 * Purpose: Style the Arabic label text
 * Applied to: Labels for citizenship, dob, and pob
 * Position: RIGHT side of the field container (due to space-between)
 * 
 * Visual Style:
 * - Smaller font size for label
 * - Secondary text color
 * - Bold weight for readability
 * - Uppercase for emphasis
 */

 /* old modifi
.line4-with-label .field-label-right {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;            // Prevent label text wrapping 
    flex-shrink: 0;                 // Prevent label from shrinking 
}
    */

/*
 * ----------------------------------------------------------------------------
 * Value Styling (Positioned LEFT within field container)
 * ----------------------------------------------------------------------------
 * Purpose: Style the field value text
 * Applied to: Values for citizenship, dob, and pob
 * Position: LEFT side of the field container (due to space-between)
 * 
 * Visual Style:
 * - Normal font size for value
 * - Primary text color for prominence
 * - Medium weight for balance
 */

 /* old modifi
.line4-with-label .field-value-right {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text-primary);
    text-align: right;               // Align text to left within its space 
    direction: rtl;                 //Maintain RTL for Arabic value text 
}
*/

/*
 * ============================================================================
 * END OF LINE 4 FINAL IMPLEMENTATION
 * ============================================================================
 * 
 * SUMMARY OF LINE 4 CSS:
 * 
 * 1. Container (.master-line-4-final):
 *    - Flexbox with space-between for field distribution
 *    - RTL direction for proper Arabic layout
 *    - Gap between fields for visual separation
 * 
 * 2. No-Label Field (.line4-no-label):
 *    - Center-justified content
 *    - Bold, prominent value display
 *    - Used for full name field
 * 
 * 3. Labeled Fields (.line4-with-label):
 *    - Space-between justification (LABEL RIGHT, VALUE LEFT)
 *    - Label styled with secondary color and uppercase
 *    - Value styled with primary color and medium weight
 *    - Used for citizenship, dob, and pob fields
 * 
 * 4. Alignment Mechanism:
 *    - justify-content: space-between creates maximum separation
 *    - Label naturally positioned on right (first in RTL order)
 *    - Value naturally positioned on left (second in RTL order)
 *    - Gap ensures minimum spacing between label and value
 * ============================================================================
 */

/*
 * ----------------------------------------------------------------------------
 * Line 5: Two Fields with Labels (RTL)
 * ----------------------------------------------------------------------------
 * Purpose: Display File Number and Student ID with labels
 * RTL Order: filenb, id
 * Labels: Both fields have labels
 * 
 * Layout: Two-column grid for even distribution
 */
 /* OLD MODIFICATION
.master-line-5 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    //padding: 0.75rem 1rem;mic
    padding: 0rem 1rem;
    background-color: #f8fafc;
    border-radius: var(--radius-sm);
}
*/

/*
 * Field with label container in Line 5
 * Horizontal layout: label on right, value on left (RTL)
 */

 /* OLD MODIFICATION
.master-line-5 .field-with-label {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.75rem;
    justify-content: center;//flex-start;
}

.master-line-5 .field-label {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-secondary);
    white-space: nowrap;
}

.master-line-5 .field-value {
    font-size: 1rem;
    font-weight: 600;
    color: var(--primary-color);
}
*/

/* ============================================================================
   RESTRUCTURED LINES 4 & 5 - ADD THESE STYLES TO YOUR styles.css
   ============================================================================
   Instructions: Add these CSS rules to your existing styles.css file
   Location: After the existing master section styles
   ============================================================================ */

/* REMOVE OR COMMENT OUT these old classes:
   - .master-line-4-final
   - .line4-field
   - .line4-no-label
   - .line4-with-label
   - .field-label-right and .field-value-left (old versions)
   - Old .master-line-5 styles
*/

/* ============================================================================
   NEW LINE 4: 50/50 WIDTH SPLIT IMPLEMENTATION
   ============================================================================ */

.master-line-4-restructured {
    display: flex;
    flex-direction: row;              /* Horizontal layout for two areas */
    justify-content: space-between;   /* Separate the two areas */
    align-items: stretch;             /* Equal height for both areas */
    gap: 1rem;                        /* Space between the two areas */
    padding: 0rem 1rem;
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    direction: ltr;                   /* RTL for proper area order */
    /*min-height: 60px; mic */                 /* Minimum height for visual consistency */
}

/* Area A: Full Name (50% Width - LEFT SIDE in RTL) */
.line4-area-a {
    flex-basis: 50%;                  /* CRITICAL: Fixed 50% width */
    flex-shrink: 0;                   /* Prevent shrinking below 50% */
    flex-grow: 0;                     /* Prevent growing beyond 50% */
    display: flex;
    align-items: center;              /* Vertical centering */
    justify-content: center;          /* Horizontal centering within 50% */
    padding: 0.5rem;
    background-color: #f8fafc;
    border-radius: var(--radius-sm);
}

.line4-area-a .field-value-only {
    font-weight: 600;
    font-size: 1.05rem;
    color: var(--text-primary);
    text-align: center;
    direction: rtl;
}

/* Area B: File Number + Student ID (50% Width - RIGHT SIDE in RTL) */
.line4-area-b {
    flex-basis: 50%;                  /* CRITICAL: Fixed 50% width */
    flex-shrink: 0;                   /* Prevent shrinking below 50% */
    flex-grow: 0;                     /* Prevent growing beyond 50% */
    display: flex;
    flex-direction: row;           /* Stack fields vertically */
    justify-content: space-between;          /* Center fields vertically within area */
    gap: 0.5rem;                      /* Space between File# and ID fields */
    padding: 0.5rem;
    background-color: #f8fafc;
    border-radius: var(--radius-sm);
}

/* Labeled Field Container (within Area B) */
.line4-field-labeled {
    display: flex;
    flex-direction: row;              /* Horizontal layout for label-value */
    justify-content: space-between;   /* Label RIGHT, Value LEFT */
    align-items: center;
    gap: 0.75rem;                     /* Minimum gap between label and value */
    direction: rtl;
}

.line4-field-labeled .field-label-right {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    flex-shrink: 0;
}

.line4-field-labeled .field-value-left {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--primary-color);
    text-align: left;
    direction: rtl;
    display: inline; /* keep inline */
    white-space: nowrap; /* prevent wrapping */

}

/* ============================================================================
   NEW LINE 5: EQUAL SPACING IMPLEMENTATION
   ============================================================================ */

.master-line-5-restructured {
    display: flex;
    flex-direction: row;              /* Horizontal layout for three fields */
    justify-content: space-evenly;    /* Equal spacing distribution */
    align-items: stretch;             /* Equal height for all fields */
    gap: 1rem;                        /* Space between fields */
    padding: 0rem 1rem;
    background-color: #f8fafc;
    border-radius: var(--radius-sm);
    direction: rtl;                   /* RTL for proper field order */
}

/* Individual Field Container (Equal Width) */
.line5-field-equal {
    flex: 1;                          /* CRITICAL: Equal flex growth */
    display: flex;
    flex-direction: row;              /* Horizontal layout for label-value */
    justify-content: center;   /* Label RIGHT, Value LEFT */
    align-items: center;
    gap: 0.75rem;                     /* Minimum gap between label and value */
    /*padding: 0.5rem; mic*/
    background-color: #ffffff;
    border-radius: var(--radius-sm);
    min-width: 0;                     /* Allow flex shrinking if needed */
    direction: rtl;
}

.line5-field-equal .field-label-right {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    flex-shrink: 0;                   /* Prevent label from shrinking */
}

.line5-field-equal .field-value-left {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text-primary);
    text-align: left;
    direction: rtl;
}

/* ============================================================================
   SECTION 6: DETAIL TABLE STYLES (UNCHANGED)
   ============================================================================ */

.table-container {
    overflow-x: auto;
    /*margin-top: var(--spacing-md);mic*/
}

.detail-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
}

.detail-table thead {
    background-color: var(--background-color);
}

.detail-table th {
    /*padding: var(--spacing-sm) var(--spacing-md);mic*/
    text-align: left;
    font-weight: 600;
    color: var(--text-primary);
    border-bottom: 2px solid var(--border-color);
    border-top: 2px solid var(--border-color); /*mic*/
    white-space: nowrap;
}

.detail-table td {
    /*padding: var(--spacing-sm) var(--spacing-md);mic*/
    border-bottom: 1px solid var(--border-color);
    color: var(--text-primary);
}

.detail-table tbody tr:hover {
    background-color: var(--background-color);
}

.no-records {
    text-align: center;
    padding: var(--spacing-xl);
    color: var(--text-secondary);
    font-style: italic;
}

/* ============================================================================
   SECTION 7: UTILITY CLASSES
   ============================================================================ */

.error-message {
    background-color: #fee2e2;
    color: var(--error-color);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-md);
    border: 1px solid var(--error-color);
    margin: var(--spacing-sm) 0;
    font-size: 0.95rem;
}

.success-message {
    background-color: #d1fae5;
    color: var(--success-color);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-md);
    border: 1px solid var(--success-color);
    margin: var(--spacing-sm) 0;
}

.main-footer {
    background-color: var(--card-background);
    /*border-top: 1px solid var(--border-color);*/
    padding: var(--spacing-lg) var(--spacing-md);
    /*text-align: center; mic*/
    text-align: right;
    color: var(--text-secondary);
    font-size: 0.775rem; /*0.875rem;*/
    margin-top: var(--spacing-xl);
}

/* ============================================================================
   SECTION 8: PRINT MEDIA QUERIES
   ============================================================================ */

@media print {
    /* Hide only specific elements, not the footer */
    /*.no-print,*/
    .main-header,
    .btn-print,
    .btn-save-pdf,
    .action-bar button,
    /*.qr-code-wrapper,*/
    .button-group {
        display: none !important;
    }

    @page {
        size: A4;
        margin: 10mm; /* Add some margin for the footer */
    }
    
    body {
        background: white;
        color: black;
        margin: 0;
        padding: 0;
    }
    
    /* Ensure footer appears on print */
    .main-footer {
        display: block !important;
        /*page-break-before: auto;*/
        margin-top: var(--spacing-lg);
        font-size: 0.7rem; /* Slightly smaller for print */
    }
    
    .info-section {
        box-shadow: none;
        /*border: 1px solid #ddd;mic*/
        page-break-inside: avoid;
    }
    
    .master-info-container {
        gap: 0.5rem;
    }
    
    .master-line {
        padding: 0.4rem 0.5rem;
    }

    /*  old modification 
    .master-line-4-final {
        padding: 0.5rem 0.75rem;
    }
        */
    
    .detail-table {
        font-size: 0.85rem;
    }
    
    .detail-table th,
    .detail-table td {
        padding: 0.375rem 0.5rem;
    }
    
    .detail-table tbody tr:hover {
        background-color: transparent;
    }
    
    .main-content {
        padding: 0;
    }
    
    h2, h3 {
        page-break-after: avoid;
    }
    
    .info-section {
        page-break-inside: avoid;
    }

    .master-line-4-restructured {
        padding: 0.5rem 0.75rem;
    }
    
    .master-line-5-restructured {
        padding: 0.5rem 0.75rem;
    }
}

/* ============================================================================
   SECTION 9: RESPONSIVE DESIGN (MOBILE/TABLET)
   ============================================================================ */

/* Tablet (768px and below) */
@media (max-width: 768px) {
    .main-header .main-nav .nav-menu a[href="home.html"].nav-link.active,
    .main-header .main-nav .nav-menu a[href="#master-section"].nav-link,
    .main-header .header-container .logo {
    display: none !important;
    }

    /* Header adjustments */
    .header-container {
        flex-direction: column;
        gap: var(--spacing-sm);
        padding: var(--spacing-sm) var(--spacing-md);
    }
    
    .nav-menu {
        flex-direction: column;
        width: 100%;
        gap: var(--spacing-xs);
    }
    
    .nav-link {
        text-align: center;
        /*width: 100%;*/
    }
    
    /* Action bar adjustments */
    /*.action-bar {
        flex-direction: column;
        align-items: stretch; mic flex-start;
    }
    */
    
   /* .qr-code-wrapper {
        order: 3;                      mic Move QR code to bottom on mobile
        width: 100%;
        justify-content: center;
    }
    
    .header-right-group {
        order: 1;
    }*/

    .header-right-group{
         order: 1;
    }

    .btn-print {
         order: 2;
    }  
    
    #qrCodeContainer {
         order: 3;
    }

    .action-bar {
        display: inline-flex !important;
        flex-wrap: nowrap;          /* keep items in one line */
        /*align-items: normal; */       /* vertical alignment */
        justify-content: flex-start; /* items start from left */
        /*gap: 8px;  */                 /* optional space between items */
    }

    .btn-print, .header-right-group, #qrCodeContainer {
        /*width: 100%;
        justify-content: center; mic*/
       
         /* Force minimal size */
        /*display: inline-flex !important; */  /* prevents full-width stretching */
        width: auto !important;         /* button fits text only */
        min-width: 0 !important;       /* remove any min-width constraint */
        max-width: fit-content !important;  /* limit to text content size */
        padding: 4px 8px;
        flex-shrink: 1;                 /* allow shrinking */
        white-space: nowrap;         /* prevent text wrapping */
        
        /* Compact look */
        /*padding: 4px 8px;
        font-size: 0.85em;
        line-height: 1;
        white-space: nowrap;
        flex-shrink: 1;
        align-self: flex-start;*/ /* prevent vertical stretch if inside flexbox */
        
    }

    .nav-menu a[href="home.html"].nav-link.logout {
      padding: 4px 8px;
      margin: 0;
    }
    
    /*
     * ========================================================================
     * LINE 4 RESPONSIVE BEHAVIOR (TABLET)
     * ========================================================================
     * On tablet, Line 4 switches to vertical stacking
     * Each field maintains its internal label-value alignment
     */

      /*  old modification 
    .master-line-4-final {
        flex-direction: column;   //Stack fields vertically 
        gap: 0.75rem;
    }
    */
    
    /* old modification

    .line4-field {
        width: 100%;              // Full width for each field 
        min-width: unset;
    }
    */
    
    /* Labeled fields maintain space-between alignment */
    /* old modifi
    .line4-with-label {
        justify-content: space-between; // Keep label-right/value-left even when stacked 
    }
    */
    
    /* Master Section Line 5 adjustments */
    .master-line-5 {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    /* Section padding adjustments */
    .info-section {
        padding: 1rem 1.25rem;
    }

    .master-line-4-restructured {
        flex-direction: column;        /* Stack areas vertically */
        gap: 0.75rem;
    }
    
    .line4-area-a,
    .line4-area-b {
        flex-basis: auto;             /* Remove fixed 50% on mobile */
        width: 100%;                  /* Full width when stacked */
    }
    
    .master-line-5-restructured {
        flex-direction: column;       /* Stack fields vertically */
        gap: 0.75rem;
    }
    
    .line5-field-equal {
        width: 100%;                  /* Full width for each field */
    }
}

/* Mobile (480px and below) */
@media (max-width: 480px) {

    .main-header,
    .btn-print,
    .action-bar button {
    display: none !important;
    }

    /* Reduce overall spacing */
    :root {
        --spacing-lg: 1.5rem;
        --spacing-xl: 2rem;
    }
    
    /* Login container adjustments */
    .login-container {
        padding: var(--spacing-lg);
        margin: var(--spacing-sm);
    }
    
    /* Smaller headings */
    h1 { font-size: 1.75rem; }
    h2 { font-size: 1.25rem; }
    h3 { font-size: 1.1rem; }
    
    /* Master Section adjustments */
    .master-info-container {
        gap: 0.5rem;
    }
    
    .master-line {
        padding: 0.4rem 0.75rem;
        font-size: 0.95rem;
    }
    
    .master-line-centered {
        font-size: 1rem;
        padding: 0.5rem 0.75rem;
    }
        
    /*
     * ========================================================================
     * LINE 4 RESPONSIVE BEHAVIOR (MOBILE)
     * ========================================================================
     * On mobile, maintain vertical stacking with adjusted padding
     * Label-value alignment preserved within each field
     */

      /*  old modification 
    .master-line-4-final {
        padding: 0.5rem 0.75rem;
        gap: 0.5rem;
    }
    */

    /* old modification
    .line4-field {
        padding: 0.4rem;
    }
        */
    
    /* Adjust font sizes for mobile */
    /* OLD MODIFI
    .line4-no-label .field-value-only {
        font-size: 1rem;
    }
    */
/* old modifi
    .line4-with-label .field-label-right {
        font-size: 0.8rem;
    }
    
    .line4-with-label .field-value-right {
        font-size: 0.9rem;
    }
    */

    /* Line 5 adjustments */
    .master-line-5 {
        padding: 0.5rem 0.75rem;
    }
    
    /* Detail table adjustments */
    .detail-table {
        font-size: 0.85rem;
    }
    
    .detail-table th,
    .detail-table td {
        padding: var(--spacing-xs) var(--spacing-sm);
    }

    .master-line-4-restructured {
        padding: 0.5rem 0.75rem;
        gap: 0.5rem;
    }
    
    .line4-area-a,
    .line4-area-b {
        padding: 0.4rem;
    }
    
    .line4-area-a .field-value-only {
        font-size: 1rem;
    }
    
    .line4-field-labeled .field-label-right {
        font-size: 0.8rem;
    }
    
    .line4-field-labeled .field-value-left {
        font-size: 0.9rem;
    }
    
    .master-line-5-restructured {
        padding: 0.5rem 0.75rem;
        gap: 0.5rem;
    }
    
    .line5-field-equal {
        padding: 0.4rem;
    }
    
    .line5-field-equal .field-label-right {
        font-size: 0.8rem;
    }
    
    .line5-field-equal .field-value-left {
        font-size: 0.9rem;
    }
}

/* ============================================================================
   END OF STYLESHEET
   ============================================================================
   
   FINAL MODIFICATION SUMMARY - LINE 4:
   
   1. PRECISE ALIGNMENT IMPLEMENTATION:
      - .master-line-4-final: Main container with flexbox
      - .line4-with-label: Uses justify-content: space-between
      - .field-label-right: Positioned on RIGHT side
      - .field-value-right: Positioned on RIGHT side
   
   2. LAYOUT MECHANISM:
      - space-between creates maximum separation
      - In RTL context, first element (label) goes right
      - Second element (value) goes left
      - Gap property ensures minimum spacing
   
   3. FIELD TYPES:
      - No-label field: Center-justified (full name)
      - Labeled fields: Justified layout (citizenship, dob, pob)
   
   4. SPECIFIC LABEL FOR CITIZENSHIP:
      - Applied via JavaScript in script_final.js
      - Arabic text "الجنسية :" inserted dynamically
   
   5. RESPONSIVE BEHAVIOR:
      - Desktop: Horizontal layout with 4 fields
      - Tablet: Vertical stacking, alignment maintained
      - Mobile: Vertical stacking, adjusted font sizes
   
   6. RTL SUPPORT:
      - Direction: rtl on all containers
      - Field order follows RTL convention
      - Arabic text displays correctly
   
   7. PRINT OPTIMIZATION:
      - Reduced padding for print media
      - Maintains alignment on paper
   ============================================================================
 */