body {
  font-size: 11px;
}

.user-friends img {
    height: auto;
}

.page-login {
	background: url("../img/bg-sbm-new-3.jpg") no-repeat;
	background-size: cover;
}

.input-group-btn>.btn {
    position: relative;
    border-bottom-left-radius: 0px;
    border-top-left-radius: 0px;
}

.iradio__with-input .iradio_square-green,
.iradio__with-input .icheckbox_square-green {
	margin-top: 3px;
}

.loginbox {
	margin-top: 160px;
	background-color: rgba(255,255,255,0.9);
	padding-left: 80px;
	padding-right: 80px;
	padding-top: 30px;
	padding-bottom: 30px;
	width: 460px !important;
	border-radius: 30px;
}

.sidebarfix {
	position:fixed;
}

.scroll-out-1 {
	max-height: calc(100vh - 100px);
	min-height: calc(100vh - 100px);
	overflow: hidden;
}

.main-content {
	display: inline-flex;
}

/* DataTables Pagination Spacing Fix */
.dataTables_wrapper {
	padding-bottom: 25px !important;
}

.dataTables_info,
.dataTables_paginate {
	margin-bottom: 15px !important;
}

.main-content-long {
	width: 6000px;
}

.main-content-short {
	width: 100%;
}

.no-padding-side {
	padding-left:0;
	padding-right:0;
}

.force-left-15 {
	left: -15px;
}

.view-fit {
	height: calc(100vh - 100px);
	border-right: 4px solid #e7eaec;
}

.box-fit {
	height:100%;
	margin-bottom:0;
}

.content-fit {
	height: calc(100vh - 150px);
	overflow: hidden;
	padding-left:0;
	padding-right:0;
}

.menu-box {
	padding-left: 20px;
	padding-right: 0;
}

.menu-box-right {
	padding-right: 40px;
	border-right: 0;
}

.inside-fit {
	height: calc(100vh - 192px);
	overflow:hidden;
}

.ibox.fullscreen .inside-fit {
	height: calc(100vh - 80px);
}

.inside-sidebar {
	height: calc(100vh - 45px);
}

.inside-fit > .row {
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* Yearly report: extra bottom clearance for footer + zoom (scoped; does not alter global .inside-fit) */
.yearly-report-panel .inside-fit {
	height: calc(100vh - 240px);
}
.yearly-report-panel .yearly-report-scroll-inner {
	padding-bottom: 56px;
}

.yearly-report-panel tr.yearly-report-row-inactive td {
	background-color: #f5f5f6 !important;
	color: #a7a7a7;
}

.no-margin-side {
	margin-left: 0 !important;
	margin-right: 0 !important;	
}

/* .dataTables_wrapper > .row {
	margin-left: 0 !important;
	margin-right: 0 !important;
} */

.table-condensed {
	font-size: 11px;
}

.table.table-condensed > thead > tr > th, .table.table-condensed > tbody > tr > th, .table.table-condensed > tfoot > tr > th, .table.table-condensed > thead > tr > td, .table.table-condensed > tbody > tr > td, .table.table-condensed > tfoot > tr > td {
	padding: 5px 20px 5px 5px !important;
}

.datatable

.border-right {
	border-right: 3px solid #e7eaec;
}

.align-left {
	text-align: left !important;
}

.align-right {
	text-align: right !important;
}

.minimize-text {
	transform: rotate(-90deg);
	text-align: right;
	margin-top: 120px;
	margin-left: -102px;
	width: 250px;
}

.overflow-hidden {
	margin: 0px 15px;
}

.btn-xxs {
	width: 20px !important;
	height: 20px !important;
	padding: 0px 0px;
	font-size: 7px;
}

.ui-dialog{
	overflow: visible !important;
}
.ui-dialog-content{
	overflow: visible !important;
}

.no-pading {
	padding:0 !important;
}

.full-size{
}

.cursor-pointer {
	cursor:pointer;
}

.form {
	width:95%;
}

.list-selected {
	background: #f5f5f5;
}

.list-selected * {
	font-weight: 700;
}

.row-link{
	cursor: pointer;
	width: 100%;
	display: block;
}

.rubric-selected {
	background-color: #DFDFDF;
}

.preserve-line-return {
	white-space:pre-line;
}

.page-print {
	-webkit-print-color-adjust: exact;
	height: 290mm;
	width: 200mm;
}

.app-modal-window .modal-dialog {
	width: 1000px;
}

.col-centered{
	float: none;
	margin: 0 auto;
}

.tooltip.top-left .tooltip-inner {
	text-align: left !important
}

.tooltip.top-left .tooltip-inner p {
	margin-bottom: 0px;
}
/* TOOGLE SWICH */
.showhiddenswitch {
	position: relative;
	width: 64px;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
}
.showhiddenswitch-checkbox {
	display: none;
}
.showhiddenswitch-label {
	display: block;
	overflow: hidden;
	cursor: pointer;
	border: 2px solid #1ab394;
	border-radius: 2px;
}
.showhiddenswitch-inner {
	width: 200%;
	margin-left: -100%;
	-moz-transition: margin 0.3s ease-in 0s;
	-webkit-transition: margin 0.3s ease-in 0s;
	-o-transition: margin 0.3s ease-in 0s;
	transition: margin 0.3s ease-in 0s;
}
.showhiddenswitch-inner:before,
.showhiddenswitch-inner:after {
	float: left;
	width: 50%;
	height: 20px;
	padding: 0;
	line-height: 20px;
	font-size: 12px;
	color: white;
	font-family: Trebuchet, Arial, sans-serif;
	font-weight: bold;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
.showhiddenswitch-inner:before {
	content: "SHOW";
	padding-left: 10px;
	background-color: #1ab394;
	color: #FFFFFF;
}
.showhiddenswitch-inner:after {
	content: "HIDDEN";
	padding-right: 10px;
	background-color: #FFFFFF;
	color: #999999;
	text-align: right;
}
.showhiddenswitch-switch {
	width: 20px;
	margin: 0;
	background: #FFFFFF;
	border: 2px solid #1ab394;
	border-radius: 2px;
	position: absolute;
	top: 0;
	bottom: 0;
	right: 44px;
	-moz-transition: all 0.3s ease-in 0s;
	-webkit-transition: all 0.3s ease-in 0s;
	-o-transition: all 0.3s ease-in 0s;
	transition: all 0.3s ease-in 0s;
}
.showhiddenswitch-checkbox:checked + .showhiddenswitch-label .showhiddenswitch-inner {
	margin-left: 0;
}
.showhiddenswitch-checkbox:checked + .showhiddenswitch-label .showhiddenswitch-switch {
	right: 0;
}

/* SWITCHES */
.showhiddenswitch {
	position: relative;
	width: 70px;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
}
.showhiddenswitch-checkbox {
	display: none;
}
.showhiddenswitch-label {
	display: block;
	overflow: hidden;
	cursor: pointer;
	border: 2px solid #1AB394;
	border-radius: 3px;
}
.showhiddenswitch-inner {
	display: block;
	width: 200%;
	margin-left: -100%;
	-moz-transition: margin 0.3s ease-in 0s;
	-webkit-transition: margin 0.3s ease-in 0s;
	-o-transition: margin 0.3s ease-in 0s;
	transition: margin 0.3s ease-in 0s;
}
.showhiddenswitch-inner:before,
.showhiddenswitch-inner:after {
	display: block;
	float: left;
	width: 50%;
	height: 16px;
	padding: 0;
	line-height: 16px;
	font-size: 10px;
	color: white;
	font-family: Trebuchet, Arial, sans-serif;
	font-weight: bold;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
.showhiddenswitch-inner:before {
	content: "SHOW";
	padding-left: 9px;
	background-color: #1AB394;
	color: #FFFFFF;
}
.showhiddenswitch-inner:after {
	content: "HIDDEN";
	padding-right: 7px;
	background-color: #FFFFFF;
	color: #919191;
	text-align: right;
}
.showhiddenswitch-switch {
	display: block;
	width: 18px;
	margin: 0;
	background: #FFFFFF;
	border: 2px solid #1AB394;
	border-radius: 3px;
	position: absolute;
	top: 0;
	bottom: 0;
	right: 52px;
	-moz-transition: all 0.3s ease-in 0s;
	-webkit-transition: all 0.3s ease-in 0s;
	-o-transition: all 0.3s ease-in 0s;
	transition: all 0.3s ease-in 0s;
}
.showhiddenswitch-checkbox:checked + .showhiddenswitch-label .showhiddenswitch-inner {
	margin-left: 0;
}
.showhiddenswitch-checkbox:checked + .showhiddenswitch-label .showhiddenswitch-switch {
	right: 0;
}

.scrollable-menu {
    height: auto;
    max-height: 200px;
    overflow-x: hidden;
}

/* Avatar */
.avatar-upload {
  position: relative;
  max-width: 205px;
  margin: 50px auto;
}

.avatar-upload.is-2x3 {
  max-width: 128px;
}

.avatar-upload.is-square {
  max-width: 192px;
}

.avatar-upload.has-left-indent {
	margin: 50px 0;
}
.avatar-upload.is-square,
.avatar-upload.is-2x3 {
	margin: 15px 0;
}
.avatar-upload .avatar-edit {
	position: absolute;
  right: 12px;
  z-index: 1;
  top: 10px;
}
.avatar-upload.is-square .avatar-edit,
.avatar-upload.is-2x3 .avatar-edit {
	right: -15px;
	top: -15px;
}
.avatar-upload.is-square .avatar-edit input + label,
.avatar-upload.is-2x3 .avatar-edit input + label {
	width: 35px;
  height: 35px;
}
.avatar-upload .avatar-edit input {
  display: none;
}
.avatar-upload .avatar-edit input + label {
  display: inline-block;
  width: 50px;
  height: 50px;
  margin-bottom: 0;
  border-radius: 100%;
  background: #1ab394;
  border: 1px solid transparent;
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.12);
  cursor: pointer;
  font-weight: normal;
  transition: all 0.2s ease-in-out;
}
.avatar-upload .avatar-edit input + label:hover {
  background: #15997f;
}
.avatar-upload .avatar-edit input + label:after {
  content: "\f040";
  font-family: 'FontAwesome';
	color: white;
	font-size: 18px;
  position: absolute;
  top: 14px;
  left: 0;
  right: 0;
  text-align: center;
  margin: auto;
}
.avatar-upload.is-square .avatar-edit input + label:after,
.avatar-upload.is-2x3 .avatar-edit input + label:after {
	font-size: 15px;
	top: 7px;
}
.avatar-upload .avatar-preview {
  width: 192px;
  height: 192px;
  position: relative;
	border-radius: 100%;
	background-color: #f3f3f4;
}

 .avatar-upload.is-2x3 .avatar-preview {
	 width: 128px;
	 border-radius: 3px;          /* a cover is not a round avatar */
 }
.avatar-upload.is-2x3 .avatar-preview > div { border-radius: 3px; }

.avatar-upload .avatar-preview > div {
  width: 100%;
  height: 100%;
  border-radius: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.avatar-upload.is-square .avatar-preview,
.avatar-upload.is-square .avatar-preview > div,
.avatar-upload.is-2x3 .avatar-preview,
.avatar-upload.is-2x3 .avatar-preview > div {
	border-radius: 0px;
}

.form-check:hover {
	cursor: pointer;
}

.profile__short-info {
	position: relative;
	margin: 12px 0;
	min-height: 120px;
}

.profile__short-info-centered {
	position: absolute;
	top : 50%;
	transform: translateY(-50%);
}

.ibox.selected {
	border: 1px solid #1a7bb9
}

.form__chosen-fix-size .chosen-container.chosen-container-single {
	width: 257px !important;
}

.bootstrap-duallistbox-container option {
	font-size : 12px !important;
	white-space: normal;
	padding: 4px;
}

.bootstrap-duallistbox-container option:nth-child(even) {
	background-color : #DFDFDF;
}

.bootstrap-duallistbox-container option:hover {
	background-color : #18a689;
	color : white;
}

.form__title {
	white-space: nowrap; 
	overflow: hidden;
	text-overflow: ellipsis;
	cursor: pointer;
}

.form__description {
  display: block;
  display: -webkit-box;
	height: 66px;
	line-height: 1.5;
  margin: 0 auto;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chosen-container-multi .chosen-choices {
	background-image: none !important;
	padding: 3px 12px !important;
	border-radius: 0px;
}

.chosen-container-single .chosen-single {
	background-image: none !important;
}

.has-error .chosen-container-multi .chosen-choices, 
.has-error .chosen-container-single .chosen-single {
	border-color: #ed5565;
}

.has-hidden-chosen .chosen-container {
	width : 100% !important;
}



.image-container div {
	width: 100%;
	padding-bottom: 100%;
  background-size: cover;
  background-repeat: no-repeat;
	background-position: center;
	background-color: #e7eaec;
}

.image-container.is-2x3 {
	max-width: 360px;
}

.image-container.is-2x3 div{
	padding-bottom: 150%;
}

.image-container.is-2x3.m-b-xs div{
	padding-bottom: 150%;
	min-height: 60px;
}

.view-detail-library .well.well-sm{
	background-color: white;
	margin-bottom: 15px;
}

.image-view {
	width: 100%;
	padding-top: 100%;
  background-size: cover;
  background-repeat: no-repeat;
	background-position: center;
	background-color: #f3f3f4;
}

.image-view.is-rounded {
	border-radius: 50%;
}

.animate-show-hide.ng-hide {
  opacity: 0;
}

.animate-show-hide.ng-hide-add,
.animate-show-hide.ng-hide-remove {
  transition: all linear 0.5s;
}

.check-element {
  border: 1px solid black;
  opacity: 1;
  padding: 10px;
}

.input-xs:not(.ui-select-search) {
		font-weight: 600;
		width: 100% !important;
    height: 22px;
    padding: 5px 5px;
    font-size: 12px;
		line-height: 1.5;
}

.select-xs {
		font-weight: 600;
    height: 22px;
    padding: 0px;
    font-size: 12px;
		line-height: 1.5;
}

.ui-select-multiple.ui-select-bootstrap {
	padding: 3.2px 12px 1.5px !important;
}

input.ui-select-search.input-xs.ng-pristine.ng-untouched.ng-valid.ng-empty {
	width: 100% !important;
}

.ui-select-bootstrap .ui-select-choices-row.active>span {
	background-color: #1ab394 !important;
}

.form-group.has-error .note-editor.note-frame.panel.panel-default {
	border-color: #ed5565 !important;
}

.well.error-border {
	border-color: #ed5565 !important;
}

.wrap-box {
  -ms-word-break: break-all;
  word-break: break-all;
  word-break: break-word;
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
 }

span.ui-select-choices-row-inner {
	white-space: normal !important;
	border-bottom: 1px solid #f1f1f1;
}
 
.has-full-width {
	width: 100% !important;
}

.break-word {
	word-break: break-word !important;
}


/* Custom Toaster Error - Modern Semi-Transparent Design */
.custom-error-toast {
	border-left: 4px solid rgba(229, 115, 115, 0.6); /* Softer red */
	background: rgba(255, 245, 245, 0.95) !important; /* Semi-transparent light pink */
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08), 0 1px 4px rgba(0, 0, 0, 0.04) !important;
	border-radius: 8px !important;
}

.custom-error-toast .toast-title {
	color: #e57373 !important; /* Softer red */
	font-weight: 600;
	font-size: 15px;
}

.custom-error-toast .toast-message {
	color: #4a4a4a !important; /* Softer dark gray for readability */
	opacity: 1 !important;
}

.custom-error-toast ul {
	padding-left: 20px;
	margin-bottom: 0;
}

.custom-error-toast li {
	margin-bottom: 4px;
}

.custom-error-toast .toast-close-button {
	color: #e57373 !important;
	opacity: 0.6;
	text-shadow: none !important;
}

.custom-error-toast .toast-close-button:hover {
	opacity: 1;
}

.custom-error-toast .copy-btn {
	background: rgba(0, 0, 0, 0.04);
	color: #616161;
	border: 1px solid rgba(0, 0, 0, 0.12);
	border-radius: 4px;
	padding: 6px 14px;
	margin-top: 8px;
	cursor: pointer;
	font-size: 12px;
	transition: all 0.2s;
	font-weight: 500;
}

.custom-error-toast .copy-btn:hover {
	background: rgba(0, 0, 0, 0.08);
	border-color: rgba(0, 0, 0, 0.18);
}

/* ---- Sticky window headers (shared): put class "ai-sticky-head" on a
   toolbar/filter block and "ai-sticky-table" on the main table. The
   aiStickyHead directive (js/directives.js) measures the block height into
   --aiHeadH and the first thead row into --aiThRow1 on the window box. ---- */
#page-wrapper .ai-sticky-head {
    position: sticky; top: 0; z-index: 30; background: #fff;
    margin-bottom: 8px; padding-top: 6px; padding-bottom: 6px;
    box-shadow: 0 4px 6px -4px rgba(0,0,0,.18);
}
/* Second sticky layer: a per-tab toolbar/filter row that pins directly under
   the head block. Its own height goes into --aiSubH (aiStickySub directive) so
   the table header below knows how far down to sit. IMPORTANT: position:sticky
   travels only within its PARENT's box, so this class must go on an element
   whose parent spans the scrollable content — not on a short wrapper. */
#page-wrapper .ai-sticky-sub {
    position: sticky; top: var(--aiHeadH, 0px); z-index: 28; background: #fff;
    padding-top: 4px; padding-bottom: 4px;
    box-shadow: 0 4px 6px -5px rgba(0,0,0,.16);
}
#page-wrapper table.ai-sticky-table > thead > tr > th {
    position: sticky; top: calc(var(--aiHeadH, 0px) + var(--aiSubH, 0px)); z-index: 25;
    background: #fff; box-shadow: inset 0 -1px 0 #ddd;
}
/* multi-row theads (rowspan/colspan): each row pins below the previous
   (row heights measured per table by the aiStickyTable directive) */
#page-wrapper table.ai-sticky-table > thead > tr:nth-child(2) > th {
    top: calc(var(--aiHeadH, 0px) + var(--aiSubH, 0px) + var(--aiThRow1, 34px));
}
#page-wrapper table.ai-sticky-table > thead > tr:nth-child(3) > th {
    top: calc(var(--aiHeadH, 0px) + var(--aiSubH, 0px) + var(--aiThRow1, 34px) + var(--aiThRow2, 34px));
}

/* ---- Final-project consultation thread (shared by student & lecturer views):
   Log = session card; comments = two-sided chat (viewer's side vs the other). */
.fp-thread .fp-session { border:1px solid #e7eaec; border-radius:12px; background:#fff; margin-bottom:18px; box-shadow:0 1px 6px rgba(0,0,0,.05); overflow:hidden; }
.fp-thread .fp-session-head { display:flex; align-items:center; gap:10px; padding:12px 16px; background:#f8fafb; border-bottom:1px solid #eef1f3; }
.fp-thread .fp-session-icon { width:34px; height:34px; border-radius:50%; background:#1ab394; color:#fff; display:flex; align-items:center; justify-content:center; flex:0 0 34px; }
.fp-thread .fp-session-note { padding:12px 16px; color:#5b6770; border-bottom:1px dashed #eef1f3; }
.fp-thread .fp-session-note p { margin:0 0 4px; }
.fp-thread .fp-chat { padding:14px 16px; display:flex; flex-direction:column; gap:12px; }
.fp-thread .fp-msg { display:flex; gap:8px; max-width:82%; }
.fp-thread .fp-msg-left  { align-self:flex-start; }
.fp-thread .fp-msg-right { align-self:flex-end; flex-direction:row-reverse; }
.fp-thread .fp-msg-ava { width:34px; height:34px; border-radius:50%; object-fit:cover; flex:0 0 34px; border:1px solid #e7eaec; }
.fp-thread .fp-bubble { padding:8px 12px; border-radius:14px; font-size:13px; line-height:1.5; word-break:break-word; overflow:hidden; }
.fp-thread .fp-bubble p { margin:0 0 6px; }
.fp-thread .fp-bubble p:last-child { margin-bottom:0; }
/* keep embedded images (pasted into notes/replies) inside the bubble instead
   of overflowing it; wide tables/pre scroll within their own box */
.fp-thread .fp-bubble img,
.fp-thread .fp-session-note img { max-width:100%; height:auto; border-radius:6px; display:block; margin:6px 0; }
.fp-thread .fp-bubble table,
.fp-thread .fp-session-note table { max-width:100%; }
.fp-thread .fp-bubble pre,
.fp-thread .fp-session-note pre { max-width:100%; overflow-x:auto; }
.fp-thread .fp-bubble-other { background:#f1f3f5; border-top-left-radius:4px; }
.fp-thread .fp-bubble-me    { background:#e3f4ef; border-top-right-radius:4px; }
.fp-thread .fp-bubble-head { display:flex; align-items:center; gap:6px; margin-bottom:3px; }
.fp-thread .fp-bubble-head strong { font-size:12px; }
.fp-thread .fp-role-badge { font-size:9px; text-transform:uppercase; letter-spacing:.4px; padding:1px 6px; border-radius:8px; font-weight:600; }
.fp-thread .fp-role-advisor { background:#2f4050; color:#fff; }
.fp-thread .fp-role-student { background:#1ab394; color:#fff; }
.fp-thread .fp-role-other   { background:#c2c8ce; color:#fff; }
.fp-thread .fp-msg-time { font-size:10px; color:#98a0a6; margin-top:3px; text-align:right; }
.fp-thread .fp-empty { text-align:center; padding:6px; }
.fp-thread .fp-composer { border-top:1px solid #eef1f3; padding:12px 16px; background:#fbfcfd; }

/* ---- Final-project header card (shared student/lecturer view) ---- */
.fp-headcard { border:1px solid #e7eaec; border-radius:16px; overflow:hidden; box-shadow:0 2px 12px rgba(0,0,0,.08); margin:24px 0; background:#fff; }
.fp-headcard .fp-head { background:linear-gradient(135deg,#1ab394,#159c82); color:#fff; padding:22px 24px; display:flex; align-items:center; gap:16px; }
.fp-headcard .fp-head-ico { width:54px; height:54px; border-radius:50%; background:rgba(255,255,255,.18); display:flex; align-items:center; justify-content:center; flex:0 0 54px; font-size:24px; }
.fp-headcard .fp-head h3 { margin:0; font-weight:600; line-height:1.3; font-size:18px; color:#fff; }
.fp-headcard .fp-head-sub { margin-top:8px; display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-size:13px; }
.fp-headcard .fp-status { background:#fff; color:#159c82; font-weight:700; padding:3px 12px; border-radius:12px; font-size:11px; text-transform:uppercase; letter-spacing:.5px; }
.fp-headcard .fp-body { padding:20px 24px; }
.fp-headcard .fp-meta { margin-bottom:14px; }
.fp-headcard .fp-meta-label { display:block; font-size:11px; text-transform:uppercase; letter-spacing:.4px; color:#98a0a6; margin-bottom:1px; }
.fp-headcard .fp-meta-val { font-size:14px; color:#3a4248; word-break:break-word; }

/* compact grouped meta inside the fp header card (Advisors / Examiners) */
.fp-headcard .fp-group { margin-bottom:12px; }
.fp-headcard .fp-group-label { font-size:11px; text-transform:uppercase; letter-spacing:.4px; color:#98a0a6; margin-bottom:3px; }
.fp-headcard .fp-person { font-size:13.5px; color:#3a4248; line-height:1.55; }
.fp-headcard .fp-person .fp-idx { color:#b3b9be; margin-right:5px; }
.fp-headcard .fp-person .fp-kk { color:#7b848b; font-size:12px; cursor:help; border-bottom:1px dotted #c3c9ce; }

/* progress donut sits in the teal header (right), mirroring the icon at left */
.fp-headcard .fp-progress-ring { width:66px; height:66px; border-radius:50%; flex:0 0 66px; display:flex; align-items:center; justify-content:center; }
.fp-headcard .fp-progress-hole { width:50px; height:50px; border-radius:50%; background:#17a88b; display:flex; align-items:center; justify-content:center; }
.fp-headcard .fp-progress-hole span { display:flex; align-items:baseline; justify-content:center; font-size:15px; font-weight:700; color:#fff; line-height:1; }
.fp-headcard .fp-progress-hole small { font-size:9px; font-weight:600; color:rgba(255,255,255,.85); margin-left:1px; }
/* compact action buttons in the body */
.fp-headcard .fp-actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:16px; }
.fp-headcard .fp-actions .btn { min-width:130px; }
.fp-addbar { margin-bottom:14px; }
/* inline "edit detail" box inside the header card body */
.fp-headcard .fp-editbox { margin-top:14px; padding:14px 16px; border:1px solid #d7ece6; border-radius:12px; background:#f7fbfa; }
.fp-headcard .fp-editbox .fp-field { margin-bottom:12px; }
.fp-headcard .fp-editbox .fp-field > label { display:block; font-size:11px; text-transform:uppercase; letter-spacing:.4px; color:#98a0a6; margin-bottom:4px; }
/* inline "new consultation session" composer */
.fp-newsession { border:1px solid #d7ece6; border-radius:12px; background:#fff; box-shadow:0 1px 6px rgba(0,0,0,.05); }
.fp-newsession-head { padding:10px 16px; background:#eefaf6; border-bottom:1px solid #d7ece6; font-weight:600; color:#159c82; font-size:13px; border-top-left-radius:12px; border-top-right-radius:12px; }
.fp-newsession-head .fa { margin-right:6px; }
.fp-newsession-body { padding:14px 16px; }
.fp-newsession-body .fp-field { margin-bottom:12px; }
.fp-newsession-body .fp-field > label { display:block; font-size:11px; text-transform:uppercase; letter-spacing:.4px; color:#98a0a6; margin-bottom:4px; }
.fp-newsession-body .fp-field-inline input { max-width:200px; }
.fp-newsession-foot { display:flex; align-items:center; gap:8px; margin-top:6px; }
.fp-newsession-foot .pull-right { margin-left:auto; }
.fp-headcard .fp-done-note { margin-top:14px; color:#5b6770; font-size:13px; }
.fp-headcard .fp-done-note .fa { margin-right:4px; }

/* WhatsApp-style unread badge: student messages awaiting the viewer's reply */
.fp-unread {
    display:inline-block; min-width:20px; height:20px; padding:0 6px;
    border-radius:10px; background:#25d366; color:#fff;
    font-size:11px; font-weight:700; line-height:20px; text-align:center;
    box-shadow:0 1px 2px rgba(0,0,0,.2);
}
.fp-session-head .fp-unread { margin-left:auto; }

/* inline per-session progress marking (advisor) */
.fp-progbtn { background:#eafaf4; color:#159c82; border:1px solid #cdeee4; font-weight:600; }
.fp-progbtn:hover, .fp-progbtn:focus { background:#d7f3ea; color:#0f8a72; border-color:#b6e6d8; }
.fp-progress-edit { padding:12px 16px; border-bottom:1px dashed #eef1f3; background:#f7fbfa; }
.fp-progress-edit-title { font-size:12px; font-weight:600; color:#159c82; margin-bottom:10px; }
.fp-progress-edit-title .fa { margin-right:5px; }
.fp-chapline { display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.fp-chapline .fp-chaplabel { flex:0 0 78px; width:78px; font-size:12px; color:#5b6770; }
.fp-chapline .fp-slider { flex:1; accent-color:#1ab394; height:4px; }
.fp-chapline .fp-chapval { flex:0 0 44px; width:44px; text-align:right; font-size:12px; font-weight:700; color:#3a4248; }
.fp-progress-edit-foot { margin-top:10px; }

/* inline session note/date edit + delete affordances */
.fp-session-edit { padding:12px 16px; border-bottom:1px dashed #eef1f3; background:#f7fbfa; }
.fp-session-edit .fp-field { margin-bottom:12px; }
.fp-session-edit .fp-field > label { display:block; font-size:11px; text-transform:uppercase; letter-spacing:.4px; color:#98a0a6; margin-bottom:4px; }
.fp-delbtn { color:#c0392b; }
.fp-delbtn:hover, .fp-delbtn:focus { color:#fff; background:#c0392b; border-color:#c0392b; }
.fp-bubble-head .fp-del-comment { margin-left:auto; color:#b3979a; cursor:pointer; font-size:11px; opacity:.6; }
.fp-bubble-head .fp-del-comment:hover { color:#c0392b; opacity:1; }
.fp-bubble-head { align-items:center; }

/* green attention badge on the Final Project sidebar menu */
.fp-menu-badge {
    display:inline-block; min-width:18px; height:18px; line-height:18px;
    padding:0 6px; margin-left:8px; border-radius:9px;
    background:#25d366; color:#fff; font-size:11px; font-weight:700;
    text-align:center; vertical-align:middle; box-shadow:0 1px 2px rgba(0,0,0,.25);
}
.nav-second-level .fp-menu-badge, .nav > li > a .fp-menu-badge { float:right; }

/* month quick-jump tabbar — styled like binder/folder index tabs, sorted
   chronologically (oldest left → newest right), each with a session count */
.fp-monthbar { position:sticky; top:0; z-index:20; display:flex; align-items:flex-end; gap:3px; padding:12px 0 0; margin-bottom:14px; background:#fff; overflow-x:auto; overflow-y:hidden; white-space:nowrap; border-bottom:2px solid #1ab394; }
.fp-monthbar-ico { flex:0 0 auto; color:#98a0a6; padding:0 8px 7px 2px; align-self:center; }
.fp-monthtab { flex:0 0 auto; margin-bottom:-2px; border:1px solid #d7dde1; border-bottom:none; border-radius:9px 9px 0 0; background:#eef1f3; color:#5b6770; padding:7px 14px; font-size:12px; font-weight:600; line-height:1.2; cursor:pointer; transition:background .15s, color .15s; }
.fp-monthtab:hover { background:#e2f4ee; color:#159c82; }
.fp-monthtab.active { background:#fff; color:#159c82; border-color:#1ab394; border-top:3px solid #1ab394; padding-top:6px; font-weight:700; }
.fp-monthtab-count { display:inline-block; min-width:16px; height:16px; line-height:16px; padding:0 4px; margin-left:5px; border-radius:8px; background:#c2c8ce; color:#fff; font-size:10px; font-weight:700; text-align:center; vertical-align:middle; }
.fp-monthtab:hover .fp-monthtab-count, .fp-monthtab.active .fp-monthtab-count { background:#1ab394; color:#fff; }

/* status filter rendered as binder tabs (reuses .fp-monthtab look) */
/* right margin (beats the aiStickyHead directive's inline full-bleed margin)
   so the binder baseline clears the scroll pane's vertical scrollbar */
#page-wrapper .fp-statusbar.ai-sticky-head { display:flex; align-items:flex-end; gap:3px; padding-top:12px; padding-bottom:0; box-shadow:none; border-bottom:2px solid #1ab394; overflow-x:auto; overflow-y:hidden; white-space:nowrap; margin-bottom:12px; margin-right:16px !important; }
.fp-statusbar .fp-statusbar-ico { flex:0 0 auto; color:#98a0a6; align-self:center; padding:0 8px 7px 2px; }

/* ---- Edit Session modal: md (600px) clipped long room names in the room
   dropdown, and 'lg' (900px) overshoots. +100px is enough for the longest
   room name in the data. Scoped to a windowClass so no other md modal moves. */
.ai-modal-wide .modal-dialog { width: 700px; }
@media (max-width: 740px) {
    .ai-modal-wide .modal-dialog { width: auto; margin: 10px; }
}

/* twScrollTop: the proxy scrollbar sits above the calendar canvas. Kept thin and
   always-visible on WebKit, since a hidden overlay bar defeats the point. */
/* Sticky vertically too, so the bar is reachable at any scroll depth. It sits
   OUTSIDE the canvas, so its parent spans the content and sticky has room to
   travel — unlike the day headers, which are inside the canvas (a scroll
   container) and therefore cannot stick to the outer pane from there. */
.tw-scroll-proxy { overflow-x: auto; overflow-y: hidden; height: 12px; margin-bottom: 0;
                   position: sticky; top: calc(var(--aiHeadH, 0px) + var(--aiSubH, 0px));
                   z-index: 24; background: #fff; }
.tw-scroll-proxy::-webkit-scrollbar { height: 10px; -webkit-appearance: none; }
.tw-scroll-proxy::-webkit-scrollbar-thumb { background: #c9d2d8; border-radius: 5px; }
.tw-scroll-proxy::-webkit-scrollbar-track { background: #f2f5f7; border-radius: 5px; }

/* Lifted day-header strip: sticks just under the top scrollbar, and scrolls
   horizontally only under the directive's control (no bar of its own). */
.tw-head-strip { overflow-x: hidden; overflow-y: hidden;
                 position: sticky; top: calc(var(--aiHeadH, 0px) + var(--aiSubH, 0px) + 12px);
                 z-index: 23; background: #fff;
                 border: 1px solid #e7eaec; border-bottom: 0;
                 border-radius: 3px 3px 0 0; }

/* Lecturer picker in the Typical/Multi-Week filter bars. Measured before this:
   the search field was 183px while its own dropdown was 260px, the control was
   34px tall next to a 30px input-sm sibling, and it sat 15px higher because
   ui-select defaults to vertical-align:baseline against a sibling using middle.
   One width for control, search field and dropdown; input-sm metrics; middle. */
.tw-lect-select { display: inline-block; vertical-align: middle; width: 260px; }
.tw-lect-select .ui-select-match > .btn,
.tw-lect-select input.ui-select-search {
    width: 100% !important; height: 30px; padding: 4px 10px;
    font-size: 12px; line-height: 1.5;
}
.tw-lect-select .ui-select-choices, .tw-lect-select .ui-select-dropdown { width: 100%; }

/* Direct-assignment lecturer picker (Teaching Candidates → pins overlay). Same
   problem and same fix as .tw-lect-select above: the closed control is a .btn
   sized by its own label while the dropdown takes the container's width, so the
   list stepped wider than the field the moment you typed. One width for all
   three parts; input-sm metrics so it lines up with the KK/discipline selects
   in the same row. */
.cand-pin-select { display: inline-block; vertical-align: middle; width: 230px; }
.cand-pin-select .ui-select-match > .btn,
.cand-pin-select input.ui-select-search {
    width: 100% !important; height: 30px; padding: 4px 10px;
    font-size: 12px; line-height: 1.5;
}
.cand-pin-select .ui-select-choices, .cand-pin-select .ui-select-dropdown { width: 100%; }

/* Bulk-edit grid on Lecturer Constraints. The value cell is two rows of campus
   chips tall, and Bootstrap aligns table cells to the TOP — so the lecturer name,
   KK, type and the rule-type select all sat pinned to the ceiling of a 40px row
   while the chips filled it. Centring every cell puts one row back on one line. */
.lc-bulk-grid > tbody > tr > td,
.lc-bulk-grid > thead > tr > th { vertical-align: middle; }
/* the numeric and short columns read better centred than ragged-left */
.lc-bulk-grid > tbody > tr > td:first-child,
.lc-bulk-grid > thead > tr > th:first-child { text-align: center; }
/* the rule-type control should not stretch the row it sits in */
.lc-bulk-grid select.input-sm { margin: 0; }

/* Campus rule: hard/soft applies to the HOME BASE only, so the select lines up
   with the home row rather than floating in the middle of a two-row cell, and
   the "always enforced" note lines up with the unallowed row beneath it. */
.lc-bulk-grid > tbody > tr > td.lc-type-cell { vertical-align: top; padding-top: 6px; }

/* The hard/soft control sits beside 9px chips; at the default input-sm size it was
   the tallest thing in the row and set the row height on its own. */
.lc-bulk-grid select.lc-type-select {
    font-size: 10px;
    height: 22px;
    padding: 1px 4px;
    line-height: 1.2;
}

/* Tables that live inside their OWN small scroll box (the unplaced-classes and
   infeasibility panels on a draft) must stick to that box, not to the page. With
   the page offsets they were pushed --aiHeadH+--aiSubH down INSIDE a 320px pane
   and covered the first rows instead of heading them. */
#page-wrapper .ai-local-scroll { position: relative; }
#page-wrapper .ai-local-scroll table.ai-sticky-table > thead > tr > th {
    top: 0;
}

/* Semester setup page (academicYearSemester.php): one card per semester with a
   header strip and a mini timeline of UTS/UAS/long-holiday position. ng-style
   on the segments carries geometry only — every color sits here so dark mode
   can restyle it. */
.sem-card { border: 1px solid #e7eaec; border-radius: 4px; margin-bottom: 18px; background: #fff; }
.sem-card-head { padding: 8px 12px; background: #f8fafb; border-bottom: 1px solid #e7eaec; border-radius: 4px 4px 0 0; }
.sem-card-body { padding: 12px 12px 15px; }
.sem-tl-track { position: relative; height: 10px; margin: 10px 12px 4px; border-radius: 5px; background: #eef1f2; overflow: hidden; }
.sem-tl-seg { position: absolute; top: 0; bottom: 0; border-radius: 5px; }
.sem-tl-uts { background: #f8ac59; }
.sem-tl-uas { background: #ed5565; }
.sem-tl-holiday { background: #b8c3cc; }
.sem-tl-prs { background: #1c84c6; }
.sem-tl-track .sem-tl-prs { width: 3px; margin-left: -1px; border-radius: 0; }
.sem-tl-legend { padding: 0 12px 6px; font-size: 11px; }
.sem-tl-legend span { margin-right: 12px; }
.sem-tl-dot { display: inline-block; width: 8px; height: 8px; border-radius: 4px; vertical-align: middle; margin-right: 3px; }

/* Academic Years list (academicYear.php): reuses the sem-card/timeline
   vocabulary; per-semester segment colors + a left accent on the running year */
.ayl-seg-first  { background: #1ab394; }
.ayl-seg-second { background: #1c84c6; }
.ayl-seg-short  { background: #f8ac59; }
.ayl-seg-other  { background: #b8c3cc; }
.ayl-current    { border-left: 3px solid #1ab394; box-shadow: 0 1px 4px rgba(26, 179, 148, 0.25); }
.ayl-current > .sem-card-head { background: #eef9f6; }
.ayl-group-head { font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
                  color: #98a6ad; margin: 4px 0 8px; }
.ayl-group-head + div .sem-card { margin-top: 0; }
.sem-tl-track .ayl-today { width: 2px; margin-left: -1px; border-radius: 0; background: #ed5565; }
.ayl-now { color: #ed5565; font-weight: 600; }
/* search + actions stay put while the year list scrolls under them */
.ayl-toolbar { position: -webkit-sticky; position: sticky; top: 0; z-index: 5;
               background: #fff; padding: 2px 0 12px; }
.ayl-load-more { text-align: center; margin: -6px 0 18px; }
.ayl-load-more a { cursor: pointer; font-size: 12px; }
/* discipline cards: let the specialty-field chips wrap with air between rows */
.disc-chips .label { display: inline-block; margin: 0 4px 5px 0; font-weight: 600; }
/* Library: generated cover for materials without a thumbnail. Half of the
   recent catalogue has none, and one grey "No Image" box repeated across the
   grid made neighbouring cards indistinguishable. The palette index comes from
   the record id, so a card keeps its colour across reloads while sitting next
   to a different one. */
.lib-ph {
    width: 159px; height: 238.5px; position: relative; overflow: hidden;
    border-radius: 2px; padding: 16px 12px 16px 22px; color: #fff;
    display: flex; flex-direction: column; justify-content: center;
}
.lib-ph:before {   /* spine */
    content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 9px;
    background: rgba(0, 0, 0, 0.22);
}
.lib-ph:after {    /* soft sheen so flat colours don't read as a broken image */
    content: ''; position: absolute; right: -40px; top: -60px; width: 150px; height: 150px;
    border-radius: 50%; background: rgba(255, 255, 255, 0.08);
}
.lib-ph-title {
    font-size: 12.5px; font-weight: 600; line-height: 1.35; position: relative;
    display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical;
    overflow: hidden;
}
.lib-ph-meta { font-size: 10px; opacity: 0.8; margin-top: 8px; position: relative; }
.lib-ph-icon { position: absolute; right: 10px; bottom: 8px; font-size: 20px; opacity: 0.4; }
.lib-cover {
    position: absolute; top: 0; right: 0; bottom: 0; left: 0;
    width: 100%; height: 100%; object-fit: cover;
    opacity: 0; transition: opacity 0.25s ease;
}
.lib-cover.is-loaded { opacity: 1; }
.lib-ph-lg { width: 100%; max-width: 220px; height: 330px; padding: 20px 16px 20px 26px; }
.lib-ph-lg .lib-ph-title { font-size: 15px; -webkit-line-clamp: 8; }
.lib-ph-lg .lib-ph-meta { font-size: 11px; }
.lib-ph-lg .lib-ph-icon { font-size: 26px; right: 12px; bottom: 10px; }
.lib-ph-0 { background: #4a6fa5; }
.lib-ph-1 { background: #1a8a7a; }
.lib-ph-2 { background: #a15c4a; }
.lib-ph-3 { background: #5b5ea6; }
.lib-ph-4 { background: #2f7d4f; }
.lib-ph-5 { background: #a1793a; }
.lib-ph-6 { background: #7a4a86; }
.lib-ph-7 { background: #3f6f86; }

/* Library grid — auto-fill so the number of covers per row follows the window
   width (the old fixed 18% pull-left always gave five, whatever the screen). */
.lib-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 22px 18px;
    align-items: start;
}
.lib-grid-item { min-height: 420px; }
/* the whole cover opens the collection, like a bookshop tile — the title
   alone was a small target next to a 159x238 image */
.lib-grid-item .lib-ph { cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease; }
.lib-grid-item .lib-ph:hover { transform: translateY(-3px); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22); }

/* Library search field: clear affordance inside the input + result line */
.lib-search { position: relative; }
.lib-search-clear {
    position: absolute; right: 92px; top: 50%; transform: translateY(-50%);
    z-index: 3; cursor: pointer; color: #b1b3b5; font-size: 18px; line-height: 1;
    padding: 0 6px;
}
.lib-search-clear:hover { color: #676a6c; text-decoration: none; }
.lib-result-line { font-size: 12px; color: #888; margin-bottom: 6px; }
.lib-result-line a { cursor: pointer; margin-left: 8px; }

/* Skeleton cards while a page is in flight */
.lib-skel-cover, .lib-skel-line {
    background: linear-gradient(90deg, #eef0f2 25%, #e2e5e8 37%, #eef0f2 63%);
    background-size: 400% 100%;
    animation: lib-shimmer 1.3s ease-in-out infinite;
    border-radius: 3px;
}
.lib-skel-cover { width: 159px; height: 238.5px; margin-bottom: 12px; }
.lib-skel-line { height: 10px; margin-bottom: 7px; }
@keyframes lib-shimmer {
    0% { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}

/* the fluid shelf still needs a floor so the grid keeps ~3 columns when a
   detail window shares the screen */
#library-box { min-width: 640px !important; }

.lib-url { word-break: break-all; font-size: 12px; }

/* Open-catalogue enrichment panel in the collection detail */
.lib-enrich { border-top: 1px dashed #e7eaec; margin-top: 18px; padding-top: 14px; }
.lib-cand { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid #e7eaec; }
.lib-cand:last-child { border-bottom: 0; }
.lib-cand-cover { width: 64px; height: 96px; object-fit: cover; border-radius: 2px; background: #eef0f2; flex: 0 0 64px; }
.lib-cand-body { font-size: 12px; line-height: 1.5; }
.lib-cand-subjects .label { margin: 3px 3px 0 0; display: inline-block; font-weight: 500; }

/* While a session block is being dragged on the Typical Week canvas, no
   tooltip may show: it is body-appended, follows the cursor and hides the very
   column you are dropping onto. The class is set by twDraggable. */
body.tw-dragging .tooltip { display: none !important; }

/* Library facet bar */
.lib-facets { margin-bottom: 4px; }
.lib-facet {
    display: inline-block; cursor: pointer; font-size: 12px; padding: 3px 9px;
    margin: 0 4px 4px 0; border: 1px solid #e7eaec; border-radius: 12px; color: #676a6c;
}
.lib-facet:hover { background: #f3f3f4; color: #676a6c; text-decoration: none; }
.lib-facet.active { background: #1ab394; border-color: #1ab394; color: #fff; }
.lib-facet-n { margin-left: 6px; opacity: 0.65; font-size: 11px; }
.lib-sort { width: auto; display: inline-block; }

/* course-semester table (termsCourse.php) */
.tc-warn { color: #ed5565; font-weight: 600; }
.tc-locked { color: #f8ac59; }
.tc-zero > td { background-color: #fdf3f2 !important; }
.tc-term-pills > li > a { font-size: 12px; }

/* clickable field chips on the Specialty Fields page */
.sf-chip { cursor: pointer; }
.sf-chip .sf-chip-pencil { opacity: 0; margin-left: 2px; transition: opacity 0.12s; }
.sf-chip:hover { background: #148f76; }
.sf-chip:hover .sf-chip-pencil { opacity: 0.9; }

/* The angular datetime picker (date-time directive) opened with
   position="absolute" attaches to <body> and ships no panel background of its
   own — inside page content the transparency went unnoticed, on <body> it
   doesn't. Give it a real panel. */
.date-picker-date-time { background: #fff; border: 1px solid #e7eaec; border-radius: 4px; padding: 6px; z-index: 2100; }

/* ============================================================================
   DARK MODE — activated by `dark-mode` on <html> (NOT <body>: the body's class
   attribute is an Angular interpolation and gets rewritten on every state
   change). Toggled from the top navbar, persisted in localStorage
   ('space-theme'), applied by an inline <head> script before first paint.
   The sidebar is dark already — these rules bring the CONTENT surfaces along.
   Scoped strictly under html.dark-mode so light mode is byte-identical.
   ========================================================================= */
html.dark-mode body,
html.dark-mode #page-wrapper,
html.dark-mode .gray-bg { background-color: #253342; color: #a7b1c2; }
html.dark-mode .white-bg { background-color: #2f4050; }

/* top navbar */
html.dark-mode .row.border-bottom { border-color: #3e5266 !important; }
html.dark-mode .navbar-static-top { background-color: #2f4050; }
html.dark-mode .navbar-top-links li a,
html.dark-mode .welcome-message,
html.dark-mode .welcome-message h4,
html.dark-mode .welcome-message h5 { color: #a7b1c2; }
html.dark-mode .navbar-top-links li a:hover,
html.dark-mode .navbar-top-links li a:focus { background-color: #354a5f; }

/* ibox windows (every module's window chrome) */
html.dark-mode .ibox-title,
html.dark-mode .ibox-footer { background-color: #293846; border-color: #3e5266; color: #e4eaf0; }
html.dark-mode .ibox-content { background-color: #2f4050; border-color: #3e5266; color: #a7b1c2; }
html.dark-mode .ibox-title h5, html.dark-mode .ibox-title-text { color: #e4eaf0; }
html.dark-mode .box-minimize .minimize-text h3 { color: #e4eaf0; }
html.dark-mode #page-wrapper h1, html.dark-mode #page-wrapper h2, html.dark-mode #page-wrapper h3,
html.dark-mode #page-wrapper h4, html.dark-mode #page-wrapper h5, html.dark-mode #page-wrapper h6,
html.dark-mode .modal-content h1, html.dark-mode .modal-content h2, html.dark-mode .modal-content h3,
html.dark-mode .modal-content h4, html.dark-mode .modal-content h5 { color: #e4eaf0; }
html.dark-mode .border-right { border-color: #3e5266 !important; }
html.dark-mode hr { border-color: #3e5266; }
html.dark-mode .hr-line-dashed { border-color: #3e5266; }
html.dark-mode #page-wrapper .text-muted, html.dark-mode .modal-content .text-muted { color: #8a97a8 !important; }
/* links: CONTENT only — the main sidebar is dark by design and keeps its own
   palette untouched in both modes */
html.dark-mode #page-wrapper a:not(.btn):not(.label),
html.dark-mode .modal-content a:not(.btn):not(.label) { color: #7fb2e5; }

/* tables (incl. datatables) */
html.dark-mode .table > thead > tr > th,
html.dark-mode .table > tbody > tr > th,
html.dark-mode .table > tbody > tr > td,
html.dark-mode .table > tfoot > tr > td { border-color: #3e5266; }
html.dark-mode .table-bordered, html.dark-mode .table-bordered > thead > tr > th,
html.dark-mode .table-bordered > tbody > tr > td { border-color: #3e5266; }
html.dark-mode .table-striped > tbody > tr:nth-of-type(odd) { background-color: rgba(255,255,255,0.03); }
html.dark-mode .table-hover > tbody > tr:hover { background-color: rgba(255,255,255,0.06); }
html.dark-mode .table > thead > tr > th { background-color: #293846; color: #e4eaf0; }
html.dark-mode .dataTables_wrapper .dataTables_length,
html.dark-mode .dataTables_wrapper .dataTables_filter,
html.dark-mode .dataTables_wrapper .dataTables_info,
html.dark-mode .dataTables_wrapper .dataTables_paginate { color: #a7b1c2; }
html.dark-mode .pagination > li > a,
html.dark-mode .pagination > li > span { background-color: #354a5f; border-color: #3e5266; color: #a7b1c2; }
html.dark-mode .pagination > .active > a { background-color: #1ab394; border-color: #1ab394; }

/* forms */
html.dark-mode .form-control,
html.dark-mode select.form-control,
html.dark-mode textarea.form-control { background-color: #263544; border-color: #3e5266; color: #c4cdd8; }
html.dark-mode .form-control:focus { border-color: #1ab394; }
html.dark-mode .form-control[disabled],
html.dark-mode .form-control[readonly] { background-color: #293846; color: #8a97a8; }
html.dark-mode .input-group-addon { background-color: #354a5f; border-color: #3e5266; color: #a7b1c2; }
html.dark-mode #page-wrapper label, html.dark-mode .modal-content label { color: #a7b1c2; }
html.dark-mode ::placeholder { color: #71808f; }

/* buttons that are white by design */
html.dark-mode .btn-default,
html.dark-mode .btn-white { background-color: #354a5f; border-color: #3e5266; color: #a7b1c2; }
html.dark-mode .btn-default:hover, html.dark-mode .btn-white:hover { background-color: #3d556c; color: #e4eaf0; }
html.dark-mode .btn-default.active { background-color: #42596f; }

/* dropdowns, tabs, panels, modals */
html.dark-mode .dropdown-menu { background-color: #293846; border-color: #3e5266; }
html.dark-mode .dropdown-menu > li > a { color: #a7b1c2; }
html.dark-mode .dropdown-menu > li > a:hover { background-color: #354a5f; color: #e4eaf0; }
html.dark-mode .nav-tabs { border-color: #3e5266; }
html.dark-mode .nav-tabs > li > a { color: #a7b1c2; }
html.dark-mode .nav-tabs > li.active > a,
html.dark-mode .nav-tabs > li.active > a:focus,
html.dark-mode .nav-tabs > li.active > a:hover { background-color: #2f4050; border-color: #3e5266; border-bottom-color: transparent; color: #e4eaf0; }
html.dark-mode .tab-content > .tab-pane, html.dark-mode .panel-body { background-color: transparent; }
html.dark-mode .panel, html.dark-mode .well { background-color: #293846; border-color: #3e5266; color: #a7b1c2; }
html.dark-mode .panel-default > .panel-heading { background-color: #354a5f; border-color: #3e5266; color: #e4eaf0; }
html.dark-mode .modal-content { background-color: #2f4050; color: #a7b1c2; }
html.dark-mode .modal-header, html.dark-mode .modal-footer { border-color: #3e5266; }
html.dark-mode .close { color: #e4eaf0; opacity: .6; text-shadow: none; }

/* ui-select (the lecturer/room pickers). The dropdown itself rides the
   .dropdown-menu rule above, but ui-select paints each row's text #333 and its
   hover #f5f5f5 — on dark that hides every name except the highlighted one. */
html.dark-mode .ui-select-choices-row > span { color: #a7b1c2; }
html.dark-mode .ui-select-choices-row > span:hover,
html.dark-mode .ui-select-choices-row > span:focus { background-color: #354a5f; color: #e4eaf0; }
html.dark-mode .ui-select-choices-row.active > span { color: #fff; }
html.dark-mode span.ui-select-choices-row-inner { border-bottom-color: #3e5266; }
html.dark-mode .ui-select-bootstrap > .ui-select-match > .btn,
html.dark-mode .ui-select-bootstrap .ui-select-toggle { background-color: #263544; border-color: #3e5266; color: #c4cdd8; }
html.dark-mode .ui-select-bootstrap .ui-select-match-text { color: #c4cdd8; }
html.dark-mode .ui-select-multiple.ui-select-bootstrap { background-color: #263544; border-color: #3e5266; }
html.dark-mode .ui-select-bootstrap input.ui-select-search { background-color: #263544; color: #c4cdd8; }
html.dark-mode .ui-select-container .text-muted { color: #8a97a8 !important; }

/* chosen selects */
html.dark-mode .chosen-container-single .chosen-single,
html.dark-mode .chosen-container-multi .chosen-choices { background: #263544; border-color: #3e5266; color: #c4cdd8; box-shadow: none; }
html.dark-mode .chosen-container .chosen-drop { background: #293846; border-color: #3e5266; }
html.dark-mode .chosen-container .chosen-results li { color: #a7b1c2; }
html.dark-mode .chosen-container .chosen-results li.highlighted { background: #1ab394; }
html.dark-mode .chosen-container-single .chosen-search input { background: #263544; border-color: #3e5266; color: #c4cdd8; }

/* module-specific white surfaces (AI scheduling sticky heads, grids) */
html.dark-mode #page-wrapper .ai-sticky-head { background: #253342; box-shadow: 0 4px 6px -4px rgba(0,0,0,.6); }
html.dark-mode #page-wrapper .ai-sticky-sub { background: #253342; }
html.dark-mode #page-wrapper table.ai-sticky-table > thead > tr > th { background: #293846; }
html.dark-mode .fp-statusbar { background: #253342; }

/* footer */
html.dark-mode .footer { background: #2f4050; border-color: #3e5266; color: #8a97a8; }

/* ---- dark mode: per-view <style> blocks ship LIGHT backgrounds, some with
   !important, and they load with the template AFTER first paint — which is
   exactly the "muncul dark lalu kembali terang" flash. These overrides carry
   the same specificity/!important so the template's arrival changes nothing. */
html.dark-mode #page-wrapper .lecturer-row:hover { background-color: #354a5f !important; }
html.dark-mode #page-wrapper .has-overrides td { background-color: rgba(26, 179, 148, 0.10) !important; }
html.dark-mode #page-wrapper tr.jab-group-row > td {
    background: #293846 !important; color: #e4eaf0;
    border-top-color: #3e5266 !important;
}
html.dark-mode #page-wrapper .img-circle { border-color: #3e5266; }
html.dark-mode .jab-modal { background: #2f4050; color: #a7b1c2; }
html.dark-mode .jab-modal .jab-modal-head { border-color: #3e5266; color: #e4eaf0; }
html.dark-mode .jab-modal .jab-modal-foot { background: #293846; border-color: #3e5266; }

/* INSPINIA light-gray chips (label-default d1dade) read as glare on dark */
html.dark-mode .label-default { background-color: #3e5266; color: #c4cdd8; }

/* AI assistant dock (chat panel) */
html.dark-mode .ai-assistant-dock { background: #2f4050 !important; border-left-color: #3e5266 !important; color: #a7b1c2; }
html.dark-mode .ai-assistant-dock .dock-title,
html.dark-mode .ai-assistant-dock .sidebar-title { background: #293846 !important; border-color: #3e5266 !important; color: #e4eaf0; }

/* jquery.scrollbar track/handle */
html.dark-mode .scroll-element .scroll-element_size { background-color: rgba(255,255,255,0.06) !important; }
html.dark-mode .scroll-element .scroll-bar { background-color: rgba(255,255,255,0.22) !important; }

/* KK group header rows on the per-lecturer table — was an inline background,
   which no stylesheet (dark included) can override */
#page-wrapper .lc-group-row > td { background: #eef3f8; }
html.dark-mode #page-wrapper .lc-group-row > td { background: #293846; color: #e4eaf0; }

/* ---- window chrome shared by EVERY module's menu window (.view-fit +
   INSPINIA .file-manager/.folder-list). Left light, these are the brightest
   things on a dark page: a 4px near-white rail between windows, a white
   hairline under every menu row, and #3d4d5d icons that vanish into the
   #2f4050 surface they sit on. */
html.dark-mode .view-fit { border-right-color: #3e5266; }
html.dark-mode #page-wrapper .folder-list li,
html.dark-mode #page-wrapper .category-list li { border-bottom-color: #3e5266; }
html.dark-mode #page-wrapper .folder-list li i,
html.dark-mode #page-wrapper .category-list li i { color: #8a97a8; }
html.dark-mode #page-wrapper .folder-list li a:hover i { color: #c4cdd8; }

/* ---- AI-scheduling hub (the module's own menu window). Both surfaces were
   inline styles, which no stylesheet can override — hence the classes. */
#page-wrapper .ai-hub-ay {
    background: #eef6f3; border: 1px solid #d7e8e2; border-radius: 3px; padding: 8px;
}
html.dark-mode #page-wrapper .ai-hub-ay { background: #293846; border-color: #3e5266; }
#page-wrapper .ai-hub-group-title {
    text-transform: uppercase; letter-spacing: 0.5px; font-size: 11px;
    color: #9aa2ab; margin: 12px 0 6px 2px;
}
/* the generic dark h1-h6 rule would make these section numbers shout; they stay
   quiet labels in both modes — just lifted to AA against #2f4050 */
html.dark-mode #page-wrapper .ai-hub-group-title { color: #a7b1c2; }
#page-wrapper .ai-hub-diag { border-top: 1px solid #e5e6e7; padding-top: 10px; font-size: 12px; }
html.dark-mode #page-wrapper .ai-hub-diag { border-top-color: #3e5266; }

/* ---- Constraint Assistant dock interior (views/ai-scheduling/assistantChat.php),
   rendered by this same hub template. The dock frame already goes dark; without
   these the panel inside it stays a white chat sheet with white bubbles. */
html.dark-mode .ai-assistant-chat .ac-scroll { background: #253342 !important; }
html.dark-mode .ai-assistant-chat .ac-rail { border-right-color: #3e5266 !important; }
html.dark-mode .ai-assistant-chat .ac-drawer { background: #2f4050 !important; border-right-color: #3e5266 !important; }
html.dark-mode .ai-assistant-chat .ac-sep-b { border-bottom-color: #3e5266 !important; }
html.dark-mode .ai-assistant-chat .ac-sep-t { border-top-color: #3e5266 !important; }
html.dark-mode .ai-assistant-chat .chat-assistant { background: #354a5f; color: #e4eaf0; border-color: #46607a; }
html.dark-mode .ai-assistant-chat .chat-system { background: rgba(240,173,78,0.12); color: #e0bc79; border-color: rgba(240,173,78,0.35); }
html.dark-mode .ai-assistant-chat .md-code { background: rgba(255,255,255,0.10); }
/* bootstrap's code/pre defaults (#f9f2f4 fill, #c7254e ink) — a light chip with
   near-unreadable red text once the bubble behind it is dark */
html.dark-mode #page-wrapper code,
html.dark-mode .modal-content code,
html.dark-mode .ai-assistant-dock code { background-color: rgba(255,255,255,0.10); color: #c9d4e0; }
html.dark-mode #page-wrapper pre,
html.dark-mode .modal-content pre,
html.dark-mode .ai-assistant-dock pre { background-color: #263544; border-color: #3e5266; color: #c4cdd8; }
html.dark-mode .ai-assistant-chat .md-pre { background: #263544; border-color: #3e5266; color: #c4cdd8; }
html.dark-mode .ai-assistant-chat .proposal-card { background: rgba(26,179,148,0.08); border-color: #3e5266; border-left-color: #1ab394; }
html.dark-mode .ai-assistant-chat .proposal-card.applied { background: rgba(35,198,200,0.10); }
html.dark-mode .ai-assistant-chat .proposal-card.failed { background: rgba(237,85,101,0.12); }
html.dark-mode .ai-assistant-chat .example-chip { border-color: #52697f; color: #a7b1c2; }
html.dark-mode .ai-assistant-chat .example-chip:hover { border-color: #1ab394; color: #1ab394; background: rgba(26,179,148,0.12); }
html.dark-mode .ai-assistant-chat .conv-item { border-bottom-color: #3e5266; }
html.dark-mode .ai-assistant-chat .conv-item:hover { background: #354a5f; }
html.dark-mode .ai-assistant-chat .conv-item.active { background: rgba(26,179,148,0.14); }
.ai-assistant-chat .conv-title { color: #2f4050; }
html.dark-mode .ai-assistant-chat .conv-title { color: #e4eaf0; }

/* ---- bootstrap alerts: the pastel fills (#f2dede & co) are the last big glare
   blocks left on a dark page, and their dark-red/amber text is unreadable once
   the surface behind them stops being white. Tinted at the same hue instead. */
html.dark-mode #page-wrapper .alert-danger,
html.dark-mode .modal-content .alert-danger,
html.dark-mode .ai-assistant-dock .alert-danger { background-color: rgba(237,85,101,0.12); border-color: rgba(237,85,101,0.38); color: #ef8a95; }
html.dark-mode #page-wrapper .alert-warning,
html.dark-mode .modal-content .alert-warning,
html.dark-mode .ai-assistant-dock .alert-warning { background-color: rgba(240,173,78,0.12); border-color: rgba(240,173,78,0.38); color: #e0bc79; }
html.dark-mode #page-wrapper .alert-info,
html.dark-mode .modal-content .alert-info,
html.dark-mode .ai-assistant-dock .alert-info { background-color: rgba(35,198,200,0.12); border-color: rgba(35,198,200,0.38); color: #6fd8da; }
html.dark-mode #page-wrapper .alert-success,
html.dark-mode .modal-content .alert-success,
html.dark-mode .ai-assistant-dock .alert-success { background-color: rgba(26,179,148,0.12); border-color: rgba(26,179,148,0.38); color: #4fd1b4; }

/* ---- more shared chrome that only shows up on the data-heavy windows:
   bootstrap's #d1dade badge (same glare as label-default), a bare <select>
   that never got .form-control so it kept the UA's light control colour, and
   the 2px #ddd rule bootstrap draws between stacked tbodies. */
html.dark-mode #page-wrapper .badge,
html.dark-mode .modal-content .badge { background-color: #3e5266; color: #c4cdd8; }
html.dark-mode #page-wrapper select,
html.dark-mode .modal-content select { background-color: #263544; border-color: #3e5266; color: #c4cdd8; }
html.dark-mode .table > tbody + tbody { border-top-color: #3e5266; }
/* bootstrap's contextual row/cell classes — the pastel fills (#fcf8e3 & co)
   are how the pivots flag an over-cap lecturer, so they must stay legible as
   a tint rather than turn the row into a light block */
html.dark-mode .table > tbody > tr > td.success,
html.dark-mode .table > tbody > tr.success > td { background-color: rgba(26,179,148,0.14); }
html.dark-mode .table > tbody > tr > td.info,
html.dark-mode .table > tbody > tr.info > td { background-color: rgba(35,198,200,0.14); }
html.dark-mode .table > tbody > tr > td.warning,
html.dark-mode .table > tbody > tr.warning > td { background-color: rgba(240,173,78,0.14); }
html.dark-mode .table > tbody > tr > td.danger,
html.dark-mode .table > tbody > tr.danger > td { background-color: rgba(237,85,101,0.14); }
html.dark-mode .table > tbody > tr > td.active,
html.dark-mode .table > tbody > tr.active > td { background-color: rgba(255,255,255,0.06); }
/* the fa-columns "AI Assistant" dock toggle sits in the title bar of SEVEN
   ai-scheduling windows with the same inline #676a6c — invisible on dark */
html.dark-mode #page-wrapper a[ng-click="toggleChatPane()"] { color: #a7b1c2 !important; }

/* ---- SHARED ai-scheduling surfaces. The same half-dozen shapes (a toolbar
   strip, a category header row, a soft well, a scrollable picker) were pasted
   as inline styles into constraints / room-pools / model-spec / cohorts /
   lecturer-constraints / generate / pivots. One vocabulary now, so the next
   window inherits dark mode instead of re-breaking it. Light values are the
   exact ones the inline styles carried — nothing shifts in light mode. */
/* .modal-content too: uib-modal appends to <body>, OUTSIDE #page-wrapper, so an
   id-scoped rule silently does nothing there (the Resolve window's pool strip) */
#page-wrapper .ai-panel-bar,
.modal-content .ai-panel-bar { background: #f8fafb; border: 1px solid #e7eaec; border-radius: 3px; }
html.dark-mode #page-wrapper .ai-panel-bar,
html.dark-mode .modal-content .ai-panel-bar { background: #293846; border-color: #3e5266; }
#page-wrapper .ai-panel-bar-dashed { border: 1px dashed #e7eaec; border-radius: 3px; }
html.dark-mode #page-wrapper .ai-panel-bar-dashed { border-color: #3e5266; }
#page-wrapper tr.ai-group-row { background: #f0f3f5; }
#page-wrapper tr.ai-group-row-soft { background: #f5f7f9; }
html.dark-mode #page-wrapper tr.ai-group-row,
html.dark-mode #page-wrapper tr.ai-group-row-soft { background: #293846; }
#page-wrapper td.ai-group-cell { border-top: 2px solid #d6dde2; }
html.dark-mode #page-wrapper td.ai-group-cell { border-top-color: #3e5266; }
#page-wrapper td.ai-group-cell-kk { background: #eef6f3; border-top: 2px solid #d7e8e2; font-weight: 600; }
html.dark-mode #page-wrapper td.ai-group-cell-kk { background: #293846; border-top-color: #3e5266; }
#page-wrapper tr.ai-row-open > td { background: #f9fbfd; }
html.dark-mode #page-wrapper tr.ai-row-open > td { background: #2b3a4a; }
/* id in the selector on purpose: one of these sits on a .panel-heading, and
   `.panel-default > .panel-heading` would otherwise outrank a bare class */
#page-wrapper .ai-head-teal, .modal-content .ai-head-teal { background: #f1faf7; }
html.dark-mode #page-wrapper .ai-head-teal,
html.dark-mode .modal-content .ai-head-teal { background: #293846; }
.ai-well-soft { background: #fafafa; }
html.dark-mode .ai-well-soft { background: #263544; border-color: #3e5266; }
/* soft well that also carries a border (the AI-scope boxes on Generate) —
   its own class, because .ai-picker-box + .ai-well-soft would tie on
   specificity and the later rule would silently repaint it white */
.ai-soft-box { background: #fafafa; border: 1px solid #e7eaec; border-radius: 3px; }
html.dark-mode .ai-soft-box { background: #263544; border-color: #3e5266; }
.ai-picker-box { background: #fff; border: 1px solid #e7eaec; border-radius: 3px; }
html.dark-mode .ai-picker-box { background: #263544; border-color: #3e5266; }
.ai-picker-item { border-top: 1px dashed #eee; }
html.dark-mode .ai-picker-item { border-top-color: #3e5266; }
.ai-note-teal { background: #f4fbf9; border: 1px solid #1ab394; border-radius: 4px; }
html.dark-mode .ai-note-teal { background: rgba(26,179,148,0.10); }
.ai-note-dashed { border: 1px dashed #c7d0d9; border-radius: 4px; }
html.dark-mode .ai-note-dashed { border-color: #52697f; }

/* AI scheduling — pipeline order chooser + step cards.
   Colour lives here, not in ng-style: inline hex cannot answer to
   html.dark-mode, so a hardcoded #fff card stayed white on a dark page. */
.ai-pick { border: 2px solid #e5e9ed; border-radius: 4px; padding: 9px 11px;
           cursor: pointer; background: #fff; }
.ai-pick.is-a { border-color: #1ab394; background: #f4fbf9; }
.ai-pick.is-b { border-color: #f8ac59; background: #fdf8f1; }
html.dark-mode .ai-pick { background: #2f4050; border-color: #3e5266; }
html.dark-mode .ai-pick.is-a { border-color: #1ab394; background: rgba(26,179,148,.12); }
html.dark-mode .ai-pick.is-b { border-color: #f8ac59; background: rgba(248,172,89,.12); }

.ai-step { border: 1px solid #e5e9ed; border-radius: 4px; padding: 10px 12px; background: #fff; }
.ai-step.is-done { background: #f6fafd; }
.ai-step.is-wait { opacity: .55; }
html.dark-mode .ai-step { background: #2f4050; border-color: #3e5266; }
html.dark-mode .ai-step.is-done { background: rgba(28,132,198,.12); }
#page-wrapper .ai-muted-head { color: #9aa2ab; }
html.dark-mode #page-wrapper .ai-muted-head { color: #a7b1c2; }
/* ---- Draft review: surfaces its tabs paint inline. Everything a stylesheet
   CAN reach lives here; the sparkline empty bars, the utilisation track + its
   percentage text and the Multi-Week per-weekday row tints are ng-style values
   and are handled in aiSchedulingDraftReviewCtrl.js instead. */
#page-wrapper tr.dr-head-row { background: #eef; }
html.dark-mode #page-wrapper tr.dr-head-row { background: #293846; }
#page-wrapper .dr-toolbar { background: #f8fafc; border: 1px solid #e7eaec; border-radius: 3px; }
html.dark-mode #page-wrapper .dr-toolbar { background: #293846; border-color: #3e5266; }
#page-wrapper .dr-sep-t { border-top: 1px solid #e7eaec; }
html.dark-mode #page-wrapper .dr-sep-t { border-top-color: #3e5266; }

/* Lecturer Load "Spread" bar: the TRACK is the unfilled remainder behind the
   green/red fill — one per lecturer row, so 166 pale bars was the single
   biggest glare left on that tab */
#page-wrapper .ll-bar-track { background: #eee; }
html.dark-mode #page-wrapper .ll-bar-track { background: rgba(255,255,255,0.10); }

/* "solo N" on the Lecturer Load table: informational, so a quiet slate chip —
   it must not read as an error next to the red not-eligible/over-cap labels */
#page-wrapper .ll-solo { background: #8095a8; color: #fff; font-weight: 600; }
html.dark-mode #page-wrapper .ll-solo { background: #52697f; color: #e4eaf0; }

#page-wrapper .ai-chip-gray { background: #bbb; }
/* INSPINIA paints .label text #5E5E5E, which was fine on #bbb and unreadable
   on the dark chip — the colour has to move with the background */
html.dark-mode #page-wrapper .ai-chip-gray { background: #52697f; color: #e4eaf0; }
/* Term Overview: the AI-scope drawer and the one roll-up chip that is neutral
   instead of colour-coded (the coloured three are deliberate in both modes) */
.ai-scope-panel { background: #fff; border: 1px solid #1c84c6; border-radius: 3px; }
html.dark-mode .ai-scope-panel { background: #2f4050; }
.ai-scope-head { background: #f0f7fc; border-bottom: 1px solid #d9e8f3; }
html.dark-mode .ai-scope-head { background: #293846; border-bottom-color: #3e5266; }
#page-wrapper .ai-widget-neutral { background: #f3f3f4; color: #676a6c; }
html.dark-mode #page-wrapper .ai-widget-neutral { background: #354a5f; color: #c4cdd8; }

/* ---- Draft review: the Typical Week canvas. Its surfaces are painted by
   ng-style from the controller, so a stylesheet can only reach them with
   !important — and the class hooks (.tw-alt / .tw-holiday) carry the parity
   and holiday state that used to live only inside the ng-style expression.
   Note the hour banding survives: the inline gradient paints near-transparent
   dark bands OVER whatever background-color we set, so overriding only the
   colour keeps the stripes and just re-bases them. */
html.dark-mode #page-wrapper .tw-canvas { border: 1px solid #3e5266; }
#page-wrapper .tw-canvas { border: 1px solid #e7eaec; }
html.dark-mode #page-wrapper .tw-scroll-proxy { background: #253342; }
html.dark-mode #page-wrapper .tw-scroll-proxy::-webkit-scrollbar-thumb { background: #52697f; }
html.dark-mode #page-wrapper .tw-scroll-proxy::-webkit-scrollbar-track { background: #263544; }
html.dark-mode #page-wrapper .tw-head-strip { background: #253342; border-color: #3e5266; }
html.dark-mode #page-wrapper .tw-dayhead { background: #31465a !important; border-left-color: #3e5266 !important; color: #e4eaf0; }
html.dark-mode #page-wrapper .tw-dayhead.tw-alt { background: #293846 !important; }
html.dark-mode #page-wrapper .tw-dayhead.tw-holiday { background: rgba(237,85,101,0.20) !important; color: #ef8a95 !important; }
#page-wrapper .tw-gutter { background: #fafafa; border-right: 1px solid #e7eaec; }
html.dark-mode #page-wrapper .tw-gutter { background: #293846; border-right-color: #3e5266; }
html.dark-mode #page-wrapper .tw-daycol { background-color: #2f4050 !important; border-left-color: #3e5266 !important; }
html.dark-mode #page-wrapper .tw-daycol.tw-alt { background-color: #293846 !important; }
html.dark-mode #page-wrapper .tw-daycol.tw-holiday {
    background-image: repeating-linear-gradient(-45deg, rgba(237,85,101,.13), rgba(237,85,101,.13) 12px, rgba(237,85,101,.22) 12px, rgba(237,85,101,.22) 24px) !important;
}
html.dark-mode #page-wrapper .tw-hourline { border-top-color: rgba(255,255,255,0.08) !important; }
#page-wrapper .tw-holiday-name { color: #c0392b; }
html.dark-mode #page-wrapper .tw-holiday-name { color: #ef8a95; }
#page-wrapper tr.dr-subhead-row { background: #fafafa; }
html.dark-mode #page-wrapper tr.dr-subhead-row { background: #293846; }
#page-wrapper tr.dr-holiday-row { background: #fff3cd; }
html.dark-mode #page-wrapper tr.dr-holiday-row { background: rgba(240,173,78,0.14); }

/* ---- Teaching Candidates window (views/ai-scheduling/courseCandidates.php).
   Its paint lives in the view's own <style> block keyed on the box id, so these
   need the extra class in the chain to outrank it (html.dark-mode does that).
   The chips are the volume case — ~1000 white pills per page. */
html.dark-mode #page-wrapper .cand-chip { background: #354a5f; border-color: #46607a; }
html.dark-mode #page-wrapper .cand-chip .fa-times { color: #8a97a8; }
html.dark-mode #page-wrapper tr.no-cand > td { background: rgba(237,85,101,0.10) !important; }
html.dark-mode #page-wrapper .cand-sticky-head { background: #2f4050; box-shadow: 0 4px 6px -4px rgba(0,0,0,.6); }
html.dark-mode #page-wrapper .cand-bar + .cand-bar { border-top-color: #3e5266; }
html.dark-mode #page-wrapper .cand-bar-label { color: #a7b1c2; }
html.dark-mode #page-wrapper .cand-bar-scope { background: #293846; border-bottom-color: #3e5266; }
html.dark-mode #page-wrapper table.cand-table thead th { background: #293846; box-shadow: inset 0 -1px 0 #3e5266; }
/* Direct-assignment (pins) overlay: hand-rolled, NOT a .modal-content, so none
   of the modal rules above reach it — it needs its own surfaces. */
.cand-pins-panel { background: #fff; }
html.dark-mode .cand-pins-panel { background: #2f4050; color: #a7b1c2; }

/* Step-2 allocation progress bar (term overview). Bootstrap's default track is
   #f5f5f5, which glares against the dark shell. */
.alloc-progress .progress { background-color: #eceef1; box-shadow: none; }
html.dark-mode .alloc-progress .progress { background-color: #1f2b38; }
html.dark-mode .alloc-progress .progress-bar-info { background-color: #23a5c1; }
.cand-pins-sep-b { border-bottom: 1px solid #e7eaec; }
html.dark-mode .cand-pins-sep-b { border-bottom-color: #3e5266; }
.cand-pins-sep-t { border-top: 1px solid #e7eaec; }
html.dark-mode .cand-pins-sep-t { border-top-color: #3e5266; }
.cand-pins-filter { background: #fafbfc; border-bottom: 1px solid #f1f1f1; }
html.dark-mode .cand-pins-filter { background: #293846; border-bottom-color: #3e5266; }
.cand-pins-tbody { border-top: 2px solid #edf1f4; }
html.dark-mode .cand-pins-tbody { border-top-color: #3e5266; }
.cand-team-box { background: #f9f9f9; border: 1px solid #e7eaec; }
html.dark-mode .cand-team-box { background: #263544; border-color: #3e5266; }

/* course-semester table: dark tint for zero-class rows (deliberate colors
   tc-warn/tc-locked stay) */
html.dark-mode #page-wrapper .tc-zero > td { background-color: #452f36 !important; }

/* faculty-activity rail: its Data Management buttons are painted by a <style>
   block inside the template, which the sweep never reached — they stayed light
   grey on the dark rail. #page-wrapper + class beats that block on specificity
   whatever the injection order. */
html.dark-mode #page-wrapper .faculty-admin-actions a {
    background-color: #293846; border-color: #3e5266; color: #a7b1c2;
}
html.dark-mode #page-wrapper .faculty-admin-actions a:hover {
    background-color: #354a5f; color: #e4eaf0;
}
html.dark-mode #page-wrapper .faculty-admin-header { color: #7a8b9a; }
html.dark-mode #page-wrapper .faculty-section-divider { border-top-color: #3e5266; }

html.dark-mode #page-wrapper .lib-skel-cover,
html.dark-mode #page-wrapper .lib-skel-line {
    background: linear-gradient(90deg, #2b3b4a 25%, #35485a 37%, #2b3b4a 63%);
    background-size: 400% 100%;
}
/* the detail pane hard-sets its field boxes to white via
   `.view-detail-library .well.well-sm` (0,3,0), which outranks the sweep's
   `html.dark-mode .well` — they stayed pure white on the dark pane. */
html.dark-mode #page-wrapper .view-detail-library .well.well-sm {
    background-color: #293846; border-color: #3e5266; color: #a7b1c2;
}
html.dark-mode #page-wrapper .view-detail-library label { color: #e4eaf0; }

/* required-field asterisks are inline `color:red` — pure red on the dark
   slate is barely legible; the theme's own red reads properly */
html.dark-mode #page-wrapper span[style*="color:red"] { color: #ed5565 !important; }

/* Library form: the cover preview box, a well whose white is set INLINE (a
   stylesheet !important still beats a plain inline style), and the chosen
   multiselect's selected-item chips — #f1f1f1 pills with #333 text that the
   earlier chosen sweep missed because it only covered the dropdown. */
html.dark-mode #page-wrapper .avatar-upload .avatar-preview { background-color: #253342; }
html.dark-mode #page-wrapper .well[style*="background-color:white"],
html.dark-mode #page-wrapper .well[style*="background-color: white"] {
    background-color: #293846 !important; border-color: #3e5266; color: #a7b1c2;
}
html.dark-mode #page-wrapper .chosen-container-multi .chosen-choices li.search-choice {
    background: #354a5f; border-color: #3e5266; color: #e4eaf0; background-image: none;
}
html.dark-mode #page-wrapper .chosen-container-multi .chosen-choices li.search-choice span { color: #e4eaf0; }
html.dark-mode #page-wrapper .chosen-container .chosen-choices,
html.dark-mode #page-wrapper .chosen-container input.chosen-search-input {
    background: #253342; color: #a7b1c2; border-color: #3e5266;
}

html.dark-mode #page-wrapper .lib-enrich { border-top-color: #3e5266; }
html.dark-mode #page-wrapper .lib-cand { border-bottom-color: #3e5266; }
html.dark-mode #page-wrapper .lib-cand-cover { background: #253342; }

/* library facets + generated covers keep their hues; only the chrome shifts */
html.dark-mode #page-wrapper .lib-facet { border-color: #3e5266; color: #a7b1c2; }
html.dark-mode #page-wrapper .lib-facet:hover { background: #354a5f; color: #e4eaf0; }
html.dark-mode #page-wrapper .lib-facet.active { background: #1ab394; border-color: #1ab394; color: #fff; }

/* academic-years list */
html.dark-mode #page-wrapper .ayl-current > .sem-card-head { background: #29473f; }
html.dark-mode #page-wrapper .ayl-group-head { color: #7a8b9a; }
html.dark-mode #page-wrapper .ayl-toolbar { background: #2f4050; }

/* semester setup cards (UTS amber / UAS red stay — deliberate colors) */
html.dark-mode #page-wrapper .sem-card { background: #2f4050; border-color: #3e5266; }
html.dark-mode #page-wrapper .sem-card-head { background: #293846; border-bottom-color: #3e5266; }
html.dark-mode #page-wrapper .sem-tl-track { background: #253342; }
html.dark-mode #page-wrapper .sem-tl-holiday { background: #56718a; }

/* Date pickers attach to <body>, OUTSIDE #page-wrapper — style them directly.
   Selected-day blues stay as-is (deliberate colors). */
/* angular datetime picker (PRS / proposal / every date-time field) */
html.dark-mode .date-picker-date-time { background: #2f4050; border-color: #3e5266; color: #a7b1c2; }
html.dark-mode [date-picker] th { color: #e4eaf0; }
html.dark-mode [date-picker] span:hover,
html.dark-mode [date-picker] td:hover { background: #354a5f; }
html.dark-mode [date-picker] span.disabled,
html.dark-mode [date-picker] span.disabled:hover,
html.dark-mode [date-picker] .disabled { color: #56718a; background: none; }
/* bootstrap daterangepicker (Date Range / UTS / UAS and everywhere else);
   its root already goes dark via the .dropdown-menu rule above */
html.dark-mode .daterangepicker { color: #a7b1c2; }
html.dark-mode .daterangepicker .calendar-date { background: #2f4050; border-color: #3e5266; }
html.dark-mode .daterangepicker .calendar th,
html.dark-mode .daterangepicker .calendar td { color: #a7b1c2; }
html.dark-mode .daterangepicker td.off { color: #56718a; }
html.dark-mode .daterangepicker td.disabled { color: #56718a; }
html.dark-mode .daterangepicker td.available:hover,
html.dark-mode .daterangepicker th.available:hover { background: #354a5f; }
html.dark-mode .daterangepicker td.in-range { background: #253342; color: #e4eaf0; }
html.dark-mode .daterangepicker .ranges .input-mini { background: #253342; border-color: #3e5266; color: #a7b1c2; }
html.dark-mode .daterangepicker .ranges li { background: #253342; border-color: #3e5266; color: #7ab8e0; }
html.dark-mode .daterangepicker .ranges li.active,
html.dark-mode .daterangepicker .ranges li:hover { background: #1ab394; border-color: #1ab394; color: #fff; }
html.dark-mode .daterangepicker.dropdown-menu:after { border-bottom-color: #293846; }
html.dark-mode .daterangepicker.dropdown-menu:before { border-bottom-color: #3e5266; }

/* The allocation-reason balloon carries a full explanation, not a label, so it
   needs room to breathe; the default tooltip width truncates it to a sliver. */
.ai-reason-tip .tooltip-inner {
    max-width: 420px;
    text-align: left;
    padding: 8px 10px;
    line-height: 1.45;
}
/* A 420px balloon overlaps the small badge that opened it. Once the pointer
   crosses onto the balloon the badge reports mouseleave, the tooltip hides, the
   pointer is back over the badge, and it opens again — a blink loop that made
   the text unreadable. Ignoring the pointer entirely means the badge never
   loses hover, whatever the balloon covers. Nothing inside is interactive, so
   there is nothing to lose. */
.ai-reason-tip,
.ai-reason-tip .tooltip-inner,
.ai-reason-tip .tooltip-arrow {
    pointer-events: none;
}

/* ===== AI scheduling — Generate page: one full-width row per stage =========
   The two stages used to sit side by side with an arrow between them, which
   read as an order. They are independent now, so each gets its own row and
   carries its own controls; nothing between them implies a sequence. */
.ai-stage-row { display: block; }
.ai-stage-row > .ai-step { display: block; width: 100%; }
html.dark-mode #page-wrapper .ai-stage-row > .ai-step hr { border-top-color: #3b4048 !important; }