/* ==========================================================
           GLOBAL STYLES (Base layout, typography)
           ========================================================== */
        body {
            background: var(--bs-light, #f5f7fb);
            font-family: var(--bs-body-font-family, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif);
        }
        /* Ensure dark theme background isn't overridden on this page */
        .dark-mode body { background: var(--bs-light); }
    /* Prevent layout width shift when modal toggles scrollbar */
    html { scrollbar-gutter: stable; }
    body.modal-open { padding-right:0 !important; }

        h2.page-title {
            font-weight: 600;
            letter-spacing: .5px;
        }


        label.form-label {
            font-size: .72rem;
            text-transform: uppercase;
            letter-spacing: .6px;
            font-weight: 600;
            color: #475569;
            margin-bottom: 4px;
        }

    /* Dark mode: make field labels brighter for readability */
    .dark-mode label.form-label { color: #e9edf6; }
    .dark-mode label.form-label.required:after { color: #f38b8b; }

        label.form-label.required:after {
            content: '*';
            color: #dc3545;
            margin-left: 3px;
        }

        .form-control,
        .form-select {
            border-radius: 8px;
            font-size: .88rem;
        }

        .form-control:focus,
        .form-select:focus {
            box-shadow: 0 0 0 .15rem rgba(var(--bs-primary-rgb, 13, 110, 253), .25);
        }

    /* ================= IMAGE PREVIEW BOX (generic square style) ================= */

    /* ================= PORTRAIT PHOTO FRAMES =================
       1.2in x 1.6in fixed ratio frames for Student / Father / Mother / Guardian
       The label is shown as a floating pill above the frame center. */

        @media (max-width: 600px) {
        }


    /* Removed legacy unprefixed document thumbnail styles (doc-thumb, remove-doc, etc.) */

    /* ================= DOCUMENT UPLOAD GRID =================
       Each doc-item has two parts: left meta/field, right preview box.
       The preview box can show image or styled PDF badge. */

    /* Legacy .doc-box responsive rule removed; using .stu-doc-box */


        @media (max-width: 700px) {
            /* Removed legacy .doc-section-grid & .doc-item mobile overrides (using .stu-doc-section-grid/.stu-doc-item) */
        }


        .btn-lg {
            border-radius: 10px;
            padding: .9rem 2.2rem;
            font-weight: 600;
            letter-spacing: .5px;
        }



        @media (max-width: 768px) {

            /* old .preview-box responsive rule removed (using .stu-preview-box now) */
        }

        /* ==========================================================
           NEW RESPONSIVE RULES (stu- document section)
           Restored after legacy class cleanup for proper mobile view
           ========================================================== */
        @media (max-width: 991.98px) { /* Tablets */
            .stu-doc-section-grid { grid-template-columns:repeat(auto-fit,minmax(360px,1fr)); gap:32px 42px; }
            .stu-doc-box { width:130px; height:150px; }
        }
        @media (max-width: 767.98px) { /* Mobiles */
            .stu-doc-section-grid { grid-template-columns:1fr; gap:26px; }
            .stu-doc-item { display:flex; flex-direction:row; align-items:flex-start; gap:14px; }
            .stu-doc-fields { flex:1 1 auto; min-width:0; }
            .stu-doc-fields .form-control { width:100%; }
            /* Preview box fixed size and aligned top-right */
            .stu-doc-box { width:120px; height:140px; flex:0 0 120px; margin-top:4px; }
            .stu-doc-box .stu-preview-placeholder { font-size:.58rem; }
        }
        @media (max-width:575.98px) { /* Extra small phones */
            .stu-doc-item { flex-direction:column; }
            .stu-doc-box { width:140px; height:150px; }
        }

    /* ================= MULTI-STEP WIZARD ================= */

        @keyframes fade {
            from {
                opacity: 0;
                transform: translateY(6px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }



    /* ================= FILE PREVIEW MODAL (Bootstrap override) ================= */
        .modal-fit .modal-dialog {
            max-width: none;
            width: auto;
            margin: .75rem auto;
        }

        .modal-fit .modal-content {
            background: #ffffff;
            border: 1px solid #111111;
        }

        .modal-fit .modal-body {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 1rem;
        }

        .modal-fit #modalImagePreview {
            box-shadow: 0 4px 18px -2px rgba(160, 160, 160, 0.55);
            border-radius: 8px;
        }

    /* ================= RESPONSIVE ENHANCEMENTS =================
       Breakpoints refine spacing & layout for desktop / tablet / mobile */
    /* Removed legacy .form-section (using .stu-form-section) */

        @media (min-width:1200px) {
            /* Removed legacy desktop .doc-section-grid rule */
        }

        @media (max-width:1199px) and (min-width:992px) {
            /* Removed legacy doc-section-grid at 1199-992px */
        }

        @media (max-width:991px) and (min-width:768px) {

            /* Tablets Portrait */
            /* Removed legacy tablet .form-section padding (stu-form-section already styled) */

            /* Removed legacy doc-section-grid + photo-box (using stu- prefixed) */
        }

        @media (max-width:767px) {

            /* Mobiles */
            h2.page-title {
                font-size: 1.25rem;
            }

            /* Mobile adjustments for wizard (prefixed) */
            .stu-wizard-nav {
                flex-wrap: nowrap;
                overflow-x: auto;
                padding-bottom: 4px;
                scrollbar-width: thin;
            }
            .stu-wizard-pill {
                flex: 1 0 auto;
                font-size: .7rem;
                padding: 7px 12px;
            }

            /* Removed legacy mobile .form-section spacing and h4 size */

            .row.g-3>[class*='col-'] {
                flex: 0 0 100%;
                max-width: 100%;
            }

            .stu-photo-box {
                width: 100px;
                height: 140px;
            }
            .stu-photo-box .stu-frame-label {
                font-size: .5rem;
                padding: 3px 8px;
            }

            /* Removed legacy doc-section-grid, doc-item, doc-fields, doc-box mobile styles */

            /* Removed legacy .doc-meta (using .stu-doc-meta) */

            .btn-lg {
                padding: .75rem 1.4rem;
                font-size: .85rem;
            }
        }

        @media (max-width:420px) {
            .photo-box {
                width: 90px;
                height: 125px;
            }

            .stu-wizard-actions .btn { min-width: 100px; }
            .stu-wizard-pill .stu-num { display: none; }
        }

        @media (min-resolution:2dppx) {
            .preview-placeholder {
                -webkit-font-smoothing: antialiased;
            }
        }
                  /* ================= Prefixed Class Aliases (stu-) =================
                      These duplicate core styles with 'stu-' prefix so markup can migrate
                      safely. Once all templates use only 'stu-' classes, the original
                      rules can be deprecated. */
                  h2.stu-page-title { font-weight:600; letter-spacing:.5px; }
                  .stu-form-section { background:#fff; padding:20px 22px 18px; margin-bottom:22px; border-radius:14px; border:1px solid #e4e9f1; position:relative; }
                  .stu-form-section h4 { font-size:1.05rem; font-weight:600; color:var(--bs-primary, #1d4e89); margin:0 0 14px; padding-bottom:8px; border-bottom:1px solid #e3e8ef; display:flex; align-items:center; gap:.55rem; }
                  .stu-form-section h4 .stu-sec-num { background:var(--bs-primary,#0d6efd); color:#fff; width:26px; height:26px; display:inline-flex; align-items:center; justify-content:center; font-size:.75rem; border-radius:8px; font-weight:700; box-shadow:0 2px 4px rgba(var(--bs-primary-rgb,13,110,253),.35); }
                  /* Dark mode for section cards + title */
                  .dark-mode .stu-form-section { background:#161d28; border-color:#2a3649; }
                  .dark-mode .stu-form-section h4 { color: var(--bs-heading-color); border-bottom-color:#2a3649; }
                  .dark-mode .stu-form-section h4 .stu-sec-num { background: var(--bs-primary); color:#fff; }
                  .stu-preview-box { width:90px; height:90px; border:1px dashed #b9c4d2; border-radius:10px; background:linear-gradient(135deg,#f2f6fa,#ffffff); display:flex; align-items:center; justify-content:center; overflow:hidden; position:relative; cursor:pointer; transition: border-color .2s, background .2s; }
                  .stu-preview-box.small { width:70px; height:70px; }
                  .stu-preview-box.full { width:100%; height:180px; max-width:100%; }
                  .stu-photo-box { width:1.2in; height:1.6in; max-width:100%; background:linear-gradient(135deg,#f2f6fa,#ffffff); }
                  .stu-photo-box .stu-frame-label { position:absolute; top:0; left:50%; transform:translate(-50%, -55%); background:var(--bs-primary, #1d4e89); color:#fff; font-size:.55rem; padding:3px 10px 4px; font-weight:600; letter-spacing:.5px; border-radius:8px; line-height:1; box-shadow:0 2px 4px rgba(0,0,0,.25); pointer-events:none; }
                  .stu-photo-box.has-image .stu-frame-label { opacity:.95; }
                  .stu-preview-box:hover { border-color:var(--bs-primary, #1d4e89); background:rgba(var(--bs-primary-rgb, 13, 110, 253), .06); }
                  .stu-preview-box img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; background:#fff; z-index:1; }
                  .stu-preview-box .stu-preview-placeholder { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; z-index:0; transition:opacity .25s; }
                  .stu-preview-box.has-image .stu-preview-placeholder { opacity:0; pointer-events:none; }
                  .stu-file-meta { font-size:.6rem; color:#64748b; margin-top:4px; word-break:break-word; }
                  .stu-remove-btn { position:absolute; top:3px; right:3px; background:rgba(0,0,0,.55); border:none; color:#fff; width:20px; height:20px; border-radius:6px; font-size:.65rem; line-height:1; display:none; z-index:4; }
                  .stu-preview-box.has-image .stu-remove-btn { display:inline-block; }
                  .stu-preview-box .stu-overlay-actions { position:absolute; inset:0; background:rgba(0,0,0,.45); opacity:0; display:flex; flex-direction:column; justify-content:flex-end; gap:4px; padding:6px; transition:opacity .2s; }
                  .stu-preview-box.has-image:hover .stu-overlay-actions, .stu-preview-box.has-image:focus-within .stu-overlay-actions { opacity:1; }
                  .stu-overlay-actions .stu-btn-act { background:rgba(255,255,255,.9); border:none; font-size:.55rem; padding:3px 6px; border-radius:6px; font-weight:600; color:var(--bs-primary, #1d4e89); display:inline-flex; align-items:center; gap:4px; cursor:pointer; }
                  .stu-overlay-actions .stu-btn-row { display:flex; gap:4px; flex-wrap:wrap; }
                  .stu-preview-rotating { transition: transform .25s ease; }
                  .stu-doc-section-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(420px,1fr)); gap:38px 110px; }
                  .stu-doc-item { display:flex; align-items:flex-start; justify-content:space-between; gap:30px; min-height:150px; position:relative; }
                  .stu-doc-fields { flex:1; min-width:260px; }
                  .stu-doc-box { width:120px; height:140px; border:1px dashed #b9c4d2; border-radius:10px; background:linear-gradient(135deg,#f2f6fa,#ffffff); position:relative; display:flex; align-items:center; justify-content:center; cursor:pointer; overflow:hidden; transition:border-color .2s, background .2s; }
                  .stu-doc-box:hover { border-color:#1d4e89; background:#f0f6ff; }
                  /* Dark mode for preview/doc boxes */
                  .dark-mode .stu-preview-box { border-color:#364559; background:linear-gradient(135deg,#141a22,#1a2230); }
                  .dark-mode .stu-preview-box:hover { border-color:#3b82f6; background:#1a2230; }
                  .dark-mode .stu-photo-box { background:linear-gradient(135deg,#141a22,#1a2230); }
                  .dark-mode .stu-photo-box .stu-frame-label { background:#1d4e89; }
                  .dark-mode .stu-doc-box { border-color:#364559; background:linear-gradient(135deg,#141a22,#1a2230); }
                  .dark-mode .stu-doc-box:hover { border-color:#3b82f6; background:#1a2230; }
                  .stu-doc-box img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; background:#fff; }
                  .stu-doc-box .stu-preview-placeholder { font-size:.62rem; text-align:center; color:#64748b; line-height:1.05; padding:4px; }
                  .stu-doc-box.has-file .stu-preview-placeholder { opacity:0; pointer-events:none; }
                  .stu-doc-box .stu-remove-btn { position:absolute; top:4px; right:4px; background:rgba(0,0,0,.55); color:#fff; border:none; width:22px; height:22px; border-radius:6px; font-size:.8rem; line-height:1; display:none; z-index:3; }
                  .stu-doc-box.has-file .stu-remove-btn { display:inline-block; }
                  .stu-doc-box .pdf-indicator { position:absolute; bottom:4px; right:4px; background:#b91c1c; color:#fff; font-size:.55rem; padding:3px 6px; border-radius:6px; font-weight:600; letter-spacing:.5px; display:none; z-index:2; }
                  .stu-doc-box.pdf .pdf-indicator { display:inline-block; }
                  .stu-doc-box.pdf { background:linear-gradient(135deg,#fff5f5,#ffe2e2); border-color:#f87171; }
                  .stu-doc-box.pdf::before { content:'PDF'; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:1.9rem; color:rgba(185,28,28,0.18); letter-spacing:2px; pointer-events:none; }
                  .stu-doc-meta { font-size:.6rem; color:#475569; margin-top:4px; }
                  .stu-submit-wrap { text-align:center; margin-top:28px; }
                  .stu-note { font-size:.65rem; color:#64748b; margin-top:2px; }
                  .stu-gap-compact .col-md-3, .stu-gap-compact .col-md-4, .stu-gap-compact .col-md-2 { margin-bottom:10px; }
                  .stu-step { display:none; }
                  .stu-step.active { display:block; animation:fade .35s ease; }
                  .stu-wizard-nav { display:flex; justify-content:center; gap:14px; margin-bottom:22px; flex-wrap:wrap; }
                  /* Wizard pills themed with primary color */
                  .stu-wizard-pill { background:rgba(var(--bs-primary-rgb,13,110,253),0.12); color:var(--bs-primary,#0d6efd); padding:8px 18px; border-radius:30px; font-size:.75rem; font-weight:600; letter-spacing:.5px; display:flex; align-items:center; gap:6px; transition:.25s background,.25s color; }
                  .stu-wizard-pill:hover { background:rgba(var(--bs-primary-rgb,13,110,253),0.18); color:var(--bs-primary,#0d6efd); }
                  .stu-wizard-pill.active { background:var(--bs-primary,#0d6efd); color:#fff; box-shadow:0 3px 6px -2px rgba(0,0,0,.25); }
                  .stu-wizard-pill .stu-num { background:rgba(var(--bs-primary-rgb,13,110,253),0.25); width:20px; height:20px; display:inline-flex; align-items:center; justify-content:center; font-size:.65rem; border-radius:50%; font-weight:700; color:inherit; }
                  .stu-wizard-pill.active .stu-num { background:rgba(0,0,0,.25); color:#fff; }
                  .stu-wizard-actions { text-align:center; margin-top:10px; display:flex; justify-content:space-between; gap:12px; }
                  .stu-wizard-actions .btn { min-width:140px; }
                  .stu-modal-fit .modal-dialog { max-width:none; width:auto; margin:.75rem auto; }
                  .stu-modal-fit .modal-content { background:#ffffff; border:1px solid #111111; }
                  .stu-modal-fit .modal-body { display:flex; align-items:center; justify-content:center; padding:1rem; }
                  .stu-modal-fit #modalImagePreview { box-shadow:0 4px 18px -2px rgba(160, 160, 160, 0.55); border-radius:8px; }