/* Small fixes on top of AdminLTE. Colours and layout stay AdminLTE's own. */

/* Page frame: AdminLT.css tiles a photo behind pages and leaves a gap under the footer */
.wrapper { height: auto; min-height: 100vh; }
.modal .wrapper { min-height: 0; }
.content-wrapper { background: #ecf0f5 !important; background-image: none !important; min-height: calc(100vh - 50px) !important; }
.wrapper:has(> .main-footer) .content-wrapper { min-height: calc(100vh - 101px) !important; }
@media (max-width: 767px) {
  .content-wrapper { min-height: calc(100vh - 100px) !important; }
  .wrapper:has(> .main-footer) .content-wrapper { min-height: calc(100vh - 151px) !important; }
}

/* Sign in: title was dark text on the photo */
.login-logo p, .login-logo b { color: #fff; text-shadow: 0 1px 6px rgba(0, 0, 0, .75); }
.login-logo p { margin: 0; }

/* Sidebar: show which items open a submenu */
.sidebar-menu > .treeview > a::after { content: "\f104"; font-family: FontAwesome; float: right; margin-right: 10px; opacity: .7; }
.sidebar-menu > .treeview.menu-open > a::after { content: "\f107"; }
.sidebar-mini.sidebar-collapse .sidebar-menu > .treeview > a::after { display: none; }

/* List and report pages: tables sat flush against the box edge */
.x_content { padding: 10px 15px 15px; overflow-x: auto; }
.x_content > h1 { font-size: 24px; margin: 5px 0 15px; }
.box > form { padding-top: 5px; }
.dataTables_wrapper .dt-buttons { float: left; margin-bottom: 10px; }
.dataTables_wrapper .dataTables_filter { float: right; margin-bottom: 10px; }
.dataTables_wrapper .dataTables_filter input { margin-left: 6px; }
.dataTables_wrapper table.dataTable { float: none; clear: both; width: 100% !important; }
.dataTables_info { clear: both; padding-top: 8px; }
table.dataTable img { object-fit: cover; }
.prh-noimg { color: #999; font-size: 12px; white-space: nowrap; }
@media (max-width: 767px) { .dataTables_wrapper .dataTables_filter { float: none; clear: both; text-align: left; } }

/* Green filter panels: buttons spilled out of the panel and vanished into its colour */
.callout::after { content: ""; display: table; clear: both; }
.callout a, .callout a:hover { text-decoration: none; }
.callout .form-group { margin-bottom: 0; padding-top: 5px; }
.callout .form-group > div, .callout .form-group > a > div { gap: 10px; }
.callout .btn-success, .callout .btn-info { border-color: rgba(255, 255, 255, .7); }
@media (max-width: 767px) {
  .callout > div[style*="flex"], .callout .form-group > div, .callout .form-group > a > div { flex-wrap: wrap; }
  .callout .form-group .btn { margin-bottom: 8px; }
}

/* Room tiles: eye button lined up with its text, watermark icon behind the text */
section.content:has(> .col-lg-3 > .small-box) { display: flex; flex-wrap: wrap; }
section.content:has(> .col-lg-3 > .small-box) > :not(.col-lg-3):not(.modal) { width: 100%; }
.small-box h3 { white-space: normal; overflow-wrap: anywhere; }
.small-box p { min-height: 30px; }
.small-box p a { float: none !important; display: inline-block; width: auto !important; padding: 0 !important; margin-right: 6px; }
.small-box p .btn { float: none !important; width: auto !important; padding: 2px 8px; }
.small-box .icon { color: rgba(0, 0, 0, .1); z-index: 0; }
.small-box .inner { position: relative; z-index: 1; }
.small-box-footer .btn { padding: 2px 12px; }
@media (max-width: 480px) { .col-xs-6:has(> .small-box) { width: 100%; } }

/* Room students pop-up */
.room-modal .modal-body { background: #f4f6f9 !important; color: #333 !important; padding: 18px; }
.room-modal .modal-title { font-size: 22px; font-weight: 600; }
.room-modal .close { color: #fff; opacity: .85; text-shadow: none; }
.room-modal-summary { margin: 6px 0 0; display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 14px; }
.room-modal-summary .fa { margin-right: 3px; opacity: .85; }
.room-modal-empty { margin: 0; padding: 36px 10px; text-align: center; color: #666; }
.room-modal-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
.room-student { background: #fff; border: 1px solid #e3e6ea; border-radius: 4px; padding: 16px; }
.room-student-head { display: flex; align-items: center; gap: 13px; margin-bottom: 13px; }
.room-student-avatar { position: relative; flex: none; width: 56px; height: 56px; border-radius: 50%; overflow: hidden; background: #00a65a; color: #fff; font-size: 19px; font-weight: 600; display: flex; align-items: center; justify-content: center; }
.room-student-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #fff; }
.room-student-name { min-width: 0; }
.room-student-name strong { display: block; font-size: 16px; line-height: 1.25; color: #222; overflow-wrap: anywhere; }
.room-student-name small { color: #777; font-size: 12.5px; overflow-wrap: anywhere; }
.room-student-facts { list-style: none; margin: 0; padding: 12px 0 0; border-top: 1px solid #eef0f3; font-size: 14px; }
.room-student-facts li { padding: 3px 0; color: #444; }
.room-student-facts .fa { width: 20px; color: #999; }
.room-student-free { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 120px; background: transparent; border: 1px dashed #c4cad2; color: #667; }
.room-student-free .fa { font-size: 22px; color: #a5adb7; }

/* Change password: form stretched edge to edge */
.content-wrapper > .login-box-body { max-width: 520px; margin: 0 auto; }
.content-wrapper > .login-box-body .col-xs-4 { width: 100%; }

/* Status messages printed before the main content */
.content-wrapper > .alert { margin: 15px 15px 0; }

/* Dashboard */
.chart { position: relative; height: 250px; }
.chart-empty { margin: 0; padding: 40px 10px; text-align: center; }
.chart-table { margin-top: 8px; font-size: 13px; }
.chart-table summary { cursor: pointer; color: #666; }
[hidden] { display: none !important; }