@import url('https://fonts.googleapis.com/css2?family=Noto+Nastaliq+Urdu&display=swap');

/* ============ SZ DESIGN TOKENS (teal reskin 2026-07) ============ */
:root {
  /* legacy vars kept for reports-table (unchanged consumers) */
  --reports-background-color: #0f5c50;
  --reports-border-color: #0f5c50;
  --reports-text-color: black;

  /* chrome (dark teal — user-supplied brand codes) */
  --sz-chrome: #05282c;
  /* sidebar base (--color-sidebar) */
  --sz-chrome-2: #0c3a3f;
  /* hover / topbar gradient start (--color-sidebar-hover) */
  --sz-chrome-raised: #0c3a3f;
  /* pills on chrome */
  --sz-chrome-line: rgba(255, 255, 255, .08);
  --sz-chrome-text: rgba(255, 255, 255, .92);
  --sz-chrome-muted: #7fa2a0;

  /* brand teal (light-surface accents, table headers, focus) */
  --sz-brand: #157373;
  /* --color-accent; white =5.6:1 */
  --sz-brand-deep: #0a3f43;
  --sz-accent: #157373;
  /* active pill (--color-accent) */
  --sz-accent-hover: #158585;
  /* --color-accent-hover */
  --sz-accent-weak: #e6f5f5;
  /* --color-accent-soft */
  --sz-focus: 0 0 0 3px rgba(21, 115, 115, .32);

  /* actions & status — VIBRANT action palette (previous button colors restored,
     unified across the bg and btn dialects; chrome stays teal) */
  --sz-primary: #4e73df;
  --sz-primary-deep: #224abe;
  --sz-green: #28d17c;
  /* previous btn-success mint */
  --sz-green-deep: #19c268;
  --sz-green-text: #0b7440;
  /* vivid green, readable on white */
  --sz-red: #ff5f5f;
  /* previous btn-danger coral */
  --sz-red-deep: #e63946;
  --sz-red-vivid: #e22b12;
  /* toolbar signature red (previous) */
  --sz-red-vivid-deep: #bd240f;
  --sz-red-text: #d31204;
  /* previous text-danger (passes AA) */
  --sz-amber: #f6c23e;
  /* previous btn-warning golden */
  --sz-amber-deep: #e0a800;
  --sz-amber-text: #c2410c;
  --sz-info: #36b9cc;
  /* previous btn-info cyan */
  --sz-info-deep: #258d9c;
  --sz-info-text: #067a89;
  /* previous text-info (passes AA) */

  /* inks & surfaces */
  --sz-ink: #1f2937;
  --sz-ink-2: #4b5563;
  --sz-ink-3: #6b7280;
  /* replaces #999 text-muted; 4.8:1 */
  --sz-line: #c3d2ce;
  --sz-surface-2: #f7f9f8;

  /* ghost toolbar surfaces (settable via UI Customization) */
  --sz-ghost-ink: #11554c;
  --sz-ghost-line: #8ab8ae6b;
  --sz-ghost-line-hover: #9dc0ba;

  /* geometry & elevation */
  --sz-radius: 8px;
  /* controls */
  --sz-radius-lg: 14px;
  /* cards */
  --sz-radius-sm: 6px;
  /* badges/chips */
  --sz-shadow-1: 0 1px 3px rgba(15, 23, 42, .06);
  --sz-shadow-2: 0 4px 14px rgba(15, 23, 42, .08);
  --sz-shadow-3: 0 10px 22px rgba(15, 23, 42, .14);
}


/*ui update css 15012024*/
/* .popover base look lives in the "POPOVER (modernized)" block near EOF */

.required::after {
  content: " *";
  color: #c22f1f;
  font-weight: 600;
}

.marquee {
  font-size: 1.2em;
  line-height: 1.1em;
  color: red;
  padding: .2em
}

.marquee-bg {
  background: #d2d1d1;
  background: radial-gradient(circle, #d2d1d1 52%, #e2e1de 100%)
}

.line-break::before {
  content: "\a";
  white-space: pre
}

.event-day {
  color: #fff;
  margin: 7px;
  padding: 5px;
  min-width: 30px;
  border-radius: 5px;
  display: inline-block;
  text-align: center;
  font-weight: 500;
  vertical-align: text-top
}

fieldset {
  border: 1px solid #c7ccd3;
  border-top-color: #c7ccd3;
  border-radius: 8px;
  font-size: 12px;
  padding: 8px;
}

fieldset>legend {
  font-size: 1.2rem;
  margin: auto;
  padding: 0 4px;
  width: inherit
}

input[type=checkbox],
input[type=radio] {
  height: 20px;
  width: 22px
}

input.selection[type=checkbox],
input.selection[type=radio] {
  height: 14px;
  width: 15px;
}

.attendance-head {
  font-size: 1.2em;
  margin-bottom: 8px;
  border-bottom: 1px solid rgba(179, 176, 176, .2)
}

.bg-flash-white {
  background-color: #eef0f2
}

.bg-light-green {
  background-color: #0ce92a
}

.bg-pink {
  background-color: #e60ec2
}

.bg-dark-cyan {
  background-color: #022726
}

.result_separator {
  font-weight: bolder;
  font-size: 1.3em;
  margin-left: 2px;
  margin-right: 2px
}

.fee-status-badge {
  min-width: 80px;
}

.card-icon {
  color: #000;
  padding: 8px;
  background-color: #fff;
  border-radius: 45px;
  font-size: 1.4em
}

.card-main {
  min-height: 40vh;
}

.card_radius {
  border-radius: 12px;
  box-shadow: var(--sz-shadow-1)
}

.form-check-label {
  font-size: 20px;
  vertical-align: middle;
  text-align: center
}

/* legacy gradient tiles — detuned to deep calm duotones (same hue identity, white text kept) */
.bgg_blue {
  background-image: linear-gradient(135deg, #1d4e79, #0f2f4d);
  border-color: transparent
}

.bgg_golden {
  background-image: linear-gradient(135deg, #a97f14, #7c5c0a);
  border-color: transparent
}

.bgg_orange {
  background-image: linear-gradient(135deg, #c25a10, #92430b);
  border-color: transparent
}

.bgg_yellow {
  background-image: linear-gradient(135deg, #b8860b, #8a6508);
  border-color: transparent
}

.bgg_lemon {
  background-image: linear-gradient(135deg, #9aa30e, #6f760a);
  border-color: transparent
}

.bgg_lime_green {
  background-image: linear-gradient(135deg, #4e9e1e, #367014);
  border-color: transparent
}

.bgg_green {
  background-image: linear-gradient(135deg, #1e8e4a, #146335);
  border-color: transparent
}

.bgg_dark_green {
  background-image: linear-gradient(135deg, #10502a, #0a3a1e);
  border-color: transparent
}

.bgg_cyan {
  background-image: linear-gradient(135deg, #12808c, #0b5c65);
  border-color: transparent
}

.bgg_dark_cyan {
  background-image: linear-gradient(135deg, #0b4a47, #062f2d);
  border-color: transparent
}

.bgg_dark_blue {
  background-image: linear-gradient(135deg, #16226e, #0c1342);
  border-color: transparent
}

.bgg_pink {
  background-image: linear-gradient(135deg, #a31385, #750d60);
  border-color: transparent
}

.bgg_purple {
  background-image: linear-gradient(135deg, #4b2364, #2f1540);
  border-color: transparent
}

.bgg_red {
  background-image: linear-gradient(135deg, #b32a1e, #841e15);
  border-color: transparent
}

.bgg_critine {
  background-image: linear-gradient(135deg, #8f8c09, #666406);
  border-color: transparent
}

.bgg_oxford_blue {
  background-image: linear-gradient(135deg, #1d1d45, #101028);
  border-color: transparent
}

.bgg_flash_white {
  background-image: linear-gradient(135deg, #eef0f2, #d5dbe1);
  border-color: transparent
}

.bgg_black {
  background-image: linear-gradient(135deg, #1b1b1b, #060606);
  border-color: transparent
}

.bgg_bean {
  background-image: linear-gradient(135deg, #6e1509, #430b04);
  border-color: transparent
}

.dropdown-menu-smart {
  border: 1px solid var(--sz-line);
  box-shadow: var(--sz-shadow-2);
  border-radius: 10px
}

.dropdown-item-smart {
  width: 99%;
  padding: .2rem .5rem
}

.nav-tabs {
  border-bottom: initial;
  margin-bottom: .125rem
}

.bg-success,
.bg-success-600,
.btn-success {
  color: #fff !important;
  background-image: linear-gradient(135deg, var(--sz-green) 0, var(--sz-green-deep) 97%)
}

.text-success,
.text-success-600 {
  color: var(--sz-green-text) !important
}

.text-info,
.text-info-600 {
  color: var(--sz-info-text) !important
}

.bg-info,
.bg-info-600,
.btn-info {
  color: #fff !important;
  background-image: linear-gradient(135deg, var(--sz-info) 0, var(--sz-info-deep) 97%)
}

.text-danger,
.text-danger-600 {
  color: var(--sz-red-text) !important
}

.bg-danger,
.bg-danger-600,
.btn-danger {
  color: #fff !important;
  background-image: linear-gradient(135deg, var(--sz-red) 0, var(--sz-red-deep) 97%)
}

.text-warning,
.text-warning-600 {
  color: var(--sz-amber-text) !important
}

.bg-warning,
.bg-warning-600,
.btn-warning {
  color: #fff !important;
  background-image: linear-gradient(135deg, var(--sz-amber) 0, var(--sz-amber-deep) 97%)
}

.dropdown-page-menu {
  background: #fff;
  border: 1px solid var(--sz-ghost-line);
  border-radius: var(--sz-radius);
  padding: 8px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .05)
}

.dropdown-page-menu:hover {
  background: var(--sz-accent-weak);
  border-color: var(--sz-ghost-line-hover)
}

.dropdown-page-menu a {
  color: var(--sz-ghost-ink) !important;
  border: initial
}

.dropdown-page-menu>a>i,
.dropdown-page-menu .dropdown-btn i {
  color: var(--sz-accent) !important
}

.dropdown-page-menu>.dropdown-menu a,
.dropdown-page-menu>.dropdown-menu a>i {
  color: #000 !important
}

.dropdown-btn {
  border: none !important;
}

.table-info-section td {
  /* border-bottom:1px dotted grey; */
  padding-top: 3px;
  padding-bottom: 2px
}

.table-info-section tr td:first-child {
  font-weight: 300
}

.card>.table:last-child,
.card>[class*="table-responsive"]:last-child>.table:last-child {
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
}

/*ui update css 11052024*/
[class^="icon-"],
[class*=" icon-"] {
  font-size: 15px;
}

.ui-datepicker .ui-datepicker-title select {
  height: 3.00002rem;
}

/* Preloader Container */
#preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #ffffff;
  /* Preloader background */
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Spinner Animation */
/*.spinner {
  width: 50px;
  height: 50px;
  border: 5px solid rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  border-top-color: #3498db;
  animation: spin 1s ease-in-out infinite;
}*/

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Make the preloader responsive for smaller screens */
@media (max-width: 600px) {
  .spinner {
    width: 30px;
    height: 30px;
    border: 5px solid rgba(0, 0, 0, 0.1);
    border-radius: 50%;
    border-top-color: #3498db;
    animation: spin 1s ease-in-out infinite;
  }
}

/*////////////////////////////////////////*/
/*existing style from header*/
/*////////////////////////////////////////*/

.font-arial {
  font-family: Arial, sans-serif;
}

.urdu-text {
  font-family: 'Jameel Noori Nastaleeq', 'Noto Nastaliq Urdu', 'Arial', sans-serif;
  direction: rtl;
  /* Set text direction to right-to-left */
}

.mce-content-body {
  font-family: 'Jameel Noori Nastaleeq', 'Noto Nastaliq Urdu', 'Arial', sans-serif;
}

body {
  font-size: 0.900rem;
  line-height: 1.45;
}

.table {
  line-height: 1.35;
  /* keep list density despite the comfier body line-height */
}

.sidebar-user-card {
  padding: 0.90rem;
}

.nav-sidebar .nav-link {
  padding-top: 0.475rem;
  padding-bottom: 0.475rem;
  /* font-size: 1.1em; */
}

.table thead th,
.table tfoot th {
  border: 1px solid var(--sz-brand-deep);
  border-top: 1px solid var(--sz-brand-deep);
  background: linear-gradient(180deg, var(--sz-brand) 0, var(--sz-brand-deep) 97%);
  color: #fff;
  max-width: 500px;
}

.table td,
.table th {
  border: 1px solid #b7bcc4;
  border-top: 1px solid #b7bcc4;
  padding: .5rem .625rem;
}

.table td {
  padding: .325rem .325rem;
}

.form-control {
  border: 1px solid #d9dde3;
  /* soft neutral instead of per-load random --table-color */
  background-color: #f7f8fa;
}

.modal {
  overflow: auto !important;
  /* make the modal scrollable after closing child modal*/
}

.support-button {
  border: 1px solid gray;
  padding: 7px;
  border-radius: 5px;
  color: white;
  font-weight: bold;
}

table.reports-table td {
  color: var(--reports-text-color);
  border: 1px dotted var(--reports-border-color);
  padding: 8px 0px 8px 0px;
}

table.reports-table tr:hover {
  background-color: #eef5f3;
}

table.reports-table tr td:first-child {
  border: 1px dotted var(--reports-border-color);
  text-align: center;
}

table.reports-table tr td:nth-child(2) {
  padding-left: 20px;
}

table.reports-table tr td:nth-child(3) {
  color: white;
  text-align: center;
  background-color: var(--reports-background-color);
  border: 1px dotted white;
  transition: background-color 0.3s, transform 0.2s;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

table.reports-table tr td:nth-child(3) a {
  color: white;
  font-weight: bold;
  display: block;
}

table.reports-table td.report-header {
  color: white;
  font-weight: bold;
  padding: 8px 8px 8px 0px;
  opacity: 0.9;
  text-align: center;
  background-color: var(--reports-background-color);
  border: 1px solid var(--reports-border-color);
  padding: 12px 0px 12px 0px;
  font-size: 1.2em;
}

.text-label {
  border-radius: 4px;
  border: 1px solid orange;
  padding: 7px 7px 7px 0px;
  margin: 7px 7px 7px 0px;
  opacity: 0.9;
  display: block;
  /* height: calc(100% + 2px);*/
  line-height: calc(100% + 15px);
}

.text-label>span:first-of-type {
  color: white;
  font-weight: bold;
  padding: 8px 8px 8px 0px;
  background-color: orange;
  margin-right: 5px;
}

.text-label>span:nth-of-type(2) {
  color: orange;
  font-weight: bold;
  padding: 8px 8px 8px 0px;
  margin-left: 5px;
}

.robot-text-label {
  color: white;
  font-size: 1.1em;
  border: 1px solid var(--sz-chrome-line);
  background: linear-gradient(145deg, var(--sz-chrome-2), var(--sz-chrome));
  box-shadow: var(--sz-shadow-2);
  font-family: 'Courier New', Courier, monospace;
}

.robot-text-label>span:first-of-type {
  font-size: 0.8em;
}

.text-label>span:first-of-type::before {
  content: '';
  /* No content needed, just space */
  display: inline-block;
  /* Ensure it takes up space */
  width: 10px;
  /* Adjust width to create the desired space */
}

.text-label-red {
  border: 1px solid red;
}

.text-label-red>span:first-of-type {
  background-color: red;
}

.text-label-red>span:nth-of-type(2) {
  color: red;
  font-weight: bold;
  padding: 8px 8px 8px 0px;
  margin-left: 5px;
}

.rtl-text {
  direction: rtl;
  text-align: right;
}

#robo-text {
  display: none;
  /*hide it initially*/
}

.ui-timepicker-standard {
  z-index: 9999 !important;
}

.rounded-1 {
  border-radius: .125rem;
}

.rounded-2 {
  border-radius: .225rem;
}

.rounded-3 {
  border-radius: .325rem;
}

.rounded-4 {
  border-radius: .425rem;
}

.rounded-5 {
  border-radius: .525rem;
}

.fs-r1 {
  font-size: 0.1rem;
}

.fs-r2 {
  font-size: 0.2rem;
}

.fs-r3 {
  font-size: 0.3rem;
}

.fs-r4 {
  font-size: 0.4rem;
}

.fs-r5 {
  font-size: 0.5rem;
}

.fs-r6 {
  font-size: 0.6rem;
}

.fs-r7 {
  font-size: 0.7rem;
}

.fs-r8 {
  font-size: 0.8rem;
}

.fs-r9 {
  font-size: 0.9rem;
}

.fs-r10 {
  font-size: 1.0rem;
}

.fs-r11 {
  font-size: 1.1rem;
}

.fs-r12 {
  font-size: 1.2rem;
}

.fs-r13 {
  font-size: 1.3rem;
}

.fs-r14 {
  font-size: 1.4rem;
}

.fs-r15 {
  font-size: 1.5rem;
}

.fs-r16 {
  font-size: 1.6rem;
}

.fs-r17 {
  font-size: 1.7rem;
}

.fs-r18 {
  font-size: 1.8rem;
}

.fs-r19 {
  font-size: 1.9rem;
}

.fs-r20 {
  font-size: 2.0rem;
}

.card-dashboard {
  font-size: 0.9rem;
  border-radius: .3175rem;
}

.card-dashboard .card-header {
  padding: 0.65rem 0.4215rem !important;
}

.card-dashboard .card-title {
  font-size: 1rem;
}

.card-dashboard .list-icons-item::after {
  font-size: 1rem;
}

.card-transparent {
  display: flex;
  /* So that thumbnails are displayed next to each other */
  gap: 5px;
  /* Optional: Add some space between thumbnails */
}

.card-transparent h6 {
  width: 100%;
  font-size: 0.9rem;
  font-weight: 600;
  color: rgb(96, 96, 96);
}

.card-image {
  width: 70px;
  /* Thumbnail is 25% of the parent container's width */
  height: 70px;
  /* Set container height */
  border-radius: 50%;
  /* Makes the image circular */
  overflow: hidden;
  /* Ensures image doesn't overflow the container */
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid skyblue;
  /* Border around the image */
  box-shadow: 0 4px 12px rgba(76, 76, 175, 0.7);
  /* Outer glow */
  overflow: hidden;
}

.card-image-green {
  border: 1px solid rgb(0, 192, 0);
  /* Border around the image */
  box-shadow: 0 4px 12px rgba(75, 192, 75, 0.7);
  /* Outer glow */
}

.card-image-blue {
  border: 1px solid rgb(15, 100, 140);
  /* Border around the image */
  box-shadow: 0 0 12px rgba(15, 105, 125, 0.7);
  /* Outer glow */
}

.card-image-red {
  border: 1px solid rgb(225, 10, 10);
  /* Border around the image */
  box-shadow: 0 0 12px rgba(215, 5, 5, 0.7);
  /* Outer glow */
}

.card-image-orange {
  border: 1px solid rgb(235, 110, 10);
  /* Border around the image */
  box-shadow: 0 0 12px rgba(230, 90, 15, 0.7);
  /* Outer glow */
}

.card-thumbnail-image {
  width: 100%;
  /* Ensures image covers the container width */
  height: 100%;
  /* Ensures image covers the container height */
  object-fit: cover;
  /* Ensures the face part of the image is focused */
  transition: transform 0.3s ease;
  /* Adds a smooth zoom effect */
}

.card-image:hover .card-thumbnail-image {
  transform: scale(1.1);
  /* Zooms in on hover */
}

.scroll-container {
  position: relative;
  display: flex;
  align-items: center;
  /* Center controls vertically */
  margin-top: 3px;
  margin-bottom: 3px;
}

.horizontal-scroll {
  display: flex;
  flex-wrap: nowrap;
  /* Prevent wrapping */
  overflow-x: auto;
  /* Enable horizontal scrolling */
  scrollbar-width: none;
  /* Firefox hide scrollbar */
  -ms-overflow-style: none;
  /* IE and Edge hide scrollbar */
  -webkit-overflow-scrolling: touch;
  /* Smooth scrolling on touch devices */
  flex-grow: 1;
  /* Allow the row to take up available space */
}

.horizontal-scroll::-webkit-scrollbar {
  display: none;
  /* Optional: Hide the scrollbar for a cleaner look */
}

.scroll-control {
  position: absolute;
  /* Position controls absolutely */
  background-color: rgba(0, 0, 0, 0.2);
  color: white;
  padding: 10px;
  cursor: pointer;
  z-index: 1;
  opacity: 0;
  /* Initially hidden */
  transition: opacity 0.3s ease;
  /* Smooth transition */
  user-select: none;
  /* Prevent text selection */
}

.scroll-container:hover .scroll-control {
  opacity: 1;
  /* Show controls when hovering over the container */
}

.left-control {
  left: -10px;
  /* Position from the left */
  top: 50%;
  /* Center vertically */
  transform: translateY(-50%);
  /* Adjust for vertical centering */
}

.right-control {
  right: -10px;
  /* Position from the right */
  top: 50%;
  /* Center vertically */
  transform: translateY(-50%);
  /* Adjust for vertical centering */
}

.scroll-control:hover {
  background-color: rgba(0, 0, 0, 0.7);
}

.custom-popover {
  background-color: #f8f9fa;
  /* Your desired background color */
  color: #343a40;
  /* Text color */
  border: 1px solid #ced4da;
  /* Optional: border color */
  border-radius: 0.25rem;
  /* Optional: border radius */
}

.custom-popover .arrow {
  border-top-color: #f8f9fa;
  /* Match this color with the background color */
}

.btn-light.btn-light-grd {
  background: linear-gradient(to right, #f1f3ff, #C7D4D7);
}

.btn-light.btn-light-grd-left {
  background: linear-gradient(to left, #f1f3ff, #C7D4D7);
}

.btn-light.btn-light-grd-bottom {
  background: linear-gradient(to bottom, #f1f3ff, #e1efef);
}

.btn-light.btn-light-grd-top {
  background: linear-gradient(to top, #f1f3ff, #e1efef);
}

.bg-grd-gray {
  background: linear-gradient(#E1E2EA, lightgray);
}

.hidden-data::before {
  content: '*****';
  /* Use circles to illustrate hidden data */
  opacity: 0.5;
  letter-spacing: 2px;
}

.dot {
  display: inline-block;
  width: 5px;
  /* Size of the dot */
  height: 5px;
  /* Size of the dot */
  background-color: black;
  /* Color of the dot */
  border-radius: 50%;
  /* Makes it a circle */
  opacity: 0.5;
}

table.mwfb tr th {
  background: linear-gradient(to bottom, #F2F7F2, #EAEEEC);
  border: 1px #C7D4D7 solid;
  color: black;
  /* font-weight: bold;*/
}

table.mwfb tr td {
  background: linear-gradient(to bottom, #EAEEEC, #F8FAF9);
  border: 1px #C7D4D7 solid;
  text-align: center;
  color: black;
}

.dotted-bar-left {
  border-left: 2px dotted gray;
}

.dotted-bar-right {
  border-right: 2px dotted gray;
}

.input-group>.input-group-append:last-child>.btn:not(:last-child):not(.dropdown-toggle),
.input-group>.input-group-append:last-child>.input-group-text:not(:last-child),
.input-group>.input-group-append:not(:last-child)>.btn,
.input-group>.input-group-append:not(:last-child)>.input-group-text,
.input-group>.input-group-prepend>.btn,
.input-group>.input-group-prepend>.input-group-text {
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}

/*//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/* Modernize breadcrumb page-menu styles — ghost secondaries on the content layer */
.breadcrumb-menu a {
  color: var(--sz-ghost-ink) !important
}

.breadcrumb-menu i {
  color: var(--sz-accent) !important
}

.breadcrumb {
  padding: .025rem 0
}

.breadcrumb-line {
  padding-left: 1.125rem;
  padding-right: 1.125rem;
  border-top: 0 solid transparent;
  border-bottom: 0 solid transparent;
  line-height: 1.5 !important
}

.breadcrumb-menu {
  background-color: initial;
  background-image: none
}

.breadcrumb-menu a {
  padding-right: 10px;
  border: 0;
  border-radius: var(--sz-radius)
}

.breadcrumb-elements-item {
  padding: .625rem .5rem
}

.breadcrumb-elements-item+.breadcrumb-elements-item {
  margin-left: .2rem
}

/* toolbar cadence: one loud red primary + appealing ghost secondaries.
   Ghost = white surface, teal-tinted hairline, teal icon, deep-teal label,
   soft teal wash on hover — actions read on the CONTENT layer, not the chrome. */
.page-menu a {
  background: #fff;
  color: var(--sz-ghost-ink);
  border: 1px solid var(--sz-ghost-line);
  border-radius: var(--sz-radius);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, filter .15s ease;
  margin: 5px 2px;
  /* flex normalization: with/without .nav-item, every pill gets the same box
     (nav-tabs adds a stray line-box + margin-bottom:-1px on .nav-item links) */
  display: inline-flex;
  align-items: center;
  height: 42px;
}

.page-menu a.breadcrumb-elements-item {
  /* (0,2,1) beats .nav-tabs .nav-item's margin-bottom:-1px */
  margin: 5px 2px;
}

.page-menu a:hover {
  background: var(--sz-accent-weak);
  border-color: var(--sz-ghost-line-hover);
  box-shadow: 0 2px 6px rgba(21, 115, 115, .14);
}

.page-menu a:first-child {
  background: linear-gradient(135deg, var(--sz-red-vivid), var(--sz-red-vivid-deep));
  border-color: transparent;
}

.page-menu a:first-child:hover {
  background: linear-gradient(135deg, var(--sz-red-vivid), var(--sz-red-vivid-deep));
  filter: brightness(1.12);
}

/* the "where am I" cue on tabbed detail screens — filled pill pops against ghosts */
.page-menu a.active {
  background: var(--sz-accent);
  border-color: var(--sz-accent);
  /* box-shadow: inset 0 -3px 0 rgba(255, 255, 255, .4); */
}

.page-menu a.active:hover {
  background: var(--sz-accent-hover);
  filter: none;
}

/* filled variants (red primary, active pill) keep white ink */
.page-menu a:first-child,
.page-menu a:first-child i,
.page-menu a.active,
.page-menu a.active i {
  color: #fff !important;
}


/* Modernize breadcrumb bulk-action-menu styles — same ghost language */
.bulk-actions-menu a {
  color: var(--sz-ghost-ink) !important
}

.bulk-actions-menu i {
  color: var(--sz-accent) !important
}

.bulk-actions-menu {
  background-color: initial;
  background-image: none
}

.bulk-actions-menu a {
  padding-right: 10px;
  border: 1px solid #d0d0d047;
  border-radius: 8px;
  cursor: pointer
}

.bulk-action-menu a {
  background: #fff;
  border: 1px solid var(--sz-ghost-line);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
  margin: 5px 2px;
}

.bulk-action-menu a:hover {
  background: var(--sz-accent-weak);
  border-color: var(--sz-ghost-line-hover);
}

.bulk-action-menu a:first-child {
  background: linear-gradient(135deg, var(--sz-amber), var(--sz-amber-deep));
  border-color: transparent;
}

.bulk-action-menu a:first-child:hover {
  background: linear-gradient(135deg, var(--sz-amber), var(--sz-amber-deep));
  filter: brightness(1.08);
}

.bulk-action-menu a:first-child,
.bulk-action-menu a:first-child i {
  color: #fff !important;
}

/* Update button styles */
button,
.btn {
  /* border: none; */
  border-radius: 8px;
  padding: 12px 20px;
  font-size: 0.96rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color .15s ease, box-shadow .15s ease, filter .15s ease;
}

button:hover,
.btn:hover {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

button:focus,
.btn:focus {
  /* outline: 2px solid var(--secondary-color); */
  outline-offset: 2px;
}

/* Primary Button */
.btn-primary {
  background: linear-gradient(135deg, var(--sz-primary), var(--sz-primary-deep));
  color: #fff;
}

/* variant fills come from the contextual ladder above; hovers brighten in place */
.btn-success,
.btn-danger,
.btn-warning,
.btn-info {
  color: #fff;
}

.btn-primary:hover,
.btn-success:hover,
.btn-danger:hover,
.btn-warning:hover,
.btn-info:hover {
  filter: brightness(1.1);
}

/* Light Button */
.btn-light {
  background: #f8f9fc;
  color: #6c757d;
  border: 1px solid #d1d3e2;
}

.btn-light:hover {
  background: #e2e6ea;
  color: #5a5c69;
}

/* Dark Button */
.btn-dark {
  background: #5a5c69;
  color: #fff;
}

.btn-dark:hover {
  background: #444950;
}

/* Labeled Button */
.btn-labeled {
  display: inline-flex;
  align-items: center;
  padding: 12px 20px;
  font-size: 1.1rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  border: none;
  border-radius: 8px;
}

.btn-labeled .btn-label {
  display: inline-block;
  padding: 12px;
  margin-right: 8px;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 8px 0 0 8px;
}

.btn-labeled-primary {
  background: linear-gradient(135deg, var(--sz-primary), var(--sz-primary-deep));
  color: #fff;
}

.btn-labeled-success {
  background: linear-gradient(135deg, var(--sz-green), var(--sz-green-deep));
  color: #fff;
}

.btn-labeled-danger {
  background: linear-gradient(135deg, var(--sz-red), var(--sz-red-deep));
  color: #fff;
}

.btn-labeled-warning {
  background: linear-gradient(135deg, var(--sz-amber), #d18a08);
  color: #fff;
}

.btn-labeled-info {
  background: linear-gradient(135deg, var(--sz-info), var(--sz-info-deep));
  color: #fff;
}

.btn-labeled-primary:hover,
.btn-labeled-success:hover,
.btn-labeled-danger:hover,
.btn-labeled-warning:hover,
.btn-labeled-info:hover {
  filter: brightness(1.1);
}

.btn-labeled-left {
  padding-left: 3.72506rem;
}

.btn-labeled-right {
  padding-right: 3.72506rem;
}

.btn-labeled>b {
  position: absolute;
  top: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, .15);
  display: flex;
  align-items: center;
  line-height: 1;
  padding: 0 .7rem;
}

.btn-labeled-left>b {
  left: 0;
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
}

.btn-labeled-right>b {
  right: 0;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
}

.btn-sm {
  font-size: .75rem;
  padding: .3725rem .75rem;
}

/* Add modern card styles */
.card {
  border-radius: var(--sz-radius-lg);
  border: 1px solid var(--sz-line);
  box-shadow: var(--sz-shadow-1);
  overflow: hidden;
  /* legacy fallback */
  overflow: clip;
  /* clips radius WITHOUT creating a scroll container, so sticky thead works */
}


.card-header,
.card-footer {
  padding: 15px;
}

.card-body {
  padding: 20px;
}

.card-body.sidebar-user-card {
  padding: 10px;
}

/*////////////////////////////////////////////////////*/
/*//////////////////FORM ELEMENTS/////////////////////*/
/*////////////////////////////////////////////////////*/
/* Adjust padding to accommodate icon */
.form-group-feedback .form-control {
  padding-right: 5px;
}

.form-group-feedback-left .form-control {
  padding-left: 35px;
}

.select2-container .select2-selection--single {
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 0.9rem;
  background-color: #f9f9f9;
  /*padding: 6px 12px;
  transition: all 0.3s ease-in-out;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.05);*/
}

.select2-container .select2-selection--single .select2-selection__rendered {
  line-height: 32px;
}

.select2-container .select2-selection--single .select2-selection__arrow {
  height: 32px;
}

.select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: #aaa;
  /*  font-style: italic;*/
}

.select2-container--default .select2-selection--single .select2-selection__clear {
  display: none;
}

.select2-container--default .select2-selection--single:focus {
  border-color: var(--sz-accent);
  background-color: #fff;
  box-shadow: var(--sz-focus);
  outline: none;
}

.select2-result-user {
  display: flex;
  align-items: center;
}

.select2-result-user__image {
  margin-right: 10px;
}

.select2-result-user__meta {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.select2-result-user__title,
.select2-result-user__about {
  line-height: 1.5;
}

.select2-result-user__about {
  color: grey;
}

/* Modernize form labels */
label {
  margin-bottom: 1px;
  margin-top: 4px;
  font-size: 0.9rem;
  font-weight: 500;
}

label.text-muted {
  color: var(--sz-ink-2) !important;
  font-weight: 500;
}

/* Modernize form elements */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
textarea,
select,
textarea.form-control {
  width: 100%;
  padding: 12px 15px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 0.89rem;
  background-color: #f7f8fa;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.05);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
textarea:focus,
select:focus,
textarea.form-control:focus {
  border-color: var(--sz-accent);
  background-color: #fff;
  box-shadow: var(--sz-focus);
  outline: none;
}

input::placeholder,
textarea::placeholder {
  color: #aaa;
  /*font-style: italic;*/
}

input:disabled,
textarea:disabled,
select:disabled {
  background-color: #ececec;
  color: #999;
  cursor: not-allowed;
}

textarea {
  resize: vertical;
}

/* Center icon in input field */
.form-group-feedback {
  position: relative;
}

.form-group-feedback .form-control-feedback {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 2px;
  pointer-events: none;
  color: #aaa;
}

.form-group-feedback-left .form-control-feedback {
  right: auto;
  left: 2px;
}

select {
  height: 40px;
  /* Match input field height */
  appearance: none;
  background-image: url('data:image/svg+xml;charset=US-ASCII,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 4 5"><path fill="%23ccc" d="M2 0L0 2h4zM2 5L0 3h4z"/></svg>');
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 8px 10px;
}



/*//////////////////////////////*/
/*************TABLES ************/
/*//////////////////////////////*/
.table-transparent td,
.table-transparent th {
  border: none;
  border-top: none;
}


/*//////////////////////////////*/
/*these should be at end*/
/*//////////////////////////////*/

/* remarks text input*/
.input-container {
  position: relative;
  margin-top: 2px;
}

.input-container input {
  border: none;
  border-bottom: 1px dotted gray;
  outline: none;
  width: 100%;
  padding: 2px 0;
  font-size: 14px;
  background-color: initial;
  box-shadow: none;
  transition: none;
}

.input-container input:focus {
  background-color: initial;
  box-shadow: none;
  outline: none;
}

.input-container span {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  font-size: 16px;
  color: #999;
  pointer-events: none;
}

.input-container input:focus+span,
.input-container input:not(:placeholder-shown)+span {
  display: none;
}


.text-left {
  text-align: left !important;
  padding-left: 3px !important;
}

.scroll-x {
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
}

button.readonly {
  pointer-events: none;
  /* stops further clicks */
  opacity: 0.6;
  /* faded appearance */
  cursor: not-allowed;
}

/* ===== Class Seating Plan (Classes module) ===== */
.seat-chip {
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  color: #334155;
  font-size: 12px;
}

.seat-chip:hover {
  background: var(--sz-accent-weak);
  text-decoration: none;
}

.seat-chip-active {
  background: var(--sz-accent);
  border-color: var(--sz-accent);
  color: #fff;
}

.seat-chip-active:hover {
  background: #10605c;
  color: #fff;
}

.seating-grid-wrap {
  overflow: auto;
}

.seating-grid {
  border-collapse: separate;
  border-spacing: 8px;
  margin: 0 auto;
}

.seating-grid .seat {
  width: 120px;
  height: 64px;
  text-align: center;
  vertical-align: middle;
  border: 1px dashed #cbd5e1;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  font-size: 13px;
}

.seating-grid .seat-occupied {
  border: 1px solid #16a34a;
  background: #f0fdf4;
}

.seating-grid .seat-selectable {
  border-color: var(--sz-accent);
  background: var(--sz-accent-weak);
}

.seating-grid .seat-name {
  font-size: 11px;
  color: #64748b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 112px;
}

.seating-grid .seat-empty {
  color: #cbd5e1;
  font-size: 20px;
}

@media print {
  .no-print {
    display: none !important;
  }

  .seating-grid .seat {
    cursor: default;
  }
}

/* ============================================================
   E-EXAM (student quiz attempt) — one-question-at-a-time UI
   Scoped under .eexam-wrapper to override the Limitless/Bootstrap theme.
   ============================================================ */
.eexam-wrapper .eexam-start-icon {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #e6f5f5;
  color: #157373;
  font-size: 34px;
}

/* ---- sticky top bar ---- */
.eexam-wrapper .eexam-bar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 20px;
  background: #ffffff;
  border: 1px solid #e6e9f0;
  border-radius: 12px;
  padding: 14px 20px;
  margin-bottom: 20px;
  box-shadow: 0 4px 14px rgba(20, 30, 60, .06);
}

.eexam-wrapper .eexam-bar-title {
  font-weight: 700;
  font-size: 16px;
  color: #1f2b45;
  flex: 1;
  min-width: 0;
}

.eexam-wrapper .eexam-bar-progress {
  flex: 1.6;
  min-width: 180px;
}

.eexam-wrapper .eexam-pos {
  font-size: 13px;
  color: #5b6478;
  margin-bottom: 6px;
}

.eexam-wrapper .eexam-pos strong {
  color: #157373;
  font-size: 15px;
}

.eexam-wrapper .eexam-progress {
  height: 8px;
  border-radius: 5px;
  background: #edf0f6;
  overflow: hidden;
}

.eexam-wrapper .eexam-progress-fill {
  height: 100%;
  border-radius: 5px;
  background: linear-gradient(90deg, #157373, #2b9c8b);
  transition: width .35s ease;
}

/* ---- timer: colored badge, top-right, large ---- */
.eexam-wrapper .eexam-timer {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  /* push to the far right */
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  font-size: 22px;
  line-height: 1;
  padding: 10px 20px;
  border-radius: 12px;
  color: #fff;
  background: #157373;
  box-shadow: 0 3px 10px rgba(21, 115, 115, .25);
  white-space: nowrap;
}

.eexam-wrapper .eexam-timer>i {
  font-size: 18px;
}

.eexam-wrapper .eexam-timer.is-warning {
  background: #f59e0b;
  box-shadow: 0 3px 10px rgba(245, 158, 11, .3);
}

.eexam-wrapper .eexam-timer.is-danger {
  background: #ef4444;
  box-shadow: 0 3px 10px rgba(239, 68, 68, .35);
  animation: eexam-pulse 1s infinite;
}

@keyframes eexam-pulse {

  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.05);
  }
}

/* ---- palette (numbered jump grid) ---- */
.eexam-wrapper .eexam-palette-col>.card {
  position: sticky;
  top: 96px;
  border: 1px solid #e6e9f0;
  border-radius: 12px;
}

.eexam-wrapper .eexam-palette {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(38px, 1fr));
  gap: 10px;
}

.eexam-wrapper .eexam-pnum {
  height: 38px;
  width: 38px;
  padding: 0;
  border-radius: 9px;
  border: 1px solid #e0e4ee;
  background: #f4f6fa;
  font-weight: 700;
  font-size: 13px;
  color: #8a94a6;
  cursor: pointer;
  transition: all .12s ease;
}

.eexam-wrapper .eexam-pnum:hover {
  border-color: #b9c6e6;
  color: #5b6478;
}

/* answered = solid green */
.eexam-wrapper .eexam-pnum.is-answered {
  background: #22a35a;
  border-color: #22a35a;
  color: #fff;
}

/* current = blue ring (works whether answered or not) */
.eexam-wrapper .eexam-pnum.is-current {
  box-shadow: 0 0 0 3px rgba(21, 115, 115, .35);
  border-color: #157373;
}

.eexam-wrapper .eexam-pnum.is-blank.is-current {
  background: #e6f5f5;
  color: #157373;
}

.eexam-wrapper .eexam-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  font-size: 12px;
  color: #6b7383;
}

.eexam-wrapper .eexam-legend .dot {
  display: inline-block;
  width: 11px;
  height: 11px;
  border-radius: 3px;
  margin-right: 5px;
  vertical-align: -1px;
}

.eexam-wrapper .eexam-legend .dot-answered {
  background: #22a35a;
}

.eexam-wrapper .eexam-legend .dot-current {
  background: #157373;
}

.eexam-wrapper .eexam-legend .dot-blank {
  background: #dfe3ec;
}

/* ---- question card ---- */
.eexam-wrapper .eexam-qcard {
  border: 1px solid #e6e9f0;
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(20, 30, 60, .05);
}

.eexam-wrapper .eexam-qmeta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.eexam-wrapper .eexam-qmeta .badge {
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 6px;
  background: #eef1f7;
  color: #5b6478;
  font-weight: 700;
}

.eexam-wrapper .eexam-qtext {
  font-size: 19px;
  line-height: 1.55;
  color: #1f2b45;
  margin-bottom: 18px;
  font-weight: 600;
}

/* ---- options: each on its OWN full-width row ---- */
.eexam-wrapper .eexam-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.eexam-wrapper .eexam-option {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  border: 1.5px solid #e3e7f0;
  border-radius: 12px;
  padding: 14px 16px;
  margin: 0;
  cursor: pointer;
  transition: all .12s ease;
  background: #fff;
  font-weight: 400;
}

.eexam-wrapper .eexam-option:hover {
  border-color: #b9c6e6;
  background: #fafbff;
}

.eexam-wrapper .eexam-option.is-selected {
  border-color: #157373;
  background: #e6f5f5;
  box-shadow: 0 0 0 1px #157373 inset;
}

.eexam-wrapper .eexam-option>input[type=radio] {
  margin: 0;
  flex: none;
  width: 18px;
  height: 18px;
}

.eexam-wrapper .eexam-opt-key {
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: 7px;
  background: #eef1f7;
  color: #5b6478;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 13px;
}

.eexam-wrapper .eexam-option.is-selected .eexam-opt-key {
  background: #157373;
  color: #fff;
}

.eexam-wrapper .eexam-opt-text {
  color: #2b3550;
  font-size: 15.5px;
  flex: 1;
}

/* ---- bottom nav: single inline row ---- */
.eexam-wrapper .eexam-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
  gap: 10px;
  margin-top: 18px;
  padding: 16px 18px;
  background: #fff;
  border: 1px solid #e6e9f0;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(20, 30, 60, .04);
}

.eexam-wrapper .eexam-nav-left,
.eexam-wrapper .eexam-nav-right {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: nowrap;
}

.eexam-wrapper .eexam-nav .btn {
  border-radius: 9px;
  font-weight: 600;
}

@media (max-width:991px) {
  .eexam-wrapper .eexam-palette-col>.card {
    position: static;
  }

  .eexam-wrapper .eexam-bar {
    flex-wrap: wrap;
  }

  .eexam-wrapper .eexam-bar-progress {
    order: 3;
    flex-basis: 100%;
  }

  .eexam-wrapper .eexam-timer {
    margin-left: 0;
  }
}

/* H-9 org chart reporting tree (pure CSS, no external lib)
   Connector geometry, in three parts, because a tree needs all three and the
   original only had one:
     1. drop  - stem down from a parent card into the sibling row
     2. bus   - horizontal rail spanning the sibling row (::before on .org-children,
                which now has position:relative so it actually anchors HERE and not
                on some far-off positioned ancestor)
     3. riser - stem up from each child, tipped with an arrowhead
   The bus is inset by half a card so it stops at the outer children's risers
   rather than overhanging into empty space. */
.org-tree {
  overflow-x: auto;
  padding: 18px 10px 10px;
  --org-line: #c3c8ce;
  --org-gap: 26px;
  /* drop/riser length; arrowhead sits inside it */
}

.org-node {
  position: relative;
  text-align: center;
}

.org-card {
  display: inline-block;
  position: relative;
  min-width: 168px;
  max-width: 230px;
  padding: 9px 13px;
  border: 1px solid #d7dbe0;
  border-top: 3px solid var(--sz-accent, #157373);
  border-radius: 7px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .08);
  text-align: left;
  transition: box-shadow .15s ease, transform .15s ease;
}

.org-card:hover {
  box-shadow: 0 4px 12px rgba(15, 23, 42, .14);
  transform: translateY(-1px);
}

/* the root card reads as the top of the house */
.org-tree>.org-node>.org-card {
  border-top-width: 4px;
  background: #f8fbfb;
}

/* ---- 2. sibling row + horizontal bus ---- */
.org-children {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 20px;
  padding-top: var(--org-gap);
  flex-wrap: nowrap;
}

/* bus: only when there is more than one child (a lone child needs just a stem) */
.org-children::after {
  content: "";
  position: absolute;
  top: 0;
  left: 84px;
  right: 84px;
  border-top: 1px solid var(--org-line);
}

.org-children:has(> .org-node:only-child)::after {
  display: none;
}

/* ---- 1. drop from the parent card into the bus ---- */
.org-node>.org-children::before {
  content: "";
  position: absolute;
  top: calc(var(--org-gap) * -1);
  left: 50%;
  height: var(--org-gap);
  border-left: 1px solid var(--org-line);
}

/* ---- 3. riser from each child up to the bus, with an arrowhead ---- */
.org-children>.org-node::before {
  content: "";
  position: absolute;
  top: calc(var(--org-gap) * -1);
  left: 50%;
  height: var(--org-gap);
  border-left: 1px solid var(--org-line);
}

.org-children>.org-node::after {
  content: "";
  position: absolute;
  top: -7px;
  left: 50%;
  width: 0;
  height: 0;
  margin-left: -4px;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 6px solid var(--org-line);
}

/* virtual root: several unmanaged staff hung off one row with no parent card above them.
   There is nothing to connect UP to, so the drop stem, bus and risers are all removed and
   the row simply reads as a set of co-equal tops. */
.org-node-virtual>.org-children {
  padding-top: 0;
}

.org-node-virtual>.org-children::before,
.org-node-virtual>.org-children::after,
.org-node-virtual>.org-children>.org-node::before,
.org-node-virtual>.org-children>.org-node::after {
  display: none;
}

.org-name {
  font-weight: 600;
  color: #1e293b;
  line-height: 1.25;
}

.org-meta {
  font-size: 11px;
  color: #64748b;
  margin-top: 2px;
  line-height: 1.35;
}

.org-count {
  display: inline-block;
  margin-top: 5px;
  padding: 1px 7px;
  border-radius: 10px;
  background: #eef4f4;
  color: #157373;
  font-size: 10px;
  font-weight: 600;
}

/* on narrow screens stack children vertically with an L-shaped rail, which stays
   legible where a wide horizontal row would just scroll off */
@media (max-width: 767.98px) {
  .org-children {
    display: block;
    padding-top: 12px;
    padding-left: 26px;
    text-align: left;
  }

  .org-children::after,
  .org-children>.org-node::after {
    display: none;
  }

  .org-node>.org-children::before {
    top: 0;
    left: 12px;
    height: 100%;
  }

  .org-children>.org-node {
    padding: 6px 0;
  }

  .org-children>.org-node::before {
    top: 50%;
    left: -14px;
    width: 14px;
    height: 0;
    border-left: 0;
    border-top: 1px solid var(--org-line);
  }
}

/* ===== H-10 HR Dashboard (modern) ===== */
.hrdash .hr-tiles {
  margin-bottom: 2px;
}

.hrdash .hr-tile {
  position: relative;
  overflow: hidden;
  border: 0;
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(11, 11, 11, .06);
  transition: transform .12s ease, box-shadow .12s ease;
}

.hrdash .hr-tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(11, 11, 11, .10);
}

.hrdash .hr-tile::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--accent, #157373);
}

.hrdash .hr-tile .card-body {
  padding: 16px 16px 14px 18px;
}

.hrdash .hr-tile-ico {
  position: absolute;
  right: 12px;
  top: 12px;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--accent, #157373) 12%, transparent);
  color: var(--accent, #157373);
}

.hrdash .hr-tile-ico i {
  font-size: 16px;
}

.hrdash .hr-tile-val {
  font-size: 26px;
  font-weight: 700;
  line-height: 1.1;
  color: #0b0b0b;
}

.hrdash .hr-tile-val-sm {
  font-size: 20px;
}

.hrdash .hr-tile-unit {
  font-size: 13px;
  font-weight: 600;
  color: #898781;
  margin-left: 2px;
}

.hrdash .hr-tile-lbl {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: #898781;
  margin-top: 2px;
}

.hrdash .hr-charts .card,
.hrdash .hr-alerts .card {
  border: 0;
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(11, 11, 11, .06);
}

.hrdash .hr-chart .card-header,
.hrdash .hr-alert .card-header {
  background: transparent;
  border-bottom: 1px solid #ecebe6;
  padding: 12px 16px;
}

.hrdash .hr-chart .card-title,
.hrdash .hr-alert .card-title {
  font-size: 13px;
  font-weight: 600;
  color: #52514e;
}

.hrdash .hr-plot {
  height: 260px;
}

.hrdash .hr-plot-lg {
  height: 300px;
}

.hrdash .hr-nodata {
  text-align: center;
  color: #898781;
  padding: 90px 0;
  margin: 0;
  font-size: 13px;
}

.hrdash .hr-alert {
  position: relative;
}

.hrdash .hr-alert .card-header .card-title i {
  color: var(--accent, #157373);
}

.hrdash .hr-alert-win {
  font-size: 10px;
  font-weight: 600;
  color: #898781;
  background: #f0efec;
  border-radius: 10px;
  padding: 1px 7px;
  margin-left: 6px;
  vertical-align: middle;
}

.hrdash .hr-alert .card-body {
  padding: 6px 16px 12px;
}

.hrdash .hr-alert-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 0;
  border-bottom: 1px solid #f2f1ec;
  font-size: 13px;
}

.hrdash .hr-alert-row:last-child {
  border-bottom: 0;
}

.hrdash .hr-alert-name {
  font-weight: 500;
  color: #0b0b0b;
}

.hrdash .hr-alert-when {
  color: #52514e;
  white-space: nowrap;
  font-size: 12px;
}

.hrdash .hr-alert-empty {
  color: #898781;
  padding: 16px 0;
  margin: 0;
  text-align: center;
  font-size: 13px;
}

/* Highcharts runs in styled mode here — series colours come from .highcharts-color-N CSS
   classes, NOT the JS `colors`/point.color. Re-map those classes to the dataviz palette,
   scoped to the HR dashboard so no other chart is affected. */
.hrdash .highcharts-color-0 {
  fill: #157373;
  stroke: #157373;
}

.hrdash .highcharts-color-1 {
  fill: #1baf7a;
  stroke: #1baf7a;
}

.hrdash .highcharts-color-2 {
  fill: #eda100;
  stroke: #eda100;
}

.hrdash .highcharts-color-3 {
  fill: #4a3aa7;
  stroke: #4a3aa7;
}

.hrdash .highcharts-color-4 {
  fill: #e34948;
  stroke: #e34948;
}

.hrdash .highcharts-color-5 {
  fill: #e87ba4;
  stroke: #e87ba4;
}

.hrdash .highcharts-color-6 {
  fill: #eb6834;
  stroke: #eb6834;
}

.hrdash .highcharts-color-7 {
  fill: #008300;
  stroke: #008300;
}

/* pie/donut slice borders stay white for the 2px surface gap */
.hrdash .highcharts-pie-series .highcharts-point {
  stroke: #fff;
  stroke-width: 2px;
}

/* semantic series: joiners = good (green), leavers = critical (red) regardless of series index.
   column points are <path> here; target the group so it beats the .highcharts-color-N rule. */
.hrdash .hr-series-good .highcharts-point {
  fill: #0ca30c !important;
  stroke: #0ca30c !important;
}

.hrdash .hr-series-crit .highcharts-point {
  fill: #d03b3b !important;
  stroke: #d03b3b !important;
}

/* leaver-type donut: warm loss ramp (red / orange / amber) */
.hrdash .hr-leaver-slice-0 {
  fill: #e34948;
  stroke: #fff;
}

.hrdash .hr-leaver-slice-1 {
  fill: #eb6834;
  stroke: #fff;
}

.hrdash .hr-leaver-slice-2 {
  fill: #eda100;
  stroke: #fff;
}

/* dark mode */
:root[data-theme="dark"] .hrdash .hr-tile-val,
:root[data-theme="dark"] .hrdash .hr-alert-name {
  color: #fff;
}

:root[data-theme="dark"] .hrdash .hr-chart .card-header,
:root[data-theme="dark"] .hrdash .hr-alert .card-header {
  border-bottom-color: #2c2c2a;
}

:root[data-theme="dark"] .hrdash .hr-alert-row {
  border-bottom-color: #232321;
}

:root[data-theme="dark"] .hrdash .hr-alert-win {
  background: #232321;
}

/* Training Center — click-to-play poster (defers heavy YouTube iframe until play) */
.training-poster {
  display: flex;
  align-items: center;
  justify-content: center;
  background-size: cover;
  background-position: center;
  background-color: #000;
  cursor: pointer;
  text-decoration: none;
}

.training-poster:hover {
  text-decoration: none;
}

.training-poster .training-play {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: rgba(0, 0, 0, .6);
  color: #fff;
  font-size: 22px;
  transition: transform .15s ease, background .15s ease;
}

.training-poster:hover .training-play {
  background: #e62117;
  transform: scale(1.08);
}

.training-desc {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Contextual training-help widget (footer) */
.training-help-fab {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 1030;
  border-radius: 24px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .2);
}

.training-help-panel {
  position: fixed;
  right: 18px;
  bottom: 70px;
  z-index: 1030;
  width: 340px;
  max-width: calc(100vw - 36px);
  max-height: 70vh;
  overflow: auto;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, .25);
}

.training-help-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: var(--sz-brand);
  color: #fff;
  font-weight: 600;
  border-radius: 8px 8px 0 0;
  position: sticky;
  top: 0;
}

.training-help-body {
  padding: 12px 14px;
}

.training-help-item {
  margin-bottom: 14px;
}

:root[data-theme="dark"] .training-help-panel {
  background: #232321;
  border-color: #333;
  color: #eee;
}

/* ============================================================
   STUDENT DASHBOARD — modern refresh (2026-07)
   ============================================================ */
/* modern stat tiles */
.sz-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

/* Wider tiles for dashboards whose labels/sub-lines are longer than one short word.
   At the default 180px minimum a 6-tile row lands at ~190px each, which wraps labels
   like "Active Students" onto two lines and pushes that tile's value below its
   neighbours'. 230px caps a full-width row at 4-5 tiles so the text fits on one line.
   Opt-in (`sz-stats sz-stats-wide`) — .sz-stats is shared by ~40 views across BOTH
   apps, so the base grid is deliberately left alone. */
.sz-stats-wide {
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

.sz-stat {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 4px 14px rgba(17, 24, 39, .06);
  border: 1px solid #eef1f5;
  text-decoration: none;
  color: inherit;
  transition: transform .15s ease, box-shadow .15s ease;
  overflow: hidden;
}

.sz-stat:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 22px rgba(17, 24, 39, .12);
  text-decoration: none;
  color: inherit;
}

.sz-stat .sz-ic {
  flex: 0 0 46px;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: #fff;
}

.sz-stat .sz-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.sz-stat .sz-label {
  display: block;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #8a93a2;
  font-weight: 600;
}

.sz-stat .sz-value {
  display: block;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.15;
  color: #1f2937;
}

.sz-stat .sz-sub {
  display: block;
  font-size: .72rem;
  color: #9aa3b2;
}

.sz-stat .sz-sub.sz-alert {
  color: #e53935;
  font-weight: 600;
}

.sz-stat.sz-danger .sz-value {
  color: #e53935;
}

.sz-ic-primary {
  background: linear-gradient(135deg, #2b9c8b, var(--sz-accent));
}

.sz-ic-success {
  background: linear-gradient(135deg, #43c463, #2ea24d);
}

.sz-ic-warning {
  background: linear-gradient(135deg, #ffb547, #f7911e);
}

.sz-ic-danger {
  background: linear-gradient(135deg, #ff6a6a, #e53935);
}

.sz-ic-info {
  background: linear-gradient(135deg, #4fc3f7, #2196f3);
}

.sz-ic-purple {
  background: linear-gradient(135deg, #a679f0, #7c4dff);
}

/* unified modern card + header */
.sz-card {
  background: #fff;
  border-radius: 14px;
  border: 1px solid #eef1f5;
  box-shadow: 0 4px 14px rgba(17, 24, 39, .05);
  margin-bottom: 18px;
  overflow: hidden;
}

.sz-card .sz-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  font-weight: 600;
  color: #374151;
  border-bottom: 1px solid #f0f2f6;
  background: #fbfcfe;
}

.sz-card .sz-head .sz-head-ic {
  color: var(--sz-accent);
}

.sz-card .sz-cbody {
  padding: 16px;
}

/* academic metric row */
.sz-metric {
  text-align: center;
  padding: 6px 4px;
}

.sz-metric .sz-m-label {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: #9aa3b2;
  font-weight: 600;
}

.sz-metric .sz-m-value {
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1.15;
}

.sz-metric .sz-m-sub {
  font-size: .72rem;
  color: #9aa3b2;
}

.sz-progress {
  height: 8px;
  border-radius: 20px;
  background: #eef1f5;
  overflow: hidden;
}

.sz-progress>span {
  display: block;
  height: 100%;
  border-radius: 20px;
  background: linear-gradient(90deg, #2b9c8b, var(--sz-accent));
}

/* enrollment / profile card */
.sz-profile {
  text-align: center;
  padding: 20px 16px 10px;
  background: linear-gradient(135deg, var(--sz-chrome-2), var(--sz-chrome));
  color: #fff;
}

.sz-profile img {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid rgba(255, 255, 255, .18);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .25);
}

.sz-profile .sz-p-name {
  font-size: 1.15rem;
  font-weight: 700;
  margin-top: 10px;
}

.sz-profile .sz-p-sub {
  font-size: .82rem;
  opacity: .8;
}

.sz-profile .sz-p-chip {
  display: inline-block;
  margin-top: 8px;
  padding: 3px 12px;
  border-radius: 20px;
  background: rgba(255, 255, 255, .14);
  font-size: .75rem;
}

.sz-info {
  list-style: none;
  margin: 0;
  padding: 6px 4px;
}

.sz-info li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: .86rem;
}

.sz-info li:nth-child(odd) {
  background: #f7f9fc;
}

.sz-info li .sz-k {
  color: #8a93a2;
  font-weight: 500;
}

.sz-info li .sz-v {
  color: #374151;
  font-weight: 600;
  text-align: right;
}

/* tables inside modern cards — light header, no dark-blue */
.sz-card table thead th {
  background: #f4f6fa !important;
  color: #5a6472 !important;
  border-bottom: 2px solid #e6eaf0 !important;
  border-top: 0 !important;
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .02em;
}

.sz-card table td {
  border-top-color: #f0f2f6 !important;
}

/* Fix: a flush-bottom table (in .sz-cbody.p-0, or directly in the card) whose
   .table-responsive wrapper has overflow:auto is NOT clipped by the card's rounded
   corners, so the last row's square bottom corners bleed past the card radius.
   Round the last row's outer cells to match the card and drop the trailing border.
   We deliberately do NOT touch .table-responsive's overflow so horizontal scroll on
   wide tables still works. Software-wide — every flush-bottom table in a .sz-card. */
.sz-card .sz-cbody.p-0:last-child table tbody tr:last-child td,
.sz-card>.table-responsive:last-child table tbody tr:last-child td,
.sz-card>table:last-child tbody tr:last-child td {
  border-bottom: 0 !important;
}

.sz-card .sz-cbody.p-0:last-child table tbody tr:last-child td:first-child,
.sz-card>.table-responsive:last-child table tbody tr:last-child td:first-child,
.sz-card>table:last-child tbody tr:last-child td:first-child {
  border-bottom-left-radius: 14px;
}

.sz-card .sz-cbody.p-0:last-child table tbody tr:last-child td:last-child,
.sz-card>.table-responsive:last-child table tbody tr:last-child td:last-child,
.sz-card>table:last-child tbody tr:last-child td:last-child {
  border-bottom-right-radius: 14px;
}

/* small service/indicator rows already styled inline; give the today-classes chips a look */
.sz-chip {
  border: 1px solid #e6eaf0;
  border-radius: 10px;
  padding: 8px 12px;
  min-width: 150px;
  background: #fbfcfe;
}

/* Compact status pill for table cells / inline labels.
   NOT a .sz-chip modifier: .sz-chip carries min-width:150px for the today-classes rows, which is
   far too wide for a one-word status inside a table. Additive only — no existing rule changes. */
.sz-pill {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 20px;
  font-size: .74rem;
  font-weight: 600;
  line-height: 1.6;
  border: 1px solid #e6eaf0;
  background: #f4f6fa;
  color: #4b5563;
  white-space: nowrap;
}

.sz-pill-success {
  background: #e8f6f1;
  border-color: #bfe6da;
  color: #0f7a5f;
}

.sz-pill-danger {
  background: #fdeceb;
  border-color: #f6c9c6;
  color: #b42318;
}

.sz-pill-info {
  background: #e9f2fd;
  border-color: #c5dcf7;
  color: #175cd3;
}

.sz-pill-warning {
  background: #fef4e6;
  border-color: #f8dcae;
  color: #b25e09;
}

/* family portal: selected-child highlight + all-children switcher strip */
.sz-card-active {
  box-shadow: 0 0 0 2px var(--sz-accent) inset;
}

.sz-child-strip {
  gap: 8px;
}

.sz-child-chip {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px 5px 5px;
  border-radius: 999px;
  background: #eef2f7;
  color: #334155;
  font-size: .85rem;
  text-decoration: none;
  border: 1px solid transparent;
}

.sz-child-chip:hover {
  background: #e2e8f0;
  color: #1e293b;
}

.sz-child-chip.sz-chip-active {
  background: var(--sz-accent);
  color: #fff;
}

:root[data-theme="dark"] .sz-stat,
:root[data-theme="dark"] .sz-card {
  background: #232321;
  border-color: #333;
}

:root[data-theme="dark"] .sz-card .sz-head {
  background: #2a2a28;
  border-color: #3a3a37;
  color: #eee;
}

:root[data-theme="dark"] .sz-info li:nth-child(odd) {
  background: #2a2a28;
}

/* attendance report — modern */
.sz-att-hero {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 4px 4px 12px;
}

.sz-ring {
  position: relative;
  flex: 0 0 88px;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: conic-gradient(var(--ring) calc(var(--pct)*1%), #eef1f5 0);
}

.sz-ring::after {
  content: "";
  position: absolute;
  inset: 9px;
  border-radius: 50%;
  background: #fff;
}

.sz-ring .sz-ring-val {
  position: relative;
  z-index: 1;
  font-size: 1.05rem;
  font-weight: 700;
  color: #1f2937;
  line-height: 1;
}

.sz-ring .sz-ring-lbl {
  position: relative;
  z-index: 1;
  font-size: .55rem;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: #9aa3b2;
  margin-top: 3px;
}

.sz-att-hero .sz-att-meta {
  min-width: 0;
}

.sz-att-hero .sz-att-today {
  font-size: .8rem;
  color: #6b7280;
}

.sz-att-hero .sz-att-today .badge {
  font-size: .78rem;
}

.sz-att-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 6px;
}

.sz-att-stat {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 10px;
  background: #f7f9fc;
}

.sz-att-stat .sz-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex: 0 0 10px;
}

.sz-att-stat .sz-as-k {
  flex: 1;
  font-size: .8rem;
  color: #6b7280;
}

.sz-att-stat .sz-as-v {
  font-weight: 700;
  color: #1f2937;
}

.sz-dot-present {
  background: #43A047;
}

.sz-dot-absent {
  background: #E53935;
}

.sz-dot-late {
  background: #FB8C00;
}

.sz-dot-leave {
  background: #1E88E5;
}

:root[data-theme="dark"] .sz-ring::after {
  background: #232321;
}

:root[data-theme="dark"] .sz-att-stat {
  background: #2a2a28;
}

/* card header with tabs (e.g. Daily / By Subject) */
.sz-head.sz-head-tabs {
  justify-content: space-between;
}

.sz-tabs {
  display: inline-flex;
  gap: 4px;
  background: #eef1f5;
  border-radius: 20px;
  padding: 3px;
}

.sz-tabs a {
  font-size: .74rem;
  font-weight: 600;
  color: #6b7280;
  padding: 4px 12px;
  border-radius: 16px;
  cursor: pointer;
  text-decoration: none;
  transition: all .15s;
}

.sz-tabs a.active {
  background: #fff;
  color: var(--sz-accent);
  box-shadow: 0 1px 3px rgba(17, 24, 39, .1);
}

.sz-tabpane {
  display: none;
}

.sz-tabpane.active {
  display: block;
}

/* subject attendance rows */
.sz-subatt {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sz-subatt li {
  padding: 8px 2px;
  border-bottom: 1px solid #f0f2f6;
}

.sz-subatt li:last-child {
  border-bottom: 0;
}

.sz-subatt .sz-sa-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: .85rem;
  margin-bottom: 4px;
}

.sz-subatt .sz-sa-name {
  font-weight: 600;
  color: #374151;
}

.sz-subatt .sz-sa-pct {
  font-weight: 700;
}

.sz-subatt .sz-sa-bar {
  height: 6px;
  border-radius: 20px;
  background: #eef1f5;
  overflow: hidden;
}

.sz-subatt .sz-sa-bar>span {
  display: block;
  height: 100%;
  border-radius: 20px;
}

:root[data-theme="dark"] .sz-tabs {
  background: #2a2a28;
}

:root[data-theme="dark"] .sz-tabs a.active {
  background: #1d2438;
  color: #7fb0ff;
}

/* attendance calendar — compact dot marks + cleaner grid */
.sz-att-cal .fc-toolbar.fc-header-toolbar {
  margin-bottom: 8px;
}

.sz-att-cal .fc-toolbar h2 {
  font-size: 1rem;
  font-weight: 600;
  color: #374151;
}

.sz-att-cal .fc-button {
  background: #f4f6fa;
  border: 1px solid #e6eaf0;
  color: #5a6472;
  box-shadow: none;
  text-shadow: none;
  height: auto;
  padding: 4px 10px;
  border-radius: 8px;
}

.sz-att-cal .fc-button:hover {
  background: #e9edf3;
}

.sz-att-cal .fc-day-header {
  font-size: .62rem;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: #9aa3b2;
  font-weight: 600;
  padding: 6px 0;
  border-color: #eef1f5;
}

.sz-att-cal .fc-day-grid-container {
  overflow: visible !important;
}

.sz-att-cal .fc td,
.sz-att-cal .fc th {
  border-color: #f0f2f6;
}

.sz-att-cal .fc-day-number {
  font-size: .82rem;
  color: #4b5563;
  padding: 4px 6px 0;
}

.sz-att-cal .fc-today {
  background: var(--sz-accent-weak) !important;
}

.sz-att-cal .fc-other-month .fc-day-number {
  color: #c7ccd4;
}

/* one centered colour pip per marked day; hide the default event box */
.sz-att-cal .fc-day-grid-event {
  margin: 2px auto 0;
  padding: 0;
  text-align: center;
  background: transparent !important;
  border: 0 !important;
}

.sz-att-cal .fc-day-grid-event .fc-content {
  padding: 0;
}

.sz-att-pip {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
}

.sz-att-cal .fc-event:hover {
  background: transparent !important;
}

/* legend */
.sz-att-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: 10px;
  font-size: .72rem;
  color: #6b7280;
}

.sz-att-legend span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.sz-att-legend .sz-dot {
  width: 9px;
  height: 9px;
}

:root[data-theme="dark"] .sz-att-cal .fc-day-number {
  color: #e5e7eb;
}

:root[data-theme="dark"] .sz-att-cal .fc-button {
  background: #2a2a28;
  border-color: #3a3a37;
  color: #cbd0d6;
}

/* /student dashboard refresh */

/* dashboard section band header — groups a dashboard into labeled areas */
.sz-section {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 26px 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid #e8ecf1;
}

.sz-section:first-child {
  margin-top: 4px;
}

.sz-section .sz-sec-bar {
  flex: 0 0 4px;
  width: 4px;
  height: 22px;
  border-radius: 4px;
  background: var(--sz-brand);
}

.sz-section.sz-sec-warn .sz-sec-bar {
  background: #f59e0b;
}

.sz-section.sz-sec-info .sz-sec-bar {
  background: #6366f1;
}

.sz-section .sz-sec-ic {
  font-size: 17px;
  color: #64748b;
}

.sz-section .sz-sec-title {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .3px;
  text-transform: uppercase;
  color: #334155;
  margin: 0;
}

.sz-section .sz-sec-note {
  font-size: 12px;
  color: #94a3b8;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}

.sz-section .sz-sec-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* scope chip — signals a whole band is date/context scoped */
.sz-scope {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  background: var(--sz-accent-weak);
  color: #0f5d5d;
  border: 1px solid #cfe8e6;
}

.sz-scope .icon-calendar3,
.sz-scope [class^="icon-"] {
  font-size: 12px;
}

.sz-scope.sz-scope-live {
  background: #ecfdf5;
  color: #047857;
  border-color: #d1fae5;
}

:root[data-theme="dark"] .sz-section {
  border-bottom-color: #333;
}

:root[data-theme="dark"] .sz-section .sz-sec-title {
  color: #e5e7eb;
}

:root[data-theme="dark"] .sz-scope {
  background: #26263a;
  color: #a5b4fc;
  border-color: #33334d;
}

:root[data-theme="dark"] .sz-scope.sz-scope-live {
  background: #16281f;
  color: #6ee7b7;
  border-color: #1f3b2c;
}

/* /dashboard section band header */

/* ============ A11Y & MOTION BASE (teal reskin) ============ */
.btn:focus-visible,
button:focus-visible,
a:focus-visible,
.form-control:focus-visible,
select:focus-visible,
.nav-link:focus-visible,
.breadcrumb-elements-item:focus-visible {
  outline: 2px solid var(--sz-accent) !important;
  /* !important beats main.css .btn:focus{outline:0} */
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ===== CHROME: SIDEBAR (teal) ===== */
.sidebar-dark {
  background-color: var(--sz-chrome);
  color: var(--sz-chrome-text);
}

.sidebar-dark .sidebar-content {
  background-color: var(--sz-chrome);
}

.sidebar-dark .card {
  background-color: transparent;
  box-shadow: none;
  border: 0;
}

.sidebar-dark .sidebar-user,
.sidebar-dark .sidebar-mobile-toggler {
  background-color: var(--sz-chrome);
  /* exact match with sidebar (user feedback) */
  border-color: var(--sz-chrome-line);
}

/* nav links become inset pills */
.sidebar-dark .nav-sidebar .nav-link {
  margin: 2px 10px;
  border-radius: 9px;
  color: rgba(255, 255, 255, .78);
  transition: background-color .15s ease, color .15s ease;
}

.sidebar-dark .nav-sidebar .nav-link:hover {
  background-color: var(--sz-chrome-2);
  color: #fff;
}

/* active = filled teal pill (user's reference image) */
.sidebar-dark .nav-sidebar>.nav-item>.nav-link.active,
.sidebar-dark .nav-sidebar .nav-group-sub .nav-link.active {
  background-color: var(--sz-accent);
  color: #fff;
}

.sidebar-dark .nav-sidebar>.nav-item>.nav-link.active:hover,
.sidebar-dark .nav-sidebar .nav-group-sub .nav-link.active:hover {
  background-color: var(--sz-accent-hover);
}

.sidebar-dark .nav-sidebar>.nav-item-open>.nav-link:not(.disabled) {
  background-color: var(--sz-chrome-2);
  color: #fff;
}

.sidebar-dark .nav-item-header {
  color: var(--sz-chrome-muted);
}

.sidebar-dark .nav-item-header>div {
  color: var(--sz-chrome-muted);
}

.sidebar-dark .nav-sidebar .nav-group-sub {
  background-color: rgba(0, 0, 0, .18);
}

.sidebar-dark .nav-sidebar .nav-group-sub .nav-link {
  margin: 1px 10px 1px 16px;
}

/* identity block extras */
.sidebar-dark .support-button {
  border: 1px solid var(--sz-chrome-line);
  background: var(--sz-chrome-raised);
  border-radius: 8px;
}

.sidebar-dark .plan-locked {
  color: rgba(255, 255, 255, .45);
}

/* ===== CHROME: NAVBAR (teal, near-variant with subtle gradient) ===== */
.navbar-dark {
  background: linear-gradient(180deg, var(--sz-chrome-2) 0%, var(--sz-chrome) 100%);
  border-bottom: 1px solid var(--sz-chrome-line);
}

.navbar-dark .navbar-nav-link {
  color: rgba(255, 255, 255, .85);
}

.navbar-dark .navbar-nav-link:hover,
.navbar-dark .navbar-nav-link:focus {
  color: #fff;
  background-color: rgba(255, 255, 255, .07);
  border-radius: 8px;
}

/* plan strip / clock legibility on dark teal */
.navbar-dark .navbar-text,
.navbar-dark .navbar-text .text-muted {
  color: rgba(255, 255, 255, .66) !important;
}

/* ===== TABLES: sticky brand header + scanning aids =====
   The list pane scrolls vertically (data-grid pattern) so the first thead pins
   inside it; the grand-total second thead deliberately does NOT stick. */
.card>.table-responsive {
  max-height: calc(100vh - 90px);
  overflow-y: auto;
}

.table thead:first-of-type th {
  position: sticky;
  top: 0;
  z-index: 3;
  /* collapsed-border + sticky artifact fix: the boundary border below the header
     is resolved per-cell against td's 1px light border and renders as white
     slivers under SOME cells at subpixel zoom. A wider dark border wins the
     collapse conflict, and the inset shadow paints WITH the sticky cell. */
  border-bottom: 2px solid var(--sz-brand-deep);
  box-shadow: inset 0 -2px 0 var(--sz-brand-deep);
}

.table tbody tr:hover td {
  background-color: #eef5f4;
}

.table td,
.sz-value,
.sz-m-value,
.table tfoot th {
  font-variant-numeric: tabular-nums;
}

/* claim the free hook: the filter card reads recessed, not like a content card */
.card.search-area {
  background: var(--sz-surface-2);
  box-shadow: var(--sz-shadow-1);
  border: 1px solid var(--sz-line);
}

.card.search-area .card-body {
  padding: 14px 20px;
}

/* ===== STATUS: one badge look for both dialects ===== */
.badge:not(.badge-mark) {
  border-radius: var(--sz-radius-sm);
  font-weight: 600;
  padding: .3125rem .5rem;
}

.badge.badge-pill {
  border-radius: 999px;
}

.badge.bg-warning,
.badge-warning {
  background: var(--sz-amber) !important;
  background-image: none !important;
  color: #713f12 !important;
}

.badge-primary,
.badge.bg-primary {
  background-color: var(--sz-accent) !important;
  color: #fff;
}

/* AA muted text — dark-chrome contexts excepted */
.text-muted {
  color: var(--sz-ink-3) !important;
}

.navbar-dark .navbar-text .text-muted,
.sidebar-dark .text-muted {
  color: rgba(255, 255, 255, .66) !important;
}

/* ===== MODALS: semantic accent bar, calm header (color language kept) ===== */
.modal-header[class*="bg-"] {
  background: #fff !important;
  background-image: none !important;
  color: var(--sz-ink) !important;
  border-bottom: 1px solid var(--sz-line);
  border-top: 4px solid var(--sz-accent);
  padding: 14px 20px;
}

.modal-header.bg-success {
  border-top-color: var(--sz-green);
}

.modal-header.bg-danger {
  border-top-color: var(--sz-red);
}

.modal-header.bg-info {
  border-top-color: var(--sz-info);
}

.modal-header.bg-warning {
  border-top-color: var(--sz-amber);
}

.modal-header.bg-primary {
  border-top-color: var(--sz-accent);
}

.modal-header[class*="bg-"] .modal-title {
  color: var(--sz-ink);
  font-weight: 600;
}

.modal-header[class*="bg-"] .close {
  color: var(--sz-ink-3);
  opacity: .8;
  text-shadow: none;
}

.modal-content {
  border-radius: var(--sz-radius-lg);
  border: 0;
  box-shadow: var(--sz-shadow-3);
}

/* ===== FORMS: inline error contract + select2 focus parity ===== */
span.err,
.err-msg {
  display: block;
  color: var(--sz-red-text);
  font-size: .8rem;
  margin-top: 4px;
}

.form-control.err,
.form-control.is-invalid {
  border-color: var(--sz-red-text);
  box-shadow: 0 0 0 3px rgba(178, 60, 56, .12);
}

.select2-container--open .select2-selection--single,
.select2-container--focus .select2-selection--single {
  border-color: var(--sz-accent);
  box-shadow: var(--sz-focus);
}

/* ===== COMFORT: touch targets =====
   (the earlier "quiet row-action icons" rules were REMOVED — table icons carry
   semantic text-success/info/danger colors that must stay visible at rest) */
/* a.mouse-pointer, */
.list-icons-item {
  /* display: inline-flex; */
  align-items: center;
  justify-content: center;
  margin: 2px;
}

@media (pointer: coarse) {

  a.mouse-pointer,
  .list-icons-item {
    min-width: 32px;
    min-height: 32px;
  }
}

/* tertiary links follow the brand */
.btn-link {
  color: var(--sz-accent);
}

.btn-link:hover {
  color: var(--sz-brand);
}

/* ============================================================
   QA GAP FIXES — docs/32-ui-qa-gap-register.md (2026-07-18)
   ============================================================ */

/* C1: thead-light = sanctioned LIGHT secondary-table header (was dark text on teal) */
.table .thead-light th {
  background-image: none;
  background: #f0f5f4;
  color: var(--sz-ink);
  border-color: var(--sz-line);
}

/* H1: complete the badge unification — contextual dialect joins the ladder */
.badge-success {
  background-color: var(--sz-green);
  background-image: linear-gradient(135deg, var(--sz-green) 0, var(--sz-green-deep) 97%);
  color: #fff;
}

.badge-danger {
  background-color: var(--sz-red);
  background-image: linear-gradient(135deg, var(--sz-red) 0, var(--sz-red-deep) 97%);
  color: #fff;
}

.badge-info {
  background-color: var(--sz-info);
  background-image: linear-gradient(135deg, var(--sz-info) 0, var(--sz-info-deep) 97%);
  color: #fff;
}

/* H2: modal close must survive markup's text-white */
.modal-header[class*="bg-"] .close {
  color: var(--sz-ink-3) !important;
  opacity: .8;
  text-shadow: none;
}

/* H3: ONE primary = indigo (badges included; modal accent bars stay semantic) */
.bg-primary,
.bg-primary-600 {
  background-image: linear-gradient(135deg, var(--sz-primary) 0, var(--sz-primary-deep) 97%);
}

.badge-primary,
.badge.bg-primary {
  background-color: var(--sz-primary) !important;
  background-image: none !important;
  color: #fff;
}

/* H4: preloader spinner — visible + on-brand (scoped: bare .spinner on buttons stays animation-only) */
#preloader .spinner {
  width: 50px;
  height: 50px;
  border: 5px solid rgba(21, 115, 115, .15);
  border-radius: 50%;
  border-top-color: var(--sz-accent);
  animation: spin 1s ease-in-out infinite;
}

@media (max-width: 600px) {
  #preloader .spinner {
    width: 30px;
    height: 30px;
  }
}

/* H5: text-label chip system → brand (red variant stays danger); ticker chip never orange */
.text-label {
  border-color: var(--sz-accent);
}

.text-label>span:first-of-type {
  background-color: var(--sz-accent);
}

.text-label>span:nth-of-type(2) {
  color: var(--sz-accent);
}

.text-label-red {
  border-color: var(--sz-red-vivid);
}

.text-label-red>span:first-of-type {
  background-color: var(--sz-red-vivid);
}

.text-label-red>span:nth-of-type(2) {
  color: var(--sz-red-vivid);
}

.robot-text-label>span:first-of-type {
  background: var(--sz-accent);
  color: #fff;
}

.robot-text-label>span:nth-of-type(2) {
  color: #fff;
}

/* H6: flash alerts on the token palette */
.alert-success {
  color: var(--sz-green-text);
  background-color: #e9faf1;
  border-color: var(--sz-green);
}

.alert-danger {
  color: var(--sz-red-text);
  background-color: #fdeeec;
  border-color: var(--sz-red);
}

.alert-warning {
  color: #713f12;
  background-color: #fdf4e3;
  border-color: var(--sz-amber);
}

.alert-info {
  color: var(--sz-info-text);
  background-color: #e8f4f8;
  border-color: var(--sz-info);
}

/* H7: PNotify toasts on the token palette */
.ui-pnotify-container {
  border-radius: 10px !important;
  box-shadow: var(--sz-shadow-2) !important;
}

.brighttheme-success {
  background-color: #e9faf1 !important;
  border-color: var(--sz-green) !important;
  color: var(--sz-green-text) !important;
}

.brighttheme-error {
  background-color: #fdeeec !important;
  border-color: var(--sz-red) !important;
  color: var(--sz-red-text) !important;
}

.brighttheme-info {
  background-color: #e8f4f8 !important;
  border-color: var(--sz-info) !important;
  color: var(--sz-info-text) !important;
}

.brighttheme-notice {
  background-color: #fdf4e3 !important;
  border-color: var(--sz-amber) !important;
  color: #713f12 !important;
}

/* H8: select2 open panel joins the system (+ visible keyboard highlight) */
.select2-dropdown {
  border-radius: 10px;
  border-color: var(--sz-line);
  box-shadow: var(--sz-shadow-2);
  overflow: hidden;
}

.select2-results__option[aria-selected=true] {
  background-color: var(--sz-accent) !important;
  color: #fff !important;
}

.select2-results__option--highlighted {
  background-color: var(--sz-accent-weak) !important;
  color: var(--sz-ghost-ink) !important;
}

.select2-search--dropdown .select2-search__field {
  border-color: var(--sz-line);
  border-radius: 8px;
}

.select2-search--dropdown .select2-search__field:focus {
  border-color: var(--sz-accent);
  outline: none;
}

/* H9: focus ring visible on dark chrome */
.sidebar-dark a:focus-visible,
.navbar-dark a:focus-visible,
.navbar-dark button:focus-visible {
  outline-color: var(--sz-accent-weak) !important;
}

/* H10: amber fills carry dark ink (white was 1.65:1; matches badge-warning) */
.btn-labeled-warning {
  background: linear-gradient(135deg, var(--sz-amber), var(--sz-amber-deep));
}

.btn-warning,
.btn-warning i,
.btn-labeled-warning,
.btn-labeled-warning i,
.bulk-action-menu a:first-child,
.bulk-action-menu a:first-child i {
  color: #713f12 !important;
}

/* H11: tab-bars (toolbar contains an active tab) — first slot yields red to ghost */
.page-menu:has(a.active) a:first-child {
  background: #fff;
  border: 1px solid var(--sz-ghost-line);
  color: var(--sz-ghost-ink) !important;
}

.page-menu:has(a.active) a:first-child i {
  color: var(--sz-accent) !important;
}

.page-menu:has(a.active) a:first-child.active {
  background: var(--sz-accent);
  border-color: var(--sz-accent);
  color: #fff !important;
}

.page-menu:has(a.active) a:first-child.active i {
  color: #fff !important;
}

/* M1 + M18: semantic bg-* as structural cells/rows/legends = FLAT, not action-gradient */
.table tbody th[class*="bg-"],
.table tbody td[class*="bg-"],
.table tr[class*="bg-"],
.table tr[class*="bg-"]>td,
legend[class*="bg-"] {
  background-image: none !important;
}

.table tbody .bg-success,
.table tr.bg-success,
.table tr.bg-success>td {
  background-color: var(--sz-green) !important;
}

.table tbody .bg-info {
  background-color: var(--sz-info) !important;
}

legend.bg-danger {
  background-color: var(--sz-red) !important;
  color: #fff;
}

legend.bg-info {
  background-color: var(--sz-info) !important;
  color: #fff;
}

legend.bg-success {
  background-color: var(--sz-green) !important;
  color: #fff;
}

.table td.bg-success-300 {
  background-color: var(--sz-accent-weak) !important;
  color: var(--sz-ink) !important;
}

/* M2: checkboxes / radios / switches / uniform.js */
.custom-control-input:checked~.custom-control-label::before {
  background-color: var(--sz-accent);
  border-color: var(--sz-accent);
}

.custom-control-input:focus~.custom-control-label::before {
  box-shadow: var(--sz-focus);
}

.uniform-checker span {
  color: var(--sz-accent);
}

input[type=checkbox],
input[type=radio] {
  accent-color: var(--sz-accent);
}

/* M3: jQuery-UI date & time pickers */
.ui-datepicker {
  border-radius: 10px;
  border-color: var(--sz-line);
  box-shadow: var(--sz-shadow-2);
}

.ui-datepicker .ui-datepicker-calendar td.ui-datepicker-current-day .ui-state-active {
  background-color: var(--sz-accent);
  color: #fff;
}

.ui-datepicker .ui-datepicker-calendar .ui-state-highlight {
  background-color: var(--sz-accent-weak);
  color: var(--sz-ghost-ink);
}

.ui-timepicker-standard {
  font-family: inherit;
  border: 1px solid var(--sz-line);
  border-radius: 10px;
  box-shadow: var(--sz-shadow-2);
}

.ui-timepicker-standard .ui-state-hover {
  background: var(--sz-accent-weak);
  border: 1px solid transparent;
  color: var(--sz-ghost-ink);
}

/* M4: base dropdown panels adopt the system chrome */
.dropdown-menu {
  border-radius: 10px;
  border: 1px solid var(--sz-line);
  box-shadow: var(--sz-shadow-2);
}

.dropdown-content-footer {
  border-top-color: var(--sz-line);
}

/* M5: border utilities on the vibrant palette (badge-flat, badge-mark, chip idiom) */
.border-success,
.border-left-success,
.border-top-success,
.border-bottom-success,
.border-right-success {
  border-color: var(--sz-green-text) !important;
}

.border-danger,
.border-left-danger,
.border-top-danger,
.border-bottom-danger,
.border-right-danger {
  border-color: var(--sz-red-text) !important;
}

.border-info,
.border-left-info,
.border-top-info,
.border-bottom-info,
.border-right-info {
  border-color: var(--sz-info-text) !important;
}

.border-warning,
.border-left-warning,
.border-top-warning,
.border-bottom-warning,
.border-right-warning {
  border-color: var(--sz-amber) !important;
}

.border-primary,
.border-left-primary {
  border-color: var(--sz-primary) !important;
}

.btn.bg-transparent.text-primary {
  color: var(--sz-primary) !important;
}

/* M6: in-card Bootstrap tabs (CRM funnel) — teal active, baseline restored */
.nav-tabs-bottom .nav-link.active:before,
.nav-tabs-highlight .nav-link.active:before {
  background-color: var(--sz-accent);
}

.nav-tabs .nav-link.active {
  color: var(--sz-accent);
}

.card .nav-tabs {
  border-bottom: 1px solid var(--sz-line);
  margin-bottom: 1rem;
}

/* M7: IS_MOBILE portal hero band → chrome (beats the view-local style blocks) */
.student-header {
  background: linear-gradient(180deg, var(--sz-chrome-2) 0, var(--sz-chrome) 100%) !important;
}

.db-image,
.bio-image {
  border-color: var(--sz-accent) !important;
}

/* M8 + M9: leftover slate surfaces */
.card-header.bg-slate-800 {
  background: linear-gradient(135deg, var(--sz-chrome-2), var(--sz-chrome)) !important;
  color: #fff !important;
}

th.bg-slate {
  background: linear-gradient(180deg, var(--sz-brand) 0, var(--sz-brand-deep) 97%) !important;
  color: #fff !important;
}

/* M10: colored card headers = the modal accent-bar language (one pattern, one look) */
.card-header.bg-success,
.card-header.bg-success-800,
.card-header.bg-info,
.card-header.bg-info-800,
.card-header.bg-danger,
.card-header.bg-warning,
.card-header.bg-orange,
.card-header.bg-primary {
  background: #fff !important;
  background-image: none !important;
  color: var(--sz-ink) !important;
  border-top: 4px solid var(--sz-green);
  border-bottom: 1px solid var(--sz-line);
}

.card-header.bg-info,
.card-header.bg-info-800 {
  border-top-color: var(--sz-info);
}

.card-header.bg-danger {
  border-top-color: var(--sz-red);
}

.card-header.bg-warning,
.card-header.bg-orange {
  border-top-color: var(--sz-amber);
}

.card-header.bg-primary {
  border-top-color: var(--sz-primary);
}

/* M12: neon trio retint (escaped the detune) */
.bg-light-green {
  background-color: var(--sz-green);
}

.bg-pink {
  background-color: #d81b60;
}

.bg-dark-cyan {
  background-color: #0b4a47;
}

/* M13: marquee strip — AA red on a calm plate */
.marquee {
  color: var(--sz-red-text);
}

.marquee-bg {
  background: radial-gradient(circle, #eef5f4 52%, #e6f0ee 100%);
}

/* M14: launcher avatar rings — teal hairline, soft glows (hue identity kept) */
.card-image {
  border: 1px solid var(--sz-ghost-line-hover);
  box-shadow: 0 4px 12px rgba(21, 115, 115, .28);
}

.card-image-green {
  border-color: #2ea24d;
  box-shadow: 0 0 12px rgba(46, 162, 77, .3);
}

.card-image-blue {
  border-color: rgb(15, 100, 140);
  box-shadow: 0 0 12px rgba(15, 100, 140, .3);
}

.card-image-red {
  border-color: #e63946;
  box-shadow: 0 0 12px rgba(230, 57, 70, .3);
}

.card-image-orange {
  border-color: #e0a800;
  box-shadow: 0 0 12px rgba(224, 168, 0, .3);
}

/* transport conditional tile: calm duotone like the bgg detune */
.has-bg-image.bg-danger {
  background-image: linear-gradient(135deg, #b3453f, #8a2f2a) !important;
}

/* M16: disabled buttons must not brighten/lift */
.btn:disabled,
.btn.disabled {
  filter: none !important;
  box-shadow: none !important;
  cursor: not-allowed;
}

button:disabled {
  cursor: not-allowed;
}

/* M17: validation visible on select2-backed selects */
select.err+.select2-container .select2-selection--single,
select.is-invalid+.select2-container .select2-selection--single {
  border-color: var(--sz-red-text) !important;
  box-shadow: 0 0 0 3px rgba(211, 18, 4, .12);
}

/* M19: upgrade screen joins the system (.content scope beats the view-local style) */
.content .card.sub-hero {
  background: linear-gradient(135deg, var(--sz-chrome-2) 0%, var(--sz-chrome) 100%);
}

.content .cycle-option:hover {
  border-color: var(--sz-ghost-line-hover);
}

.content .cycle-radio:checked+.cycle-option {
  border-color: var(--sz-accent);
  background: var(--sz-accent-weak);
  box-shadow: 0 0 0 1px var(--sz-accent) inset;
}

.content .plan-card.is-current {
  border-color: var(--sz-accent);
  box-shadow: 0 0 0 1px var(--sz-accent) inset;
}

/* LOW hygiene & polish */
.card>.table:last-child,
.card>[class*="table-responsive"]:last-child>.table:last-child {
  border-bottom-left-radius: var(--sz-radius-lg);
  border-bottom-right-radius: var(--sz-radius-lg);
}

table.mwfb tr th,
table.mwfb tr td {
  border-color: var(--sz-line);
}

.btn-light.btn-light-grd {
  background: linear-gradient(to right, #f1f7f6, #d9e6e3);
}

.btn-light.btn-light-grd-left {
  background: linear-gradient(to left, #f1f7f6, #d9e6e3);
}

.modal-header {
  padding: 14px 20px;
}

.modal-header.bg-teal {
  border-top-color: var(--sz-accent);
}

/* hover affordance ONLY on genuinely clickable cards */
.card[onclick]:hover,
.card.mouse-pointer:hover,
.card-dashboard:hover {
  box-shadow: var(--sz-shadow-2);
}

/* default progress safety net (bg-classed and inline-styled bars unaffected) */
.progress {
  background-color: #e8eeec;
  box-shadow: none;
}

.progress-bar {
  background-color: var(--sz-accent);
}

/* dormant wizard future-proofing */
.wizard>.steps>ul>li.current .number {
  border-color: var(--sz-accent);
  color: var(--sz-accent);
}

.wizard>.steps>ul>li.done .number {
  background-color: var(--sz-accent);
  border-color: var(--sz-accent);
  color: #fff;
}

/* remarks inline input keyboard focus */
.input-container input:focus {
  border-bottom: 1px solid var(--sz-accent);
}

.input-container input:focus-visible {
  outline: 2px solid var(--sz-accent) !important;
  outline-offset: 1px;
}

/* ============ /QA GAP FIXES ============ */


/* ============ COMMAND PALETTE (Ctrl/Cmd+K) ============ */

/* top-bar trigger: looks like a search field, behaves like a button */
.sz-navsearch {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  max-width: 420px;
  padding: 6px 10px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: var(--sz-radius);
  background: rgba(255, 255, 255, .07);
  color: rgba(255, 255, 255, .62);
  font-size: .85rem;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}

.sz-navsearch:hover,
.sz-navsearch:focus {
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .28);
  color: rgba(255, 255, 255, .9);
  text-decoration: none;
}

.sz-navsearch .sz-navsearch-label {
  flex: 1 1 auto;
  text-align: left;
}

/* keycap hint */
.sz-navsearch kbd {
  padding: 1px 6px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 4px;
  background: rgba(0, 0, 0, .18);
  color: rgba(255, 255, 255, .7);
  font-size: .7rem;
  line-height: 1.5;
}

/* ---- top-bar plan chip ---- */

/* Two lines in one nav item: plan + status + overdue count on top, the single most
   relevant date fact beneath. States escalate ok -> warn -> critical so the bar carries
   one clear signal rather than several competing ones. */
.navbar-nav-link.sz-plan {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 4px 12px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--sz-radius);
  background: rgba(255, 255, 255, .06);
  line-height: 1.25;
}

.navbar-nav-link.sz-plan:hover {
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .26);
}

.sz-plan-icon {
  flex: 0 0 auto;
  font-size: .95rem;
  opacity: .75;
}

.sz-plan-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.sz-plan-top {
  display: flex;
  align-items: center;
  gap: 6px;
}

.sz-plan-name {
  font-size: .84rem;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 15ch;
}

.sz-plan-note {
  font-size: .68rem;
  color: rgba(255, 255, 255, .58);
  white-space: nowrap;
}

/* status chip: trial is informational, anything else is a dead subscription */
.sz-plan-tag {
  flex: 0 0 auto;
  padding: 0 6px;
  border-radius: 9px;
  font-size: .62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.sz-plan-tag.is-trial {
  background: rgba(54, 185, 204, .22);
  color: #9fe4ee;
}

.sz-plan-tag.is-dead {
  background: rgba(255, 95, 95, .24);
  color: #ffc9c9;
}

/* overdue invoice count */
.sz-plan-inv {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  flex: 0 0 auto;
  padding: 0 6px;
  border-radius: 9px;
  background: var(--sz-red-deep);
  color: #fff;
  font-size: .64rem;
  font-weight: 700;
}

.sz-plan-inv i {
  font-size: .62rem;
}

/* ---- states ---- */

/* inside 7 days: amber note, no motion -- it is a heads-up, not an alarm */
.navbar-nav-link.sz-plan.is-warn {
  border-color: rgba(246, 194, 62, .5);
  background: rgba(246, 194, 62, .12);
}

.navbar-nav-link.sz-plan.is-warn .sz-plan-note {
  color: var(--sz-amber);
  font-weight: 600;
}

/* expired, suspended, or money owed: red, and the note breathes to draw the eye.
   a slow opacity pulse rather than a blink -- readable at every point in the cycle. */
.navbar-nav-link.sz-plan.is-critical {
  border-color: rgba(255, 95, 95, .55);
  background: rgba(255, 95, 95, .14);
}

.navbar-nav-link.sz-plan.is-critical .sz-plan-note {
  color: #ff9b9b;
  font-weight: 600;
  animation: sz-plan-pulse 1.9s ease-in-out infinite;
}

.navbar-nav-link.sz-plan.is-critical .sz-plan-inv {
  animation: sz-plan-pulse 1.9s ease-in-out infinite;
}

@keyframes sz-plan-pulse {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: .45;
  }
}

/* never animate for users who have asked the OS not to */
@media (prefers-reduced-motion: reduce) {

  .navbar-nav-link.sz-plan.is-critical .sz-plan-note,
  .navbar-nav-link.sz-plan.is-critical .sz-plan-inv {
    animation: none;
  }
}

/* the second line is the first thing to go when the bar runs out of room */
@media (max-width: 1199px) {
  .sz-plan-note {
    display: none;
  }
}

/* ---- overlay ---- */
.sz-palette-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1060;
  background: rgba(5, 40, 44, .55);
  backdrop-filter: blur(2px);
}

.sz-palette-overlay.is-open {
  display: block;
}

body.sz-palette-lock {
  overflow: hidden;
}

.sz-palette {
  width: min(640px, calc(100vw - 32px));
  margin: 12vh auto 0;
  border-radius: var(--sz-radius-lg);
  background: #fff;
  box-shadow: var(--sz-shadow-3);
  overflow: hidden;
}

/* ---- input ---- */
.sz-palette-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--sz-line);
}

.sz-palette-head i {
  color: var(--sz-ink-3);
  font-size: 1rem;
}

.sz-palette-input {
  flex: 1 1 auto;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--sz-ink);
  font-size: 1rem;
}

.sz-palette-input::placeholder {
  color: var(--sz-ink-3);
}

/* ---- results ---- */
.sz-palette-list {
  max-height: 52vh;
  overflow-y: auto;
}

.sz-palette-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 16px;
  color: var(--sz-ink-2);
  text-decoration: none;
  border-left: 3px solid transparent;
}

.sz-palette-row:hover,
.sz-palette-row:focus {
  text-decoration: none;
  color: var(--sz-ink-2);
}

.sz-palette-row.is-sel {
  background: var(--sz-accent-weak);
  border-left-color: var(--sz-accent);
  color: var(--sz-ink);
}

.sz-palette-row i {
  flex: 0 0 auto;
  width: 18px;
  color: var(--sz-ink-3);
  font-size: .95rem;
  text-align: center;
}

.sz-palette-row.is-sel i {
  color: var(--sz-accent);
}

.sz-palette-label {
  flex: 1 1 auto;
  font-size: .9rem;
}

/* owning menu group -- disambiguates same-named screens (Fee > Settings vs Timetable > Settings) */
.sz-palette-group {
  flex: 0 0 auto;
  color: var(--sz-ink-3);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.sz-palette-empty {
  padding: 28px 16px;
  color: var(--sz-ink-3);
  font-size: .88rem;
  text-align: center;
}

/* ---- footer hints ---- */
.sz-palette-foot {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 8px 16px;
  border-top: 1px solid var(--sz-line);
  background: var(--sz-surface-2);
  color: var(--sz-ink-3);
  font-size: .72rem;
}

.sz-palette-foot b {
  font-weight: 600;
  color: var(--sz-ink-2);
}

.sz-palette-count {
  margin-left: auto;
}

@media (max-width: 767px) {
  .sz-palette {
    margin-top: 6vh;
  }

  .sz-palette-group {
    display: none;
  }
}

/* ============ /COMMAND PALETTE ============ */


/* ============ SIDEBAR: INDENT + SELF-SCROLL ============ */

/* Submenu items lined up with the end of the parent's icon rather than pushed far right.
   Parent link box starts at x=10 with 20px padding and a 15px icon, so the icon ends at
   x=45; the sub link box starts at x=16, hence 29px. Excluded in the collapsed icon-rail
   state, where submenus render as flyouts with their own spacing. */
body:not(.sidebar-xs) .sidebar-main .nav-sidebar .nav-group-sub .nav-link {
  padding-left: 29px;
}

/* third level (HR / Staff > Recruitment > Requisitions) keeps the same 20px step */
body:not(.sidebar-xs) .sidebar-main .nav-sidebar .nav-group-sub .nav-group-sub .nav-link {
  padding-left: 49px;
}

/* ---- self-scrolling sidebar ---- */

/* The nav is far taller than the viewport. Scrolling it used to drag the whole page;
   now the sidebar keeps its own scroll and stays put while the content scrolls. Sticky
   rather than fixed so the flex layout and the collapsed rail keep working untouched. */
/* The theme deliberately pins this mode open and non-scrolling:
     .sidebar-expand-md:not(.sidebar-component){position:static}                      (0,2,0)
     .sidebar-expand-md:not(...):not(.sidebar-fixed) .sidebar-content{overflow:visible} (0,4,0)
   so these selectors are weighted to outrank both rather than reaching for !important.
   Its built-in .sidebar-fixed mode is not used: that assumes a 3.125rem top offset and
   our navbar is 64px. */
@media (min-width: 768px) {
  .page-content .sidebar.sidebar-main.sidebar-expand-md {
    position: sticky;
    top: 0;
    align-self: flex-start;
    /* stop the flex row stretching it to content height */
    height: 100vh;
  }

  .page-content .sidebar.sidebar-main.sidebar-expand-md .sidebar-content {
    position: static;
    /* the sticky parent is the positioned box now */
    width: auto;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    /* reaching the end must not start scrolling the page */
  }

  /* Firefox only. Chrome now supports scrollbar-width too, and when it is set the
     standard property wins over ::-webkit-scrollbar -- which capped the bar at ~10px
     instead of the 4px below. Scoped so Chrome/Safari keep the webkit rule. */
  @supports not selector(::-webkit-scrollbar) {
    .page-content .sidebar.sidebar-main.sidebar-expand-md .sidebar-content {
      scrollbar-width: thin;
      scrollbar-color: rgba(255, 255, 255, .16) transparent;
    }
  }

  /* very thin scrollbar -- present but almost invisible until hovered */
  .page-content .sidebar.sidebar-main.sidebar-expand-md .sidebar-content::-webkit-scrollbar {
    width: 4px;
  }

  .page-content .sidebar.sidebar-main.sidebar-expand-md .sidebar-content::-webkit-scrollbar-track {
    background: transparent;
  }

  .page-content .sidebar.sidebar-main.sidebar-expand-md .sidebar-content::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .16);
    border-radius: 2px;
  }

  .page-content .sidebar.sidebar-main.sidebar-expand-md .sidebar-content:hover::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .34);
  }
}

/* ============ /SIDEBAR: INDENT + SELF-SCROLL ============ */


/* ============ BRANDING FOOTER (fixed) ============ */

/* Pinned to the viewport so the branding -- and the clock -- survive scrolling.
   The old footer sat at the end of each view's content and scrolled out of sight.

   It spans the content column only, never the sidebar: `left` matches the sidebar width
   and follows it through the collapse states. Light surface by design -- the sidebar and
   top bar already carry the dark chrome, and a third dark band would box the page in. */
.sz-footer {
  position: fixed;
  left: 270px;
  right: 0;
  bottom: 0;
  z-index: 1030;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 34px;
  padding: 0 16px;
  background: #fff;
  border-top: 1px solid var(--sz-line);
  color: var(--sz-ink-3);
  font-size: .74rem;
  line-height: 1;
  box-shadow: 0 -1px 3px rgba(15, 23, 42, .04);
  /* no transition on `left`: the sidebar collapse is instant, so an eased footer would
     lag behind it and briefly expose a gap */
}

/* sidebar collapsed to icons */
body.sidebar-xs .sz-footer {
  left: 56px;
}

/* below the sidebar's breakpoint it goes off-canvas, so the content is full width */
@media (max-width: 767px) {
  .sz-footer {
    left: 0;
  }

  body.sidebar-xs .sz-footer {
    left: 0;
  }
}

.sz-footer a {
  color: var(--sz-ink-2);
  text-decoration: none;
}

.sz-footer a:hover {
  color: var(--sz-accent);
  text-decoration: underline;
}

.sz-footer-brand {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sz-footer-app {
  font-weight: 600;
  color: var(--sz-accent);
}

.sz-footer-sep {
  opacity: .45;
}

/* ---- date + live clock ---- */
.sz-footer-now {
  display: flex;
  align-items: center;
  gap: 5px;
  flex: 0 0 auto;
  color: var(--sz-ink-2);
  font-variant-numeric: tabular-nums;
}

.sz-footer-now i {
  opacity: .45;
  font-size: .72rem;
}

/* fixed width stops the row jittering as the seconds tick */
.sz-footer-time {
  min-width: 8.5ch;
  font-weight: 600;
}

/* clearance for the content column only -- the bar no longer spans the sidebar, so
   padding the shared flex parent would leave a bare strip under it */
.content-wrapper {
  padding-bottom: 34px;
}

/* the collaboration clause is the first thing to go when space runs short */
@media (max-width: 991px) {
  .sz-footer-collab {
    display: none;
  }
}

@media (max-width: 575px) {

  .sz-footer-by,
  .sz-footer-sep {
    display: none;
  }
}

/* keep the bar off printed output */
@media print {
  .sz-footer {
    display: none;
  }

  .content-wrapper {
    padding-bottom: 0;
  }
}

/* ============ /BRANDING FOOTER ============ */


/* ============ ENTITLEMENT-HIDDEN NAV CLEANUP ============ */

/* A screen outside the plan renders as an empty <li> (plan_menu_link returns nothing),
   and a group whose children are all outside the plan becomes a toggle that expands to
   nothing. Hide both so the menu never offers a dead end.
   Paired with a JS fallback in custom.js for browsers without :has(). */
.nav-sidebar li.nav-item:not(:has(a)):not(:has(ul)) {
  display: none;
}

/* a group is live only if its submenu holds a real destination -- nested group toggles
   (href="#" / javascript:) do not count, or an empty parent would keep itself alive */
.nav-sidebar li.nav-item-submenu:not(:has(ul.nav-group-sub a.nav-link[href]:not([href="#"]):not([href^="javascript"]))) {
  display: none;
}

/* ============ /ENTITLEMENT-HIDDEN NAV CLEANUP ============ */


/* ============ EXPLORE FEATURES (upgrade screen) ============ */

.sz-explore-item {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 100%;
  padding: 9px 12px;
  border: 1px solid var(--sz-line);
  border-radius: var(--sz-radius);
  background: var(--sz-surface-2);
}

/* the feature the user actually tried to open, arrived at via ?from= */
.sz-explore-item.is-target {
  border-color: var(--sz-accent);
  background: var(--sz-accent-weak);
  box-shadow: var(--sz-focus);
}

.sz-explore-item>i {
  flex: 0 0 auto;
  width: 18px;
  color: var(--sz-ink-3);
  text-align: center;
}

.sz-explore-label {
  flex: 1 1 auto;
  color: var(--sz-ink-2);
  font-size: .86rem;
}

/* owning module -- several menu labels repeat ("Create", "Reports", "Settings") */
.sz-explore-mod {
  color: var(--sz-ink-3);
  font-size: .78rem;
}

.sz-explore-plan {
  flex: 0 0 auto;
  border: 1px solid var(--sz-line);
  color: var(--sz-ink-3);
  font-size: .68rem;
  font-weight: 600;
}

/* ============ /EXPLORE FEATURES ============ */


/* ============ ADMIN TASK DELEGATION ============ */
/* Scoped to .sz-task-* only. The top-bar task widget renders in the child-app
   admin menu; these classes appear nowhere else, so the shared-asset blast
   radius is limited to elements that opt in by name. */

/* Overdue count in the navbar. A steady red badge reads as decoration next to
   the other pills, so it breathes just enough to register as "act on me". */
.sz-task-badge-overdue {
  animation: szTaskPulse 2.4s ease-in-out infinite;
}

@keyframes szTaskPulse {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: .55;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sz-task-badge-overdue {
    animation: none;
  }
}

/* Priority chip in the task list */
.sz-task-priority {
  text-transform: capitalize;
  min-width: 62px;
}

/* The widget rows carry their own dotted separators; keep them from inheriting
   the media-list hover that makes the whole row look clickable when only the
   checkbox is. */
.sz-task-item {
  background: transparent;
}

/* ============ /ADMIN TASK DELEGATION ============ */

/* ============ SIDEBAR ORG LOGO ============ */
/* institute logo as a true circle chip, same treatment as the navbar
   .brand-mark: white fill, contain-fit, any resolution/aspect stays sharp */
.sidebar-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  border-radius: 50%;
  background: #fff;
  padding: 5px;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .05), 0 1px 3px rgba(0, 0, 0, .25);
}

.sidebar-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.sidebar-logo-sm {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  padding: 4px;
}

/* ============ /SIDEBAR ORG LOGO ============ */

/* ============ NAVBAR BRAND LOCKUP (modernized) ============
   mark + wordmark + version pill; shared by all 8 portal menus.
   The mark rides the accent tokens, so custom-themed deployments
   (Settings > UI Customizations) get a matching logomark for free. */
.navbar-brand {
  display: flex;
  align-items: center;
}

.navbar-brand>a {
  text-decoration: none;
  transition: filter .15s ease;
}

.navbar-brand>a:hover {
  filter: brightness(1.12);
  text-decoration: none;
}

.brand-name {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: .05em;
  color: #fff;
  line-height: 1;
}

/* compact product badge — deliberately smaller/quieter than the institute's
   large circular logo in the sidebar identity block so the two never compete */
.brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  border-radius: 7px;
  background: #fff;
  padding: 2px;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .05), 0 1px 3px rgba(0, 0, 0, .2);
}

.brand-mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.brand-version {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .1);
  border: 1px solid var(--sz-chrome-line);
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .03em;
  color: rgba(255, 255, 255, .85);
  line-height: 1.3;
}

/* the "new" changelog chip: quiet pill instead of a shouting badge */
.brand-name .badge {
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: .22rem .5rem;
  line-height: 1;
}

/* ============ /NAVBAR BRAND LOCKUP ============ */

/* ============ TOOLTIP (flicker guard) ============
   A hover tooltip is display-only and must never intercept the pointer. Without this,
   when the tip renders over its trigger the cursor lands on the tip -> the trigger gets
   mouseleave -> hide -> tip vanishes -> mouseenter -> show ... an endless show/hide flicker
   that also swallows clicks on the element underneath. pointer-events:none makes the tip
   transparent to the mouse so the trigger stays the hover target (and stays clickable).
   Paired with container:'body' on the bsTooltip directive. */
.tooltip { pointer-events: none; }

/* ============ POPOVER (modernized) ============
   Instant-info cards (bs-popover + the _POPOVER_STD* constants). The constants'
   <code> heading line is restyled into a section chip — no constant edits needed. */
.popover {
  max-width: 380px;
  border: 1px solid var(--sz-line);
  border-radius: 12px;
  box-shadow: var(--sz-shadow-3);
  font-size: .82rem;
}

.popover .popover-header {
  background: var(--sz-surface-2);
  border-bottom: 1px solid var(--sz-line);
  border-radius: 12px 12px 0 0;
  color: var(--sz-ink);
  font-weight: 600;
  padding: 10px 14px;
}

.popover .popover-body {
  padding: 12px 14px;
  color: var(--sz-ink-2);
  line-height: 1.55;
}

/* the constants' <code>Section Heading</code> line becomes a soft brand chip */
.popover .popover-body code {
  display: inline-block;
  background: var(--sz-accent-weak);
  color: var(--sz-ghost-ink);
  border-radius: 999px;
  padding: 3px 12px;
  margin-bottom: 6px;
  font-family: inherit;
  font-weight: 600;
  font-size: .7rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.popover .popover-body strong {
  color: var(--sz-ink);
  font-weight: 600;
}

/* arrows follow the border color — BS4 (.arrow) and BS5 (.popover-arrow) markup */
.bs-popover-top .arrow::before,
.bs-popover-auto[x-placement^="top"] .arrow::before,
.bs-popover-top>.popover-arrow::before,
.bs-popover-auto[data-popper-placement^="top"]>.popover-arrow::before {
  border-top-color: var(--sz-line);
}

.bs-popover-bottom .arrow::before,
.bs-popover-auto[x-placement^="bottom"] .arrow::before,
.bs-popover-bottom>.popover-arrow::before,
.bs-popover-auto[data-popper-placement^="bottom"]>.popover-arrow::before {
  border-bottom-color: var(--sz-line);
}

.bs-popover-left .arrow::before,
.bs-popover-auto[x-placement^="left"] .arrow::before,
.bs-popover-start>.popover-arrow::before,
.bs-popover-auto[data-popper-placement^="left"]>.popover-arrow::before {
  border-left-color: var(--sz-line);
}

.bs-popover-right .arrow::before,
.bs-popover-auto[x-placement^="right"] .arrow::before,
.bs-popover-end>.popover-arrow::before,
.bs-popover-auto[data-popper-placement^="right"]>.popover-arrow::before {
  border-right-color: var(--sz-line);
}

/* ============ /POPOVER ============ */

/* ============ AUTH FOOTER ============ */
/* login-screen copyright line: hero backgrounds vary per org logo, so the
   line carries its own dark scrim instead of trusting the backdrop */
.auth-footer {
  width: fit-content;
  margin: 0 auto 20px;
  padding: 7px 18px;
  background: rgba(5, 40, 44, .7);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 999px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: rgba(255, 255, 255, .88);
  font-size: .8rem;
  letter-spacing: .01em;
}

.auth-footer a {
  text-decoration: none;
}

.auth-footer a .text-success-400 {
  color: #7fdcc3;
  font-weight: 600;
}

.auth-footer a:hover .text-success-400 {
  color: #fff;
  text-decoration: underline;
}

/* ============ /AUTH FOOTER ============ */
/* ==========================================================================
   ERROR / STATUS PAGES  (.sz-err)
   ==========================================================================
   Shared by BOTH apps and by BOTH layers:
     - app screens  : views/authorization/{error_404,system_maintenance,auth_blocked,...}
     - framework    : views/errors/html/*  (500 / DB / PHP - these render with NO
                      stylesheet available, so those templates inline a copy of the
                      handful of rules they need. Keep the two in sync visually.)

   Self-contained on purpose: an error page must render even when the app is broken,
   so nothing here depends on Bootstrap, Limitless or jQuery.
   ========================================================================== */

.sz-err {
  min-height: 100vh;
  min-height: 100dvh;                 /* mobile browser chrome shrinks 100vh */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  background: var(--sz-chrome, #05282c);
  /* depth without an image request - an error page must not wait on assets */
  background-image:
    radial-gradient(1100px 520px at 50% -10%, rgba(21, 115, 115, .30), transparent 70%),
    radial-gradient(760px 420px at 100% 100%, rgba(21, 115, 115, .16), transparent 70%);
  color: var(--sz-chrome-text, rgba(255, 255, 255, .92));
  font-family: Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.sz-err-panel {
  width: 100%;
  max-width: 560px;
  text-align: center;
}

/* ---------------------------------------------------------------- brand */
.sz-err-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 28px;
}

.sz-err-brand img { height: 34px; width: auto; }

.sz-err-brand span {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .2px;
  color: rgba(255, 255, 255, .82);
}

/* ---------------------------------------------------------------- status mark */
.sz-err-mark {
  position: relative;
  width: 88px;
  height: 88px;
  margin: 0 auto 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .12);
}

.sz-err-mark i,
.sz-err-mark svg { font-size: 34px; width: 34px; height: 34px; color: #fff; }

/* soft halo, tinted per status by the modifiers below */
.sz-err-mark::after {
  content: "";
  position: absolute;
  inset: -14px;
  border-radius: 50%;
  background: currentColor;
  opacity: .12;
  filter: blur(14px);
  z-index: -1;
}

.sz-err-info    .sz-err-mark { color: #38bdf8; }
.sz-err-warning .sz-err-mark { color: var(--sz-amber, #f6c23e); }
.sz-err-danger  .sz-err-mark { color: var(--sz-red, #ff5f5f); }
.sz-err-success .sz-err-mark { color: var(--sz-green, #28d17c); }

.sz-err-info    .sz-err-mark i, .sz-err-info    .sz-err-mark svg { color: #38bdf8; }
.sz-err-warning .sz-err-mark i, .sz-err-warning .sz-err-mark svg { color: var(--sz-amber, #f6c23e); }
.sz-err-danger  .sz-err-mark i, .sz-err-danger  .sz-err-mark svg { color: var(--sz-red, #ff5f5f); }
.sz-err-success .sz-err-mark i, .sz-err-success .sz-err-mark svg { color: var(--sz-green, #28d17c); }

/* ---------------------------------------------------------------- code + copy */
.sz-err-code {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .48);
  margin-bottom: 10px;
}

.sz-err-title {
  font-size: 27px;
  line-height: 1.25;
  font-weight: 700;
  color: #fff;
  margin: 0 0 12px;
}

.sz-err-text {
  font-size: 15px;
  line-height: 1.65;
  color: rgba(255, 255, 255, .70);
  margin: 0 auto 26px;
  max-width: 44ch;                    /* keeps the sentence readable, not a wide ribbon */
}

.sz-err-text a { color: #7fd8d8; text-decoration: underline; }
.sz-err-text a:hover { color: #a5e8e8; }

/* ---------------------------------------------------------------- actions */
.sz-err-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.sz-err-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  border-radius: var(--sz-radius, 8px);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, transform .05s ease;
}

.sz-err-btn:active { transform: translateY(1px); }

.sz-err-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(127, 216, 216, .45);
}

.sz-err-btn-primary {
  background: var(--sz-accent, #157373);
  border-color: var(--sz-accent, #157373);
  color: #fff;
}

.sz-err-btn-primary:hover {
  background: var(--sz-accent-hover, #158585);
  border-color: var(--sz-accent-hover, #158585);
  color: #fff;
}

.sz-err-btn-ghost {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .18);
  color: rgba(255, 255, 255, .90);
}

.sz-err-btn-ghost:hover {
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .30);
  color: #fff;
}

/* ---------------------------------------------------------------- detail block */
/* Technical detail (reference id, DB message in dev). Deliberately quiet: useful to
   whoever reports the problem, never the focus of the page. */
.sz-err-detail {
  margin-top: 26px;
  padding: 14px 16px;
  border-radius: var(--sz-radius, 8px);
  background: rgba(0, 0, 0, .22);
  border: 1px solid rgba(255, 255, 255, .10);
  text-align: left;
}

.sz-err-detail-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .45);
  margin-bottom: 6px;
}

.sz-err-detail code,
.sz-err-detail pre {
  display: block;
  font-family: Consolas, Monaco, "Courier New", monospace;
  font-size: 12.5px;
  line-height: 1.6;
  color: #9fe8e8;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;             /* a long stack trace must not widen the page */
}

.sz-err-ref {
  margin-top: 18px;
  font-size: 12.5px;
  color: rgba(255, 255, 255, .40);
}

.sz-err-ref code {
  font-family: Consolas, Monaco, "Courier New", monospace;
  color: rgba(255, 255, 255, .62);
  background: rgba(255, 255, 255, .07);
  padding: 2px 7px;
  border-radius: 4px;
}

/* ---------------------------------------------------------------- footer */
.sz-err-foot {
  margin-top: 30px;
  font-size: 12.5px;
  color: rgba(255, 255, 255, .38);
}

.sz-err-foot a { color: rgba(255, 255, 255, .62); text-decoration: none; }
.sz-err-foot a:hover { color: #fff; text-decoration: underline; }

/* ---------------------------------------------------------------- alerts */
/* flash_inc renders Bootstrap alerts; tone them for the dark canvas rather than
   letting a white alert box punch a hole in the page. */
.sz-err .alert {
  text-align: left;
  border-radius: var(--sz-radius, 8px);
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(0, 0, 0, .20);
  color: rgba(255, 255, 255, .88);
  margin-bottom: 22px;
}

.sz-err .alert a { color: #7fd8d8; }
.sz-err .alert .close { color: rgba(255, 255, 255, .6); text-shadow: none; opacity: 1; }

/* ---------------------------------------------------------------- responsive */
@media (max-width: 480px) {
  .sz-err-title { font-size: 22px; }
  .sz-err-text  { font-size: 14px; }
  .sz-err-mark  { width: 74px; height: 74px; }
  .sz-err-mark i, .sz-err-mark svg { font-size: 28px; width: 28px; height: 28px; }
  /* full-width stacked buttons are easier to hit than a wrapped row */
  .sz-err-actions { flex-direction: column; }
  .sz-err-btn { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .sz-err-btn { transition: none; }
  .sz-err-btn:active { transform: none; }
}

/* ============ /ERROR PAGES ============ */

/* ============================================================================
   PUBLIC ONBOARDING (self-service signup) — moved out of the inline header <style>.
   All rules are namespaced under .onboarding-* so they cannot affect other areas.
   Theme: teal (#05282c deep chrome -> #157373 accent), matching the app shell.
   ============================================================================ */
.onboarding-wrapper {
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, #05282c 0%, #157373 100%);
	padding: 2rem 1rem;
}
.onboarding-card {
	background: #fff;
	border-radius: 20px;
	box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);
	max-width: 480px;
	width: 100%;
	overflow: hidden;
	animation: onboardSlideUp 0.5s ease-out;
}
.onboarding-card.wide { max-width: 520px; }
@keyframes onboardSlideUp {
	from { opacity: 0; transform: translateY(30px); }
	to { opacity: 1; transform: translateY(0); }
}
.onboarding-header {
	background: linear-gradient(135deg, #05282c 0%, #157373 100%);
	padding: 2rem;
	text-align: center;
	color: #fff;
}
.onboarding-header.large { padding: 2.5rem 2rem; }
.onboarding-header .logo-icon {
	width: 70px;
	height: 70px;
	background: rgba(255,255,255,0.2);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 1rem;
	font-size: 2rem;
}
.onboarding-header h2 { margin: 0 0 0.25rem; font-weight: 700; font-size: 1.5rem; }
.onboarding-header.large h2 { margin: 0 0 0.5rem; font-size: 1.75rem; }
.onboarding-header p { margin: 0; opacity: 0.9; font-size: 0.9rem; }
.onboarding-header.large p { font-size: 0.95rem; }
.onboarding-body { padding: 2rem; }
.onboarding-body.centered { text-align: center; }
.step-progress {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 0.5rem;
	padding: 1rem 2rem;
	background: #f8fafc;
	border-bottom: 1px solid #e2e8f0;
}
.step-progress .step { display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; color: #94a3b8; }
.step-progress .step.active { color: #157373; font-weight: 600; }
.step-progress .step.completed { color: #10b981; }
.step-progress .step .num {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 0.8rem;
	background: #e2e8f0;
}
.step-progress .step.active .num { background: linear-gradient(135deg, #05282c 0%, #157373 100%); color: #fff; }
.step-progress .step.completed .num { background: #10b981; color: #fff; }
.step-progress .connector { width: 40px; height: 2px; background: #e2e8f0; }
.step-progress .connector.done { background: #10b981; }
.step-indicator { display: flex; justify-content: center; gap: 0.5rem; margin-bottom: 2rem; }
.step-dot { width: 12px; height: 12px; border-radius: 50%; background: #e2e8f0; transition: all 0.3s ease; }
.step-dot.active { background: linear-gradient(135deg, #05282c 0%, #157373 100%); transform: scale(1.2); }
.step-dot.completed { background: #10b981; }
.steps-list { margin-bottom: 2rem; }
.step-item {
	display: flex;
	align-items: flex-start;
	padding: 1rem;
	border-radius: 12px;
	margin-bottom: 0.75rem;
	background: #f8fafc;
	transition: all 0.3s ease;
}
.step-item:hover { background: #f1f5f9; transform: translateX(5px); }
.step-item .step-number {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 0.9rem;
	margin-right: 1rem;
	flex-shrink: 0;
}
.step-item.step-1 .step-number { background: #dbeafe; color: #2563eb; }
.step-item.step-2 .step-number { background: #fef3c7; color: #d97706; }
.step-item.step-3 .step-number { background: #d1fae5; color: #059669; }
.step-item .step-content h6 { margin: 0 0 0.25rem; font-weight: 600; color: #1e293b; }
.step-item .step-content p { margin: 0; font-size: 0.85rem; color: #64748b; }
.captcha-section { text-align: center; padding: 1.5rem; background: #f8fafc; border-radius: 12px; margin-bottom: 1.5rem; }
.captcha-section h6 { color: #475569; margin-bottom: 1rem; font-weight: 500; }
.g-recaptcha { display: inline-block; }
.form-floating { position: relative; margin-bottom: 1.25rem; }
.form-floating input,
.form-floating select {
	width: 100%;
	padding: 1rem 1rem 0.5rem 2.75rem;
	font-size: 1rem;
	border: 2px solid #e2e8f0;
	border-radius: 12px;
	background: #fff;
	transition: all 0.2s ease;
	height: 56px;
}
.form-floating input:focus,
.form-floating select:focus { outline: none; border-color: #157373; box-shadow: 0 0 0 4px rgba(21, 115, 115, 0.12); }
/* Anchor the icon to the INPUT's vertical centre (input height 56px -> 28px), not the container's:
   fields with a .hint below are taller, so top:50% pushed their icons down (password / WhatsApp). */
.form-floating .icon { position: absolute; left: 1rem; top: 28px; transform: translateY(-50%); color: #94a3b8; font-size: 1.1rem; transition: color 0.2s; }
.form-floating input:focus + .icon,
.form-floating select:focus + .icon { color: #157373; }
.form-floating label { position: absolute; left: 2.75rem; top: 0.5rem; font-size: 0.75rem; color: #64748b; font-weight: 500; pointer-events: none; }
.form-floating .hint { font-size: 0.75rem; color: #94a3b8; margin-top: 0.25rem; padding-left: 0.5rem; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 480px) { .form-row { grid-template-columns: 1fr; } }
.otp-inputs { display: flex; justify-content: center; gap: 0.5rem; margin-bottom: 1.5rem; }
.otp-inputs input {
	width: 48px;
	height: 56px;
	text-align: center;
	font-size: 1.5rem;
	font-weight: 700;
	border: 2px solid #e2e8f0;
	border-radius: 12px;
	background: #fff;
	transition: all 0.2s ease;
}
.otp-inputs input:focus { outline: none; border-color: #157373; box-shadow: 0 0 0 4px rgba(21, 115, 115, 0.12); }
.otp-inputs input.filled { border-color: #10b981; background: #f0fdf4; }
.btn-start,
.btn-submit,
.btn-verify,
.btn-login {
	display: block;
	width: 100%;
	padding: 1rem 2rem;
	font-size: 1.1rem;
	font-weight: 600;
	border: none;
	border-radius: 12px;
	background: linear-gradient(135deg, #05282c 0%, #157373 100%);
	color: #fff;
	cursor: pointer;
	transition: all 0.3s ease;
	text-decoration: none;
	text-align: center;
}
.btn-start:hover,
.btn-submit:hover,
.btn-verify:hover,
.btn-login:hover { transform: translateY(-2px); box-shadow: 0 10px 20px rgba(21, 115, 115, 0.3); color: #fff; text-decoration: none; }
.btn-start:active,
.btn-submit:active,
.btn-verify:active,
.btn-login:active { transform: translateY(0); }
.btn-start { display: none; margin-top: 1rem; }
.btn-start.show { display: block; animation: onboardFadeIn 0.3s ease; }
.btn-verify:disabled,
.btn-submit:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
@keyframes onboardFadeIn { from { opacity: 0; } to { opacity: 1; } }
.login-link { text-align: center; padding-top: 1.5rem; border-top: 1px solid #e2e8f0; margin-top: 1.5rem; }
.login-link a { color: #157373; font-weight: 600; text-decoration: none; transition: color 0.2s; }
.login-link a:hover { color: #05282c; }
.action-links { display: flex; justify-content: space-between; margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid #e2e8f0; }
.action-links button { background: none; border: none; color: #64748b; font-size: 0.9rem; cursor: pointer; transition: color 0.2s; padding: 0; }
.action-links button:hover { color: #157373; }
.alert-modern { padding: 1rem; border-radius: 12px; margin-bottom: 1.5rem; font-size: 0.9rem; }
.alert-modern.error { background: #fef2f2; border: 1px solid #fecaca; color: #dc2626; }
.alert-modern.success { background: #f0fdf4; border: 1px solid #bbf7d0; color: #16a34a; }
.info-box { background: #f8fafc; border-radius: 12px; padding: 1rem; margin-bottom: 1.5rem; font-size: 0.9rem; color: #475569; }
.warning-box { background: #fef3c7; border-radius: 12px; padding: 1rem; margin-bottom: 1.5rem; text-align: left; font-size: 0.9rem; color: #92400e; }
.warning-box i { margin-right: 0.5rem; }
.skip-note { margin-top: 1.5rem; padding: 1rem; background: #fef3c7; border-radius: 12px; font-size: 0.85rem; color: #92400e; }
.timer { font-size: 0.85rem; color: #64748b; margin-bottom: 1.5rem; }
.timer span { color: #157373; font-weight: 600; }
.email-icon {
	width: 80px;
	height: 80px;
	background: linear-gradient(135deg, #dbeafe 0%, #e0e7ff 100%);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 1.5rem;
	animation: onboardPulse 2s infinite;
}
@keyframes onboardPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
.email-icon i { font-size: 2.5rem; color: #157373; }
.user-info h4 { margin: 0 0 0.25rem; font-weight: 600; color: #1e293b; }
.user-info p { margin: 0 0 1.5rem; color: #64748b; font-size: 0.9rem; }
.success-header { background: linear-gradient(135deg, #10b981 0%, #059669 100%); padding: 3rem 2rem; text-align: center; color: #fff; }
.success-icon {
	width: 90px;
	height: 90px;
	background: rgba(255,255,255,0.2);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 1.5rem;
	animation: onboardScaleIn 0.5s ease-out 0.2s both;
}
@keyframes onboardScaleIn { from { transform: scale(0); } to { transform: scale(1); } }
.success-icon i { font-size: 3rem; }
.success-header h2 { margin: 0 0 0.5rem; font-weight: 700; font-size: 1.75rem; }
.success-header p { margin: 0; opacity: 0.9; }
.user-card { background: #f8fafc; border-radius: 16px; padding: 1.5rem; margin-bottom: 1.5rem; }
.user-card h4 { margin: 0 0 0.25rem; font-weight: 600; color: #1e293b; }
.user-card p { margin: 0 0 1rem; color: #64748b; font-size: 0.9rem; }
.status-badge { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; border-radius: 50px; font-size: 0.85rem; font-weight: 600; }
.status-badge.verified { background: #d1fae5; color: #059669; }
.status-badge.pending { background: #fef3c7; color: #d97706; }
.next-steps { background: #f8fafc; border-radius: 16px; padding: 1.5rem; margin-bottom: 1.5rem; text-align: left; }
.next-steps h5 { margin: 0 0 1rem; font-weight: 600; color: #1e293b; text-align: center; }
.next-steps .step-item { display: flex; align-items: flex-start; padding: 0.75rem 0; border-bottom: 1px solid #e2e8f0; margin-bottom: 0; background: transparent; }
.next-steps .step-item:hover { transform: none; background: transparent; }
.next-steps .step-item:last-child { border-bottom: none; padding-bottom: 0; }
.next-steps .step-item:first-child { padding-top: 0; }
.next-steps .step-item .step-icon {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 1rem;
	flex-shrink: 0;
	font-size: 0.9rem;
}
.next-steps .step-item .step-icon.blue { background: #dbeafe; color: #2563eb; }
.next-steps .step-item .step-icon.yellow { background: #fef3c7; color: #d97706; }
.next-steps .step-item .step-icon.green { background: #d1fae5; color: #059669; }
.next-steps .step-item .step-content h6 { margin: 0 0 0.25rem; font-weight: 600; color: #1e293b; font-size: 0.95rem; }
.next-steps .step-item .step-content p { margin: 0; font-size: 0.8rem; color: #64748b; }
.login-hint { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid #e2e8f0; font-size: 0.85rem; color: #64748b; }
.login-hint strong { color: #1e293b; }
.confetti { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; overflow: hidden; z-index: 1000; }
.confetti-piece { position: absolute; width: 10px; height: 10px; background: #157373; animation: onboardConfettiFall 3s ease-out forwards; }
@keyframes onboardConfettiFall { 0% { transform: translateY(-100vh) rotate(0deg); opacity: 1; } 100% { transform: translateY(100vh) rotate(720deg); opacity: 0; } }
/* ============ /PUBLIC ONBOARDING ============ */