:root {
    --gold:#d4a843; --dark:#1a2332; --teal:#1e7a8a;
    --teal-light:#27a0b4; --green:#2d8a5e; --red:#c94b4b;
    --text:#2e3a4a; --muted:#6a7a8a; --white:#fff; --border:#e5e9ef;
  }
  body{background:#f4f6f9;color:var(--text)}
  .student-page{padding:110px 0 70px;min-height:calc(100vh - 200px)}
  .student-header{margin-bottom:26px}
  .student-eyebrow{color:var(--gold);font-size:11px;font-weight:800;letter-spacing:3px;text-transform:uppercase;margin-bottom:8px}
  .student-header h1{margin:0 0 8px;font-size:clamp(30px,4vw,46px);font-weight:800;color:var(--dark)}
  .student-header p{color:var(--muted);margin:0}
  .student-toolbar{display:flex;justify-content:space-between;gap:15px;align-items:center;flex-wrap:wrap;margin-bottom:18px}
  .student-search{flex:1 1 320px;position:relative}
  .student-search input{width:100%;border:1px solid var(--border);border-radius:10px;background:#fff;padding:12px 15px 12px 42px;outline:none}
  .student-search input:focus{border-color:var(--teal-light);box-shadow:0 0 0 3px rgba(39,160,180,.1)}
  .student-search span{position:absolute;left:15px;top:50%;transform:translateY(-50%);color:var(--muted)}
  .btn-add-student{border:0;background:var(--teal);color:#fff;border-radius:10px;padding:12px 18px;font-weight:700;cursor:pointer}
  .btn-add-student:hover{background:var(--teal-light)}
  .student-card{background:#fff;border:1px solid var(--border);border-radius:14px;box-shadow:0 8px 30px rgba(26,35,50,.06);overflow:hidden}
  .student-table-wrap{width:100%;overflow-x:auto}
  .student-table{width:100%;min-width:1700px;border-collapse:collapse}
  .student-table th{background:var(--dark);color:#fff;padding:14px 12px;font-size:12px;text-align:left;white-space:nowrap}
  .student-table td{padding:13px 12px;border-bottom:1px solid var(--border);font-size:13px;vertical-align:middle;white-space:nowrap}
  .student-table tbody tr:hover{background:#fafcfd}
  .student-no{font-weight:800;color:var(--teal)}
  .student-name{font-weight:700;color:var(--dark)}
  .status{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;font-size:11px;font-weight:800}
  .status:before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
  .status-process{color:#a16b00;background:#fff5d8}
  .status-confirmed{color:#23724d;background:#e4f6ed}
  .status-paid{color:#23724d;background:#e4f6ed}
  .status-unpaid{color:#a63838;background:#fde8e8}
  .status-verification{color:#8a6200;background:#fff4cf}
  .verify-btn{color:#245b9b;background:#e7f0fb}
  .fixed-fee-display{padding:10px 12px;border:1px solid #dfe5ec;border-radius:8px;background:#f6f8fb;font-weight:700;color:#243447}
  .form-help{display:block;margin-top:5px;color:#6b7280;font-size:12px}
  .generated-file-display{padding:10px 12px;border:1px solid #dfe5ec;border-radius:8px;background:#f6f8fb}
  .file-link{display:inline-flex;align-items:center;gap:5px;color:var(--teal);font-weight:700;text-decoration:none}
  .file-link:hover{color:var(--teal-light);text-decoration:underline}
  .action-buttons{display:flex;gap:7px}
  .action-btn{border:0;border-radius:7px;padding:7px 10px;cursor:pointer;font-size:12px;font-weight:700}
  .edit-btn{color:#725800;background:#fff2c7}.delete-btn{color:#a63838;background:#fde8e8}
  .empty-row{text-align:center!important;padding:35px!important;color:var(--muted)}
  .student-count{padding:12px 16px;color:var(--muted);font-size:12px;border-top:1px solid var(--border);background:#fbfcfd}
  .student-modal{display:none;position:fixed;inset:0;z-index:9999;background:rgba(12,20,32,.62);padding:25px;overflow-y:auto}
  .student-modal.show{display:flex;align-items:center;justify-content:center}
  .student-modal-box{
    width:min(900px,100%);
    background:#fff;
    border-radius:16px;
    box-shadow:0 20px 60px rgba(0,0,0,.25);
    overflow:hidden;
    margin-top: 16%;
}
  .student-modal-header{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;background:var(--dark);color:#fff}
  .student-modal-header h3{margin:0;font-size:20px}.modal-close{border:0;background:transparent;color:#fff;font-size:25px;cursor:pointer}
  .student-form{padding:22px}.student-form-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}
  .student-form-group{display:flex;flex-direction:column;gap:6px}.student-form-group.full{grid-column:1/-1}
  .student-form-group label{font-size:12px;font-weight:800;color:var(--dark)}
  .student-form-group input,.student-form-group select{width:100%;border:1px solid var(--border);border-radius:8px;padding:10px 11px;outline:none;background:#fff}
  .student-form-group input:focus,.student-form-group select:focus{border-color:var(--teal-light);box-shadow:0 0 0 3px rgba(39,160,180,.1)}
  .student-modal-footer{display:flex;justify-content:flex-end;gap:10px;padding:16px 22px;background:#f8fafb;border-top:1px solid var(--border)}
  .modal-cancel,.modal-save{border:0;border-radius:8px;padding:10px 17px;font-weight:700;cursor:pointer}
  .modal-cancel{background:#e9edf2;color:var(--text)}.modal-save{background:var(--teal);color:#fff}
  .file-current{font-size:11px;color:var(--muted);margin-top:3px}
  .loading{text-align:center;padding:30px;color:var(--muted)}
  .toast{position:fixed;right:20px;bottom:20px;z-index:10001;padding:13px 17px;border-radius:9px;background:var(--dark);color:#fff;display:none;box-shadow:0 10px 30px rgba(0,0,0,.2)}
  .toast.show{display:block}.toast.error{background:#a63838}.toast.success{background:#23724d}
  @media(max-width:768px){.student-page{padding-top:90px}.student-form-grid{grid-template-columns:1fr}.student-form-group.full{grid-column:auto}.student-modal{padding:12px}}

  /* =========================================================
   ADD / EDIT STUDENT MODAL - MOBILE RESPONSIVE
   Works down to 300px screens
   ========================================================= */

.student-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.student-modal.active {
    display: flex;
}

.student-modal-box {
    width: min(900px, 100%);
    max-width: 900px;
    max-height: calc(100vh - 40px);
    margin: auto;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Header stays visible while form scrolls */
.student-modal-header {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

/* Form itself becomes scrollable */
.student-form {
    min-width: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 20px;
    -webkit-overflow-scrolling: touch;
}

/* Desktop: 2 columns */
.student-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    width: 100%;
}

/* Prevent inputs from overflowing their grid cell */
.student-form-group {
    min-width: 0;
    width: 100%;
}

.student-form-group input,
.student-form-group select,
.student-form-group textarea {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

/* File inputs need special handling on small screens */
.student-form-group input[type="file"] {
    width: 100%;
    max-width: 100%;
    font-size: 13px;
}

/* Buttons */
.student-form-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.student-form-actions button {
    min-height: 44px;
}

/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 700px) {

    .student-modal {
        align-items: flex-start;
        padding: 10px;
    }

    .student-modal-box {
        width: 100%;
        max-width: 100%;
        max-height: calc(100vh - 20px);
        border-radius: 12px;
    }

    .student-form {
        padding: 16px;
    }

    .student-form-grid {
        grid-template-columns: 1fr;
        gap: 13px;
    }

    .student-modal-header {
        padding: 14px 16px;
    }

    .student-modal-header h3 {
        font-size: 19px;
    }
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 480px) {

    .student-modal {
        padding: 0;
    }

    .student-modal-box {
        width: 100%;
        height: 100dvh;
        max-height: 100dvh;
        border-radius: 0;
    }

    .student-modal-header {
        padding: 13px 14px;
        min-height: 54px;
    }

    .student-modal-header h3 {
        font-size: 18px;
        line-height: 1.2;
    }

    .modal-close {
        width: 40px;
        height: 40px;
        flex: 0 0 40px;
        font-size: 25px;
    }

    .student-form {
        padding: 14px;
    }

    .student-form-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .student-form-group label {
        display: block;
        margin-bottom: 5px;
        font-size: 13px;
    }

    .student-form-group input,
    .student-form-group select,
    .student-form-group textarea {
        width: 100%;
        min-height: 42px;
        font-size: 16px;
        padding: 9px 10px;
    }

    .student-form-group input[type="file"] {
        min-height: 44px;
        padding: 8px;
        font-size: 13px;
    }

    .fixed-fee-display {
        width: 100%;
        box-sizing: border-box;
    }

    .form-help {
        display: block;
        line-height: 1.4;
        margin-top: 4px;
    }

    .student-form-actions {
        flex-direction: column;
        gap: 9px;
    }

    .student-form-actions button {
        width: 100%;
        min-height: 46px;
    }
}

/* =========================================================
   VERY SMALL PHONES - 300px
   ========================================================= */

@media (max-width: 340px) {

    .student-form {
        padding: 10px;
    }

    .student-modal-header {
        padding: 10px;
    }

    .student-modal-header h3 {
        font-size: 16px;
    }

    .student-form-grid {
        gap: 10px;
    }

    .student-form-group label {
        font-size: 12px;
    }

    .student-form-group input,
    .student-form-group select,
    .student-form-group textarea {
        min-height: 40px;
        font-size: 16px;
        padding: 8px;
    }

    .student-form-group input[type="file"] {
        font-size: 11px;
    }

    .modal-close {
        width: 36px;
        height: 36px;
        flex-basis: 36px;
    }
}

/* Prevent the page behind the modal from moving */
body.student-modal-open {
    overflow: hidden;
}