/* ========================================================
   GLOBAL RESETS & STYLING CORE SYSTEM
   ======================================================== */
* { 
    box-sizing: border-box; 
    margin: 0; 
    padding: 0; 
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; 
}
body { 
    background-color: #f1f5f9; 
    padding-bottom: 40px; 
    color: #1e293b; 
    -webkit-font-smoothing: antialiased; 
}

@media print {
    /* Set page margins cleanly for standard A4 paper edge tracking */
    @page {
        size: A4 portrait !important;
        margin: 0.2in !important; 
    }

    /* Completely hide web utility components, navigation links, and screen buttons */
    .no-print, .btn-qr-pay, button, .modal-overlay:not(.printing-qr-modal) {
        display: none !important;
    }

    /* Standardize typography with optimized line spacing for dual-page compression */
    html, body {
        background: #ffffff !important;
        color: #000000 !important;
        font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
        font-size: 9pt !important; /* Reduced base font to fit all data within 2 pages */
        line-height: 1.2 !important;
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
    }

    /* ========================================================
       CONTAINER FRAME WITH INNER PADDING & ZOOM OVERRIDE
       ======================================================== */
    form#collegeApplicationForm, 
    .form-canvas, 
    .form-container, 
    main,
    .wrapper,
    .container {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
        margin: 0 auto !important;
        padding: 0 5px !important; /* Inset padding away from paper borders */
        box-sizing: border-box !important;
        transform: scale(0.95) !important; /* Forces layout tracking onto 2 pages max */
        transform-origin: top center !important;
    }

    /* FORCE BROWSER TO SHOW BACKGROUND IMAGES DURING PRINTING */
    .print-watermark {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
        color-adjust: exact !important;
    }

    /* Shrunk section titles tightly */
    .form-section-title {
        font-size: 10.5pt !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        border-bottom: 2px solid #1e293b !important;
        margin-top: 10px !important;
        margin-bottom: 6px !important;
        padding-bottom: 2px !important;
        page-break-after: avoid !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Tightly compress row element margins */
    .form-row {
        gap: 12px !important;
        margin-bottom: 6px !important;
    }

    .form-group {
        margin-bottom: 2px !important;
    }

    label {
        font-size: 8pt !important;
        font-weight: 600 !important;
        color: #334155 !important;
        margin-bottom: 1px !important;
    }

    /* Flat space-saving minimal underlines instead of bulky screen boxes */
    input, select, textarea {
        box-sizing: border-box !important;
        height: 22px !important;
        padding: 1px 0 !important;
        font-size: 9.5pt !important;
        font-weight: 700 !important;
        color: #000000 !important;
        background: transparent !important;
        border: none !important;
        border-bottom: 1px solid #94a3b8 !important;
        border-radius: 0 !important;
        appearance: none !important;
        -webkit-appearance: none !important;
        -moz-appearance: none !important;
    }

    textarea {
        height: auto !important;
        min-height: 32px !important;
        line-height: 1.3 !important;
    }

    input[readonly], input[disabled], select[disabled] {
        background-color: transparent !important;
        border-bottom: 1px dashed #cbd5e1 !important;
    }

    /* ========================================================
       DATA TABLES ARCHITECTURE: RADICAL RESETS FOR EDIT MODE
       ======================================================== */
    .table-responsive {
        overflow: visible !important;
        width: 100% !important;
        max-width: 100% !important;
        display: block !important;
        box-sizing: border-box !important;
        margin: 0 0 12px 0 !important;
    }

    .matrix-table, .edu-table, .exp-table, table {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
        table-layout: fixed !important; /* Hard locks column borders inside available space */
        border-collapse: collapse !important;
        margin-top: 4px !important;
        margin-bottom: 6px !important;
        box-sizing: border-box !important;
    }

    /* Balanced 100% math allocations for the qualification matrix columns */
    .matrix-table th:nth-child(1) { width: 15% !important; } /* Examination Passed */
    .matrix-table th:nth-child(2) { width: 12% !important; } /* University / Board */
    .matrix-table th:nth-child(3) { width: 10% !important; } /* Roll No */
    .matrix-table th:nth-child(4) { width: 7% !important; }  /* Max Marks */
    .matrix-table th:nth-child(5) { width: 7% !important; }  /* Obtained */
    .matrix-table th:nth-child(6) { width: 6% !important; }  /* %age */
    .matrix-table th:nth-child(7) { width: 6% !important; }  /* Year */
    .matrix-table th:nth-child(8) { width: 27% !important; } /* Subjects (Maximum available room) */
    .matrix-table th:nth-child(9) { width: 10% !important; } /* Remarks */

    /* Balanced 100% math allocations for the experience records matrix grid */
    .exp-table th:nth-child(1) { width: 15% !important; } /* Post Held */
    .exp-table th:nth-child(2) { width: 35% !important; } /* Name of Institution */
    .exp-table th:nth-child(3) { width: 12% !important; } /* Period From */
    .exp-table th:nth-child(4) { width: 12% !important; } /* Period To */
    .exp-table th:nth-child(5) { width: 26% !important; } /* Pay Scale & Salary */

    table th {
        background: #f8fafc !important;
        color: #1e293b !important;
        font-size: 7.5pt !important;
        font-weight: 700 !important;
        padding: 4px 2px !important;
        border: 1px solid #cbd5e1 !important;
        text-transform: uppercase !important;
        text-align: center !important;
    }

    table td {
        padding: 3px !important;
        border: 1px solid #cbd5e1 !important;
        font-size: 8.5pt !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    /* CRITICAL FIX: STRIP ALL BULKY SCREEN WIDTHS FROM CELL INPUTS */
    table td input {
        display: block !important;
        box-sizing: border-box !important;
        width: 100% !important;      /* Fits the cell space exactly */
        max-width: 100% !important;  /* Stops the input from spilling out */
        min-width: 0 !important;     /* Deletes all hidden screen width restrictions */
        height: 20px !important;
        border: none !important;
        border-bottom: none !important;
        padding: 0 2px !important;
        font-weight: 600 !important;
        font-size: 8pt !important; 
        background: transparent !important;
        margin: 0 !important;
    }

    /* Strip native up/down number spin arrows on paper */
    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
        -webkit-appearance: none !important;
        margin: 0 !important;
    }

    input[type=number] {
        -moz-appearance: textfield !important;
        text-align: left !important; /* Forces standard form number fields to align left */
    }

    /* Keep only table numeric data inputs centered */
    table td input[type=number] {
        text-align: center !important; 
    }
    
    /* Shrink signature/photo boxes slightly to prevent trailing page splits */
    .photo-placeholder, .signature-placeholder,
    div[style*="border: 1px dashed"], div[style*="border:1px dashed"] {
        height: 85px !important; 
        width: 75px !important;
        border: 1px solid #94a3b8 !important;
    }

    /* Prevents the entire section from splitting awkwardly */
    .keep-together {
        page-break-inside: avoid !important;
        break-inside: avoid !important;
    }
    
    /* Ensures table rows do not split their internal inputs halfway */
    .matrix-table tr {
        page-break-inside: avoid !important;
        break-inside: avoid !important;
    }
    
    /* Hides the default grey dd/mm/yyyy text for blank date fields when printing */
    input[type="date"][value=""]::-webkit-datetime-edit,
    input[type="date"]:not([value])::-webkit-datetime-edit {
        color: transparent !important;
    }

    /* Firefox specific fallback */
    input[type="date"][value=""], 
    input[type="date"]:not([value]) {
        color: transparent !important;
    }

    /* ========================================================
       CASE-SPECIFIC ACTIVE QR CODE PRINTING ISOLATION
       ======================================================== */
    body.printing-qr-modal > *:not(#paymentQRModal) {
        display: none !important;
    }

    body.printing-qr-modal #paymentQRModal.no-print {
        display: flex !important;
        position: relative !important;
        left: auto !important;
        top: auto !important;
        width: 100% !important;
        height: auto !important;
        background: transparent !important;
        transform: none !important;
    }

    body.printing-qr-modal .modal-card {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        box-shadow: none !important;
        border: none !important;
        margin: 40px auto !important;
        max-width: 420px !important;
        width: 100% !important;
    }

    body.printing-qr-modal .modal-qr-container {
        display: inline-block !important;
        background: #f8fafc !important; 
        border: 1.5px dashed #cbd5e1 !important;
        padding: 16px !important;
        width: 260px !important;
    }

    body.printing-qr-modal .modal-instructions {
        width: 100% !important;
        max-width: 360px !important;
        background: #f8fafc !important;
        padding: 14px !important;
        border-radius: 8px !important;
        border-left: 4px solid #2563eb !important;
    }

    /* Forcibly display and pin the text grid across every single printed page */
    #dynamic-print-watermark {
        display: block !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important; /* Constrained exactly to the page width */
        height: 100% !important; /* Dynamically matches the natural 2-page height */
        z-index: 999999 !important;
        pointer-events: none;
        overflow: hidden; /* Prevents text elements from pushing page boundaries */
        
        /* Typography adjustments */
        font-family: Arial, sans-serif !important;
        font-size: 2rem !important;
        font-weight: 900 !important;
        line-height: 2.2;
        letter-spacing: 3px;
        text-align: center;
        padding-top: 50px; /* Slight offset to look balanced at the top */
        
        /* Semi-transparent warning color */
        color: rgba(220, 53, 69, 0.06) !important;
        text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.5);
        
        /* Tilted grid alignment */
        transform: rotate(-28deg) !important;
        transform-origin: top center;
        transform-scale: 1.1;
    }
}

/* Normal screen presentation layer - keep hidden completely */
#dynamic-print-watermark {
    display: none;
}

/* ========================================================
1. FIXED DYNAMIC HEADER APPLICATION NAVIGATION BAR
======================================================== */
.nav-header {
    background: #0f172a;
    color: #ffffff;
    padding: 16px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 4px 6px rgba(0,0,0,0.08);
    flex-wrap: wrap;
    gap: 16px; 
    width: 100%; 
    box-sizing: border-box;
}

.nav-header h1 {
    font-size: 15px;
    font-weight: 600;
    color: #ffffff !important; 
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
}

.nav-header h1 strong { 
    color: #3b82f6; 
    font-weight: 700; 
}

.nav-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.nav-links a {
    color: #ffffff !important;
    text-decoration: none !important;
    font-size: 13px;
    font-weight: 600;
    background: #334155;
    padding: 8px 16px;
    border-radius: 6px;
    white-space: nowrap; 
    transition: all 0.2s ease-in-out;
    display: inline-block; 
    border: 1px solid transparent;
}

.nav-links a:hover {
    background: #475569;
    color: #ffffff !important; 
    transform: translateY(-1px);
}

.nav-links a.signout-btn {
    background: #dc2626;
}

.nav-links a.signout-btn:hover {
    background: #b91c1c;
}

.nav-link.active {
  color: #007bff !important; /* Change to your brand color */
  font-weight: bold;
  border-bottom: 2px solid #007bff;
}

/* ========================================================
   2. MAIN CONTAINER APPLICATION FORM CANVAS
   ======================================================== */
.form-canvas { 
    width: 95%; 
    max-width: 960px; 
    margin: 30px auto; 
    background: #ffffff; 
    padding: 35px 25px; 
    border-radius: 12px; 
    border: 1px solid #e2e8f0; 
    box-shadow: 0 4px 12px rgba(0,0,0,0.03); 
}
.college-title { 
    text-align: center; 
    margin-bottom: 6px; 
    color: #0f172a; 
    font-size: 22px; 
    font-weight: 700; 
    text-transform: uppercase; 
    line-height: 1.3; 
}
.college-subtitle { 
    text-align: center; 
    color: #64748b; 
    font-size: 14px; 
    margin-bottom: 30px; 
    font-weight: 500; 
    text-decoration: underline; 
    line-height: 1.4; 
}

/* ========================================================
   3. RESPONSIVE INPUT SECTION GRIFFIN LAYOUTS
   ======================================================== */
.form-section-title { 
    font-size: 13px; 
    font-weight: 700; 
    text-transform: uppercase; 
    color: #0f172a; 
    background: #f8fafc; 
    padding: 10px 14px; 
    border-radius: 6px; 
    border-left: 4px solid #2563eb; 
    margin: 28px 0 18px 0; 
    letter-spacing: 0.5px; 
}
.form-row { 
    display: flex; 
    flex-wrap: wrap; 
    margin: 0 -10px; 
}
.form-group { 
    flex: 1 1 45%; 
    min-width: 260px; 
    padding: 0 10px; 
    margin-bottom: 18px; 
}
.form-group.full-width { 
    flex: 1 1 100%; 
}
.form-group.third-width { 
    flex: 1 1 30%; 
    min-width: 220px; 
}

/* ========================================================
   4. UNIFORM INPUT CONTROL ELEMENT FIELDS
   ======================================================== */
label { 
    display: block; 
    margin-bottom: 6px; 
    color: #475569; 
    font-size: 13px; 
    font-weight: 600; 
    line-height: 1.4; 
}
input[type="text"], input[type="date"], input[type="number"], input[type="tel"], input[type="email"], textarea, select { 
    width: 100%; 
    height: 42px; 
    padding: 10px 14px; 
    border: 1.5px solid #cbd5e1; 
    border-radius: 6px; 
    font-size: 15px; 
    outline: none; 
    color: #1e293b; 
    background-color: #ffffff; 
    transition: all 0.2s ease; 
}
textarea { 
    height: auto; 
    min-height: 85px; 
    resize: vertical; 
}
input:focus, textarea:focus, select:focus { 
    border-color: #2563eb; 
    box-shadow: 0 0 0 3px rgba(37,99,235,0.15); 
}

/* ========================================================
   5. MOBILE-SAFE DATA GRID FRAMEWORK TABLES
   ======================================================== */
.table-responsive { 
    width: 100%; 
    overflow-x: auto; 
    margin-bottom: 25px; 
    border: 1px solid #cbd5e1; 
    border-radius: 8px; 
    -webkit-overflow-scrolling: touch; 
}
.matrix-table { 
    width: 100%; 
    border-collapse: collapse; 
    min-width: 850px; 
    text-align: left; 
}
.matrix-table th { 
    background: #f8fafc; 
    padding: 12px 10px; 
    border-bottom: 2px solid #cbd5e1; 
    border-right: 1px solid #cbd5e1; 
    font-size: 11px; 
    font-weight: 700; 
    color: #475569; 
    text-transform: uppercase; 
    letter-spacing: 0.3px; 
}
.matrix-table td { 
    padding: 8px; 
    border-bottom: 1px solid #cbd5e1; 
    border-right: 1px solid #cbd5e1; 
    background: #ffffff; 
}
.matrix-table input { 
    height: 34px; 
    padding: 6px 8px; 
    font-size: 14px; 
    border: 1px solid #cbd5e1; 
    border-radius: 4px; 
}

/* ========================================================
   6. INTERACTIVE ALERTS & MASTER CONTROL BUTTONS
   ======================================================== */
.action-submit-btn { 
    width: 100%; 
    padding: 15px; 
    background: #2563eb; 
    border: none; 
    color: #ffffff; 
    font-size: 15px; 
    font-weight: 700; 
    border-radius: 8px; 
    cursor: pointer; 
    margin-top: 15px; 
    transition: background 0.2s; 
    text-transform: uppercase; 
    letter-spacing: 0.5px; 
}
.action-submit-btn:hover { 
    background: #1d4ed8; 
}
.alert-box { 
    padding: 14px; 
    border-radius: 8px; 
    margin-bottom: 20px; 
    display: none; 
    text-align: center; 
    font-weight: 600; 
    font-size: 14px; 
    border: 1px solid transparent; 
}
.alert-error { background: #fee2e2; color: #991b1b; border-color: #fca5a5; }
.alert-success { background: #dcfce7; color: #166534; border-color: #86efac; }

/* Styling for disabled submit button */
.action-submit-btn:disabled {
    background-color: #94a3b8 !important;
    cursor: not-allowed !important;
    opacity: 0.8;
}

/* Container for the progress layout */
.progress-spinner-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 15px;
    font-size: 14px;
    color: #475569;
    font-weight: 500;
}

/* CSS Animated Spinner Circle */
.spinner {
    width: 20px;
    height: 20px;
    border: 3px solid #cbd5e1;
    border-top: 3px solid #2563eb;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ========================================================
   7. ADMINISTRATIVE REPORT PANEL SPECIFIC STYLES
   ======================================================== */
.report-frame { width: 96%; max-width: 1400px; margin: 30px auto; background: #ffffff; padding: 25px; border-radius: 12px; border: 1px solid #e2e8f0; box-shadow: 0 4px 10px rgba(0,0,0,0.02); }
.report-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 2px solid #f1f5f9; padding-bottom: 15px; margin-bottom: 20px; flex-wrap: wrap; gap: 15px; }
.report-header h2 { font-size: 18px; color: #0f172a; font-weight: 700; line-height: 1.4; }
.export-csv-btn { display: inline-flex; align-items: center; justify-content: center; background: #10b981; color: white; text-decoration: none; padding: 12px 18px; font-size: 13px; font-weight: 700; border-radius: 6px; transition: background 0.2s; }
.export-csv-btn:hover { background: #059669; }
.grid-scroll-box { width: 100%; overflow-x: auto; border: 1px solid #cbd5e1; border-radius: 8px; margin-bottom: 15px; background: #fff; -webkit-overflow-scrolling: touch; }
.data-grid { width: 100%; border-collapse: collapse; table-layout: fixed; min-width: 1300px; font-size: 14px; text-align: left; }
.data-grid th { background: #f8fafc; padding: 12px; border-bottom: 2px solid #cbd5e1; border-right: 1px solid #e2e8f0; font-weight: 700; color: #475569; text-transform: uppercase; font-size: 11px; letter-spacing: 0.5px; }
.data-grid td { padding: 12px; border-bottom: 1px solid #e2e8f0; border-right: 1px solid #e2e8f0; vertical-align: top; color: #334155; line-height: 1.5; word-wrap: break-word; overflow-wrap: break-word; }
.data-grid tr:hover { background-color: #f8fafc; }

/* Explicit Reporting Column Widths */
.data-grid th:nth-child(1), .data-grid td:nth-child(1) { width: 60px; text-align: center; }
.data-grid th:nth-child(2), .data-grid td:nth-child(2) { width: 220px; }
.data-grid th:nth-child(3), .data-grid td:nth-child(3) { width: 220px; }
.data-grid th:nth-child(4), .data-grid td:nth-child(4) { width: 340px; }
.data-grid th:nth-child(5), .data-grid td:nth-child(5) { width: 340px; }
.data-grid th:nth-child(6), .data-grid td:nth-child(6) { width: 260px; }
.data-grid th:nth-child(7), .data-grid td:nth-child(7) { width: 130px; }

.pagination-container { display: flex; justify-content: space-between; align-items: center; margin-top: 25px; padding-top: 15px; border-top: 1px solid #e2e8f0; flex-wrap: wrap; gap: 12px; }
.pagination-info { font-size: 13px; color: #64748b; font-weight: 500; }
.pagination-links { display: flex; gap: 6px; }
.pagination-btn { text-decoration: none; padding: 8px 14px; border: 1px solid #cbd5e1; border-radius: 6px; color: #334155; font-size: 13px; font-weight: 600; background: #fff; transition: all 0.2s; }
.pagination-btn:hover { background: #f1f5f9; border-color: #94a3b8; }
.pagination-btn.active-page { background: #2563eb; color: #fff; border-color: #2563eb; cursor: default; }
.pagination-btn.disabled-btn { color: #94a3b8; background: #f8fafc; border-color: #e2e8f0; cursor: not-allowed; pointer-events: none; }
.no-data { padding: 40px 20px; text-align: center; color: #64748b; font-weight: 500; font-style: italic; }
.badge { display: inline-block; padding: 2px 6px; background: #e2e8f0; border-radius: 4px; font-size: 11px; font-weight: 600; color: #475569; white-space: normal; word-break: break-word; }
.mini-sheet { width: 100%; border-collapse: collapse; margin-bottom: 10px; font-size: 12px; background: #f8fafc; border: 1px solid #e2e8f0; table-layout: auto; }
.mini-sheet th { background: #e2e8f0; padding: 4px 6px; font-size: 10px; color: #475569; border: 1px solid #cbd5e1; text-transform: none; }
.mini-sheet td { padding: 5px 6px; border: 1px solid #e2e8f0; font-size: 11px; line-height: 1.3; }

/* Fee Payment Layout Utilities */
.fee-header-container { display: flex; justify-content: space-between; align-items: center; }
.btn-qr-pay { background: #16a34a; color: #fff; border: none; border-radius: 6px; padding: 6px 14px; font-weight: 600; font-size: 13px; cursor: pointer; display: flex; align-items: center; gap: 6px; box-shadow: 0 1px 2px rgba(0,0,0,0.05); }
.input-locked-bold { background-color: #f1f5f9 !important; font-weight: 700; }
.input-placeholder-italic { background-color: #f8fafc; color: #94a3b8; font-style: italic; }
.fee-flex-row { display: flex; gap: 16px; }
.flex-col-1 { flex: 1; }
.flex-col-1-5 { flex: 1.5; }
.admin-status-dropdown { width: 100%; height: 42px; border: 1.5px solid #cbd5e1; border-radius: 6px; padding: 0 10px; font-weight: 600; background-color: #fff; color: #1e293b; box-sizing: border-box; }

/* Status Badges */
.status-badge-base { font-weight: 700; height: 42px; border-radius: 6px; display: flex; align-items: center; padding: 0 12px; border: 1.5px solid #cbd5e1; box-sizing: border-box; font-size: 13px; white-space: nowrap; }
.status-badge-pending { background-color: #fef3c7; color: #b45309; }
.status-badge-success { background-color: #dcfce7; color: #15803d; }
.status-badge-failed { background-color: #fee2e2; color: #b91c1c; }

/* Modal Architecture */
.modal-overlay { display: none; position: fixed; z-index: 9999; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(15, 23, 42, 0.65); backdrop-filter: blur(4px); align-items: center; justify-content: center; }
.modal-card { background-color: #fff; margin: auto; padding: 24px; border-radius: 12px; width: 100%; max-width: 400px; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1); text-align: center; box-sizing: border-box; position: relative; animation: modalFadeIn 0.25s ease-out; }
.modal-close-btn { color: #94a3b8; position: absolute; right: 16px; top: 12px; font-size: 28px; font-weight: bold; cursor: pointer; line-height: 1; }
.modal-close-btn:hover { color: #475569; }
.modal-title { margin: 0 0 4px 0; color: #1e293b; font-size: 18px; font-weight: 700; }
.modal-subtitle { margin: 0 0 20px 0; color: #64748b; font-size: 13px; }
.modal-qr-container { background: #f8fafc; border: 1.5px dashed #cbd5e1; border-radius: 8px; padding: 16px; display: inline-block; margin-bottom: 16px; }
.modal-qr-img { width: 200px; height: 200px; display: block; margin: 0 auto; object-fit: contain; }

/* Modal Inner Boxes & Actions */
.modal-amount-box { background: #eff6ff; border: 1.5px solid #bfdbfe; border-radius: 6px; padding: 10px; margin-bottom: 20px; }
.amount-box-title { font-size: 11px; text-transform: uppercase; color: #1e40af; font-weight: 700; }
.amount-box-value { font-size: 22px; font-weight: 800; color: #1d4ed8; margin-top: 2px; }
.modal-instructions { text-align: left; background: #f8fafc; padding: 12px; border-radius: 6px; font-size: 12px; color: #475569; margin-bottom: 20px; border-left: 4px solid #2563eb; }
.modal-instructions ol { margin: 0; padding-left: 16px; line-height: 1.5; }
.modal-actions { display: flex; gap: 10px; }
.btn-modal-print { flex: 1; height: 38px; background: #f1f5f9; color: #334155; border: 1.5px solid #cbd5e1; border-radius: 6px; font-weight: 600; font-size: 13px; cursor: pointer; }
.btn-modal-confirm { flex: 1; height: 38px; background: #2563eb; color: #fff; border: none; border-radius: 6px; font-weight: 600; font-size: 13px; cursor: pointer; }

/* Container Box (Dashed Framework) */
.modal-qr-container { 
    background: #f8fafc; 
    border: 1.5px dashed #cbd5e1; 
    border-radius: 8px; 
    padding: 12px; 
    display: inline-block; 
    margin-bottom: 16px;
    width: 250px; /* Locked width to perfectly frame your wide/tall banner images */
    box-sizing: border-box;
}

/* Active Uploaded Image Banner Auto-Sizing */
.modal-qr-img { 
    width: 100%; /* Forces the image to take up the full available width */
    height: auto; /* Scales the vertical height proportionally without stretching or squishing */
    display: block; 
    margin: 0 auto; 
    border-radius: 4px;
}

/* Modern QR Code Placeholder Design (When no image exists) */
.qr-placeholder-box {
    width: 100%; /* Adapts dynamically to the master 250px container width */
    min-height: 250px; /* Maintains a balanced vertical footprint */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #f8fafc;
    box-sizing: border-box;
    padding: 16px;
}
.qr-placeholder-icon {
    width: 54px;
    height: 54px;
    color: #94a3b8;
    margin-bottom: 12px;
}
.qr-placeholder-title {
    font-size: 13px;
    font-weight: 700;
    color: #475569;
    margin-bottom: 6px;
    line-height: 1.3;
}
.qr-placeholder-desc {
    font-size: 11px;
    color: #64748b;
    line-height: 1.4;
    padding: 0 4px;
}

@keyframes modalFadeIn {
    from { transform: scale(0.95); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

/* Unified Horizontal Button Row Framework */
.button-row-container {
    display: flex !important;
    gap: 16px !important; /* Clean visual space separation between buttons */
    margin-top: 24px !important;
    padding: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Primary Submit Action (Takes up ~70% of the row width) */
.btn-submit-profile-inline {
    flex: 3.5 !important; 
    background: #2563eb;
    color: white;
    border: none;
    height: 42px; /* Standardized uniform crisp height profile */
    font-weight: 700;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    box-shadow: 0 1px 2px rgba(37, 99, 235, 0.2);
    transition: all 0.2s ease;
}

.btn-submit-profile-inline:hover {
    background: #1d4ed8;
}

/* Secondary Print Action (Takes up the remaining row width) */
.btn-print-form-inline {
    flex: 1.5 !important; 
    min-width: 250px; /* Guarantees the button label text never wraps into an awkward second line */
    height: 42px; /* Matches the submit button height perfectly */
    background: #0f172a; /* Rich dark obsidian theme */
    color: #fff;
    border: none;
    border-radius: 6px;
    font-weight: 600;
    font-size: 12.5px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center; /* Centers icon and text together */
    gap: 8px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    transition: all 0.2s ease;
}

.btn-print-form-inline:hover {
    background: #1e293b;
}

/* Fallback: Handles alignment beautifully if Submit button disappears in view-only mode */
.btn-print-form-inline.view-mode-alone {
    margin-left: auto !important; /* Keeps the button neatly right-aligned if it's the only one left */
    flex: none !important;
    width: 280px;
}

.form-pledge{
    margin: 20px 0; padding: 15px; background: #eff6ff; border-left: 4px solid #2563eb; border-radius: 4px;
}
.form-pledge p{
    font-size: 14px; color: #1e3a8a; font-weight: 500; line-height: 1.5;
}

.form-search-bar{
    background: #f8fafc; border: 1.5px solid #e2e8f0; border-radius: 8px; padding: 16px; margin-bottom: 24px;
}
.form-search-bar h4{
    margin: 0 0 10px 0; color: #1e293b; font-size: 14px; font-weight: 700; text-transform: uppercase;
}
.form-search-box{
    width: 100%; height: 40px; padding: 0 12px; border: 1.5px solid #cbd5e1; border-radius: 6px; box-sizing: border-box; font-size: 14px;
}
.form-search-btn{
    height: 40px; padding: 0 20px; background: #2563eb; color: #fff; border: none; border-radius: 6px; font-weight: 600; cursor: pointer; font-size: 14px; white-space: nowrap;
}
.form-clear-btn{
    text-decoration: none; color: #64748b; font-size: 14px; padding-left: 5px; white-space: nowrap;
}
.print-dummy-form-btn{
    height: 40px; padding: 0 20px; background: #ea580c; color: #fff; border: none; border-radius: 6px; font-weight: 600; cursor: pointer; font-size: 14px; white-space: nowrap;
}

/* ========================================================
   BASE SYSTEM DESKTOP STYLES (PHOTO & SIGN-OFF)
   ======================================================== */
.upload-signoff-row {
    align-items: flex-end !important;
}

.upload-controls-group {
    flex-direction: column !important;
    gap: 18px !important;
}

.upload-field-item {
    width: 100%;
}

.upload-tip-text {
    color: #64748b;
    font-size: 12px;
    display: block;
    margin-top: 5px;
}

.official-hub-group {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    margin-left: auto !important;
}

.hub-visuals-row {
    display: flex !important;
    gap: 15px !important;
    align-items: flex-end !important;
    justify-content: flex-end !important;
    margin-bottom: 12px !important;
    width: 100% !important;
}

.dated-input-container {
    flex: 1 !important;
    max-width: 160px !important;
}

.preview-box-frame {
    border: 1.5px solid #cbd5e1;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8fafc;
    overflow: hidden;
    box-sizing: border-box;
}

.frame-photo-size {
    width: 110px;
    height: 140px;
}

.frame-signature-size {
    width: 140px;
    height: 60px;
}

.preview-image-element {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.preview-box-placeholder {
    font-size: 11px;
    color: #94a3b8;
    text-align: center;
    font-weight: 600;
}

.signature-caption-container {
    width: 265px;
    text-align: center;
}

.signature-line-text {
    font-size: 13px;
    font-weight: 700;
    color: #64748b;
    border-top: 1.5px dashed #cbd5e1;
    padding-top: 6px;
    display: block;
    width: 100%;
}

/* Isolated Internal Datatable Scroll Engine */
.admin-table-scroll {
    display: block !important;
    width: 100% !important;
    max-width: 380px !important; /* Hard locks column footprint box sizes from expanding outer grid */
    overflow-x: auto !important;  /* Confines swipe-scrolling inside these sub-table borders only */
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    background: #ffffff;
    margin-bottom: 6px;
    box-sizing: border-box;
}

/* Ensure child sheet grids retain readable tracking space inside scroll frames */
.admin-table-scroll table.mini-sheet {
    width: 100% !important;
    min-width: 480px !important; /* Guarantees small sub-cells never compress into overlapping text lines */
    border-collapse: collapse !important;
}

/* Premium Admin Form Edit Action Button */
.admin-edit-action-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    background: #2563eb; /* Premium brand blue button palette matching form submit controls */
    color: #ffffff !important;
    text-decoration: none !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    padding: 6px !important;
    border-radius: 4px;
    box-shadow: 0 1px 2px rgba(37, 99, 235, 0.15);
    transition: all 0.2s ease;
    margin-top: 4px;
    width: 80%;
    box-sizing: border-box;
}

.admin-edit-action-btn:hover {
    background: #1d4ed8; /* Darker navy focus hover highlight variable mapping */
    box-shadow: 0 3px 6px rgba(37, 99, 235, 0.2);
    transform: translateY(-0.5px);
}

/* ========================================================
   ADDITIONAL STYLES FOR INSTITUTIONAL BRANDING LAYER
   ======================================================== */
/* Ensure the watermark remains layered underneath form fields */
.branding-canvas-wrapper {
    position: relative !important;
}

/* Forces all input fields, text elements, and cards to layer on top of the watermark layout */
.branding-canvas-wrapper > *:not(div[style*="background-image"]) {
    position: relative !important;
    z-index: 2 !important;
}

/* ======================================================== 
   8. SMARTPHONE ADVANCED MEDIA QUERIES (UPDATED)
======================================================== */ 
@media screen and (max-width: 768px) {
  /* Use Flexbox for better alignment and wrapping */
  .app-bar, .nav-header {
    padding: 12px 16px;
    display: flex;
    flex-direction: column; /* Stacks title and links vertically */
    align-items: center;
    gap: 10px;
  }

  .app-bar h1, .nav-header h1 {
    width: 100%;
    text-align: center;
    font-size: 16px; /* Slightly increased for readability */
    margin: 0;
    white-space: normal;
  }

  .nav-links {
    width: 100%;
    display: flex;
    flex-wrap: wrap; /* Allows buttons to wrap to new lines */
    justify-content: center;
    gap: 8px;
  }

  /* Cleaner button styling than fixed percentages */
  .nav-links a {
    flex: 1 1 45%; /* Grid-like feel, two per row */
    text-align: center;
    font-size: 12px;
    padding: 10px 4px;
    box-sizing: border-box;
  }

  .form-canvas, .report-frame {
    width: 100%;
    margin: 0;
    padding: 20px 15px;
    border-radius: 0;
    border: none;
  }

  .form-group {
    flex: 0 0 100%; /* Removes reliance on !important */
    margin-bottom: 15px;
  }

  .college-title {
    font-size: 18px;
    text-align: center;
  }

  .report-header h2 {
    font-size: 16px;
    text-align: center;
    width: 100%;
  }

  .export-csv-btn {
    width: 100%;
    padding: 12px; /* Easier to tap on mobile */
  }

  /* ======================================================== 
     MOBILE STRUCTURAL OVERLAY CONTAINER LOCKS
  ======================================================== */ 
  form, 
  .form-canvas, 
  .form-container, 
  main, 
  .wrapper {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 16px 12px !important;
    border-radius: 0 !important;
    border: none !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important; /* Hard clips horizontal leaks at the device viewport bounds */
  }

  /* ======================================================== 
     MOBILE HORIZONTAL ISOLATED SCROLL ENGINE (WIDE FIX)
  ======================================================== */ 
  .table-responsive,
  div:has(> .matrix-table),
  div:has(> .edu-table),
  div:has(> .exp-table) {
      display: block !important;
      width: 100% !important;
      max-width: 100% !important;
      overflow-x: auto !important; /* Contains horizontal scroll inside this box layer */
      -webkit-overflow-scrolling: touch !important; /* Smooth inertia touch swipe on iOS */
      margin-bottom: 20px !important;
      box-sizing: border-box !important;
  }

  /* Force tables to expand naturally inside the horizontal scroll frame */
  .matrix-table, .edu-table, .exp-table, table {
      width: auto !important; /* Changed from 100% to allow natural wide expansion */
      min-width: 840px !important; /* HARD CONSTRAINT: Gives all 9 columns plenty of space to breathe */
      table-layout: auto !important; /* CORRECTION: Allows headers to size naturally instead of smashing down */
      border-collapse: collapse !important;
      box-sizing: border-box !important;
  }

  /* Set clean, proportional spacing for the wide educational matrix columns */
  .matrix-table th, .matrix-table td {
      min-width: 75px !important;
  }
  .matrix-table th:nth-child(1), .matrix-table td:nth-child(1) { min-width: 130px !important; } /* Exam name */
  .matrix-table th:nth-child(2), .matrix-table td:nth-child(2) { min-width: 140px !important; } /* Board */
  .matrix-table th:nth-child(8), .matrix-table td:nth-child(8) { min-width: 160px !important; } /* Subjects */

  /* Set clean, proportional spacing for the experience matrix columns */
  .exp-table th, .exp-table td {
      min-width: 100px !important;
  }
  .exp-table th:nth-child(2), .exp-table td:nth-child(2) { min-width: 200px !important; } /* Institution */

  /* Text Wrapping Support for Table Headers */
  table th {
      background: #f8fafc !important;
      color: #1e293b !important;
      font-size: 8.5pt !important;
      font-weight: 700 !important;
      padding: 8px 6px !important;
      text-transform: uppercase !important;
      text-align: center !important;
      white-space: normal !important; /* Allows multi-line text mapping (e.g., UNIVERSITY / BOARD) */
      word-wrap: break-word !important;
      line-height: 1.3 !important;
      border: 1px solid #cbd5e1 !important;
  }

  table td {
      padding: 6px 4px !important;
      border: 1px solid #cbd5e1 !important;
      display: table-cell !important;
      vertical-align: middle !important; /* Keeps typed inputs vertically centered */
      box-sizing: border-box !important;
  }

  /* Standardizes input text fields inside table cells */
  table td input {
      display: block !important;
      box-sizing: border-box !important;
      width: 100% !important;
      max-width: 100% !important;
      height: 34px !important; /* Large, mobile-friendly tap targets */
      padding: 0 6px !important;
      font-size: 12px !important;
      margin: 0 !important;
      line-height: 34px !important; 
  }

  /* INTEGRATED YOUR PRO-TIP DATE WIDTH LOCK CORRECTION BELOW */
  table td input[type="date"],
  table td input[placeholder*="Mar"] {
      display: inline-flex !important;
      align-items: center !important;
      width: 90% !important; /* Your proven solution that prevents clipping native mobile arrows */
  }

  /* ======================================================== 
     MOBILE VIEW STACK ENGINE FOR FOOTER BUTTONS & SIGN-OFF
  ======================================================== */ 
  .upload-signoff-row {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 20px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .upload-controls-group {
    width: 100% !important;
    display: flex !important;
    box-sizing: border-box !important;
  }

  .official-hub-group {
    width: 100% !important;
    align-items: center !important;
    margin-left: 0 !important;
    box-sizing: border-box !important;
  }

  .hub-visuals-row {
    display: flex !important;
    flex-direction: column !important; /* Stacks items vertically on small phone screens */
    align-items: center !important;
    justify-content: center !important;
    gap: 16px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* FIXES MOBILE OVERFLOW BY ENFORCING STANDARD WIDTH AND BOX SIZING */
  .dated-input-container.mobile-date-wrapper {
    width: 100% !important; 
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .dated-input-container.mobile-date-wrapper input {
    box-sizing: border-box !important;
    /* HARD FIX: Slightly drops overall calculated footprint width to pull the right edge in line */
    width: 98.5% !important; 
    max-width: 98.5% !important;
    margin: 0 auto !important; /* Centers it perfectly within the outer form boundaries */
    padding: 0 12px !important;
  }

  /* Restores your perfect rectangular aspect ratios on mobile views */
  .preview-box-frame.frame-photo-size {
    width: 110px !important;
    height: 140px !important;
    flex: none !important;
  }

  .preview-box-frame.frame-signature-size {
    width: 140px !important;
    height: 60px !important;
    flex: none !important;
  }

  .signature-caption-container {
    width: 100% !important;
    max-width: 280px !important;
    margin-top: 12px !important;
    text-align: center !important;
  }
}

/* ========================================================
   PUBLIC FEEDBACK FORMS (COLLEGE_ID == 2)
   ======================================================== */
.feedback-public-body {
  background-color: #f1f5f9;
}

.feedback-form-canvas {
  max-width: 1100px;
}

.feedback-brand-row {
  display: flex !important;
  align-items: center !important;
  gap: 18px !important;
  margin-bottom: 24px !important;
  justify-content: flex-start !important;
}

.feedback-logo {
  max-height: 72px !important;
  width: auto !important;
}

.feedback-college-title {
  text-align: left !important;
  font-size: 20px !important;
  margin-bottom: 4px !important;
}

.feedback-form-title {
  color: #16a34a;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
}

.feedback-required {
  color: #dc2626;
}

.feedback-fields-row .form-group {
  flex: 1 1 30%;
  min-width: 220px;
}

.feedback-select {
  width: 100%;
  height: 42px;
  padding: 10px 14px;
  border: 1.5px solid #cbd5e1;
  border-radius: 6px;
  font-size: 15px;
  color: #1e293b;
  background: #fff;
}

.feedback-questions-wrap {
  margin-top: 10px;
}

.feedback-question-block {
  margin-bottom: 22px;
  padding-bottom: 14px;
  border-bottom: 1px solid #e2e8f0;
}

.feedback-question-text {
  font-size: 14px;
  font-weight: 600;
  color: #1e293b;
  margin-bottom: 10px;
  line-height: 1.45;
}

.feedback-option-header-row,
.feedback-option-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(90px, 1fr));
  gap: 8px;
  align-items: center;
}

.feedback-option-header {
  font-size: 12px;
  font-weight: 700;
  color: #475569;
  text-align: center;
}

.feedback-radio-cell {
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.feedback-radio-cell input[type="radio"] {
  width: 18px;
  height: 18px;
  accent-color: #2563eb;
  cursor: pointer;
}

.feedback-radio-label-mobile {
  display: none;
}

.feedback-submit-row {
  margin-top: 28px;
}

.feedback-submit-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 28px;
  background: #2563eb;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: background 0.2s ease;
}

.feedback-submit-btn:hover {
  background: #1d4ed8;
}

.feedback-submit-btn:disabled {
  background: #94a3b8;
  cursor: not-allowed;
}

.feedback-submit-icon {
  font-size: 16px;
  line-height: 1;
}

@media screen and (max-width: 900px) {
  .feedback-option-header-row,
  .feedback-option-row {
    grid-template-columns: repeat(3, minmax(80px, 1fr));
  }

  .feedback-brand-row {
    flex-direction: column;
    align-items: flex-start !important;
  }
}

@media screen and (max-width: 600px) {
  .feedback-option-header-row {
    display: none;
  }

  .feedback-option-row {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .feedback-radio-cell {
    justify-content: flex-start;
    gap: 8px;
  }

  .feedback-radio-label-mobile {
    display: inline;
    font-size: 13px;
    color: #334155;
  }
}

/* ========================================================
   FEEDBACK FORMS ADMIN REPORT
   ======================================================== */
.feedback-report-frame {
  max-width: 1400px;
}

.feedback-report-filter-box {
  background: #f8fafc;
  border: 1.5px solid #e2e8f0;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 20px;
}

.feedback-report-filter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}

.feedback-report-filter-item label {
  display: block;
  margin-bottom: 6px;
  color: #475569;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.feedback-report-filter-item input,
.feedback-report-filter-item select {
  width: 100%;
  height: 42px;
  padding: 10px 14px;
  border: 1.5px solid #cbd5e1;
  border-radius: 6px;
  font-size: 14px;
  box-sizing: border-box;
}

.feedback-report-filter-actions {
  display: flex;
  gap: 12px;
  margin-top: 16px;
  align-items: center;
}

.feedback-report-search-btn {
  padding: 10px 20px;
  background: #2563eb;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.feedback-report-search-btn:hover {
  background: #1d4ed8;
}

.feedback-report-clear-btn {
  color: #64748b;
  font-size: 14px;
  text-decoration: none;
}

.feedback-report-summary {
  margin-bottom: 14px;
  font-size: 14px;
  color: #334155;
}

.feedback-report-frame .grid-scroll-box {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.feedback-report-grid {
  width: max-content;
  min-width: 100%;
  border-collapse: collapse;
  table-layout: auto;
  font-size: 13px;
  text-align: left;
}

.feedback-report-grid th,
.feedback-report-grid td {
  border-bottom: 1px solid #e2e8f0;
  border-right: 1px solid #e2e8f0;
  vertical-align: top;
  color: #334155;
  line-height: 1.4;
}

.feedback-report-grid th {
  background: #f8fafc;
  padding: 10px 8px;
  border-bottom: 2px solid #cbd5e1;
  font-weight: 700;
  color: #475569;
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.3px;
}

.feedback-report-grid td {
  padding: 10px 8px;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.feedback-report-grid tr:hover td {
  background-color: #f8fafc;
}

.feedback-report-grid .feedback-sr-col {
  width: 48px;
  min-width: 48px;
  max-width: 48px;
  text-align: center;
  white-space: nowrap;
}

.feedback-report-grid .feedback-id-col {
  min-width: 120px;
  max-width: 220px;
}

.feedback-report-grid .feedback-q-col {
  min-width: 100px;
  max-width: 130px;
  text-align: center;
  white-space: normal;
  font-size: 12px;
}

.feedback-report-grid .feedback-date-col {
  min-width: 150px;
  width: 150px;
  white-space: nowrap;
}

.filter-hidden {
  display: none !important;
}