:root {
  --primary: #192a72;
  --accent: #c32546;
  --warning: #e5a518;
  --success: #138a3d;
  --danger: #c32546;
  --gray: #6b7280;
  --bg: #f4f6f8;
  --white: #ffffff;
  --text: #222222;
  --muted: #666666;
  --line: #e5e7eb;
  --soft: #f8f9fd;
  --shadow: 0 6px 20px rgba(0, 0, 0, .05);
}

.staff-action-readonly {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 5px 10px;
  border-radius: 7px;
  background: #eef1f5;
  color: #7a8494;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

#branchTeachersPanel .dashboard-actions button:disabled {
  cursor: not-allowed;
  border-color: #d5d9e1;
  background: #eef1f5;
  color: #9aa3b2;
  opacity: 1;
}

.clickable-table-row {
  cursor: pointer;
}

#branchTeachersPanel .clickable-table-row:hover > td,
#classesList .clickable-table-row:hover > td {
  background: #eef3fb !important;
}

#branchStudentsPanel tr.student-return-highlight > td {
  background:#fff3bf !important;
  transition:background-color .35s ease;
}

#branchStudentsPanel .dashboard-table th:nth-child(n+2):nth-child(-n+6),
#branchStudentsPanel .dashboard-table td:nth-child(n+2):nth-child(-n+6) {
  text-align: center;
  vertical-align: middle;
}

.student-current-class-cell b,
.student-current-class-cell small {
  display: block;
}

.student-current-class-cell small {
  margin-top: 3px;
  color: #7b8798;
  font-size: 10px;
  font-weight: 700;
}

/* Bảng học phí giữ nguyên màu trạng thái, không tạo hiệu ứng khi rê chuột. */
#tuitionList .tuition-student-table tbody tr,
#tuitionList .tuition-student-table tbody td {
  transition: none !important;
}

#tuitionList .tuition-student-table tbody tr:hover {
  transform: none !important;
  box-shadow: none !important;
}

#tuitionList .tuition-student-table tbody tr:hover td {
  filter: none !important;
}

.tuition-signed-confirmation-gallery {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  width: 100%;
  max-height: calc(90vh - 76px);
  padding: 4px;
  overflow: auto;
}

.tuition-signed-confirmation-gallery figure {
  margin: 0;
  text-align: center;
}

.tuition-signed-confirmation-gallery img {
  display: block;
  width: 100%;
  height: auto;
  max-height: none;
  object-fit: contain;
}

.tuition-signed-confirmation-gallery figcaption {
  margin-top: 6px;
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
}

/* =========================================================
   TABLE RESPONSIVE FINAL FIX
   - Học sinh: vừa màn hình laptop, cột Thao tác luôn có header.
   - Điện thoại: CSKH/Học sinh giữ độ rộng đọc được và cuộn ngang.
   ========================================================= */
@media (min-width: 901px) {
  #studentsTable .table-container {
    overflow-x: hidden !important;
  }

  #studentsTable .crm-table {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    table-layout: fixed !important;
  }

  #studentsTable .crm-table th,
  #studentsTable .crm-table td {
    box-sizing: border-box !important;
    padding: 8px 6px !important;
    font-size: 12px !important;
    overflow-wrap: anywhere;
  }

  #studentsTable .crm-table th:nth-child(1) { width: 8%; }
  #studentsTable .crm-table th:nth-child(2) { width: 14%; }
  #studentsTable .crm-table th:nth-child(3) { width: 11%; }
  #studentsTable .crm-table th:nth-child(4) { width: 10%; }
  #studentsTable .crm-table th:nth-child(5) { width: 8%; }
  #studentsTable .crm-table th:nth-child(6) { width: 10%; }
  #studentsTable .crm-table th:nth-child(7) { width: 13%; }
  #studentsTable .crm-table th:nth-child(8) { width: 26%; }

  #studentsTable .crm-table thead th:last-child {
    display: table-cell !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: sticky !important;
    right: 0 !important;
    z-index: 205 !important;
    background: var(--primary) !important;
    color: #fff !important;
    text-align: center !important;
  }

  #studentsTable .crm-table tbody td:last-child {
    position: relative !important;
    right: auto !important;
  }

  #studentsTable .crm-actions {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 5px !important;
    width: 100% !important;
  }

  #studentsTable .crm-actions button {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 30px !important;
    padding: 0 4px !important;
    font-size: 10.5px !important;
    white-space: nowrap !important;
  }

  #branchStudentsPanel,
  #branchStudentsPanel .dashboard-table-container {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  #branchStudentsPanel .dashboard-table {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    table-layout: fixed !important;
  }

  #branchStudentsPanel .dashboard-table th,
  #branchStudentsPanel .dashboard-table td {
    box-sizing: border-box !important;
    padding: 8px 6px !important;
    font-size: 11.5px !important;
    overflow-wrap: anywhere !important;
  }

  #branchStudentsPanel .dashboard-table th:nth-child(1) { width: 10%; }
  #branchStudentsPanel .dashboard-table th:nth-child(2) { width: 12%; }
  #branchStudentsPanel .dashboard-table th:nth-child(3) { width: 12%; }
  #branchStudentsPanel .dashboard-table th:nth-child(4) { width: 12%; }
  #branchStudentsPanel .dashboard-table th:nth-child(5) { width: 12%; }
  #branchStudentsPanel .dashboard-table th:nth-child(6) { width: 12%; }
  #branchStudentsPanel .dashboard-table th:nth-child(7) { width: 12%; }
  #branchStudentsPanel .dashboard-table th:nth-child(8) { width: 18%; }

  #branchStudentsPanel .dashboard-table thead th:last-child {
    display: table-cell !important;
    position: sticky !important;
    top: 0 !important;
    right: auto !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 206 !important;
    background: var(--primary) !important;
    color: #fff !important;
    text-align: center !important;
  }

  #branchStudentsPanel .dashboard-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 5px !important;
    width: 100% !important;
  }

  #branchStudentsPanel .dashboard-actions button {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 30px !important;
    padding: 4px 5px !important;
    font-size: 10.5px !important;
    white-space: nowrap !important;
  }
}

.attendance-summary-controls {
  display:flex;
  align-items:center;
  gap:7px;
  margin-left:auto;
}

#attendanceSummarySearch {
  box-sizing:border-box;
  width:230px;
  min-height:36px;
  margin:0;
  padding:7px 10px;
  border:1px solid #d8deea;
  border-radius:9px;
  background:#fff;
  font-size:11px;
}

@media (max-width: 900px) {
  .attendance-summary-controls {
    flex:0 0 auto;
    gap:5px;
  }
  #attendanceSummarySearch {
    width:150px;
    min-height:32px;
    padding:5px 7px;
    font-size:9px;
  }
}

@media (max-width: 900px) {
  #carelogList,
  #studentsTable {
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
  }

  #carelogList .carelog-table-wrap,
  #studentsTable .table-container {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch;
  }

  #carelogList .carelog-table,
  #carelogList .carelog-student-table,
  #carelogList .carelog-pending-table,
  #carelogList .carelog-completed-table {
    width: 1080px !important;
    min-width: 1080px !important;
    max-width: none !important;
    table-layout: fixed !important;
  }

  #studentsTable .crm-table {
    width: 980px !important;
    min-width: 980px !important;
    max-width: none !important;
    table-layout: fixed !important;
  }

  #studentsTable .crm-table th:nth-child(1) { width: 82px !important; }
  #studentsTable .crm-table th:nth-child(2) { width: 135px !important; }
  #studentsTable .crm-table th:nth-child(3) { width: 115px !important; }
  #studentsTable .crm-table th:nth-child(4) { width: 105px !important; }
  #studentsTable .crm-table th:nth-child(5) { width: 90px !important; }
  #studentsTable .crm-table th:nth-child(6) { width: 105px !important; }
  #studentsTable .crm-table th:nth-child(7) { width: 125px !important; }
  #studentsTable .crm-table th:nth-child(8) { width: 223px !important; }

  #studentsTable .crm-table thead th:last-child {
    display: table-cell !important;
    visibility: visible !important;
    opacity: 1 !important;
    background: var(--primary) !important;
    color: #fff !important;
    text-align: center !important;
  }

  #studentsTable .crm-actions,
  #carelogList .carelog-row-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-items: stretch !important;
    gap: 5px !important;
    width: 100% !important;
  }

  #studentsTable .crm-actions button,
  #carelogList .carelog-row-actions button {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 30px !important;
    padding: 5px 4px !important;
    font-size: 10px !important;
    line-height: 1.15 !important;
    white-space: normal !important;
  }
}

/* Final A4 tuition notice layout */
.tuition-notice-modal-content{width:min(1180px,98vw)!important;max-width:1180px!important}
.tuition-notice-workspace{grid-template-columns:310px 572px!important;justify-content:center;align-items:start;gap:20px!important}
.tuition-notice-preview-frame{position:relative;width:572px;height:809px;overflow:hidden;background:#dfe5ee;box-shadow:0 8px 24px rgba(15,23,42,.12)}
.tuition-notice-sheet{position:relative!important;box-sizing:border-box!important;width:794px!important;height:1123px!important;min-height:1123px!important;margin:0!important;padding:30px 38px 132px!important;overflow:hidden!important;background:#fff!important;color:#111!important;font-family:"Times New Roman",serif!important;font-size:13px!important;line-height:1.28!important;box-shadow:none!important;transform:scale(.72);transform-origin:top left}
.tuition-notice-letterhead{position:relative!important;display:flex!important;align-items:flex-start!important;justify-content:space-between!important;width:100%!important;height:72px!important;margin:0!important;overflow:visible!important}
.tuition-header-art{position:relative!important;display:block!important;width:105px!important;height:72px!important;overflow:hidden!important}
.tuition-header-art img{position:absolute!important;width:217px!important;height:auto!important;left:-61px!important;top:-49px!important}
.tuition-logo-crop{position:relative;display:block;width:150px;height:64px;overflow:hidden}
.tuition-notice-logo{position:absolute!important;width:220px!important;height:220px!important;max-width:none!important;left:-35px!important;top:-73px!important;object-fit:fill!important;margin:0!important}
.tuition-notice-sheet>h1{margin:2px 0 20px!important;color:#294f9e!important;text-align:center!important;font-size:28px!important;line-height:1.1!important;letter-spacing:.3px!important}
.tuition-notice-recipient{display:grid!important;grid-template-columns:1.8fr 1fr .8fr!important;gap:3px 14px!important;margin:0 0 15px!important;font-size:13px!important;line-height:1.25!important}
.tuition-notice-recipient span{grid-row:1/3}.tuition-notice-recipient b,.tuition-notice-recipient strong{font-size:13px!important}.tuition-notice-recipient em{grid-column:2/4;font-size:13px!important}
.tuition-notice-sheet>p{margin:0 0 7px!important;font-size:13px!important;line-height:1.3!important}
.tuition-notice-detail-table{width:100%!important;border-collapse:collapse!important;table-layout:fixed!important;font-size:12px!important;line-height:1.15!important}
.tuition-notice-detail-table th,.tuition-notice-detail-table td{box-sizing:border-box!important;height:25px!important;padding:4px 7px!important;border:1px dotted #555!important;vertical-align:middle!important;font-size:12px!important;line-height:1.15!important}
.tuition-notice-detail-table th{width:37%!important}.tuition-notice-total th,.tuition-notice-total td{height:34px!important;color:#d60000!important;font-size:20px!important;line-height:1!important}
.tuition-transfer-section{display:grid!important;grid-template-columns:1.08fr 150px 1.12fr!important;min-height:165px!important;align-items:center!important;border:1px solid #333!important;border-top:0!important}
.tuition-transfer-section>div{padding:10px 12px!important}.tuition-transfer-section h3{margin:0 0 6px!important;font-size:14px!important}.tuition-transfer-section p{margin:4px 0!important;font-size:11.5px!important;line-height:1.32!important}.tuition-transfer-section img#tuitionNoticeQr{display:block!important;width:135px!important;height:135px!important;margin:auto!important;object-fit:contain!important}.tuition-transfer-section strong{margin-top:5px!important;font-size:14px!important;line-height:1.2!important}
.tuition-notice-deadline{display:grid!important;grid-template-columns:37% 63%!important;min-height:42px!important;align-items:stretch!important;border:1px solid #333!important;border-top:0!important}
.tuition-notice-deadline b,.tuition-notice-deadline strong{box-sizing:border-box!important;display:flex!important;align-items:center!important;margin:0!important;padding:7px 9px!important;font-size:14px!important;line-height:1.15!important}
.tuition-notice-deadline strong{border-left:1px solid #333!important;color:#d60000!important;font-size:16px!important}
.tuition-notice-footer{padding:12px 0 0!important;font-size:11.5px!important;line-height:1.35!important}.tuition-notice-footer strong{margin-top:8px!important;font-size:12px!important}
.tuition-letter-footer{position:absolute!important;left:38px!important;right:38px!important;bottom:22px!important;display:flex!important;align-items:flex-end!important;justify-content:space-between!important;width:auto!important;height:105px!important;min-height:105px!important;margin:0!important;padding:0!important;overflow:visible!important}
.tuition-contact-crop{position:relative;z-index:3;display:block;width:155px;height:64px;overflow:hidden;margin:0 0 2px}
.tuition-footer-contact-image{position:absolute!important;width:247px!important;height:auto!important;max-width:none!important;left:-44px!important;top:-23px!important;object-fit:fill!important}
.tuition-footer-slogan{position:relative!important;z-index:4!important;margin:0 8px 31px auto!important;color:#3154b3!important;font-family:Arial,sans-serif!important;font-size:8.5px!important;font-style:italic!important;font-weight:850!important;white-space:nowrap!important}
.tuition-footer-art{position:absolute!important;z-index:1!important;right:0!important;bottom:0!important;display:block!important;width:660px!important;height:105px!important;overflow:hidden!important}
.tuition-footer-art img{position:absolute!important;width:995px!important;height:auto!important;max-width:none!important;left:-133px!important;top:-111px!important}
.tuition-notice-actions .primary-btn{min-width:190px}
@media(max-width:980px){.tuition-notice-workspace{grid-template-columns:1fr!important}.tuition-notice-editor{width:100%}.tuition-notice-preview-frame{margin:0 auto}}
@media print{#tuitionNoticeModal{display:none!important}}

/* Tuition student list and printable fee notice */
#tuition.page.active{display:flex!important;flex-direction:column;min-height:0;overflow:hidden!important}#tuitionList{display:flex;flex:1 1 auto;min-height:0;flex-direction:column}#tuitionList .table-container{flex:1 1 auto;min-height:0;max-height:none!important;overflow:auto!important;scrollbar-gutter:stable}#tuitionList>.pagination{flex:0 0 auto}
.tuition-notice-modal-content{width:99vw!important;max-width:1600px!important}.tuition-notice-workspace{grid-template-columns:320px minmax(760px,1fr)!important}.tuition-notice-sheet{width:790px!important;min-height:980px!important;padding:22px 25px!important}.tuition-notice-sheet>h1{margin:8px 0 18px!important;font-size:29px!important}.tuition-notice-recipient{font-size:14px!important}.tuition-notice-sheet>p{font-size:13px!important}.tuition-notice-detail-table{font-size:12.5px!important}.tuition-notice-detail-table th,.tuition-notice-detail-table td{padding:3px 6px!important}.tuition-notice-total th,.tuition-notice-total td{font-size:21px!important}.tuition-transfer-section{grid-template-columns:1.15fr 170px 1.1fr!important}.tuition-transfer-section img#tuitionNoticeQr{width:155px!important;height:155px!important;margin:auto}.tuition-transfer-section h3{font-size:15px!important}.tuition-transfer-section p{font-size:12.5px!important}.tuition-transfer-section strong{font-size:15px!important}.tuition-notice-deadline b{flex-basis:48%!important}.tuition-notice-deadline strong{flex:1;align-self:stretch;display:flex;align-items:center;border-left:1px solid #333;padding-left:12px!important;font-size:18px!important}.tuition-notice-footer{font-size:12.5px!important}
.tuition-notice-letterhead{height:62px!important;margin:-22px -25px 0!important;overflow:hidden!important}.tuition-header-art{position:relative;display:block;width:125px;height:62px;overflow:hidden}.tuition-header-art img{position:absolute;width:190px;height:auto;left:-30px;top:-23px}.tuition-notice-logo{width:175px;height:62px;margin:3px 20px 0 0;object-fit:cover;object-position:center 48%}.tuition-letter-footer{min-height:95px!important;margin:12px -25px -22px!important;padding:12px 28px 18px!important}.tuition-footer-contact-image{position:relative;z-index:3;width:180px;height:76px;object-fit:contain}.tuition-footer-slogan{z-index:3!important;margin-bottom:38px!important;font-size:9px!important}.tuition-footer-art{position:absolute;z-index:1;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 53%}
.unit-delete-confirm-modal{z-index:2300000!important}
.unit-date-update-actions{justify-content:space-between!important}.unit-date-update-actions .unit-delete-danger-btn{margin-right:auto}.unit-date-update-actions .unit-delete-danger-btn,.unit-date-update-actions .unit-date-save-btn{border-radius:9px!important;background:#fff!important;box-shadow:none!important;transition:background .16s ease,color .16s ease,border-color .16s ease!important}.unit-date-update-actions .unit-delete-danger-btn{border:1px solid #dc2626!important;color:#dc2626!important}.unit-date-update-actions .unit-delete-danger-btn:hover{background:#dc2626!important;color:#fff!important}.unit-date-update-actions .unit-date-save-btn{border:1px solid #2563eb!important;color:#2563eb!important}.unit-date-update-actions .unit-date-save-btn:hover{background:#2563eb!important;color:#fff!important}.unit-delete-confirm-actions .unit-delete-danger-btn{box-shadow:none!important}
#tuitionList .table-container{max-height:calc(100vh - 245px);overflow:auto!important}#tuitionList .tuition-student-table{min-width:1120px}#tuitionList .tuition-student-table thead th{position:sticky;top:0;z-index:5}
.tuition-notice-modal-content{width:99vw!important;max-width:1750px!important}.tuition-notice-workspace{grid-template-columns:340px minmax(900px,1fr)!important}.tuition-notice-sheet{width:960px!important}.tuition-notice-letterhead{display:flex;align-items:flex-start;justify-content:space-between;height:72px;margin:-28px -30px 0;position:relative;overflow:hidden}.tuition-letter-corner{display:block;width:115px;height:72px;position:relative;background:linear-gradient(145deg,#df4053 0 40%,transparent 41%)}.tuition-letter-corner::after{content:"";position:absolute;inset:0;background:linear-gradient(145deg,transparent 0 49%,#e5e7eb 50% 61%,transparent 62%)}.tuition-notice-brand{display:flex!important;flex-direction:column;align-items:flex-end;margin:20px 28px 0 0;line-height:.9}.tuition-notice-brand b{color:#e11d48;font-family:Arial,sans-serif;font-size:30px;font-weight:950}.tuition-notice-brand small{order:-1;color:#173b8f;font-family:Arial,sans-serif;font-size:7px;font-weight:850}.tuition-letter-footer{position:relative;display:flex;align-items:flex-end;justify-content:space-between;min-height:110px;margin:20px -30px -28px;padding:18px 38px 22px;overflow:hidden;font-family:Arial,sans-serif}.tuition-footer-contact{position:relative;z-index:2;display:grid;grid-template-columns:auto 1fr;gap:0 5px;color:#ef476f;font-size:17px}.tuition-footer-contact b{color:#173b8f;font-size:11px}.tuition-footer-contact strong{grid-column:2;color:#173b8f;font-size:18px}.tuition-footer-slogan{position:relative;z-index:2;margin-left:auto;margin-bottom:36px;color:#3154b3;font-size:11px;font-style:italic;font-weight:850}.tuition-letter-footer>i{position:absolute;right:-50px;bottom:-62px;width:460px;height:130px;border-radius:50% 0 0 0;background:#294db2;transform:rotate(-5deg)}.tuition-letter-footer>i::before{content:"";position:absolute;left:-45px;top:-13px;width:475px;height:25px;border-radius:50% 0 0 0;background:#e5e7eb}
.tuition-student-table th:nth-child(1){width:11%!important}.tuition-student-table th:nth-child(2){width:17%!important}.tuition-student-table th:nth-child(3){width:14%!important}.tuition-student-table th:nth-child(4){width:13%!important}.tuition-student-table th:nth-child(5){width:14%!important}.tuition-student-table th:nth-child(6){width:17%!important}.tuition-student-table th:nth-child(7){width:14%!important}
.inline-staff-picker-menu{z-index:1200000!important}
.unit-delete-danger-btn[hidden]{display:none!important}
.tuition-student-table th:nth-child(1){width:11%}.tuition-student-table th:nth-child(2){width:17%}.tuition-student-table th:nth-child(3){width:14%}.tuition-student-table th:nth-child(4){width:13%}.tuition-student-table th:nth-child(5){width:14%}.tuition-student-table th:nth-child(6){width:17%}.tuition-student-table th:nth-child(7){width:14%}.tuition-billing-date{color:#dc2626}.tuition-paid-button{padding:7px 9px;border:1px solid #a7dfbc;border-radius:8px;background:#effaf3;color:#168344;font-size:11.5px;font-weight:850;cursor:pointer}.tuition-paid-button:hover{border-color:#65c587;background:#e1f7e9}.paid-tuition-modal{z-index:1600000!important}.paid-tuition-modal-content{width:min(650px,94vw);max-width:650px}.paid-tuition-modal-content .modal-header p{margin:3px 0 0;color:#64748b;font-size:12px}.paid-tuition-list{max-height:55vh;border:1px solid #e2e8f0;border-radius:10px;overflow:auto}.paid-tuition-list>div{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 14px;border-bottom:1px solid #edf1f7}.paid-tuition-list>div:last-child{border-bottom:0}.paid-tuition-list b{color:#173b8f}.paid-tuition-list small{display:block;margin-top:4px;color:#64748b;font-size:11px}.paid-tuition-list strong{flex:0 0 auto;color:#168344}
.tuition-class-list{display:flex;flex-direction:column;gap:7px}.tuition-class-list>span{display:block}.tuition-notice-editor select{box-sizing:border-box;width:100%;height:36px;margin:4px 0 0;padding:6px 9px}
.tuition-page-header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:12px}.tuition-page-header h1{margin:0}.tuition-page-header p{margin:5px 0 0;color:#64748b;font-size:12px}.tuition-student-toolbar{margin-bottom:12px}.tuition-student-toolbar input{max-width:480px}.tuition-student-table{width:100%;table-layout:fixed}.tuition-student-table th:nth-child(1){width:14%}.tuition-student-table th:nth-child(2){width:24%}.tuition-student-table th:nth-child(3){width:20%}.tuition-student-table th:nth-child(4){width:22%}.tuition-student-table th:nth-child(5){width:20%}.tuition-student-table td{vertical-align:middle}.tuition-student-table td:nth-child(4) small{display:block;margin-top:3px;color:#94a3b8}.tuition-latest-class{color:#173b8f}.tuition-no-class{color:#a0a8b5}.tuition-notice-action{padding:8px 11px;border:1px solid #b8c9ef;border-radius:8px;background:#f5f7ff;color:#173b8f;font-size:12px;font-weight:850;cursor:pointer}.tuition-notice-action:hover{border-color:#7895e8;background:#eaf0ff}
.tuition-notice-modal{z-index:1500000!important}.tuition-notice-modal-content{display:flex;flex-direction:column;width:min(1400px,97vw);max-width:1400px;height:min(94vh,940px);max-height:94vh;overflow:hidden}.tuition-notice-modal-header{flex:0 0 auto}.tuition-notice-modal-header p{margin:3px 0 0;color:#64748b;font-size:12px}.tuition-notice-workspace{display:grid;grid-template-columns:300px minmax(720px,1fr);gap:16px;flex:1 1 auto;min-height:0;padding:2px;overflow:auto;background:#eef2f7}.tuition-notice-editor{padding:14px;border-radius:10px;background:#fff;overflow:auto}.tuition-notice-editor h3{margin:0 0 10px;color:#173b8f}.tuition-notice-editor label{display:block;margin-bottom:8px;color:#475569;font-size:11.5px;font-weight:800}.tuition-notice-editor input{box-sizing:border-box;width:100%;height:36px;margin:4px 0 0;padding:6px 9px}.tuition-adjustment-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 8px}.tuition-notice-editor>small{display:block;margin:-1px 0 10px;color:#b45309}.tuition-notice-sheet{box-sizing:border-box;width:900px;min-height:1100px;margin:0 auto;padding:28px 30px;background:#fff;color:#111;font-family:"Times New Roman",serif;box-shadow:0 8px 24px rgba(15,23,42,.12)}.tuition-notice-brand{display:flex;justify-content:flex-end}.tuition-notice-brand span{color:#e11d48;font-family:Arial,sans-serif;font-size:28px;font-weight:950}.tuition-notice-sheet>h1{margin:18px 0 28px;color:#294f9e;text-align:center;font-family:"Times New Roman",serif;font-size:34px}.tuition-notice-recipient{display:grid;grid-template-columns:2fr 1.2fr 1fr;gap:4px 18px;margin-bottom:16px;font-size:17px}.tuition-notice-recipient span{grid-row:1/3}.tuition-notice-recipient b,.tuition-notice-recipient strong{color:#dc2626}.tuition-notice-recipient em{grid-column:2/4;font-style:normal}.tuition-notice-sheet>p{margin:8px 0;font-size:16px;font-weight:700}.tuition-notice-detail-table{width:100%;border-collapse:collapse;font-size:15px}.tuition-notice-detail-table th,.tuition-notice-detail-table td{padding:5px 7px;border:1px dotted #555;text-align:left}.tuition-notice-detail-table th{width:36%}.tuition-notice-total th,.tuition-notice-total td{color:#dc0000;font-size:25px;font-weight:950}.tuition-transfer-section{display:grid;grid-template-columns:1.05fr 230px 1fr;align-items:center;border:1px solid #333;border-top:0}.tuition-transfer-section>div{padding:12px}.tuition-transfer-section h3{margin:0 0 6px;font-size:18px}.tuition-transfer-section p{margin:5px 0;font-size:15px;line-height:1.35}.tuition-transfer-section img{display:block;width:220px;height:220px;object-fit:contain}.tuition-transfer-section strong{display:block;margin-top:5px;color:#dc0000;font-size:18px}.tuition-notice-deadline{display:flex;align-items:center;border:1px solid #333;border-top:0}.tuition-notice-deadline b{flex:0 0 36%;padding:8px}.tuition-notice-deadline strong{padding:8px;color:#dc0000;font-size:22px}.tuition-notice-footer{padding-top:14px;font-size:15px;font-style:italic;line-height:1.45}.tuition-notice-footer strong{display:block;margin-top:12px;color:#294f9e;font-style:normal}.tuition-notice-actions{flex:0 0 auto;margin-top:10px}
@media(max-width:1050px){.tuition-notice-workspace{grid-template-columns:1fr}.tuition-notice-editor{max-height:none}.tuition-student-table{min-width:760px}}
@media print{body>*{display:none!important}#tuitionNoticeModal{display:block!important;position:static!important;background:#fff!important}#tuitionNoticeModal .tuition-notice-modal-content{display:block!important;width:auto!important;height:auto!important;max-width:none!important;max-height:none!important;padding:0!important;box-shadow:none!important}#tuitionNoticeModal .tuition-notice-modal-header,#tuitionNoticeModal .tuition-notice-editor,#tuitionNoticeModal .tuition-notice-actions{display:none!important}#tuitionNoticeModal .tuition-notice-workspace{display:block!important;padding:0!important;overflow:visible!important;background:#fff!important}#tuitionNoticeModal .tuition-notice-sheet{width:100%!important;min-height:0!important;margin:0!important;padding:8mm!important;box-shadow:none!important;page-break-inside:avoid}@page{size:A4 portrait;margin:6mm}}

/* Final confirmation sheet sizing: A5 source is 560x794 and exports at 1748x2480. */
#tuitionConfirmationPrintArea.tuition-confirmation-sheet{
  width:560px!important;
  min-width:560px!important;
  max-width:560px!important;
  padding:36px 34px 96px!important;
}
#tuitionConfirmationPrintArea .tuition-confirmation-letterhead{
  right:16px!important;
  left:16px!important;
}
#tuitionConfirmationPrintArea .tuition-confirmation-letter-footer{
  right:-10.6px!important;
  width:290px!important;
}
#tuitionConfirmationPrintArea .tuition-confirmation-letter-footer img{
  width:387px!important;
}
#tuitionConfirmationPrintArea .tuition-confirmation-validity,
#tuitionConfirmationPrintArea .tuition-confirmation-details,
#tuitionConfirmationPrintArea .tuition-confirmation-signatures,
#tuitionConfirmationPrintArea .tuition-confirmation-notes{
  width:100%!important;
  max-width:none!important;
  margin-right:0!important;
}
#tuitionConfirmationPrintArea .tuition-confirmation-title{
  width:100%!important;
  max-width:none!important;
  margin-right:0!important;
}
#tuitionConfirmationPrintArea .tuition-confirmation-letter-footer{
  right:-10.6px!important;
}
#tuitionConfirmationPrintArea .tuition-confirmation-header-art{
  left:-48px!important;
}
#tuitionConfirmationPrintArea .tuition-confirmation-company{
  left:18px!important;
}

/* The shared confirm dialog must stay above the receipt-review popup. */
#confirmModal{
  z-index:2400000!important;
}

/* Keep the tuition student table inside its container and reserve room for actions. */
#tuitionList .tuition-student-table{
  width:100%!important;
  min-width:0!important;
  table-layout:fixed!important;
}
#tuitionList .tuition-student-table th:nth-child(1){width:7%!important}
#tuitionList .tuition-student-table th:nth-child(2){width:12%!important}
#tuitionList .tuition-student-table th:nth-child(3){width:10%!important}
#tuitionList .tuition-student-table th:nth-child(4){width:9%!important}
#tuitionList .tuition-student-table th:nth-child(5){width:11%!important}
#tuitionList .tuition-student-table th:nth-child(6){width:12%!important}
#tuitionList .tuition-student-table th:nth-child(7){width:13%!important}
#tuitionList .tuition-student-table th:nth-child(8){width:12%!important}
#tuitionList .tuition-student-table th:nth-child(9){width:14%!important}
#tuitionList .tuition-action-dropdown,
#tuitionList .tuition-action-dropdown summary{
  width:100%!important;
  min-width:0!important;
}

* {
  box-sizing: border-box;
}

/* Give every tuition workflow tab its own scrollable table viewport. */
#tuitionNoticeList,
#tuitionHistoryList,
#tuitionConfirmationList {
  flex: 1 1 auto;
  min-height: 0;
  max-height: calc(100vh - 245px);
  overflow: hidden;
}

#tuitionNoticeList .table-container,
#tuitionHistoryList .table-container,
#tuitionConfirmationList .table-container {
  height: 100%;
  max-height: calc(100vh - 245px);
  overflow: auto !important;
  scrollbar-gutter: stable;
}

#tuitionNoticeList thead th,
#tuitionHistoryList thead th,
#tuitionConfirmationList thead th {
  position: sticky;
  top: 0;
  z-index: 5;
}

body {
  margin: 0;
  font-family: Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
}

/* =========================
LAYOUT
========================= */
.app {
  display: flex;
  min-height: 100vh;
  width: 100%;
  overflow: hidden;
}

.app.no-sidebar {
  display: block;
  min-height: calc(100vh - 126px);
  overflow: visible;
}

html,
body,
.app.no-sidebar,
.app.no-sidebar main,
#schedules {
  min-height: 100%;
  overflow-y: visible;
}

main {
  flex: 1;
  min-width: 0;
  padding: 28px;
  overflow-x: hidden;
}

.app.no-sidebar main {
  width: 100%;
  padding: 24px 40px 28px;
  overflow-x: hidden;
}

aside {
  width: 240px;
  min-width: 240px;
  flex-shrink: 0;
  background: var(--primary);
  color: #fff;
  padding: 20px;
}

aside h2 {
  margin: 0 0 24px;
}

aside button {
  width: 100%;
  margin-bottom: 10px;
  padding: 12px;
  border: none;
  border-radius: 10px;
  background: rgba(255, 255, 255, .1);
  color: #fff;
  text-align: left;
  cursor: pointer;
  font-weight: 700;
}

aside button:hover {
  background: var(--accent);
}

.page {
  display: none;
}

.page.active {
  display: block;
}

h1 {
  margin: 0 0 8px;
  color: var(--primary);
  font-size: 32px;
  font-weight: 800;
  line-height: 1.25;
}

/* =========================
TOP BAR + BREADCRUMB
========================= */
.top-management-bar {
  height: 78px;
  background: var(--primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 0 22px;
}

.brand-block {
  display: flex;
  align-items: center;
  gap: 16px;
  cursor: pointer;
  transition: opacity .2s ease;
}

.brand-block:hover {
  opacity: .85;
}

.brand-logo {
  font-size: 34px;
  font-weight: 900;
  letter-spacing: -1px;
}

.brand-divider {
  width: 1px;
  height: 40px;
  background: rgba(255, 255, 255, .45);
}

.brand-title {
  font-size: 22px;
  font-weight: 800;
}

.top-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.top-header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  min-width: 0;
}

.auth-session-control {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.auth-session-control span {
  max-width: 210px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 700;
  color: rgba(255, 255, 255, .82);
}

.auth-session-control button {
  min-height: 36px;
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: 999px;
  padding: 0 13px;
  background: transparent;
  color: #fff;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.auth-session-control button:hover {
  background: #fff;
  color: var(--primary);
}

.top-actions button,
.alert-menu button {
  height: 36px;
  border: none;
  border-radius: 999px;
  padding: 0 12px;
  background: rgba(255, 255, 255, .15);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.top-actions button:hover,
.alert-menu button:hover {
  background: rgba(255, 255, 255, .25);
}

.alert-actions {
  display: none;
  position: relative;
}

.alert-actions.show {
  display: flex;
}

.alert-menu {
  position: relative;
}

.alert-menu button span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  margin-left: 6px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  font-weight: 900;
}

.alert-dropdown {
  display: none;
  position: absolute;
  top: 46px;
  right: 0;
  width: 360px;
  max-height: 420px;
  overflow: auto;
  background: #fff;
  color: var(--text);
  border-radius: 16px;
  box-shadow: 0 18px 45px rgba(0, 0, 0, .18);
  z-index: 9999;
  padding: 12px;
}

.alert-dropdown.active {
  display: block;
}

.alert-dropdown-item,
.alert-item,
.insight-item,
.activity-item,
.calendar-item {
  padding: 10px 12px;
  border-radius: 10px;
  margin-bottom: 8px;
  line-height: 1.45;
  font-size: 13px;
  background: var(--soft);
}

.alert-dropdown-item.warning,
.alert-item.medium {
  background: #fff4df;
  border-left: 4px solid var(--warning);
}

.alert-dropdown-item.danger,
.alert-item.high {
  background: #fde8e8;
  border-left: 4px solid var(--danger);
}

.alert-item.low {
  background: #e8f7ed;
  border-left: 4px solid var(--success);
}

.alert-dropdown-empty {
  padding: 16px;
  color: #777;
  text-align: center;
}

.breadcrumb-nav {
  height: 48px;
  display: flex;
  align-items: stretch;
  background: #d8d8d8;
  overflow-x: auto;
}

.breadcrumb-nav button,
.breadcrumb-btn {
  height: 48px;
  border: none;
  border-radius: 0;
  background: #edf0f5;
  color: var(--primary);
  padding: 0 15px;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.breadcrumb-nav button:hover {
  background: #f5eef9;
}

.breadcrumb-nav span {
  width: 28px;
  min-width: 28px;
  background: linear-gradient(135deg, #edf0f5 0%, #edf0f5 50%, transparent 50%);
}

/* =========================
FORMS + BUTTONS
========================= */
input,
select,
textarea {
  width: 100%;
  margin: 7px 0;
  padding: 11px;
  border: 1px solid #ddd;
  border-radius: 10px;
  font-size: 14px;
  background: #fff;
}

textarea {
  min-height: 80px;
  resize: vertical;
}

label {
  display: block;
  margin: 12px 0 4px;
  font-size: 13px;
  font-weight: 700;
  color: var(--primary);
}

input[type="date"] {
  padding: 10px 12px;
  border-color: #dcdfe8;
  color: var(--primary);
}

input[type="date"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: .7;
}

.primary-btn {
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 20px;
  border: none;
  border-radius: 10px;
  background: var(--accent);
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
}

.primary-btn:hover {
  opacity: .92;
}

.primary-btn.full {
  width: 100%;
  height: 44px;
}

.primary-btn.compact {
  height: 38px;
  padding: 0 16px;
  font-size: 13px;
}

.header-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* =========================
PAGE HEADER + TOOLBAR
========================= */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin-bottom: 24px;
}

.page-header p,
.branch-home p,
.dashboard-branch-header p,
.class-detail-header p,
.panel-header.strong p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}

.toolbar {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.toolbar input,
.toolbar select {
  height: 42px;
  border: 1px solid #dfe3eb;
  border-radius: 12px;
  padding: 0 14px;
  background: #fff;
  font-size: 14px;
}

.toolbar input {
  flex: 1;
  min-width: 260px;
}

.toolbar select,
#studentClassFilter,
#studentStatusFilter,
.parents-toolbar select {
  width: 180px;
  flex-shrink: 0;
}

.parents-toolbar {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: nowrap;
}

.parents-toolbar input {
  flex: 1;
  min-width: 260px;
}

/* =========================
DASHBOARD HOME + BRANCH
========================= */
.branch-home {
  min-height: calc(100vh - 180px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.branch-home h1 {
  text-align: center;
  font-size: 42px;
}

.branch-big-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(240px, 320px));
  gap: 24px;
}

.branch-big-grid button {
  border: none;
  background: #fff;
  border-radius: 28px;
  padding: 42px 28px;
  cursor: pointer;
  box-shadow: 0 12px 35px rgba(0, 0, 0, .08);
  transition: .2s;
}

.branch-big-grid button:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 45px rgba(25, 42, 114, .18);
  background: var(--primary);
}

.branch-big-grid button b {
  display: block;
  font-size: 46px;
  color: var(--accent);
  margin-bottom: 10px;
}

.branch-big-grid button span {
  color: var(--primary);
  font-size: 16px;
  font-weight: 700;
}

.branch-big-grid button:hover b,
.branch-big-grid button:hover span {
  color: #fff;
}

.branch-big-grid .home-attendance-button {
  grid-column: 1 / -1;
  width: 320px;
  max-width: 100%;
  justify-self: center;
  padding-top: 24px;
  padding-bottom: 24px;
}

.branch-big-grid .home-attendance-button b { font-size: 32px; }

.self-attendance-content {
  width: min(560px, 94vw);
  max-height: 90vh;
  overflow-y: auto;
}

.self-attendance-content > label,
.self-leave-form > label { display:block; margin:12px 0 6px; color:#46546a; font-size:12px; font-weight:850; }
.self-leave-form > label span { color:#dc2626; }
.self-leave-form > label small { margin-left:5px; color:#8793a7; font-weight:650; }
.self-attendance-content select,
.self-leave-form input,
.self-leave-form select,
.self-leave-form textarea { box-sizing:border-box; width:100%; margin:0; }
.self-attendance-location { display:grid; gap:16px; min-height:210px; place-content:center; padding:20px 0 4px; text-align:center; }
.self-attendance-loading { color:#64748b; font-weight:750; }
.self-attendance-success { display:grid; gap:5px; padding:14px; border-radius:12px; background:#ecfdf3; color:#168344; }
.self-attendance-success b { font-size:17px; }
.self-attendance-success span { font-size:11px; }
.self-attendance-warning { max-width:440px; padding:14px; border-radius:12px; background:#fff7ed; color:#9a3412; font-size:12px; line-height:1.5; }
.self-attendance-now-btn { min-width:280px; min-height:72px; margin:auto; border:0; border-radius:18px; background:#168344; color:#fff; font-size:21px; font-weight:900; cursor:pointer; }
.self-attendance-now-btn:hover { background:#0f6b36; }
.self-attendance-recheck-btn { min-height:40px; border:1px solid #b8c6dd; border-radius:10px; background:#fff; color:#203879; font-weight:850; cursor:pointer; }
.self-leave-upload { display:inline-flex!important; width:auto!important; align-items:center; padding:9px 12px; border:1px dashed #9fb1cf; border-radius:9px; background:#f8faff; color:#203879!important; cursor:pointer; }
.self-leave-upload input { display:none; }
.self-leave-evidence-list { display:grid; gap:4px; margin-top:8px; color:#64748b; font-size:11px; }
.self-leave-submit { width:100%; margin-top:16px; }
.self-leave-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.self-leave-grid label { display:grid; gap:6px; color:#46546a; font-size:12px; font-weight:850; }
.self-leave-grid label span { color:#dc2626; }
.self-leave-label-text { display:inline-flex !important; align-items:baseline; gap:3px; color:#46546a !important; white-space:nowrap; }
.self-leave-label-text em { color:#dc2626; font-style:normal; }
.self-leave-label-text small { color:#8793a7; white-space:normal; }
.self-leave-weekdays { margin-top:12px; }
.self-leave-weekdays > label { color:#46546a; font-size:12px; font-weight:850; }
.self-leave-weekdays > div { display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }
.self-leave-weekdays > div label { display:inline-flex; align-items:center; gap:4px; padding:6px 8px; border:1px solid #dbe3ef; border-radius:8px; background:#f8fafc; font-size:11px; }
.self-leave-weekdays input { width:auto; margin:0; }

@media (max-width:700px) {
  .branch-big-grid .home-attendance-button { width:100%; padding:18px 16px; }
  .self-attendance-content { width:calc(100vw - 22px); max-height:calc(100dvh - 22px); padding:16px; }
  .self-attendance-now-btn { width:100%; min-width:0; min-height:82px; font-size:19px; }
  .self-attendance-location { min-height:240px; }
  .self-leave-grid { grid-template-columns:1fr; }
  .branch-location-toolbar-actions { grid-column:1 / -1; display:grid; grid-template-columns:1fr 1fr; gap:6px; }
}

/* Quản lý tọa độ cơ sở */
.branch-location-content { box-sizing:border-box; width:min(1220px, calc(100vw - 32px)); height:min(780px, calc(100dvh - 32px)); max-width:none; max-height:none; overflow-x:hidden; overflow-y:auto; padding:18px; }
.branch-location-content * { box-sizing:border-box; min-width:0; }
.branch-location-toolbar { display:flex; gap:8px; align-items:center; margin-bottom:10px; }
.branch-location-toolbar select { flex:1 1 auto; min-width:180px; }
.branch-location-toolbar button { min-height:38px; padding:8px 12px; border:1px solid #c8d4e7; border-radius:9px; background:#fff; color:#203879; font-weight:850; cursor:pointer; }
.branch-location-workspace { display:grid; grid-template-columns:minmax(560px, 1fr) minmax(300px, 390px); justify-content:center; gap:16px; height:calc(100% - 94px); min-height:560px; }
.branch-location-map { align-self:center; justify-self:center; width:min(100%, 650px); aspect-ratio:1 / 1; height:auto; min-height:0; border:1px solid #d8e0eb; border-radius:12px; overflow:hidden; }
.branch-location-side { display:flex; flex-direction:column; min-width:0; padding:14px; border:1px solid #dde5f0; border-radius:12px; background:#f8fafc; }
.branch-location-form { display:grid; grid-template-columns:1fr; gap:11px; }
.branch-location-form label { display:grid; gap:5px; color:#46546a; font-size:11px; font-weight:850; }
.branch-location-form label span { color:#dc2626; }
.branch-location-form input { width:100%; max-width:100%; min-height:40px; margin:0; }
.branch-location-form input[readonly] { background:#f4f6fa; color:#65738a; }
.branch-location-radius { display:flex; align-items:center; gap:5px; }
.branch-location-radius span { color:#65738a !important; }
.branch-location-actions { display:flex; justify-content:space-between; gap:10px; margin-top:auto; padding-top:18px; }
.branch-location-actions button { min-height:40px; }
.branch-location-actions #deleteBranchLocationButton {
  padding:8px 14px;
  border:1px solid #d84a5f;
  border-radius:9px;
  background:#fff;
  color:#bd2942;
  font-size:11px;
  font-weight:850;
  box-shadow:none;
  cursor:pointer;
}
.branch-location-actions #deleteBranchLocationButton:hover { background:#bd2942; color:#fff; }

@media (min-width:901px) {
  #tuition .tuition-student-toolbar {
    display:flex;
    flex-flow:row nowrap;
    align-items:center;
    gap:8px;
    width:100%;
  }
  #tuition .tuition-student-toolbar > *:not([hidden]):not(.is-hidden) { flex:0 0 auto; }
  #tuition #tuitionSearch { flex:1 1 auto; width:auto; min-width:240px; max-width:none; }
  #tuition #tuitionHistoryMonthFilter { width:145px; }
}

@media (max-width:900px) {
  .branch-location-content { width:calc(100vw - 18px); height:auto; max-height:calc(100dvh - 18px); padding:12px; }
  .branch-location-toolbar { display:grid; grid-template-columns:1fr 1fr; }
  .branch-location-toolbar select { grid-column:1 / -1; width:100%; }
  .branch-location-workspace { grid-template-columns:1fr; height:auto; min-height:0; }
  .branch-location-map { width:min(100%, 560px); height:auto; min-height:260px; }
  .branch-location-side { padding:11px; }
  .branch-location-form { grid-template-columns:1fr 1fr; }
  .branch-location-form label:nth-child(2) { grid-column:1 / -1; }
  .branch-location-actions { position:sticky; bottom:-11px; z-index:500; margin:12px -11px -11px; padding:10px 11px; background:#fff; border-top:1px solid #e4e9f1; }
}

/* Tổng hợp chốt công và ngày làm nhân sự */
.staff-workday-summary-header { align-items:center; }
.staff-workday-summary-header label { display:flex; align-items:center; gap:8px; margin:0; color:#46546a; font-size:11px; font-weight:850; }
.staff-workday-summary-header input { width:145px; min-height:36px; margin:0; padding:6px 8px; }
.staff-workday-legend { display:flex; justify-content:flex-end; flex-wrap:wrap; gap:7px; margin:-4px 0 9px; }
.staff-workday-legend span { padding:5px 8px; border-radius:999px; font-size:10px; font-weight:850; }
.staff-workday-legend .is-checkin,.staff-workday-summary-table span.is-checkin { background:#dcfce7; color:#15803d; }
.staff-workday-legend .is-closing,.staff-workday-summary-table span.is-closing { background:#dcfce7; color:#15803d; }
.staff-workday-legend .is-leave,.staff-workday-summary-table span.is-leave { background:#fef3c7; color:#a16207; }
.staff-workday-summary-wrap { width:100%; max-height:calc(100dvh - 245px); overflow-y:auto; overflow-x:hidden; border:1px solid #dbe3ef; border-radius:12px; background:#fff; }
.staff-workday-summary-table { width:100%; table-layout:fixed; border-collapse:separate; border-spacing:0; }
.staff-workday-summary-table th,.staff-workday-summary-table td { box-sizing:border-box; width:auto; height:34px; padding:3px 1px; border-right:1px solid #edf0f5; border-bottom:1px solid #edf0f5; text-align:center; font-size:8.5px; overflow:hidden; }
.staff-workday-summary-table th { position:sticky; top:0; z-index:3; background:#203879; color:#fff; font-weight:850; }
.staff-workday-summary-table th:first-child,.staff-workday-summary-table td:first-child { width:150px; padding:6px 8px; text-align:left; }
.staff-workday-summary-table td:first-child { position:sticky; left:0; z-index:1; background:#fff; }
.staff-workday-summary-table th:first-child { left:0; z-index:4; }
.staff-workday-summary-table td:first-child b { display:block; color:#203879; font-size:10px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.staff-workday-summary-table td:first-child small { display:block; margin-top:2px; color:#7b8798; font-size:8px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.staff-workday-summary-table td.is-weekend { background:#faf7f2; }
.staff-workday-summary-table td > span { display:inline-flex; align-items:center; justify-content:center; width:15px; height:15px; margin:1px; border-radius:4px; font-size:8px; font-weight:900; }
.staff-workday-summary-table tbody tr:hover td { background:#f7f9fe; }

@media(max-width:700px) {
  .staff-workday-summary-header { align-items:flex-start; }
  .staff-workday-summary-header input { width:125px; }
  .staff-workday-summary-wrap { max-height:none; overflow-x:hidden; overflow-y:visible; }
  .staff-workday-summary-table { width:100%; min-width:0; }
  .staff-workday-summary-table th,.staff-workday-summary-table td { height:29px; padding:2px 0; font-size:5.5px; }
  .staff-workday-summary-table th:first-child,.staff-workday-summary-table td:first-child { width:76px; padding:4px; }
  .staff-workday-summary-table td:first-child b { font-size:7px; }
  .staff-workday-summary-table td:first-child small { font-size:5.5px; }
  .staff-workday-summary-table td > span { width:9px; height:9px; margin:0; border-radius:2px; font-size:5px; }
}

/* Mobile filters: chỉ hiện đúng điều khiển của tab đang chọn và giữ trên một dòng. */
@media (max-width:900px) {
  #carelog .carelog-filter-toolbar .is-hidden,
  #carelog .carelog-filter-toolbar [hidden],
  #tuition .tuition-student-toolbar .is-hidden,
  #tuition .tuition-student-toolbar [hidden],
  #tuitionStatusFilter[hidden],
  #carelogTypeFilter.is-hidden,
  #carelogCompletedAudienceFilter.is-hidden,
  #carelogMonthFilter.is-hidden,
  #tuitionHistoryMonthFilter.is-hidden { display:none !important; }

  #carelog .carelog-filter-toolbar,
  #tuition .tuition-student-toolbar {
    display:flex !important;
    flex-flow:row nowrap !important;
    align-items:center !important;
    width:100% !important;
    gap:4px !important;
    overflow-x:hidden !important;
    padding-bottom:2px;
  }
  #carelog .carelog-filter-toolbar select:not(.is-hidden),
  #carelog .carelog-filter-toolbar input:not(.is-hidden),
  #tuition .tuition-student-toolbar select:not(.is-hidden),
  #tuition .tuition-student-toolbar input:not(.is-hidden) {
    display:block !important;
    flex:0 0 auto !important;
    width:auto !important;
    min-width:96px !important;
    max-width:150px !important;
    font-size:9px !important;
  }
  #carelogSearch,
  #tuitionSearch { flex:1 0 125px !important; max-width:none !important; }
  #carelogMonthFilter,
  #tuitionHistoryMonthFilter { flex-basis:118px !important; }
  #carelog .carelog-filter-toolbar select:not(.is-hidden) { flex-basis:128px !important; }
  #tuition .tuition-history-actions:not([hidden]),
  #tuition .tuition-history-actions:not([hidden]) button { flex:0 0 auto !important; width:auto !important; }
}

.dashboard-branch-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 20px;
}

.branch-header-left {
  flex: 1;
  min-width: 0;
}

.eyebrow {
  margin: 0 0 6px;
  color: var(--accent);
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .5px;
}

.branch-address {
  margin: 4px 0 10px;
  font-size: 14px;
  color: var(--muted);
  font-weight: 500;
  line-height: 1.5;
}

.branch-address::before {
  content: "📍 ";
}

.branch-header-meta {
  display:flex;
  width:max-content;
  max-width:100%;
  align-items:baseline;
  justify-content:flex-start;
  gap:14px;
  margin-top:2px;
}
.branch-header-meta .branch-address,
.branch-header-meta .branch-student-total {
  margin:0;
  line-height:1.5;
}
.branch-student-total { flex:0 0 auto; white-space:nowrap; }
.branch-student-total .inline-total { vertical-align:baseline; }

.inline-total,
#branchTotalStudents {
  color: var(--accent);
  font-size: 20px;
  font-weight: 900;
}

.dashboard-action-tabs {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
  width: auto;
  flex-shrink: 0;
  margin: 0;
}

.dashboard-action-tabs .primary-btn {
  min-width: 160px;
  height: 42px;
  padding: 0 20px;
  border-radius: 10px;
  background: #fff;
  color: var(--primary);
  border: 1px solid #dfe3eb;
  font-size: 14px;
  font-weight: 800;
  box-shadow: none;
  white-space: nowrap;
}

.dashboard-action-tabs .primary-btn.active,
.dashboard-action-tabs .primary-btn:hover {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.dashboard-action-dropdown {
  position: relative;
}

.dashboard-action-trigger {
  min-width: 138px;
  height: 42px;
  padding: 0 14px 0 17px;
  border: 1px solid #dfe3eb;
  border-radius: 10px;
  background: #fff;
  color: var(--primary);
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.dashboard-action-trigger:hover,
.dashboard-action-trigger[aria-expanded="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.dashboard-action-trigger:focus-visible {
  outline: 3px solid rgba(195, 37, 70, .2);
  outline-offset: 2px;
}

.dashboard-action-chevron {
  font-size: 17px;
  line-height: 1;
  transition: transform .18s ease;
}

.dashboard-action-trigger[aria-expanded="true"] .dashboard-action-chevron {
  transform: rotate(180deg);
}

.dashboard-action-link {
  justify-content: center;
  min-width: 150px;
}

.dashboard-action-menu {
  position: absolute;
  top: calc(100% + 7px);
  right: 0;
  z-index: 2000;
  display: none;
  min-width: 220px;
  padding: 6px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 18px 45px rgba(15, 23, 42, .16);
}

.dashboard-action-menu.show {
  display: block;
}

.dashboard-action-menu button {
  display: block;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #334155;
  font-size: 13px;
  font-weight: 800;
  text-align: left;
  cursor: pointer;
}

.dashboard-action-menu button:hover {
  background: #fff1f3;
  color: var(--accent);
}

.dashboard-section-panel,
.classes-summary-panel {
  display: none;
  background: #fff;
  border-radius: 16px;
  padding: 18px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .04);
  margin-bottom: 22px;
}

.dashboard-section-panel.active {
  display: block;
}

.classes-summary-panel {
  display: none;
}

.classes-summary-panel.active {
  display: block;
}

.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.panel-header.strong {
  align-items: flex-start;
  margin-bottom: 16px;
}

.panel-header.strong h2,
.dashboard-panel h3,
.status-panel-title {
  margin: 0;
  color: var(--primary);
  font-size: 20px;
  font-weight: 800;
}

.panel-header button {
  border: none;
  background: #f1f3f8;
  color: var(--primary);
  padding: 6px 10px;
  border-radius: 9px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.grid,
.dashboard-kpi {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}

.card,
.kpi-card,
.dashboard-panel {
  background: #fff;
  border-radius: 16px;
  padding: 20px;
  box-shadow: var(--shadow);
}

.card b,
.kpi-card b {
  display: block;
  font-size: 28px;
  color: var(--accent);
  margin-bottom: 8px;
}

.card span,
.kpi-card span {
  color: var(--muted);
}

.dashboard-main-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.dashboard-panel {
  min-width: 0;
  min-height: 190px;
  max-height: 330px;
  overflow: auto;
  padding: 14px;
}

.chart-panel {
  min-height: 260px;
  max-height: 300px;
}

.chart-panel canvas {
  max-height: 220px;
}

.quick-panel {
  max-height: none;
}

.quick-actions {
  display: grid;
  gap: 8px;
}

.quick-actions button {
  border: none;
  background: #f1f3f8;
  color: var(--primary);
  padding: 10px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  text-align: left;
}

.quick-actions button:hover {
  background: var(--primary);
  color: #fff;
}

.dashboard-system-status {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 8px;
  font-size: 12px;
  color: var(--muted);
}

.dashboard-system-status span {
  background: #f1f3f8;
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 700;
}

/* =========================
TABLES
========================= */
.table-container {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: visible;
  background: #fff;
  border-radius: 10px;
  box-shadow: var(--shadow);
}

.crm-table {
  width: 100%;
  min-width: 900px;
  border-collapse: separate;
  border-spacing: 0;
}

.crm-table thead {
  background: var(--primary);
  color: #fff;
}

.crm-table th,
.crm-table td {
  padding: 14px;
  border-bottom: 1px solid #eee;
  vertical-align: middle;
  font-size: 14px;
  line-height: 1.5;
  text-align: left;
}

.crm-table th {
  font-weight: 800;
  white-space: nowrap;
  cursor: default;
}

.crm-table th:hover {
  background: var(--primary) !important;
  color: #fff !important;
}

.student-name-cell {
  font-weight: 800;
  color: var(--primary);
}

.dashboard-table-container,
.mini-table-container {
  box-shadow: none;
  border-radius: 12px;
}

.dashboard-table,
.mini-dashboard-table {
  min-width: 900px;
}

.dashboard-table th,
.dashboard-table td,
.mini-dashboard-table th,
.mini-dashboard-table td {
  font-size: 13px;
}

.note-td {
  max-width: 240px;
  white-space: nowrap;
}

.note-cell {
  display: inline-block;
  max-width: 160px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}

.note-view-btn {
  border: none;
  background: #f1f3f8;
  color: var(--primary);
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  margin-left: 6px;
}

.note-view-btn:hover {
  background: var(--primary);
  color: #fff;
}

.crm-actions,
.dashboard-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
}

.dashboard-actions {
  min-width: 0;
}

.crm-actions button,
.crm-actions select {
  height: 32px;
  border: none;
  border-radius: 7px;
  background: #f3f4f8;
  color: var(--primary);
  padding: 0 10px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.crm-actions button:hover {
  background: var(--accent);
  color: #fff;
}

.crm-actions select,
.dashboard-actions select {
  width: auto;
  min-width: 140px;
  margin: 0;
  border: 1px solid #e5e7eb;
}

.class-summary-row {
  cursor: pointer;
}

.class-summary-row:hover {
  background: #f8f9fd;
}

.class-unit-plan {
  color: var(--primary);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

.class-unit-plan.ended {
  color: var(--danger);
  font-weight: 800;
}

.class-unit-plan.empty {
  color: var(--muted);
}

/* Bảng học sinh tại trang cơ sở */
#branchStudentsPanel .crm-table {
  width: 100%;
  min-width: 100%;
  table-layout: fixed;
}

#branchStudentsPanel .crm-table th,
#branchStudentsPanel .crm-table td {
  text-align: left;
  vertical-align: middle;
  word-break: break-word;
}

#branchStudentsPanel .crm-table th:nth-child(1),
#branchStudentsPanel .crm-table td:nth-child(1) {
  width: 12%;
}

#branchStudentsPanel .crm-table th:nth-child(2),
#branchStudentsPanel .crm-table td:nth-child(2) {
  width: 18%;
}

#branchStudentsPanel .crm-table th:nth-child(3),
#branchStudentsPanel .crm-table td:nth-child(3) {
  width: 14%;
}

#branchStudentsPanel .crm-table th:nth-child(4),
#branchStudentsPanel .crm-table td:nth-child(4) {
  width: 18%;
}

#branchStudentsPanel .crm-table th:nth-child(5),
#branchStudentsPanel .crm-table td:nth-child(5) {
  width: 12%;
}

#branchStudentsPanel .crm-table th:nth-child(6),
#branchStudentsPanel .crm-table td:nth-child(6) {
  width: 12%;
}

#branchStudentsPanel .crm-table th:nth-child(7),
#branchStudentsPanel .crm-table td:nth-child(7) {
  width: 14%;
}

/* =========================
STATUS + TABS
========================= */
.status,
.status-badge,
.class-status-badge,
.class-summary-badge,
.enrollment-status {
  display: inline;
  padding: 0;
  border: none;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
}

.status-badge.active,
.active-status,
.class-status-badge.active,
.class-summary-badge.ok,
.enrollment-status.active {
  color: var(--success);
}

.status-badge.waiting {
  color: var(--accent);
}

.status-badge.pause,
.hold-status,
.class-status-badge.pause,
.class-summary-badge.warning,
.enrollment-status.waiting {
  color: var(--warning);
}

.status-badge.stop {
  color: var(--gray);
}

.stop-status,
.class-status-badge.closed,
.class-summary-badge.danger {
  color: var(--danger);
}

.enrollment-status.completed {
  color: #666;
}

.student-status-tabs,
.class-status-tabs {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  margin: 12px 0 18px;
}

.student-status-tabs button,
.class-status-tabs button {
  display: flex;
  align-items: center;
  gap: 8px;
  border: none;
  background: none;
  padding: 0;
  color: #999;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
}

.student-status-tabs button:hover,
.class-status-tabs button:hover {
  opacity: .8;
}

.student-status-tabs button span,
.class-status-tabs button span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  min-width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #e4e6ea;
  color: #3d3d3d;
  font-size: 14px;
  font-weight: 900;
}

.student-status-tabs button.active-green,
.class-status-tabs button.active-green {
  color: var(--success);
}

.student-status-tabs button.active-red,
.class-status-tabs button.active-red {
  color: var(--accent);
}

.student-status-tabs button.active-yellow,
.class-status-tabs button.active-yellow {
  color: var(--warning);
}

.student-status-tabs button.active-gray {
  color: var(--gray);
}

.class-status-tabs button.active-all {
  color: var(--primary);
}

.student-status-tabs button.active-green span {
  background: var(--success);
  color: #fff;
}

.student-status-tabs button.active-red span {
  background: var(--accent);
  color: #fff;
}

.student-status-tabs button.active-yellow span {
  background: var(--warning);
  color: #fff;
}

.student-status-tabs button.active-gray span {
  background: var(--gray);
  color: #fff;
}

.class-status-tabs button.active-green span {
  background: var(--success);
  color: #fff;
}

.class-status-tabs button.active-yellow span {
  background: var(--warning);
  color: #fff;
}

.class-status-tabs button.active-red span {
  background: var(--accent);
  color: #fff;
}

.class-status-tabs button.active-all span {
  background: var(--primary);
  color: #fff;
}

.status-panel-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  font-size: 16px;
  font-weight: 900;
}

.status-panel-title span {
  background: #fff;
  border-radius: 999px;
  padding: 4px 10px;
}

.active-status-title {
  background: #e8f7ed;
  color: var(--success);
}

.waiting-status-title {
  background: #fde8e8;
  color: var(--accent);
}

.hold-status-title {
  background: #fff4df;
  color: #b76b00;
}

.stop-status-title {
  background: #edf0f5;
  color: #666;
}

/* =========================
SEARCH BOX + CLASS PAGE
========================= */
.class-toolbar {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 16px;
}

.search-box {
  width: 320px;
  height: 42px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  background: #fff;
  border: 1px solid #e4e8f0;
  border-radius: 12px;
  transition: .2s;
}

.search-box:hover,
.search-box:focus-within {
  border-color: var(--accent);
}

.search-box:focus-within {
  box-shadow: 0 0 0 3px rgba(195, 37, 70, .08);
}

.search-box span {
  color: #999;
  font-size: 14px;
}

.search-box input {
  flex: 1;
  margin: 0;
  padding: 0;
  border: none;
  outline: none;
  background: transparent;
  font-size: 13px;
  font-weight: 500;
}

#classes,
#classesList,
#classesList .table-container,
#classesList table {
  width: 100%;
}

/* =========================
MODALS
========================= */
.modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .45);
  justify-content: center;
  align-items: center;
  padding: 20px;
  z-index: 30000;
}

.modal-content {
  position: relative;
  z-index: 30001;
}

.modal-content {
  width: 100%;
  max-width: 560px;
  max-height: 90vh;
  overflow-y: auto;
  background: #fff;
  border-radius: 22px;
  padding: 24px;
}

.modal-content.large {
  max-width: 950px;
}

#profileModal .modal-content.large {
  max-width: 760px;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.modal-header h2 {
  margin: 0;
  color: var(--primary);
}

.modal-header button {
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  background: #f1f1f1;
  font-size: 22px;
  cursor: pointer;
}

/* Chuẩn mặc định cho nút đóng và nút Huỷ của các popup. */
.modal-content > .modal-header {
  position: relative;
  padding-right: 46px;
}

.modal-content > .modal-header > button:last-child {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  display: inline-grid !important;
  width: 32px !important;
  height: 32px !important;
  margin: 0 !important;
  padding: 0 !important;
  place-items: center;
  border: 1px solid #d8e0eb !important;
  border-radius: 8px !important;
  background: #fff !important;
  color: #64748b !important;
  font-size: 20px !important;
  line-height: 1 !important;
  box-shadow: none !important;
}

.schedule-modal-actions .secondary-btn,
.schedule-modal-actions .unit-edit-cancel-btn,
.schedule-modal-actions .carelog-cancel-btn {
  min-height: 36px;
  padding: 8px 16px !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 8px !important;
  background: #f8fafc !important;
  color: #526176 !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  box-shadow: none !important;
  transform: none !important;
}

.schedule-modal-actions .secondary-btn:hover,
.schedule-modal-actions .unit-edit-cancel-btn:hover,
.schedule-modal-actions .carelog-cancel-btn:hover {
  border-color: #94a3b8 !important;
  background: #e9eef5 !important;
  color: #334155 !important;
  transform: none !important;
}

.note-modal-content {
  max-width: 100%;
  max-height: 60vh;
  overflow-y: auto;
  padding: 16px;
  background: var(--soft);
  border-radius: 14px;
  color: #333;
  line-height: 1.7;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.confirm-modal {
  position: fixed;
  inset: 0;
  display: none;
  justify-content: center;
  align-items: center;
  padding: 20px;
  background: rgba(15, 23, 42, .58);
  backdrop-filter: blur(5px);
  z-index: 99999;
}

.confirm-box {
  width: 100%;
  max-width: 440px;
  max-height: 80vh;
  overflow-y: auto;
  background: #fff;
  border: 1px solid rgba(255, 255, 255, .75);
  border-radius: 22px;
  padding: 30px;
  text-align: center;
  box-shadow: 0 28px 70px rgba(15, 23, 42, .28);
}

.confirm-icon {
  width: 72px;
  height: 72px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: #fff1f2;
  color: #be123c;
  font-size: 40px;
  font-weight: 400;
}

.confirm-box h2 {
  margin: 0 0 12px;
  color: #172554;
  font-size: 24px;
}

.confirm-box p {
  margin: 0;
  line-height: 1.7;
  color: #64748b;
  white-space: pre-line;
}

.confirm-actions {
  display: flex;
  gap: 12px;
  margin-top: 26px;
}

.confirm-actions button {
  flex: 1;
  border: none;
  border-radius: 12px;
  padding: 13px;
  font-weight: 700;
  cursor: pointer;
  font-size: 14px;
}

.confirm-cancel {
  background: #f1f5f9;
  color: #334155;
}

.confirm-ok {
  background: #be123c;
  color: #fff;
  box-shadow: 0 8px 18px rgba(190, 18, 60, .22);
}

.confirm-cancel:hover { background: #e2e8f0; }
.confirm-box.is-danger .confirm-icon { background: #fff1f2; color: #be123c; }

.confirm-ok:hover {
  opacity: .92;
}

.enrollment-choice-box button:disabled{
  cursor:not-allowed;
  background:#e2e8f0;
  color:#64748b;
  box-shadow:none;
  opacity:1;
}

/* =========================
TOAST
========================= */
.toast {
  position: fixed;
  right: 24px;
  bottom: 24px;
  display: none;
  padding: 14px 18px;
  border-radius: 12px;
  background: #e3e8ff;
  color: #000;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .18);
  z-index: 99999;
  font-weight: 700;
}

.toast.show {
  display: block;
}

.toast-success {
  background: #16a34a;
  color: #fff;
}

.toast-warning {
  background: #eab308;
  color: #fff;
}

.toast-error {
  background: #dc2626;
  color: #fff;
}

.toast-info {
  background: #2563eb;
  color: #fff;
}

/* =========================
PROFILE / PARENT INFO POPUP
========================= */
.profile-head {
  background: #f6f7fb;
  border-radius: 16px;
  padding: 18px;
  margin-bottom: 18px;
}

.profile-head h3 {
  margin: 0;
  color: var(--primary);
}

.profile-head span {
  color: var(--accent);
}

.profile-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}

.profile-table {
  width: 100%;
  border-collapse: collapse;
}

.profile-table td {
  padding: 10px 12px;
  border-bottom: 1px solid #eee;
}

.profile-table td:first-child {
  width: 180px;
  font-weight: 700;
  color: #64748b;
}

.student-info-summary,
.student-info-card {
  margin-bottom: 12px;
  padding: 8px 12px;
  background: #f8fafc;
  border-radius: 8px;
  font-size: 13px;
  color: #64748b;
}

.student-info-card {
  border-left: 3px solid #dbeafe;
}

.student-info-card h3 {
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 600;
  color: #64748b;
}

.student-info-card .profile-table td {
  padding: 4px 8px;
  font-size: 13px;
}

.student-info-card .profile-table td:first-child {
  width: 120px;
}

.student-profile-card,
.parent-info-card {
  padding: 14px 16px;
  background: #fff;
  border: 1px solid #eef2f7;
  border-radius: 14px;
}

.parent-info-card {
  margin-bottom: 18px;
}

.parent-info-card h3 {
  margin: 0 0 12px;
  color: var(--primary);
  font-size: 16px;
  font-weight: 800;
}

.student-profile-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid #eef2f7;
}

.student-profile-head h3 {
  margin: 0;
  color: var(--primary);
  font-size: 16px;
  font-weight: 800;
}

.student-profile-head p {
  margin: 4px 0 0;
  color: #64748b;
  font-size: 13px;
}

.student-profile-grid,
.parent-info-grid {
  display: grid;
  column-gap: 16px;
  row-gap: 10px;
  align-items: start;
}

.student-profile-grid {
  grid-template-columns: 200px 1fr;
}

.parent-info-grid {
  grid-template-columns: 220px 1fr;
}

.student-profile-grid .info-label,
.parent-info-grid .info-label {
  color: #64748b;
  font-size: 13px;
  font-weight: 700;
  white-space: normal;
  line-height: 1.35;
}

.student-profile-grid .info-value,
.parent-info-grid .info-value {
  min-width: 0;
  color: #111827;
  font-size: 14px;
  font-weight: 600;
  word-break: break-word;
}

.parent-info-grid .note-wrap,
.student-profile-grid .note-wrap {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  line-height: 1.5;
  font-weight: 500;
}

.student-info-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.4;
}

.student-info-cell b {
  color: var(--primary);
  font-size: 13px;
}

.student-info-cell small {
  color: #777;
  font-size: 12px;
}

/* =========================
DROPDOWNS
========================= */
.info-action-dropdown {
  position: relative;
  display: inline-block;
}

.status-dropdown {
  position: relative;
  display: inline-block;
}

.info-action-btn {
  height: 32px;
  padding: 0 12px;
  border: none;
  border-radius: 7px;
  background: #f3f4f8;
  color: var(--primary);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.info-action-btn:hover {
  background: var(--accent);
  color: #fff;
}

.info-dropdown-menu {
  display: none;
  position: absolute;
  left: 0;
  top: calc(100% + 6px);
  min-width: 190px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .12);
  overflow: hidden;
  z-index: 99999;
}

.status-dropdown-menu {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 190px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .12);
  overflow: hidden;
  z-index: 9999;
}

.status-dropdown-menu {
  right: 0;
  left: auto;
  min-width: 140px;
}

.info-dropdown-menu.show {
  display: block;
}

.status-dropdown-menu.show {
  display: block;
}

.info-dropdown-menu button,
.status-dropdown-menu button {
  display: block;
  width: 100%;
  height: auto;
  padding: 10px 12px;
  border: none;
  border-radius: 0;
  background: #fff;
  color: var(--primary);
  font-size: 13px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
}

.info-dropdown-menu button:hover,
.status-dropdown-menu button:hover {
  background: #f8fafc;
  color: var(--accent);
}

.info-dropdown-menu {
  top: calc(100% + 6px);
}

.info-dropdown-menu.drop-up {
  top: auto;
  bottom: calc(100% + 6px);
}

/* =========================
ENROLLMENT / BULK / RESTORE
========================= */
.selected-students-box {
  margin-top: 16px;
  background: #f8f9fd;
  border-radius: 14px;
  padding: 14px;
}

.bulk-student-row {
  display: grid;
  grid-template-columns: 140px 1fr auto;
  gap: 10px;
  align-items: center;
  background: #fff;
  border: 1px solid #edf0f5;
  padding: 10px;
  border-radius: 10px;
  margin-bottom: 8px;
}

.bulk-student-row b {
  color: var(--primary);
}

.bulk-student-row button {
  border: none;
  background: #fde8e8;
  color: var(--accent);
  padding: 7px 10px;
  border-radius: 8px;
  font-weight: 700;
  cursor: pointer;
}

.restore-confirm-content {
  text-align: left;
  line-height: 1.35;
  font-size: 14px;
}

.restore-student-line {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 10px 12px;
  background: #f8fafc;
  border-radius: 10px;
  margin-bottom: 8px;
}

.restore-student-line b {
  color: var(--primary);
}

.restore-student-line span {
  color: #64748b;
  font-weight: 700;
}

.restore-student-line em {
  font-style: normal;
  color: #16a34a;
  font-weight: 800;
}

.restore-warning-line {
  padding: 8px 10px;
  background: #ecfdf3;
  border-left: 4px solid #16a34a;
  border-radius: 8px;
  margin-bottom: 8px;
  color: #166534;
}

.restore-note-line {
  font-size: 12.5px;
  color: #64748b;
  margin-bottom: 8px;
}

.restore-question-line {
  font-weight: 800;
  color: #222;
}

/* =========================
PAGINATION + EMPTY
========================= */
.empty {
  background: #fff;
  padding: 20px;
  border-radius: 14px;
  color: #777;
}

.empty.small {
  padding: 12px;
  margin-bottom: 10px;
}

.pagination {
  margin-top: 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.pagination span {
  color: #666;
}

.pagination button {
  height: 32px;
  min-width: 32px;
  border: none;
  background: #fff;
  color: var(--primary);
  padding: 0 12px;
  margin-left: 4px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
}

.pagination button:hover,
.pagination .active-page {
  background: var(--accent);
  color: #fff;
}

/* =========================
RESPONSIVE
========================= */
@media(max-width:1200px) {
  .dashboard-main-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media(max-width:900px) {

  .top-management-bar,
  .dashboard-branch-header,
  .class-detail-header {
    flex-direction: column;
    height: auto;
    align-items: flex-start;
    padding-top: 14px;
    padding-bottom: 14px;
  }

  .brand-title {
    font-size: 18px;
  }

  .top-actions {
    flex-wrap: wrap;
  }

  .top-header-actions {
    width: 100%;
    justify-content: space-between;
    flex-wrap: wrap;
  }

  .auth-session-control {
    margin-left: auto;
  }

  .app.no-sidebar main {
    padding: 18px;
  }

  .dashboard-action-tabs {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .dashboard-action-tabs .primary-btn {
    min-width: 145px;
    flex: 0 0 auto;
  }

  .dashboard-action-dropdown {
    flex: 1 1 170px;
  }

  .dashboard-action-link {
    flex: 1 1 170px;
    width: auto;
  }

  .dashboard-action-trigger {
    width: 100%;
  }

  .dashboard-action-menu {
    left: 0;
    right: auto;
    width: 100%;
  }

  .branch-big-grid {
    grid-template-columns: 1fr;
  }
}

@media(max-width:768px) {
  .app {
    display: block;
  }

  aside {
    width: auto;
    min-width: 0;
  }

  main {
    padding: 18px;
  }

  .page-header {
    display: block;
  }

  .toolbar,
  .parents-toolbar {
    flex-wrap: wrap;
  }

  .toolbar input,
  .toolbar select,
  .parents-toolbar input,
  .parents-toolbar select,
  .search-box {
    width: 100%;
    min-width: 0;
  }

  .profile-grid,
  .dashboard-main-grid {
    grid-template-columns: 1fr;
  }

  .dashboard-panel {
    max-height: none;
  }

  .dashboard-system-status {
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .bulk-student-row {
    grid-template-columns: 1fr;
  }

  .student-profile-grid,
  .parent-info-grid {
    grid-template-columns: 1fr;
  }
}

/* =========================
FIX LAYOUT BẢNG - BẢN DỄ DÙNG
Chỉ bảng được cuộn
Lớp học / Học sinh / Nhân sự / Cơ sở cùng kiểu
========================= */

html,
body {
  height: 100%;
  overflow: hidden;
}

/* Thanh trên cố định */
.top-management-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10000;
  height: 78px;
}

/* Breadcrumb cố định */
.breadcrumb-nav {
  position: fixed;
  top: 78px;
  left: 0;
  right: 0;
  z-index: 9999;
  height: 48px;
}

/* Nội dung nằm dưới thanh trên */
.app.no-sidebar main {
  width: 100%;
  height: 100vh;
  padding: 150px 40px 40px;
  overflow: hidden;
}

/* Mỗi trang không tự cuộn */
.page.active {
  height: calc(100vh - 190px);
  overflow: hidden;
}

/* =========================
TRANG LỚP HỌC + HỌC SINH
========================= */

#classes.page.active,
#students.page.active {
  display: block;
  overflow: hidden;
}

/* Vùng chứa bảng */
#classesList,
#studentsTable {
  display: block;
  overflow: visible;
}

/* Bảng Lớp học: không có card trắng ngoài, ít dữ liệu thì bảng ngắn */
#classesList .table-container {
  width: 100%;
  height: auto !important;
  min-height: 0 !important;
  max-height: calc(100vh - 390px);
  overflow: auto;
  margin-bottom: 0;
}

/* Bảng Học sinh: giảm chiều cao để không bị che dòng cuối */
#studentsTable .table-container {
  width: 100%;
  height: auto !important;
  min-height: 0 !important;
  max-height: calc(100vh - 430px);
  overflow: auto;
  margin-bottom: 0;
  padding-bottom: 12px;
}

/* Phân trang không bị che */
#studentsTable .pagination,
#classesList .pagination {
  margin-top: 12px;
  padding-bottom: 8px;
}

/* Khi không có dữ liệu thì không kéo khung bảng dài xuống */
#classesList .empty,
#studentsTable .empty {
  display: inline-block;
  width: auto;
  min-width: 280px;
}

/* =========================
TRANG CƠ SỞ
========================= */

#dashboard.page.active {
  height: calc(100vh - 190px);
  overflow: hidden;
}

#branchDashboardContent {
  height: 100%;
  overflow: hidden;
}

/* Bỏ nền/card trắng bao ngoài bảng Cơ sở */
#branchClassesSummary {
  display: none;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
}

#branchClassesSummary.active {
  display: block;
}

.branch-overview-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.78fr) minmax(300px, 1fr);
  align-items: stretch;
  gap: 14px;
  width: 100%;
  min-height: 0;
}

.branch-home-tabs {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: -8px 0 8px;
}

.branch-home-tabs button {
  min-width: 118px;
  min-height: 36px;
  padding: 7px 14px;
  border: 1px solid #d7deea;
  border-radius: 9px;
  background: #fff;
  color: #46546a;
  font-size: 12.5px;
  font-weight: 800;
  cursor: pointer;
}

.branch-home-tabs button:not(.active):hover {
  border-color: #9aabd1;
  background: #f2f5fc;
  color: var(--primary);
}

.branch-home-tabs button.active {
  border-color: var(--primary);
  background: var(--primary);
  color: #fff;
}

.branch-statistics-panel {
  min-height: 0;
  padding: 2px 0 20px;
  overflow: auto;
}

.branch-statistics-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.branch-statistics-grid article {
  display: flex;
  min-height: 132px;
  flex-direction: column;
  justify-content: space-between;
  padding: 18px;
  border: 1px solid #dfe5ee;
  border-radius: 12px;
  background: #fff;
}

.branch-statistics-grid article span {
  color: #64748b;
  font-size: 13px;
  font-weight: 800;
}

.branch-statistics-grid article strong {
  color: var(--primary);
  font-size: 34px;
  line-height: 1;
}

.branch-statistics-grid article.is-success { background: #f0fbf4; border-color: #bce5ca; }
.branch-statistics-grid article.is-success strong { color: #138a3d; }
.branch-statistics-grid article.is-warning { background: #fff9e9; border-color: #f0d995; }
.branch-statistics-grid article.is-warning strong { color: #b77900; }

.access-control-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 14px;
}

.access-control-header h1 { margin: 0; }
.access-control-header p { margin: 5px 0 0; color: #64748b; font-size: 12px; }
.access-control-table-wrap { height: min(58vh, 610px); max-height: min(58vh, 610px); overflow: auto !important; padding-bottom: 18px; }
.access-control-table { min-width: 1180px; }
.access-control-table thead th { position: sticky; top: 0; z-index: 5; text-align: center; }
.access-control-table thead th:nth-child(1),
.access-control-table thead th:nth-child(2) { text-align: left; }
.access-control-table td { text-align: center; }
.access-control-table td:nth-child(1),
.access-control-table td:nth-child(2) { text-align: left; }
.access-control-table td:nth-child(2) b,
.access-control-table td:nth-child(2) small { display: block; }
.access-control-table td:nth-child(2) small { margin-top: 3px; color: #94a3b8; font-size: 9px; }
.access-control-table input[type="checkbox"] { width: 18px; height: 18px; margin: 0; accent-color: var(--primary); cursor: pointer; }
.access-control-table input[type="checkbox"]:disabled { cursor: not-allowed; opacity: .65; }
.access-group-cell strong { color: var(--primary); font-size: 12px; }
.access-page-group-row th { position: static !important; padding: 8px 12px !important; background: #eef3ff !important; color: var(--primary) !important; text-align: left !important; font-size: 12px; }
.access-page-group-row,
.access-page-group-row th { cursor: default !important; transition: none !important; }
.access-page-group-row:hover,
.access-page-group-row:hover th { background: #eef3ff !important; color: var(--primary) !important; transform: none !important; box-shadow: none !important; }
.special-access-section { margin-top: 16px; }
.special-access-header { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:9px; }
.special-access-header h2 { margin:0; color:var(--primary); font-size:18px; }
.special-access-header p { margin:4px 0 0; color:#64748b; font-size:11px; }
.special-access-table-wrap { height:190px; max-height:190px; overflow:auto !important; }
.special-access-table { min-width:850px; }
.special-access-table thead th { position:sticky; top:0; z-index:4; }
.special-access-table small { display:block; margin-top:3px; color:#94a3b8; }
.special-access-table td:nth-child(3) span { display:inline-block; margin:2px; padding:3px 6px; border-radius:999px; background:#eef3ff; color:var(--primary); font-size:9px; font-weight:800; }
.special-access-table td:last-child { white-space:nowrap; }
.special-access-table button { margin:2px; }
.special-access-modal { z-index:2100000 !important; }
.special-access-modal-content { display:flex; width:min(720px,94vw); max-width:720px; max-height:90vh; overflow:hidden; flex-direction:column; }
.special-access-modal-content>label { display:grid; gap:5px; }
.special-access-permission-list { flex:1 1 auto; min-height:0; max-height:56vh; margin-top:12px; padding:7px; border:1px solid #dfe5ee; border-radius:10px; overflow:auto; }
.special-access-modal-content .modal-footer { position:relative; z-index:3; display:flex; flex:0 0 auto; justify-content:flex-end; gap:8px; margin:10px -2px -2px; padding:10px 2px 2px; background:#fff; }

/* Nút Huỷ mặc định cho các popup hiện tại và popup tạo mới. */
.modal .cancel-btn {
  display:inline-flex;
  min-height:38px;
  align-items:center;
  justify-content:center;
  padding:8px 16px;
  border:1px solid #cbd5e1;
  border-radius:9px;
  background:#fff;
  color:#475569;
  box-shadow:none;
  font-size:12px;
  font-weight:800;
  cursor:pointer;
}
.modal .cancel-btn:hover { border-color:#94a3b8; background:#f1f5f9; color:#1e293b; box-shadow:none; transform:none; }
.special-access-permission-list label { display:flex; align-items:center; gap:10px; padding:8px; border-bottom:1px solid #edf1f6; cursor:pointer; }
.special-access-permission-list label:last-child { border-bottom:0; }
.special-access-permission-list input { width:18px; height:18px; margin:0; accent-color:var(--primary); }
.special-access-permission-list span b,.special-access-permission-list span small { display:block; }
.special-access-permission-list span small { margin-top:2px; color:#94a3b8; font-size:9px; }
.special-access-permission-group { overflow:hidden; margin:0 0 10px; border:1px solid #e1e7f0; border-radius:9px; background:#fff; }
.special-access-permission-group:last-child { margin-bottom:0; }
.special-access-permission-group h3 { position:sticky; top:-7px; z-index:2; margin:0; padding:8px 10px; border-bottom:1px solid #dfe5ee; background:#f2f5fb; color:#203879; font-size:11.5px; font-weight:900; }
.special-access-permission-group > div { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
.special-access-permission-group label { margin:0; border-bottom:1px solid #edf1f6; }
.special-access-permission-group label:nth-child(odd) { border-right:1px solid #edf1f6; }
@media(max-width:700px){.special-access-permission-group > div{grid-template-columns:1fr}.special-access-permission-group label:nth-child(odd){border-right:0}}
.stopped-staff-access-block { position:fixed; inset:0; z-index:2147483647; display:grid; place-items:center; padding:24px; background:#f4f6f8; }
.stopped-staff-access-block>div { width:min(520px,94vw); padding:30px; border:1px solid #f0c9cf; border-radius:15px; background:#fff; text-align:center; }
.stopped-staff-access-block h2 { margin:0 0 10px; color:#c32546; }
.stopped-staff-access-block p { color:#334155; }
.stopped-staff-access-block small { color:#64748b; }

/* Trang phân quyền cuộn toàn trang để luôn nhìn thấy bảng quyền đặc biệt. */
html.access-control-page-open,
body.access-control-page-open {
  height: auto !important;
  min-height: 100% !important;
  overflow-y: auto !important;
}

body.access-control-page-open .app.no-sidebar,
body.access-control-page-open .app.no-sidebar main {
  height: auto !important;
  min-height: 100vh !important;
  overflow: visible !important;
}

body.access-control-page-open #accessControl.page.active {
  height: auto !important;
  min-height: calc(100vh - 190px) !important;
  padding-bottom: 50px;
  overflow: visible !important;
}

@media (max-width: 900px) {
  /* Chuẩn cỡ chữ chung cho nội dung trạng thái trong mọi bảng trên điện thoại. */
  table tbody .status,
  table tbody .status-badge,
  table tbody .class-status-badge,
  table tbody .class-summary-badge,
  table tbody .tuition-notice-status,
  table tbody .tuition-workflow-status,
  table tbody .tuition-confirmation-status,
  table tbody .carelog-status,
  table tbody .video-workflow-status,
  table tbody .attendance-class-status,
  table tbody .staff-action-readonly,
  table tbody [class*="status-badge"] {
    font-size: 8.5px !important;
    line-height: 1.15 !important;
    padding: 4px 6px !important;
    min-height: 0 !important;
    white-space: nowrap !important;
  }

  table tbody .tuition-confirmation-status small {
    font-size: 7.5px !important;
  }

  .branch-home-tabs {
    gap: 5px;
    overflow-x: auto;
  }

  .branch-home-tabs button {
    min-width: 96px;
    min-height: 32px;
    padding: 6px 9px;
    font-size: 10px;
    white-space: nowrap;
  }

  .branch-statistics-panel { overflow: visible; }
  .branch-statistics-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .branch-statistics-grid article { min-height: 100px; padding: 12px; }
  .branch-statistics-grid article span { font-size: 10px; }
  .branch-statistics-grid article strong { font-size: 26px; }
  .access-control-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: row;
    gap: 8px;
  }
  .access-control-header > div { min-width: 0; }
  .access-control-header .primary-btn { flex: 0 0 auto; align-self: center; padding: 6px 8px; font-size: 9px; white-space: nowrap; }
  .access-control-table-wrap { height:auto; max-height:none; overflow:auto; padding-bottom:12px; }
  .access-control-table { min-width: 1050px !important; }
  .special-access-header { display:flex; align-items:center; justify-content:space-between; flex-direction:row; gap:8px; }
  .special-access-header > div { min-width:0; }
  .special-access-header .primary-btn { flex:0 0 auto; align-self:center; padding:6px 8px; font-size:9px; white-space:nowrap; }
  .special-access-table-wrap { height:170px; max-height:170px; }
  .access-control-header h1 { font-size:20px; }
  .access-control-header p,.special-access-header p { font-size:10px; }
  .access-control-table th,.access-control-table td,
  .special-access-table th,.special-access-table td { padding:8px !important; font-size:9.5px !important; }
  .special-access-modal-content { width:94vw; max-height:88vh; }
  .special-access-permission-list { max-height:52vh; }
}

.branch-overview-sidebar {
  display: grid;
  grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px;
  height: calc(100vh - 360px);
  min-width: 0;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.branch-mini-panel {
  min-height: 0;
  overflow: hidden;
  border: 1px solid #dfe5ee;
  border-radius: 12px;
  background: #fff;
}

.branch-mini-panel h3 {
  margin: 0;
  padding: 10px 12px;
  border-bottom: 1px solid #dfe5ee;
  background: #f5f7fb;
  color: var(--primary);
  font-size: 14px;
  font-weight: 900;
}

.branch-mini-table-wrap {
  height: calc(100% - 39px);
  max-height: none;
  overflow: auto;
}

.branch-timekeeping-panel {
  display: flex;
  flex-direction: column;
  overflow: visible;
}

.branch-timekeeping-layout {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  flex: 1 1 auto;
  min-height: 0;
}

.branch-closing-list-panel,
.branch-closing-calendar-panel {
  min-width: 0;
  min-height: 0;
}

.branch-closing-list-panel {
  border-right: 1px solid #e4e9f1;
}

.branch-closing-list-panel h4 {
  margin: 0;
  padding: 7px 8px;
  border-bottom: 1px solid #edf1f6;
  color: #526178;
  font-size: 10px;
  font-weight: 900;
}

.branch-closing-list-body {
  height: calc(100% - 30px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.branch-closing-list-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 7px 8px;
  border-bottom: 1px solid #edf1f6;
  cursor: help;
}

.branch-closing-list-row:hover { background: #f0fbf4; }
.branch-closing-list-row strong { color: #1f315d; font-size: 10.5px; }
.branch-closing-list-row small { color: #718096; font-size: 8.5px; line-height: 1.3; }
.branch-closing-list-row.is-workday-closing { border-left:3px solid #22a35a; background:#effbf3; }
.branch-closing-list-row.is-workday-closing strong,
.branch-closing-list-row.is-workday-closing small { color:#15803d; }

.branch-closing-calendar-panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 6px;
  overflow: visible;
}

.branch-calendar-toolbar {
  display: grid;
  grid-template-columns: 25px minmax(0, 1fr) 25px;
  align-items: center;
  gap: 3px;
  margin-bottom: 5px;
}

.branch-calendar-toolbar strong {
  color: #1f315d;
  text-align: center;
  font-size: 9.5px;
  white-space: nowrap;
}

.branch-calendar-toolbar button {
  width: 25px;
  height: 25px;
  padding: 0;
  border: 1px solid #d7dfeb;
  border-radius: 7px;
  background: #fff;
  color: var(--primary);
  font-size: 15px;
  font-weight: 900;
  cursor: pointer;
}

.branch-calendar-toolbar button:hover { background: var(--primary); color: #fff; }

.branch-calendar-weekdays,
.branch-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 2px;
}

.branch-calendar-grid {
  grid-template-rows: repeat(6, minmax(15px, 1fr));
  flex: 1 1 auto;
  min-height: 0;
}

.branch-calendar-weekdays span {
  padding: 2px 0;
  color: #7b8798;
  text-align: center;
  font-size: 7px;
  font-weight: 900;
}

.branch-calendar-day {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 15px;
  border-radius: 5px;
  color: #5d6a7e;
  font-size: 8px;
  font-weight: 800;
}

.branch-calendar-day.has-closing {
  background: #dff6e7;
  color: #087a3c;
  cursor: help;
}

.branch-calendar-day.has-closing:hover { background: #24a35a; color: #fff; }

.branch-calendar-day.is-today {
  border: 1px solid #203879;
  background-clip: padding-box;
}

.branch-calendar-day.is-today:not(.has-closing) { background: transparent; }

.branch-calendar-tooltip {
  position: absolute;
  right: -7px;
  bottom: calc(100% + 7px);
  z-index: 60;
  display: none;
  width: 230px;
  max-height: 180px;
  overflow: auto;
  padding: 9px 10px;
  border: 1px solid #cfe5d7;
  border-radius: 9px;
  background: #fff;
  color: #364152;
  box-shadow: 0 10px 28px rgba(25, 45, 75, .16);
  text-align: left;
  font-size: 9px;
  font-weight: 600;
  line-height: 1.45;
}

.branch-calendar-tooltip b,
.branch-calendar-tooltip span { display: block; }
.branch-calendar-tooltip b { margin-bottom: 4px; color: #168344; font-size: 9.5px; }
.branch-calendar-day.has-closing:hover .branch-calendar-tooltip { display: block; }

@media (max-width: 520px) {
  .branch-timekeeping-layout { grid-template-columns: 1fr; }
  .branch-closing-list-panel { max-height: 160px; border-right: 0; border-bottom: 1px solid #e4e9f1; }
  .branch-closing-calendar-panel { min-height: 205px; }
  .branch-calendar-grid { grid-template-rows: repeat(6, 24px); flex: 0 0 auto; }
  .branch-calendar-day { min-height: 22px; }
  .branch-calendar-tooltip { right: 0; width: min(230px, 78vw); }
}

.branch-mini-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.branch-mini-table th,
.branch-mini-table td {
  padding: 9px 10px;
  border-bottom: 1px solid #edf1f6;
  color: #475569;
  text-align: left;
  font-size: 11.5px;
}

.branch-mini-table th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--primary);
  color: #fff;
  font-weight: 850;
}

/* =========================================================
   MOBILE FOUNDATION
   Quy tắc nền dùng chung cho mọi trang/tính năng bổ sung sau.
   ========================================================= */
@media (max-width: 900px) {
  html,
  body {
    width: 100%;
    height: auto !important;
    min-height: 100%;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  body.schedule-page-open {
    overflow-y: auto !important;
  }

  .top-management-bar {
    position: static !important;
    box-sizing: border-box;
    width: 100%;
    height: auto !important;
    min-height: 0;
    padding: 12px !important;
    gap: 10px;
  }

  .brand-block {
    width: 100%;
    gap: 9px;
  }

  .brand-logo { font-size: 25px; }
  .brand-divider { height: 30px; }
  .brand-title { min-width: 0; font-size: 14px !important; }

  .top-actions,
  .alert-actions.show {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    gap: 7px;
  }

  .alert-menu,
  .alert-menu > button {
    width: 100%;
  }

  .alert-menu > button {
    height: 34px;
    padding: 0 8px;
    font-size: 11px;
  }

  .alert-dropdown {
    position: fixed !important;
    z-index: 2300000 !important;
    top: max(10px, env(safe-area-inset-top)) !important;
    right: 8px !important;
    left: 8px !important;
    box-sizing: border-box;
    width: auto !important;
    max-height: calc(100dvh - 20px) !important;
    border-radius: 12px;
  }

  .breadcrumb-nav {
    position: static !important;
    width: 100%;
    height: 42px;
  }

  .breadcrumb-nav button,
  .breadcrumb-btn {
    height: 42px;
    padding: 0 11px;
    font-size: 12px;
  }

  .app,
  .app.no-sidebar {
    display: block !important;
    width: 100%;
    min-height: 0 !important;
    overflow: visible !important;
  }

  .app.no-sidebar main,
  body.schedule-page-open .app.no-sidebar main,
  main {
    box-sizing: border-box;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 12px !important;
    overflow: visible !important;
  }

  .page.active,
  #dashboard.page.active,
  #schedules.page.active,
  #tuition.page.active,
  #carelog.page.active,
  #attendanceSummary.page.active,
  #classEnrollmentOperations.page.active {
    display: block !important;
    width: 100%;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  #branchDashboardContent {
    height: auto !important;
    overflow: visible !important;
  }

  h1 { font-size: 23px; }
  .page-header,
  .schedule-page-header,
  .tuition-page-header,
  .carelog-page-header,
  .attendance-page-header {
    display: flex;
    flex-direction: column;
    align-items: stretch !important;
    gap: 9px;
  }

  .dashboard-action-tabs,
  .header-actions,
  .workday-header-actions,
  .schedule-modal-actions,
  .toolbar,
  .parents-toolbar,
  .status-search-controls {
    width: 100%;
    flex-wrap: wrap !important;
  }

  .dashboard-action-dropdown,
  .dashboard-action-link,
  .dashboard-action-trigger {
    box-sizing: border-box;
    min-width: 0 !important;
    width: 100% !important;
    flex: 1 1 calc(50% - 5px) !important;
  }

  .dashboard-action-trigger {
    height: 38px;
    padding: 0 10px;
    font-size: 12px;
  }

  .dashboard-action-menu {
    position: fixed !important;
    z-index: 2200000 !important;
    top: 50% !important;
    right: 10px !important;
    left: 10px !important;
    width: auto !important;
    max-height: 70dvh;
    overflow-y: auto;
    transform: translateY(-50%);
  }

  .schedule-view-controls {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px;
  }

  .schedule-view-controls .schedule-view-tabs,
  .schedule-time-controls {
    display: flex !important;
    width: 100% !important;
    max-width: 100%;
    overflow-x: auto !important;
    overflow-y: hidden;
    scrollbar-width: thin;
  }

  .schedule-view-tabs button {
    flex: 0 0 auto;
    min-width: max-content;
    padding: 8px 10px;
    font-size: 11px;
  }

  .schedule-view-controls .schedule-day-toolbar,
  .schedule-view-controls .video-week-toolbar,
  .schedule-day-toolbar,
  .video-week-toolbar,
  .attendance-day-toolbar {
    display: grid !important;
    grid-template-columns: 34px minmax(82px, 1fr) 34px;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    max-height: none !important;
    padding: 6px !important;
    gap: 5px !important;
    overflow: visible !important;
  }

  .schedule-day-toolbar > button,
  .video-week-toolbar > button,
  .attendance-day-toolbar > button {
    box-sizing: border-box;
    width: 34px !important;
    min-width: 34px !important;
    height: 34px !important;
  }

  .schedule-day-toolbar > button:nth-child(2),
  .video-week-toolbar > button:nth-child(2) {
    width: 100% !important;
    min-width: 82px !important;
  }

  .schedule-day-toolbar > label,
  .video-week-toolbar > label,
  .attendance-day-toolbar > label {
    display: grid !important;
    grid-column: 1 / -1;
    grid-template-columns: 1fr;
    width: 100% !important;
    min-width: 0 !important;
    transform: none !important;
    gap: 4px !important;
    white-space: normal !important;
    font-size: 10.5px !important;
  }

  .schedule-day-toolbar > label input,
  .video-week-toolbar > label input,
  .attendance-day-toolbar input {
    box-sizing: border-box;
    width: 100% !important;
    max-width: none !important;
    height: 34px !important;
    margin: 0 !important;
    font-size: 12px !important;
  }

  .schedule-workday-status,
  .toolbar-status-placeholder { display: none !important; }

  .table-container,
  #classSchedulesList,
  #outsideClassWorkList,
  #classVideoUpdatesList,
  #tuitionList .table-container,
  #tuitionNoticeList .table-container,
  #tuitionHistoryList .table-container,
  #tuitionConfirmationList .table-container,
  .attendance-summary-table-wrap {
    box-sizing: border-box;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding-bottom: 12px;
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch;
  }

  .crm-table th,
  .crm-table td,
  .dashboard-table th,
  .dashboard-table td,
  .mini-dashboard-table th,
  .mini-dashboard-table td {
    padding: 7px 6px !important;
    font-size: 10.5px !important;
    line-height: 1.35;
  }

  .crm-table thead th,
  .dashboard-table thead th,
  .mini-dashboard-table thead th {
    position: sticky;
    top: 0;
    z-index: 20;
  }

  .branch-overview-layout {
    display: block !important;
  }

  .branch-overview-sidebar {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: none;
    height: auto !important;
    margin-top: 12px;
  }

  .branch-mini-panel { min-height: 230px; }
  .branch-mini-table-wrap { height: 190px; overflow-y: auto !important; }
  .branch-mini-table th { position: sticky; top: 0; z-index: 5; }

  .modal {
    box-sizing: border-box;
    align-items: flex-start !important;
    padding: max(8px, env(safe-area-inset-top)) 8px max(8px, env(safe-area-inset-bottom)) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  body .modal > .modal-content,
  body .modal .modal-content {
    box-sizing: border-box;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: calc(100dvh - 16px) !important;
    margin: 0 auto !important;
    padding: 14px !important;
    border-radius: 14px !important;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  .modal-header {
    position: sticky !important;
    z-index: 10;
    top: -14px;
    margin: -14px -14px 12px !important;
    padding: 14px 50px 10px 14px !important;
    background: #fff;
  }

  .modal-header h2 { font-size: 18px; }

  .modal-content > .modal-header > button:last-child,
  .carelog-detail-close {
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
  }

  .schedule-modal-actions {
    position: sticky !important;
    z-index: 9;
    bottom: -14px;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 12px -14px -14px !important;
    padding: 10px 14px max(10px, env(safe-area-inset-bottom)) !important;
    background: #fff;
  }

  .schedule-modal-actions button {
    box-sizing: border-box;
    width: 100%;
    min-width: 0 !important;
    font-size: 11.5px;
  }

  .form-grid,
  .carelog-form-grid,
  .video-update-form-grid,
  .outside-work-form-grid,
  .unit-register-class-info-grid {
    grid-template-columns: 1fr !important;
  }

  input,
  select,
  textarea {
    box-sizing: border-box;
    min-width: 0;
    font-size: 16px !important;
  }

  .pagination {
    flex-wrap: wrap;
    padding-bottom: 16px;
  }
}

/* =========================================================
   AUTHORITATIVE MOBILE UI — áp dụng cuối cùng cho toàn bộ web
   ========================================================= */
@media (max-width: 900px) {
  :root {
    --mobile-body-size: 12px;
    --mobile-table-size: 11px;
    --mobile-button-size: 10.5px;
    --mobile-control-height: 34px;
  }

  html, body {
    width: 100% !important;
    height: auto !important;
    min-height: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    font-size: var(--mobile-body-size) !important;
  }

  .app, .app.no-sidebar, .app.no-sidebar main, main,
  .page.active, #dashboard.page.active, #schedules.page.active,
  #tuition.page.active, #carelog.page.active, #attendanceSummary.page.active,
  #classEnrollmentOperations.page.active {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .app.no-sidebar main, main { padding: 12px !important; }

  h1 { font-size: 22px !important; line-height: 1.2 !important; }
  h2 { font-size: 17px !important; line-height: 1.25 !important; }
  h3 { font-size: 14px !important; line-height: 1.3 !important; }
  .page-header p, .schedule-page-header p, .tuition-page-header p,
  .carelog-page-header p, .attendance-page-header p {
    font-size: 10.5px !important;
    line-height: 1.4 !important;
  }

  /* Header và các nút điều hướng. */
  .top-management-bar { padding: 10px 12px !important; }
  .brand-logo { font-size: 24px !important; }
  .brand-title { font-size: 13px !important; }
  .top-actions button, .alert-menu button,
  .breadcrumb-nav button, .breadcrumb-btn,
  .dashboard-action-trigger, .dashboard-action-menu button {
    min-height: 32px !important;
    padding: 5px 8px !important;
    font-size: var(--mobile-button-size) !important;
    line-height: 1.2 !important;
  }

  /* Tabs và bộ lọc: cuộn ngang nhẹ nếu không đủ chỗ, không ép chữ quá nhỏ. */
  .staff-status-tabs, .student-status-tabs, .class-status-tabs,
  .schedule-view-tabs, .tuition-view-tabs, .attendance-summary-tabs,
  .carelog-tabs, .enrollment-operations-tabs {
    display: flex !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 5px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
  }

  .staff-status-tabs button, .student-status-tabs button, .class-status-tabs button,
  .schedule-view-tabs button, .tuition-view-tabs button,
  .attendance-summary-tabs button, .carelog-tabs button,
  .enrollment-operations-tabs button {
    flex: 0 0 auto !important;
    min-width: max-content !important;
    min-height: 32px !important;
    padding: 6px 8px !important;
    font-size: var(--mobile-button-size) !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
  }

  .toolbar, .parents-toolbar, .staff-search-row, .class-toolbar,
  .tuition-student-toolbar, .carelog-filter-toolbar,
  .attendance-summary-filter {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 6px !important;
  }

  .toolbar input, .toolbar select, .toolbar button,
  .parents-toolbar input, .parents-toolbar select, .parents-toolbar button,
  .staff-search-row input, .class-toolbar input,
  .carelog-filter-toolbar input, .carelog-filter-toolbar select,
  .attendance-summary-filter select {
    box-sizing: border-box !important;
    min-width: 0 !important;
    min-height: var(--mobile-control-height) !important;
    margin: 0 !important;
    padding: 6px 8px !important;
  }

  .toolbar button, .parents-toolbar button,
  .tuition-history-actions button, .carelog-page-header button,
  .attendance-summary-filter button {
    font-size: var(--mobile-button-size) !important;
  }

  /* Chỉ bảng nhiều cột cuộn ngang; chiều cao bảng luôn bung hết để cuộn trang. */
  .table-container, .dashboard-table-container, .mini-table-container,
  .schedule-table-container, .outside-work-table-container,
  .video-update-table-container, .attendance-table-container,
  .attendance-summary-table-wrap, .enrollment-operations-table-wrap,
  .carelog-table-wrap, #classesList .table-container,
  #studentsTable .table-container, #branchClassesSummary .table-container,
  #branchTeachersPanel .table-container, #branchStudentsPanel .table-container,
  #tuitionList .table-container, #tuitionNoticeList .table-container,
  #tuitionHistoryList .table-container, #tuitionConfirmationList .table-container {
    box-sizing: border-box !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    overscroll-behavior-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  .crm-table, .dashboard-table, .mini-dashboard-table {
    width: 100% !important;
    min-width: 720px !important;
    table-layout: auto !important;
  }

  /* Bảng ít cột có thể co vừa điện thoại. */
  .branch-mini-table,
  .attendance-summary-other-table {
    width: 100% !important;
    min-width: 0 !important;
    table-layout: fixed !important;
  }

  /* Chiều rộng đọc được cho từng nhóm bảng nhiều cột. */
  .schedule-table { min-width: 820px !important; table-layout: fixed !important; }
  .outside-work-table { min-width: 760px !important; table-layout: fixed !important; }
  .video-update-table { min-width: 920px !important; table-layout: fixed !important; }
  .tuition-student-table { min-width: 1060px !important; table-layout: fixed !important; }
  .tuition-issued-table { min-width: 900px !important; }
  .tuition-history-table { min-width: 920px !important; }
  .tuition-confirmation-table { min-width: 900px !important; }
  .carelog-table { min-width: 1020px !important; table-layout: fixed !important; }
  .attendance-summary-active-table { min-width: 780px !important; }
  .attendance-daily-table { min-width: 660px !important; }
  .enrollment-operations-table { min-width: 820px !important; }
  .staff-table { min-width: 1040px !important; }
  #branchStudentsPanel .crm-table, #studentsTable .crm-table { min-width: 980px !important; }
  #classesList .crm-table { min-width: 850px !important; }
  .profile-table { min-width: 680px !important; }

  .crm-table th, .crm-table td,
  .dashboard-table th, .dashboard-table td,
  .mini-dashboard-table th, .mini-dashboard-table td {
    min-width: 0 !important;
    padding: 7px 6px !important;
    font-size: var(--mobile-table-size) !important;
    line-height: 1.35 !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
  }

  .crm-table thead th, .dashboard-table thead th,
  .mini-dashboard-table thead th {
    font-size: 10.5px !important;
    font-weight: 850 !important;
  }

  .crm-table small, .dashboard-table small,
  .mini-dashboard-table small { font-size: 9px !important; }

  .crm-table button, .dashboard-table button,
  .mini-dashboard-table button,
  .schedule-row-actions button, .carelog-row-actions button,
  .attendance-query-btn, .tuition-notice-action,
  .video-update-status-btn, .inline-staff-picker > summary {
    box-sizing: border-box !important;
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 30px !important;
    padding: 5px 7px !important;
    font-size: var(--mobile-button-size) !important;
    line-height: 1.2 !important;
    white-space: normal !important;
  }

  .schedule-class-cell > strong { font-size: 14px !important; }
  .schedule-unit-label { font-size: 10.5px !important; }
  .schedule-class-cell small, .schedule-class-cell p,
  .schedule-other-info span, .schedule-other-info b { font-size: 9px !important; }

  /* Thanh thời gian: một hàng nhỏ gọn ở cả điện thoại lớn và nhỏ. */
  .schedule-time-controls { width: 100% !important; }
  .schedule-view-controls .schedule-day-toolbar,
  .schedule-view-controls .video-week-toolbar,
  .schedule-day-toolbar, .video-week-toolbar {
    display: grid !important;
    grid-template-columns: 28px 66px minmax(0, 1fr) 28px !important;
    width: 100% !important;
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    padding: 4px !important;
    gap: 4px !important;
    overflow: hidden !important;
  }
  .schedule-day-toolbar > button, .video-week-toolbar > button {
    width: 28px !important; min-width: 28px !important; height: 28px !important;
    padding: 0 !important; font-size: 9.5px !important;
  }
  .schedule-day-toolbar > button:nth-child(2),
  .video-week-toolbar > button:nth-child(2) {
    width: 66px !important; min-width: 66px !important;
  }
  .schedule-day-toolbar > label, .video-week-toolbar > label {
    display: block !important;
    grid-column: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    font-size: 0 !important;
    line-height: 0 !important;
    transform: none !important;
  }
  .schedule-day-toolbar > label input, .video-week-toolbar > label input {
    box-sizing: border-box !important;
    width: 100% !important; min-width: 0 !important; max-width: none !important;
    height: 28px !important; margin: 0 !important; padding: 2px 5px !important;
    font-size: 11px !important;
  }

  /* Popup: nội dung rõ ràng, form một cột, nút đủ vùng chạm. */
  .modal {
    align-items: flex-start !important;
    padding: max(6px, env(safe-area-inset-top)) 6px max(6px, env(safe-area-inset-bottom)) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }
  body .modal > .modal-content, body .modal .modal-content {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: calc(100dvh - 12px) !important;
    margin: 0 !important;
    padding: 12px !important;
    border-radius: 12px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }
  .modal-header {
    position: sticky !important;
    z-index: 10 !important;
    top: -12px !important;
    margin: -12px -12px 10px !important;
    padding: 12px 44px 9px 12px !important;
    background: #fff !important;
  }
  .modal-header h2 { font-size: 17px !important; }
  .modal-header p { margin: 3px 0 0 !important; font-size: 10px !important; }
  .modal-content h3 { font-size: 14px !important; }
  .modal-content label { font-size: 11px !important; }
  .modal-content p, .modal-content span,
  .modal-content b, .modal-content strong { font-size: 11px; line-height: 1.4; }
  .modal-content small { font-size: 9.5px !important; }
  .modal-content input, .modal-content select, .modal-content textarea {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 4px 0 !important;
    padding: 7px 8px !important;
    font-size: 16px !important;
  }
  .modal-content input, .modal-content select { min-height: 36px !important; }
  .modal-content textarea { min-height: 76px; }
  .modal-content .form-grid, .modal-content .carelog-form-grid,
  .modal-content .video-update-form-grid, .modal-content .outside-work-form-grid,
  .modal-content .unit-register-class-info-grid, .modal-content .holiday-form-grid,
  .modal-content .staff-absence-grid, .modal-content .tuition-adjustment-grid {
    grid-template-columns: 1fr !important;
    gap: 7px !important;
  }
  .schedule-modal-actions {
    position: sticky !important;
    z-index: 9 !important;
    bottom: -12px !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    margin: 10px -12px -12px !important;
    padding: 9px 12px max(9px, env(safe-area-inset-bottom)) !important;
    gap: 6px !important;
    background: #fff !important;
  }
  .schedule-modal-actions button,
  .modal-content .primary-btn, .modal-content .secondary-btn {
    min-width: 0 !important;
    min-height: 34px !important;
    padding: 6px 8px !important;
    font-size: 10.5px !important;
    line-height: 1.2 !important;
    white-space: normal !important;
  }

  /* Phiếu giữ nguyên tỷ lệ xuất file; chỉ vùng xem trước được phép cuộn ngang. */
  .tuition-notice-workspace,
  .tuition-confirmation-workspace {
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
  }
}

.branch-mini-empty {
  color: #94a3b8 !important;
  text-align: center !important;
}

#branchClassesSummary .dashboard-table {
  width: 100%;
  min-width: 760px;
  table-layout: fixed;
}

#branchClassesSummary .dashboard-table th:nth-child(2),
#branchClassesSummary .dashboard-table td:nth-child(2) { width: 12%; }
#branchClassesSummary .dashboard-table th:nth-child(3),
#branchClassesSummary .dashboard-table td:nth-child(3) { width: 13%; }
#branchClassesSummary .dashboard-table th:nth-child(4),
#branchClassesSummary .dashboard-table td:nth-child(4) { width: 13%; }
#branchClassesSummary .dashboard-table th:nth-child(5),
#branchClassesSummary .dashboard-table td:nth-child(5) { width: 20%; }

#branchClassesSummary .dashboard-table th,
#branchClassesSummary .dashboard-table td {
  padding-left: 9px;
  padding-right: 9px;
}

.branch-class-name-cell strong,
.branch-class-name-cell small {
  display: block;
}

.branch-class-name-cell strong {
  color: var(--primary);
  font-size: 14px;
}

.branch-class-name-cell small {
  margin-top: 3px;
  color: #7b8799;
  font-size: 10.5px;
  font-weight: 700;
}

@media (max-width: 1050px) {
  .branch-overview-layout { grid-template-columns: 1fr; }
  .branch-overview-sidebar { grid-template-columns: 1fr 1fr; }
  .branch-mini-table-wrap { max-height: 220px; }
}

@media (max-width: 640px) {
  .branch-overview-sidebar { grid-template-columns: 1fr; }
}

/* Vì app.js đang bọc bảng Cơ sở bằng dashboard-section-panel nên cần bỏ card ở lớp này */
#branchClassesSummary .dashboard-section-panel {
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
}

/* Bảng Cơ sở */
#branchClassesSummary .table-container {
  width: 100%;
  height: auto !important;
  min-height: 0 !important;
  max-height: calc(100vh - 360px);
  overflow: auto;
  margin-bottom: 0;
}

/* =========================
TRANG NHÂN SỰ + HỌC SINH TRONG CƠ SỞ
========================= */

/* Bỏ card trắng bao ngoài Nhân sự và Học sinh cơ sở */
#branchTeachersPanel.dashboard-section-panel.active,
#branchStudentsPanel.dashboard-section-panel.active {
  display: block;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  margin: 0 !important;
}

/* Bảng Nhân sự */
#branchTeachersPanel .table-container {
  width: 100%;
  height: auto !important;
  min-height: 0 !important;
  max-height: calc(100dvh - 270px);
  overflow: auto;
  margin-bottom: 24px;
  padding-bottom: 64px;
  scroll-padding-bottom: 64px;
}

#branchTeachersPanel .crm-table {
  width: 100%;
  min-width: 100%;
  table-layout: fixed;
}

#branchTeachersPanel .staff-table th,
#branchTeachersPanel .staff-table td {
  box-sizing: border-box;
  vertical-align: middle;
}

#branchTeachersPanel .staff-table th:nth-child(1),
#branchTeachersPanel .staff-table td:nth-child(1) {
  width: 14%;
  text-align: left;
}

#branchTeachersPanel .staff-table th:nth-child(2),
#branchTeachersPanel .staff-table td:nth-child(2),
#branchTeachersPanel .staff-table th:nth-child(3),
#branchTeachersPanel .staff-table td:nth-child(3),
#branchTeachersPanel .staff-table th:nth-child(4),
#branchTeachersPanel .staff-table td:nth-child(4),
#branchTeachersPanel .staff-table th:nth-child(5),
#branchTeachersPanel .staff-table td:nth-child(5) {
  width: 13%;
  text-align: center;
}

#branchTeachersPanel .staff-table th:nth-child(6),
#branchTeachersPanel .staff-table td:nth-child(6) {
  width: 34%;
  text-align: center;
}

#branchTeachersPanel .staff-table td:nth-child(6) .dashboard-actions {
  justify-content: center;
  width: 100%;
  box-sizing: border-box;
}

.student-photo-upload-field {
  display: grid;
  gap: 7px;
  margin-bottom: 12px;
  color: #273550;
  font-weight: 750;
}

.student-photo-upload-field small {
  color: #7b8798;
  font-size: 11px;
  font-weight: 500;
}

.student-photo-upload-field input[type="file"] {
  box-sizing: border-box;
  width: 100%;
  padding: 9px;
  border: 1px solid #d8dfeb;
  border-radius: 9px;
  background: #fff;
}

.student-photo-upload-field img {
  width: 120px;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center 20%;
  border: 1px solid #d8dfeb;
  border-radius: 7px;
}

.student-profile-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  align-items: start;
}

.student-profile-layout.has-photo {
  grid-template-columns: 180px minmax(0, 1fr);
}

.student-profile-photo {
  padding: 0;
  margin: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.student-profile-photo img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center 20%;
  border: 1px solid #d8dfeb;
  border-radius: 8px;
  background: transparent;
}

@media (max-width: 640px) {
  .student-profile-layout.has-photo {
    grid-template-columns: 100px minmax(0, 1fr);
    gap: 12px;
  }
}

/* Bảng Học sinh trong Cơ sở */
#branchStudentsPanel .table-container {
  width: 100%;
  height: auto !important;
  min-height: 0 !important;
  max-height: calc(100vh - 440px);
  overflow: auto;
  margin-bottom: 0;
  padding-bottom: 12px;
}

#branchStudentsPanel .crm-table {
  width: 100%;
  min-width: 100%;
  table-layout: fixed;
}

#branchStudentsPanel .crm-table th,
#branchStudentsPanel .crm-table td {
  text-align: left;
  vertical-align: middle;
  word-break: break-word;
}

#branchStudentsPanel .crm-table th:last-child,
#branchStudentsPanel .crm-table td:last-child {
  text-align: left;
}

/* Header bảng cố định khi cuộn trong bảng */
.crm-table thead th {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--primary);
  color: #fff;
}

/* Dòng báo chưa có dữ liệu */
.empty-cell {
  padding: 24px !important;
  text-align: center !important;
  color: #777;
  background: #fff;
}

/* Popup nhân sự */
.modal-content.large-modal {
  max-width: 950px;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 16px;
}

.section-subtitle {
  margin: 22px 0 8px;
  color: var(--primary);
  font-size: 18px;
  font-weight: 800;
}

/* Mobile */
@media(max-width:900px) {
  .app.no-sidebar main {
    padding: 150px 18px 28px;
  }

  #classesList .table-container,
  #studentsTable .table-container,
  #branchClassesSummary .table-container,
  #branchTeachersPanel .table-container,
  #branchStudentsPanel .table-container {
    max-height: calc(100vh - 430px);
  }
}

/* =========================
STAFF FILTER + STATUS TABS
========================= */

.staff-status-tabs {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  margin: 12px 0 18px;
}

.staff-status-tabs button {
  display: flex;
  align-items: center;
  gap: 8px;
  border: none;
  background: none;
  padding: 0;
  color: #999;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
}

.staff-status-tabs button:hover {
  opacity: .8;
}

.staff-status-tabs button span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  min-width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #e4e6ea;
  color: #3d3d3d;
  font-size: 14px;
  font-weight: 900;
}

.staff-status-tabs button.active-green {
  color: var(--success);
}

.staff-status-tabs button.active-yellow {
  color: var(--warning);
}

.staff-status-tabs button.active-gray {
  color: var(--gray);
}

.staff-status-tabs button.active-all {
  color: var(--primary);
}

.staff-status-tabs button.active-green span {
  background: var(--success);
  color: #fff;
}

.staff-status-tabs button.active-yellow span {
  background: var(--warning);
  color: #fff;
}

.staff-status-tabs button.active-gray span {
  background: var(--gray);
  color: #fff;
}

.staff-status-tabs button.active-all span {
  background: var(--primary);
  color: #fff;
}

/* =========================
STAFF SEARCH BOX
========================= */

.staff-search-row {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 16px;
}

.staff-search-box {
  width: 360px;
  max-width: 100%;
}

/* =========================
FIX HỌC SINH TABLE STICKY HEADER
Chặn dữ liệu bị lộ/nhảy lên khi rê chuột vào tiêu đề bảng
========================= */

#studentsTable .table-container,
#branchStudentsPanel .table-container {
  position: relative;
  isolation: isolate;
  overflow: auto;
}

#studentsTable .crm-table thead th,
#branchStudentsPanel .crm-table thead th {
  position: sticky;
  top: 0;
  z-index: 200;
  background: var(--primary) !important;
  color: #fff !important;
  box-shadow: 0 1px 0 #e5e7eb;
}

#studentsTable .crm-table tbody td,
#branchStudentsPanel .crm-table tbody td {
  position: relative;
  z-index: 1;
  background: #fff;
}

/* =========================
FIX STICKY HEADER CHO TẤT CẢ BẢNG
Chặn dữ liệu bị lộ/nhảy lên khi rê chuột vào tiêu đề
========================= */

.table-container {
  position: relative;
  isolation: isolate;
  overflow: auto;
}

.crm-table thead th {
  position: sticky;
  top: 0;
  z-index: 200;
  background: var(--primary) !important;
  color: #fff !important;
  box-shadow: 0 1px 0 #e5e7eb;
}

.crm-table tbody td {
  position: relative;
  z-index: 1;
  background: #fff;
}

/* =========================
FIX DROPDOWN THÔNG TIN KHÔNG BỊ CHE
========================= */

.info-dropdown-menu.show {
  display: block !important;
  z-index: 999999 !important;
}

.info-dropdown-menu {
  overflow: visible !important;
}

/* =========================
CĂN GIỮA TRANG CHỦ CHỌN CƠ SỞ
========================= */

#dashboard.page.active #homeBranchSelect.branch-home {
  height: 100%;
  min-height: 0 !important;
  justify-content: center;
  transform: translateY(-36px);
}

/* =========================
GIÃN KHOẢNG CÁCH TRANG CHỦ CHỌN CƠ SỞ
========================= */

#dashboard.page.active #homeBranchSelect.branch-home h1 {
  margin-bottom: 10px;
}

#dashboard.page.active #homeBranchSelect.branch-home p {
  margin: 0 0 32px !important;
}

#dashboard.page.active #homeBranchSelect .branch-big-grid {
  margin-top: 0;
}

/* =========================
DROPDOWN CHỨC VỤ - MATCH STYLE POPUP
========================= */

.professional-select {
  width: 100%;
  height: auto;
  min-height: 42px;
  margin: 7px 0;
  padding: 11px 40px 11px 11px;
  border: 1px solid #ddd;
  border-radius: 10px;
  background-color: #fff;
  color: #222;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  cursor: pointer;
  outline: none;
  appearance: none;
  -webkit-appearance: none;

  background-image:
    linear-gradient(45deg, transparent 50%, #6b7280 50%),
    linear-gradient(135deg, #6b7280 50%, transparent 50%);
  background-position:
    calc(100% - 18px) 18px,
    calc(100% - 13px) 18px;
  background-size: 5px 5px;
  background-repeat: no-repeat;
}

.professional-select:required:invalid {
  color: #636975;
}

.professional-select:hover {
  border-color: var(--accent);
}

.professional-select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(195, 37, 70, .08);
}

.professional-select option {
  color: #222;
  font-size: 14px;
  font-weight: 400;
}

.professional-select option[value=""] {
  color: #636975;
}

/* =========================
DROPDOWN CƠ SỞ BỊ KHÓA THEO CƠ SỞ HIỆN TẠI
========================= */

.professional-select:disabled {
  background-color: #f9fafb;
  color: #222;
  cursor: not-allowed;
  opacity: 1;
  border-color: #e5e7eb;
}

/* =========================
Ô CƠ SỞ KHÓA THEO CƠ SỞ HIỆN TẠI
========================= */

.locked-branch-select,
.locked-branch-select:disabled {
  background-image: none !important;
  padding-right: 11px !important;
  color: #cc4663 !important;
  background-color: #f3f3f4 !important;
  border-color: #e5e7eb !important;
  cursor: not-allowed !important;
  opacity: 1 !important;
  font-weight: 400 !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}

/* =========================
POPUP THÊM NHÂN SỰ MỚI
========================= */

.teacher-modal-content {
  max-width: 950px;
}

.teacher-modal-title {
  margin: 0;
  color: var(--primary);
  font-size: 30px;
  font-weight: 800;
  line-height: 1.25;
}

.teacher-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 16px;
}

.teacher-form-divider {
  width: 100%;
  height: 1px;
  background: #e5e7eb;
  margin: 18px 0 30px;
}

.teacher-form-section-title {
  width: 100%;
  margin: 0 0 12px;
  color: #242424;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.35;
}

.bank-section-title {
  margin-top: 0;
}

.teacher-note-block {
  margin-top: 12px;
}

.teacher-note-block textarea {
  min-height: 86px;
}

.modal-actions {
  margin-top: 18px;
}


/* =========================
HOVER / FOCUS CHO TẤT CẢ Ô NHẬP TRONG POPUP
========================= */

.modal input:hover,
.modal select:hover,
.modal textarea:hover {
  border-color: var(--accent);
}

.modal input:focus,
.modal select:focus,
.modal textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(195, 37, 70, .08);
}

/* Không hover màu đỏ với ô đang bị khóa */
.modal input:disabled:hover,
.modal select:disabled:hover,
.modal textarea:disabled:hover {
  border-color: #e5e7eb;
  box-shadow: none;
  cursor: not-allowed;
}

/* =========================
DẤU * CHO Ô BẮT BUỘC TRONG POPUP
========================= */

.modal label.required-label::after {
  content: " (*)";
  color: var(--danger);
  font-weight: 900;
}

/* =========================
DROPDOWN CHỌN BA / MẸ / NGƯỜI GIÁM HỘ
========================= */

.parent-relation-picker {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
  margin-bottom: 12px;
}

.student-parent-relation-fields {
  display: grid;
  gap: 12px;
}

.parent-relation-card {
  padding: 14px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #fafafa;
}

.parent-relation-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  color: var(--primary);
}

.parent-relation-card-header button {
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 999px;
  background: #fee2e2;
  color: #b91c1c;
  font-weight: 900;
  cursor: pointer;
}

.parent-relation-card-header button:hover {
  background: #fecaca;
}

.citizen-image-preview {
  width: 100%;
  max-height: 180px;
  object-fit: contain;
  margin-top: 8px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #f9fafb;
  padding: 8px;
}

.reservation-history-card {
  margin-top: 16px;
}

.reservation-table-wrap {
  width: 100%;
  overflow-x: auto;
}

.reservation-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 680px;
}

.reservation-table th,
.reservation-table td {
  padding: 10px 12px;
  border-bottom: 1px solid #e5e7eb;
  text-align: left;
  vertical-align: top;
  white-space: nowrap;
}

.reservation-table th {
  background: #f9fafb;
  color: var(--primary);
  font-weight: 800;
}

.reservation-table td:last-child {
  white-space: normal;
  min-width: 180px;
}

.staff-document-card {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.citizen-documents-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.citizen-document-box {
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  background: #f9fafb;
  padding: 14px;
}

.citizen-document-box h4 {
  margin: 0 0 10px;
  font-size: 15px;
  color: var(--primary);
  font-weight: 800;
}

.citizen-document-image {
  width: 100%;
  max-height: 320px;
  object-fit: contain;
  border-radius: 10px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
}

.citizen-document-empty {
  min-height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

@media (max-width:768px) {
  .citizen-documents-grid {
    grid-template-columns: 1fr;
  }
}

.document-upload-label {
  display: block;
  margin-top: 12px;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 800;
  color: var(--primary);
}

.staff-document-card .primary-btn.full {
  margin-top: 6px;
}

.document-warning-btn {
  background: #fff6e3 !important;
  color: #94670d !important;
  border: 1px solid #facc15 !important;
  font-weight: 900;
}

.document-warning-btn:hover {
  background: #feeec7 !important;
  color: #854d0e !important;
  border-color: #eab308 !important;
}

.document-normal-btn {
  background: #eef6ff;
  color: #1d4ed8;
}

.staff-document-notice {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 16px;
  border-radius: 14px;
  background: linear-gradient(135deg, #ffeded, #fff0f0);
  border: 1px solid #feaaaa;
  color: #920e0e;
}

.staff-document-notice .notice-icon {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #f59e0b;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  flex-shrink: 0;
}

.staff-document-notice b {
  display: block;
  font-size: 14px;
  margin-bottom: 3px;
}

.staff-document-notice p {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
}

.citizen-document-history-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

.citizen-document-history-item {
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #ffffff;
  padding: 10px;
}

.citizen-document-history-label {
  font-size: 12px;
  font-weight: 800;
  color: var(--primary);
  margin-bottom: 8px;
}

.citizen-document-history-item small {
  display: block;
  margin-top: 6px;
  font-size: 11px;
  color: #6b7280;
}

.contract-document-box {
  margin-top: 18px;
}

.contract-document-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 12px;
}

.contract-document-item {
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #ffffff;
  padding: 10px;
}

.contract-document-title {
  font-size: 12px;
  font-weight: 800;
  color: var(--primary);
  margin-bottom: 8px;
}

.contract-document-item small {
  display: block;
  margin-top: 6px;
  font-size: 11px;
  color: #6b7280;
}

.contract-pdf-link {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 120px;
  border-radius: 10px;
  border: 1px dashed #cbd5e1;
  background: #f8fafc;
  font-weight: 800;
  color: #1d4ed8;
  text-decoration: none;
}

.selected-contract-list {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.selected-contract-item {
  padding: 9px 10px;
  border-radius: 10px;
  background: #f8fafc;
  border: 1px solid #e5e7eb;
}

.selected-contract-item b {
  display: block;
  font-size: 13px;
}

.selected-contract-item small {
  color: #6b7280;
}

.file-drop-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 120px;
  padding: 18px;
  margin-top: 8px;
  border: 2px dashed #cbd5e1;
  border-radius: 14px;
  background: #f8fafc;
  color: #334155;
  text-align: center;
  cursor: pointer;
  transition: 0.2s ease;
}

.file-drop-zone b {
  font-size: 14px;
  font-weight: 900;
  color: var(--primary);
}

.file-drop-zone span {
  font-size: 13px;
  font-weight: 700;
}

.file-drop-zone small {
  font-size: 12px;
  color: #64748b;
}

.file-drop-zone:hover,
.file-drop-zone.drag-over {
  border-color: var(--primary);
  background: #eef6ff;
  transform: translateY(-1px);
}

.contract-drop-zone {
  min-height: 140px;
}

.hidden-file-input {
  display: none;
}

.contract-set-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 12px;
}

.contract-set-item {
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  background: #ffffff;
  padding: 12px;
}

.contract-set-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eef2f7;
}

.contract-set-header b {
  display: block;
  font-size: 14px;
  color: var(--primary);
}

.contract-set-header small,
.contract-set-header span {
  font-size: 12px;
  color: #64748b;
}

.selected-contract-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  background: #f8fafc;
  border: 1px solid #e5e7eb;
}

.selected-contract-item b {
  display: block;
  font-size: 13px;
  color: var(--primary);
}

.selected-contract-item small {
  display: block;
  margin-top: 3px;
  font-size: 11px;
  color: #64748b;
}

.selected-contract-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.selected-contract-actions button {
  border: 1px solid #cbd5e1;
  background: #ffffff;
  color: #334155;
  border-radius: 8px;
  padding: 5px 8px;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.selected-contract-actions button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.selected-contract-actions button:hover:not(:disabled) {
  background: #eef6ff;
  border-color: var(--primary);
  color: var(--primary);
}

.selected-contract-preview-list {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.selected-contract-preview-item {
  display: grid;
  grid-template-columns: 72px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #f8fafc;
}

.selected-contract-thumbnail {
  width: 72px;
  height: 92px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid #dbe3ef;
  background: #ffffff;
}

.selected-contract-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.selected-contract-info b {
  display: block;
  font-size: 13px;
  color: var(--primary);
  margin-bottom: 4px;
}

.selected-contract-info small {
  display: block;
  font-size: 11px;
  color: #64748b;
  line-height: 1.35;
  word-break: break-word;
}

.selected-contract-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.selected-contract-actions button {
  border: 1px solid #cbd5e1;
  background: #ffffff;
  color: #334155;
  border-radius: 8px;
  padding: 5px 8px;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.selected-contract-actions button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.selected-contract-actions button:hover:not(:disabled) {
  background: #eef6ff;
  border-color: var(--primary);
  color: var(--primary);
}

@media (max-width:640px) {
  .selected-contract-preview-item {
    grid-template-columns: 64px 1fr;
  }

  .selected-contract-actions {
    grid-column: 1 / -1;
    justify-content: flex-end;
  }
}


.document-main-download-btn {
  border: 1px solid #cfd7ce;
  background: #ffffff;
  color: #193b15;
  border-radius: 10px;
  padding: 9px 14px;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
}

.document-main-download-btn:hover {
  background: #267c16;
  border-color: #267c16;
  color: #ffffff;
}

.staff-download-modal-content {
  max-width: 880px;
  width: 92%;
  max-height: 88vh;
  overflow: auto;
}

.staff-download-group-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.staff-download-group {
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  background: #ffffff;
  overflow: hidden;
}

.staff-download-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  background: #f8fafc;
  border-bottom: 1px solid #e5e7eb;
}

.staff-download-group-head label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.staff-download-group-head b {
  color: var(--primary);
  font-size: 14px;
}

.staff-download-group-head span {
  font-size: 12px;
  color: #64748b;
  font-weight: 700;
}

.staff-download-items {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
  padding: 12px;
}

.staff-download-item {
  display: grid;
  grid-template-columns: auto 64px 1fr;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid #e6ebe5;
  border-radius: 12px;
  background: #ffffff;
  cursor: pointer;
}

.staff-download-item:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
}

.staff-download-item img {
  width: 64px;
  height: 82px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid #dbe3ef;
  background: #ffffff;
}

.staff-download-item b {
  display: block;
  font-size: 13px;
  color: #0f172a;
  margin-bottom: 4px;
}

.staff-download-item small {
  display: block;
  font-size: 11px;
  color: #64748b;
  word-break: break-word;
}

@media (max-width:640px) {


  .document-main-download-btn {
    width: 100%;
  }

  .staff-download-items {
    grid-template-columns: 1fr;
  }
}

.staff-document-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.staff-document-head .document-main-download-btn {
  flex-shrink: 0;
  margin-top: 2px;
}

.staff-download-modal-content {
  position: relative;
  max-width: 880px;
  width: 92%;
  max-height: 88vh;
  overflow: auto;
}

.staff-download-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-right: 44px;
  margin-bottom: 16px;
}

.staff-download-modal-head h2 {
  margin: 0;
}

.staff-download-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 50%;
  background: #f1f5f9;
  color: #334155;
  font-size: 24px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
}

.staff-download-close:hover {
  background: #e2e8f0;
  color: var(--primary);
}

.staff-download-actions-footer {
  justify-content: flex-end;
  margin-top: 16px;
}

@media (max-width:640px) {
  .staff-document-head {
    flex-direction: column;
  }

  .staff-document-head .document-main-download-btn {
    width: 100%;
  }
}

.clickable-document-image,
.selected-contract-thumbnail img {
  cursor: zoom-in;
}

.image-zoom-modal {
  position: fixed;
  inset: 0;
  z-index: 999999 !important;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(15, 23, 42, 0.72);
}

.image-zoom-content {
  position: relative;
  z-index: 1000000;
  width: min(92vw, 1000px);
  max-height: 92vh;
  background: #ffffff;
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 24px 80px rgba(15, 23, 42, 0.35);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.image-zoom-title {
  padding-right: 48px;
  font-size: 15px;
  font-weight: 900;
  color: var(--primary);
}

.image-zoom-content{
  position:relative;
  z-index:1000000;
  width:min(96vw, 1200px);
  max-height:92vh;
  overflow:auto;
  background:#ffffff;
  border-radius:18px;
  padding:18px;
  box-shadow:0 24px 80px rgba(15, 23, 42, 0.35);
  display:flex;
  flex-direction:column;
  gap:12px;
}

.image-zoom-content img{
  display:block;
  width:auto;
  height:auto;
  max-width:none;
  max-height:none;
  object-fit:initial;
  border-radius:12px;
  background:#f8fafc;
}

.image-zoom-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  background: #f1f5f9;
  color: #334155;
  font-size: 26px;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.image-zoom-close:hover {
  background: #e2e8f0;
  color: var(--primary);
}

.contract-date-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 10px 0 12px;
}

.contract-date-text {
  display: block;
  margin-top: 4px;
  color: #0f766e;
  font-weight: 800;
}

@media (max-width:640px) {
  .contract-date-grid {
    grid-template-columns: 1fr;
  }
}

.contract-set-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.contract-toggle-btn {
  border: 1px solid #cbd5e1;
  background: #ffffff;
  color: var(--primary);
  border-radius: 9px;
  padding: 7px 11px;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.contract-toggle-btn:hover {
  background: #eef6ff;
  border-color: var(--primary);
}

.contract-set-pages-holder {
  display: none;
  margin-top: 12px;
}

.contract-set-pages-holder.active {
  display: block;
}

@media (max-width:640px) {
  .contract-set-header {
    flex-direction: column;
  }

  .contract-set-right {
    width: 100%;
    justify-content: space-between;
  }

  .contract-toggle-btn {
    width: 100%;
  }
}


.citizen-image-preview{
  width:180px !important;
  height:180px !important;
  object-fit:cover;
  display:block;
  margin-top:12px;
  border-radius:14px;
  border:1px solid #dbe3ef;
  background:#f8fafc;
  cursor:zoom-in;
}

.citizen-old-history-holder{
  display:none;
  margin-top:14px;
}

.citizen-old-history-holder.active{
  display:block;
}

.citizen-old-history-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(130px, 1fr));
  gap:12px;
}

.citizen-old-history-item{
  padding:10px;
  border:1px solid #e5e7eb;
  border-radius:12px;
  background:#f8fafc;
}

.citizen-old-thumb-box{
  width:100%;
  aspect-ratio:1 / 1;
  border-radius:10px;
  overflow:hidden;
  border:1px solid #dbe3ef;
  background:#ffffff;
}

.citizen-old-thumb{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  cursor:zoom-in;
}

.citizen-old-history-item small{
  display:block;
  margin-top:7px;
  font-size:11px;
  color:#64748b;
}

@media (max-width:640px){


  .citizen-image-preview{
    width:100% !important;
    height:auto !important;
    aspect-ratio:1 / 1;
  }
}

/* Tabs on the left, search/date controls on the right */
.status-search-controls,
.schedule-view-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  width: 100%;
  margin: 12px 0 18px;
}

.status-search-controls .staff-status-tabs,
.status-search-controls .student-status-tabs,
.status-search-controls .class-status-tabs,
.schedule-view-controls .schedule-view-tabs {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
}

.status-search-controls .staff-search-row,
.status-search-controls .class-toolbar {
  flex: 0 0 320px;
  width: 320px;
  margin: 0;
}

.status-search-controls .search-box {
  box-sizing: border-box;
  width: 100%;
}

.schedule-view-controls {
  align-items: stretch;
  margin-top: 0;
  margin-bottom: 8px;
}

.schedule-view-controls .schedule-view-tabs {
  align-self: center;
  flex-wrap: nowrap;
}

.schedule-time-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex: 0 1 auto;
  min-width: 0;
}

.schedule-view-controls .schedule-day-toolbar,
.schedule-view-controls .video-week-toolbar {
  width: auto !important;
  max-width: none !important;
  height: 42px !important;
  min-height: 42px !important;
  margin: 0 !important;
  padding: 4px 6px !important;
}

.schedule-view-controls .schedule-day-toolbar > button:nth-child(2),
.schedule-view-controls .video-week-toolbar > button:nth-child(2) {
  flex-basis: 108px !important;
  width: 108px !important;
}

.schedule-view-controls .schedule-day-toolbar > label input,
.schedule-view-controls .video-week-toolbar > label input {
  flex-basis: 142px !important;
  width: 142px !important;
  max-width: 142px !important;
}

.schedule-view-controls .schedule-day-toolbar > .schedule-workday-status,
.schedule-view-controls .video-week-toolbar > .schedule-workday-status {
  flex-basis: 150px !important;
  width: 150px !important;
  max-width: 150px !important;
}

@media (max-width: 1180px) {
  .status-search-controls,
  .schedule-view-controls {
    align-items: stretch;
    flex-direction: column;
  }

  .status-search-controls .staff-search-row,
  .status-search-controls .class-toolbar {
    align-self: flex-end;
  }

  .schedule-time-controls {
    justify-content: flex-end;
  }
}

@media (max-width: 640px) {
  .status-search-controls .staff-search-row,
  .status-search-controls .class-toolbar {
    width: 100%;
    flex-basis: auto;
  }

  .schedule-time-controls {
    justify-content: flex-start;
    overflow-x: auto;
  }
}

/* ===== LÀM GỌN KHUNG ẢNH CCCD HIỆN TẠI ===== */

.citizen-latest-card{
  margin-bottom:12px;
  padding:0;
  border:none;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.citizen-latest-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin:0;
}

.citizen-latest-title{
  display:flex;
  align-items:flex-start;
  gap:8px;
}

.citizen-latest-icon{
  display:none;
}

.citizen-latest-title b{
  display:block;
  font-size:13px;
  font-weight:900;
  color:var(--primary);
}

.citizen-latest-title small{
  display:block;
  margin-top:2px;
  font-size:11px;
  color:#64748b;
}

.citizen-latest-preview-wrap{
  padding:0;
  border:none;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
}

.citizen-latest-preview-box{
  width:180px;
  height:180px;
  border-radius:14px;
  overflow:hidden;
  border:1px solid #dbe3ef;
  background:#f8fafc;
  box-shadow:none;
}

.citizen-latest-preview-image{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  cursor:zoom-in;
}

.citizen-latest-caption{
  text-align:center;
}

.citizen-latest-caption b{
  display:block;
  font-size:12px;
  font-weight:900;
  color:#0f172a;
}

.citizen-latest-caption span{
  display:block;
  margin-top:2px;
  font-size:11px;
  color:#64748b;
}

.citizen-history-toggle-btn{
  width:100%;
  border:1px solid #dbe3ef;
  background:#ffffff;
  color:var(--primary);
  border-radius:10px;
  padding:8px 10px;
  font-size:12px;
  font-weight:900;
  cursor:pointer;
}

.citizen-history-toggle-btn:hover{
  background:#eef6ff;
  border-color:var(--primary);
}

/* ===== LÀM GỌN ẢNH TRONG LỊCH SỬ CCCD CŨ ===== */

.citizen-old-history-holder{
  margin-top:10px;
}

.citizen-old-history-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(110px, 1fr));
  gap:10px;
}

.citizen-old-history-item{
  padding:0;
  border:none;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}

.citizen-old-thumb-box{
  width:100%;
  aspect-ratio:1 / 1;
  border-radius:12px;
  overflow:hidden;
  border:1px solid #dbe3ef;
  background:#f8fafc;
}

.citizen-old-thumb{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  cursor:zoom-in;
}

.citizen-old-history-item small{
  display:block;
  margin-top:5px;
  font-size:10.5px;
  color:#64748b;
  text-align:center;
}

.document-expired-btn{
  border:1px solid #fecaca !important;
  background:#fef2f2 !important;
  color:#b91c1c !important;
  font-weight:900;
}

.document-expired-btn:hover{
  background:#fee2e2 !important;
  border-color:#ef4444 !important;
  color:#991b1b !important;
}

.class-detail-actions{
  display:flex;
  align-items:flex-start;
  justify-content:flex-end;
  gap:16px;
  flex-wrap:wrap;
}

.class-detail-actions .primary-btn{
  flex-shrink:0;
  margin-top:2px;
}

@media(max-width:768px){
  .class-detail-actions{
    width:100%;
    justify-content:flex-start;
  }

  .class-detail-actions .primary-btn{
    width:100%;
  }
}

/* ===== FIX CANH NÚT GHI DANH TRANG CHI TIẾT LỚP ===== */

#classDetail .class-detail-header{
  display:flex;
  align-items:flex-start !important;
  justify-content:space-between;
  gap:24px;
  margin-bottom:8px;
}

#classDetail .class-detail-header > div:first-child{
  flex:1;
  min-width:0;
}

#classDetail .class-detail-actions{
  display:flex;
  align-items:flex-start !important;
  justify-content:flex-end;
  gap:16px;
  margin-top:0 !important;
  padding-top:0 !important;
  transform:none !important;
}

#classDetail .class-detail-stats{
  margin:0 !important;
  padding-top:0 !important;
  min-width:210px;
}

#classDetail .class-detail-stats p{
  margin:0 0 6px !important;
  text-align:right;
}

#classDetail .class-detail-actions .primary-btn{
  align-self:flex-start !important;
  margin-top:0 !important;
  height:42px;
}

/* ===== BỐ CỤC HEADER TRANG CHI TIẾT LỚP ===== */

#classDetail .class-detail-header{
  display:block !important;
  margin-bottom:18px;
}

#classDetail #classDetailName{
  margin:0 0 16px;
  color:var(--primary);
  font-size:42px;
  font-weight:900;
  line-height:1.15;
}

#classDetail .class-detail-meta-row{
  display:grid;
  grid-template-columns:minmax(360px, 1fr) minmax(260px, auto) auto;
  align-items:start;
  gap:28px;
}

#classDetail .class-detail-meta-left,
#classDetail .class-detail-meta-right{
  display:flex;
  flex-direction:column;
  gap:8px;
}

#classDetail .class-detail-meta-left p,
#classDetail .class-detail-meta-right p{
  margin:0 !important;
  color:#666;
  font-size:18px;
  font-weight:700;
  line-height:1.35;
}

#classDetail .class-detail-meta-right{
  text-align:left;
}

#classDetail .class-detail-meta-right b{
  color:#333;
  font-weight:900;
}

#classDetail .class-detail-enroll-btn{
  align-self:start;
  height:48px;
  padding:0 24px;
  border-radius:14px;
  font-size:18px;
  white-space:nowrap;
}

@media(max-width:900px){
  #classDetail .class-detail-meta-row{
    grid-template-columns:1fr;
    gap:14px;
  }

  #classDetail .class-detail-enroll-btn{
    width:100%;
  }

  #classDetail #classDetailName{
    font-size:34px;
  }
}

/* ===== CLASS DETAIL - HEADER GIỐNG TRANG HỌC SINH ===== */

#classDetail .class-detail-page-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
  margin-bottom:18px;
}

#classDetail .class-detail-page-header > div:first-child{
  flex:1;
  min-width:0;
}

#classDetail .class-detail-attendance-summary {
  flex: 0 0 auto;
  min-width: 190px;
  padding: 10px 14px;
  border: 1px solid #dbe3ef;
  border-radius: 10px;
  background: #f8fafc;
}

#classDetail .class-detail-attendance-summary p {
  margin: 0;
  color: #64748b;
  font-size: 12px;
  font-weight: 750;
  line-height: 1.45;
}

#classDetail .class-detail-attendance-summary p + p {
  margin-top: 5px;
}

#classDetail .class-detail-attendance-summary b {
  display: block;
  color: #203879;
  font-size: 14px;
  font-weight: 900;
}

#classDetail .class-detail-page-header h1{
  margin:0 0 14px;
}

#classDetail .class-detail-page-header .primary-btn{
  flex-shrink:0;
  margin-top:4px;
}

#classDetail .class-detail-meta-line{
  display:grid;
  grid-template-columns:repeat(2, minmax(220px, auto));
  column-gap:42px;
  row-gap:8px;
  align-items:start;
}

#classDetail .class-detail-meta-line p{
  margin:0;
  color:#666;
  font-size:16px;
  font-weight:700;
  line-height:1.35;
}

#classDetail .class-detail-meta-line b{
  color:#333;
  font-weight:900;
}

@media(max-width:900px){
  #classDetail .class-detail-page-header{
    flex-direction:column;
  }

  #classDetail .class-detail-attendance-summary {
    width: 100%;
    box-sizing: border-box;
  }

  #classDetail .class-detail-page-header .primary-btn,
  #classDetail .class-detail-page-header .header-actions,
  #classDetail .class-unit-action-dropdown,
  #classDetail .class-unit-action-trigger{
    width:100%;
  }

  #classDetail .class-detail-meta-line{
    grid-template-columns:1fr;
    row-gap:6px;
  }
}

.enrollment-choice-box{
  display:grid;
  gap:12px;
}

/* ===== CLASS DETAIL - UNIT ENROLLMENT WARNING ===== */

.class-unit-enrollment-warning{
  display:flex;
  align-items:flex-start;
  gap:14px;
  padding:16px 18px;
  margin:0 0 18px;
  border-radius:16px;
  background:linear-gradient(135deg, #fff7ed, #fffbeb);
  border:1px solid #fed7aa;
  box-shadow:0 10px 24px rgba(245, 158, 11, 0.12);
}

.class-unit-enrollment-warning-icon{
  width:38px;
  height:38px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#f59e0b;
  color:white;
  font-size:20px;
  flex-shrink:0;
  box-shadow:0 8px 18px rgba(245, 158, 11, 0.25);
}

.class-unit-enrollment-warning-content{
  flex:1;
  min-width:0;
}

.class-unit-enrollment-warning-title{
  font-size:16px;
  font-weight:900;
  color:#92400e;
  margin:0 0 5px;
}

.class-unit-enrollment-warning-message{
  font-size:14px;
  font-weight:650;
  color:#78350f;
  line-height:1.45;
  margin:0;
}

.class-unit-enrollment-warning-meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:10px;
}

.class-unit-enrollment-warning-chip{
  padding:6px 10px;
  border-radius:999px;
  background:#ffffff;
  border:1px solid #fde68a;
  color:#92400e;
  font-size:13px;
  font-weight:800;
}

.status-badge.pending-enrollment{
  background:#fff7ed;
  color:#c2410c;
  border:1px solid #fed7aa;
  font-weight:900;
}

.class-unit-enrollment-warning-actions{
  display:flex;
  justify-content:flex-end;
  gap:8px;
  margin-top:14px;
}

.class-unit-enrollment-warning.is-expired{
  background:linear-gradient(135deg, #fff1f2, #fff7ed);
  border-color:#fecaca;
  box-shadow:none;
}

.class-unit-enrollment-warning.is-expired .class-unit-enrollment-warning-icon{
  background:#dc2626;
  box-shadow:none;
}

.class-unit-enrollment-warning.is-expired .class-unit-enrollment-warning-title{
  color:#991b1b;
}

.class-unit-enrollment-warning.is-expired .class-unit-enrollment-warning-message{
  color:#7f1d1d;
}

.class-detail-info-dropdown.is-disabled{
  cursor:not-allowed;
}

.class-detail-info-dropdown.is-disabled .info-action-btn{
  background:#e5e7eb;
  color:#9ca3af;
  cursor:not-allowed;
  opacity:0.8;
}

.class-detail-info-dropdown.is-disabled::before,
.class-detail-info-dropdown.is-disabled::after{
  position:absolute;
  left:50%;
  z-index:999999;
  pointer-events:none;
  opacity:0;
  visibility:hidden;
  transition:opacity 0.16s ease, transform 0.16s ease, visibility 0.16s ease;
}

.class-detail-info-dropdown.is-disabled::before{
  content:attr(data-tooltip);
  top:calc(100% + 10px);
  bottom:auto;
  width:max-content;
  max-width:260px;
  padding:8px 10px;
  border-radius:8px;
  background:#111827;
  color:#ffffff;
  font-size:12px;
  font-weight:700;
  line-height:1.4;
  text-align:center;
  white-space:normal;
  transform:translate(-50%, -4px);
}

.class-detail-info-dropdown.is-disabled::after{
  content:"";
  top:calc(100% + 4px);
  bottom:auto;
  border:6px solid transparent;
  border-bottom-color:#111827;
  transform:translateX(-50%);
}

#classDetail .crm-table tbody td:has(.class-detail-info-dropdown.is-disabled:hover),
#classDetail .crm-table tbody td:has(.class-detail-info-dropdown.is-disabled:focus-within){
  z-index:300;
}

.class-detail-info-dropdown.is-disabled:hover::before,
.class-detail-info-dropdown.is-disabled:hover::after,
.class-detail-info-dropdown.is-disabled:focus-within::before,
.class-detail-info-dropdown.is-disabled:focus-within::after{
  opacity:1;
  visibility:visible;
}

.class-detail-info-dropdown.is-disabled:hover::before,
.class-detail-info-dropdown.is-disabled:focus-within::before{
  transform:translate(-50%, 0);
}

.unit-warning-delete-btn{
  border:none;
  outline:none;
  cursor:pointer;
  padding:9px 14px;
  border-radius:999px;
  background:#fff;
  color:#b91c1c;
  border:1px solid #fecaca;
  font-size:13px;
  font-weight:900;
  box-shadow:0 6px 14px rgba(185, 28, 28, 0.08);
  transition:all 0.2s ease;
}

.unit-warning-delete-btn:hover{
  background:#fee2e2;
  border-color:#fca5a5;
  transform:translateY(-1px);
}

/* ===== DELETE REGISTERED UNIT CONFIRM MODAL ===== */

.unit-delete-confirm-modal{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  background:rgba(15, 23, 42, 0.42);
  backdrop-filter:blur(4px);
  z-index:9999;
  padding:20px;
}

.unit-delete-confirm-card{
  width:min(520px, 100%);
  background:#ffffff;
  border-radius:22px;
  padding:24px;
  display:flex;
  gap:16px;
  box-shadow:0 24px 70px rgba(15, 23, 42, 0.28);
  border:1px solid rgba(226, 232, 240, 0.9);
  animation:unitDeleteModalIn 0.18s ease-out;
}

@keyframes unitDeleteModalIn{
  from{
    opacity:0;
    transform:translateY(10px) scale(0.98);
  }
  to{
    opacity:1;
    transform:translateY(0) scale(1);
  }
}

.unit-delete-confirm-icon{
  width:44px;
  height:44px;
  border-radius:16px;
  background:#fee2e2;
  color:#b91c1c;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:24px;
  font-weight:900;
  flex-shrink:0;
}

.unit-delete-confirm-content{
  flex:1;
  min-width:0;
}

.unit-delete-confirm-content h3{
  margin:0 0 8px;
  font-size:20px;
  font-weight:950;
  color:#111827;
}

.unit-delete-confirm-text{
  margin:0;
  color:#4b5563;
  font-size:14px;
  line-height:1.5;
  font-weight:600;
}

.unit-delete-confirm-info{
  margin-top:14px;
  padding:14px;
  border-radius:16px;
  background:#f8fafc;
  border:1px solid #e5e7eb;
  color:#1f2937;
  font-size:14px;
  line-height:1.7;
}

.unit-delete-confirm-note{
  margin-top:12px;
  padding:10px 12px;
  border-radius:14px;
  background:#fff7ed;
  border:1px solid #fed7aa;
  color:#9a3412;
  font-size:13px;
  font-weight:800;
}

.unit-delete-confirm-actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin-top:18px;
}

.unit-delete-cancel-btn,
.unit-delete-danger-btn{
  border:none;
  cursor:pointer;
  padding:10px 16px;
  border-radius:999px;
  font-size:14px;
  font-weight:900;
}

.unit-delete-cancel-btn{
  background:#f3f4f6;
  color:#374151;
}

.unit-delete-cancel-btn:hover{
  background:#e5e7eb;
}

.unit-delete-danger-btn{
  background:#dc2626;
  color:#ffffff;
  box-shadow:0 10px 20px rgba(220, 38, 38, 0.22);
}

.unit-delete-danger-btn:hover{
  background:#b91c1c;
}

/* ===== UPDATE UNIT ACTUAL END DATE MODAL ===== */

.unit-date-update-modal{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  background:rgba(15, 23, 42, 0.42);
  backdrop-filter:blur(4px);
  z-index:9999;
  padding:20px;
}

.unit-date-update-card{
  width:min(540px, 100%);
  background:#ffffff;
  border-radius:22px;
  padding:24px;
  box-shadow:0 24px 70px rgba(15, 23, 42, 0.28);
  border:1px solid rgba(226, 232, 240, 0.9);
}

.unit-date-update-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:14px;
  margin-bottom:16px;
}

.unit-date-update-head h3{
  margin:0 0 6px;
  font-size:20px;
  font-weight:950;
  color:#111827;
}

.unit-date-update-head p{
  margin:0;
  color:#64748b;
  font-size:14px;
  font-weight:600;
  line-height:1.45;
}

.unit-date-update-close{
  width:34px;
  height:34px;
  border:none;
  border-radius:999px;
  background:#f3f4f6;
  color:#374151;
  font-size:22px;
  cursor:pointer;
}

.unit-date-update-close:hover{
  background:#e5e7eb;
}

.unit-date-update-info{
  padding:14px;
  border-radius:16px;
  background:#f8fafc;
  border:1px solid #e5e7eb;
  color:#1f2937;
  font-size:14px;
  line-height:1.7;
  margin-bottom:14px;
}

.unit-date-update-note{
  margin-top:12px;
  padding:11px 13px;
  border-radius:14px;
  background:#eff6ff;
  border:1px solid #bfdbfe;
  color:#1e40af;
  font-size:13px;
  font-weight:800;
  line-height:1.45;
}

.unit-date-update-actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin-top:18px;
}

.unit-date-cancel-btn,
.unit-date-save-btn{
  border:none;
  cursor:pointer;
  padding:10px 16px;
  border-radius:999px;
  font-size:14px;
  font-weight:900;
}

.unit-date-cancel-btn{
  background:#f3f4f6;
  color:#374151;
}

.unit-date-cancel-btn:hover{
  background:#e5e7eb;
}

.unit-date-save-btn{
  background:#2563eb;
  color:#ffffff;
  box-shadow:0 10px 20px rgba(37, 99, 235, 0.22);
}

.unit-date-save-btn:hover{
  background:#1d4ed8;
}

.unit-warning-edit-btn{
  border:none;
  outline:none;
  cursor:pointer;
  padding:9px 14px;
  border-radius:999px;
  background:#ffffff;
  color:#1d4ed8;
  border:1px solid #bfdbfe;
  font-size:13px;
  font-weight:900;
  /* box-shadow:0 6px 14px rgba(37, 99, 235, 0.08); */
  transition:all 0.2s ease;
}

.unit-warning-edit-btn:hover{
  background:#ffffff;
  border-color:rgb(213, 56, 56);
  transform:translateY(-1px);
}

.unit-edit-modal,
.unit-edit-confirm-modal{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  background:rgba(15, 23, 42, 0.42);
  backdrop-filter:blur(4px);
  z-index:9999;
  padding:20px;
}

.unit-edit-card,
.unit-edit-confirm-card{
  width:min(560px, 100%);
  background:#ffffff;
  border-radius:22px;
  padding:24px;
  box-shadow:0 24px 70px rgba(15, 23, 42, 0.28);
  border:1px solid rgba(226, 232, 240, 0.9);
}

.unit-edit-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:14px;
  margin-bottom:16px;
}

.unit-edit-head h3,
.unit-edit-confirm-content h3{
  margin:0 0 6px;
  font-size:20px;
  font-weight:950;
  color:#111827;
}

.unit-edit-head p,
.unit-edit-confirm-content p{
  margin:0;
  color:#64748b;
  font-size:14px;
  font-weight:600;
  line-height:1.45;
}

.unit-edit-close{
  width:34px;
  height:34px;
  border:none;
  border-radius:999px;
  background:#f3f4f6;
  color:#374151;
  font-size:22px;
  cursor:pointer;
}

.unit-edit-close:hover{
  background:#e5e7eb;
}

.unit-edit-info,
.unit-edit-confirm-info{
  padding:14px;
  border-radius:24px;
  background:#f8fafc;
  border:1px solid #e5e7eb;
  color:#1f2937;
  font-size:14px;
  line-height:1.7;
  margin-bottom:14px;
}

.unit-edit-note{
  margin-top:12px;
  padding:11px 13px;
  border-radius:24px;
  background:#eff6ff;
  border:1px solid #bfdbfe;
  color:#1e40af;
  font-size:13px;
  font-weight:800;
  line-height:1.45;
}

.unit-edit-actions,
.unit-edit-confirm-actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin-top:18px;
}

.unit-edit-cancel-btn,
.unit-edit-save-btn{
  border:none;
  cursor:pointer;
  padding:10px 16px;
  border-radius:10px;
  font-size:14px;
  font-weight:900;
}

.unit-edit-cancel-btn{
  background:#f3f4f6;
  color:#374151;
}

.unit-edit-cancel-btn:hover{
  background:#e5e7eb;
}

.unit-edit-save-btn{
  background:#2563eb;
  color:#ffffff;
  box-shadow:0 10px 20px rgba(37, 99, 235, 0.22);
}

.unit-edit-save-btn:hover{
  background:#1d4ed8;
}

.unit-edit-confirm-card{
  display:flex;
  gap:16px;
}

.unit-edit-confirm-icon{
  width:44px;
  height:44px;
  border-radius:10px;
  background:#dbeafe;
  color:#1d4ed8;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:24px;
  font-weight:900;
  flex-shrink:0;
}

.unit-edit-confirm-content{
  flex:1;
  min-width:0;
}

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

.unit-edit-form-grid .form-group:last-child{
  grid-column:1 / -1;
}

@media (max-width:640px){
  .unit-edit-form-grid{
    grid-template-columns:1fr;
  }

  .unit-edit-form-grid .form-group:last-child{
    grid-column:auto;
  }
}

/* ===== CLASS DETAIL - EDIT UNIT BUTTON ===== */

.unit-edit-header-btn{
  height:42px;
  padding:0 17px 0 12px;
  border-radius:12px;
  border:1px solid #93c5fd;
  background:#eff6ff;
  color:#1d4ed8;
  font-size:14px;
  font-weight:900;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  box-shadow:none;
  transition:background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
  white-space:nowrap;
}

.unit-edit-header-btn:hover{
  background:#dbeafe;
  border-color:#3b82f6;
  color:#1e40af;
  box-shadow:none;
  transform:translateY(-1px);
}

.unit-edit-header-btn:focus-visible{
  outline:3px solid rgba(59, 130, 246, 0.24);
  outline-offset:2px;
}

.unit-edit-header-btn:active{
  transform:translateY(0);
}

.unit-edit-header-icon{
  width:25px;
  height:25px;
  border-radius:8px;
  background:#bfdbfe;
  color:#1d4ed8;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:16px;
  font-weight:950;
  line-height:1;
}

.class-detail-page-header .header-actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.class-detail-unit-status{
  margin-left:8px;
  color:#15803d;
  font-size:13px;
  font-weight:900;
  white-space:nowrap;
}

.class-unit-action-dropdown{
  position:relative;
}

.class-unit-action-trigger{
  min-width:138px;
  height:42px;
  padding:0 14px 0 17px;
  border:1px solid #dfe3eb;
  border-radius:10px;
  background:#ffffff;
  color:var(--primary);
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  font-size:14px;
  font-weight:800;
  cursor:pointer;
  box-shadow:none;
  white-space:nowrap;
}

.class-unit-action-trigger:hover,
.class-unit-action-trigger[aria-expanded="true"]{
  border-color:var(--accent);
  background:var(--accent);
  color:#ffffff;
}

.class-unit-action-trigger:focus-visible{
  outline:3px solid rgba(195, 37, 70, 0.2);
  outline-offset:2px;
}

.class-unit-action-chevron{
  font-size:17px;
  line-height:1;
  transition:transform 0.18s ease;
}

.class-unit-action-trigger[aria-expanded="true"] .class-unit-action-chevron{
  transform:rotate(180deg);
}

.class-unit-action-menu{
  position:absolute;
  top:calc(100% + 7px);
  right:0;
  z-index:2000;
  display:none;
  min-width:220px;
  padding:6px;
  border:1px solid #e2e8f0;
  border-radius:12px;
  background:#ffffff;
  box-shadow:0 18px 45px rgba(15, 23, 42, 0.16);
}

.class-unit-action-menu.show{
  display:block;
}

.class-unit-action-menu button{
  width:100%;
  padding:10px 12px;
  border:0;
  border-radius:8px;
  background:transparent;
  color:#334155;
  display:block;
  font-size:13px;
  font-weight:800;
  text-align:left;
  cursor:pointer;
}

.class-unit-action-menu button:hover{
  background:#fff1f3;
  color:var(--accent);
}

/* ===== FIX EDIT UNIT MODAL BEING COVERED BY HEADER ===== */

.unit-date-update-modal{
  position:fixed !important;
  inset:0 !important;
  z-index:50000 !important;
  display:none;
  align-items:center;
  justify-content:center;
  background:rgba(32, 29, 25, 0.46);
  backdrop-filter:blur(0px);
  padding:20px;
  overflow-y:auto;
  isolation:isolate;
}

.unit-date-update-card{
  position:relative;
  z-index:1;
  width:min(620px, 100%);
  max-height:calc(100vh - 40px);
  max-height:calc(100dvh - 40px);
  overflow-y:auto;
  overscroll-behavior:contain;
  background:#ffffff;
  border-radius:24px;
  padding:24px;
  box-shadow:0 28px 80px rgba(15, 23, 42, 0.32);
  border:1px solid rgba(226, 232, 240, 0.95);
}

.unit-date-update-head{
  position:sticky;
  top:0;
  z-index:2;
  background:#ffffff;
  padding-bottom:14px;
  margin-bottom:16px;
  border-bottom:1px solid #eef2f7;
}

body.unit-edit-modal-open{
  overflow:hidden;
}

@media (max-width:640px){
  .unit-date-update-modal{
    align-items:flex-start;
    padding:12px;
  }

  .unit-date-update-card{
    max-height:calc(100vh - 24px);
    max-height:calc(100dvh - 24px);
    padding:18px;
    border-radius:18px;
  }

  #classDetail .class-detail-page-header .unit-edit-header-btn{
    width:100%;
  }

  #classDetail .class-detail-page-header .header-actions,
  #classDetail .class-unit-action-dropdown,
  #classDetail .class-unit-action-trigger{
    width:100%;
  }

  #classDetail .class-unit-action-menu{
    left:0;
    right:auto;
    width:100%;
  }
}

/* ===== EDIT UNIT - PROFESSIONAL SAVE CONFIRMATION ===== */

/* ===== SUPABASE CLASS SCHEDULES ===== */

.schedule-page-header h1{
  margin-bottom:6px;
}

body.schedule-page-open .app.no-sidebar main{
  overflow:hidden;
}

#schedules.page.active{
  display:flex;
  flex-direction:column;
  height:calc(100vh - 190px);
  min-height:0;
  overflow:hidden;
}

.schedule-page-header{
  flex:0 0 auto;
}

.schedule-view-tabs{
  flex:0 0 auto;
  margin-top:0;
}

.schedule-view-tabs button .schedule-view-icon{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:18px;
  min-width:18px;
  height:18px;
  border:1.5px solid currentColor;
  border-radius:50%;
}

.schedule-view-icon.is-timetable::before{
  content:"";
  width:8px;
  height:1.5px;
  border-radius:999px;
  background:currentColor;
  box-shadow:0 -3px 0 currentColor, 0 3px 0 currentColor;
}

.schedule-view-icon.is-outside-work::before{
  content:"";
  width:10px;
  height:10px;
  border-radius:50%;
  background:conic-gradient(
    currentColor 0deg 78deg,
    transparent 78deg 120deg,
    currentColor 120deg 198deg,
    transparent 198deg 240deg,
    currentColor 240deg 318deg,
    transparent 318deg 360deg
  );
  -webkit-mask:radial-gradient(circle, transparent 0 3px, #000 3.5px 5px, transparent 5.5px);
  mask:radial-gradient(circle, transparent 0 3px, #000 3.5px 5px, transparent 5.5px);
}

.schedule-view-icon.is-video-updates::before{content:"▶";font-size:8px;line-height:1;margin-left:1px}

#classVideoUpdatesList{flex:1 1 auto;min-height:0;overflow:auto;padding:0 2px 42px;scrollbar-gutter:stable both-edges}
.video-week-toolbar{display:flex;align-items:center;justify-content:center;gap:8px;margin:0 0 12px;padding:10px;border:1px solid #e2e8f0;border-radius:12px;background:#fff}
.video-week-toolbar button{height:36px;padding:0 13px;border:1px solid #d7deea;border-radius:9px;background:#fff;color:var(--primary);font-weight:800;cursor:pointer}
.video-week-toolbar label{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:800;color:#475569}.video-week-toolbar input{margin:0;width:auto;padding:7px 10px}
.video-week-summary{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:10px;padding:11px 14px;border-radius:10px;background:#eef4ff;color:var(--primary)}.video-week-summary span{font-size:13px}
.video-update-shift{margin-bottom:18px}.video-update-table-container{overflow:visible;border:1px solid #e2e8f0;border-radius:12px;box-shadow:var(--shadow)}
.video-update-table{width:100%;table-layout:fixed}.video-update-table thead th{position:sticky;top:0;z-index:20;background:var(--primary)}
.video-update-table th:nth-child(1){width:11%;border-top-left-radius:11px}.video-update-table th:nth-child(2){width:10%}.video-update-table th:nth-child(3){width:13%}.video-update-table th:nth-child(4){width:10%}.video-update-table th:nth-child(5){width:14%}.video-update-table th:nth-child(6){width:18%}.video-update-table th:nth-child(7){width:15%}.video-update-table th:last-child{width:9%;border-top-right-radius:11px}
.video-update-table td{white-space:normal;overflow-wrap:anywhere}.video-update-table td small{display:block;margin-top:3px;color:#64748b}.video-update-table a{color:#2563eb;font-weight:800}.video-update-note{max-width:240px}
.video-update-link-cell{position:relative}.video-update-link-cell input{width:100%;min-width:0;margin:0;padding:8px 30px 8px 9px;border:1px solid #dbe3ef;border-radius:8px;background:#fff;font-size:12px}.video-update-link-cell input:focus{border-color:#7895e8;box-shadow:0 0 0 3px rgba(76,105,196,.12);outline:0}.video-update-link-cell a{position:absolute;right:18px;top:50%;transform:translateY(-50%);text-decoration:none}
.video-update-status-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;width:100%;min-height:34px;padding:7px 9px;border:1px solid #d7deea;border-radius:9px;background:#fff;color:#475569;font-size:12px;font-weight:800;white-space:nowrap;cursor:pointer;transition:.16s ease}.video-update-status-btn span{width:7px;height:7px;border-radius:50%;background:#94a3b8}.video-update-status-btn:hover{border-color:#91a6e6;background:#f5f7ff;color:var(--primary);transform:translateY(-1px)}.video-update-status-btn.is-updated{border-color:#b7e4c7;background:#effaf3;color:#168344}.video-update-status-btn.is-updated span{background:#22a85a}
.video-update-class-name b{color:var(--primary);font-size:14px}.video-update-overdue{color:#dc2626;font-weight:900}
.workday-header-actions{display:flex;gap:8px}.workday-close-btn,.workday-holiday-btn{border-radius:10px;padding:10px 14px;font-weight:850;cursor:pointer}.workday-close-btn{border:1px solid #173b8f;background:#173b8f;color:#fff}.workday-holiday-btn{border:1px solid #d7deea;background:#fff;color:#334155}.workday-modal-content{width:min(1120px,96vw);max-width:1120px}.workday-payroll-table{margin-top:14px;border:1px solid #e2e8f0;border-radius:12px;overflow:auto;max-height:58vh}.workday-payroll-head,.workday-payroll-row{display:grid;grid-template-columns:1.05fr 1.35fr 1fr 1.35fr;min-width:850px}.workday-payroll-head{position:sticky;top:0;z-index:3;background:#173b8f;color:#fff}.workday-payroll-head b,.workday-payroll-row>div{padding:11px;border-right:1px solid #e2e8f0}.workday-payroll-row{border-top:1px solid #e2e8f0}.workday-payroll-row small{display:block;color:#64748b;margin-top:3px}.workday-class-chip{display:inline-flex;align-items:center;gap:5px;margin:2px;padding:5px 7px;border-radius:7px;background:#eef3ff;color:#173b8f;font-size:12px;font-weight:800}.workday-class-chip button{border:0;background:transparent;color:#ef4444;font-weight:900;cursor:pointer}.workday-rep-time{display:flex;align-items:center;gap:5px}.workday-rep-time input{min-width:86px;padding:7px}.workday-none{color:#94a3b8}
.video-update-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.video-update-form-grid .full{grid-column:1/-1}.video-update-modal-content{max-width:680px}
@media(max-width:760px){.video-week-toolbar{flex-wrap:wrap}.video-week-summary{align-items:flex-start;flex-direction:column}.video-update-form-grid{grid-template-columns:1fr}.video-update-form-grid .full{grid-column:auto}}

.workday-header-actions .workday-close-btn,.workday-header-actions .workday-holiday-btn{font-size:14px;line-height:1.2}
.workday-modal-content{display:flex;flex-direction:column;max-height:90vh;overflow:hidden}
.workday-modal-content .workday-payroll-table{flex:1 1 auto;min-height:0;max-height:none}
.workday-modal-content>.schedule-modal-actions{position:relative;z-index:5;flex:0 0 auto;margin-top:12px;padding-top:12px;background:#fff}
.workday-holiday-modal{display:flex;flex-direction:column;max-height:88vh;overflow:hidden;max-width:760px}
.holiday-form-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}.holiday-form-grid input,.holiday-form-grid select{width:100%}
.holiday-saved-list{min-height:80px;max-height:310px;overflow:auto;border:1px solid #e2e8f0;border-radius:10px}.holiday-saved-list>div{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 13px;border-bottom:1px solid #edf1f7}.holiday-saved-list>div:last-child{border-bottom:0}.holiday-saved-list small{display:block;margin-top:3px;color:#64748b}.holiday-saved-list button{margin-left:6px;padding:6px 9px;border:1px solid #d7deea;border-radius:7px;background:#fff;color:#334155;font-weight:750;cursor:pointer}.holiday-saved-list button.danger{color:#dc2626;border-color:#fecaca}.workday-holiday-modal>.schedule-modal-actions{flex:0 0 auto;margin-top:12px}
@media(max-width:760px){.workday-header-actions{flex-wrap:wrap}.holiday-form-grid{grid-template-columns:1fr}}
.holiday-saved-list>div.is-pending-delete{background:#fff1f2;opacity:.65}.holiday-saved-list>div.is-pending-delete b,.holiday-saved-list>div.is-pending-delete small{text-decoration:line-through}
.workday-header-actions>button{min-width:132px;min-height:40px;font-size:14px!important;line-height:1.2!important;padding:10px 14px!important}
.schedule-day-toolbar{display:flex;align-items:center;justify-content:center;gap:8px;margin:0 0 12px;padding:10px;border:1px solid #e2e8f0;border-radius:12px;background:#fff}.schedule-day-toolbar button{height:36px;padding:0 13px;border:1px solid #d7deea;border-radius:9px;background:#fff;color:var(--primary);font-weight:800;cursor:pointer}.schedule-day-toolbar label{display:flex;align-items:center;gap:8px;color:#475569;font-size:13px;font-weight:800}.schedule-day-toolbar input{width:auto;margin:0;padding:7px 10px}.schedule-workday-status{padding:6px 9px;border-radius:999px;font-size:12px;font-weight:850}.schedule-workday-status.is-current{background:#eaf8ef;color:#168344}.schedule-workday-status.is-closed{background:#eef3ff;color:#173b8f}.schedule-workday-status.is-pending{background:#fff1f2;color:#dc2626}@media(max-width:760px){.schedule-day-toolbar{flex-wrap:wrap}.workday-header-actions>button{min-width:0}}
.schedule-day-toolbar{padding:7px 9px;margin-bottom:9px;gap:6px}.schedule-day-toolbar button{height:32px;padding:0 10px;font-size:12px}.schedule-day-toolbar button:nth-child(2){width:118px}.schedule-day-toolbar label{font-size:12px}.schedule-day-toolbar input{height:32px;width:118px;padding:5px 7px;font-size:12px}.schedule-workday-status{padding:5px 8px;font-size:11px}
.workday-close-btn,.workday-holiday-btn{transition:transform .16s ease,box-shadow .16s ease,background-color .16s ease,border-color .16s ease}.workday-close-btn:hover{transform:translateY(-1px);background:#102f78;box-shadow:0 6px 14px rgba(23,59,143,.2)}.workday-holiday-btn:hover{transform:translateY(-1px);border-color:#9bace0;background:#f4f7ff;box-shadow:0 6px 14px rgba(23,59,143,.1)}
.schedule-other-info{min-width:145px;background:#fbfcff}.schedule-other-info span{display:block;margin:0 0 7px;color:#475569;font-size:12px;line-height:1.35}.schedule-other-info span:last-child{margin-bottom:0}.schedule-other-info b{display:block;margin-bottom:2px;color:#172554;font-size:11px}.schedule-other-info .schedule-ptbhp,.schedule-other-info .schedule-ptbhp b{color:#dc2626;font-weight:850}
.schedule-actions-cell .schedule-row-actions{flex-direction:column;align-items:stretch;gap:7px}.schedule-actions-cell .schedule-row-actions button{display:block;width:100%;white-space:nowrap}
.schedule-day-toolbar,.video-week-toolbar{min-height:39px;padding:5px 7px;margin-bottom:8px;gap:5px;border-radius:10px}
.schedule-day-toolbar button,.video-week-toolbar button{height:29px;padding:0 8px;border-radius:8px;font-size:11.5px}
.schedule-day-toolbar button:nth-child(2),.video-week-toolbar button:nth-child(2){width:108px}
.schedule-day-toolbar label,.video-week-toolbar label{gap:6px;font-size:11.5px}
.schedule-day-toolbar input,.video-week-toolbar input{width:108px;height:29px;margin:0;padding:4px 6px;font-size:11.5px}
.schedule-workday-status{padding:4px 7px;font-size:10.5px}
.schedule-workday-status{display:inline-flex;align-items:center;justify-content:center;height:29px;line-height:1;white-space:nowrap}
.schedule-table tr.schedule-class-group-start:not(:first-child)>td{border-top:3px solid #b8c3d6!important}.video-update-table tbody tr+tr td,.outside-work-table tbody tr+tr td{border-top:2px solid #d5ddea}
.schedule-shift-heading,.schedule-shift-title{min-height:34px!important;padding:6px 11px!important}.schedule-shift-heading h2,.schedule-shift-title{font-size:14px!important}.schedule-shift-heading span{font-size:10.5px!important}
.schedule-table thead th,.outside-work-table thead th,.video-update-table thead th{padding-top:7px!important;padding-bottom:7px!important;font-size:11.5px!important}.schedule-table thead th{top:34px}.schedule-table th:last-child{top:34px}
.schedule-shift-heading{height:34px;box-shadow:none}.schedule-table-container{margin-top:-1px!important}.schedule-table thead th{top:33px}.schedule-table th:last-child{top:33px}
.schedule-table tr.schedule-class-group-start:not(:first-child)>td{border-top:1.5px solid #173b8f!important}
.schedule-class-cell{width:230px;min-width:230px;padding-left:12px!important;padding-right:12px!important}.schedule-class-cell>strong{font-size:19px}.schedule-class-cell p{max-width:205px}
.schedule-day-toolbar,.video-week-toolbar{display:grid!important;grid-template-columns:44px 216px 390px 44px 160px;align-items:center;justify-content:center;column-gap:10px}
.schedule-day-toolbar>button,.video-week-toolbar>button{box-sizing:border-box;width:44px!important;height:40px!important;padding:0!important}
.schedule-day-toolbar>button:nth-child(2),.video-week-toolbar>button:nth-child(2){width:216px!important}
.schedule-day-toolbar>label,.video-week-toolbar>label{display:grid;grid-template-columns:minmax(0,1fr) 216px;align-items:center;width:390px;gap:10px;white-space:nowrap}
.schedule-day-toolbar>label input,.video-week-toolbar>label input{box-sizing:border-box;width:216px!important;height:40px!important;margin:0!important}
.schedule-day-toolbar>.schedule-workday-status,.video-week-toolbar>.schedule-workday-status{box-sizing:border-box;width:160px;height:40px}
.toolbar-status-placeholder{visibility:hidden}
@media(max-width:980px){.schedule-day-toolbar,.video-week-toolbar{grid-template-columns:40px 150px minmax(270px,360px) 40px;column-gap:6px}.schedule-day-toolbar>button,.video-week-toolbar>button{width:40px!important}.schedule-day-toolbar>button:nth-child(2),.video-week-toolbar>button:nth-child(2){width:150px!important}.schedule-day-toolbar>label,.video-week-toolbar>label{width:100%;grid-template-columns:minmax(0,1fr) 170px}.schedule-day-toolbar>label input,.video-week-toolbar>label input{width:170px!important}.schedule-day-toolbar>.schedule-workday-status,.video-week-toolbar>.schedule-workday-status{display:none}}
.schedule-day-toolbar,.video-week-toolbar{display:flex!important;align-items:center;justify-content:center;flex-wrap:nowrap;gap:6px;max-width:100%;overflow:hidden}
.schedule-day-toolbar>button,.video-week-toolbar>button{flex:0 0 38px;width:38px!important;height:34px!important}
.schedule-day-toolbar>button:nth-child(2),.video-week-toolbar>button:nth-child(2){flex-basis:150px;width:150px!important}
.schedule-day-toolbar>label,.video-week-toolbar>label{display:flex;flex:0 1 350px;width:auto;min-width:260px;gap:7px}
.schedule-day-toolbar>label input,.video-week-toolbar>label input{flex:0 0 170px;width:170px!important;height:34px!important}
.schedule-day-toolbar>.schedule-workday-status,.video-week-toolbar>.schedule-workday-status{flex:0 1 125px;width:125px;height:34px}
.toolbar-status-placeholder{display:inline-flex!important;visibility:hidden}
.schedule-shift-heading{box-sizing:border-box;height:34px!important;min-height:34px!important;padding:5px 11px!important}.schedule-table-container{margin-top:0!important;padding-top:0!important}.schedule-table{margin-top:0!important}.schedule-table thead th,.schedule-table th:last-child{top:34px}
.schedule-table tr.schedule-class-group-start:not(:first-child)>td{border-top:0!important}.video-update-table tbody tr+tr td,.outside-work-table tbody tr+tr td{border-top:0}
@media(max-width:760px){.schedule-day-toolbar,.video-week-toolbar{flex-wrap:wrap;overflow:visible}.schedule-day-toolbar>.schedule-workday-status,.video-week-toolbar>.schedule-workday-status{display:none!important}.toolbar-status-placeholder{display:none!important}}
.schedule-day-toolbar>label,.video-week-toolbar>label{display:grid!important;grid-template-columns:minmax(0,1fr) 170px;flex:0 0 340px!important;width:340px!important;min-width:340px!important;align-items:center;gap:7px}
.schedule-day-toolbar>label input,.video-week-toolbar>label input{display:block;box-sizing:border-box;min-width:0!important;max-width:170px!important;width:170px!important;height:34px!important;margin:0!important}
.schedule-day-toolbar>.schedule-workday-status,.video-week-toolbar>.schedule-workday-status{flex:0 0 230px!important;width:230px!important;max-width:230px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:900px){.schedule-day-toolbar>label,.video-week-toolbar>label{flex-basis:310px!important;width:310px!important;min-width:310px!important;grid-template-columns:minmax(0,1fr) 155px}.schedule-day-toolbar>label input,.video-week-toolbar>label input{width:155px!important;max-width:155px!important}.schedule-day-toolbar>.schedule-workday-status,.video-week-toolbar>.schedule-workday-status{flex-basis:180px!important;width:180px!important}}
.schedule-day-toolbar>label,.video-week-toolbar>label{display:flex!important;flex:0 0 auto!important;width:auto!important;min-width:0!important;gap:8px;white-space:nowrap}
.schedule-day-toolbar>label input,.video-week-toolbar>label input{flex:0 0 170px!important;width:170px!important;max-width:170px!important}
@media(max-width:900px){.schedule-day-toolbar>label,.video-week-toolbar>label{flex-basis:auto!important;width:auto!important;min-width:0!important}.schedule-day-toolbar>label input,.video-week-toolbar>label input{flex-basis:155px!important;width:155px!important;max-width:155px!important}}
.schedule-day-toolbar>label{transform:translateY(-4px)}
.video-week-toolbar>label{transform:translateY(-4px)}
.video-week-toolbar>.toolbar-status-placeholder{display:none!important}
.schedule-table thead .schedule-shift-table-row th{position:sticky;top:0!important;z-index:330!important;height:34px;padding:5px 11px!important;border-radius:10px 10px 0 0;background:#fff7ed!important;color:#9a3412!important;border-bottom:1px solid #fed7aa;box-shadow:none;display:table-cell}
.schedule-shift-table-row th span{float:left;font-size:14px;font-weight:950}.schedule-shift-table-row th small{float:right;color:#c2410c;font-size:10.5px;font-weight:900}
.schedule-table thead tr:not(.schedule-shift-table-row) th{top:34px!important}.schedule-table-container{margin-top:0!important}
.schedule-day-toolbar,.video-week-toolbar{box-sizing:border-box;width:100%!important;height:46px!important;min-height:46px!important;max-height:46px!important;margin:0 0 8px!important;padding:5px 7px!important}
#scheduleHeaderActions[hidden]{display:none!important}
.schedule-class-cell{width:195px;min-width:195px}.schedule-class-cell p{max-width:170px}.schedule-other-info{border-left:1px solid #cbd5e1!important}
.schedule-table thead th:nth-child(8){border-left:1px solid rgba(255,255,255,.35)}
.schedule-class-cell{width:165px;min-width:165px}.schedule-class-cell p{max-width:142px}.schedule-table{min-width:1260px}.schedule-table th:nth-child(2),.schedule-table td:nth-child(2){min-width:72px}.schedule-table th:nth-child(3),.schedule-table td:nth-child(3){min-width:150px}.schedule-table th:nth-child(4),.schedule-table td:nth-child(4){min-width:125px}.schedule-table th:nth-child(5),.schedule-table td:nth-child(5){min-width:105px}.schedule-table th:nth-child(6),.schedule-table td:nth-child(6){min-width:155px}.schedule-table th:nth-child(7),.schedule-table td:nth-child(7){min-width:155px}
.schedule-table{width:100%;min-width:0!important;table-layout:fixed}.schedule-table th,.schedule-table td{min-width:0!important}.schedule-table th:nth-child(1){width:15%}.schedule-table th:nth-child(2){width:6%}.schedule-table th:nth-child(3){width:12%}.schedule-table th:nth-child(4){width:10%}.schedule-table th:nth-child(5){width:8%}.schedule-table th:nth-child(6){width:13%}.schedule-table th:nth-child(7){width:13%}.schedule-table th:nth-child(8){width:23%;border-left:1px solid rgba(255,255,255,.35)}
.schedule-actions-cell{position:static!important;width:auto!important;min-width:0!important;box-shadow:none;white-space:normal}.schedule-actions-cell .schedule-other-info{margin:-3px 0 12px;padding:0 0 10px;border-left:0!important;border-bottom:1px solid #e2e8f0;background:transparent}.schedule-actions-cell .schedule-other-info span{margin-bottom:5px}.schedule-table td{overflow-wrap:anywhere}.schedule-table-container{overflow-x:hidden!important}
.schedule-table th:nth-child(1),.schedule-table td.schedule-class-cell{width:300px!important}.schedule-class-cell{width:300px!important;min-width:300px!important}.schedule-class-cell p{max-width:275px}.schedule-table th:nth-child(3),.schedule-table td:nth-child(3){width:125px!important}.schedule-table th:nth-child(4),.schedule-table td:nth-child(4){width:150px!important}
.schedule-unit-under-name{display:inline-flex;margin-top:5px;margin-bottom:4px;padding:5px 10px;border:1px solid #bfdbfe;border-radius:8px;background:#dbeafe;color:#1d4ed8;font-size:15px;font-weight:950;line-height:1.15;box-shadow:0 2px 5px rgba(29,78,216,.1)}
.schedule-class-cell>strong{font-size:28px!important;line-height:1.12}.schedule-unit-under-name{display:block;margin:6px 0 4px;padding:0;border:0;border-radius:0;background:transparent;color:#dc2626;font-size:24px;font-weight:950;line-height:1.15;box-shadow:none}
.schedule-table col.schedule-col-class{width:180px}.schedule-table th:nth-child(1),.schedule-table td.schedule-class-cell,.schedule-class-cell{width:180px!important;min-width:180px!important}.schedule-class-cell p{max-width:156px}.schedule-table{width:100%!important;min-width:0!important}.schedule-table-container{overflow-x:hidden!important}
.schedule-table col.schedule-col-time{width:120px}.schedule-table th:nth-child(4),.schedule-table td:nth-child(4){width:120px!important}
.schedule-table col.schedule-col-class{width:160px}.schedule-table th:nth-child(1),.schedule-table td.schedule-class-cell,.schedule-class-cell{width:160px!important;min-width:160px!important}.schedule-class-cell p{max-width:136px}
#classSchedulesList{overflow-x:hidden!important}.schedule-table-container{width:100%!important;max-width:100%!important;overflow-x:hidden!important}.schedule-table{width:100%!important;max-width:100%!important;min-width:0!important;table-layout:fixed!important}
.schedule-table col.schedule-col-class{width:17.78%}.schedule-table col.schedule-col-period{width:7.78%}.schedule-table col.schedule-col-responsible{width:11.11%}.schedule-table col.schedule-col-time{width:13.33%}.schedule-table col.schedule-col-room{width:11.11%}.schedule-table col.schedule-col-assistants{width:13.89%}.schedule-table col.schedule-col-video{width:13.89%}.schedule-table col.schedule-col-other{width:11.11%}
.schedule-table th:nth-child(1),.schedule-table td.schedule-class-cell,.schedule-class-cell{width:17.78%!important;min-width:0!important}.schedule-table th:nth-child(2),.schedule-table td:nth-child(2){width:7.78%!important}.schedule-table th:nth-child(3),.schedule-table td:nth-child(3){width:11.11%!important}.schedule-table th:nth-child(4),.schedule-table td:nth-child(4){width:13.33%!important}.schedule-table th:nth-child(5),.schedule-table td:nth-child(5){width:11.11%!important}.schedule-table th:nth-child(6),.schedule-table td:nth-child(6){width:13.89%!important}.schedule-table th:nth-child(7),.schedule-table td:nth-child(7){width:13.89%!important}.schedule-table th:nth-child(8),.schedule-table td:nth-child(8){width:11.11%!important}
.schedule-table col.schedule-col-class{width:18.18%}.schedule-table col.schedule-col-period{width:7.95%}.schedule-table col.schedule-col-responsible{width:11.36%}.schedule-table col.schedule-col-time{width:11.36%}.schedule-table col.schedule-col-room{width:11.36%}.schedule-table col.schedule-col-assistants{width:14.2%}.schedule-table col.schedule-col-video{width:14.2%}.schedule-table col.schedule-col-other{width:11.39%}
.schedule-table th:nth-child(1),.schedule-table td.schedule-class-cell,.schedule-class-cell{width:18.18%!important}.schedule-table th:nth-child(2),.schedule-table td:nth-child(2){width:7.95%!important}.schedule-table th:nth-child(3),.schedule-table td:nth-child(3){width:11.36%!important}.schedule-table th:nth-child(4),.schedule-table td:nth-child(4){width:11.36%!important}.schedule-table th:nth-child(5),.schedule-table td:nth-child(5){width:11.36%!important}.schedule-table th:nth-child(6),.schedule-table td:nth-child(6){width:14.2%!important}.schedule-table th:nth-child(7),.schedule-table td:nth-child(7){width:14.2%!important}.schedule-table th:nth-child(8),.schedule-table td:nth-child(8){width:11.39%!important}
.schedule-class-cell{vertical-align:middle!important}.schedule-actions-cell .schedule-other-info{border-bottom:0!important;padding-bottom:2px;margin-bottom:8px}
.schedule-table col.schedule-col-class{width:200px}.schedule-table col.schedule-col-period{width:70px}.schedule-table col.schedule-col-responsible{width:100px}.schedule-table col.schedule-col-time{width:125px}.schedule-table col.schedule-col-room{width:100px}.schedule-table col.schedule-col-assistants{width:125px}.schedule-table col.schedule-col-video{width:125px}.schedule-table col.schedule-col-other{width:100px}

#branchClassesSummary .crm-table tbody tr,
#branchTeachersPanel .crm-table tbody tr,
#branchStudentsPanel .crm-table tbody tr{
  transition:transform .16s ease, box-shadow .16s ease;
}

#branchClassesSummary .crm-table tbody td,
#branchTeachersPanel .crm-table tbody td,
#branchStudentsPanel .crm-table tbody td{
  transition:background-color .16s ease, color .16s ease;
}

#branchClassesSummary .crm-table tbody tr:hover,
#branchTeachersPanel .crm-table tbody tr:hover,
#branchStudentsPanel .crm-table tbody tr:hover{
  transform:translateY(-1px);
  box-shadow:0 5px 14px rgba(25,42,114,.09);
}

#branchClassesSummary .crm-table tbody tr:hover td,
#branchTeachersPanel .crm-table tbody tr:hover td,
#branchStudentsPanel .crm-table tbody tr:hover td{
  background:#f0f4ff !important;
}

.schedule-view-panel{
  display:none;
  flex:1 1 auto;
  min-height:0;
}

.schedule-view-panel.active{
  display:flex;
  flex-direction:column;
}

#classSchedulesList{
  flex:1 1 auto;
  min-height:0;
  overflow:auto;
  padding:0 2px 42px;
  scrollbar-gutter:stable both-edges;
  overscroll-behavior:contain;
}

#outsideClassWorkList{
  flex:1 1 auto;
  min-height:0;
  overflow:auto;
  padding:0 2px 42px;
  scrollbar-gutter:stable both-edges;
}

.outside-work-table-container{
  overflow:visible;
  border:1px solid #e2e8f0;
  border-radius:12px;
  box-shadow:var(--shadow);
}

.outside-work-table{
  width:100%;
  min-width:0;
  table-layout:fixed;
}

.outside-work-table thead th{
  position:sticky;
  top:0;
  z-index:20;
  background:var(--primary);
  white-space:normal;
}

.outside-work-table thead th:first-child{
  width:15%;
  border-top-left-radius:11px;
}

.outside-work-table thead th:nth-child(2){ width:50%; }
.outside-work-table thead th:nth-child(3){ width:23%; }
.outside-work-table thead th:nth-child(4){ width:12%; }

.outside-work-table thead th:last-child{
  border-top-right-radius:11px;
}

.outside-work-table th small{
  color:rgba(255,255,255,.75);
  font-size:11px;
}

.outside-work-table td{
  padding:14px;
  vertical-align:top;
  white-space:normal;
  overflow-wrap:anywhere;
  line-height:1.5;
}

.outside-work-table .outside-work-staff{
  background:#f8fafc;
  color:var(--primary);
  font-weight:900;
}

/* Xen kẽ từng dòng để dễ theo dõi ở cả hai bảng vận hành. */
.video-update-table tbody tr:nth-child(odd) > td {
  background: #f4f6f9 !important;
}

.video-update-table tbody tr:nth-child(even) > td {
  background: #fff !important;
}

.outside-work-table tbody tr.outside-task-group-gray > td { background:#f4f6f9 !important; }
.outside-work-table tbody tr.outside-task-group-white > td { background:#fff !important; }

@media (max-width: 640px) {
  .carelog-detail-content,
  .carelog-detail-content.has-image-layout {
    width: calc(100vw - 16px);
    max-height: calc(100dvh - 16px);
  }

  .carelog-detail-gallery img { max-height: none; }
}

.outside-work-duty-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:10px;
}

.outside-work-duty-grid > div,
.outside-work-extra-grid > div{
  padding:10px;
  border:1px solid #e2e8f0;
  border-radius:9px;
  background:#f8fafc;
}

.outside-work-duty-grid b,
.outside-work-extra-grid b{
  display:block;
  margin-bottom:5px;
  color:var(--primary);
  font-size:12px;
}

.outside-work-duty-grid small{
  display:block;
  margin-bottom:7px;
  color:#64748b;
  font-size:10.5px;
  font-weight:700;
  line-height:1.45;
}

.outside-work-duty-grid p,
.outside-work-extra-grid p{
  margin:0;
  white-space:normal;
  overflow-wrap:anywhere;
}

.outside-work-task-list{
  margin:7px 0 0;
  padding-left:18px;
  color:#334155;
}

.outside-work-task-list li{
  margin:0 0 7px;
  line-height:1.5;
}

.outside-work-extra-grid{
  display:grid;
  gap:10px;
}

.outside-work-extra-cell,
.outside-work-extra-cell b,
.outside-work-extra-cell p{
  color:#c32546;
}

.outside-work-actions{
  vertical-align:middle !important;
}

.outside-work-actions .schedule-row-actions{
  flex-direction:column;
  align-items:stretch;
  gap:7px;
}

.outside-work-actions .schedule-row-actions button{
  width:100%;
  white-space:nowrap;
}

.outside-work-actions button:disabled{
  cursor:not-allowed;
  opacity:.45;
}

.outside-work-form-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:14px;
}

.outside-work-form-grid textarea{
  min-height:110px;
  resize:vertical;
}

.outside-work-task-builder{
  display:grid;
  gap:8px;
  margin-top:7px;
}

.outside-work-task-row{
  display:grid;
  grid-template-columns:155px minmax(0, 1fr) 34px;
  gap:7px;
  align-items:center;
}

.outside-work-task-row select,
.outside-work-task-row input{
  width:100%;
  min-width:0;
  margin:0;
}

.outside-work-task-row > button{
  width:34px;
  height:34px;
  padding:0;
  border:0;
  border-radius:8px;
  background:#fff1f2;
  color:#be123c;
  font-size:20px;
  font-weight:800;
  cursor:pointer;
}

.outside-work-add-task-btn{
  margin-top:8px;
  padding:7px 10px;
  border:1px dashed #93c5fd;
  border-radius:8px;
  background:#eff6ff;
  color:#1d4ed8;
  font-size:12px;
  font-weight:800;
  cursor:pointer;
}

.outside-work-time-reference{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin:6px 0 8px;
}

.outside-work-time-reference span{
  padding:4px 7px;
  border:1px solid #dbeafe;
  border-radius:999px;
  background:#eff6ff;
  color:#1e40af;
  font-size:11px;
  font-weight:800;
}

.outside-work-cancel-btn{
  min-width:110px;
  padding:11px 18px;
  border:1px solid #cbd5e1;
  border-radius:10px;
  background:#fff;
  color:#475569;
  font-size:14px;
  font-weight:800;
  cursor:pointer;
  transition:.18s ease;
}

.outside-work-cancel-btn:hover{
  border-color:#94a3b8;
  background:#f1f5f9;
  color:#1e293b;
}

@media(max-width:900px){
  .outside-work-duty-grid,
  .outside-work-form-grid{ grid-template-columns:1fr; }
  .outside-work-table{ min-width:760px; }
  .outside-work-task-row{ grid-template-columns:1fr 34px; }
  .outside-work-task-row select{ grid-column:1 / -1; }
}

.schedule-shift-section{
  margin-bottom:22px;
  border:1px solid #e2e8f0;
  border-radius:12px;
  background:#fff;
  overflow:visible;
  box-shadow:var(--shadow);
}

.schedule-shift-heading{
  position:sticky;
  top:0;
  z-index:310;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:14px 18px;
  background:#fff7ed;
  border-bottom:1px solid #fed7aa;
  border-radius:11px 11px 0 0;
  box-shadow:0 5px 12px rgba(154, 52, 18, 0.08);
}

.schedule-shift-heading h2{
  margin:0;
  color:#9a3412;
  font-size:18px;
  font-weight:950;
}

.schedule-shift-heading span{
  color:#c2410c;
  font-size:13px;
  font-weight:900;
}

.schedule-table-container{
  margin:0;
  border-radius:0;
  display:block;
  width:100%;
  max-width:100%;
  max-height:none !important;
  min-height:0;
  overflow:visible !important;
  overscroll-behavior-x:contain;
  scrollbar-gutter:stable both-edges;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-x pan-y;
}

.bulk-student-picker{
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  gap:10px;
  margin-bottom:10px;
}

@media(max-width:700px){
  .bulk-student-picker{ grid-template-columns:1fr; }
}

.schedule-table{
  min-width:1080px;
}

.schedule-table tbody tr:last-child td:last-child{
  border-bottom-right-radius:11px;
}

.schedule-table td{
  vertical-align:middle;
}

.schedule-table thead th{
  position:sticky;
  top:49px;
  z-index:300;
  background:var(--primary);
}

.schedule-table thead th:first-child{
  border-top-left-radius:10px;
}

.schedule-table thead th:last-child{
  border-top-right-radius:10px;
}

.schedule-table th:last-child{
  position:sticky;
  top:49px;
  right:0;
  z-index:320;
  box-shadow:-1px 0 0 rgba(255,255,255,0.18);
}

.schedule-actions-cell{
  position:sticky !important;
  right:0;
  z-index:5 !important;
  min-width:150px;
  background:#ffffff !important;
  box-shadow:-1px 0 0 #e5e7eb;
}

.schedule-class-cell{
  width:300px;
  min-width:300px;
  vertical-align:middle !important;
  background:#f8fafc !important;
}

.staff-absence-btn{border:1px solid #f0b56a;border-radius:10px;background:#fff8eb;color:#a64b08;font-weight:850;cursor:pointer;transition:.16s ease}.staff-absence-btn:hover{transform:translateY(-1px);background:#fff1d6;border-color:#de8c2d;box-shadow:0 6px 14px rgba(166,75,8,.12)}
.staff-absence-modal{display:flex;flex-direction:column;width:min(900px,96vw);max-width:900px;max-height:90vh;overflow:hidden}.staff-absence-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.staff-absence-grid>div.full,.absence-weekdays{grid-column:1/-1}.absence-weekdays>div{display:flex;flex-wrap:wrap;gap:7px}.absence-weekdays>div label{display:inline-flex;align-items:center;gap:5px;padding:6px 9px;border:1px solid #dbe3ef;border-radius:8px;background:#f8fafc}.absence-weekdays input{width:auto;margin:0}.absence-saved-list{flex:0 0 auto;height:auto;min-height:80px;max-height:310px;overflow:auto;border:1px solid #e2e8f0;border-radius:10px}.absence-saved-list>div{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border-bottom:1px solid #edf1f7}.absence-saved-list>div:last-child{border-bottom:0}.absence-saved-list small,.absence-saved-list em{display:block;margin-top:3px;color:#64748b;font-size:12px}.absence-saved-list em{color:#168344;font-style:normal;font-weight:800}.absence-saved-list em.missing{color:#dc2626}.absence-saved-list button{margin-left:5px;padding:6px 9px;border:1px solid #d7deea;border-radius:7px;background:#fff;font-weight:750;cursor:pointer}.absence-saved-list button.danger{color:#dc2626;border-color:#fecaca}.staff-absence-modal>.schedule-modal-actions{flex:0 0 auto;margin-top:12px}
.workday-payroll-row.has-staff-absence{background:#fffaf0}.workday-payroll-row em{display:block;margin-top:4px;color:#b45309;font-size:11px;font-style:normal;font-weight:800}
.schedule-staff-replacement-list{display:flex;flex-direction:column;align-items:flex-start;gap:5px}.schedule-staff-normal{display:block}.schedule-replacement.is-compact{display:block;line-height:1.2}.schedule-replacement.is-compact b{font-size:12px}.schedule-replacement.is-compact small{margin-top:2px;font-size:10.5px}
.outside-assignment-phase{margin-bottom:18px;border:1px solid #dbe3ef;border-radius:12px;background:#fff;overflow:hidden;box-shadow:var(--shadow)}.outside-assignment-phase-title{position:sticky;top:0;z-index:22;padding:9px 14px;border-bottom:1px solid #f0c98f;background:#fff8ee;color:#9a3412;font-size:15px;font-weight:950}.outside-assignment-phase .outside-work-table-container{border:0;border-radius:0;box-shadow:none}.outside-assignment-phase .outside-work-table thead th{top:38px}.outside-assignment-phase .outside-work-table thead th:nth-child(1){width:28%}.outside-assignment-phase .outside-work-table thead th:nth-child(2){width:19%}.outside-assignment-phase .outside-work-table thead th:nth-child(3){width:18%}.outside-assignment-phase .outside-work-table thead th:nth-child(4){width:23%}.outside-assignment-phase .outside-work-table thead th:nth-child(5){width:12%}.outside-assignment-task{color:#173b8f;font-weight:850}.outside-assignment-time{color:#334155;font-weight:800;white-space:nowrap!important}.outside-assignment-staff-list{display:flex;flex-direction:column;align-items:flex-start;gap:6px}.outside-assignment-staff-list>span:not(.schedule-replacement){display:block;padding:4px 7px;border-radius:7px;background:#eef3ff;color:#173b8f;font-size:12px;font-weight:850}.outside-work-form-grid>.full{grid-column:1/-1}.outside-work-staff-choices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;max-height:210px;padding:10px;border:1px solid #dbe3ef;border-radius:10px;overflow:auto;background:#f8fafc}.outside-work-staff-choices label{display:flex;align-items:center;gap:8px;padding:8px;border:1px solid #e2e8f0;border-radius:8px;background:#fff;cursor:pointer}.outside-work-staff-choices input{width:auto;margin:0}.outside-work-staff-choices b,.outside-work-staff-choices small{display:block}.outside-work-staff-choices b{color:#173b8f;font-size:12px}.outside-work-staff-choices small{margin-top:2px;color:#64748b;font-size:10px}@media(max-width:800px){.outside-work-staff-choices{grid-template-columns:1fr 1fr}.outside-assignment-phase .outside-work-table{min-width:760px}}
.outside-work-new-task-input{margin-top:8px!important}.outside-assignment-task{vertical-align:middle!important;border-right:2px solid #dbe3ef!important;background:#f8fafc!important;font-size:13px;line-height:1.45}
.outside-assignment-location,.outside-assignment-time,.outside-assignment-staff{vertical-align:middle!important;text-align:center}.outside-assignment-phase .outside-assignment-staff-list{align-items:center}.outside-work-new-task-btn{display:block;width:auto;margin-top:8px}
.outside-work-task-name-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}.outside-work-task-name-actions .outside-work-new-task-btn{margin:0}.outside-work-rename-task-btn{padding:7px 10px;border:1px solid #d7deea;border-radius:8px;background:#fff;color:#334155;font-size:12px;font-weight:800;cursor:pointer}.outside-work-rename-task-btn:hover{border-color:#7895e8;background:#f5f7ff;color:#173b8f}.outside-task-rename-modal{z-index:2100000!important;background:rgba(15,23,42,.58)!important}.outside-task-rename-content{width:min(520px,94vw);position:relative;z-index:2100001}
.outside-work-task-picker{position:relative}.outside-work-task-picker-button{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:42px;padding:9px 12px;border:1px solid #d7deea;border-radius:9px;background:#fff;color:#334155;text-align:left;font-size:13px;font-weight:750;cursor:pointer}.outside-work-task-picker-menu{display:none;position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:60;max-height:270px;padding:6px;border:1px solid #dbe3ef;border-radius:10px;background:#fff;box-shadow:0 14px 30px rgba(15,23,42,.18);overflow:auto}.outside-work-task-picker-menu.show{display:block}.outside-work-task-picker-item{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:6px;padding:4px;border-radius:8px}.outside-work-task-picker-item:hover,.outside-work-task-picker-item.is-selected{background:#eef3ff}.outside-work-task-pick{display:grid;grid-template-columns:22px minmax(0,1fr);align-items:center;gap:7px;width:100%;padding:7px;border:0;background:transparent;color:#334155;text-align:left;font-size:12px;font-weight:800;cursor:pointer}.outside-work-task-check{display:flex;align-items:center;justify-content:center;width:18px;height:18px;border:1px solid #b8c5d9;border-radius:5px;background:#fff;color:#173b8f;font-size:12px}.outside-work-task-picker-item.is-selected .outside-work-task-check{border-color:#7895e8;background:#dfe9ff}.outside-work-task-edit{padding:6px 8px;border:1px solid #d7deea;border-radius:7px;background:#fff;color:#173b8f;font-size:11px;font-weight:850;white-space:nowrap;cursor:pointer}.outside-work-task-edit:hover{border-color:#7895e8;background:#f5f7ff}.outside-work-task-picker-empty{padding:12px;color:#94a3b8;text-align:center;font-size:12px}
.outside-work-task-picker-item{grid-template-columns:minmax(0,1fr) auto auto}.outside-work-task-delete{padding:6px 8px;border:1px solid #fecaca;border-radius:7px;background:#fff;color:#dc2626;font-size:11px;font-weight:850;white-space:nowrap;cursor:pointer}.outside-work-task-delete:hover{background:#fff1f2}.outside-assignment-phase .outside-work-table thead th:nth-child(4){text-align:center}
.outside-work-task-pick{display:block;text-align:left}.outside-work-task-check{display:none}.outside-work-time-picker{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 40px}.outside-work-time-picker>input{grid-column:1/-1;padding-right:46px!important}.outside-work-time-picker>button{position:absolute;top:1px;right:1px;width:39px;height:calc(100% - 2px);border:0;border-left:1px solid #d7deea;border-radius:0 8px 8px 0;background:#f8fafc;color:#173b8f;font-size:15px;font-weight:900;cursor:pointer}.outside-work-time-picker>button:hover{background:#eef3ff}.outside-work-time-menu{display:none;position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:65;max-height:220px;padding:6px;border:1px solid #dbe3ef;border-radius:10px;background:#fff;box-shadow:0 14px 30px rgba(15,23,42,.18);overflow:auto}.outside-work-time-menu.show{display:grid;gap:3px}.outside-work-time-menu button{width:100%;padding:8px 10px;border:0;border-radius:7px;background:transparent;color:#334155;text-align:left;font-size:12px;font-weight:750;cursor:pointer}.outside-work-time-menu button:hover{background:#eef3ff;color:#173b8f}.outside-work-time-menu>span{padding:9px;color:#94a3b8;text-align:center;font-size:12px}
.outside-work-time-picker{display:flex;align-items:stretch}.outside-work-time-picker>input{position:relative;z-index:1;flex:1 1 auto;min-width:0;padding-right:12px!important;border-radius:9px 0 0 9px!important}.outside-work-time-picker>button{position:static;flex:0 0 42px;width:42px;height:auto;min-height:42px;border:1px solid #d7deea;border-left:0;border-radius:0 9px 9px 0;background:#fff;color:#334155;font-size:13px}.outside-work-time-picker>button:hover{border-color:#7895e8;background:#f5f7ff;color:#173b8f}
.outside-work-time-picker{align-items:center}.outside-work-time-picker>input,.outside-work-time-picker>button{box-sizing:border-box;height:42px!important;min-height:42px!important;margin:7px 0!important}.outside-work-time-picker>button{padding:0!important;line-height:1}
.outside-assignment-staff>.workday-none{display:block;width:100%;margin:0 auto;text-align:center}
.modal-delete-action{margin-right:auto;border:1px solid #fecaca!important;border-radius:9px!important;background:#fff1f2!important;color:#dc2626!important;font-weight:850!important}.modal-delete-action:hover{background:#fee2e2!important;border-color:#fca5a5!important}
.modal-delete-action[hidden]{display:none!important}
.inline-staff-picker{position:relative;width:100%;min-width:0}.inline-staff-picker>summary{display:flex;align-items:center;justify-content:center;gap:6px;min-height:34px;padding:6px 8px;border:1px solid #d7deea;border-radius:8px;background:#fff;color:#173b8f;font-size:11.5px;font-weight:800;line-height:1.25;cursor:pointer;list-style:none;white-space:normal}.inline-staff-picker>summary::-webkit-details-marker{display:none}.inline-staff-picker>summary:hover,.inline-staff-picker[open]>summary{border-color:#7895e8;background:#f5f7ff}.inline-staff-picker>summary .inline-staff-chevron{flex:0 0 auto}.inline-staff-summary{display:flex;min-width:0;flex-direction:column;align-items:flex-start;gap:3px;text-align:left}.inline-staff-summary i{display:block;position:relative;padding-left:10px;color:#173b8f;font-style:normal;font-weight:850;overflow-wrap:anywhere}.inline-staff-summary i::before{content:"•";position:absolute;left:0;color:#7895e8}.inline-staff-summary.is-empty{color:#b0b8c5;font-weight:700}.inline-staff-picker-menu{position:fixed;z-index:200000;min-width:245px;max-height:240px;padding:6px;border:1px solid #dbe3ef;border-radius:10px;background:#fff;box-shadow:0 14px 30px rgba(15,23,42,.2);overflow:auto}.inline-staff-picker-menu label{display:flex;align-items:flex-start;gap:8px;padding:8px;border-radius:7px;color:#334155;text-align:left;font-size:11.5px;cursor:pointer}.inline-staff-picker-menu label:hover{background:#eef3ff}.inline-staff-picker-menu input{flex:0 0 auto;width:16px;height:16px;margin:0;accent-color:#173b8f}.inline-staff-picker-menu small{display:block;padding:10px;color:#94a3b8;text-align:center}
.workday-pay-by-session{display:block;margin-top:5px;color:#168344!important;font-size:10.5px!important;font-weight:850}
.outside-work-date-note{display:flex;align-items:center;gap:6px;width:max-content;max-width:100%;margin:0 0 8px;padding:5px 9px;border:1px solid #dbe3ef;border-radius:8px;background:#f8fafc;color:#475569;font-size:11px;line-height:1.2}.outside-work-date-note>span{font-size:12px}.outside-work-date-note>b{color:#173b8f;font-size:11.5px;text-transform:capitalize}.outside-work-date-note>small{padding-left:6px;border-left:1px solid #cbd5e1;color:#64748b;font-size:10.5px}
.attendance-page-header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:10px}.attendance-page-header h1{margin:0}.attendance-page-header p{margin:4px 0 0;color:#64748b;font-size:12px}.attendance-save-btn{min-width:140px}.attendance-day-toolbar{display:flex;align-items:center;justify-content:center;gap:7px;margin-bottom:12px;padding:8px;border:1px solid #dbe3ef;border-radius:11px;background:#fff}.attendance-day-toolbar>button{box-sizing:border-box;height:36px;padding:0 13px;border:1px solid #d7deea;border-radius:9px;background:#fff;color:#173b8f;font-weight:850;cursor:pointer}.attendance-day-toolbar>button:not(.attendance-today-btn){width:38px;padding:0;font-size:18px}.attendance-day-toolbar>button:hover{border-color:#7895e8;background:#f5f7ff}.attendance-day-toolbar>label{display:flex;align-items:center;gap:8px;margin:0;color:#475569;font-size:12px}.attendance-day-toolbar input{box-sizing:border-box;width:150px;height:36px;margin:0;padding:6px 9px}.attendance-day-toolbar .schedule-workday-status{height:36px;min-width:100px;padding:0 12px;font-size:11px}.daily-attendance-list{display:grid;gap:14px;padding-bottom:38px}.attendance-class-section{overflow:hidden;border:1px solid #dbe3ef;border-radius:12px;background:#fff;box-shadow:var(--shadow)}.attendance-class-title{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 14px;border-bottom:1px solid #dbe3ef;background:#f8fafc}.attendance-class-title b{display:block;color:#173b8f;font-size:16px}.attendance-class-title span{display:block;margin-top:2px;color:#64748b;font-size:11px;font-weight:750}.attendance-class-title small{padding:5px 8px;border-radius:999px;background:#e8eefc;color:#173b8f;font-size:11px;font-weight:850}.attendance-table-container{border:0!important;border-radius:0!important;box-shadow:none!important;overflow:visible}.attendance-daily-table{width:100%;table-layout:fixed}.attendance-daily-table th,.attendance-daily-table td{vertical-align:middle}.attendance-daily-table th:first-child,.attendance-daily-table td:first-child{width:105px;text-align:center}.attendance-daily-table th:nth-child(2){width:145px}.attendance-present-column label{display:inline-flex;align-items:center;justify-content:center;gap:7px;margin:0;color:#fff;font-size:12px}.attendance-present-column input{box-sizing:border-box;width:18px;height:18px;margin:0;accent-color:#168344;cursor:pointer}.attendance-daily-table tbody tr:hover td{background:#f8fbff}@media(max-width:700px){.attendance-page-header{align-items:flex-start}.attendance-day-toolbar{justify-content:flex-start;overflow-x:auto}.attendance-day-toolbar .schedule-workday-status{display:none}.attendance-daily-table{min-width:650px}}
.schedule-replacement b{display:block;color:#168344;font-weight:900}.schedule-replacement small{display:block;margin-top:3px;color:#dc2626;font-size:11px;font-weight:750}.has-missing-replacement td{background:#fff5f5!important}.has-missing-replacement .schedule-replacement b{color:#dc2626}
@media(max-width:700px){.staff-absence-grid{grid-template-columns:1fr}.staff-absence-grid>div.full,.absence-weekdays{grid-column:auto}}
.staff-absence-modal{overflow-y:auto}.staff-absence-modal>.schedule-modal-actions{position:sticky;bottom:-1px;z-index:10;margin:12px -1px -1px;padding:12px 1px 1px;background:#fff;box-shadow:0 -10px 18px rgba(15,23,42,.06)}
.nested-workday-modal{z-index:2000000!important;background:rgba(15,23,42,.58)!important}.nested-workday-modal>.modal-content{z-index:2000001!important;position:relative}.nested-workday-modal .absence-saved-list,.nested-workday-modal .staff-absence-modal>h3{display:none}
.absence-saved-list>div.is-pending-delete{background:#fff1f2;opacity:.65}.absence-saved-list>div.is-pending-delete b,.absence-saved-list>div.is-pending-delete small{text-decoration:line-through}.absence-saved-list>div.is-pending-change{background:#f0fdf4}
.schedule-leave-dropdown{position:relative}.schedule-leave-menu{display:none;position:absolute;top:calc(100% + 7px);left:0;z-index:50000;width:180px;padding:6px;border:1px solid #e2e8f0;border-radius:10px;background:#fff;box-shadow:0 12px 28px rgba(15,23,42,.16)}.schedule-leave-menu.show{display:block}.schedule-leave-menu button{display:block;width:100%;padding:9px 10px;border:0;border-radius:7px;background:transparent;color:#334155;text-align:left;font-size:13px;font-weight:800;cursor:pointer}.schedule-leave-menu button:hover{background:#eef3ff;color:#173b8f}.is-class-holiday td{background:#fff7ed!important}.class-holiday-label b{display:block;color:#dc2626;font-weight:950}.class-holiday-label small{display:block;margin-top:3px;color:#c2410c;font-size:11px;font-weight:750}
.schedule-leave-dropdown{display:flex}.schedule-leave-dropdown>.workday-holiday-btn{min-width:132px;min-height:40px;font-size:14px;line-height:1.2;padding:10px 14px}
.is-class-holiday td{background:#4b5563!important;color:#fff!important}.is-class-holiday .schedule-class-cell>strong,.is-class-holiday .schedule-class-cell>small,.is-class-holiday .schedule-class-meta,.is-class-holiday .schedule-other-info span,.is-class-holiday .schedule-other-info b{color:#fff!important}.is-class-holiday .schedule-unit-under-name,.is-class-holiday .schedule-ptbhp,.is-class-holiday .schedule-ptbhp b{color:#fecaca!important}.is-class-holiday .schedule-row-actions button{background:#fff;color:#334155}
.workday-payroll-head,.workday-payroll-row{grid-template-columns:1.05fr 1.35fr 1fr 1.35fr 60px}.workday-remove-row{display:flex;align-items:center;justify-content:center}.workday-remove-row button{width:30px;height:30px;border:1px solid #fecaca;border-radius:8px;background:#fff1f2;color:#dc2626;font-size:18px;font-weight:900;cursor:pointer}.workday-remove-row button:hover{background:#fee2e2}
.leave-add-to-list-btn{display:block;width:100%;margin:10px 0 12px;padding:10px 14px;border:1px dashed #7895e8;border-radius:9px;background:#f5f7ff;color:#173b8f;font-size:13px;font-weight:850;cursor:pointer}.leave-add-to-list-btn:hover{background:#eaf0ff;border-style:solid}.holiday-saved-list>div.is-pending-change{background:#f0fdf4}
.is-class-holiday td{background:#f8fafc!important;color:#9ca3af!important}.is-class-holiday .schedule-class-cell>strong,.is-class-holiday .schedule-class-cell>small,.is-class-holiday .schedule-class-meta,.is-class-holiday .schedule-other-info span,.is-class-holiday .schedule-other-info b,.is-class-holiday .schedule-class-cell p,.is-class-holiday .schedule-class-cell p b{color:#9ca3af!important}.is-class-holiday .schedule-class-cell p{background:#eef1f4!important;border-radius:7px;padding:6px 7px}.is-class-holiday .schedule-period{background:#eef1f4!important;color:#858c96!important;border-color:#e1e5ea!important}.is-class-holiday .schedule-unit-under-name,.is-class-holiday .schedule-ptbhp,.is-class-holiday .schedule-ptbhp b{color:#a3a3a3!important}.is-class-holiday .class-holiday-label b,.is-class-holiday .class-holiday-label small{color:#dc2626!important;opacity:1}.is-class-holiday .schedule-row-actions{opacity:.65}

.schedule-class-cell.is-last-class-group{
  border-bottom-left-radius:11px;
}

.schedule-class-cell > strong{
  display:block;
  color:var(--primary);
  font-size:22px;
  font-weight:950;
}

.schedule-class-cell > small{
  display:block;
  margin-top:2px;
  color:#64748b;
  font-size:12px;
  font-weight:800;
}

.schedule-program-badge{
  display:inline-flex;
  margin-left:6px;
  padding:3px 7px;
  border-radius:999px;
  background:#eef2ff;
  color:#3730a3;
  font-size:10px;
  font-weight:950;
  vertical-align:middle;
}

.schedule-program-badge.is-abeka{
  background:#ecfdf5;
  color:#047857;
}

.class-program-note{
  display:block;
  margin-top:6px;
  color:#4f46e5;
  font-size:12px;
  font-weight:750;
  line-height:1.4;
}

.class-program-note.is-abeka{
  color:#047857;
}

.schedule-class-meta{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:5px;
  margin-top:10px;
}

.schedule-class-meta span{
  display:inline-flex;
  padding:4px 8px;
  border:1px solid #dbeafe;
  border-radius:999px;
  background:#ffffff;
  color:#334155;
  font-size:11.5px;
  font-weight:800;
}

.schedule-class-meta .schedule-unit-label{
  padding:6px 11px;
  border-color:#f9a8d4;
  background:#fdf2f8;
  color:#9d174d;
  font-size:16px;
  font-weight:950;
}

.schedule-class-meta .schedule-oh-date{
  border-color:#fecdd3;
  background:#fff1f2;
  color:#be123c;
  font-weight:950;
}

.schedule-class-cell.is-oh-due{
  background:#fff1f2 !important;
  box-shadow:inset 4px 0 0 #e11d48;
}

.schedule-class-cell.is-oh-due > strong{
  color:#be123c;
}

.schedule-class-cell p{
  margin:10px 0 0;
  color:#92400e;
  font-size:11.5px;
  line-height:1.45;
  max-width:260px;
  white-space:normal;
  overflow-wrap:anywhere;
  word-break:break-word;
}

.schedule-field-hint{
  display:block;
  margin-top:6px;
  color:#64748b;
  font-size:12px;
  line-height:1.4;
}

.schedule-period-section-title{
  grid-column:1 / -1;
  margin-top:4px;
  padding:10px 12px;
  border-left:4px solid #2563eb;
  border-radius:8px;
  background:#eff6ff;
  color:#1e40af;
  font-size:14px;
  font-weight:950;
}

.schedule-period-section-title.is-rep{
  border-left-color:#c32546;
  background:#fff1f2;
  color:#9f1239;
}

.schedule-period-section-title.is-class-info{
  border-left-color:#0f766e;
  background:#f0fdfa;
  color:#115e59;
}

#scheduleModal.is-abeka #scheduleResponsibleGroup{
  grid-column:1 / -1;
}

#scheduleModal.is-abeka #scheduleRoomGroup,
#scheduleModal.is-abeka #scheduleStartTimeGroup{
  grid-column:1;
}

#scheduleModal.is-abeka #scheduleAssistantsGroup,
#scheduleModal.is-abeka #scheduleEndTimeGroup{
  grid-column:2;
}

#scheduleModal.is-abeka #scheduleRoomGroup,
#scheduleModal.is-abeka #scheduleAssistantsGroup{
  grid-row:4;
}

#scheduleModal.is-abeka #scheduleStartTimeGroup,
#scheduleModal.is-abeka #scheduleEndTimeGroup{
  grid-row:5;
}

@media(max-width:800px){
  #scheduleModal.is-abeka #scheduleResponsibleGroup,
  #scheduleModal.is-abeka #scheduleRoomGroup,
  #scheduleModal.is-abeka #scheduleAssistantsGroup,
  #scheduleModal.is-abeka #scheduleStartTimeGroup,
  #scheduleModal.is-abeka #scheduleEndTimeGroup{
    grid-column:1;
    grid-row:auto;
  }
}

.schedule-table-container::-webkit-scrollbar{
  width:12px;
  height:12px;
}

.schedule-table-container::-webkit-scrollbar-thumb{
  border:3px solid #ffffff;
  border-radius:999px;
  background:#94a3b8;
}

.schedule-table-container::-webkit-scrollbar-track{
  background:#f1f5f9;
}

.schedule-period{
  display:inline-flex;
  min-width:44px;
  justify-content:center;
  padding:5px 8px;
  border-radius:999px;
  font-size:12px;
  font-weight:950;
}

.schedule-period.is-tsi{
  background:#fce7f3;
  color:#9d174d;
}

.schedule-period.is-rep{
  background:#dbeafe;
  color:#1d4ed8;
}

.schedule-note-row td{
  padding:8px 14px !important;
  background:#fffbeb !important;
  color:#92400e;
  font-size:12px;
}

.schedule-row-actions{
  display:flex;
  gap:6px;
}

.schedule-row-actions button{
  padding:7px 10px;
  border:1px solid #cbd5e1;
  border-radius:8px;
  background:#fff;
  color:#334155;
  font-size:12px;
  font-weight:850;
  cursor:pointer;
}

.schedule-row-actions button:hover{
  border-color:#3b82f6;
  color:#1d4ed8;
}

.schedule-row-actions button.danger:hover{
  border-color:#ef4444;
  color:#b91c1c;
}

.schedule-modal-content{
  width:min(900px, 100%);
  max-height:calc(100vh - 40px);
  overflow-y:auto;
}

.schedule-modal-content .modal-header p{
  margin:5px 0 0;
  color:#64748b;
  font-size:13px;
}

.schedule-form-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px 16px;
}

.schedule-form-grid .form-group{
  margin:0;
}

.schedule-staff-multiselect{
  position:relative;
}

.schedule-staff-trigger{
  width:100%;
  min-height:42px;
  padding:9px 12px;
  border:1px solid #d1d5db;
  border-radius:10px;
  background:#ffffff;
  color:#334155;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  font-size:14px;
  font-weight:750;
  text-align:left;
  cursor:pointer;
}

.schedule-staff-trigger:hover{
  border-color:#93c5fd;
}

.schedule-staff-trigger > span:first-child{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.schedule-staff-options{
  position:absolute;
  top:calc(100% + 6px);
  left:0;
  right:0;
  z-index:20;
  display:none;
  max-height:230px;
  overflow-y:auto;
  padding:7px;
  border:1px solid #dbe3ef;
  border-radius:12px;
  background:#ffffff;
  box-shadow:0 16px 38px rgba(15, 23, 42, 0.18);
}

.schedule-staff-options.show{
  display:block;
}

.schedule-staff-option{
  display:flex !important;
  align-items:center;
  gap:9px;
  margin:0 !important;
  padding:9px 10px;
  border-radius:8px;
  color:#334155;
  font-size:13px;
  font-weight:750;
  cursor:pointer;
}

.schedule-staff-option:hover{
  background:#eff6ff;
}

.schedule-staff-option input{
  width:16px;
  height:16px;
  margin:0;
  flex-shrink:0;
  accent-color:#2563eb;
}

.schedule-staff-empty{
  display:block;
  padding:10px;
  color:#64748b;
  font-size:13px;
}

.schedule-note-field{
  grid-column:1 / -1;
}

.schedule-modal-actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin-top:20px;
}

.schedule-setup-notice{
  display:flex;
  flex-direction:column;
  gap:7px;
  padding:16px 18px;
  border:1px solid #fed7aa;
  border-radius:14px;
  background:#fff7ed;
  color:#9a3412;
}

.schedule-setup-notice code{
  padding:2px 5px;
  border-radius:5px;
  background:#ffffff;
}

@media(max-width:800px){
  .schedule-form-grid{
    grid-template-columns:1fr;
  }

  .schedule-note-field{
    grid-column:auto;
  }

  .schedule-modal-content{
    max-height:calc(100dvh - 24px);
  }
}

.unit-edit-confirm-modal{
  z-index:60000;
  background:rgba(15, 23, 42, 0.56);
  backdrop-filter:blur(5px);
}

.unit-edit-confirm-card{
  width:min(620px, 100%);
  gap:18px;
  padding:26px;
  border-radius:22px;
  border:1px solid rgba(255, 255, 255, 0.72);
  box-shadow:0 30px 90px rgba(15, 23, 42, 0.34);
  animation:unitEditConfirmIn 0.2s ease-out;
}

@keyframes unitEditConfirmIn{
  from{
    opacity:0;
    transform:translateY(10px) scale(0.98);
  }
  to{
    opacity:1;
    transform:translateY(0) scale(1);
  }
}

.unit-edit-confirm-icon{
  width:48px;
  height:48px;
  border-radius:15px;
  background:linear-gradient(145deg, #dbeafe, #eef2ff);
  color:#1d4ed8;
  box-shadow:inset 0 0 0 1px #bfdbfe;
  font-size:23px;
}

.unit-edit-confirm-eyebrow{
  display:block;
  margin:1px 0 5px;
  color:#2563eb;
  font-size:11px;
  font-weight:950;
  letter-spacing:0.09em;
  text-transform:uppercase;
}

.unit-edit-confirm-content h3{
  margin-bottom:7px;
  font-size:22px;
}

.unit-edit-confirm-content > p{
  color:#475569;
  line-height:1.55;
}

.unit-edit-confirm-info{
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto minmax(0, 1fr);
  align-items:center;
  gap:12px;
  margin:18px 0 0;
  padding:14px;
  border-radius:16px;
  background:#f8fafc;
  border:1px solid #e2e8f0;
  line-height:1.4;
}

.unit-edit-confirm-state{
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:0;
}

.unit-edit-confirm-state-label{
  color:#64748b;
  font-size:11px;
  font-weight:900;
  letter-spacing:0.04em;
  text-transform:uppercase;
}

.unit-edit-confirm-state strong{
  color:#0f172a;
  font-size:16px;
  font-weight:950;
}

.unit-edit-confirm-state > span:last-child{
  color:#475569;
  font-size:13px;
  font-weight:700;
}

.unit-edit-confirm-state.is-new strong{
  color:#1d4ed8;
}

.unit-edit-confirm-arrow{
  width:30px;
  height:30px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#dbeafe;
  color:#1d4ed8;
  font-weight:950;
}

.unit-edit-confirm-note{
  display:flex;
  align-items:flex-start;
  gap:9px;
  margin-top:12px;
  padding:11px 12px;
  border-radius:14px;
  background:#eff6ff;
  border:1px solid #bfdbfe;
  color:#1e40af;
}

.unit-edit-confirm-note > span{
  width:19px;
  height:19px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  background:#2563eb;
  color:#ffffff;
  font-size:12px;
  font-weight:950;
}

.unit-edit-confirm-note p{
  margin:0;
  color:inherit;
  font-size:12.5px;
  font-weight:800;
  line-height:1.45;
}

.unit-edit-confirm-actions{
  padding-top:4px;
}

.unit-edit-confirm-actions .unit-edit-cancel-btn,
.unit-edit-confirm-actions .unit-edit-save-btn{
  min-height:42px;
  padding:10px 17px;
  border-radius:11px;
}

.unit-edit-confirm-actions .unit-edit-cancel-btn:focus-visible,
.unit-edit-confirm-actions .unit-edit-save-btn:focus-visible{
  outline:3px solid rgba(37, 99, 235, 0.24);
  outline-offset:2px;
}

@media (max-width:640px){
  .unit-edit-confirm-modal{
    align-items:flex-end;
    padding:12px;
  }

  .unit-edit-confirm-card{
    padding:20px;
    border-radius:20px;
  }

  .unit-edit-confirm-info{
    grid-template-columns:1fr;
  }

  .unit-edit-confirm-arrow{
    transform:rotate(90deg);
    margin:0 auto;
  }

  .unit-edit-confirm-actions{
    flex-direction:column-reverse;
  }

  .unit-edit-confirm-actions button{
    width:100%;
  }
}

/* Final alignment: tabs left, search/date controls right */
.status-search-controls,
.schedule-view-controls{display:flex;align-items:center;justify-content:space-between;gap:18px;width:100%;margin:12px 0 18px}
.status-search-controls .staff-status-tabs,
.status-search-controls .student-status-tabs,
.status-search-controls .class-status-tabs,
.schedule-view-controls .schedule-view-tabs{flex:1 1 auto;min-width:0;margin:0}
.status-search-controls .staff-search-row,
.status-search-controls .class-toolbar{flex:0 0 320px;width:320px;margin:0}
.status-search-controls .search-box{box-sizing:border-box;width:100%}
.schedule-view-controls{align-items:stretch;margin-top:0;margin-bottom:8px}
.schedule-view-controls .schedule-view-tabs{align-self:center;flex-wrap:nowrap}
.schedule-time-controls{display:flex;align-items:center;justify-content:flex-end;flex:0 1 auto;min-width:0}
.schedule-view-controls [hidden]{display:none!important}
.outside-work-date-note-header .outside-work-date-note{margin:0}
.schedule-view-controls .schedule-day-toolbar,
.schedule-view-controls .video-week-toolbar{width:auto!important;max-width:none!important;height:42px!important;min-height:42px!important;margin:0!important;padding:4px 6px!important}
.schedule-view-controls .schedule-day-toolbar>button:nth-child(2),
.schedule-view-controls .video-week-toolbar>button:nth-child(2){flex-basis:108px!important;width:108px!important}
.schedule-view-controls .schedule-day-toolbar>label input,
.schedule-view-controls .video-week-toolbar>label input{flex-basis:142px!important;width:142px!important;max-width:142px!important}
.schedule-view-controls .schedule-day-toolbar>.schedule-workday-status,
.schedule-view-controls .video-week-toolbar>.schedule-workday-status{flex-basis:150px!important;width:150px!important;max-width:150px!important}
@media(max-width:1180px){
  .status-search-controls,.schedule-view-controls{align-items:stretch;flex-direction:column}
  .status-search-controls .staff-search-row,.status-search-controls .class-toolbar{align-self:flex-end}
  .schedule-time-controls{justify-content:flex-end}
}
@media(max-width:640px){
  .status-search-controls .staff-search-row,.status-search-controls .class-toolbar{width:100%;flex-basis:auto}
  .schedule-time-controls{justify-content:flex-start;overflow-x:auto}
}
.tuition-review-picker-item {
  width: 100%;
  border: 1px solid #e1e7f0;
  border-radius: 10px;
  background: #fff;
  color: #25324a;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  text-align: left;
  box-shadow: none;
  cursor: pointer;
}

.tuition-review-picker-item:hover {
  background: #eef4ff;
  color: #17357f;
}

.tuition-review-picker-item span {
  display: grid;
  gap: 4px;
}

.tuition-review-picker-item small {
  color: #718096;
}

/* Popup xét duyệt luôn nằm trên danh sách giao dịch đang được giữ mở. */
.tuition-receipt-review-modal {
  z-index: 1770000 !important;
}
#unitRegisterExpectedEndDate[readonly],
#editUnit_expectedEndDate[readonly],
#unitDateUpdate_expectedEndDate[readonly] {
  cursor: default;
  pointer-events: none;
  border-color: #d8dee8;
  background: #f1f3f6;
  color: #5f6b7a;
  box-shadow: none;
}

.unit-register-date-hint {
  display: block;
  margin: -4px 0 10px;
  color: #738096;
  font-size: 12px;
  line-height: 1.4;
}

.enrollment-operations-header {
  margin-bottom: 12px;
}

#classEnrollmentOperations.page.active {
  display: flex !important;
  min-height: 0;
  overflow: hidden !important;
  flex-direction: column;
}

#classEnrollmentOperationsList {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  flex-direction: column;
}

.enrollment-operations-header p {
  margin: 5px 0 0;
  color: #64748b;
  font-size: 13px;
}

.enrollment-operations-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

.enrollment-history-tab-search {
  width:260px;
  min-height:39px;
  margin:0 0 0 auto;
  padding:8px 11px;
  border:1px solid #d8deea;
  border-radius:9px;
  background:#fff;
  font-size:12px;
}

.enrollment-history-tab-search[hidden] { display:none !important; }

.enrollment-history-mode-tabs {
  display:flex;
  gap:7px;
  margin:0 0 8px;
}
.enrollment-history-mode-tabs button {
  min-height:34px;
  padding:6px 11px;
  border:1px solid #d8deea;
  border-radius:8px;
  background:#fff;
  color:#46546a;
  font-size:11px;
  font-weight:800;
  cursor:pointer;
}
.enrollment-history-mode-tabs button.active { border-color:#203879; background:#203879; color:#fff; }
.enrollment-history-table td { overflow:hidden; text-overflow:ellipsis; }
.enrollment-history-table td[title],
.enrollment-history-table b[title] { cursor:help; }
.enrollment-history-split { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; min-height:0; flex:1 1 auto; }
.enrollment-history-panel { display:flex; min-width:0; min-height:0; overflow:hidden; flex-direction:column; border:1px solid #dce3ed; border-radius:12px; background:#fff; }
.enrollment-history-panel h2 { margin:0; padding:10px 12px; border-bottom:1px solid #dce3ed; background:#f7f8fc; color:#203879; font-size:14px; }
.enrollment-history-panel .enrollment-operations-table-wrap { border:0; border-radius:0; }
.enrollment-history-panel .enrollment-operations-table-wrap { overflow-x:hidden !important; }
.enrollment-history-panel .enrollment-history-table {
  width:100% !important;
  min-width:0 !important;
  max-width:100% !important;
  table-layout:fixed !important;
}
.enrollment-history-panel .enrollment-history-table th,
.enrollment-history-panel .enrollment-history-table td {
  min-width:0 !important;
  padding:6px 4px !important;
  font-size:8.5px !important;
  line-height:1.25;
  white-space:normal !important;
  overflow:hidden;
  overflow-wrap:anywhere;
  text-overflow:ellipsis;
}
.enrollment-history-panel .enrollment-history-table td small { font-size:7.5px !important; }
.enrollment-history-panel .enrollment-history-table th:nth-child(1) { width:17%; }
.enrollment-history-panel .enrollment-history-table th:nth-child(2) { width:17%; }
.enrollment-history-panel .enrollment-history-table th:nth-child(3) { width:15%; }
.enrollment-history-panel .enrollment-history-table th:nth-child(4) { width:15%; }
.enrollment-history-panel .enrollment-history-table th:nth-child(5) { width:16%; }
.enrollment-history-panel .enrollment-history-table th:nth-child(6) { width:20%; }

.enrollment-operations-tabs button {
  padding: 10px 16px;
  border: 1px solid #d8deea;
  border-radius: 9px;
  background: #fff;
  color: #46546a;
  font-weight: 700;
  font-size: 12.5px;
  cursor: pointer;
}

.enrollment-operations-tabs button.active {
  border-color: #203879;
  background: #203879;
  color: #fff;
}

#enrollmentOperationsWaitingTab {
  border-color: #f1b8bf;
  color: #c0263d;
}

#enrollmentOperationsWaitingTab.active {
  border-color: #c0263d;
  background: #c0263d;
  color: #fff;
}

#enrollmentOperationsWaitingTab:not(.active):hover {
  border-color: #c0263d;
  background: #fff0f1;
  color: #c0263d;
}

.enrollment-operations-tabs button:not(.active):hover {
  border-color: #8fa4d5;
  background: #eef3ff;
  color: #203879;
}

.enrollment-operations-tabs span {
  display: inline-grid;
  min-width: 21px;
  height: 21px;
  margin-left: 5px;
  place-items: center;
  border-radius: 999px;
  background: #eef2ff;
  color: #203879;
  font-size: 11px;
}

.enrollment-operations-table-wrap {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none !important;
  overflow: auto !important;
  scrollbar-gutter: stable;
  border: 1px solid #e1e7f0;
  border-radius: 14px;
  background: #fff;
}

.enrollment-operations-table td:first-child b,
.enrollment-operations-table td:first-child small,
.enrollment-operations-table td:nth-child(3) b,
.enrollment-operations-table td:nth-child(3) small {
  display: block;
}

.enrollment-operations-table td small {
  margin-top: 3px;
  color: #7a8699;
}

.enrollment-operations-table thead th {
  position: sticky;
  top: 0;
  z-index: 5;
}

.enrollment-program-badge {
  display: inline-flex;
  padding: 5px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
}

.enrollment-program-badge.grapeseed {
  background: #eef4ff;
  color: #2455bd;
}

.enrollment-program-badge.abeka {
  background: #eaf9f0;
  color: #16834c;
}

.enrollment-operation-status {
  display: inline-flex;
  align-items: center;
  padding: 6px 9px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 850;
  white-space: nowrap;
}

.enrollment-operation-status.needs-registration {
  background: #fff0f1;
  color: #c32546;
}

.enrollment-operation-status.needs-enrollment {
  background: #fff7df;
  color: #a76300;
}

.enrollment-operation-status.needs-closing {
  background: #fff1d8;
  color: #a44f00;
}

.enrollment-close-date-btn {
  padding: 8px 12px;
  border: 1px solid #d79029;
  border-radius: 8px;
  background: #fff8e8;
  color: #9a5200;
  font-size: 12px;
  font-weight: 850;
  white-space: nowrap;
  cursor: pointer;
}

.enrollment-close-date-btn:hover {
  background: #d98315;
  color: #fff;
}

.class-period-closing-modal {
  z-index: 1700000;
}

.class-period-closing-grid input[readonly] {
  pointer-events: none;
  border-color: #d8dee8;
  background: #f1f3f6;
  color: #64748b;
  box-shadow: none;
}

.unit-edit-confirm-state em {
  display: block;
  margin: 4px 0;
  color: #475569;
  font-size: 12px;
  font-style: normal;
}

.enrollment-row-action-dropdown {
  position: relative;
  display: inline-block;
}

.enrollment-row-action-trigger,
.enrollment-completed-actions button {
  padding: 8px 11px;
  border: 1px solid #cfd8e8;
  border-radius: 8px;
  background: #fff;
  color: #203879;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
}

.enrollment-row-action-trigger span {
  margin-left: 6px;
}

.enrollment-row-action-trigger:hover,
.enrollment-completed-actions button:hover {
  border-color: #203879;
  background: #203879;
  color: #fff;
}

.enrollment-row-action-menu {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2100000;
  display: none;
  min-width: 190px;
  padding: 6px;
  border: 1px solid #dce3ee;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 14px 34px rgba(15, 23, 42, .15);
}

.class-attendance-modal-content {
  display: flex;
  flex-direction: column;
  width: min(680px, calc(100vw - 32px));
  max-height: min(880px, calc(100vh - 32px));
  overflow: hidden;
}

.class-attendance-modal-content .modal-header p {
  margin: 4px 0 0;
  color: #64748b;
}

.class-attendance-controls {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.class-attendance-controls label {
  display: grid;
  gap: 6px;
  color: #475569;
  font-size: 12px;
  font-weight: 800;
}

.class-attendance-student-list {
  height: clamp(180px, 30vh, 310px);
  min-height: 180px;
  max-height: 310px;
  overflow-y: auto;
  border: 1px solid #e0e6ef;
  border-radius: 11px;
}

.class-attendance-student-list.is-refreshing {
  pointer-events: none;
  opacity: .72;
}


.class-attendance-table-head,
.class-attendance-student-row {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  align-items: center;
}

.class-attendance-table-head {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 9px 12px;
  background: #203879;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
}

.class-attendance-table-head > label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  color: #fff !important;
  font-size: 12px !important;
  line-height: 1.2;
  transform: translateY(-4px);
}

.class-attendance-table-head > label span {
  color: #fff !important;
  font-size: inherit !important;
  line-height: inherit;
}

.class-attendance-table-head > span {
  font-size: 12px;
  line-height: 1.2;
}

.schedule-table tbody td {
  border-bottom: .5px solid #e5e7eb !important;
}

.schedule-table tr.schedule-class-group-start:not(:first-child) > td {
  border-top: .5px solid #d6dbe3 !important;
}

.class-attendance-table-head > span:nth-child(2),
.class-attendance-student-row > span {
  padding-left: 19px;
}

.schedule-table tr.is-alternate-class:not(.is-class-holiday):not(.is-period-expired) > td {
  background: #f3f4f6 !important;
}

.schedule-table tr.is-standard-class:not(.is-class-holiday):not(.is-period-expired) > td {
  background: #fff !important;
}

.schedule-table tr.is-class-holiday > td {
  background: #fffbea !important;
}

.schedule-table tr.is-class-holiday .schedule-class-cell p,
.schedule-table tr.is-class-holiday .schedule-period {
  background: #f8f1cf !important;
}

.class-attendance-history-section {
  flex: 0 0 auto;
  margin-top: 12px;
}

.class-attendance-history-section h3 {
  margin: 0 0 7px;
  color: #203879;
  font-size: 13px;
}

.class-attendance-history-list {
  max-height: 175px;
  overflow-y: auto;
  border: 1px solid #e0e6ef;
  border-radius: 10px;
  background: #fff;
}

.class-attendance-history-list > .class-attendance-history-day {
  border-bottom: 1px solid #edf0f5;
}

.class-attendance-history-list > .class-attendance-history-day:nth-child(odd),
.class-attendance-history-list > .class-attendance-history-day:nth-child(odd) .class-attendance-history-day-head {
  background: #f1f3f5;
}

.class-attendance-history-list > .class-attendance-history-day:nth-child(even),
.class-attendance-history-list > .class-attendance-history-day:nth-child(even) .class-attendance-history-day-head {
  background: #fff;
}

.class-attendance-history-list > div:last-child {
  border-bottom: 0;
}

.class-attendance-history-list b,
.class-attendance-history-list small {
  display: block;
}

.class-attendance-history-list b {
  color: #203879;
  font-size: 12px;
}

.class-attendance-history-list small {
  margin-top: 2px;
  color: #64748b;
  font-size: 10.5px;
}

.class-attendance-history-list strong {
  color: #168344;
  font-size: 11px;
}

.class-attendance-history-list button {
  flex: 0 0 auto;
  padding: 5px 8px;
  border: 1px solid #fecaca;
  border-radius: 7px;
  background: #fff;
  color: #dc2626;
  font-size: 10.5px;
  font-weight: 800;
  cursor: pointer;
}

.class-attendance-history-day-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  padding: 9px 12px 7px;
  background: #f8fafc;
}

.class-attendance-history-day-head b {
  color: #172f73;
  font-size: 13px;
}

.class-attendance-day-count {
  justify-self: center;
  color: #168344;
  font-size: 11px;
  white-space: nowrap;
}

.class-attendance-history-day-head button {
  justify-self: end;
}

.class-attendance-history-lessons {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 7px 12px 10px;
}

.class-attendance-history-lessons > span {
  display: inline-flex;
  align-items: center;
  padding: 5px 8px;
  border: 1px solid #dbe5f5;
  border-radius: 8px;
  background: #fff;
  color: #203879;
  font-size: 10px;
  font-weight: 800;
}

.class-attendance-lesson-picker {
  position: relative;
}

.class-attendance-lesson-picker > summary {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 42px;
  padding: 9px 11px;
  border: 1px solid #d1d5db;
  border-radius: 9px;
  background: #fff;
  color: #334155;
  font-size: 13px;
  font-weight: 750;
  cursor: pointer;
  list-style: none;
}

.class-attendance-lesson-picker > summary::-webkit-details-marker {
  display: none;
}

.class-attendance-lesson-options {
  position: absolute;
  z-index: 30;
  top: calc(100% + 5px);
  left: 0;
  right: 0;
  max-height: 230px;
  padding: 6px;
  overflow-y: auto;
  border: 1px solid #dbe3ef;
  border-radius: 9px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(15, 23, 42, .16);
}

.class-attendance-lesson-options label {
  display: flex;
  grid-template-columns: none;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  border-radius: 7px;
  color: #334155;
  cursor: pointer;
}

.class-attendance-lesson-options label:hover {
  background: #f5f7fb;
}

.class-attendance-lesson-options input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: #203879;
}

.attendance-summary-tabs {
  display: flex;
  gap: 7px;
  margin: 0;
}

.attendance-summary-tab-row {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.attendance-summary-tabs button {
  padding: 10px 16px;
  border: 1px solid #d8e0ec;
  border-radius: 9px;
  background: #fff;
  color: #64748b;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
}

.attendance-summary-tabs button.active {
  border-color: #203879;
  background: #203879;
  color: #fff;
}

.attendance-summary-tabs button:not(.active):hover {
  border-color: #8fa4d5;
  background: #eef3ff;
  color: #203879;
}

.attendance-summary-tabs button span {
  display: inline-flex;
  min-width: 20px;
  justify-content: center;
  margin-left: 4px;
  padding: 2px 5px;
  border-radius: 999px;
  background: rgba(255,255,255,.18);
}

.attendance-summary-table-wrap {
  height: 100%;
  max-height: none;
  overflow: auto !important;
  border-radius: 12px;
}

#attendanceSummary.page.active {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 190px);
  min-height: 0;
  overflow: hidden;
}

#attendanceSummaryList {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  padding-bottom: 12px;
  overflow: hidden;
}

.attendance-summary-filter {
  display: flex;
  flex: 0 0 auto;
  justify-content: flex-end;
  margin: 0;
}

.attendance-summary-filter[hidden] {
  display: none !important;
}

.attendance-summary-filter.is-invisible {
  visibility: hidden;
  pointer-events: none;
}

.attendance-summary-filter label {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #526176;
  font-size: 11.5px;
  font-weight: 800;
}

.attendance-summary-filter select {
  min-width: 135px;
  height: 34px;
  padding: 0 30px 0 10px;
  border: 1px solid #d5ddea;
  border-radius: 8px;
  background: #fff;
  color: #203879;
  font-size: 11.5px;
  font-weight: 800;
}

.attendance-summary-table {
  width: 100%;
  table-layout: fixed;
}

.attendance-summary-table thead th {
  position: sticky;
  top: 0;
  z-index: 3;
}

.attendance-summary-active-table th:nth-child(1) { width: 11%; }
.attendance-summary-active-table th:nth-child(2) { width: 18%; }
.attendance-summary-active-table th:nth-child(3) { width: 13%; }
.attendance-summary-active-table th:nth-child(4) { width: 15%; }
.attendance-summary-active-table th:nth-child(5) { width: 15%; }
.attendance-summary-active-table th:nth-child(6) { width: 14%; }
.attendance-summary-active-table th:nth-child(7) { width: 14%; }

.attendance-summary-other-table th:nth-child(1) { width: 18%; }
.attendance-summary-other-table th:nth-child(2) { width: 34%; }
.attendance-summary-other-table th:nth-child(3) { width: 26%; }
.attendance-summary-other-table th:nth-child(4) { width: 22%; }

.attendance-care-status {
  display: inline-flex;
  justify-content: center;
  padding: 5px 9px;
  border-radius: 999px;
  background: #eaf8ef;
  color: #168344;
  font-size: 11px;
  font-weight: 850;
  white-space: nowrap;
}

.attendance-care-status.needs-action {
  background: #fff0f1;
  color: #c0263d;
}

.operator-update-cell b,
.operator-update-cell small {
  display: block;
}

.operator-update-cell b {
  color: #203879;
  font-size: 11.5px;
  white-space: nowrap;
}

.operator-update-cell small {
  margin-top: 3px;
  color: #718096;
  font-size: 9.5px;
  line-height: 1.3;
}

#carelog.page.active {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.carelog-page-header {
  flex: 0 0 auto;
  margin-bottom: 12px;
}

.carelog-page-header p {
  margin: 4px 0 0;
  color: #64748b;
  font-size: 12px;
}

.carelog-controls {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.carelog-tabs {
  display: flex;
  gap: 7px;
  flex-wrap: nowrap;
}

.carelog-tabs button {
  padding: 10px 16px;
  border: 1px solid #d6dfec;
  border-radius: 9px;
  background: #fff;
  color: #5d697c;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.carelog-tabs button.active {
  border-color: #203879;
  background: #203879;
  color: #fff;
}

.carelog-tabs button:not(.active):hover {
  border-color: #8fa4d5;
  background: #eef3ff;
  color: #203879;
}

#carelogPendingTab {
  border-color: #f1b8bf;
  color: #c0263d;
}

#carelogStudentTab {
  border-color: #f1b8bf;
  color: #c0263d;
}

#carelogStudentTab.active {
  border-color: #c0263d;
  background: #c0263d;
  color: #fff;
}

#carelogStudentTab:not(.active):hover {
  border-color: #c0263d;
  background: #fff0f1;
  color: #c0263d;
}

.carelog-intake-dropdown {
  position: relative;
}

.carelog-intake-menu {
  position: absolute;
  z-index: 1000;
  top: calc(100% + 6px);
  right: 0;
  display: none;
  width: 180px;
  padding: 5px;
  border: 1px solid #d8e0eb;
  border-radius: 9px;
  background: #fff;
}

.carelog-intake-menu.show { display: grid; }

.carelog-intake-menu button {
  padding: 9px 10px;
  border: 0;
  border-radius: 7px;
  background: #fff;
  color: #334155;
  text-align: left;
  font-weight: 750;
  cursor: pointer;
}

.carelog-intake-menu button:hover {
  background: #f0f4fa;
  color: #203879;
}

#carelogPendingTab.active {
  border-color: #c0263d;
  background: #c0263d;
  color: #fff;
}

#carelogPendingTab.active span {
  background: rgba(255,255,255,.2);
}

#carelogPendingTab:hover {
  border-color: #c0263d;
  background: #fff0f1;
  color: #c0263d;
}

#carelogPendingTab.active:hover {
  background: #c0263d;
  color: #fff;
}

.carelog-tabs button.active:hover {
  transform: none;
}

.carelog-tabs span {
  display: inline-flex;
  min-width: 19px;
  justify-content: center;
  margin-left: 4px;
  padding: 2px 5px;
  border-radius: 999px;
  background: rgba(255,255,255,.18);
}

.carelog-controls .toolbar {
  margin: 0;
}

.carelog-filter-toolbar {
  display: flex;
  align-items: center;
  gap: 7px;
}

.carelog-filter-toolbar select,
.carelog-filter-toolbar input {
  box-sizing: border-box;
  height: 34px;
  margin: 0;
  border: 1px solid #d8e0eb;
  border-radius: 8px;
  background: #fff;
  color: #425066;
  font-size: 11px;
}

.carelog-filter-toolbar select {
  width: 150px;
}

.carelog-filter-toolbar input[type="week"],
.carelog-filter-toolbar input[type="month"] {
  width: 116px;
  padding-left: 6px;
  padding-right: 4px;
}

.carelog-filter-toolbar .is-hidden {
  display: none;
}

.carelog-controls input {
  width: min(340px, 34vw);
  height: 34px;
  font-size: 11.5px;
}

#carelogList {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  flex-direction: column;
}

.carelog-table-wrap {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto !important;
  border-radius: 12px;
}

.carelog-table {
  width: 100%;
  min-width: 0;
  table-layout: fixed;
}

.carelog-pending-table {
  min-width: 0;
}

.carelog-student-table {
  min-width: 0;
}

.carelog-student-table th,
.carelog-student-table td {
  padding-left: 6px;
  padding-right: 6px;
  overflow-wrap: anywhere;
}

.carelog-student-table th,
.carelog-completed-table th {
  white-space: normal;
  line-height: 1.25;
}

.carelog-student-table th {
  font-size: 11.5px;
}

.carelog-table td > b + small {
  display: block;
}

.carelog-completed-table {
  min-width: 1180px;
}

.carelog-pending-table th:nth-child(1) { width: 8%; }
.carelog-pending-table th:nth-child(2) { width: 11%; }
.carelog-pending-table th:nth-child(3) { width: 6%; }
.carelog-pending-table th:nth-child(4) { width: 8%; }
.carelog-pending-table th:nth-child(5) { width: 12%; }
.carelog-pending-table th:nth-child(6) { width: 13%; }
.carelog-pending-table th:nth-child(7) { width: 10%; }
.carelog-pending-table th:nth-child(8) { width: 8%; }
.carelog-pending-table th:nth-child(9) { width: 13%; }
.carelog-pending-table th:nth-child(10) { width: 11%; }

.carelog-student-table th:nth-child(1) { width: 10%; }
.carelog-student-table th:nth-child(2) { width: 12%; }
.carelog-student-table th:nth-child(3) { width: 7%; }
.carelog-student-table th:nth-child(4) { width: 9%; }
.carelog-student-table th:nth-child(5) { width: 14%; }
.carelog-student-table th:nth-child(6) { width: 14%; }
.carelog-student-table th:nth-child(7) { width: 11%; }
.carelog-student-table th:nth-child(8) { width: 13%; }
.carelog-student-table th:nth-child(9) { width: 10%; }

.carelog-pending-table th,
.carelog-pending-table td {
  padding-left: 6px;
  padding-right: 6px;
  overflow-wrap: anywhere;
}

.carelog-pending-table th {
  font-size: 14px;
  line-height: 1.25;
  white-space: normal;
  overflow: hidden;
  text-overflow: clip;
}

.carelog-student-table th:nth-child(7),
.carelog-student-table td:nth-child(7),
.carelog-pending-table th:nth-child(7),
.carelog-pending-table td:nth-child(7) {
  padding-left:10px;
  white-space:nowrap;
  overflow-wrap:normal;
}

.carelog-table thead th {
  position: sticky;
  top: 0;
  z-index: 4;
  font-size: 11.5px;
  line-height: 1.25;
  white-space: normal;
}

.carelog-completed-table tr.is-student-completed > td {
  background: #faf7ff !important;
}

.carelog-completed-table tr.is-parent-completed > td {
  background: #f4faff !important;
}

.carelog-student-table tbody tr > td {
  background: #faf7ff !important;
}

.carelog-pending-table tbody tr > td {
  background: #f4faff !important;
}

.carelog-table td > b,
.carelog-table td > small {
  display: block;
}

.carelog-table td > b {
  color: #203879;
}

.carelog-table td > small {
  margin-top: 3px;
  color: #718096;
  font-size: 9.5px;
}

.carelog-status {
  display: inline-flex;
  padding: 5px 8px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 850;
  white-space: nowrap;
}

.carelog-status.is-pending {
  background: #fff0f1;
  color: #c0263d;
}

.carelog-status.is-completed {
  background: #eaf8ef;
  color: #168344;
}

.carelog-status.is-cancelled {
  background: #eef1f5;
  color: #667085;
}

.carelog-update-btn {
  padding: 7px 10px;
  border: 1px solid #b9c8ea;
  border-radius: 8px;
  background: #fff;
  color: #203879;
  font-size: 11px;
  font-weight: 850;
  cursor: pointer;
}

.carelog-update-btn:hover {
  background: #203879;
  color: #fff;
}

.carelog-row-actions {
  display: grid;
  gap: 5px;
}

.carelog-detail-btn {
  padding: 6px 7px;
  border: 1px solid #d5ddea;
  border-radius: 8px;
  background: #f7f9fc;
  color: #526176;
  font-size: 10.5px;
  font-weight: 800;
  cursor: pointer;
}

.carelog-clamped-text {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-height: 1.35;
}

.carelog-has-images {
  display: block;
  margin-top: 4px;
  color: #dc2626;
  font-size: 9.5px;
  font-weight: 850;
}

.carelog-inline-staff {
  box-sizing: border-box;
  width: 100%;
  min-width: 165px;
  height: 34px;
  padding: 5px 8px;
  border: 1px solid #d5ddea;
  border-radius: 8px;
  background: #fff;
  color: #334155;
  font-size: 10.5px;
  font-weight: 750;
}

.carelog-modal {
  z-index: 1800000;
}

.carelog-modal-content {
  position: relative;
  width: min(760px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  overflow-x: hidden;
}

.carelog-modal-content .modal-header {
  position: relative;
  padding-right: 44px;
}

.carelog-modal-close {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  display: inline-flex !important;
  width: 32px !important;
  height: 32px !important;
  align-items: center;
  justify-content: center;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid #d9e0eb !important;
  border-radius: 8px !important;
  background: #fff !important;
  color: #64748b !important;
  font-size: 20px !important;
  line-height: 1 !important;
}

.carelog-cancel-btn {
  padding: 8px 16px !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 8px !important;
  background: #f8fafc !important;
  color: #526176 !important;
  box-shadow: none !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}

.carelog-cancel-btn:hover {
  border-color: #94a3b8 !important;
  background: #e9eef5 !important;
  color: #334155 !important;
}

.carelog-detail-content {
  position: relative;
  width: min(900px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  overflow-x: hidden;
}

.carelog-detail-content > .modal-header {
  padding-right: 48px;
}

.carelog-detail-close {
  position: absolute;
  z-index: 3;
  top: 16px;
  right: 16px;
  display: inline-grid;
  width: 32px;
  height: 32px;
  padding: 0;
  place-items: center;
  border: 1px solid #d8e0eb;
  border-radius: 8px;
  background: #fff;
  color: #64748b;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.carelog-detail-close:hover {
  border-color: #b8c3d3;
  background: #eef2f7;
  color: #203879;
}

.carelog-detail-sections {
  display: grid;
  gap: 14px;
}

.carelog-detail-section {
  overflow: hidden;
  border: 1px solid #dfe6f0;
  border-radius: 11px;
  background: #fff;
}

.carelog-detail-section h3 {
  margin: 0;
  padding: 10px 14px;
  border-bottom: 1px solid #dfe6f0;
  background: #f1f5fb;
  color: #203879;
  font-size: 13px;
  font-weight: 850;
}

.carelog-detail-processing h3 {
  background: #eef8f2;
  color: #147a42;
}

.carelog-detail-rows > div {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  align-items: start;
  gap: 14px;
  padding: 9px 14px;
  border-bottom: 1px solid #edf1f6;
}

.carelog-detail-rows > div:last-child {
  border-bottom: 0;
}

.carelog-detail-rows span {
  color: #718096;
  font-size: 11px;
  font-weight: 800;
}

.carelog-detail-rows b,
.carelog-detail-rows p {
  margin: 0;
  color: #27364d;
  font-size: 12px;
  line-height: 1.45;
}

.carelog-detail-rows b small {
  margin-left: 6px;
  color: #718096;
  font-size: 10.5px;
  font-weight: 650;
}

.carelog-detail-rows .is-text p {
  white-space: pre-wrap;
}

.carelog-detail-rows .carelog-status {
  display: inline-flex;
  font-style: normal;
}

.carelog-detail-updated {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  padding: 9px 14px;
  border-radius: 9px;
  background: #f8fafc;
}

.carelog-detail-updated > span {
  color: #718096;
  font-size: 11px;
  font-weight: 800;
}

@media (max-width: 620px) {
  .carelog-detail-rows > div,
  .carelog-detail-updated {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}

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

.carelog-form-grid label,
.carelog-modal-content > label,
#careCancelFields label {
  display: grid;
  gap: 5px;
  color: #526176;
  font-size: 11.5px;
  font-weight: 800;
}

.carelog-form-wide {
  grid-column: 1 / -1;
}

.carelog-modal-content input,
.carelog-modal-content select,
.carelog-modal-content textarea {
  box-sizing: border-box;
  width: 100%;
  border: 1px solid #d5ddea;
  border-radius: 8px;
  background: #fff;
}

.carelog-image-field small,
.carelog-image-field em {
  display: block;
  color: #718096;
  font-size: 10px;
  font-style: normal;
  font-weight: 650;
}

.carelog-image-field input[type="file"] {
  height: auto;
  padding: 8px;
  border: 1px dashed #b9c5d8;
  background: #f8fafc;
}

.carelog-detail-content.has-image-layout {
  width: min(900px, calc(100vw - 32px));
}

.carelog-detail-body.has-images {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 14px;
}

.carelog-detail-gallery {
  display: grid;
  gap: 9px;
  align-content: start;
  max-height: none;
  overflow: visible;
  width: 100%;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.carelog-detail-gallery h3 {
  margin: 0 0 2px;
  color: #203879;
  font-size: 13px;
}

.carelog-detail-gallery button {
  display: block;
  overflow: hidden;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: #fff !important;
  box-shadow: none !important;
  line-height: 0;
  cursor: zoom-in;
}

.carelog-detail-gallery button:hover,
.carelog-detail-gallery button:focus,
.carelog-detail-gallery button:active {
  background: #fff !important;
  color: inherit !important;
  outline: none;
}

.carelog-detail-gallery img {
  display: block;
  width: 100%;
  height: auto;
  max-height: none;
  background: #fff;
  object-fit: cover;
}

.carelog-image-viewer {
  position: fixed;
  inset: 0;
  z-index: 2200000;
  padding: 18px;
  background: rgba(15, 23, 42, .82);
  overflow: auto;
  overscroll-behavior: contain;
}

.carelog-image-viewer-content {
  position: relative;
  display: grid;
  width: min(1200px, calc(100vw - 36px));
  min-height: calc(100dvh - 36px);
  height: auto;
  margin: auto;
  place-items: center;
}

.carelog-image-viewer-content > button {
  position: absolute;
  z-index: 2;
  top: 0;
  right: 0;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  border-radius: 9px;
  background: #fff;
  color: #334155;
  font-size: 24px;
  cursor: pointer;
}

.carelog-image-viewer-content img {
  display: block;
  max-width: 100%;
  max-height: calc(100dvh - 72px);
  object-fit: contain;
}

@media (max-width: 760px) {
  .carelog-detail-body.has-images {
    grid-template-columns: 1fr;
  }
}

.carelog-modal-content input,
.carelog-modal-content select {
  height: 38px;
  padding: 7px 9px;
}

.carelog-modal-content textarea {
  padding: 9px;
  resize: vertical;
}

#careCancelFields,
#careCompleteFields {
  margin-top: 12px;
}

#careCancelFields[hidden],
#careCompleteFields[hidden] {
  display: none !important;
}

@media (max-width: 720px) {
  .carelog-controls { align-items: stretch; flex-direction: column; }
  .carelog-controls input { width: 100%; }
  .carelog-form-grid { grid-template-columns: 1fr; }
  .carelog-form-wide { grid-column: auto; }
}

.attendance-summary-table td b,
.attendance-summary-table td small {
  display: block;
}

.attendance-summary-table td b {
  color: #203879;
}

.attendance-summary-table td small {
  margin-top: 3px;
  color: #64748b;
  font-size: 10.5px;
}

.attendance-absence-count {
  display: inline-flex;
  padding: 5px 8px;
  border-radius: 8px;
  background: #edf8f1;
  color: #168344;
  font-size: 11px;
  font-weight: 850;
  white-space: nowrap;
}

.attendance-absence-count.has-absence {
  background: #fff1f2;
  color: #c0263d;
}

.attendance-query-btn {
  padding: 7px 10px;
  border: 1px solid #b9c8ea;
  border-radius: 8px;
  background: #fff;
  color: #203879;
  font-size: 11px;
  font-weight: 850;
  cursor: pointer;
}

.attendance-history-query-modal {
  z-index: 1500000;
  align-items: flex-start;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 16px;
}

.attendance-history-query-content {
  display: flex;
  flex-direction: column;
  width: min(720px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
}

.attendance-history-query-result {
  flex: 1 1 auto;
  min-height: 140px;
  max-height: min(55vh, 500px);
  margin-top: 12px;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  border: 1px solid #e0e6ef;
  border-radius: 10px;
}

.attendance-history-query-result > div:not(.empty) {
  padding: 10px 12px;
  border-bottom: 1px solid #edf0f5;
}

.attendance-history-query-result > div:nth-child(odd) {
  background: #f3f4f6;
}

.attendance-history-query-result > div:last-child {
  border-bottom: 0;
}

.attendance-history-query-result b {
  display: block;
  margin-bottom: 6px;
  color: #203879;
  font-size: 12px;
}

.attendance-history-query-result span {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.attendance-history-query-result i {
  padding: 5px 7px;
  border-radius: 7px;
  background: #f1f5f9;
  color: #64748b;
  font-size: 10.5px;
  font-style: normal;
  font-weight: 800;
}

.attendance-history-query-result i.is-present {
  background: #dcfce7;
  color: #168344;
}

.attendance-history-query-result i.is-absent {
  background: #fee2e2;
  color: #b91c1c;
}

.video-workflow-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  padding: 5px 7px;
  border-radius: 999px;
  background: #f1f5f9;
  color: #64748b;
  font-size: 10.5px;
  font-weight: 850;
  line-height: 1.25;
  text-align: center;
}

.video-workflow-status.is-pending,
.video-workflow-status.is-pending-new {
  background: #fff7d6;
  color: #9a6700;
}

.video-workflow-status.is-failed {
  background: #fee2e2;
  color: #b91c1c;
}

.video-workflow-status.is-complete {
  background: #dcfce7;
  color: #168344;
}

.class-attendance-table-head > label input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: #fff;
}

#classDetail.is-period-expired .class-detail-page-header,
#classDetail.is-period-expired #classDetailStudentsList {
  opacity: .72;
}

#classDetail.is-period-expired .class-unit-enrollment-warning {
  opacity: 1;
}

#classDetail .class-unit-action-trigger:disabled {
  cursor: not-allowed;
  opacity: .48;
  pointer-events: none;
}

.schedule-table tr.is-period-expired > td {
  background: #fff0f1 !important;
  color: #7f1d1d !important;
  box-shadow: inset 0 1px 0 rgba(220, 38, 38, .18), inset 0 -1px 0 rgba(220, 38, 38, .18);
}

.schedule-table tr.is-period-expired .schedule-row-actions button:disabled {
  cursor: not-allowed;
  opacity: .42;
}

.schedule-period-expired-warning {
  margin-top: 9px;
  padding: 7px 8px;
  border: 1px solid #fca5a5;
  border-radius: 7px;
  background: #fee2e2;
  color: #b91c1c;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.35;
}

.inline-staff-summary.is-locked {
  opacity: .65;
}

#scheduleModal .is-locked-field,
#scheduleModal .is-locked-field:disabled,
#scheduleModal .is-locked-field[readonly] {
  background: #f1f3f5 !important;
  border-color: #d8dee8 !important;
  color: #5f6b7a !important;
  box-shadow: none !important;
  cursor: default !important;
  opacity: 1 !important;
}

#scheduleModal .is-locked-field:hover,
#scheduleModal .is-locked-field:focus {
  background: #f1f3f5 !important;
  border-color: #d8dee8 !important;
  box-shadow: none !important;
  outline: none !important;
}

.unit-register-class-info-title {
  margin: 14px 0 2px;
  padding-top: 12px;
  border-top: 1px solid #e2e8f0;
  color: #203879;
  font-size: 13px;
  font-weight: 900;
}

.unit-register-study-days {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
  margin: 5px 0 12px;
}

.unit-register-study-days label {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 6px 8px;
  border: 1px solid #dbe3ef;
  border-radius: 8px;
  background: #f8fafc;
  color: #334155;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.unit-register-study-days input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: #203879;
}

.unit-register-class-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 12px;
}

.unit-register-class-info-grid .form-group {
  margin: 0;
}

@media (max-width: 640px) {
  .unit-register-study-days,
  .unit-register-class-info-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.class-attendance-student-row {
  min-height: 54px;
  padding: 8px 12px;
  border-bottom: 1px solid #edf0f5;
  cursor: pointer;
}

.class-attendance-student-row:last-child {
  border-bottom: 0;
}

.class-attendance-student-row:hover {
  background: #f8fafc;
}

.class-attendance-student-row input {
  width: 17px;
  height: 17px;
  margin: 0 auto;
}

.class-attendance-student-row span,
.class-attendance-student-row b,
.class-attendance-student-row small {
  display: block;
}

.class-attendance-student-row small {
  margin-top: 3px;
  color: #7a8699;
}

@media (max-width: 640px) {
  .class-attendance-controls {
    grid-template-columns: 1fr;
  }
}

.enrollment-row-action-menu.show {
  display: block;
}

.enrollment-row-action-menu button {
  display: block;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #334155;
  font-size: 12px;
  font-weight: 750;
  text-align: left;
  cursor: pointer;
}

.enrollment-row-action-menu button:hover:not(:disabled) {
  background: #fff1f3;
  color: #c32546;
}

.enrollment-row-action-menu button:disabled {
  color: #aab3c2;
  cursor: not-allowed;
}

.enrollment-completed-actions {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
}

/* Mobile last-mile overrides: luôn đặt cuối file để không bị style từng trang ghi đè. */
@media (max-width: 900px) {
  html, body { height:auto!important; overflow-x:hidden!important; overflow-y:auto!important; }
  .top-management-bar, .breadcrumb-nav { position:static!important; }
  .app.no-sidebar main, body.schedule-page-open .app.no-sidebar main { height:auto!important; padding:12px!important; overflow:visible!important; }
  .page.active, #dashboard.page.active, #schedules.page.active, #tuition.page.active,
  #carelog.page.active, #attendanceSummary.page.active, #classEnrollmentOperations.page.active {
    height:auto!important; min-height:0!important; max-height:none!important; overflow:visible!important;
  }
  .schedule-view-controls { flex-direction:column!important; align-items:stretch!important; }
  .schedule-time-controls { width:100%!important; overflow:visible!important; }
  .schedule-view-controls .schedule-day-toolbar,
  .schedule-view-controls .video-week-toolbar,
  .schedule-day-toolbar, .video-week-toolbar {
    display:grid!important; grid-template-columns:34px minmax(82px,1fr) 34px!important;
    width:100%!important; min-width:0!important; height:auto!important; min-height:0!important;
    max-height:none!important; padding:6px!important; gap:5px!important; overflow:visible!important;
  }
  .schedule-day-toolbar>button, .video-week-toolbar>button { width:34px!important; min-width:34px!important; height:34px!important; }
  .schedule-day-toolbar>button:nth-child(2), .video-week-toolbar>button:nth-child(2) { width:100%!important; min-width:82px!important; }
  .schedule-day-toolbar>label, .video-week-toolbar>label {
    display:grid!important; grid-column:1/-1!important; grid-template-columns:1fr!important;
    width:100%!important; min-width:0!important; transform:none!important;
  }
  .schedule-day-toolbar>label input, .video-week-toolbar>label input {
    width:100%!important; max-width:none!important; height:34px!important; margin:0!important;
  }
  .table-container, #classSchedulesList, #outsideClassWorkList, #classVideoUpdatesList,
  #tuitionList .table-container, #tuitionNoticeList .table-container,
  #tuitionHistoryList .table-container, #tuitionConfirmationList .table-container,
  .attendance-summary-table-wrap {
    height:auto!important; max-height:none!important; overflow-x:auto!important; overflow-y:visible!important;
  }
  .crm-table th, .crm-table td, .dashboard-table th, .dashboard-table td {
    padding:7px 6px!important; font-size:10.5px!important; line-height:1.35!important;
  }
  .modal { align-items:flex-start!important; overflow-y:auto!important; }
  body .modal .modal-content {
    width:100%!important; max-width:100%!important; height:auto!important;
    max-height:calc(100dvh - 16px)!important; overflow:auto!important;
  }
  .branch-overview-sidebar { height:auto!important; }
  .branch-mini-table-wrap { height:190px!important; overflow-y:auto!important; }
  .branch-mini-table thead th { position:sticky!important; top:0!important; z-index:5!important; }
}

@media (max-width: 900px) {
  /* Nested table scrolling: hết bảng sẽ tiếp tục cuộn trang. */
  .schedule-table-container,
  .outside-work-table-container,
  .video-update-table-container,
  #tuitionList .table-container,
  #tuitionNoticeList .table-container,
  #tuitionHistoryList .table-container,
  #tuitionConfirmationList .table-container,
  .attendance-summary-table-wrap,
  #carelogList .table-container {
    max-width: 100% !important;
    max-height: 62dvh !important;
    overflow: auto !important;
    overscroll-behavior: auto !important;
    touch-action: pan-x pan-y;
    -webkit-overflow-scrolling: touch;
  }

  .schedule-table-container,
  .outside-work-table-container,
  .video-update-table-container {
    overflow-x: auto !important;
    overflow-y: auto !important;
  }

  /* Thanh thời gian giữ nguyên một hàng nhưng co gọn cho điện thoại. */
  .schedule-view-controls .schedule-day-toolbar,
  .schedule-view-controls .video-week-toolbar,
  .schedule-day-toolbar,
  .video-week-toolbar {
    grid-template-columns: 30px 70px minmax(150px, 1fr) 30px !important;
    align-items: center !important;
    padding: 4px !important;
    gap: 4px !important;
  }

  .schedule-day-toolbar > button,
  .video-week-toolbar > button {
    width: 30px !important;
    min-width: 30px !important;
    height: 30px !important;
    padding: 0 !important;
    font-size: 10px !important;
  }

  .schedule-day-toolbar > button:nth-child(2),
  .video-week-toolbar > button:nth-child(2) {
    width: 70px !important;
    min-width: 70px !important;
    font-size: 9.5px !important;
  }

  .schedule-day-toolbar > label,
  .video-week-toolbar > label {
    display: grid !important;
    grid-column: auto !important;
    grid-template-columns: auto minmax(112px, 1fr) !important;
    align-items: center !important;
    width: auto !important;
    min-width: 0 !important;
    gap: 4px !important;
    font-size: 8.5px !important;
    line-height: 1.15;
    white-space: normal !important;
  }

  .schedule-day-toolbar > label input,
  .video-week-toolbar > label input {
    width: 100% !important;
    min-width: 0 !important;
    height: 30px !important;
    padding: 3px 4px !important;
    font-size: 10px !important;
  }

  /* Thời gian biểu: chữ và nút nhỏ, vẫn đủ vùng chạm. */
  .schedule-table { min-width: 720px !important; }
  .outside-work-table { min-width: 690px !important; }
  .video-update-table { min-width: 760px !important; }
  .schedule-table th,
  .schedule-table td,
  .outside-work-table th,
  .outside-work-table td,
  .video-update-table th,
  .video-update-table td {
    padding: 6px 5px !important;
    font-size: 9.5px !important;
  }
  .schedule-class-cell > strong { font-size: 14px !important; }
  .schedule-unit-label { font-size: 11px !important; }
  .schedule-class-cell small,
  .schedule-class-cell p,
  .schedule-other-info span,
  .schedule-other-info b { font-size: 8.5px !important; }
  .schedule-row-actions button,
  .video-update-status-btn,
  .inline-staff-picker > summary,
  .workday-header-actions button,
  #addScheduleButton {
    min-height: 30px !important;
    padding: 5px 7px !important;
    font-size: 9.5px !important;
    line-height: 1.2 !important;
  }

  /* Tabs, bộ lọc và nút của các trang vận hành. */
  .tuition-view-tabs,
  .attendance-summary-tabs,
  .carelog-tabs {
    display: flex !important;
    width: 100%;
    gap: 5px !important;
    overflow-x: auto;
    scrollbar-width: thin;
  }
  .tuition-view-tabs button,
  .attendance-summary-tabs button,
  .carelog-tabs button {
    flex: 0 0 auto;
    min-height: 32px !important;
    padding: 6px 8px !important;
    font-size: 9.5px !important;
    line-height: 1.2 !important;
    white-space: nowrap;
  }
  .tuition-list-controls,
  .attendance-summary-tab-row,
  .carelog-controls {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 7px !important;
  }
  .tuition-student-toolbar,
  .attendance-summary-filter,
  .carelog-filter-toolbar {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    gap: 5px !important;
  }
  .tuition-student-toolbar button,
  .tuition-history-actions button,
  .attendance-summary-filter button,
  .carelog-page-header button,
  .carelog-filter-toolbar button {
    min-height: 32px !important;
    padding: 6px 8px !important;
    font-size: 10px !important;
  }
  .tuition-student-toolbar input,
  .tuition-student-toolbar select,
  .attendance-summary-filter select,
  .carelog-filter-toolbar input,
  .carelog-filter-toolbar select {
    min-height: 34px !important;
    margin: 0 !important;
    padding: 6px 8px !important;
    font-size: 12px !important;
  }
  #tuitionList table,
  #tuitionNoticeList table,
  #tuitionHistoryList table,
  #tuitionConfirmationList table,
  .attendance-summary-table,
  #carelogList table {
    min-width: 760px;
  }
  #tuitionList th, #tuitionList td,
  #tuitionNoticeList th, #tuitionNoticeList td,
  #tuitionHistoryList th, #tuitionHistoryList td,
  #tuitionConfirmationList th, #tuitionConfirmationList td,
  .attendance-summary-table th, .attendance-summary-table td,
  #carelogList th, #carelogList td {
    padding: 6px 5px !important;
    font-size: 9.5px !important;
  }
}

/* Mobile/tablet final layout: chỉ cuộn trang, không tạo vùng cuộn riêng trong bảng. */
@media (max-width: 900px) {
  .schedule-view-controls .schedule-day-toolbar,
  .schedule-view-controls .video-week-toolbar,
  .schedule-day-toolbar,
  .video-week-toolbar {
    display: grid !important;
    grid-template-columns: 28px 68px minmax(0, 1fr) 28px !important;
    align-items: center !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    padding: 4px !important;
    gap: 4px !important;
    overflow: hidden !important;
  }
  .schedule-day-toolbar > button,
  .video-week-toolbar > button {
    width: 28px !important;
    min-width: 28px !important;
    height: 28px !important;
    padding: 0 !important;
    font-size: 9px !important;
  }
  .schedule-day-toolbar > button:nth-child(2),
  .video-week-toolbar > button:nth-child(2) {
    width: 68px !important;
    min-width: 68px !important;
  }
  .schedule-day-toolbar > label,
  .video-week-toolbar > label {
    display: block !important;
    grid-column: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    font-size: 0 !important;
    line-height: 0 !important;
    transform: none !important;
  }
  .schedule-day-toolbar > label input,
  .video-week-toolbar > label input {
    box-sizing: border-box !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 28px !important;
    margin: 0 !important;
    padding: 2px 5px !important;
    font-size: 10px !important;
    line-height: 1 !important;
  }

  /* Mọi bảng bung hết chiều cao; không cuộn ngang/dọc bên trong. */
  .table-container,
  .dashboard-table-container,
  .schedule-table-container,
  .outside-work-table-container,
  .video-update-table-container,
  .attendance-summary-table-wrap,
  .branch-mini-table-wrap,
  #classSchedulesList,
  #outsideClassWorkList,
  #classVideoUpdatesList,
  #tuitionList .table-container,
  #tuitionNoticeList .table-container,
  #tuitionHistoryList .table-container,
  #tuitionConfirmationList .table-container,
  #carelogList .table-container {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding-bottom: 0 !important;
    overflow: visible !important;
    overscroll-behavior: auto !important;
    scrollbar-width: none !important;
  }

  table,
  .crm-table,
  .dashboard-table,
  .mini-dashboard-table,
  .schedule-table,
  .outside-work-table,
  .video-update-table,
  .tuition-student-table,
  .attendance-summary-table,
  .branch-mini-table,
  #tuitionList table,
  #tuitionNoticeList table,
  #tuitionHistoryList table,
  #tuitionConfirmationList table,
  #carelogList table {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    table-layout: fixed !important;
  }

  table thead th,
  .crm-table thead th,
  .dashboard-table thead th,
  .schedule-table thead th,
  .outside-work-table thead th,
  .video-update-table thead th,
  .branch-mini-table thead th {
    position: static !important;
    top: auto !important;
  }

  table th,
  table td,
  .crm-table th,
  .crm-table td {
    min-width: 0 !important;
    max-width: none !important;
    padding: 5px 3px !important;
    font-size: 8.5px !important;
    line-height: 1.25 !important;
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
  }

  table button,
  .crm-table button,
  .dashboard-table button,
  .schedule-table button {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 26px !important;
    padding: 4px 3px !important;
    font-size: 8px !important;
    line-height: 1.15 !important;
    white-space: normal !important;
  }

  .schedule-class-cell,
  .schedule-table th:nth-child(1),
  .schedule-table td.schedule-class-cell {
    width: 18% !important;
    min-width: 0 !important;
    padding: 5px 4px !important;
  }
  .schedule-class-cell > strong { font-size: 12px !important; }
  .schedule-unit-label { font-size: 9px !important; }
  .schedule-class-cell small,
  .schedule-class-cell p,
  .schedule-other-info span,
  .schedule-other-info b { font-size: 7.5px !important; }

  .branch-mini-panel {
    min-height: 0 !important;
  }

  /* Chuẩn chung cho toàn bộ popup trên điện thoại. */
  .modal {
    align-items: flex-start !important;
    padding: max(6px, env(safe-area-inset-top)) 6px max(6px, env(safe-area-inset-bottom)) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }
  body .modal > .modal-content,
  body .modal .modal-content {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: calc(100dvh - 12px) !important;
    margin: 0 !important;
    padding: 12px !important;
    border-radius: 12px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }
  .modal-header {
    top: -12px !important;
    margin: -12px -12px 10px !important;
    padding: 12px 44px 9px 12px !important;
  }
  .modal-header h2 { font-size: 16px !important; line-height: 1.25 !important; }
  .modal-header p { margin-top: 3px !important; font-size: 9.5px !important; }
  .modal-content h3 { font-size: 13px !important; }
  .modal-content label,
  .modal-content p,
  .modal-content span,
  .modal-content small,
  .modal-content b,
  .modal-content strong { line-height: 1.35; }
  .modal-content label { font-size: 10.5px !important; }
  .modal-content p,
  .modal-content span,
  .modal-content b,
  .modal-content strong { font-size: 10.5px; }
  .modal-content small { font-size: 9px !important; }
  .modal-content input,
  .modal-content select,
  .modal-content textarea {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 4px 0 !important;
    padding: 7px 8px !important;
    font-size: 16px !important;
  }
  .modal-content input,
  .modal-content select { height: 36px !important; }
  .modal-content textarea { min-height: 74px; }
  .modal-content .form-grid,
  .modal-content .carelog-form-grid,
  .modal-content .video-update-form-grid,
  .modal-content .outside-work-form-grid,
  .modal-content .unit-register-class-info-grid,
  .modal-content .holiday-form-grid,
  .modal-content .staff-absence-grid {
    grid-template-columns: 1fr !important;
    gap: 7px !important;
  }
  .schedule-modal-actions {
    bottom: -12px !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    margin: 10px -12px -12px !important;
    padding: 9px 12px max(9px, env(safe-area-inset-bottom)) !important;
    gap: 6px !important;
  }
  .schedule-modal-actions button,
  .modal-content .primary-btn,
  .modal-content .secondary-btn {
    min-width: 0 !important;
    min-height: 34px !important;
    padding: 6px 8px !important;
    font-size: 10px !important;
    line-height: 1.2 !important;
    white-space: normal !important;
  }
}

/* MOBILE DEFINITIVE OVERRIDE: bảng dễ đọc, chỉ cuộn ngang khi nhiều cột. */
@media (max-width: 900px) {
  .table-container, .dashboard-table-container, .mini-table-container,
  .schedule-table-container, .outside-work-table-container,
  .video-update-table-container, .attendance-table-container,
  .attendance-summary-table-wrap, .enrollment-operations-table-wrap,
  .carelog-table-wrap, #classesList .table-container,
  #studentsTable .table-container, #branchClassesSummary .table-container,
  #branchTeachersPanel .table-container, #branchStudentsPanel .table-container,
  #tuitionList .table-container, #tuitionNoticeList .table-container,
  #tuitionHistoryList .table-container, #tuitionConfirmationList .table-container {
    box-sizing: border-box !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    overscroll-behavior-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  .crm-table, .dashboard-table, .mini-dashboard-table {
    width: 100% !important;
    min-width: 720px !important;
    max-width: none !important;
    table-layout: auto !important;
  }
  .branch-mini-table, .attendance-summary-other-table {
    min-width: 0 !important;
    table-layout: fixed !important;
  }
  .schedule-table { min-width: 820px !important; table-layout: fixed !important; }
  .outside-work-table { min-width: 760px !important; table-layout: fixed !important; }
  .video-update-table { min-width: 920px !important; table-layout: fixed !important; }
  .tuition-student-table { min-width: 1060px !important; table-layout: fixed !important; }
  .tuition-issued-table { min-width: 900px !important; }
  .tuition-history-table { min-width: 920px !important; }
  .tuition-confirmation-table { min-width: 900px !important; }
  .carelog-table { min-width: 1020px !important; table-layout: fixed !important; }
  .attendance-summary-active-table { min-width: 780px !important; }
  .attendance-daily-table { min-width: 660px !important; }
  .enrollment-operations-table { min-width: 820px !important; }
  .staff-table { min-width: 1040px !important; }
  #branchStudentsPanel .crm-table, #studentsTable .crm-table { min-width: 980px !important; }
  #classesList .crm-table { min-width: 850px !important; }
  .profile-table { min-width: 680px !important; }

  .crm-table th, .crm-table td,
  .dashboard-table th, .dashboard-table td,
  .mini-dashboard-table th, .mini-dashboard-table td {
    min-width: 0 !important;
    padding: 7px 6px !important;
    font-size: 11px !important;
    line-height: 1.35 !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
  }
  .crm-table thead th, .dashboard-table thead th,
  .mini-dashboard-table thead th { font-size: 10.5px !important; }
  .crm-table small, .dashboard-table small,
  .mini-dashboard-table small { font-size: 9px !important; }

  .crm-table button, .dashboard-table button,
  .mini-dashboard-table button, .schedule-row-actions button,
  .carelog-row-actions button, .attendance-query-btn,
  .tuition-notice-action, .video-update-status-btn,
  .inline-staff-picker > summary {
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 30px !important;
    padding: 5px 7px !important;
    font-size: 10.5px !important;
    line-height: 1.2 !important;
    white-space: normal !important;
  }

  .schedule-class-cell > strong { font-size: 14px !important; }
  .schedule-unit-label { font-size: 10.5px !important; }
  .schedule-class-cell small, .schedule-class-cell p,
  .schedule-other-info span, .schedule-other-info b { font-size: 9px !important; }

  .modal-header h2 { font-size: 17px !important; }
  .modal-header p { font-size: 10px !important; }
  .modal-content h3 { font-size: 14px !important; }
  .modal-content label { font-size: 11px !important; }
  .modal-content p, .modal-content span,
  .modal-content b, .modal-content strong { font-size: 11px; line-height: 1.4; }
  .modal-content small { font-size: 9.5px !important; }
  .schedule-modal-actions button,
  .modal-content .primary-btn, .modal-content .secondary-btn {
    font-size: 10.5px !important;
  }
}

/* Final cascade guard for the student and customer-care tables. */
@media (min-width: 901px) {
  #studentsTable .table-container { overflow-x: hidden !important; }
  #studentsTable .crm-table { width: 100% !important; min-width: 0 !important; max-width: 100% !important; table-layout: fixed !important; }
  #studentsTable .crm-table th, #studentsTable .crm-table td { box-sizing: border-box !important; padding: 8px 6px !important; font-size: 12px !important; overflow-wrap: anywhere; }
  #studentsTable .crm-table th:nth-child(1) { width: 8%; }
  #studentsTable .crm-table th:nth-child(2) { width: 14%; }
  #studentsTable .crm-table th:nth-child(3) { width: 11%; }
  #studentsTable .crm-table th:nth-child(4) { width: 10%; }
  #studentsTable .crm-table th:nth-child(5) { width: 8%; }
  #studentsTable .crm-table th:nth-child(6) { width: 10%; }
  #studentsTable .crm-table th:nth-child(7) { width: 13%; }
  #studentsTable .crm-table th:nth-child(8) { width: 26%; }
  #studentsTable .crm-table thead th:last-child { display: table-cell !important; visibility: visible !important; opacity: 1 !important; position: sticky !important; right: 0 !important; z-index: 205 !important; background: var(--primary) !important; color: #fff !important; text-align: center !important; }
  #studentsTable .crm-table tbody td:last-child { position: relative !important; right: auto !important; }
  #studentsTable .crm-actions { display: grid !important; grid-template-columns: repeat(3,minmax(0,1fr)) !important; gap: 5px !important; width: 100% !important; }
  #studentsTable .crm-actions button { box-sizing: border-box !important; width: 100% !important; min-width: 0 !important; height: 30px !important; padding: 0 4px !important; font-size: 10.5px !important; white-space: nowrap !important; }
}

@media (max-width: 900px) {
  #carelogList, #studentsTable { width: 100% !important; max-width: 100% !important; overflow: visible !important; }
  #carelogList .carelog-table-wrap, #studentsTable .table-container { display: block !important; width: 100% !important; max-width: 100% !important; overflow-x: auto !important; overflow-y: visible !important; -webkit-overflow-scrolling: touch; }
  #carelogList .carelog-table, #carelogList .carelog-student-table, #carelogList .carelog-pending-table, #carelogList .carelog-completed-table { width: 1080px !important; min-width: 1080px !important; max-width: none !important; table-layout: fixed !important; }
  #studentsTable .crm-table { width: 980px !important; min-width: 980px !important; max-width: none !important; table-layout: fixed !important; }
  #studentsTable .crm-table th:nth-child(1) { width: 82px !important; }
  #studentsTable .crm-table th:nth-child(2) { width: 135px !important; }
  #studentsTable .crm-table th:nth-child(3) { width: 115px !important; }
  #studentsTable .crm-table th:nth-child(4) { width: 105px !important; }
  #studentsTable .crm-table th:nth-child(5) { width: 90px !important; }
  #studentsTable .crm-table th:nth-child(6) { width: 105px !important; }
  #studentsTable .crm-table th:nth-child(7) { width: 125px !important; }
  #studentsTable .crm-table th:nth-child(8) { width: 223px !important; }
  #studentsTable .crm-table thead th:last-child { display: table-cell !important; visibility: visible !important; opacity: 1 !important; background: var(--primary) !important; color: #fff !important; text-align: center !important; }
  #studentsTable .crm-actions, #carelogList .carelog-row-actions { display: grid !important; grid-template-columns: repeat(2,minmax(0,1fr)) !important; align-items: stretch !important; gap: 5px !important; width: 100% !important; }
  #studentsTable .crm-actions button, #carelogList .carelog-row-actions button { box-sizing: border-box !important; width: 100% !important; min-width: 0 !important; min-height: 30px !important; padding: 5px 4px !important; font-size: 10px !important; line-height: 1.15 !important; white-space: normal !important; }
}

/* Final UI corrections: student actions, compact mobile date bar and dashboard-only sidebar. */
#branchOverviewLayout[hidden] {
  display: none !important;
}

@media (min-width: 901px) {
  #branchStudentsPanel,
  #studentsTable {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  #studentsTable .table-container {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  #studentsTable .crm-table thead th:last-child {
    display: table-cell !important;
    position: sticky !important;
    top: 0 !important;
    right: auto !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 206 !important;
    background: var(--primary) !important;
    color: #fff !important;
    text-align: center !important;
  }
}

@media (max-width: 900px) {
  #studentsTable .crm-actions button:nth-child(5),
  #studentsTable .crm-actions button:nth-child(6) {
    grid-column: 1 / -1 !important;
    white-space: nowrap !important;
  }

  #branchStudentsPanel .dashboard-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 5px !important;
    width: 100% !important;
  }

  #branchStudentsPanel .dashboard-actions button {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 30px !important;
    padding: 5px 4px !important;
    font-size: 10px !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
  }

  #branchStudentsPanel .dashboard-table thead th:last-child {
    display: table-cell !important;
    visibility: visible !important;
    opacity: 1 !important;
    background: var(--primary) !important;
    color: #fff !important;
    text-align: center !important;
  }

  .schedule-time-controls {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
  }

  .schedule-view-controls .schedule-day-toolbar,
  .schedule-view-controls .video-week-toolbar,
  .schedule-day-toolbar,
  .video-week-toolbar {
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: 30px 66px minmax(135px, 1fr) 30px !important;
    align-items: center !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 5px !important;
    gap: 4px !important;
    overflow: visible !important;
  }

  .schedule-day-toolbar > button,
  .video-week-toolbar > button,
  .schedule-day-toolbar > button:nth-child(2),
  .video-week-toolbar > button:nth-child(2) {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 32px !important;
    padding: 3px 4px !important;
    font-size: 9.5px !important;
    white-space: nowrap !important;
  }

  .schedule-day-toolbar > label,
  .video-week-toolbar > label {
    display: block !important;
    grid-column: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    color: transparent !important;
    font-size: 0 !important;
    transform: none !important;
  }

  .schedule-day-toolbar > label input,
  .video-week-toolbar > label input {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 32px !important;
    margin: 0 !important;
    padding: 3px 5px !important;
    color: var(--primary) !important;
    font-size: 16px !important;
  }

  .schedule-day-toolbar > .schedule-workday-status,
  .video-week-toolbar > .schedule-workday-status {
    grid-column: 1 / -1 !important;
    justify-self: center !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 3px 7px !important;
    font-size: 9px !important;
  }
}

/* Mobile one-line schedule navigator and consistent student action controls. */
.schedule-day-toolbar[hidden],
.video-week-toolbar[hidden],
#outsideWorkDateNoteHeader[hidden] {
  display: none !important;
}

@media (max-width: 900px) {
  .schedule-view-controls .schedule-day-toolbar:not([hidden]),
  .schedule-view-controls .video-week-toolbar:not([hidden]) {
    display: grid !important;
    grid-template-columns: 28px 62px minmax(125px, 1fr) 28px !important;
    grid-template-rows: 32px !important;
    align-items: center !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
    padding: 5px !important;
    gap: 4px !important;
    overflow: hidden !important;
  }

  .schedule-view-controls .schedule-day-toolbar > button,
  .schedule-view-controls .video-week-toolbar > button {
    width: 100% !important;
    min-width: 0 !important;
    height: 32px !important;
    min-height: 32px !important;
    margin: 0 !important;
    padding: 2px 3px !important;
    font-size: 9px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  .schedule-view-controls .schedule-day-toolbar > label,
  .schedule-view-controls .video-week-toolbar > label {
    display: block !important;
    grid-column: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 32px !important;
    margin: 0 !important;
    color: transparent !important;
    font-size: 0 !important;
    line-height: 0 !important;
  }

  .schedule-view-controls .schedule-day-toolbar > label input,
  .schedule-view-controls .video-week-toolbar > label input {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 32px !important;
    margin: 0 !important;
    padding: 2px 4px !important;
    color: var(--primary) !important;
    font-size: 14px !important;
    line-height: 1 !important;
  }

  .schedule-view-controls .schedule-day-toolbar > .schedule-workday-status,
  .schedule-view-controls .video-week-toolbar > .schedule-workday-status {
    display: none !important;
  }

  #branchStudentsPanel .dashboard-table thead th:last-child {
    min-width: 150px !important;
    width: 150px !important;
    white-space: nowrap !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
  }

  #branchStudentsPanel .dashboard-table tbody td:last-child {
    width: 150px !important;
  }

  #branchStudentsPanel .dashboard-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 5px !important;
  }

  #branchStudentsPanel .dashboard-actions button {
    box-sizing: border-box !important;
    width: 100% !important;
    height: 32px !important;
    min-height: 32px !important;
    padding: 0 8px !important;
    border: 0 !important;
    border-radius: 7px !important;
    background: #f3f4f8 !important;
    color: var(--primary) !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    line-height: 32px !important;
    white-space: nowrap !important;
  }

  #branchStudentsPanel .dashboard-actions button:hover {
    background: var(--accent) !important;
    color: #fff !important;
  }
}

/* Mobile schedule precision fix: no overlap and no trailing scroll gutter. */
@media (max-width: 900px) {
  .schedule-view-controls .schedule-day-toolbar:not([hidden]),
  .schedule-view-controls .video-week-toolbar:not([hidden]) {
    grid-template-columns: 28px 82px minmax(0, 1fr) 28px !important;
    column-gap: 4px !important;
  }

  .schedule-view-controls .schedule-day-toolbar > button:nth-child(2),
  .schedule-view-controls .video-week-toolbar > button:nth-child(2) {
    width: 82px !important;
    min-width: 82px !important;
    max-width: 82px !important;
    padding: 2px 3px !important;
    overflow: hidden !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
  }

  .schedule-view-controls .schedule-day-toolbar > label,
  .schedule-view-controls .video-week-toolbar > label,
  .schedule-view-controls .schedule-day-toolbar > label input,
  .schedule-view-controls .video-week-toolbar > label input {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  .schedule-table-container {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    padding-right: 0 !important;
    margin-right: 0 !important;
    scrollbar-gutter: auto !important;
    overflow-x: auto !important;
  }

  .schedule-table {
    box-sizing: border-box !important;
    width: 945px !important;
    min-width: 945px !important;
    max-width: 945px !important;
    margin-right: 0 !important;
    table-layout: fixed !important;
  }

  .schedule-table col.schedule-col-class { width: 160px !important; }
  .schedule-table col.schedule-col-period { width: 70px !important; }
  .schedule-table col.schedule-col-responsible { width: 100px !important; }
  .schedule-table col.schedule-col-time { width: 100px !important; }
  .schedule-table col.schedule-col-room { width: 100px !important; }
  .schedule-table col.schedule-col-assistants { width: 125px !important; }
  .schedule-table col.schedule-col-video { width: 125px !important; }
  .schedule-table col.schedule-col-other { width: 165px !important; }

  .schedule-table th:nth-child(1), .schedule-table td:nth-child(1) { width: 160px !important; }
  .schedule-table th:nth-child(2), .schedule-table td:nth-child(2) { width: 70px !important; }
  .schedule-table th:nth-child(3), .schedule-table td:nth-child(3) { width: 100px !important; }
  .schedule-table th:nth-child(4), .schedule-table td:nth-child(4) { width: 100px !important; }
  .schedule-table th:nth-child(5), .schedule-table td:nth-child(5) { width: 100px !important; }
  .schedule-table th:nth-child(6), .schedule-table td:nth-child(6) { width: 125px !important; }
  .schedule-table th:nth-child(7), .schedule-table td:nth-child(7) { width: 125px !important; }
  .schedule-table th:nth-child(8), .schedule-table td:nth-child(8) { width: 165px !important; }
}

/* Tổng hợp điểm danh: bố cục 2/3 danh sách học sinh + 1/3 trạng thái lớp. */
.attendance-summary-dashboard-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.78fr) minmax(340px, 1fr);
  align-items: stretch;
  gap: 14px;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  max-width: none;
}

.attendance-summary-dashboard-layout > #attendanceSummaryList {
  min-width: 0;
  padding-bottom: 0;
}

.attendance-summary-class-panel {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  padding: 0 !important;
  border: 1px solid #dce3ed;
  border-radius: 12px;
  background: #fff;
  box-shadow: none !important;
  margin: 0 !important;
  width: 100%;
  max-width: none;
}

/* Chặn style mặc định của thẻ aside tạo thêm một card trắng bao bên ngoài. */
#attendanceSummary .attendance-summary-class-panel {
  padding: 0 !important;
}

@media (min-width: 901px) {
  #attendanceSummary.page.active {
    box-sizing: border-box;
    width: 100% !important;
    max-width: none !important;
    align-self: stretch;
  }

  #attendanceSummary .attendance-summary-tab-row {
    box-sizing: border-box;
    width: calc(64% - 5px);
    max-width: calc(64% - 5px);
  }

  #attendanceSummary .attendance-summary-filter {
    margin-left: auto;
  }

  #attendanceSummaryList,
  #attendanceSummaryList .attendance-summary-table-wrap {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  #attendanceSummaryList .attendance-summary-table {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    table-layout: fixed !important;
  }

  #attendanceSummaryList .attendance-summary-table th,
  #attendanceSummaryList .attendance-summary-table td {
    min-width: 0 !important;
    padding: 8px 6px !important;
    font-size: 10.5px !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }
}

.attendance-summary-class-panel > h2 {
  flex: 0 0 auto;
  margin: 0;
  padding: 13px 15px;
  border-bottom: 1px solid #dce3ed;
  background: #f7f8fc;
  color: var(--primary);
  font-size: 15px;
  font-weight: 900;
}

#attendanceSummaryClassList {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  flex-direction: column;
}

.attendance-summary-class-table-wrap {
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  max-height: none !important;
  overflow: auto !important;
  border-radius: 0 0 12px 12px;
}

.attendance-summary-class-table {
  width: 100%;
  min-width: 0;
  table-layout: fixed;
}

.attendance-summary-class-table th,
.attendance-summary-class-table td {
  padding: 9px 7px;
  font-size: 11px;
  overflow-wrap: anywhere;
}

.attendance-summary-class-table th {
  position: sticky;
  top: 0;
  z-index: 4;
  background: var(--primary);
  color: #fff;
  font-size: 10.5px;
  white-space: normal;
}

.attendance-summary-class-table th:nth-child(1) { width: 28%; }
.attendance-summary-class-table th:nth-child(2) { width: 22%; }
.attendance-summary-class-table th:nth-child(3) { width: 27%; }
.attendance-summary-class-table th:nth-child(4) { width: 23%; }

.attendance-summary-class-table tbody td:nth-child(2),
.attendance-summary-class-table tbody td:nth-child(3),
.attendance-summary-class-table tbody td:nth-child(2) *,
.attendance-summary-class-table tbody td:nth-child(3) * {
  color: #111827 !important;
}

.attendance-summary-class-name strong,
.attendance-summary-class-name small {
  display: block;
}

.attendance-summary-class-name small {
  margin-top: 3px;
  color: #7b8798;
  font-size: 9px;
  font-weight: 700;
}

.attendance-class-status {
  display: inline-flex;
  justify-content: center;
  min-width: 58px;
  padding: 5px 7px;
  border-radius: 999px;
  font-size: 9.5px;
  font-weight: 850;
  white-space: nowrap;
}

.attendance-class-status.is-complete {
  background: #e8f8ee;
  color: #168344;
}

.attendance-class-status.is-pending {
  background: #fff0f1;
  color: #c32546;
}

@media (max-width: 900px) {
  .attendance-summary-dashboard-layout {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  #attendanceSummary .attendance-summary-tab-row {
    width: 100% !important;
    max-width: 100% !important;
  }

  .attendance-summary-class-panel {
    min-height: 300px;
    overflow: visible;
  }

  .attendance-summary-class-table-wrap {
    overflow-x: auto !important;
    overflow-y: visible !important;
  }

  .attendance-summary-class-table {
    width: 620px !important;
    min-width: 620px !important;
    max-width: none !important;
  }
}

/* Mobile status typography: final override for every table page. */
@media (max-width: 900px) {
  table tbody .status,
  table tbody .status-badge,
  table tbody .class-status-badge,
  table tbody .class-summary-badge,
  table tbody .tuition-notice-status,
  table tbody .tuition-workflow-status,
  table tbody .tuition-confirmation-status,
  table tbody .carelog-status,
  table tbody .video-workflow-status,
  table tbody .attendance-class-status,
  table tbody .staff-action-readonly,
  table tbody [class*="status-badge"] {
    min-height: 0 !important;
    padding: 4px 6px !important;
    font-size: 8.5px !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
  }

  table tbody .tuition-confirmation-status small {
    font-size: 7.5px !important;
  }
}

/* Mobile operation pages: compact, single-row controls where requested. */
@media (max-width: 900px) {
  /* Add/action button stays beside the page title. */
  #branchPageHeader > .page-header,
  #classes > .page-header,
  #carelog > .carelog-page-header {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
  }

  #branchPageHeader > .page-header > div,
  #classes > .page-header > div,
  #carelog > .carelog-page-header > div:first-child {
    min-width: 0;
    flex: 1 1 auto;
  }

  #branchPageHeader > .page-header h1,
  #classes > .page-header h1,
  #carelog > .carelog-page-header h1 {
    margin: 0 !important;
    font-size: 18px !important;
    line-height: 1.15 !important;
  }

  #branchPageHeader > .page-header p,
  #classes > .page-header p,
  #carelog > .carelog-page-header p {
    display: none !important;
  }

  #branchPageHeader > .page-header .primary-btn,
  #classes > .page-header .primary-btn,
  #carelog > .carelog-page-header .primary-btn {
    flex: 0 0 auto !important;
    width: auto !important;
    min-height: 32px !important;
    padding: 6px 9px !important;
    font-size: 9.5px !important;
    white-space: nowrap !important;
  }

  /* Staff, student and class search is shown above the status tabs. */
  #branchPageHeader .status-search-controls,
  #classes .class-status-search-controls {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 6px !important;
  }

  #branchPageHeader .staff-search-row,
  #branchPageHeader .student-status-search-controls .class-toolbar,
  #classes .class-toolbar {
    order: 1 !important;
    width: 100% !important;
    flex: 0 0 auto !important;
    align-self: stretch !important;
  }

  #branchPageHeader .staff-status-tabs,
  #branchPageHeader .student-status-tabs,
  #classes .class-status-tabs {
    order: 2 !important;
    width: 100% !important;
  }

  #branchPageHeader .search-box,
  #classes .search-box {
    width: 100% !important;
  }

  /* Branch dashboard tabs must not appear inside staff/student management. */
  #branchDashboardContent .branch-home-tabs[hidden] {
    display: none !important;
  }

  /* CSKH: tabs stay scrollable; all filters share one compact row. */
  #carelog .carelog-controls {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 6px !important;
  }

  #carelog .carelog-filter-toolbar {
    display: flex !important;
    flex-flow: row nowrap !important;
    align-items: center !important;
    width: 100% !important;
    gap: 4px !important;
    overflow-x: auto !important;
  }

  #carelog .carelog-filter-toolbar select,
  #carelog .carelog-filter-toolbar input {
    display: block;
    min-width: 0 !important;
    min-height: 32px !important;
    padding: 5px 6px !important;
    font-size: 9px !important;
  }

  #carelog .carelog-filter-toolbar select:not(.is-hidden) {
    flex: 0 1 31% !important;
    width: 31% !important;
  }

  #carelogWeekFilter {
    flex: 0 1 29% !important;
    width: 29% !important;
  }

  #carelogSearch {
    flex: 1 1 40% !important;
    width: 40% !important;
  }

  /* Tuition: current action and search stay on one row. */
  #tuition .tuition-student-toolbar {
    display: flex !important;
    flex-flow: row nowrap !important;
    align-items: center !important;
    width: 100% !important;
    gap: 5px !important;
  }

  #tuition .tuition-history-actions:not([hidden]) {
    display: block !important;
    flex: 0 0 auto !important;
  }

  #tuition .tuition-history-actions button {
    width: auto !important;
    white-space: nowrap !important;
  }

  #tuitionStatusFilter:not([hidden]) {
    flex: 0 0 92px !important;
    width: 92px !important;
  }

  #tuitionSearch {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 90px !important;
  }

  /* Attendance summary: filter is aligned right on the tab row. */
  #attendanceSummary .attendance-summary-tab-row {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 6px !important;
    width: 100% !important;
  }

  #attendanceSummary .attendance-summary-tabs {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
  }

  #attendanceSummary .attendance-summary-filter {
    display: block !important;
    flex: 0 0 auto !important;
    width: auto !important;
    margin-left: auto !important;
  }

  #attendanceSummary .attendance-summary-filter select {
    width: auto !important;
    min-width: 78px !important;
    min-height: 32px !important;
    padding: 5px 6px !important;
    font-size: 9px !important;
  }
}

/* Unified page tabs/status bars. Icons in the schedule tabs are preserved. */
.staff-status-tabs,
.student-status-tabs,
.class-status-tabs,
.schedule-view-tabs {
  display: flex;
  align-items: center;
  gap: 7px;
  overflow-x: auto;
  scrollbar-width: thin;
}

.staff-status-tabs button,
.student-status-tabs button,
.class-status-tabs button,
.schedule-view-tabs button {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 38px;
  padding: 8px 13px;
  border: 1px solid #d8deea;
  border-radius: 9px;
  background: #fff;
  color: #46546a;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
  box-shadow: none !important;
}

.staff-status-tabs button:hover,
.student-status-tabs button:hover,
.class-status-tabs button:hover,
.schedule-view-tabs button:hover {
  border-color: #8fa4d5;
  background: #eef3ff;
  color: #203879;
}

.staff-status-tabs button[class*="active"],
.student-status-tabs button[class*="active"],
.class-status-tabs button[class*="active"],
.schedule-view-tabs button[class*="active"] {
  border-color: #203879 !important;
  background: #203879 !important;
  color: #fff !important;
}

.staff-status-tabs button span:not(.schedule-view-icon),
.student-status-tabs button span,
.class-status-tabs button span {
  display: inline-grid;
  min-width: 20px;
  height: 20px;
  place-items: center;
  border-radius: 999px;
  background: #eef2ff;
  color: #203879;
  font-size: 10px;
}

.staff-status-tabs:not(.schedule-view-tabs) button[class*="active"] span,
.student-status-tabs button[class*="active"] span,
.class-status-tabs button[class*="active"] span {
  background: rgba(255,255,255,.2);
  color: #fff;
}

/* New enrollment and operation-history tables. */
.enrollment-history-table th:first-child { width: 155px; }
.enrollment-history-table td small,
.branch-operation-history-table td small { display: block; margin-top: 3px; color: #7b8798; font-size: 10px; }

.branch-operation-history-panel {
  margin-top: 14px;
  overflow: hidden;
  border: 1px solid #dce3ed;
  border-radius: 13px;
  background: #fff;
}

.branch-operation-history-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid #dce3ed;
  background: #f7f8fc;
}

.branch-operation-history-header h2 { margin: 0; color: #203879; font-size: 17px; }
.branch-operation-history-header p { margin: 3px 0 0; color: #718096; font-size: 11px; }
.branch-operation-history-header label { display: flex; align-items: center; gap: 7px; margin: 0; color: #46546a; font-size: 11px; font-weight: 800; }
.branch-operation-history-header input { width: 145px; min-height: 34px; margin: 0; padding: 5px 7px; }
.branch-operation-history-wrap { max-height: 360px; overflow: auto !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
.branch-operation-history-table { min-width: 780px; }
.branch-operation-history-table th { position: sticky; top: 0; z-index: 2; }
.operation-action-badge { display: inline-flex; padding: 4px 7px; border-radius: 999px; background: #edf2ff; color: #203879; font-size: 10px; font-weight: 850; white-space: nowrap; }

/* Added update columns. */
#branchTeachersPanel .staff-table th:first-child,
#branchTeachersPanel .staff-table td:first-child { width: 145px !important; min-width: 145px !important; }
#branchTeachersPanel .staff-table th:nth-child(2),
#branchTeachersPanel .staff-table td:nth-child(2) { width: 135px !important; min-width: 135px !important; }
#branchTeachersPanel .staff-table th:nth-child(3),
#branchTeachersPanel .staff-table td:nth-child(3) { width: 135px !important; min-width: 135px !important; }
#branchTeachersPanel .staff-table th:nth-child(4),
#branchTeachersPanel .staff-table td:nth-child(4),
#branchTeachersPanel .staff-table th:nth-child(5),
#branchTeachersPanel .staff-table td:nth-child(5) { width: 145px !important; min-width: 145px !important; }
#branchTeachersPanel .staff-table th:nth-child(6),
#branchTeachersPanel .staff-table td:nth-child(6) { width: 110px !important; min-width: 110px !important; }
#branchTeachersPanel .staff-table th:nth-child(7),
#branchTeachersPanel .staff-table td:nth-child(7) { width: 330px !important; min-width: 330px !important; text-align: center; }
#classesList .crm-table th:first-child,
#classesList .crm-table td:first-child { width: 145px; min-width: 145px; }

@media (max-width: 900px) {
  /* Time selector is above schedule tabs on phones. */
  #schedules .schedule-view-controls {
    display: flex !important;
    flex-direction: column !important;
  }
  #schedules .schedule-time-controls { order: 1 !important; }
  #schedules .schedule-view-tabs { order: 2 !important; width: 100% !important; }

  /* Filters/search are above page tabs on phones. */
  #carelog .carelog-filter-toolbar,
  #tuition .tuition-student-toolbar { order: 1 !important; }
  #carelog .carelog-tabs,
  #tuition .tuition-view-tabs { order: 2 !important; }

  .staff-status-tabs button,
  .student-status-tabs button,
  .class-status-tabs button,
  .schedule-view-tabs button {
    min-height: 32px !important;
    padding: 6px 8px !important;
    font-size: 9.5px !important;
  }

  .branch-operation-history-header {
    align-items: center;
    padding: 9px 10px;
  }
  .branch-operation-history-header h2 { font-size: 14px; }
  .branch-operation-history-header p { display: none; }
  .branch-operation-history-header input { width: 122px; min-height: 32px; font-size: 10px; }
  .branch-operation-history-wrap { max-height: none; overflow-x: auto !important; overflow-y: visible !important; }
  .enrollment-history-table { min-width: 850px !important; }
}

/* Profile pages: semantic colors for status tabs. */
.staff-status-tabs button:nth-child(1),
.student-status-tabs button:nth-child(1),
.class-status-tabs button:nth-child(1) {
  border-color: #9ed8b5;
  color: #168344;
}

.staff-status-tabs button:nth-child(2),
.student-status-tabs button:nth-child(2),
.student-status-tabs button:nth-child(3),
.class-status-tabs button:nth-child(2) {
  border-color: #efd58b;
  color: #a66b00;
}

.staff-status-tabs button:nth-child(3),
.student-status-tabs button:nth-child(4),
.class-status-tabs button:nth-child(3) {
  border-color: #efb0b8;
  color: #c0263d;
}

.staff-status-tabs button:nth-child(1):not([class*="active"]):hover,
.student-status-tabs button:nth-child(1):not([class*="active"]):hover,
.class-status-tabs button:nth-child(1):not([class*="active"]):hover {
  border-color: #168344;
  background: #eaf8ef;
  color: #116b38;
}

.staff-status-tabs button:nth-child(2):not([class*="active"]):hover,
.student-status-tabs button:nth-child(2):not([class*="active"]):hover,
.student-status-tabs button:nth-child(3):not([class*="active"]):hover,
.class-status-tabs button:nth-child(2):not([class*="active"]):hover {
  border-color: #d6a62d;
  background: #fff8df;
  color: #895800;
}

.staff-status-tabs button:nth-child(3):not([class*="active"]):hover,
.student-status-tabs button:nth-child(4):not([class*="active"]):hover,
.class-status-tabs button:nth-child(3):not([class*="active"]):hover {
  border-color: #d5495d;
  background: #fff0f1;
  color: #a91f35;
}

/* A selected tab keeps its semantic color and has no hover transition. */
.staff-status-tabs button.active-green,
.student-status-tabs button.active-green,
.class-status-tabs button.active-green {
  border-color: #168344 !important;
  background: #168344 !important;
  color: #fff !important;
  pointer-events: none;
}

.staff-status-tabs button.active-yellow,
.student-status-tabs button.active-yellow,
.student-status-tabs button.active-red,
.class-status-tabs button.active-yellow {
  border-color: #d39a13 !important;
  background: #d39a13 !important;
  color: #fff !important;
  pointer-events: none;
}

.staff-status-tabs button.active-gray,
.student-status-tabs button.active-gray,
.class-status-tabs button.active-red {
  border-color: #c92b43 !important;
  background: #c92b43 !important;
  color: #fff !important;
  pointer-events: none;
}

/* "Tất cả" remains the neutral blue tab. */
.staff-status-tabs button:nth-child(4),
.class-status-tabs button:nth-child(4) {
  border-color: #b9c5df;
  color: #203879;
}
.staff-status-tabs button:nth-child(4):not([class*="active"]):hover,
.class-status-tabs button:nth-child(4):not([class*="active"]):hover {
  border-color: #7188bd;
  background: #eef3ff;
}
.staff-status-tabs button.active-all,
.class-status-tabs button.active-all {
  border-color: #203879 !important;
  background: #203879 !important;
  color: #fff !important;
  pointer-events: none;
}

/* Schedule also reuses staff-status-tabs in markup, but is not a profile status bar. */
.schedule-view-tabs button,
.schedule-view-tabs button:nth-child(n) {
  border-color: #d8deea !important;
  background: #fff !important;
  color: #46546a !important;
  pointer-events: auto !important;
}
.schedule-view-tabs button:not([class*="active"]):hover {
  border-color: #8fa4d5 !important;
  background: #eef3ff !important;
  color: #203879 !important;
}
.schedule-view-tabs button.active-green {
  border-color: #203879 !important;
  background: #203879 !important;
  color: #fff !important;
  pointer-events: none !important;
}

/* Overview: metric cards on the left, operation history on the right. */
.branch-statistics-layout {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(320px, 1fr);
  align-items: stretch;
  gap: 14px;
  min-height: 0;
}

.branch-statistics-layout .branch-statistics-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
}

.branch-statistics-layout .branch-operation-history-panel {
  display: flex;
  min-width: 0;
  min-height: 0;
  margin-top: 0;
  flex-direction: column;
}

.branch-statistics-layout .branch-operation-history-list {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  flex-direction: column;
}

.branch-statistics-layout .branch-operation-history-wrap {
  flex: 1 1 auto;
  max-height: 424px;
}

@media (max-width: 900px) {
  .branch-statistics-layout { grid-template-columns: 1fr; }
  .branch-statistics-layout .branch-operation-history-panel { min-height: 320px; }
}

.operation-history-ellipsis {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (min-width: 901px) {
  /* Cơ sở: giữ tiêu đề trang, cuộn từ hàng tab và nội dung bên dưới. */
  #branchDashboardContent {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scrollbar-gutter: stable;
  }

  #branchDashboardContent > .dashboard-branch-header {
    position: sticky;
    top: 0;
    z-index: 40;
    background: var(--bg, #f5f7fb);
  }

  #branchDashboardContent .branch-statistics-panel {
    overflow: visible !important;
  }

  /* Lịch sử thao tác: không cuộn ngang trên laptop. */
  .branch-statistics-layout .branch-operation-history-wrap {
    width: 100%;
    min-width: 0;
    max-height: 424px;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    scrollbar-gutter: stable;
  }

  .branch-statistics-layout .branch-operation-history-table {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    table-layout: fixed !important;
  }

  .branch-operation-history-table th,
  .branch-operation-history-table td {
    min-width: 0 !important;
    padding: 7px 5px !important;
    font-size: 9px !important;
    overflow: hidden;
  }

  .branch-operation-history-table td small { font-size: 8px !important; }
  .branch-operation-history-header h2 { font-size: 14px; }
  .branch-operation-history-header p,
  .branch-operation-history-header label { font-size: 9px; }
  .branch-operation-history-header input { width: 118px; min-height: 30px; font-size: 9px; }

  .branch-operation-history-table th:nth-child(1) { width: 19%; }
  .branch-operation-history-table th:nth-child(2) { width: 17%; }
  .branch-operation-history-table th:nth-child(3) { width: 14%; }
  .branch-operation-history-table th:nth-child(4) { width: 27%; }
  .branch-operation-history-table th:nth-child(5) { width: 23%; }

  /* Nhân sự: toàn bộ cột nằm gọn trong chiều rộng web, không cuộn ngang. */
  #branchTeachersPanel .staff-table-wrap {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  #branchTeachersPanel .staff-table {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    table-layout: fixed !important;
  }

  #branchTeachersPanel .staff-table th,
  #branchTeachersPanel .staff-table td {
    min-width: 0 !important;
    width: auto !important;
    padding: 8px 6px !important;
    overflow-wrap: anywhere;
  }

  #branchTeachersPanel .staff-table th:nth-child(1) { width: 13% !important; }
  #branchTeachersPanel .staff-table th:nth-child(2) { width: 11% !important; }
  #branchTeachersPanel .staff-table th:nth-child(3) { width: 11% !important; }
  #branchTeachersPanel .staff-table th:nth-child(4) { width: 13% !important; }
  #branchTeachersPanel .staff-table th:nth-child(5) { width: 13% !important; }
  #branchTeachersPanel .staff-table th:nth-child(6) { width: 10% !important; }
  #branchTeachersPanel .staff-table th:nth-child(7) { width: 29% !important; }

  #branchTeachersPanel .staff-table .dashboard-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 5px;
  }

  #branchTeachersPanel .staff-table .dashboard-actions button {
    min-width: 0;
    padding: 6px 7px;
    font-size: 9.5px;
    white-space: nowrap;
  }
}

@media (max-width: 700px) {
  .enrollment-operations-tabs { flex-wrap:wrap; }
  .enrollment-history-tab-search {
    order:-1;
    flex:1 0 100%;
    width:100%;
    min-height:34px;
    margin:0 0 2px;
    font-size:10px;
  }
  .enrollment-history-mode-tabs { overflow-x:auto; }
  .enrollment-history-mode-tabs button { flex:0 0 auto; font-size:9.5px; }
  .enrollment-history-split { grid-template-columns:1fr; }
  .branch-header-meta { align-items:flex-start; flex-direction:column; gap:3px; }
}

@media (max-width: 900px) {
  /* Lịch sử ghi danh: ô tìm kiếm luôn là một hàng riêng phía trên các tab. */
  .enrollment-operations-tabs {
    flex-wrap: wrap !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
  }

  .enrollment-operations-tabs .enrollment-history-tab-search {
    order: -1 !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 34px !important;
    margin: 0 0 3px !important;
  }

  /* Trang chủ: tránh tiêu đề Dashboard chồng lên breadcrumb Trang chủ. */
  #dashboard.page.active #homeBranchSelect.branch-home {
    box-sizing: border-box;
    min-height: calc(100dvh - 150px) !important;
    padding-top: 22px !important;
    transform: none !important;
    justify-content: flex-start !important;
  }

  #dashboard.page.active #homeBranchSelect.branch-home h1 {
    margin: 10px 0 18px !important;
    font-size: 27px !important;
    line-height: 1.2 !important;
  }

  #dashboard.page.active #homeBranchSelect .branch-big-grid {
    width: 100%;
    margin-top: 0 !important;
  }
}

@media (min-width: 901px) {
  #classesList .table-container {
    height: calc(100dvh - 361px) !important;
    max-height: calc(100dvh - 361px) !important;
    padding-bottom: 18px !important;
    scroll-padding-bottom: 18px;
  }
  #studentsTable .table-container {
    height: calc(100dvh - 395px) !important;
    max-height: calc(100dvh - 395px) !important;
    padding-bottom: 18px !important;
    scroll-padding-bottom: 18px;
  }
  #branchStudentsPanel .table-container {
    height: calc(100dvh - 360px) !important;
    max-height: calc(100dvh - 360px) !important;
    padding-bottom: 18px !important;
    scroll-padding-bottom: 18px;
  }
  #branchTeachersPanel .table-container,
  #branchTeachersPanel .staff-table-wrap {
    height: calc(100dvh - 369px) !important;
    max-height: calc(100dvh - 369px) !important;
    margin-bottom: 0 !important;
    padding-bottom: 24px !important;
    overflow-y: auto !important;
    scroll-padding-bottom: 24px;
  }

  /* Trang Nhân sự/Học sinh chỉ cuộn nội dung bảng, không cuộn cả trang. */
  html:has(#branchTeachersPanel.active),
  body:has(#branchTeachersPanel.active),
  html:has(#branchStudentsPanel.active),
  body:has(#branchStudentsPanel.active),
  html:has(#students.page.active),
  body:has(#students.page.active) {
    height: 100%;
    overflow: hidden !important;
  }

  body:has(#branchTeachersPanel.active) #branchDashboardContent,
  body:has(#branchStudentsPanel.active) #branchDashboardContent,
  body:has(#students.page.active) main {
    overflow: hidden !important;
  }
}

/* Final mobile toolbar precedence. */
@media (max-width: 900px) {
  #carelog .carelog-filter-toolbar .is-hidden,
  #carelog .carelog-filter-toolbar [hidden],
  #tuition .tuition-student-toolbar .is-hidden,
  #tuition .tuition-student-toolbar [hidden],
  #tuitionStatusFilter[hidden],
  #carelogTypeFilter.is-hidden,
  #carelogCompletedAudienceFilter.is-hidden,
  #carelogMonthFilter.is-hidden,
  #tuitionHistoryMonthFilter.is-hidden { display:none !important; }
  #carelog .carelog-filter-toolbar,
  #tuition .tuition-student-toolbar {
    display:flex !important;
    grid-template-columns:none !important;
    flex-flow:row nowrap !important;
    align-items:center !important;
    gap:4px !important;
    width:100% !important;
    overflow-x:hidden !important;
  }
  #carelog .carelog-filter-toolbar > *:not(.is-hidden):not([hidden]),
  #tuition .tuition-student-toolbar > *:not(.is-hidden):not([hidden]) {
    flex:0 0 auto !important;
    width:auto !important;
    min-width:96px !important;
    max-width:150px !important;
  }
  #carelog #carelogSearch,
  #tuition #tuitionSearch { flex:1 0 125px !important; max-width:none !important; }
  #carelog #carelogMonthFilter,
  #tuition #tuitionHistoryMonthFilter { flex-basis:118px !important; }
  #tuition .tuition-history-actions:not([hidden]) { flex:0 0 106px !important; min-width:106px !important; max-width:106px !important; }
  #tuition .tuition-history-actions:not([hidden]) button { width:106px !important; padding-inline:5px !important; font-size:8.5px !important; white-space:nowrap !important; }
  #tuition #tuitionHistoryMonthFilter { flex:0 0 112px !important; min-width:112px !important; max-width:112px !important; }
  #tuition #tuitionSearch { flex:1 1 120px !important; min-width:110px !important; }
}

/* Final override: popup định vị phải thực sự mở ngang, không bị max-width chung của modal ghi đè. */
@media (min-width: 901px) {
  body .branch-location-modal > .branch-location-content {
    width:min(1060px, calc(100vw - 64px)) !important;
    min-width:0 !important;
    max-width:1060px !important;
    height:min(740px, calc(100dvh - 32px)) !important;
    max-height:calc(100dvh - 32px) !important;
    overflow:hidden !important;
    padding:14px 18px 16px !important;
  }
  body .branch-location-modal .branch-location-content > .modal-header { margin-bottom:8px !important; }
  body .branch-location-modal .branch-location-content > .modal-header p { margin:3px 0 0 !important; }
  body .branch-location-modal .branch-location-toolbar {
    display:grid !important;
    grid-template-columns:600px minmax(0,1fr) !important;
    gap:8px !important;
    margin-bottom:8px !important;
  }
  body .branch-location-modal .branch-location-toolbar select,
  body .branch-location-modal .branch-location-toolbar-actions {
    width:100% !important;
    min-width:0 !important;
  }
  body .branch-location-modal .branch-location-toolbar-actions {
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:8px !important;
  }
  body .branch-location-modal .branch-location-toolbar-actions button { width:100% !important; min-width:0 !important; }
  body .branch-location-modal .branch-location-toolbar button {
    padding-inline:6px !important;
    font-size:10px !important;
  }
  body .branch-location-modal .branch-location-workspace {
    grid-template-columns:600px minmax(0,1fr) !important;
    gap:8px !important;
    height:calc(100% - 105px) !important;
    min-height:0 !important;
    align-items:stretch !important;
  }
  body .branch-location-modal .branch-location-map {
    align-self:start !important;
    width:100% !important;
    max-width:600px !important;
    height:100% !important;
    aspect-ratio:auto !important;
  }
  body .branch-location-modal .branch-location-side { height:100% !important; padding:11px !important; }
  body .branch-location-modal .branch-location-side { width:100% !important; max-width:none !important; justify-self:stretch !important; }
  body .branch-location-modal .branch-location-form { gap:8px !important; }
  body .branch-location-modal .branch-location-form input { min-height:36px !important; }
  body .branch-location-modal .branch-location-actions { padding-top:8px !important; }
  body .staff-workday-summary-header input { width:185px !important; }
  body .staff-workday-summary-tabbar { display:flex; align-items:center; justify-content:space-between; gap:12px; }
  body .staff-workday-summary-tabbar .staff-workday-summary-tabs,
  body .staff-workday-summary-tabbar .staff-workday-legend { margin:0 0 9px !important; }
}

/* Bảng chấm công và luồng đề xuất sửa. */
.branch-timekeeping-title { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.branch-timekeeping-title { min-height:39px; padding:6px 8px 6px 12px; border-bottom:1px solid #dfe5ee; background:#f5f7fb; }
.branch-timekeeping-title h3 { margin:0; padding:0; border:0; background:transparent; font-size:14px; line-height:1.2; }
.branch-timekeeping-title button { min-height:28px; border:1px solid #b9c5d8; border-radius:7px; background:#fff; color:#203879; padding:5px 9px; font-family:inherit; font-size:10px; line-height:1.1; font-weight:850; white-space:nowrap; cursor:pointer; }
.branch-timekeeping-title button:hover { border-color:#203879; background:#203879; color:#fff; }
.workday-correction-admin-test { margin:0 0 12px; padding:8px 10px; border-radius:8px; background:#fff4d6; color:#8a5b00; font-size:10px; font-weight:800; }
.workday-correction-picker { display:grid; align-content:start; gap:6px; min-width:0; }
.workday-correction-picker > b { color:#42506a; font-size:11px; }
.workday-correction-picker details { position:relative; margin:0; padding:0; border:1px solid #dbe3ef; border-radius:9px; background:#fff; }
.workday-correction-picker summary { padding:9px 10px; list-style:none; color:#203879; font-size:10px; font-weight:800; cursor:pointer; }
.workday-correction-picker summary::-webkit-details-marker { display:none; }
.workday-correction-picker details > div { display:grid; gap:3px; max-height:145px; overflow-y:auto; padding:5px 7px 8px; border-top:1px solid #edf1f6; }
.workday-correction-picker details label { display:flex; align-items:center; gap:6px; padding:5px 6px; border-radius:6px; background:#f8fafc; font-size:10px; cursor:pointer; }
.workday-correction-picker details input { width:auto; min-height:0; margin:0; }
.workday-correction-selected { display:flex; flex-wrap:wrap; gap:4px; min-height:23px; }
.workday-correction-selected > span { display:inline-flex; align-items:center; gap:4px; padding:4px 5px 4px 7px; border-radius:999px; background:#eef3ff; color:#203879; font-size:9px; font-weight:800; }
.workday-correction-selected button { width:16px; height:16px; padding:0; border:0; border-radius:50%; background:#dce5fb; color:#203879; line-height:1; cursor:pointer; }
.workday-correction-selected small { color:#98a2b3; font-size:9px; }
.workday-correction-content { width:min(650px, calc(100vw - 24px)) !important; max-width:650px !important; max-height:calc(100dvh - 28px); overflow-y:auto; overflow-x:hidden; }
.workday-correction-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin:10px 0 14px; }
.workday-correction-grid label { min-width:0; font-weight:800; color:#42506a; }
.workday-correction-grid textarea { width:100%; resize:vertical; }
.workday-correction-time { grid-column:1 / -1; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.workday-correction-data .empty { padding:20px; border:1px dashed #ccd5e3; border-radius:10px; text-align:center; color:#7b8798; }
.workday-correction-found { margin:10px 0 0; padding:9px 11px; border-radius:9px; background:#ecfdf3; color:#15803d; }
.workday-correction-reason { display:grid; gap:4px; margin:10px 0; padding:10px 12px; border-radius:9px; background:#fff8e7; color:#7c5a0b; }
.workday-correction-content details { margin:8px 0 14px; border:1px solid #dfe5ee; border-radius:10px; padding:8px 10px; }
.workday-correction-content details summary { cursor:pointer; font-weight:850; color:#536176; }
.unit-register-date-hint.is-warning { color:#c5283d !important; font-weight:800; }
.staff-workday-summary-table .is-proposal-pending { background:#fef3c7; color:#a16207; }
.staff-workday-summary-table .is-proposal-approved { background:#dcfce7; color:#15803d; }
.staff-workday-summary-table .is-proposal-rejected { background:#e5e7eb; color:#667085; }
.staff-workday-summary-table td > button[class*="is-proposal-"] { width:21px; }

@media (max-width: 700px) {
  .workday-correction-grid { grid-template-columns:1fr; }
  .workday-correction-time { grid-column:auto; }
  .branch-timekeeping-title { align-items:flex-start; }
  .branch-location-toolbar-actions { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
}

.staff-workday-summary-tabs { display:flex; gap:7px; margin:0 0 9px; }
.staff-workday-summary-tabs button { min-height:36px; padding:7px 13px; border:1px solid #d9e1ee; border-radius:9px; background:#fff; color:#203879; font-size:11px; font-weight:850; cursor:pointer; }
.staff-workday-summary-tabs button:not(.active):hover { background:#f2f5ff; border-color:#a9b9e6; }
.staff-workday-summary-tabs button.active { border-color:#203879; background:#203879; color:#fff; }
.staff-workday-legend .is-late,.staff-workday-summary-table .is-late { background:#fee2e2; color:#c5283d; }
.staff-workday-legend .is-leave-pending,.staff-workday-summary-table .is-leave-pending { background:#fef3c7; color:#a16207; }
.staff-workday-legend .is-leave-approved,.staff-workday-summary-table .is-leave-approved { background:#fee2e2; color:#c5283d; }
.staff-workday-legend .is-leave-rejected,.staff-workday-summary-table .is-leave-rejected { background:#e5e7eb; color:#667085; }
.staff-workday-legend:not(.show-checkin) > .is-checkin,
.staff-workday-legend:not(.show-checkin) > .is-late { display:none; }
.staff-workday-legend.show-checkin > .is-closing,
.staff-workday-legend.show-checkin > .is-leave-pending,
.staff-workday-legend.show-checkin > .is-leave-approved,
.staff-workday-legend.show-checkin > .is-leave-rejected { display:none; }
.staff-workday-summary-table td > button { display:inline-flex; align-items:center; justify-content:center; width:15px; height:15px; margin:1px; padding:0; border:0; border-radius:4px; font-size:8px; font-weight:900; cursor:pointer; }
.staff-leave-review-content { width:min(560px, calc(100vw - 24px)) !important; max-width:560px !important; }
.staff-leave-review-info { display:grid; gap:0; margin:10px 0 14px; border:1px solid #e1e7f0; border-radius:10px; overflow:hidden; }
.staff-leave-review-info p { display:grid; grid-template-columns:125px 1fr; gap:10px; margin:0; padding:9px 11px; border-bottom:1px solid #edf1f6; }
.staff-leave-review-info p:last-child { border-bottom:0; }
.staff-leave-review-info b { color:#536176; }
.staff-leave-review-info span { color:#1f2f55; font-weight:750; }

.branch-calendar-day.has-leave-pending { background:#fef3c7; color:#a16207; cursor:help; }
.branch-calendar-day.has-leave-approved { background:#fee2e2; color:#c5283d; cursor:help; }
.branch-calendar-day.has-leave-rejected { background:#e5e7eb; color:#667085; cursor:help; }
.branch-calendar-day.is-today.has-leave-pending { background:#fef3c7; }
.branch-calendar-day.is-today.has-leave-approved { background:#fee2e2; }
.branch-calendar-day.is-today.has-leave-rejected { background:#e5e7eb; }
.branch-calendar-day.has-leave-pending:hover { background:#eab308; color:#fff; }
.branch-calendar-day.has-leave-approved:hover { background:#dc3545; color:#fff; }
.branch-calendar-day.has-leave-rejected:hover { background:#7b8798; color:#fff; }
.branch-calendar-day.has-leave-pending:hover .branch-calendar-tooltip,
.branch-calendar-day.has-leave-approved:hover .branch-calendar-tooltip,
.branch-calendar-day.has-leave-rejected:hover .branch-calendar-tooltip { display:block; }
.branch-closing-list-row.is-leave-request.is-pending { border-left:3px solid #eab308; background:#fffbea; }
.branch-closing-list-row.is-leave-request.is-approved { border-left:3px solid #dc3545; background:#fff1f2; }
.branch-closing-list-row.is-leave-request.is-rejected { border-left:3px solid #98a2b3; background:#f4f5f7; }

@media (max-width:900px) {
  .staff-workday-summary-tabs { overflow-x:auto; }
  .staff-workday-summary-tabs button { flex:0 0 auto; font-size:9px; }
  .staff-workday-summary-table td > button { width:9px; height:9px; margin:0; border-radius:2px; font-size:5px; }
}