/* Link colors */

body {
  font-size: 10pt;
  font-family: "Outfit", sans-serif, Tahoma;
  background-color: #fff;
  background-position: bottom;
  background-size: cover;
  background-attachment: scroll;
}

tr,
td,
div,
li,
select {
  font-family: "Outfit", sans-serif, Tahoma;
  font-size: 11pt;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type="number"] {
  -moz-appearance: textfield;
}

.copyright,
.copyright a {
  font-size: 9pt !important;
  color: #111;
}

#sidebarx {
  position: sticky;
  bottom: 0;
  width: 100vw;
  z-index: 100;
}
.sidebar-toggle {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 999;
}
.collapsed #sidebarx {
  display: none;
}

#facebox {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
  text-align: left;
}

#facebox .popup {
  position: relative;
  border: 3px solid rgba(0, 0, 0, 0);
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  -webkit-box-shadow: 0 0 18px rgba(0, 0, 0, 0.4);
  -moz-box-shadow: 0 0 18px rgba(0, 0, 0, 0.4);
  box-shadow: 0 0 18px rgba(0, 0, 0, 0.4);
}

#facebox .content {
  display: table;
  width: 370px;
  padding: 10px;
  background: #fff;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  font-family: Verdana;
}

#facebox .content > p:first-child {
  margin-top: 0;
}
#facebox .content > p:last-child {
  margin-bottom: 0;
}

#facebox .close {
  position: absolute;
  top: 5px;
  right: 5px;
  padding: 2px;
  background: #fff;
}
#facebox .close img {
  opacity: 0.3;
}
#facebox .close:hover img {
  opacity: 1;
}

#facebox .loading {
  text-align: center;
}

#facebox .image {
  text-align: center;
}

#facebox img {
  border: 0;
  margin: 0;
}

#facebox_overlay {
  position: fixed;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
}

.facebox_hide {
  z-index: -100;
}

.facebox_overlayBG {
  background-color: #000;
  z-index: 99;
}

b {
  font-weight: bold;
}

/* Carousel base class */
.carousel {
  height: 500px;
  margin-bottom: 60px;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
  z-index: 10;
}

/* Declare heights because of positioning of img element */
.carousel .item {
  height: 500px;
  background-color: #777;
}
.carousel-inner > .item > img {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  height: 500px;
}

.kecik td,
th {
  font-size: 10pt !important;
}

.kecike th td {
  font-size: 7pt !important;
}

.container-fluid.main {
  position: relative; /* To make the navbar positions relative to this container */
  padding: 0;
}

.carousel .background {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  height: 700px;
}

@media (max-width: 991px) {
  .carousel .background {
    background-size: cover; /* To make the background image looks good */
  }
}

.carousel .background.a {
  background-image: linear-gradient(rgba(0, 0, 0, 0.055), rgba(0, 0, 0, 0.055)),
    url("images/slides/a.jpg");
}

.carousel .background.b {
  background-image: linear-gradient(rgba(0, 0, 0, 0.055), rgba(0, 0, 0, 0.055)),
    url("images/slides/b.jpg");
}

.carousel .background.c {
  background-image: linear-gradient(rgba(0, 0, 0, 0.055), rgba(0, 0, 0, 0.055)),
    url("images/slides/c.jpg");
}

.carousel .background.d {
  background-image: linear-gradient(rgba(0, 0, 0, 0.055), rgba(0, 0, 0, 0.055)),
    url("images/slides/d.jpg");
}

.carousel-fade .carousel-inner .item {
  opacity: 0;
  transition: opacity 0.5s; /* The 0.5s describes the duration to make the opacity from 0 to 1 */
}

.carousel-fade .carousel-inner .active {
  opacity: 1;
}

/* CSS Hack to trigger GPU for smooth transition */
@media all and (transform-3d), (-webkit-transform-3d) {
  .carousel-fade .carousel-inner > .item.next,
  .carousel-fade .carousel-inner > .item.active.right {
    opacity: 0;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  .carousel-fade .carousel-inner > .item.prev,
  .carousel-fade .carousel-inner > .item.active.left {
    opacity: 0;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  .carousel-fade .carousel-inner > .item.next.left,
  .carousel-fade .carousel-inner > .item.prev.right,
  .carousel-fade .carousel-inner > .item.active {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
/* CSS Hack to trigger GPU for smooth transition */

.covertext {
  position: absolute; /* To make the div to be place anywhere. It is out of the document flow */
  top: 200px; /* The distance between the div with the top of document */
  left: 0px; /* Make the div full width */
  right: 0px; /* Make the div full width */
}

.title {
  font-family: Verdana;
  font-weight: 600;
  font-size: 30px;
  color: #ffffff;
  text-align: center;
}

.subtitle {
  font-family: Verdana;
  font-size: 15px;
  color: #ffffff;
  text-align: center;
}

div.day-number {
  background: orange;
  z-index: 2;
  top: 0px;
  right: -25px;
  padding: 2px;
  color: #fff;
  font-weight: bold;
  width: 20px;
  text-align: center;
}

.linkhitam a h4 h5 h6 {
  color: black;
}

table.calendar {
  border-collapse: collapse;
  border-color: #c5c5b3;
}

td.calendar-day,
td.calendar-day-np {
  width: 100px;
  padding: 2px;
  border-color: #c5c5b3;
}

td.calendar-day-head {
  font-weight: bold;
  font-size: 14px;
  background: forestgreen;
  color: white;
  padding: 5px;
  text-align: center;
  text-transform: uppercase;
}

div.event {
  font-weight: bold;
  margin-bottom: 2px;
}

.rowmerah td {
  background: #ffebee;
}

.footer-bs {
  background-color: #3c3d41;
  padding: 60px 40px;
  color: rgba(255, 255, 255, 1);
  margin-bottom: 20px;
  border-bottom-right-radius: 6px;
  border-top-left-radius: 0px;
  border-bottom-left-radius: 6px;
}
.footer-bs .footer-brand,
.footer-bs .footer-nav,
.footer-bs .footer-social,
.footer-bs .footer-ns {
  padding: 10px 25px;
}
.footer-bs .footer-nav,
.footer-bs .footer-social,
.footer-bs .footer-ns {
  border-color: transparent;
}
.footer-bs .footer-brand h2 {
  margin: 0px 0px 10px;
}
.footer-bs .footer-brand p {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
}

.footer-bs .footer-nav ul.pages {
  list-style: none;
  padding: 0px;
}
.footer-bs .footer-nav ul.pages li {
  padding: 5px 0px;
}
.footer-bs .footer-nav ul.pages a {
  color: rgba(255, 255, 255, 1);
  font-weight: bold;
  text-transform: uppercase;
}
.footer-bs .footer-nav ul.pages a:hover {
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
}
.footer-bs .footer-nav h4 {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 3px;
  margin-bottom: 10px;
}

.footer-bs .footer-nav ul.list {
  list-style: none;
  padding: 0px;
}
.footer-bs .footer-nav ul.list li {
  padding: 5px 0px;
}
.footer-bs .footer-nav ul.list a {
  color: rgba(255, 255, 255, 0.8);
}
.footer-bs .footer-nav ul.list a:hover {
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
}

.footer-bs .footer-social ul {
  list-style: none;
  padding: 0px;
}
.footer-bs .footer-social h4 {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 3px;
}
.footer-bs .footer-social li {
  padding: 5px 4px;
}
.footer-bs .footer-social a {
  color: rgba(255, 255, 255, 1);
}
.footer-bs .footer-social a:hover {
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
}

.footer-bs .footer-ns h4 {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 3px;
  margin-bottom: 10px;
}
.footer-bs .footer-ns p {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
}

@media (min-width: 768px) {
  .footer-bs .footer-nav,
  .footer-bs .footer-social,
  .footer-bs .footer-ns {
    border-left: solid 1px rgba(255, 255, 255, 0.1);
  }
}

.carousel-caption {
  position: absolute;
  right: 15%;
  bottom: 20px;
  left: 15%;
  z-index: 10;
  padding-top: 20px;
  padding-bottom: 20px;
  color: #fff;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

.panel ul {
  padding: 0px;
  margin: 0px;
  list-style: none;
}

.news-item {
  padding: 4px 4px;
  margin: 0px;
  border-bottom: 1px dotted #ccc;
}

.navbar-brand img {
  height: auto;
}

.items {
  width: 95%;
  margin: 0px auto;
}

.itemss {
  width: 95%;
  margin: 0px auto;
}

.slick-slide {
  margin: 10px;
}

.slick-slide img {
  width: 100%;
  border: 0px solid #fff;
}

.slick-prev:before,
.slick-next:before {
  color: black;
}

img {
  object-fit: cover;
}

.table th {
  text-align: center;
}

[onClick] {
  cursor: pointer;
}

.carousel-indicators {
  z-index: 2;
}

.bg1 {
  color: #2980b9;
}
.bg2 {
  color: #2c3e50;
}
.bg3 {
  color: #ecf0f1;
}
.bg4 {
  color: #7f8c8d;
}
.bg5 {
  color: #e74c3c;
}

.vercell > thead > tr > th,
.vercell > tbody > tr > th,
.vercell > tfoot > tr > th,
.vercell > thead > tr > td,
.vercell > tbody > tr > td,
.vercell > tfoot > tr > td {
  vertical-align: middle;
}

input[type="date"].form-control,
input[type="time"].form-control,
input[type="datetime-local"].form-control,
input[type="month"].form-control {
  line-height: initial;
}

.alpha60 {
  /* Fallback for web browsers that don't support RGBa */
  background-color: rgb(0, 0, 0);
  /* RGBa with 0.6 opacity */
  background-color: rgba(0, 0, 0, 0.6);
  /* For IE 5.5 - 7*/
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
  /* For IE 8*/
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
}

a {
  color: black;
  font-weight: bold;
}

input,
select {
  color: black;
}

.form-control {
  color: #3c3d41 !important;
}

.bg-success-light,
.bg-success-light td {
  background-color: #f1f8e9;
}
.bg-success-light,
.bg-success-light a {
  color: #000;
}
.bg-success-light a:hover,
.bg-success-light a:focus {
  color: #000;
}
.bg-warning-light,
.bg-warning-light td {
  background-color: #fff9c4;
}
.bg-warning-light,
.bg-warning-light a {
  color: #000;
}
.bg-warning-light a:hover,
.bg-warning-light a:focus {
  color: #000;
}
.bg-danger-light,
.bg-danger-light td {
  background-color: #ffebee;
}
.bg-danger-light,
.bg-danger-light a {
  color: #000;
}
.bg-danger-light a:hover,
.bg-danger-light a:focus {
  color: #000;
}
.aplikasi h6 {
  color: white;
}

.menuextend a {
  color: #ffccbc;
  font-weight: 400;
}

.text-9pt td {
  font-size: 9pt;
}

#menuguru .card:hover {
  transform: scale(1.05);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.06);
}

.zoom:hover {
  transform: scale(1.2);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.06);
}

.zoom2:hover {
  transform: scale(1.6);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.06);
}

.aplikasi2 a,
h6 {
  color: black;
}

#sidebar .nav-link[data-toggle].collapsed:after {
  content: " ▾";
}
#sidebar .nav-link[data-toggle]:not(.collapsed):after {
  content: " ▴";
}

#sidebar .nav-item {
  padding: 1px;
  font-weight: 400;
}

#sidebar .nav-link {
  padding: 5px;
  font-weight: 400;
}

a .subitem {
  padding: 5px;
}

.navmenu-link a {
  color: white;
}

.reben {
  width: 80%;
  height: 0;
  border-bottom: 20px solid #e64a19;
  border-top: 20px solid #bf360c;
  border-left: 15px solid transparent;
  float: right;
  margin-bottom: 20px;
  font-size: 13px;
  font-weight: 700;
  position: absolute;
  right: 0px;
  top: 0px;
  color: white;
}

.reben span {
  color: white;
  position: relative;
  top: -9px;
  text-align: center;
  right: -10px;
}

.bullety {
  counter-reset: li;
  margin: 0px;
  padding-left: 0px;
  color: rgb(100, 100, 100);
}

.bullety li {
  position: relative;
  padding-left: 3em;
  margin: 0.45em 0;
  margin-bottom: 1em;
  list-style: none;
  line-height: 1.2em;
  cursor: pointer;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  font-size: 20px;
}

.bullety li:hover {
  color: rgb(0, 0, 0);
}

.bullety li:before {
  content: counter(li);
  counter-increment: li;
  position: absolute;
  top: 0;
  left: 0;
  width: 1.8em;
  height: 1.8em;
  line-height: 1.8em;
  padding: 0px;
  color: #fff;
  background: #f9a825;
  font-weight: bold;
  text-align: center;
  border-radius: 0.9em;
  box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.3);
  z-index: 1;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.bullety li:hover:before {
  background-color: #2ecc71;
}

.bullety li li:before {
  background-color: #3498db;
}

.bullety li:after {
  position: absolute;
  top: 2.1em;
  left: 0.9em;
  width: 2px;
  height: calc(100% - 1em);
  content: "";
  background-color: rgb(203, 203, 203);
  z-index: 0;
}

.bullety li:hover:after {
  background-color: #2ecc71;
}

.bullety li li {
  font-size: 0.8em;
}

.clrbln {
  background: #fff59d;
}

.boldo {
  font-weight: bold;
}

.putih th td {
  color: white !important;
}

.preloading {
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background: url("../../images/favicon.png") 50% 50% no-repeat
    rgba(48, 48, 48, 0.8);
}

.nav-tabs-wrapper {
  display: block;
  overflow: hidden;
  height: calc(
    1.5rem + 1rem + 2px
  ); /** 1.5 is font-size, 1 is padding top and bottom, 2 is border width top and bottom */
  position: relative;
  z-index: 1;
  margin-bottom: -1px;
}

.nav-tabs {
  overflow-x: auto;
  overflow-y: hidden;
  flex-wrap: nowrap;
  border-bottom: 0;
}

.nav-link {
  white-space: nowrap;
}
.dragscroll:active,
.dragscroll:active a {
  cursor: -webkit-grabbing;
}

.nav-tabs-wrapper-border {
  display: block;
  width: 100%;
  border-top: 1px solid #ddd;
}

.tab-pane {
  padding: 1rem;
}

.jq-toast-single {
  display: block;
  width: 100%;
  padding: 10px;
  margin: 0 0 5px;
  border-radius: 4px;
  font-size: 15px;
  font-family: arial, sans-serif;
  line-height: 17px;
  position: relative;
  pointer-events: all !important;
  background-color: #444;
  color: #fff;
}

.pulse {
  animation: pulse-animation 2s infinite;
}

@keyframes pulse-animation {
  0% {
    box-shadow: 0 0 0 0px rgba(0, 0, 0, 0.2);
  }
  100% {
    box-shadow: 0 0 0 20px rgba(0, 0, 0, 0);
  }
}

.pulsate-bck {
  -webkit-animation: pulsate-bck 0.5s ease-in-out infinite both;
  animation: pulsate-bck 0.5s ease-in-out infinite both;
}

@-webkit-keyframes pulsate-bck {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  50% {
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes pulsate-bck {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  50% {
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

.fb-page,
.fb-page iframe[style],
.fb-page span {
  width: 100% !important;
}

.tulbar {
  float: left;
  margin-right: 10px;
  font-weight: bold;
}

.vGood {
  background-color: #9f0;
}

.good {
  background-color: rgb(0, 204, 255);
}

.avg {
  background-color: #fd0;
}

.poor {
  background-color: #fa0;
}

.vPoor {
  background-color: #f30;
  color: white !important;
}

.takisi {
  background-color: rgb(246, 222, 217);
  color: rgb(0, 0, 0) !important;
  border: 1px solid red;
}

.TakHadir {
  background-color: #b8d4ee;
  color: black !important;
}

.Kosong {
  background-color: #fffce8;
  color: rgb(192, 192, 192) !important;
}

.NA {
  background-color: #b1b1b1;
  color: rgb(100, 100, 100) !important;
}

.bg-hijaumuda th td {
  background: #e9ffdb;
}

.selectkecil {
  font-size: 7pt;
  height: 20px;
  padding: 0px;
  padding-left: 5px;
  width: 80px;
}

.selectkecil option {
  font-size: 7pt;
}

.selectmd {
  font-size: 9pt;
  height: 20px;
  padding: 0px;
  padding-left: 5px;
  width: 80px;
}

.fontarial tr td {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11pt;
}

.selectmd option {
  font-size: 9pt;
}

.fullscreen {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}

.rotated-th {
  height: 210px;
  position: relative;
}
.rotated-th__label {
  bottom: 0;
  left: 50%;
  position: absolute;
  transform: rotate(-90deg);
  transform-origin: center left;
  white-space: nowrap;
}

.rotated-th__labelx {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
  height: 100%;
  width: 100%;
  text-align: left;
  line-height: 1.2;
  font-size: 12px;
  position: relative;
  padding: 5px;
  cursor: pointer;
}

#table4x100 tbody tr:nth-child(4n) {
  border-bottom: 2px solid black;
}

.kecilan {
  font-size: 8pt !important;
}

.slctkecik {
  width: 100%;
  font-size: 9pt;
}

.blink {
  animation: blink-animation 1s steps(5, start) infinite;
  -webkit-animation: blink-animation 1s steps(5, start) infinite;
}
@keyframes blink-animation {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes blink-animation {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}

.scrolling-text-container {
  overflow: hidden;
  white-space: nowrap;
}

.scrolling-text {
  font-size: 24px;
  font-family: "Arial", sans-serif;
  color: #ff0000; /* Set your desired text color */
  display: inline-block;
  padding-left: 100%; /* Start off-screen */
  animation: scrollText 10s linear infinite; /* Adjust duration as needed */
}

@keyframes scrollText {
  to {
    padding-left: 0;
  }
}

.gambar3d {
  transform: perspective(400px) rotate3d(1, -1, 0, 8deg);
}
.gambar3d:hover {
  transform: perspective(400px) rotate3d(1, -1, 0, -8deg);
}

.bubble-left {
  /* Modify size here: */
  --size: 50px;

  position: relative;
  width: var(--size);
  height: calc(var(--size) * 0.66);
  background: #333;
  border-radius: 10px;
}

.bubble-left:before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 0;
  height: 0;
  border: calc(var(--size) * 0.13) solid transparent;
  border-right-color: #333;
  border-left: 0;
  margin-top: calc(var(--size) * 0.13 * -1);
  margin-left: calc(var(--size) * 0.13 * -1);
}

.image-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 10px;
  margin-top: 20px;
}
.image-grid img {
  width: 100%;
  height: auto;
}
.deleteable-image {
  cursor: pointer; /* Ubah cursor menjadi pointer saat dihover */
  border: 2px solid transparent; /* Tambahkan border transparan */
  transition: border-color 0.3s ease; /* Animasi perubahan border */
}

.deleteable-image:hover {
  border-color: red; /* Ubah border menjadi merah saat dihover */
}

.image-gridx {
  display: flex;
  flex-wrap: wrap; /* Membungkus gambar ke baris baru */
  gap: 10px; /* Jarak antara gambar */
}

.image-gridx img {
  flex: 1 1 calc(50% - 10px); /* 3 kolom per baris dengan jarak */
  max-width: 100%; /* Gambar tidak melebihi lebar container */
  height: 200px; /* Tetapkan tinggi tetap */
  object-fit: cover; /* Gambar akan di-crop untuk memenuhi container */
  border: 1px solid #ddd; /* Border untuk gambar */
  border-radius: 5px; /* Sudut border melengkung */
}

.image-container {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* Rasio aspek 16:9 (height = 56.25% of width) */
  overflow: hidden; /* Pastikan gambar tidak melebihi container */
  border: 1px solid #ddd; /* Border untuk container */
  border-radius: 5px; /* Sudut border melengkung */
}

.image-container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* Crop gambar untuk memenuhi container */
}

/* Tukar teks jadi putih semasa hover */
.nav-pills .nav-link:hover {
  color: #fff !important;
  background-color: #5a67d8; /* atau mana-mana warna latar yang anda gunakan */
}

/* Tukar teks dan latar semasa tab aktif */
.nav-pills .nav-link.active {
  background-color: #5a67d8; /* atau mana-mana warna latar yang anda gunakan */
  color: #fff !important;
}
.bg-primary-lembut {
  background-color: #e3f2fd; /* Biru lembut */
  color: #0d47a1; /* Biru pekat untuk teks (optional) */
}

.bg-success-lembut {
  background-color: #e8f5e9; /* Hijau lembut */
  color: #1b5e20; /* Hijau pekat untuk teks (optional) */
}

.bg-warning-lembut {
  background-color: #fff3e0; /* Jingga lembut */
  color: #e65100; /* Jingga pekat untuk teks (optional) */
}
/* --------------------------------------------
   Kelas bg-modern-<name> dengan warna latar dan
   teks yang sudah dikontras secara automatik
-------------------------------------------- */

/* 1. Soft Teal (bg-modern-teal: #2A9D8F → teks putih) */
.bg-modern-teal {
  background-color: #2a9d8f !important;
  color: #ffffff !important;
}

/* 2. Coral Peach (bg-modern-coral: #E76F51 → teks putih) */
.bg-modern-coral {
  background-color: #e76f51 !important;
  color: #ffffff !important;
}

/* 3. Lavender Purple (bg-modern-lavender: #9D4EDD → teks putih) */
.bg-modern-lavender {
  background-color: #9d4edd !important;
  color: #ffffff !important;
  font-weight: bolder;
}

/* 4. Mustard Yellow (bg-modern-mustard: #FFC300 → teks gelap #212529) */
.bg-modern-mustard {
  background-color: #ffc300 !important;
  color: #212529 !important;
}

/* 5. Mint Green (bg-modern-mint: #A8DADC → teks gelap #212529) */
.bg-modern-mint {
  background-color: #a8dadc !important;
  color: #212529 !important;
}

/* 6. Slate Gray (bg-modern-slate: #6C757D → teks putih) */
.bg-modern-slate {
  background-color: #6c757d !important;
  color: #ffffff !important;
}

/* 7. Electric Blue (bg-modern-electric: #3B82F6 → teks putih) */
.bg-modern-electric {
  background-color: #3b82f6 !important;
  color: #ffffff !important;
}

/* 8. Rose Pink (bg-modern-rose: #FF6B6B → teks putih) */
.bg-modern-rose {
  background-color: #ff6b6b !important;
  color: #ffffff !important;
}

/* 9. Charcoal Black (bg-modern-charcoal: #343A40 → teks putih) */
.bg-modern-charcoal {
  background-color: #343a40 !important;
  color: #ffffff !important;
}

/* 10. Sunrise Orange (bg-modern-sunrise: #FF922B → teks gelap #212529) */
.bg-modern-sunrise {
  background-color: #ff922b !important;
  color: #212529 !important;
}

.progress-circle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: conic-gradient(#ffcb46 var(--progress), #e0e0e0 0);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: bold;
  color: #333;
}

/* Masukmarkah dashboard UI */
.mm-page { margin-bottom: 20px; }

.mm-page-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 18px;
}

.mm-title {
  font-size: 1.45rem;
  font-weight: 700;
  color: #1a1f36;
  margin: 0;
}

.mm-subtitle {
  font-size: 0.85rem;
  color: #858796;
  margin: 4px 0 0;
}

.mm-head-actions { display: flex; gap: 8px; }

.mm-stats { margin-bottom: 16px; }

.mm-stat-card {
  display: flex;
  align-items: center;
  gap: 12px;
  border: none;
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.mm-stat-bg-blue   { background: linear-gradient(135deg, #e8f0fe 0%, #dbeafe 100%); }
.mm-stat-bg-purple { background: linear-gradient(135deg, #f3e8ff 0%, #ede9fe 100%); }
.mm-stat-bg-green  { background: linear-gradient(135deg, #dcfce7 0%, #d1fae5 100%); }
.mm-stat-bg-orange { background: linear-gradient(135deg, #ffedd5 0%, #fef3c7 100%); }

.mm-stat-icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  background: rgba(255, 255, 255, 0.75);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.mm-stat-icon-blue { color: #4e73df; }
.mm-stat-icon-purple { color: #764ba2; }
.mm-stat-icon-green { color: #1cc88a; }
.mm-stat-icon-orange { color: #e67e22; }

.mm-stat-bg-blue   .mm-stat-lbl { color: #3b5bdb; }
.mm-stat-bg-purple .mm-stat-lbl { color: #7c3aed; }
.mm-stat-bg-green  .mm-stat-lbl { color: #059669; }
.mm-stat-bg-orange .mm-stat-lbl { color: #d97706; }

.mm-stat-bg-blue   .mm-stat-sub { color: #6b8afd; }
.mm-stat-bg-purple .mm-stat-sub { color: #9f7aea; }
.mm-stat-bg-green  .mm-stat-sub { color: #34d399; }
.mm-stat-bg-orange .mm-stat-sub { color: #f59e0b; }

.mm-stat-val { font-size: 1.35rem; font-weight: 700; color: #1a1f36; line-height: 1.1; }
.mm-stat-lbl { font-size: 0.72rem; font-weight: 600; color: #858796; text-transform: uppercase; }
.mm-stat-sub { font-size: 0.72rem; color: #b7b9cc; }

.mm-filter-bar {
  background: #fff;
  border: 1px solid #e3e6f0;
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 16px;
}

.mm-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-end;
}

.mm-filter-field { flex: 0 0 110px; }
.mm-filter-field label { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; color: #858796; margin: 0 0 4px; display: block; }
.mm-filter-search { flex: 1 1 180px; max-width: 240px; }
.mm-filter-pills { flex: 1 1 280px; min-width: 200px; }
.mm-filter-length { flex: 0 0 85px; }

.mm-pills { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; min-height: 34px; }
.mm-pill {
  border: 1px solid #d1d3e2;
  background: #fff;
  border-radius: 20px;
  padding: 4px 12px;
  font-size: 0.75rem;
  font-weight: 600;
  color: #5a5c69;
  cursor: pointer;
}
.mm-pill:hover, .mm-pill.active { background: #4e73df; border-color: #4e73df; color: #fff; }
.mm-pill-reset { background: #f8f9fc; }

.mm-panel {
  background: #fff;
  border: 1px solid #e3e6f0;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,.04);
}

.mm-panel-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
  border-bottom: 1px solid #eef0f5;
  gap: 10px;
}

.mm-panel-head h3 { font-size: 0.95rem; font-weight: 700; margin: 0; color: #1a1f36; }

.mm-legend { display: flex; gap: 14px; font-size: 0.72rem; color: #858796; }
.mm-legend span { display: flex; align-items: center; gap: 5px; }
.mm-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.mm-dot-green { background: #1cc88a; }
.mm-dot-orange { background: #f6c23e; }
.mm-dot-gray { background: #d1d3e2; }

.mm-panel-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  padding: 10px 18px;
  border-top: 1px solid #eef0f5;
  gap: 10px;
}

#mm-info { font-size: 0.8rem; font-weight: 600; color: #858796; }

.masukmarkah-scroll {
  overflow: auto;
  max-height: calc(100vh - 340px);
}

.masukmarkah-grid {
  margin-bottom: 0;
  border-collapse: separate;
  border-spacing: 0;
}

.masukmarkah-grid thead th {
  position: sticky;
  top: 0;
  z-index: 4;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  color: #5a5c69;
  padding: 10px 6px;
  border-bottom: 2px solid #e3e6f0;
  white-space: nowrap;
}

.masukmarkah-grid .mm-subjek-th { font-size: 0.68rem; min-width: 72px; }
.masukmarkah-grid .mm-kemajuan-th { min-width: 90px; text-align: center; }

.masukmarkah-grid .mm-sticky {
  position: sticky;
  z-index: 2;
  background: #fff;
}

.masukmarkah-grid thead .mm-sticky {
  z-index: 5;
  background: #f8f9fc !important;
  color: #3a3b45;
}

.masukmarkah-grid tbody tr.mm-row-odd .mm-sticky { background: #fff; }
.masukmarkah-grid tbody tr.mm-row-even .mm-sticky { background: #f8faff; }
.masukmarkah-grid tbody tr.mm-row-even td:not(.mm-sticky):not(.mm-kemajuan) {
  box-shadow: inset 0 0 0 9999px rgba(78, 115, 223, 0.03);
}

.masukmarkah-grid tbody tr:hover .mm-sticky { background: #eef3ff; }
.masukmarkah-grid tbody td { padding: 6px; vertical-align: middle; border-bottom: 1px solid #f0f2f8; }
.masukmarkah-grid .mm-num { text-align: center; font-weight: 600; color: #858796; font-size: 0.8rem; width: 36px; }
.masukmarkah-grid .mm-col-1 { left: 0; min-width: 36px; }
.masukmarkah-grid .mm-col-2 { min-width: 220px; }
.masukmarkah-grid .mm-col-3 { min-width: 80px; }
.masukmarkah-grid .mm-kelas { font-size: 0.75rem; color: #858796; text-align: center; }

.mm-murid { display: flex; align-items: center; gap: 10px; }
.mm-photo {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(78, 115, 223, 0.2);
  background: #f0f2f8;
}
.mm-nama { font-size: 0.82rem; font-weight: 600; color: #1a1f36; }
.mm-status {
  display: inline-block;
  font-size: 0.62rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 10px;
  margin-left: 4px;
  vertical-align: middle;
}
.mm-status-lengkap { background: #e6f9f0; color: #1cc88a; }
.mm-status-belum { background: #fff3e0; color: #e67e22; }
.mm-status-tiada { background: #f0f2f8; color: #858796; }

.mm-mark-cell { text-align: center; vertical-align: middle; }

.mm-inp-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}

.mm-mark-cell .mm-inp {
  width: 63px !important;
  height: 28px;
  padding: 2px 4px;
  font-size: 0.78rem;
  font-weight: 600;
  border: 1px solid #d1d3e2;
  border-radius: 6px;
  display: block;
  margin: 0;
}

.mm-mark-cell .mm-inp-tp {
  width: 58px !important;
  font-size: 0.7rem;
  color: #858796;
  background: #fff url(../../images/tp.jpg) no-repeat center left;
  background-size: 14px;
  padding-left: 16px;
}
.mm-mark-cell .mm-inp:focus { border-color: #4e73df; box-shadow: 0 0 0 2px rgba(78,115,223,.15); }
.mm-col-active { outline: 2px solid #4e73df; outline-offset: -2px; }

.mm-kemajuan { text-align: center; min-width: 90px; }
.mm-progress { height: 6px; background: #eef0f5; border-radius: 4px; overflow: hidden; margin-bottom: 3px; }
.mm-progress-bar { height: 100%; background: linear-gradient(90deg, #667eea, #1cc88a); border-radius: 4px; width: 0; transition: width .3s; }
.mm-progress-txt { font-size: 0.65rem; color: #858796; }

.mm-select {
  appearance: none;
  width: 100%;
  height: 34px;
  padding: 0 28px 0 10px;
  font-size: 0.82rem;
  border: 1px solid #d1d3e2;
  border-radius: 8px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath fill='%23858796' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E") no-repeat right 10px center;
}
.mm-select:focus { outline: none; border-color: #4e73df; box-shadow: 0 0 0 2px rgba(78,115,223,.15); }
.mm-select:disabled { background-color: #f8f9fc; color: #858796; }

.mm-search-wrap { position: relative; }
.mm-search-icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); font-size: 0.78rem; color: #858796; pointer-events: none; }
.mm-search-input {
  width: 100%; height: 34px; padding: 0 10px 0 32px;
  font-size: 0.82rem; border: 1px solid #d1d3e2; border-radius: 8px; background: #fff;
}
.mm-search-input:focus { outline: none; border-color: #4e73df; box-shadow: 0 0 0 2px rgba(78,115,223,.15); }

.mm-copy-btn { font-size: 0.6rem !important; padding: 1px 4px !important; }

@media (max-width: 767px) {
  .mm-filter-pills { flex: 1 1 100%; }
  .masukmarkah-scroll { max-height: calc(100vh - 420px); }
}

/* Analisis charts — rounded + warna korporat SeTeja (#6050dc) */
.analisis-chart-card {
  background: linear-gradient(160deg, #f8f7ff 0%, #f3f5fb 50%, #eef2ff 100%);
  border: 1px solid #ddd8f8;
  border-radius: 22px;
  padding: 18px 18px 8px;
  margin-bottom: 22px;
  box-shadow: 0 10px 28px rgba(96, 80, 220, 0.12);
  position: relative;
  overflow: hidden;
}

.analisis-chart-card::before,
.analisis-chart-card::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

.analisis-chart-card::before {
  width: 120px;
  height: 120px;
  top: -36px;
  right: -24px;
  background: rgba(96, 80, 220, 0.12);
}

.analisis-chart-card::after {
  width: 90px;
  height: 90px;
  bottom: -28px;
  left: -18px;
  background: rgba(74, 61, 184, 0.08);
}

.analisis-chart-card > * {
  position: relative;
  z-index: 1;
}

.analisis-chart-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1rem;
  font-weight: 700;
  color: #4a3db8;
  margin: 0 0 8px;
  letter-spacing: 0.01em;
}

.analisis-chart-title .analisis-chart-emoji {
  width: 32px;
  height: 32px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  box-shadow: 0 2px 8px rgba(96, 80, 220, 0.14);
  font-size: 0.95rem;
  color: #6050dc;
}

.analisis-chart-canvas {
  width: 100%;
  min-height: 360px;
  border-radius: 18px;
  background: linear-gradient(180deg, #ffffff 0%, #f8f7ff 100%);
  border: 1px solid rgba(221, 216, 248, 0.95);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.analisis-chart-canvas svg rect[rx] {
  /* rounded bars from drawCuteChart */
}

.analisis-chart-canvas.analisis-chart-tall {
  min-height: 520px;
}

.analisis-chart-card svg rect[fill]:not([fill="none"]):not([fill="#ffffff"]):not([fill="#fff"]) {
  /* hint for browsers that support CSS on SVG attrs */
}

.analisis-chart-card svg text {
  font-family: "Outfit", "Segoe UI", sans-serif !important;
}

/* Dashboard Markah — toolbar & filter (korporat) */
.markah-dash-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 16px;
  margin-bottom: 16px;
  background: linear-gradient(135deg, #f8f7ff 0%, #eef2ff 55%, #f3f5fb 100%);
  border: 1px solid #ddd8f8;
  border-radius: 20px;
  box-shadow: 0 8px 22px rgba(96, 80, 220, 0.1);
}

.markah-dash-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: none;
  border-radius: 999px;
  padding: 10px 16px;
  font-size: 0.82rem;
  font-weight: 700;
  color: #3d3568 !important;
  background: #fff;
  box-shadow: 0 3px 10px rgba(96, 80, 220, 0.1);
  text-decoration: none !important;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  cursor: pointer;
  line-height: 1.2;
}

.markah-dash-btn i {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  color: #fff;
  flex-shrink: 0;
}

.markah-dash-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(96, 80, 220, 0.16);
  color: #4a3db8 !important;
  text-decoration: none !important;
}

.markah-dash-btn-pink i { background: linear-gradient(135deg, #6050dc, #7b6cf0); }
.markah-dash-btn-blue i { background: linear-gradient(135deg, #3b82f6, #60a5fa); }
.markah-dash-btn-mint i { background: linear-gradient(135deg, #0d9488, #2dd4bf); }
.markah-dash-btn-peach i { background: linear-gradient(135deg, #d97706, #f59e0b); }
.markah-dash-btn-sky i { background: linear-gradient(135deg, #0284c7, #38bdf8); }
.markah-dash-btn-lilac i { background: linear-gradient(135deg, #4a3db8, #8b5cf6); }

.markah-dash-btn-pink { background: #f0eeff; }
.markah-dash-btn-blue { background: #eff6ff; }
.markah-dash-btn-mint { background: #f0fdfa; }
.markah-dash-btn-peach { background: #fffbeb; }
.markah-dash-btn-sky { background: #f0f9ff; }
.markah-dash-btn-lilac { background: #f5f3ff; }

.markah-dash-btn-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  margin-left: 2px;
  border-radius: 999px;
  background: #6050dc;
  color: #fff !important;
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 800;
  line-height: 1;
}

.markah-dash-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  padding: 14px 16px;
  margin-bottom: 18px;
  background: #fff;
  border: 1px solid #ddd8f8;
  border-radius: 18px;
  box-shadow: 0 4px 14px rgba(96, 80, 220, 0.08);
}

.markah-dash-filter-item {
  flex: 1 1 200px;
  max-width: 280px;
}

.markah-dash-filter-item label {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #6050dc;
  margin-bottom: 6px;
}

.markah-dash-select {
  appearance: none;
  width: 100%;
  height: 40px;
  padding: 0 34px 0 14px;
  border: 1px solid #ddd8f8;
  border-radius: 14px;
  background: #f8f7ff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath fill='%236050dc' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E") no-repeat right 12px center;
  color: #3d3568;
  font-weight: 600;
  font-size: 0.88rem;
  box-shadow: inset 0 1px 2px rgba(96, 80, 220, 0.06);
}

.markah-dash-select:focus {
  outline: none;
  border-color: #6050dc;
  box-shadow: 0 0 0 3px rgba(96, 80, 220, 0.18);
}

.markah-dash-empty {
  text-align: center;
  padding: 48px 24px;
  margin: 8px 0 24px;
  background: linear-gradient(135deg, #f8f7ff 0%, #eef2ff 100%);
  border: 1px dashed #ddd8f8;
  border-radius: 22px;
  color: #3d3568;
}

/* Modal Kelas Diajar */
#modalKelasDiajar .kd-modal {
  border: none;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 20px 48px rgba(96, 80, 220, 0.22);
}

#modalKelasDiajar .kd-modal-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  background: linear-gradient(135deg, #6050dc 0%, #4a3db8 100%);
  color: #fff;
}

#modalKelasDiajar .kd-modal-header-ico {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.18);
  font-size: 1.1rem;
  flex-shrink: 0;
}

#modalKelasDiajar .kd-modal-header-text { flex: 1; min-width: 0; }

#modalKelasDiajar .kd-modal-header .modal-title {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 800;
  color: #fff;
}

#modalKelasDiajar .kd-modal-sub {
  margin: 2px 0 0;
  font-size: 0.78rem;
  opacity: 0.9;
}

#modalKelasDiajar .kd-modal-close {
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}

#modalKelasDiajar .kd-modal-close:hover { background: rgba(255, 255, 255, 0.28); }

#modalKelasDiajar .kd-modal-body {
  padding: 16px 20px 8px;
  background: #f8f7ff;
}

#modalKelasDiajar .kd-modal-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-bottom: 14px;
}

#modalKelasDiajar .kd-search-wrap {
  position: relative;
  flex: 1 1 180px;
}

#modalKelasDiajar .kd-search-wrap i {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
  font-size: 0.85rem;
}

#modalKelasDiajar .kd-search {
  width: 100%;
  height: 40px;
  padding: 0 12px 0 36px;
  border: 1px solid #ddd8f8;
  border-radius: 14px;
  background: #fff;
  color: #3d3568;
  font-weight: 600;
  font-size: 0.88rem;
}

#modalKelasDiajar .kd-search:focus {
  outline: none;
  border-color: #6050dc;
  box-shadow: 0 0 0 3px rgba(96, 80, 220, 0.18);
}

#modalKelasDiajar .kd-tools-actions {
  display: flex;
  gap: 8px;
}

#modalKelasDiajar .kd-mini-btn {
  border: 1px solid #ddd8f8;
  background: #fff;
  color: #4a3db8;
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
}

#modalKelasDiajar .kd-mini-btn:hover { background: #eef2ff; }

#modalKelasDiajar .kd-count {
  margin-left: auto;
  font-size: 0.8rem;
  font-weight: 700;
  color: #6050dc;
  background: #eef2ff;
  border-radius: 999px;
  padding: 6px 12px;
}

#modalKelasDiajar .kd-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  max-height: 420px;
  overflow: auto;
  padding: 4px 2px 8px;
}

#modalKelasDiajar .kd-item {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 10px 12px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid #ddd8f8;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
  user-select: none;
}

#modalKelasDiajar .kd-item:hover {
  border-color: #c4b5fd;
  box-shadow: 0 4px 12px rgba(96, 80, 220, 0.1);
}

#modalKelasDiajar .kd-item input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

#modalKelasDiajar .kd-box {
  width: 22px;
  height: 22px;
  border-radius: 7px;
  border: 2px solid #c4b5fd;
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: transparent;
  font-size: 0.7rem;
  flex-shrink: 0;
  transition: all 0.15s ease;
}

#modalKelasDiajar .kd-item input:checked + .kd-box {
  background: #6050dc;
  border-color: #6050dc;
  color: #fff;
}

#modalKelasDiajar .kd-item input:checked ~ .kd-text {
  color: #4a3db8;
  font-weight: 800;
}

#modalKelasDiajar .kd-text {
  font-size: 0.84rem;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}

#modalKelasDiajar .kd-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 28px;
  color: #94a3b8;
}

#modalKelasDiajar .kd-status {
  margin-top: 10px;
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 0.85rem;
  font-weight: 600;
}

#modalKelasDiajar .kd-status-ok {
  background: #ecfdf5;
  color: #047857;
  border: 1px solid #a7f3d0;
}

#modalKelasDiajar .kd-status-err {
  background: #fef2f2;
  color: #b91c1c;
  border: 1px solid #fecaca;
}

#modalKelasDiajar .kd-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 12px 20px 18px;
  background: #f8f7ff;
}

#modalKelasDiajar .kd-btn-secondary,
#modalKelasDiajar .kd-btn-primary {
  border: none;
  border-radius: 999px;
  padding: 9px 18px;
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
}

#modalKelasDiajar .kd-btn-secondary {
  color: #4a3db8;
  background: #fff;
  border: 1px solid #ddd8f8;
}

#modalKelasDiajar .kd-btn-secondary:hover { background: #eef2ff; }

#modalKelasDiajar .kd-btn-primary {
  color: #fff;
  background: linear-gradient(135deg, #6050dc, #4a3db8);
  box-shadow: 0 4px 14px rgba(96, 80, 220, 0.3);
}

#modalKelasDiajar .kd-btn-primary:hover {
  box-shadow: 0 6px 18px rgba(96, 80, 220, 0.38);
}

#modalKelasDiajar .kd-btn-primary:disabled {
  opacity: 0.7;
  cursor: wait;
}

@media (max-width: 767px) {
  #modalKelasDiajar .kd-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  #modalKelasDiajar .kd-count {
    margin-left: 0;
    width: 100%;
    text-align: center;
  }
}

/* Analisis Subjek — UI korporat rounded */
.as-filter-card {
  background: #fff;
  border: 1px solid #ddd8f8;
  border-radius: 22px;
  padding: 18px 20px 16px;
  margin-bottom: 18px;
  box-shadow: 0 8px 22px rgba(96, 80, 220, 0.1);
}

.as-filter-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.as-filter-head-ico {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #6050dc, #4a3db8);
  color: #fff;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(96, 80, 220, 0.25);
}

.as-filter-head h5 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 800;
  color: #4a3db8;
}

.as-filter-head p {
  margin: 2px 0 0;
  font-size: 0.82rem;
  color: #64748b;
}

.as-filter-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  align-items: end;
}

.as-filter-item label {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #6050dc;
  margin-bottom: 6px;
}

.as-select {
  appearance: none;
  width: 100%;
  height: 42px;
  padding: 0 34px 0 14px;
  border: 1px solid #ddd8f8;
  border-radius: 14px;
  background: #f8f7ff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath fill='%236050dc' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E") no-repeat right 12px center;
  color: #3d3568;
  font-weight: 600;
  font-size: 0.88rem;
}

.as-select:focus {
  outline: none;
  border-color: #6050dc;
  box-shadow: 0 0 0 3px rgba(96, 80, 220, 0.18);
}

.as-papar-btn {
  width: 100%;
  height: 42px;
  border: none;
  border-radius: 999px;
  background: linear-gradient(135deg, #6050dc, #4a3db8);
  color: #fff;
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(96, 80, 220, 0.28);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.as-papar-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(96, 80, 220, 0.35);
  color: #fff;
}

.as-result-wrap { min-height: 180px; }

.as-placeholder,
.as-loading {
  text-align: center;
  padding: 48px 20px;
  border-radius: 22px;
  border: 1px dashed #ddd8f8;
  background: linear-gradient(135deg, #f8f7ff 0%, #eef2ff 100%);
  color: #3d3568;
}

.as-placeholder-ico,
.as-loading i {
  width: 56px;
  height: 56px;
  margin: 0 auto 12px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #6050dc, #4a3db8);
  color: #fff;
  font-size: 1.2rem;
  box-shadow: 0 6px 16px rgba(96, 80, 220, 0.25);
}

.as-loading i {
  display: inline-flex;
}

.as-placeholder h5,
.as-loading p {
  margin: 0;
}

.as-placeholder h5 {
  font-weight: 800;
  color: #4a3db8;
  margin-bottom: 6px;
}

.as-placeholder p,
.as-loading p {
  color: #64748b;
  font-size: 0.92rem;
}

.as-loading-err {
  border-color: #fecaca;
  background: #fef2f2;
}

.as-loading-err i {
  background: linear-gradient(135deg, #ef4444, #dc2626);
}

.as-result-card {
  background: #fff;
  border: 1px solid #ddd8f8;
  border-radius: 22px;
  padding: 18px;
  box-shadow: 0 8px 22px rgba(96, 80, 220, 0.1);
}

.as-result-head {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.as-result-head-main {
  display: flex;
  align-items: center;
  gap: 12px;
}

.as-result-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 52px;
  height: 36px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 800;
  color: #fff;
}

.as-badge-tp { background: linear-gradient(135deg, #6050dc, #818CF8); }
.as-badge-gred { background: linear-gradient(135deg, #0d9488, #2dd4bf); }

.as-result-head h5 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 800;
  color: #4a3db8;
}

.as-result-head p {
  margin: 2px 0 0;
  font-size: 0.8rem;
  color: #64748b;
}

.as-result-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.as-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: none;
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 0.8rem;
  font-weight: 700;
  text-decoration: none !important;
  cursor: pointer;
  transition: transform 0.15s ease;
}

.as-action-btn:hover { transform: translateY(-1px); }

.as-action-excel {
  background: #ecfdf5;
  color: #047857 !important;
  border: 1px solid #a7f3d0;
}

.as-action-pdf {
  background: #fef2f2;
  color: #b91c1c !important;
  border: 1px solid #fecaca;
}

.as-table-wrap {
  border-radius: 16px;
  border: 1px solid #ddd8f8;
  overflow: auto;
  background: #fff;
}

.as-table {
  width: 100%;
  margin: 0;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.86rem;
  color: #3d3568;
}

.as-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: linear-gradient(180deg, #f0eeff 0%, #eef2ff 100%);
  color: #4a3db8;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 12px 8px;
  border-bottom: 1px solid #ddd8f8;
  text-align: center;
  white-space: nowrap;
}

.as-table thead th:first-child { text-align: left; padding-left: 14px; }

.as-table tbody td {
  padding: 10px 8px;
  border-bottom: 1px solid #eef2ff;
  vertical-align: middle;
}

.as-table tbody tr:hover td { background: #f8f7ff; }
.as-table tbody tr:last-child td { border-bottom: none; }

.as-kelas {
  font-weight: 700;
  color: #3d3568;
  text-align: left !important;
  padding-left: 14px !important;
  white-space: nowrap;
}

.as-total-row td {
  background: #f0eeff !important;
  font-weight: 800;
  color: #4a3db8;
}

.as-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  color: #fff;
}

.as-pill-ok { background: linear-gradient(135deg, #16a34a, #22c55e); }
.as-pill-bad { background: linear-gradient(135deg, #dc2626, #f87171); }

.as-pct-ok { color: #16a34a; font-weight: 700; }
.as-pct-bad { color: #dc2626; font-weight: 700; }

.as-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.as-stat {
  flex: 1 1 120px;
  min-width: 110px;
  padding: 12px 14px;
  border-radius: 14px;
  background: #f8f7ff;
  border: 1px solid #ddd8f8;
  text-align: center;
}

.as-stat-val {
  display: block;
  font-size: 1.2rem;
  font-weight: 800;
  color: #4a3db8;
  line-height: 1.2;
}

.as-stat-lbl {
  display: block;
  margin-top: 2px;
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #94a3b8;
}

.as-stat-ok .as-stat-val { color: #16a34a; }
.as-stat-bad .as-stat-val { color: #dc2626; }
.as-stat-avg .as-stat-val { color: #6050dc; }

@media (max-width: 991px) {
  .as-filter-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .as-filter-action { grid-column: 1 / -1; }
}

@media (max-width: 575px) {
  .as-filter-grid {
    grid-template-columns: 1fr;
  }
}

/* Grid Pencapaian — UI korporat rounded */
.gm-filter-card,
.gm-table-card {
  background: #fff;
  border: 1px solid #ddd8f8;
  border-radius: 22px;
  padding: 18px 20px;
  margin-bottom: 18px;
  box-shadow: 0 8px 22px rgba(96, 80, 220, 0.1);
}

.gm-filter-head,
.gm-table-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.gm-filter-head-ico,
.gm-table-head-ico {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #6050dc, #4a3db8);
  color: #fff;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(96, 80, 220, 0.25);
}

.gm-filter-head h5,
.gm-table-head h5 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 800;
  color: #4a3db8;
}

.gm-filter-head p,
.gm-table-head p {
  margin: 2px 0 0;
  font-size: 0.82rem;
  color: #64748b;
}

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

.gm-filter-wide { grid-column: span 2; }

.gm-filter-item label {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #6050dc;
  margin-bottom: 6px;
}

.gm-filter-card .form-control,
.gm-filter-card select {
  appearance: none;
  width: 100%;
  height: 42px;
  padding: 0 34px 0 14px;
  border: 1px solid #ddd8f8 !important;
  border-radius: 14px !important;
  background: #f8f7ff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath fill='%236050dc' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E") no-repeat right 12px center !important;
  color: #3d3568;
  font-weight: 600;
  font-size: 0.88rem;
  box-shadow: none !important;
}

.gm-filter-card .form-control:focus,
.gm-filter-card select:focus {
  outline: none;
  border-color: #6050dc !important;
  box-shadow: 0 0 0 3px rgba(96, 80, 220, 0.18) !important;
}

.gm-table-wrap { overflow: auto; }

#gridmarkah_wrapper .dataTables_length,
#gridmarkah_wrapper .dataTables_filter,
#gridmarkah_wrapper .dataTables_info,
#gridmarkah_wrapper .dataTables_paginate {
  color: #64748b;
  font-size: 0.86rem;
  padding-top: 8px;
}

#gridmarkah_wrapper .dataTables_filter input {
  border: 1px solid #ddd8f8;
  border-radius: 999px;
  padding: 6px 14px;
  margin-left: 8px;
  background: #f8f7ff;
  color: #3d3568;
}

#gridmarkah_wrapper .dataTables_filter input:focus {
  outline: none;
  border-color: #6050dc;
  box-shadow: 0 0 0 3px rgba(96, 80, 220, 0.15);
}

#gridmarkah_wrapper .dataTables_length select {
  border: 1px solid #ddd8f8;
  border-radius: 10px;
  padding: 4px 8px;
  background: #f8f7ff;
  color: #3d3568;
}

#gridmarkah_wrapper .dt-buttons .btn,
#gridmarkah_wrapper .dt-buttons .dt-button {
  border: none !important;
  border-radius: 999px !important;
  padding: 7px 14px !important;
  margin: 2px 4px !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  background: #eef2ff !important;
  color: #4a3db8 !important;
  box-shadow: none !important;
}

#gridmarkah_wrapper .dt-buttons .buttons-excel {
  background: #ecfdf5 !important;
  color: #047857 !important;
}

#gridmarkah_wrapper .dt-buttons .buttons-pdf {
  background: #fef2f2 !important;
  color: #b91c1c !important;
}

#gridmarkah_wrapper .paginate_button {
  border-radius: 999px !important;
  border: 1px solid #ddd8f8 !important;
  background: #fff !important;
  color: #4a3db8 !important;
  margin: 0 2px !important;
}

#gridmarkah_wrapper .paginate_button.current,
#gridmarkah_wrapper .paginate_button:hover {
  background: linear-gradient(135deg, #6050dc, #4a3db8) !important;
  color: #fff !important;
  border-color: transparent !important;
}

.gm-table {
  width: 100% !important;
  margin: 0;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.86rem;
  color: #3d3568;
}

.gm-table thead th {
  background: linear-gradient(180deg, #f0eeff 0%, #eef2ff 100%) !important;
  color: #4a3db8 !important;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 12px 10px !important;
  border-bottom: 1px solid #ddd8f8 !important;
  border-top: none !important;
  white-space: nowrap;
  vertical-align: middle;
}

.gm-table tbody td {
  padding: 10px !important;
  border-top: none !important;
  border-bottom: 1px solid #eef2ff !important;
  vertical-align: middle !important;
  background: #fff;
}

.gm-table tbody tr:hover td { background: #f8f7ff !important; }

.gm-murid {
  text-align: left;
  white-space: nowrap;
}

.gm-murid a {
  color: #4a3db8;
  font-weight: 700;
  text-decoration: none;
}

.gm-murid a:hover { color: #6050dc; text-decoration: underline; }

.gm-slip-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  margin-left: 6px;
  border-radius: 50%;
  background: #eef2ff;
  color: #6050dc !important;
  text-decoration: none !important;
  font-size: 0.72rem;
  vertical-align: middle;
}

.gm-slip-btn:hover { background: #6050dc; color: #fff !important; }

.gm-program { white-space: normal; }

.gm-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 22px;
  padding: 2px 8px;
  margin: 1px 2px 1px 0;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
}

.gm-pill-muted { background: #94a3b8; }
.gm-pill-bad { background: linear-gradient(135deg, #dc2626, #f87171); }
.gm-pill-info { background: linear-gradient(135deg, #0284c7, #38bdf8); }
.gm-pill-brand { background: linear-gradient(135deg, #6050dc, #818CF8); }
.gm-pill-ok { background: linear-gradient(135deg, #16a34a, #22c55e); }

.gm-sesi,
.gm-nokp,
.gm-subjek,
.gm-markah,
.gm-kelas {
  font-weight: 600;
  color: #3d3568;
}

.gm-tahun-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 26px;
  padding: 0 8px;
  border-radius: 999px;
  background: #eef2ff;
  color: #6050dc;
  font-weight: 700;
  font-size: 0.8rem;
}

.gm-tp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 26px;
  padding: 0 8px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 0.78rem;
  color: #fff;
  background: #6050dc;
}

.gm-tp-1 { background: #FCA5A5; color: #7f1d1d; }
.gm-tp-2 { background: #FDBA74; color: #7c2d12; }
.gm-tp-3 { background: #FDE68A; color: #854d0e; }
.gm-tp-4 { background: #A78BFA; }
.gm-tp-5 { background: #818CF8; }
.gm-tp-6 { background: #6050dc; }

.gm-del-btn {
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 50%;
  background: #fef2f2;
  color: #dc2626;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(220, 38, 38, 0.12);
  transition: transform 0.15s ease, background 0.15s ease;
}

.gm-del-btn:hover {
  transform: translateY(-1px);
  background: #dc2626;
  color: #fff;
}

@media (max-width: 991px) {
  .gm-filter-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .gm-filter-wide { grid-column: span 2; }
}

@media (max-width: 575px) {
  .gm-filter-grid {
    grid-template-columns: 1fr;
  }
  .gm-filter-wide { grid-column: auto; }
}

/* Rumusan Markah — UI korporat rounded */
.rm-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  margin-bottom: 18px;
  border-radius: 22px;
  background: linear-gradient(135deg, #6050dc 0%, #4a3db8 100%);
  color: #fff;
  box-shadow: 0 10px 28px rgba(96, 80, 220, 0.22);
}

.rm-hero-ico {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.18);
  font-size: 1.2rem;
  flex-shrink: 0;
}

.rm-hero-text { flex: 1; min-width: 180px; }

.rm-hero-text h4 {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 800;
  color: #fff;
}

.rm-hero-text p {
  margin: 4px 0 0;
  font-size: 0.85rem;
  opacity: 0.9;
}

.rm-hero-stat {
  text-align: center;
  padding: 10px 16px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.16);
  min-width: 96px;
}

.rm-hero-stat-val {
  display: block;
  font-size: 1.4rem;
  font-weight: 800;
  line-height: 1.1;
}

.rm-hero-stat-lbl {
  display: block;
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  opacity: 0.9;
  margin-top: 2px;
}

.rm-table-card {
  background: #fff;
  border: 1px solid #ddd8f8;
  border-radius: 22px;
  padding: 16px 18px 18px;
  margin-bottom: 18px;
  box-shadow: 0 8px 22px rgba(96, 80, 220, 0.1);
}

.rm-table-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.rm-table-head h5 {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 800;
  color: #4a3db8;
}

.rm-table-head p {
  margin: 2px 0 0;
  font-size: 0.8rem;
  color: #64748b;
}

.rm-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
  color: #fff;
  flex-shrink: 0;
}

.rm-badge-tp { background: linear-gradient(135deg, #6050dc, #818CF8); }
.rm-badge-gred { background: linear-gradient(135deg, #0d9488, #2dd4bf); }

.rm-table-wrap {
  border-radius: 16px;
  border: 1px solid #ddd8f8;
  overflow: auto;
}

.rm-table {
  width: 100%;
  margin: 0;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.84rem;
  color: #3d3568;
}

.rm-table thead th {
  background: linear-gradient(180deg, #f0eeff 0%, #eef2ff 100%);
  color: #4a3db8;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  padding: 10px 8px;
  border-bottom: 1px solid #ddd8f8;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
}

.rm-table thead th.rm-th-ok {
  background: #ecfdf5;
  color: #047857;
}

.rm-table thead th.rm-th-bad {
  background: #fef2f2;
  color: #b91c1c;
}

.rm-table tbody td {
  padding: 9px 8px;
  border-bottom: 1px solid #eef2ff;
  vertical-align: middle;
  text-align: center;
}

.rm-table tbody tr:hover td { background: #f8f7ff; }
.rm-table tbody tr:last-child td { border-bottom: none; }

.rm-subjek {
  text-align: left !important;
  font-weight: 700;
  color: #3d3568;
  white-space: nowrap;
  padding-left: 12px !important;
}

.rm-calon {
  font-weight: 800;
  color: #4a3db8;
  background: #f8f7ff !important;
}

.rm-cell-ok { background: #f0fdf4; }
.rm-cell-bad { background: #fef2f2; }
.rm-strong { font-weight: 800; }

/* Kedudukan Murid Mengikut Kelas */
.rk-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  margin-bottom: 16px;
  border-radius: 22px;
  background: linear-gradient(135deg, #6050dc 0%, #4a3db8 100%);
  color: #fff;
  box-shadow: 0 10px 28px rgba(96, 80, 220, 0.22);
}

.rk-hero-ico {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.18);
  font-size: 1.2rem;
  flex-shrink: 0;
}

.rk-hero-text { flex: 1; min-width: 180px; }

.rk-hero-text h4 {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 800;
  color: #fff;
}

.rk-hero-text p {
  margin: 4px 0 0;
  font-size: 0.85rem;
  opacity: 0.9;
}

.rk-hero-stat {
  text-align: center;
  padding: 10px 16px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.16);
  min-width: 88px;
}

.rk-hero-stat-val {
  display: block;
  font-size: 1.4rem;
  font-weight: 800;
  line-height: 1.1;
}

.rk-hero-stat-lbl {
  display: block;
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  opacity: 0.9;
  margin-top: 2px;
}

.rk-filter-card {
  background: #fff;
  border: 1px solid #ddd8f8;
  border-radius: 22px;
  padding: 16px 18px;
  margin-bottom: 18px;
  box-shadow: 0 8px 22px rgba(96, 80, 220, 0.1);
}

.rk-filter-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr auto;
  gap: 12px;
  align-items: end;
}

.rk-filter-grid-4 {
  grid-template-columns: 1.4fr 1.2fr 0.9fr auto;
}

.rk-filter-item label {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #6050dc;
  margin-bottom: 6px;
}

.rk-input,
.rk-select {
  appearance: none;
  width: 100%;
  height: 42px;
  padding: 0 14px;
  border: 1px solid #ddd8f8;
  border-radius: 14px;
  background: #f8f7ff;
  color: #3d3568;
  font-weight: 600;
  font-size: 0.88rem;
}

.rk-select {
  padding-right: 34px;
  background: #f8f7ff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath fill='%236050dc' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E") no-repeat right 12px center;
}

.rk-input:focus,
.rk-select:focus {
  outline: none;
  border-color: #6050dc;
  box-shadow: 0 0 0 3px rgba(96, 80, 220, 0.18);
}

.rk-reset-btn {
  height: 42px;
  border: 1px solid #ddd8f8;
  border-radius: 999px;
  padding: 0 18px;
  background: #fff;
  color: #4a3db8;
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
  white-space: nowrap;
}

.rk-reset-btn:hover { background: #eef2ff; }

.rk-tahun-block { margin-bottom: 18px; }

.rk-tahun-head { margin-bottom: 10px; }

.rk-tahun-pill {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  border-radius: 999px;
  background: linear-gradient(135deg, #6050dc, #4a3db8);
  color: #fff;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  box-shadow: 0 4px 12px rgba(96, 80, 220, 0.25);
}

.rk-kelas-card {
  background: #fff;
  border: 1px solid #ddd8f8;
  border-radius: 22px;
  padding: 14px 16px 16px;
  margin-bottom: 14px;
  box-shadow: 0 6px 18px rgba(96, 80, 220, 0.08);
}

.rk-kelas-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.rk-kelas-head-ico {
  width: 40px;
  height: 40px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #6050dc, #818CF8);
  color: #fff;
  flex-shrink: 0;
}

.rk-kelas-head h5 {
  margin: 0;
  font-size: 1rem;
  font-weight: 800;
  color: #4a3db8;
}

.rk-kelas-head p {
  margin: 2px 0 0;
  font-size: 0.78rem;
  color: #64748b;
}

.rk-table-wrap {
  border-radius: 16px;
  border: 1px solid #ddd8f8;
  overflow: auto;
}

.rk-table {
  width: 100%;
  margin: 0;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.8rem;
  color: #3d3568;
}

.rk-table thead th {
  background: linear-gradient(180deg, #f0eeff 0%, #eef2ff 100%);
  color: #4a3db8;
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  padding: 10px 8px;
  border-bottom: 1px solid #ddd8f8;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
}

.rk-table thead th.text-left { text-align: left; padding-left: 12px; }
.rk-th-subj { background: #f5f3ff !important; }

.rk-table tbody td {
  padding: 8px;
  border-bottom: 1px solid #eef2ff;
  vertical-align: middle;
}

.rk-table tbody tr:hover td { background: #f8f7ff; }
.rk-table tbody tr:last-child td { border-bottom: none; }

.rk-row-gold td { background: #fffbeb !important; }
.rk-row-silver td { background: #f8fafc !important; }
.rk-row-bronze td { background: #fff7ed !important; }

.rk-rank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-weight: 800;
  font-size: 0.78rem;
}

.rk-rank-1 { background: linear-gradient(135deg, #f59e0b, #fbbf24); color: #fff; }
.rk-rank-2 { background: linear-gradient(135deg, #94a3b8, #cbd5e1); color: #fff; }
.rk-rank-3 { background: linear-gradient(135deg, #d97706, #fdba74); color: #fff; }
.rk-rank-n { background: #eef2ff; color: #4a3db8; }

.rk-nama { text-align: left !important; min-width: 180px; }
.rk-nama-wrap strong { color: #3d3568; }
.rk-badges { margin-top: 4px; }
.rk-nokp { font-family: ui-monospace, monospace; font-size: 0.75rem; color: #64748b; }
.rk-strong { font-weight: 800; color: #4a3db8; }

.rk-pct {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 64px;
  height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  background: #eef2ff;
  color: #6050dc;
  font-weight: 800;
  font-size: 0.75rem;
}

.rk-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 20px;
  padding: 2px 8px;
  margin: 1px 2px 1px 0;
  border-radius: 999px;
  font-size: 0.65rem;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
}

.rk-pill-ok { background: linear-gradient(135deg, #16a34a, #22c55e); }
.rk-pill-brand { background: linear-gradient(135deg, #6050dc, #818CF8); }
.rk-pill-warn { background: #f59e0b; }

.rk-subj-cell { font-size: 0.75rem; line-height: 1.25; }
.rk-subj-cell small { color: #64748b; }
.rk-low { color: #dc2626 !important; font-weight: 800; }
.rk-empty { color: #cbd5e1; }

.rk-actions { white-space: nowrap; }

.rk-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  margin: 0 2px;
  transition: transform 0.15s ease;
}

.rk-btn:hover { transform: translateY(-1px); }
.rk-btn-ok { background: #ecfdf5; color: #047857; }
.rk-btn-brand { background: #eef2ff; color: #6050dc; }
.rk-btn-dark { background: #f1f5f9; color: #334155; }
.rk-btn-ok:hover { background: #16a34a; color: #fff; }
.rk-btn-brand:hover { background: #6050dc; color: #fff; }
.rk-btn-dark:hover { background: #334155; color: #fff; }

.rk-empty-state {
  text-align: center;
  padding: 36px 16px;
  border-radius: 18px;
  border: 1px dashed #ddd8f8;
  background: #f8f7ff;
  color: #64748b;
  margin-top: 8px;
}

.rk-empty-state i {
  display: block;
  font-size: 1.5rem;
  color: #6050dc;
  margin-bottom: 8px;
}

.rk-empty-state p { margin: 0; font-weight: 600; }

#modalAuditMurid .rk-modal {
  border: none;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 20px 48px rgba(96, 80, 220, 0.22);
}

#modalAuditMurid .rk-modal-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  background: linear-gradient(135deg, #6050dc, #4a3db8);
  color: #fff;
}

#modalAuditMurid .rk-modal-header-ico {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.18);
}

#modalAuditMurid .rk-modal-header-text { flex: 1; }
#modalAuditMurid .rk-modal-header .modal-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 800;
  color: #fff;
}

#modalAuditMurid .rk-modal-header p {
  margin: 2px 0 0;
  font-size: 0.78rem;
  opacity: 0.9;
}

#modalAuditMurid .rk-modal-close {
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

#modalAuditMurid .rk-modal-body {
  background: #f8f7ff;
  padding: 16px 18px;
}

#modalAuditMurid .rk-modal-footer {
  display: flex;
  justify-content: flex-end;
  padding: 12px 18px 16px;
  background: #f8f7ff;
}

.rk-audit-loading {
  text-align: center;
  padding: 40px 16px;
  color: #6050dc;
}

.rk-audit-loading p {
  margin: 10px 0 0;
  font-weight: 600;
  color: #64748b;
}

@media (max-width: 991px) {
  .rk-filter-grid-4 {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 767px) {
  .rk-filter-grid,
  .rk-filter-grid-4 {
    grid-template-columns: 1fr;
  }
}

/* Kedudukan Murid Mengikut Subjek */
.rs-subjek-card {
  background: #fff;
  border: 1px solid #ddd8f8;
  border-radius: 22px;
  padding: 14px 16px 16px;
  margin-bottom: 18px;
  box-shadow: 0 8px 22px rgba(96, 80, 220, 0.1);
}

.rs-subjek-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  padding: 4px 2px 12px;
  border-bottom: 1px solid #eef2ff;
}

.rs-subjek-head-ico {
  width: 40px;
  height: 40px;
  min-width: 40px;
  max-width: 40px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #6050dc, #818CF8);
  color: #fff;
  flex: 0 0 40px;
  box-shadow: 0 3px 10px rgba(96, 80, 220, 0.22);
  font-size: 0.95rem;
}

.rs-subjek-head-text {
  flex: 1 1 auto;
  min-width: 0;
}

.rs-subjek-head-text h5 {
  margin: 0;
  font-size: 1rem;
  font-weight: 800;
  color: #4a3db8;
  line-height: 1.25;
  letter-spacing: 0.01em;
}

.rs-subjek-head-text p {
  margin: 3px 0 0;
  font-size: 0.76rem;
  color: #94a3b8;
  line-height: 1.2;
}

.rs-subjek-head-text p strong {
  color: #6050dc;
  font-weight: 700;
}

.rs-subjek-code {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: #eef2ff;
  color: #6050dc;
  font-size: 0.72rem;
  font-weight: 800;
  flex: 0 0 auto;
  letter-spacing: 0.04em;
}

.rs-tahun-section {
  margin-bottom: 14px;
}

.rs-tahun-section:last-child {
  margin-bottom: 0;
}

.rs-tahun-label {
  margin: 4px 0 8px;
}

.rs-table {
  font-size: 0.84rem;
}

.markah-dash-empty-ico {
  width: 56px;
  height: 56px;
  margin: 0 auto 14px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #6050dc, #4a3db8);
  color: #fff;
  font-size: 1.25rem;
  box-shadow: 0 6px 16px rgba(96, 80, 220, 0.25);
}

.markah-dash-empty h5 {
  font-weight: 800;
  color: #4a3db8;
  margin-bottom: 8px;
}

.markah-dash-empty p {
  margin: 0;
  font-size: 0.92rem;
  color: #64748b;
  line-height: 1.55;
}

@media (max-width: 767px) {
  .markah-dash-btn span {
    font-size: 0.75rem;
  }
  .markah-dash-filter-item {
    max-width: none;
  }
}

/* Modal Laporan Pengisian — UI korporat rounded */
#modalLaporanPengisian .lp-modal {
  border: none;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 20px 48px rgba(96, 80, 220, 0.22);
}

#modalLaporanPengisian .lp-modal-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  background: linear-gradient(135deg, #6050dc 0%, #4a3db8 100%);
  color: #fff;
  border: none;
}

#modalLaporanPengisian .lp-modal-header-ico {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.18);
  font-size: 1.1rem;
  flex-shrink: 0;
}

#modalLaporanPengisian .lp-modal-header-text {
  flex: 1;
  min-width: 0;
}

#modalLaporanPengisian .lp-modal-header .modal-title {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 800;
  color: #fff;
}

#modalLaporanPengisian .lp-modal-sub {
  margin: 2px 0 0;
  font-size: 0.78rem;
  opacity: 0.88;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#modalLaporanPengisian .lp-modal-close {
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s ease;
  flex-shrink: 0;
}

#modalLaporanPengisian .lp-modal-close:hover {
  background: rgba(255, 255, 255, 0.28);
}

#modalLaporanPengisian .lp-modal-body {
  padding: 18px 20px 8px;
  background: #f8f7ff;
}

#modalLaporanPengisian .lp-modal-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: flex-end;
  margin-bottom: 16px;
}

#modalLaporanPengisian .lp-modal-filter {
  flex: 1 1 200px;
  max-width: 280px;
}

#modalLaporanPengisian .lp-modal-filter label {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #6050dc;
  margin-bottom: 6px;
}

#modalLaporanPengisian .lp-modal-select {
  appearance: none;
  width: 100%;
  height: 40px;
  padding: 0 34px 0 14px;
  border: 1px solid #ddd8f8;
  border-radius: 14px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath fill='%236050dc' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E") no-repeat right 12px center;
  color: #3d3568;
  font-weight: 600;
  font-size: 0.88rem;
  box-shadow: 0 2px 8px rgba(96, 80, 220, 0.06);
}

#modalLaporanPengisian .lp-modal-select:focus {
  outline: none;
  border-color: #6050dc;
  box-shadow: 0 0 0 3px rgba(96, 80, 220, 0.18);
}

#modalLaporanPengisian .lp-modal-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  flex: 1 1 320px;
  justify-content: flex-end;
}

#modalLaporanPengisian .lp-stat {
  min-width: 88px;
  padding: 10px 14px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid #ddd8f8;
  text-align: center;
  box-shadow: 0 2px 8px rgba(96, 80, 220, 0.06);
}

#modalLaporanPengisian .lp-stat-val {
  display: block;
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1.2;
  color: #3d3568;
}

#modalLaporanPengisian .lp-stat-lbl {
  display: block;
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #94a3b8;
  margin-top: 2px;
}

#modalLaporanPengisian .lp-stat-ok .lp-stat-val { color: #16a34a; }
#modalLaporanPengisian .lp-stat-warn .lp-stat-val { color: #ea580c; }
#modalLaporanPengisian .lp-stat-avg .lp-stat-val { color: #6050dc; }
#modalLaporanPengisian .lp-stat-kelas .lp-stat-val { color: #4a3db8; }

#modalLaporanPengisian .lp-modal-loading {
  text-align: center;
  padding: 40px 16px;
  color: #6050dc;
}

#modalLaporanPengisian .lp-modal-loading i {
  font-size: 1.75rem;
}

#modalLaporanPengisian .lp-modal-loading p {
  margin: 10px 0 0;
  font-weight: 600;
  color: #64748b;
}

#modalLaporanPengisian .lp-table-wrap {
  max-height: 400px;
  overflow: auto;
  border-radius: 16px;
  border: 1px solid #ddd8f8;
  background: #fff;
  box-shadow: 0 4px 14px rgba(96, 80, 220, 0.06);
}

#modalLaporanPengisian .lp-table {
  width: 100%;
  margin: 0;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.88rem;
  color: #3d3568;
}

#modalLaporanPengisian .lp-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: linear-gradient(180deg, #f0eeff 0%, #eef2ff 100%);
  color: #4a3db8;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 12px 10px;
  border-bottom: 1px solid #ddd8f8;
  white-space: nowrap;
}

#modalLaporanPengisian .lp-table tbody td {
  padding: 10px;
  border-bottom: 1px solid #eef2ff;
  vertical-align: middle;
}

#modalLaporanPengisian .lp-table tbody tr:hover td {
  background: #f8f7ff;
}

#modalLaporanPengisian .lp-table tbody tr:last-child td {
  border-bottom: none;
}

#modalLaporanPengisian .lp-col-tahun {
  width: 1%;
  white-space: nowrap;
  text-align: center;
}

#modalLaporanPengisian .lp-bil {
  color: #94a3b8;
  font-weight: 600;
  font-size: 0.8rem;
}

#modalLaporanPengisian .lp-tahun-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 26px;
  padding: 0 8px;
  border-radius: 999px;
  background: #eef2ff;
  color: #6050dc;
  font-weight: 700;
  font-size: 0.8rem;
}

#modalLaporanPengisian .lp-kelas {
  color: #3d3568;
}

#modalLaporanPengisian .lp-progress {
  height: 22px;
  border-radius: 999px;
  background: #eef2ff;
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(96, 80, 220, 0.08);
}

#modalLaporanPengisian .lp-progress-bar {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 700;
  color: #fff;
  border-radius: 999px;
  min-width: 2.2rem;
  transition: width 0.45s ease;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
}

#modalLaporanPengisian .lp-bar-ok { background: linear-gradient(90deg, #16a34a, #22c55e); }
#modalLaporanPengisian .lp-bar-info { background: linear-gradient(90deg, #0284c7, #38bdf8); }
#modalLaporanPengisian .lp-bar-warn { background: linear-gradient(90deg, #d97706, #f59e0b); }
#modalLaporanPengisian .lp-bar-bad { background: linear-gradient(90deg, #dc2626, #f87171); }
#modalLaporanPengisian .lp-bar-muted { background: linear-gradient(90deg, #64748b, #94a3b8); }

#modalLaporanPengisian .lp-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, #6050dc, #4a3db8);
  color: #fff !important;
  text-decoration: none !important;
  box-shadow: 0 3px 10px rgba(96, 80, 220, 0.28);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

#modalLaporanPengisian .lp-action-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(96, 80, 220, 0.35);
  color: #fff !important;
}

#modalLaporanPengisian .lp-modal-footer {
  display: flex;
  justify-content: flex-end;
  padding: 12px 20px 18px;
  background: #f8f7ff;
  border: none;
}

#modalLaporanPengisian .lp-modal-btn-close {
  border: none;
  border-radius: 999px;
  padding: 9px 20px;
  font-weight: 700;
  font-size: 0.85rem;
  color: #4a3db8;
  background: #fff;
  border: 1px solid #ddd8f8;
  box-shadow: 0 2px 8px rgba(96, 80, 220, 0.08);
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}

#modalLaporanPengisian .lp-modal-btn-close:hover {
  background: #eef2ff;
  transform: translateY(-1px);
}

@media (max-width: 767px) {
  #modalLaporanPengisian .lp-modal-stats {
    justify-content: stretch;
  }
  #modalLaporanPengisian .lp-stat {
    flex: 1 1 calc(50% - 10px);
  }
  #modalLaporanPengisian .lp-modal-filter {
    max-width: none;
  }
}

/* =========================================================
   Global DataTables pagination (Back / page pills / Next)
   ========================================================= */
.dataTables_wrapper .dataTables_info {
  float: left !important;
  text-align: left !important;
  padding-top: 14px !important;
}

.dataTables_wrapper .dataTables_paginate {
  float: right !important;
  text-align: right !important;
  padding: 14px 0 8px !important;
  margin-top: 4px !important;
  margin-left: auto !important;
}

.dataTables_wrapper .row:last-child > [class*="col-"]:last-child,
.dataTables_wrapper .dt-layout-end,
.dataTables_wrapper .dt-layout-cell.dt-end {
  text-align: right !important;
  margin-left: auto !important;
}

.dataTables_wrapper .dataTables_paginate .pagination {
  display: inline-flex !important;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 0 auto !important;
  padding: 0 !important;
}

/* Bootstrap 4 page items */
.dataTables_wrapper .dataTables_paginate .paginate_button {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  list-style: none;
}

.dataTables_wrapper .dataTables_paginate .paginate_button .page-link,
.dataTables_wrapper .dataTables_paginate > span > .paginate_button,
.dataTables_wrapper .dataTables_paginate > a.paginate_button {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 42px;
  padding: 0 12px !important;
  margin: 0 !important;
  border: none !important;
  border-radius: 10px !important;
  background: #ecebff !important;
  color: #5d5cde !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  line-height: 1 !important;
  box-shadow: none !important;
  outline: none !important;
  text-decoration: none !important;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, transform .15s ease;
}

.dataTables_wrapper .dataTables_paginate .paginate_button .page-link:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button:not(.disabled):not(.current):not(.active) .page-link:hover,
.dataTables_wrapper .dataTables_paginate > span > .paginate_button:hover,
.dataTables_wrapper .dataTables_paginate > a.paginate_button:not(.disabled):not(.current):hover {
  background: #dddcfb !important;
  color: #4a49c7 !important;
  z-index: 1;
}

/* Active page */
.dataTables_wrapper .dataTables_paginate .paginate_button.active .page-link,
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate > span > .paginate_button.current {
  background: #5d5cde !important;
  color: #fff !important;
  box-shadow: 0 6px 16px rgba(93, 92, 222, .28) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.active .page-link:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: #4f4ecb !important;
  color: #fff !important;
}

/* Previous / Next: keep JS labels, add encoding-safe chevrons */
.dataTables_wrapper .dataTables_paginate .paginate_button.previous .page-link,
.dataTables_wrapper .dataTables_paginate .paginate_button.next .page-link,
.dataTables_wrapper .dataTables_paginate > a.paginate_button.previous,
.dataTables_wrapper .dataTables_paginate > a.paginate_button.next {
  background: transparent !important;
  box-shadow: none !important;
  min-width: auto !important;
  height: auto !important;
  padding: 8px 4px !important;
  border-radius: 0 !important;
  color: #5d5cde !important;
  font-size: 15px !important;
  gap: 6px;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.previous .page-link::before,
.dataTables_wrapper .dataTables_paginate > a.paginate_button.previous::before {
  content: "\2039";
  font-size: 18px;
  font-weight: 600;
  line-height: 1;
  color: inherit;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.next .page-link::after,
.dataTables_wrapper .dataTables_paginate > a.paginate_button.next::after {
  content: "\203A";
  font-size: 18px;
  font-weight: 600;
  line-height: 1;
  color: inherit;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.previous .page-link:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button.next .page-link:hover,
.dataTables_wrapper .dataTables_paginate > a.paginate_button.previous:hover,
.dataTables_wrapper .dataTables_paginate > a.paginate_button.next:hover {
  background: transparent !important;
  color: #4a49c7 !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.previous.disabled .page-link,
.dataTables_wrapper .dataTables_paginate .paginate_button.next.disabled .page-link,
.dataTables_wrapper .dataTables_paginate .paginate_button.previous.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.next.disabled,
.dataTables_wrapper .dataTables_paginate > a.paginate_button.previous.disabled,
.dataTables_wrapper .dataTables_paginate > a.paginate_button.next.disabled {
  opacity: .35 !important;
  cursor: default !important;
  pointer-events: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Ellipsis */
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled .page-link,
.dataTables_wrapper .dataTables_paginate .ellipsis,
.dataTables_wrapper .dataTables_paginate span.ellipsis {
  background: transparent !important;
  box-shadow: none !important;
  color: #5d5cde !important;
  min-width: 28px !important;
  height: auto !important;
  padding: 8px 4px !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  letter-spacing: .08em;
  cursor: default !important;
  pointer-events: none !important;
}

/* Don't treat previous/next disabled as ellipsis style */
.dataTables_wrapper .dataTables_paginate .paginate_button.previous.disabled .page-link,
.dataTables_wrapper .dataTables_paginate .paginate_button.next.disabled .page-link {
  font-size: 15px !important;
  letter-spacing: 0 !important;
  min-width: auto !important;
  padding: 8px 4px !important;
}

/* Non-bootstrap span wrapper layout */
.dataTables_wrapper .dataTables_paginate > span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 4px;
}

/* Remove Bootstrap focus ring clash */
.dataTables_wrapper .dataTables_paginate .page-link:focus {
  box-shadow: none !important;
}

.seteja-cari-item {
  position: relative;
}
.seteja-cari {
  position: relative;
  display: flex;
  align-items: center;
  width: 36px;
  height: 36px;
  margin-right: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
}
.seteja-cari-field {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: 36px;
  margin: 0;
  padding: 0 10px;
  color: #5c6172;
  cursor: text;
}
.seteja-cari-field i {
  flex: 0 0 auto;
  font-size: 13px;
  color: #6050dc;
}
.seteja-cari-input {
  width: 0;
  min-width: 0;
  height: 32px;
  padding: 0;
  border: 0;
  outline: none;
  background: transparent;
  color: #1c2030;
  font-size: 13px;
  font-weight: 700;
  opacity: 0;
}
.seteja-cari-input::placeholder {
  color: #8b90a3;
  font-weight: 600;
}
.seteja-cari:focus-within,
.seteja-cari.is-open {
  width: 228px;
}
.seteja-cari:focus-within .seteja-cari-input,
.seteja-cari.is-open .seteja-cari-input {
  width: 100%;
  opacity: 1;
}
.seteja-cari-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 1080;
  width: 340px;
  max-height: min(420px, calc(100dvh - 120px));
  overflow: auto;
  padding: 6px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 16px 40px rgba(28, 24, 64, 0.18);
}
.seteja-cari-label {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px 4px;
  color: #6050dc;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.seteja-cari-hit {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin: 0;
  padding: 8px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #1c2030;
  text-align: left;
  cursor: pointer;
}
.seteja-cari-hit:hover,
.seteja-cari-hit.is-active {
  background: #f3f1ff;
}
.seteja-cari-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  border-radius: 9px;
  background: #f3f1ff;
  color: #6050dc;
}
.seteja-cari-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.2;
}
.seteja-cari-copy strong {
  overflow: hidden;
  color: #1c2030;
  font-size: 13px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.seteja-cari-copy span {
  overflow: hidden;
  color: #5c6172;
  font-size: 11px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.seteja-cari-empty {
  padding: 14px 12px;
  color: #5c6172;
  font-size: 13px;
  font-weight: 600;
}
.seteja-cari-empty strong {
  color: #1c2030;
}

.seteja-ipu {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  height: 36px;
  margin-right: 4px;
  padding: 0 12px 0 8px !important;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  color: #1c2030 !important;
  text-decoration: none !important;
  white-space: nowrap;
}
.seteja-ipu:hover {
  background: #fff;
  color: #1c2030 !important;
  text-decoration: none !important;
}
.seteja-ipu:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}
.seteja-ipu-dot {
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  border-radius: 50%;
  background: #8b90a3;
}
.seteja-ipu-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.05;
}
.seteja-ipu-val {
  color: #1c2030;
  font-size: 14px;
  font-weight: 800;
}
.seteja-ipu-label {
  color: #5c6172;
  font-size: 10px;
  font-weight: 700;
}
.seteja-ipu-baik .seteja-ipu-dot { background: #1d6fd8; }
.seteja-ipu-baik .seteja-ipu-val { color: #1d4f9c; }
.seteja-ipu-sederhana .seteja-ipu-dot { background: #1f8a4c; }
.seteja-ipu-sederhana .seteja-ipu-val { color: #176b3a; }
.seteja-ipu-tidak .seteja-ipu-dot { background: #d4a017; }
.seteja-ipu-tidak .seteja-ipu-val { color: #8a6408; }
.seteja-ipu-sangat .seteja-ipu-dot { background: #e06a12; }
.seteja-ipu-sangat .seteja-ipu-val { color: #b45309; }
.seteja-ipu-bahaya .seteja-ipu-dot { background: #d7263d; }
.seteja-ipu-bahaya .seteja-ipu-val { color: #b42318; }

.seteja-notis-bell {
  position: relative;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #fff !important;
  background: rgba(255, 255, 255, .14);
}
.seteja-notis-bell-count {
  position: absolute;
  top: 2px;
  right: 0;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: #ef4444;
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  line-height: 14px;
  text-align: center;
  border: 2px solid #5e2bb8;
}
.seteja-notis-bell-count[hidden] {
  display: none !important;
}
.seteja-notis-drop {
  min-width: 360px;
  max-width: 400px;
  padding: 0;
  border-radius: 16px;
  overflow: hidden;
}

.seteja-user-toggle {
  display: flex !important;
  align-items: center;
  gap: 8px;
  padding-right: 4px !important;
  color: #fff !important;
  font-weight: 700;
}
.seteja-user-toggle-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.12);
}
.seteja-user-toggle-name {
  color: #fff;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.seteja-user-toggle-caret {
  font-size: 10px;
  opacity: 0.8;
}
.seteja-user-drop {
  min-width: 280px;
  max-width: 320px;
  padding: 0;
  margin-top: 10px;
  border: 1px solid #e6e8ef;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 18px 50px rgba(28, 32, 48, 0.16);
}
.seteja-user-drop-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 14px;
  background: #6050dc;
  color: #fff;
}
.seteja-user-drop-avatar {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.12);
}
.seteja-user-drop-identity {
  min-width: 0;
}
.seteja-user-drop-identity strong {
  display: block;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.25;
  color: #fff;
}
.seteja-user-drop-identity span {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.78);
}
.seteja-user-drop-list {
  padding: 8px;
  background: #fff;
}
.seteja-user-drop-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 10px;
  color: #1c2030;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none !important;
}
.seteja-user-drop-item:hover {
  background: #f4f3ff;
  color: #6050dc;
}
.seteja-user-drop-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: #efedfb;
  color: #6050dc;
  font-size: 13px;
}
.seteja-user-drop-foot {
  padding: 8px;
  border-top: 1px solid #eef1f6;
  background: #fbfbfe;
}
.seteja-user-drop-logout {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  border-radius: 10px;
  color: #c1121f;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none !important;
}
.seteja-user-drop-logout:hover {
  background: #fdecee;
  color: #9b0d18;
}
.seteja-login-link .nav-link-inner--text,
.seteja-login-link .nav-link-inner--text i {
  font-weight: 700;
  color: #fff !important;
}

.seteja-util {
  display: none;
  background: #2a2833;
  color: rgba(255, 255, 255, 0.9);
  font-size: 12px;
  line-height: 1.3;
}
.seteja-util-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 34px;
  padding: 4px 16px;
}
.seteja-util-meta,
.seteja-util-links {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}
.seteja-util a,
.seteja-util span {
  color: rgba(255, 255, 255, 0.9);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.seteja-util a:hover {
  color: #fff;
}
.seteja-util i {
  margin-right: 6px;
  opacity: 0.8;
}
.seteja-util-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
}
.seteja-util-social i {
  margin: 0;
}
.seteja-util a:focus-visible,
.seteja-nav a:focus-visible,
.seteja-nav-toggle:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.seteja-nav {
  background: #6050dc;
  z-index: 1030;
  min-height: 64px;
  padding-top: 0;
  padding-bottom: 0;
  box-shadow: 0 8px 22px rgba(48, 40, 110, 0.16);
}
.seteja-nav > .container-fluid {
  min-height: 64px;
  align-items: center;
}
.seteja-nav .navbar-brand {
  margin-right: 8px;
  padding-top: 0;
  padding-bottom: 0;
}
.seteja-nav .navbar-brand img {
  height: 42px;
  width: auto;
  max-width: 168px;
  object-fit: contain;
}
.seteja-nav .nav-link-inner--text {
  margin-left: 0;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.seteja-nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-left: auto;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}
.seteja-nav-toggle .seteja-ico-close {
  display: none;
}
.seteja-nav-toggle[aria-expanded="true"] .seteja-ico-open {
  display: none;
}
.seteja-nav-toggle[aria-expanded="true"] {
  background: rgba(255, 255, 255, 0.24);
}
.seteja-nav-toggle[aria-expanded="true"] .seteja-ico-close {
  display: inline;
}
.seteja-nav-foot {
  display: none;
}

@media (min-width: 992px) {
  .seteja-util {
    display: block;
  }
  .seteja-nav .navbar-nav .nav-item {
    margin-right: 0;
  }
  .seteja-nav .navbar-nav .nav-link {
    padding: 8px 10px !important;
    border-radius: 10px;
    color: #fff;
  }
  .seteja-nav .nav-link-inner--text i {
    margin-right: 0.35rem !important;
  }
  .seteja-nav .navbar-nav .nav-link:hover,
  .seteja-nav .navbar-nav .nav-link:focus,
  .seteja-nav .navbar-nav .nav-item.show > .nav-link {
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
  }
  .seteja-nav .navbar-nav-hover .nav-item.dropdown.show > .dropdown-menu,
  .seteja-nav .navbar-nav-hover .nav-item.dropdown:hover > .dropdown-menu {
    display: block;
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
    transform: none;
  }
  .seteja-nav .dropdown-menu {
    margin-top: 8px;
    padding: 8px;
    border: 0;
    border-radius: 14px;
    box-shadow: 0 16px 40px rgba(28, 32, 48, 0.16);
  }
  .seteja-nav .dropdown-menu-inner .row > [class*="col-"] {
    border-radius: 12px;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .seteja-nav .dropdown-menu-inner .row > [class*="col-"]:hover {
    background: #f3f1ff;
  }
  .seteja-nav .dropdown-menu-inner p {
    margin: 6px 0 0;
    color: #243044;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.3;
  }
  .seteja-nav .dropdown-menu a.media {
    border-radius: 8px;
    padding: 6px 8px;
    text-decoration: none;
  }
  .seteja-nav .dropdown-menu a.media:hover {
    background: #f3f1ff;
  }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
  .seteja-util-phone {
    display: none;
  }
  .seteja-nav .navbar-brand img {
    height: 36px;
    max-width: 132px;
  }
  .seteja-nav .nav-link-inner--text {
    font-size: 12px;
    letter-spacing: 0;
  }
  .seteja-nav .nav-link-inner--text i {
    display: none;
  }
  .seteja-nav .navbar-nav .nav-link {
    padding: 8px 7px !important;
  }
  .seteja-user-toggle-name {
    max-width: 72px;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .seteja-nav .dropdown-menu-inner .row > [class*="col-"] {
    transition: background 0.15s ease;
  }
}

@media (max-width: 991.98px) {
  .seteja-nav {
    min-height: 60px;
  }
  .seteja-nav > .container-fluid {
    min-height: 60px;
  }
  .seteja-nav .navbar-brand img {
    height: 36px;
    max-width: 148px;
  }
  .seteja-user-toggle-name {
    max-width: 120px;
  }
  #navbar_global.navbar-collapse {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1030;
    width: 100%;
    margin: 0;
    padding: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    opacity: 1;
    overflow: hidden;
    animation: none !important;
    transform: none !important;
  }
  #navbar_global > .navbar-nav {
    width: 100%;
  }
  #navbar_global.navbar-collapse.show,
  #navbar_global.navbar-collapse.collapsing {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    max-height: calc(100dvh - 60px);
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 8px 14px calc(18px + env(safe-area-inset-bottom));
    background: #5648c8;
    box-shadow: 0 18px 36px rgba(28, 24, 64, 0.28);
  }
  #navbar_global > ul.ml-lg-auto {
    display: flex !important;
    flex-flow: row wrap;
    align-items: center;
    order: -1;
    width: 100%;
    margin: 0 0 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.16);
  }
  #navbar_global > ul.ml-lg-auto > .nav-item.show,
  #navbar_global > ul.ml-lg-auto > .seteja-cari-item {
    flex: 1 0 100%;
  }
  .seteja-cari-item {
    min-width: 0;
    max-width: 100%;
  }
  .seteja-cari,
  .seteja-cari:focus-within,
  .seteja-cari.is-open {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    max-width: 100%;
    margin-right: 0;
    margin-bottom: 8px;
  }
  .seteja-cari-field {
    flex: 1 0 100%;
  }
  .seteja-cari-input,
  .seteja-cari:focus-within .seteja-cari-input,
  .seteja-cari.is-open .seteja-cari-input {
    width: 100%;
    opacity: 1;
  }
  .seteja-cari-panel {
    position: static;
    flex: 1 0 100%;
    width: 100%;
    max-width: 100%;
    margin-top: 8px;
  }
  #navbar_global .navbar-nav .nav-link,
  #navbar_global .navbar-nav .nav-link .nav-link-inner--text,
  #navbar_global .navbar-nav .nav-link i {
    color: #fff !important;
  }
  #navbar_global .navbar-nav-hover > .nav-item.dropdown > .nav-link {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 44px;
    margin: 2px 0;
    padding: 10px 36px 10px 12px;
    border-radius: 10px;
  }
  #navbar_global .navbar-nav-hover > .nav-item.dropdown > .nav-link::after {
    content: "";
    position: absolute;
    right: 14px;
    top: 50%;
    width: 8px;
    height: 8px;
    border-right: 2px solid rgba(255, 255, 255, 0.9);
    border-bottom: 2px solid rgba(255, 255, 255, 0.9);
    transform: translateY(-70%) rotate(45deg);
  }
  #navbar_global .navbar-nav-hover > .nav-item.dropdown.show > .nav-link,
  #navbar_global .navbar-nav-hover > .nav-item.dropdown > .nav-link:hover {
    background: rgba(255, 255, 255, 0.12);
  }
  #navbar_global .navbar-nav-hover > .nav-item.dropdown.show > .nav-link::after {
    transform: translateY(-20%) rotate(225deg);
  }
  #navbar_global .dropdown-menu,
  #navbar_global .dropdown-menu-xl,
  #navbar_global .seteja-user-drop,
  #navbar_global .seteja-notis-drop {
    position: static !important;
    float: none;
    width: 100%;
    min-width: 0;
    max-width: none;
    margin: 4px 0 8px;
    transform: none !important;
    background: #fff;
    border-radius: 12px;
  }
  #navbar_global .dropdown-menu-inner .row > [class*="col-"] {
    border-radius: 12px;
    padding-top: 12px;
    padding-bottom: 12px;
  }
  #navbar_global .dropdown-menu-inner p {
    margin: 6px 0 0;
    color: #243044;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.3;
  }
  .seteja-login-link {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 8px 12px !important;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.14);
  }
  .seteja-nav-foot {
    display: grid;
    gap: 4px;
    margin-top: 8px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.16);
  }
  .seteja-nav-foot a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 36px;
    color: #fff !important;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
  }
  .seteja-nav-foot i {
    width: 16px;
    text-align: center;
  }
  .seteja-nav-foot-row {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
  }
  body.seteja-nav-open {
    overflow: hidden;
  }
  body.seteja-nav-open::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 1020;
    background: rgba(22, 18, 40, 0.45);
  }
}

body.seteja-login-page {
  background-color: #eef0f5;
  background-image: url("../../images/bgland.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

body.seteja-login-page .container-fluid.main {
  background: transparent;
}

.seteja-login {
  --login-ink: #1f2937;
  --login-muted: #4b5563;
  --login-line: #d9dce7;
  --login-brand: #6050dc;
  --login-brand-deep: #4a3db8;
  --login-danger: #b42318;
  --login-radius: 16px;
  width: 100%;
  max-width: 920px;
  margin-left: auto;
  margin-right: auto;
}

.seteja-login-card {
  display: grid;
  grid-template-columns: minmax(240px, 0.86fr) minmax(0, 1.14fr);
  overflow: hidden;
  border: 1px solid #e4e7f0;
  border-radius: var(--login-radius);
  background: #fff;
  box-shadow: 0 18px 40px rgba(49, 53, 84, 0.08);
}

.seteja-login-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100%;
  padding: 32px 28px;
  background: var(--login-brand);
  color: #f8f7ff;
  text-align: center;
}

.seteja-login-brand img {
  display: block;
  width: 132px;
  max-width: 46%;
  height: auto;
  margin: 0 auto 22px;
}

.seteja-login-kicker {
  margin: 0 0 6px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.seteja-login-brand h2 {
  margin: 0 0 10px;
  color: #fff;
  font-size: 28px;
  font-weight: 800;
  line-height: 1.15;
}

.seteja-login-lead {
  margin: 0 auto;
  max-width: 28ch;
  color: rgba(255, 255, 255, 0.88);
  font-size: 14px;
  line-height: 1.55;
}

.seteja-login-panel {
  padding: 32px 28px 28px;
}

.seteja-login-title {
  margin: 0 0 6px;
  color: var(--login-ink);
  font-size: 20px;
  font-weight: 800;
  line-height: 1.25;
}

.seteja-login-help {
  margin: 0 0 20px;
  color: var(--login-muted);
  font-size: 14px;
  line-height: 1.5;
}

.seteja-login-alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 18px;
  padding: 12px 14px;
  border: 1px solid #f2c9c6;
  border-radius: 12px;
  background: #fef2f2;
  color: var(--login-danger);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.45;
}

.seteja-login-alert i {
  margin-top: 2px;
}

.seteja-login-field {
  margin-bottom: 16px;
}

.seteja-login-field label {
  display: block;
  margin-bottom: 6px;
  color: var(--login-ink);
  font-size: 13px;
  font-weight: 700;
}

.seteja-login-control {
  position: relative;
}

.seteja-login-icon {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 100%;
  color: #6b7280;
  pointer-events: none;
}

.seteja-login .form-control {
  height: 48px;
  padding: 10px 44px 10px 44px;
  border: 1px solid var(--login-line);
  border-radius: 12px;
  background: #fff;
  color: var(--login-ink);
  font-size: 15px;
  box-shadow: none;
}

.seteja-login .form-control:focus {
  border-color: var(--login-brand);
  box-shadow: 0 0 0 3px rgba(96, 80, 220, 0.18);
}

.seteja-login .form-control.is-invalid,
.seteja-login-form.was-checked .form-control:invalid {
  border-color: #de7c76;
  background-color: #fff;
  background-image: none;
}

.seteja-login-empty-hint {
  display: none;
  margin: -8px 0 16px;
  color: var(--login-danger);
  font-size: 13px;
  font-weight: 600;
}

.seteja-login-form.was-checked .seteja-login-empty-hint {
  display: block;
}

.seteja-login-toggle {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #4b5563;
}

.seteja-login-toggle:hover,
.seteja-login-toggle:focus {
  background: #f3f4fb;
  color: var(--login-brand-deep);
  outline: none;
}

.seteja-login-toggle:focus-visible {
  box-shadow: 0 0 0 3px rgba(96, 80, 220, 0.18);
}

.seteja-login-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 6px 0 20px;
}

.seteja-login-meta .custom-control-label {
  color: var(--login-ink);
  font-size: 14px;
  font-weight: 600;
}

.seteja-login-forgot {
  color: var(--login-brand-deep);
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}

.seteja-login-forgot:hover {
  color: var(--login-brand);
  text-decoration: underline;
}

.seteja-login-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 48px;
  border: 0;
  border-radius: 12px;
  background: var(--login-brand);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  box-shadow: none;
}

.seteja-login-submit:hover,
.seteja-login-submit:focus {
  background: var(--login-brand-deep);
  color: #fff;
}

.seteja-login-submit:active {
  transform: scale(0.98);
}

.seteja-login-submit-wait {
  display: none;
}

.seteja-login-form.is-submitting .seteja-login-submit-label {
  display: none;
}

.seteja-login-form.is-submitting .seteja-login-submit-wait {
  display: inline;
}

.seteja-login-form.is-submitting .seteja-login-submit {
  opacity: 0.88;
  cursor: wait;
}

@media (max-width: 767.98px) {
  .seteja-login {
    max-width: none;
  }

  .seteja-login-card {
    grid-template-columns: 1fr;
  }

  .seteja-login-brand {
    padding: 22px 22px 18px;
    text-align: center;
  }

  .seteja-login-brand img {
    width: 92px;
    max-width: 92px;
    margin: 0 auto 12px;
  }

  .seteja-login-lead {
    max-width: none;
    margin: 0 auto;
  }

  .seteja-login-panel {
    padding: 22px 18px 20px;
  }

  .seteja-login-meta {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (prefers-reduced-motion: reduce) {
  .seteja-login-submit:active {
    transform: none;
  }
}

.seteja-foot {
  margin-top: 28px;
  background: #2a2833;
  color: rgba(255, 255, 255, 0.9);
  border-top: 3px solid #6050dc;
}
.seteja-foot-main {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  max-width: 1180px;
  margin: 0 auto;
  padding: 32px 20px 24px;
}
.seteja-foot h2 {
  margin: 0 0 12px;
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.3;
}
.seteja-foot address {
  margin: 0 0 14px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 1.55;
}
.seteja-foot-contact {
  display: grid;
  gap: 2px;
}
.seteja-foot a {
  color: #fff;
  font-weight: 600;
  text-decoration: none;
}
.seteja-foot a:hover {
  color: #fff;
  text-decoration: underline;
}
.seteja-foot a:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}
.seteja-foot-contact a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  text-decoration: none;
}
.seteja-foot-contact a:hover {
  text-decoration: none;
  color: #fff;
}
.seteja-foot-contact i {
  width: 16px;
  text-align: center;
  opacity: 0.8;
}
.seteja-foot-links {
  list-style: none;
  margin: 0;
  padding: 0;
}
.seteja-foot-links a {
  display: flex;
  align-items: center;
  min-height: 36px;
  color: rgba(255, 255, 255, 0.88);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}
.seteja-foot-links a:hover {
  color: #fff;
  text-decoration: none;
}
.seteja-foot-frame {
  display: block;
  width: 100%;
  height: 200px;
  border: 0;
  border-radius: 14px;
  background: #1c1b22;
}
.seteja-foot-bar {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.seteja-foot-bar-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  max-width: 1180px;
  margin: 0 auto;
  padding: 14px 20px calc(14px + env(safe-area-inset-bottom));
  color: rgba(255, 255, 255, 0.72);
  font-size: 13px;
  font-weight: 600;
}
.seteja-foot-social {
  display: flex;
  align-items: center;
  gap: 8px;
}
.seteja-foot-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  min-height: 32px;
  padding: 0 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  text-decoration: none;
}
.seteja-foot-social a:hover {
  background: rgba(255, 255, 255, 0.18);
  text-decoration: none;
}

@media (min-width: 768px) {
  .seteja-foot-main {
    grid-template-columns: 1fr 1fr;
  }
  .seteja-foot-map {
    grid-column: 1 / -1;
  }
  .seteja-foot-frame {
    height: 240px;
  }
}

@media (min-width: 992px) {
  .seteja-foot-main {
    grid-template-columns: 1.05fr 0.9fr 1.15fr;
    align-items: start;
  }
  .seteja-foot-map {
    grid-column: auto;
  }
  .seteja-foot-frame {
    height: 220px;
  }
}