/*
Trix 1.3.1
Copyright © 2020 Basecamp, LLC
http://trix-editor.org/*/
trix-editor {
  border: 1px solid #bbb;
  border-radius: 3px;
  margin: 0;
  padding: 0.4em 0.6em;
  min-height: 5em;
  outline: none; }
trix-toolbar * {
  box-sizing: border-box; }
trix-toolbar .trix-button-row {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  overflow-x: auto; }
trix-toolbar .trix-button-group {
  display: flex;
  margin-bottom: 10px;
  border: 1px solid #bbb;
  border-top-color: #ccc;
  border-bottom-color: #888;
  border-radius: 3px; }
  trix-toolbar .trix-button-group:not(:first-child) {
    margin-left: 1.5vw; }
    @media (max-device-width: 768px) {
      trix-toolbar .trix-button-group:not(:first-child) {
        margin-left: 0; } }
trix-toolbar .trix-button-group-spacer {
  flex-grow: 1; }
  @media (max-device-width: 768px) {
    trix-toolbar .trix-button-group-spacer {
      display: none; } }
trix-toolbar .trix-button {
  position: relative;
  float: left;
  color: rgba(0, 0, 0, 0.6);
  font-size: 0.75em;
  font-weight: 600;
  white-space: nowrap;
  padding: 0 0.5em;
  margin: 0;
  outline: none;
  border: none;
  border-bottom: 1px solid #ddd;
  border-radius: 0;
  background: transparent; }
  trix-toolbar .trix-button:not(:first-child) {
    border-left: 1px solid #ccc; }
  trix-toolbar .trix-button.trix-active {
    background: #cbeefa;
    color: black; }
  trix-toolbar .trix-button:not(:disabled) {
    cursor: pointer; }
  trix-toolbar .trix-button:disabled {
    color: rgba(0, 0, 0, 0.125); }
  @media (max-device-width: 768px) {
    trix-toolbar .trix-button {
      letter-spacing: -0.01em;
      padding: 0 0.3em; } }
trix-toolbar .trix-button--icon {
  font-size: inherit;
  width: 2.6em;
  height: 1.6em;
  max-width: calc(0.8em + 4vw);
  text-indent: -9999px; }
  @media (max-device-width: 768px) {
    trix-toolbar .trix-button--icon {
      height: 2em;
      max-width: calc(0.8em + 3.5vw); } }
  trix-toolbar .trix-button--icon::before {
    display: inline-block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0.6;
    content: "";
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain; }
    @media (max-device-width: 768px) {
      trix-toolbar .trix-button--icon::before {
        right: 6%;
        left: 6%; } }
  trix-toolbar .trix-button--icon.trix-active::before {
    opacity: 1; }
  trix-toolbar .trix-button--icon:disabled::before {
    opacity: 0.125; }
trix-toolbar .trix-button--icon-attach::before {
  background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M16.5%206v11.5a4%204%200%201%201-8%200V5a2.5%202.5%200%200%201%205%200v10.5a1%201%200%201%201-2%200V6H10v9.5a2.5%202.5%200%200%200%205%200V5a4%204%200%201%200-8%200v12.5a5.5%205.5%200%200%200%2011%200V6h-1.5z%22%2F%3E%3C%2Fsvg%3E);
  top: 8%;
  bottom: 4%; }
trix-toolbar .trix-button--icon-bold::before {
  background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M15.6%2011.8c1-.7%201.6-1.8%201.6-2.8a4%204%200%200%200-4-4H7v14h7c2.1%200%203.7-1.7%203.7-3.8%200-1.5-.8-2.8-2.1-3.4zM10%207.5h3a1.5%201.5%200%201%201%200%203h-3v-3zm3.5%209H10v-3h3.5a1.5%201.5%200%201%201%200%203z%22%2F%3E%3C%2Fsvg%3E); }
trix-toolbar .trix-button--icon-italic::before {
  background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M10%205v3h2.2l-3.4%208H6v3h8v-3h-2.2l3.4-8H18V5h-8z%22%2F%3E%3C%2Fsvg%3E); }
trix-toolbar .trix-button--icon-link::before {
  background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M9.88%2013.7a4.3%204.3%200%200%201%200-6.07l3.37-3.37a4.26%204.26%200%200%201%206.07%200%204.3%204.3%200%200%201%200%206.06l-1.96%201.72a.91.91%200%201%201-1.3-1.3l1.97-1.71a2.46%202.46%200%200%200-3.48-3.48l-3.38%203.37a2.46%202.46%200%200%200%200%203.48.91.91%200%201%201-1.3%201.3z%22%2F%3E%3Cpath%20d%3D%22M4.25%2019.46a4.3%204.3%200%200%201%200-6.07l1.93-1.9a.91.91%200%201%201%201.3%201.3l-1.93%201.9a2.46%202.46%200%200%200%203.48%203.48l3.37-3.38c.96-.96.96-2.52%200-3.48a.91.91%200%201%201%201.3-1.3%204.3%204.3%200%200%201%200%206.07l-3.38%203.38a4.26%204.26%200%200%201-6.07%200z%22%2F%3E%3C%2Fsvg%3E); }
trix-toolbar .trix-button--icon-strike::before {
  background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M12.73%2014l.28.14c.26.15.45.3.57.44.12.14.18.3.18.5%200%20.3-.15.56-.44.75-.3.2-.76.3-1.39.3A13.52%2013.52%200%200%201%207%2014.95v3.37a10.64%2010.64%200%200%200%204.84.88c1.26%200%202.35-.19%203.28-.56.93-.37%201.64-.9%202.14-1.57s.74-1.45.74-2.32c0-.26-.02-.51-.06-.75h-5.21zm-5.5-4c-.08-.34-.12-.7-.12-1.1%200-1.29.52-2.3%201.58-3.02%201.05-.72%202.5-1.08%204.34-1.08%201.62%200%203.28.34%204.97%201l-1.3%202.93c-1.47-.6-2.73-.9-3.8-.9-.55%200-.96.08-1.2.26-.26.17-.38.38-.38.64%200%20.27.16.52.48.74.17.12.53.3%201.05.53H7.23zM3%2013h18v-2H3v2z%22%2F%3E%3C%2Fsvg%3E); }
trix-toolbar .trix-button--icon-quote::before {
  background-image: url(data:image/svg+xml,%3Csvg%20version%3D%221%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M6%2017h3l2-4V7H5v6h3zm8%200h3l2-4V7h-6v6h3z%22%2F%3E%3C%2Fsvg%3E); }
trix-toolbar .trix-button--icon-heading-1::before {
  background-image: url(data:image/svg+xml,%3Csvg%20version%3D%221%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M12%209v3H9v7H6v-7H3V9h9zM8%204h14v3h-6v12h-3V7H8V4z%22%2F%3E%3C%2Fsvg%3E); }
trix-toolbar .trix-button--icon-code::before {
  background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M18.2%2012L15%2015.2l1.4%201.4L21%2012l-4.6-4.6L15%208.8l3.2%203.2zM5.8%2012L9%208.8%207.6%207.4%203%2012l4.6%204.6L9%2015.2%205.8%2012z%22%2F%3E%3C%2Fsvg%3E); }
trix-toolbar .trix-button--icon-bullet-list::before {
  background-image: url(data:image/svg+xml,%3Csvg%20version%3D%221%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M4%204a2%202%200%201%200%200%204%202%202%200%200%200%200-4zm0%206a2%202%200%201%200%200%204%202%202%200%200%200%200-4zm0%206a2%202%200%201%200%200%204%202%202%200%200%200%200-4zm4%203h14v-2H8v2zm0-6h14v-2H8v2zm0-8v2h14V5H8z%22%2F%3E%3C%2Fsvg%3E); }
trix-toolbar .trix-button--icon-number-list::before {
  background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M2%2017h2v.5H3v1h1v.5H2v1h3v-4H2v1zm1-9h1V4H2v1h1v3zm-1%203h1.8L2%2013.1v.9h3v-1H3.2L5%2010.9V10H2v1zm5-6v2h14V5H7zm0%2014h14v-2H7v2zm0-6h14v-2H7v2z%22%2F%3E%3C%2Fsvg%3E); }
trix-toolbar .trix-button--icon-undo::before {
  background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M12.5%208c-2.6%200-5%201-6.9%202.6L2%207v9h9l-3.6-3.6A8%208%200%200%201%2020%2016l2.4-.8a10.5%2010.5%200%200%200-10-7.2z%22%2F%3E%3C%2Fsvg%3E); }
trix-toolbar .trix-button--icon-redo::before {
  background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M18.4%2010.6a10.5%2010.5%200%200%200-16.9%204.6L4%2016a8%208%200%200%201%2012.7-3.6L13%2016h9V7l-3.6%203.6z%22%2F%3E%3C%2Fsvg%3E); }
trix-toolbar .trix-button--icon-decrease-nesting-level::before {
  background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M3%2019h19v-2H3v2zm7-6h12v-2H10v2zm-8.3-.3l2.8%202.9L6%2014.2%204%2012l2-2-1.4-1.5L1%2012l.7.7zM3%205v2h19V5H3z%22%2F%3E%3C%2Fsvg%3E); }
trix-toolbar .trix-button--icon-increase-nesting-level::before {
  background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M3%2019h19v-2H3v2zm7-6h12v-2H10v2zm-6.9-1L1%2014.2l1.4%201.4L6%2012l-.7-.7-2.8-2.8L1%209.9%203.1%2012zM3%205v2h19V5H3z%22%2F%3E%3C%2Fsvg%3E); }
trix-toolbar .trix-dialogs {
  position: relative; }
trix-toolbar .trix-dialog {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  font-size: 0.75em;
  padding: 15px 10px;
  background: #fff;
  box-shadow: 0 0.3em 1em #ccc;
  border-top: 2px solid #888;
  border-radius: 5px;
  z-index: 5; }
trix-toolbar .trix-input--dialog {
  font-size: inherit;
  font-weight: normal;
  padding: 0.5em 0.8em;
  margin: 0 10px 0 0;
  border-radius: 3px;
  border: 1px solid #bbb;
  background-color: #fff;
  box-shadow: none;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none; }
  trix-toolbar .trix-input--dialog.validate:invalid {
    box-shadow: #F00 0px 0px 1.5px 1px; }
trix-toolbar .trix-button--dialog {
  font-size: inherit;
  padding: 0.5em;
  border-bottom: none; }
trix-toolbar .trix-dialog--link {
  max-width: 600px; }
trix-toolbar .trix-dialog__link-fields {
  display: flex;
  align-items: baseline; }
  trix-toolbar .trix-dialog__link-fields .trix-input {
    flex: 1; }
  trix-toolbar .trix-dialog__link-fields .trix-button-group {
    flex: 0 0 content;
    margin: 0; }
trix-editor [data-trix-mutable]:not(.attachment__caption-editor) {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none; }

trix-editor [data-trix-mutable]::-moz-selection,
trix-editor [data-trix-cursor-target]::-moz-selection, trix-editor [data-trix-mutable] ::-moz-selection {
  background: none; }
trix-editor [data-trix-mutable]::selection,
trix-editor [data-trix-cursor-target]::selection, trix-editor [data-trix-mutable] ::selection {
  background: none; }

trix-editor [data-trix-mutable].attachment__caption-editor:focus::-moz-selection {
  background: highlight; }
trix-editor [data-trix-mutable].attachment__caption-editor:focus::selection {
  background: highlight; }

trix-editor [data-trix-mutable].attachment.attachment--file {
  box-shadow: 0 0 0 2px highlight;
  border-color: transparent; }
trix-editor [data-trix-mutable].attachment img {
  box-shadow: 0 0 0 2px highlight; }
trix-editor .attachment {
  position: relative; }
  trix-editor .attachment:hover {
    cursor: default; }
trix-editor .attachment--preview .attachment__caption:hover {
  cursor: text; }
trix-editor .attachment__progress {
  position: absolute;
  z-index: 1;
  height: 20px;
  top: calc(50% - 10px);
  left: 5%;
  width: 90%;
  opacity: 0.9;
  transition: opacity 200ms ease-in; }
  trix-editor .attachment__progress[value="100"] {
    opacity: 0; }
trix-editor .attachment__caption-editor {
  display: inline-block;
  width: 100%;
  margin: 0;
  padding: 0;
  font-size: inherit;
  font-family: inherit;
  line-height: inherit;
  color: inherit;
  text-align: center;
  vertical-align: top;
  border: none;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none; }
trix-editor .attachment__toolbar {
  position: absolute;
  z-index: 1;
  top: -0.9em;
  left: 0;
  width: 100%;
  text-align: center; }
trix-editor .trix-button-group {
  display: inline-flex; }
trix-editor .trix-button {
  position: relative;
  float: left;
  color: #666;
  white-space: nowrap;
  font-size: 80%;
  padding: 0 0.8em;
  margin: 0;
  outline: none;
  border: none;
  border-radius: 0;
  background: transparent; }
  trix-editor .trix-button:not(:first-child) {
    border-left: 1px solid #ccc; }
  trix-editor .trix-button.trix-active {
    background: #cbeefa; }
  trix-editor .trix-button:not(:disabled) {
    cursor: pointer; }
trix-editor .trix-button--remove {
  text-indent: -9999px;
  display: inline-block;
  padding: 0;
  outline: none;
  width: 1.8em;
  height: 1.8em;
  line-height: 1.8em;
  border-radius: 50%;
  background-color: #fff;
  border: 2px solid highlight;
  box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.25); }
  trix-editor .trix-button--remove::before {
    display: inline-block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0.7;
    content: "";
    background-image: url(data:image/svg+xml,%3Csvg%20height%3D%2224%22%20width%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M19%206.4L17.6%205%2012%2010.6%206.4%205%205%206.4l5.6%205.6L5%2017.6%206.4%2019l5.6-5.6%205.6%205.6%201.4-1.4-5.6-5.6z%22%2F%3E%3Cpath%20d%3D%22M0%200h24v24H0z%22%20fill%3D%22none%22%2F%3E%3C%2Fsvg%3E);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 90%; }
  trix-editor .trix-button--remove:hover {
    border-color: #333; }
    trix-editor .trix-button--remove:hover::before {
      opacity: 1; }
trix-editor .attachment__metadata-container {
  position: relative; }
trix-editor .attachment__metadata {
  position: absolute;
  left: 50%;
  top: 2em;
  transform: translate(-50%, 0);
  max-width: 90%;
  padding: 0.1em 0.6em;
  font-size: 0.8em;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.7);
  border-radius: 3px; }
  trix-editor .attachment__metadata .attachment__name {
    display: inline-block;
    max-width: 100%;
    vertical-align: bottom;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap; }
  trix-editor .attachment__metadata .attachment__size {
    margin-left: 0.2em;
    white-space: nowrap; }
@charset "UTF-8";
.trix-content {
  line-height: 1.5; }
  .trix-content * {
    box-sizing: border-box;
    margin: 0;
    padding: 0; }
  .trix-content h1 {
    font-size: 1.2em;
    line-height: 1.2; }
  .trix-content blockquote {
    border: 0 solid #ccc;
    border-left-width: 0.3em;
    margin-left: 0.3em;
    padding-left: 0.6em; }
  .trix-content [dir=rtl] blockquote,
  .trix-content blockquote[dir=rtl] {
    border-width: 0;
    border-right-width: 0.3em;
    margin-right: 0.3em;
    padding-right: 0.6em; }
  .trix-content li {
    margin-left: 1em; }
  .trix-content [dir=rtl] li {
    margin-right: 1em; }
  .trix-content pre {
    display: inline-block;
    width: 100%;
    vertical-align: top;
    font-family: monospace;
    font-size: 0.9em;
    padding: 0.5em;
    white-space: pre;
    background-color: #eee;
    overflow-x: auto; }
  .trix-content img {
    max-width: 100%;
    height: auto; }
  .trix-content .attachment {
    display: inline-block;
    position: relative;
    max-width: 100%; }
    .trix-content .attachment a {
      color: inherit;
      text-decoration: none; }
      .trix-content .attachment a:hover, .trix-content .attachment a:visited:hover {
        color: inherit; }
  .trix-content .attachment__caption {
    text-align: center; }
    .trix-content .attachment__caption .attachment__name + .attachment__size::before {
      content: ' · '; }
  .trix-content .attachment--preview {
    width: 100%;
    text-align: center; }
    .trix-content .attachment--preview .attachment__caption {
      color: #666;
      font-size: 0.9em;
      line-height: 1.2; }
  .trix-content .attachment--file {
    color: #333;
    line-height: 1;
    margin: 0 2px 2px 2px;
    padding: 0.4em 1em;
    border: 1px solid #bbb;
    border-radius: 5px; }
  .trix-content .attachment-gallery {
    display: flex;
    flex-wrap: wrap;
    position: relative; }
    .trix-content .attachment-gallery .attachment {
      flex: 1 0 33%;
      padding: 0 0.5em;
      max-width: 33%; }
    .trix-content .attachment-gallery.attachment-gallery--2 .attachment, .trix-content .attachment-gallery.attachment-gallery--4 .attachment {
      flex-basis: 50%;
      max-width: 50%; }
/*
 * Provides a drop-in pointer for the default Trix stylesheet that will format the toolbar and
 * the trix-editor content (whether displayed or under editing). Feel free to incorporate this
 * inclusion directly in any other asset bundle and remove this file.
 *

*/

/*
 * We need to override trix.css’s image gallery styles to accommodate the
 * <action-text-attachment> element we wrap around attachments. Otherwise,
 * images in galleries will be squished by the max-width: 33%; rule.
*/
.trix-content .attachment-gallery > action-text-attachment,
.trix-content .attachment-gallery > .attachment {
  flex: 1 0 33%;
  padding: 0 0.5em;
  max-width: 33%;
}

.trix-content .attachment-gallery.attachment-gallery--2 > action-text-attachment,
.trix-content .attachment-gallery.attachment-gallery--2 > .attachment, .trix-content .attachment-gallery.attachment-gallery--4 > action-text-attachment,
.trix-content .attachment-gallery.attachment-gallery--4 > .attachment {
  flex-basis: 50%;
  max-width: 50%;
}

.trix-content action-text-attachment .attachment {
  padding: 0 !important;
  max-width: 100% !important;
}
/*
 * Layout glue for the Admina template.
 *
 * The compiled Admina stylesheet (vendor/assets/stylesheets/admina/style.css,
 * built from vendor/admina-template via `npm run build:css`) provides the
 * component classes (.twin-sidebar, .twin-menu, .dashboard-main, .navbar-header,
 * .d-footer, ...). This file only adds the small pieces the host layout needs:
 * the twin sidebar's theme tokens and a few print helpers.
 *
 * Loaded via app/assets/stylesheets/application.css (require_tree .), after
 * the Admina stylesheet, so these rules win.
 */

/* Flash / notice alerts — plain CSS so they render correctly in every layout
   (the admin layout has Tailwind; devise/static do not). */
.alert {
  margin-bottom: 1rem;
  padding: 0.75rem 1rem;
  border: 1px solid transparent;
  border-radius: 0.5rem;
  font-size: 0.875rem;
}

.alert .alert-link {
  font-weight: 600;
  text-decoration: underline;
  color: inherit;
}

.alert-light-success {
  color: #15803d;
  background-color: #f0fdf4;
  border-color: #bbf7d0;
}

.alert-light-danger {
  color: #b91c1c;
  background-color: #fef2f2;
  border-color: #fecaca;
}

.alert-light-warning {
  color: #b45309;
  background-color: #fff9e2;
  border-color: #ffeba6;
}

.alert-light-info {
  color: #1d4ed8;
  background-color: #eff6ff;
  border-color: #bfdbfe;
}

/* Admina alert.html colour variants (flash messages) */
.alert-success { color: #15803d; background-color: #dcfce7; border-color: #dcfce7; }
.alert-danger  { color: #b91c1c; background-color: #fee2e2; border-color: #fee2e2; }
.alert-warning { color: #b45309; background-color: #fff9e2; border-color: #fff9e2; }
.alert-info    { color: #1d4ed8; background-color: #dbeafe; border-color: #dbeafe; }

:root.dark .alert-success { color: #86efac; background-color: rgba(22, 163, 74, 0.18); border-color: transparent; }
:root.dark .alert-danger  { color: #fca5a5; background-color: rgba(220, 38, 38, 0.18); border-color: transparent; }
:root.dark .alert-warning { color: #fcd34d; background-color: rgba(217, 119, 6, 0.18); border-color: transparent; }
:root.dark .alert-info    { color: #93c5fd; background-color: rgba(37, 99, 235, 0.2); border-color: transparent; }

/* Pagination (app/views/pagy/_bootstrap_nav.html.slim) */
.pagy-nav .pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem;
  padding: 0;
  margin: 1.25rem 0 0;
  list-style: none;
}

.pagy-nav .page-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25rem;
  height: 2.25rem;
  padding: 0 0.625rem;
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  color: #4b5563;
  font-size: 0.875rem;
  text-decoration: none;
  transition: all 0.15s ease;
}

.pagy-nav .page-link svg { width: 1rem; height: 1rem; }

.pagy-nav .page-link:hover {
  border-color: #487fff;
  color: #487fff;
}

.pagy-nav .page-item.active .page-link {
  background-color: #487fff;
  border-color: #487fff;
  color: #fff;
}

.pagy-nav .page-item.disabled .page-link {
  opacity: 0.5;
  pointer-events: none;
}

:root.dark .pagy-nav .page-link {
  border-color: #3f4b5b;
  color: #d1d5db;
}

/* ---------------------------------------------------------------------
   Twin sidebar — theme tokens.

   The component CSS lives in the vendored template
   (vendor/admina-template/src/assets/scss/homes/_sidebar-demo.scss, compiled
   into vendor/assets/stylesheets/admina/style.css). That file is kept verbatim
   from upstream, so the few greys it hard-codes are snapped to the siabjad
   Admina palette here instead — this stylesheet loads after it.

   --ts-purple already resolves to primary-600 (#487FFF) via the template's own
   fallback, and every dark-mode token already matches, so only the three light
   greys need mapping.

   Scoped to :root:not(.dark) on purpose — the template's dark values live on a
   bare `.dark` selector, which this file would otherwise outrank on source
   order alone and silently undo.
   --------------------------------------------------------------------- */
:root:not(.dark) {
  --ts-text: #6b7280;   /* neutral-500 */
  --ts-border: #ebecef; /* neutral-200 */
  --ts-hover: #f5f6fa;  /* neutral-50  */
}

/* ---------------------------------------------------------------------
   Twin sidebar — host fixes over the vendored template.

   The vendored .twin-rail__nav sets `overflow-y: auto`, which (because a
   non-visible overflow on one axis forces the other to `auto` too) clips the
   .rail-tip tooltips that stick out to the right of the rail. Let the nav
   overflow be visible so the tooltips escape; it only scrolls on very short
   viewports, where the tooltips are hidden anyway.
   --------------------------------------------------------------------- */
.twin-rail__nav {
  overflow: visible;
}

@media (max-height: 640px) {
  .twin-rail__nav {
    overflow-y: auto;
  }
}

/* Rail section names are never shown as text inside the panel, so surface the
   .rail-tip label on hover/focus in both the expanded and collapsed states
   (the vendored rule only shows it while collapsed). */
.twin-sidebar .rail-icon:hover .rail-tip,
.twin-sidebar .rail-icon:focus-visible .rail-tip {
  opacity: 1;
  transform: translateY(-50%) scale(1);
}

/* The mobile open button used to be `position: fixed` at the viewport's top
   left, so it floated on top of the semester picker inside the navbar. Keep it
   inline in the navbar flow instead. */
.twin-mobile-toggle {
  position: static;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.75rem;
  background: transparent;
  box-shadow: none;
  color: inherit;
  font-size: inherit;
}

/* Outrank the vendored `.dark .twin-mobile-toggle` (which re-adds the floating
   card look) now that the button sits inline in the navbar. */
:root.dark .twin-mobile-toggle {
  background: transparent;
  box-shadow: none;
  color: inherit;
}

/* Wordmark — uppercase, wide-tracked gradient with a small accent dot.
   The gradient mirrors the Siabjad logo (blue → cyan). */
:root {
  --siabjad-gradient: linear-gradient(120deg, #2563EB 0%, #3B82F6 40%, #06B6D4 75%, #22D3EE 100%);
}

.twin-panel__logo {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
  background: var(--siabjad-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #2563EB;
}

.twin-panel__logo::after {
  content: "";
  width: 0.4rem;
  height: 0.4rem;
  flex-shrink: 0;
  border-radius: 999px;
  background: linear-gradient(120deg, #2563EB 0%, #22D3EE 100%);
}

/* Footer brand — same gradient wordmark treatment as the sidebar logo. */
.siabjad-wordmark {
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  background: var(--siabjad-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #2563EB;
}

/* Footer wordmark: same trailing accent dot as the sidebar / auth brand. */
.d-footer .siabjad-wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.d-footer .siabjad-wordmark::after {
  content: "";
  width: 0.4rem;
  height: 0.4rem;
  flex-shrink: 0;
  border-radius: 999px;
  background: linear-gradient(120deg, #2563EB 0%, #22D3EE 100%);
}

/* The Admina `.dashboard-main` ships as a column flex container with
   `flex-wrap: wrap`. A wide child (e.g. the dashboard tables) then makes the
   container grow to its max-content width and overflow the viewport on
   mobile/tablet. A vertical stack never needs to wrap, so force nowrap and let
   the inner `.overflow-x-auto` wrappers scroll instead. */
.dashboard-main {
  flex-wrap: nowrap;
}

/* App footer: transparent so the page background shows through. */
.d-footer,
:root.dark .d-footer {
  background-color: transparent;
}

/* ---------------------------------------------------------------------
   Dashboard: elegant Admina table.

   Mirrors the "Recent Orders" table on Admina index-2 — soft uppercase
   header, hairline row separators, hover highlight, pill totals and a
   tinted grand-total row. Used by the dashboard rekap matrix and the
   teacher schedule table.
   --------------------------------------------------------------------- */
.admina-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.admina-table thead th {
  padding: 0.75rem 1rem;
  background-color: #f9fafb;
  color: #6b7280;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
  border-bottom: 1px solid #ebecef;
}

.admina-table thead tr + tr th {
  border-top: 1px solid #ebecef;
}

.admina-table thead th:first-child {
  text-align: start;
}

.admina-table tbody td {
  padding: 0.8125rem 1rem;
  color: #374151;
  text-align: center;
  vertical-align: middle;
  border-bottom: 1px solid #f3f4f6;
}

.admina-table tbody td:first-child {
  text-align: start;
  font-weight: 600;
  color: #111827;
}

.admina-table tbody tr {
  transition: background-color 0.15s ease;
}

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

.admina-table tbody tr:last-child td {
  border-bottom: 0;
}

/* Table variant that wraps instead of scrolling horizontally (modals) */
.admina-table--wrap {
  table-layout: fixed;
}
.admina-table--wrap thead th,
.admina-table--wrap tbody td {
  white-space: normal;
  overflow-wrap: anywhere;
}

.admina-table__pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25rem;
  padding: 0.25rem 0.625rem;
  border-radius: 999px;
  background-color: #e4f1ff;
  color: #1d4ed8;
  font-size: 0.8125rem;
  font-weight: 600;
}

.admina-table__total td {
  background-color: #eff4ff;
  color: #1d4ed8 !important;
  font-weight: 700;
  border-top: 1px solid #dbe6ff;
  border-bottom: 0 !important;
}

.admina-table__total:hover td {
  background-color: #e4edff !important;
}

:root.dark .admina-table thead th {
  background-color: #1f2937;
  color: #9ca3af;
  border-color: #3f4b5b;
}

:root.dark .admina-table tbody td {
  color: #e5e7eb;
  border-color: #323d4e;
}

:root.dark .admina-table tbody td:first-child {
  color: #ffffff;
}

:root.dark .admina-table tbody tr:hover td {
  background-color: rgba(72, 127, 255, 0.08);
}

:root.dark .admina-table__pill {
  background-color: rgba(72, 127, 255, 0.2);
  color: #95c7ff;
}

:root.dark .admina-table__total td {
  background-color: rgba(72, 127, 255, 0.15);
  color: #95c7ff !important;
  border-top-color: #3f4b5b;
}

:root.dark .admina-table__total:hover td {
  background-color: rgba(72, 127, 255, 0.22) !important;
}

/* Modul Ajar list: keep all columns inside the card (no horizontal scroll
   when the page is zoomed) by fixing the layout and letting labels wrap. */
.admina-table.modul-ajar-table {
  table-layout: fixed;
}
.admina-table.admina-table--txn.modul-ajar-table thead th,
.admina-table.admina-table--txn.modul-ajar-table tbody td {
  white-space: normal;
  overflow-wrap: anywhere;
}
.modul-ajar-table col.col-no { width: 6%; }
.modul-ajar-table col.col-fase-kelas { width: 11%; }
.modul-ajar-table col.col-mapel-ptk { width: 37%; }
.modul-ajar-table col.col-cp { width: 8%; }
.modul-ajar-table col.col-tp { width: 8%; }
.modul-ajar-table col.col-materi { width: 14%; }
.modul-ajar-table col.col-aksi { width: 16%; }
#modul-ajars-table thead th {
  text-align: center;
}
#modul-ajars-table tbody td:last-child {
  text-align: right;
}
.modul-ajar-table .btn-group {
  flex-wrap: wrap;
  justify-content: flex-end;
}
.modul-ajar-table .cell-stack {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  line-height: 1.3;
}
.modul-ajar-table .cell-stack__primary {
  color: #111827;
  font-weight: 600;
}
.modul-ajar-table .cell-stack__secondary {
  color: #6b7280;
  font-size: 0.8125rem;
  font-weight: 400;
}
:root.dark .modul-ajar-table .cell-stack__primary {
  color: #f3f4f6;
}
:root.dark .modul-ajar-table .cell-stack__secondary {
  color: #9ca3af;
}
@media (max-width: 767.98px) {
  .admina-table.modul-ajar-table {
    table-layout: auto;
  }
}

/* ---------------------------------------------------------------------
   "Grafik Presensi Guru" — two logical column groups in one table.
   KBM completeness (Selesai / Berlangsung / Belum Mulai / Persentase,
   columns 2–5) is tinted green; attendance (Izin / Alpa / Sakit / Dinas /
   Cuti / Total Seharusnya / Persentase Kehadiran, columns 6–12) is tinted
   blue. Desktop only —
   the mobile card layout (responsive-index-table) keeps its plain white cards.
   --------------------------------------------------------------------- */
@media (min-width: 768px) {
  #teacher-attendance-table thead th:nth-child(n + 2):nth-child(-n + 5),
  #teacher-attendance-table tbody td:nth-child(n + 2):nth-child(-n + 5) {
    background-color: #f0fdf4;
  }
  #teacher-attendance-table thead th:nth-child(n + 2):nth-child(-n + 5) {
    color: #15803d;
  }
  #teacher-attendance-table thead th:nth-child(n + 6):nth-child(-n + 12),
  #teacher-attendance-table tbody td:nth-child(n + 6):nth-child(-n + 12) {
    background-color: #eff6ff;
  }
  #teacher-attendance-table thead th:nth-child(n + 6):nth-child(-n + 12) {
    color: #1d4ed8;
  }
  #teacher-attendance-table thead th:nth-child(5),
  #teacher-attendance-table tbody td:nth-child(5) {
    border-right: 1px solid #bbf7d0;
  }

  /* Fit the whole table without a horizontal scrollbar: fixed layout with
     wrapping cells and tighter padding so all 11 columns stay inside the card. */
  #teacher-attendance-table {
    table-layout: fixed;
  }
  #teacher-attendance-table th,
  #teacher-attendance-table td {
    white-space: normal;
    overflow-wrap: anywhere;
    padding-left: 0.4rem;
    padding-right: 0.4rem;
  }
  #teacher-attendance-table thead th:nth-child(5),
  #teacher-attendance-table tbody td:nth-child(5),
  #teacher-attendance-table thead th:nth-child(12),
  #teacher-attendance-table tbody td:nth-child(12) {
    text-align: center;
  }
}

:root.dark #teacher-attendance-table thead th:nth-child(n + 2):nth-child(-n + 5),
:root.dark #teacher-attendance-table tbody td:nth-child(n + 2):nth-child(-n + 5) {
  background-color: rgba(22, 163, 74, 0.12);
}
:root.dark #teacher-attendance-table thead th:nth-child(n + 2):nth-child(-n + 5) {
  color: #86efac;
}
:root.dark #teacher-attendance-table thead th:nth-child(n + 6):nth-child(-n + 12),
:root.dark #teacher-attendance-table tbody td:nth-child(n + 6):nth-child(-n + 12) {
  background-color: rgba(59, 130, 246, 0.12);
}
:root.dark #teacher-attendance-table thead th:nth-child(n + 6):nth-child(-n + 12) {
  color: #93c5fd;
}

/* ---------------------------------------------------------------------
   jQuery DataTables (Admina skin).

   The vendored DataTables 1.10 core ships no usable theme here, so the
   wrapper controls and the sorting indicators are styled to match the
   Admina table. Loaded globally from the admin layout.
   --------------------------------------------------------------------- */
.dataTables_wrapper {
  width: 100%;
  position: relative;
}

/* Server-side "Processing…" indicator: a floating pill centred over the table.
   DataTables toggles this element with an inline `display: block/none`, so the
   centering must not rely on the element itself being a flex container — the
   icon/text are aligned by the inner `.dt-processing-inner` wrapper instead. */
.dataTables_wrapper .dataTables_processing {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 10;
  display: block;
  margin: 0;
  padding: 0.625rem 1.125rem;
  transform: translate(-50%, -50%);
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  background-color: #ffffff;
  color: #374151;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  text-align: center;
  box-shadow: 0 12px 32px rgba(16, 24, 40, 0.14);
}
.dataTables_wrapper .dataTables_processing .dt-processing-inner {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.4rem;
  min-width: 11rem;
}
.dataTables_wrapper .dataTables_processing .dt-progress-label {
  display: block;
  text-align: center;
}
.dataTables_wrapper .dataTables_processing .dt-progress {
  display: block;
  height: 0.375rem;
  width: 100%;
  overflow: hidden;
  border-radius: 999px;
  background-color: rgba(72, 127, 255, 0.18);
}
.dataTables_wrapper .dataTables_processing .dt-progress__bar {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background-color: #487fff;
  transition: width 0.2s ease;
}
.dataTables_wrapper .dataTables_processing .dt-spinner {
  display: inline-block;
  flex: none;
  width: 1rem;
  height: 1rem;
  border: 2px solid rgba(72, 127, 255, 0.25);
  border-top-color: #487fff;
  border-radius: 50%;
  transform-origin: center;
  animation: dt-spin 0.6s linear infinite;
}
@keyframes dt-spin {
  to { transform: rotate(360deg); }
}
:root.dark .dataTables_wrapper .dataTables_processing {
  border-color: #3f4b5b;
  background-color: #1f2937;
  color: #e5e7eb;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
}
:root.dark .dataTables_wrapper .dataTables_processing .dt-progress {
  background-color: rgba(149, 199, 255, 0.2);
}
:root.dark .dataTables_wrapper .dataTables_processing .dt-progress__bar {
  background-color: #95c7ff;
}
:root.dark .dataTables_wrapper .dataTables_processing .dt-spinner {
  border-color: rgba(149, 199, 255, 0.25);
  border-top-color: #95c7ff;
}

/* Learning Activities list: every column is left-aligned (the Admina
   `.table` skin centres cells by default). */
#learning-activities-table th,
#learning-activities-table td {
  text-align: left;
}

.dataTables_wrapper .dt-header,
.dataTables_wrapper .dt-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.dataTables_wrapper .dt-header {
  margin-bottom: 1rem;
}

.dataTables_wrapper .dt-footer {
  margin-top: 0.75rem;
}

.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter {
  margin-bottom: 0;
}

.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  color: #6b7280;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.25rem;
  white-space: nowrap;
}

.dataTables_wrapper .dataTables_filter label {
  justify-content: flex-end;
}

.dataTables_wrapper .dataTables_length select {
  flex: none;
  width: auto;
  height: 2.5rem;
  padding: 0.5rem 2rem 0.5rem 0.75rem;
  border: 1px solid transparent;
  border-radius: 999px;
  background-color: #f3f4f6;
  color: #4b5563;
  font-size: 0.875rem;
}

.dataTables_wrapper .dataTables_filter input {
  width: 100%;
  min-width: 12rem;
  height: 2.5rem;
  padding: 0.5rem 1rem 0.5rem 0.875rem;
  border: 1px solid transparent;
  border-radius: 999px;
  background-color: #f3f4f6;
  color: #4b5563;
  font-size: 0.875rem;
}

.dataTables_wrapper .dataTables_length select:focus,
.dataTables_wrapper .dataTables_filter input:focus {
  outline: none;
  border-color: #487fff;
  background-color: #fff;
  box-shadow: 0 0 0 3px rgba(72, 127, 255, 0.15);
}

.dataTables_wrapper .dataTables_info {
  padding-top: 0;
  color: #6b7280;
  font-size: 0.8125rem;
}

.dataTables_wrapper .dataTables_paginate {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.375rem;
  padding-top: 0;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25rem;
  height: 2.25rem;
  padding: 0 0.625rem;
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  background-color: #ffffff;
  color: #6b7280 !important;
  font-size: 0.8125rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  border-color: #487fff;
  background-color: #eef4ff;
  color: #487fff !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  border-color: #487fff;
  background-color: #487fff;
  color: #ffffff !important;
  box-shadow: 0 6px 14px rgba(72, 127, 255, 0.28);
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
  border-color: #f3f4f6;
  background-color: #f9fafb;
  color: #cbd5e1 !important;
  box-shadow: none;
  cursor: default;
}

/* Left-align the teacher name column: the Admina `.table` component centres
   every cell except the first. */
.table td.ptk-name {
  text-align: start;
}

/* Sorting indicators */
table.dataTable thead th {
  cursor: pointer;
}

table.dataTable thead th.sorting,
table.dataTable thead th.sorting_asc,
table.dataTable thead th.sorting_desc {
  position: relative;
  padding-right: 1.75rem;
}

table.dataTable thead th.sorting::after,
table.dataTable thead th.sorting_asc::after,
table.dataTable thead th.sorting_desc::after {
  position: absolute;
  top: 50%;
  right: 0.75rem;
  transform: translateY(-50%);
  color: #9ca3af;
  font-size: 0.7rem;
  line-height: 1;
}

table.dataTable thead th.sorting::after { content: "↕"; }
table.dataTable thead th.sorting_asc::after { content: "↑"; color: #487fff; }
table.dataTable thead th.sorting_desc::after { content: "↓"; color: #487fff; }

:root.dark .dataTables_wrapper .dataTables_length label,
:root.dark .dataTables_wrapper .dataTables_filter label,
:root.dark .dataTables_wrapper .dataTables_info {
  color: #9ca3af;
}

:root.dark .dataTables_wrapper .dataTables_length select,
:root.dark .dataTables_wrapper .dataTables_filter input {
  border-color: transparent;
  background-color: #273142;
  color: #e5e7eb;
}

:root.dark .dataTables_wrapper .dataTables_length select:focus,
:root.dark .dataTables_wrapper .dataTables_filter input:focus {
  border-color: #487fff;
  background-color: #1f2937;
}

:root.dark .dataTables_wrapper .dataTables_paginate .paginate_button {
  border-color: #3f4b5b;
  background-color: #1f2937;
  color: #d1d5db !important;
}

:root.dark .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  border-color: #487fff;
  background-color: rgba(72, 127, 255, 0.15);
  color: #95c7ff !important;
}

:root.dark .dataTables_wrapper .dataTables_paginate .paginate_button.current,
:root.dark .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  border-color: #487fff;
  background-color: #487fff;
  color: #ffffff !important;
}

:root.dark .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
:root.dark .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
  border-color: #374151;
  background-color: #1f2937;
  color: #6b7280 !important;
}

/* ---------------------------------------------------------------------
   "Latest Transaction" table (Admina index-6) — used by the peserta
   didik list. Airy, borderless-header skin with avatar user cells and
   soft bordered status pills.
   --------------------------------------------------------------------- */
.admina-table.admina-table--txn thead th {
  padding: 1rem 1.25rem;
  background-color: transparent;
  color: #6b7280;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  text-align: start;
  border-bottom: 1px solid #f3f4f6;
}
.admina-table.admina-table--txn thead th:first-child,
.admina-table.admina-table--txn thead th:last-child {
  text-align: start;
}
.admina-table.admina-table--txn tbody td {
  padding: 0.75rem 1.25rem;
  text-align: start;
  color: #374151;
  vertical-align: middle;
  white-space: nowrap;
  border-bottom: 1px solid #f3f4f6;
}
.admina-table.admina-table--txn tbody td:first-child {
  color: #9ca3af;
  font-weight: 500;
}
.admina-table.admina-table--txn tbody tr:hover td {
  background-color: #f5f8ff;
}
.admina-table.admina-table--txn tbody tr:last-child td {
  border-bottom: 0;
}
:root.dark .admina-table.admina-table--txn thead th {
  background-color: transparent;
  color: #9ca3af;
  border-color: #323d4e;
}
:root.dark .admina-table.admina-table--txn tbody td {
  color: #e5e7eb;
  border-color: #323d4e;
}
:root.dark .admina-table.admina-table--txn tbody td:first-child {
  color: #6b7280;
}
:root.dark .admina-table.admina-table--txn tbody tr:hover td {
  background-color: rgba(72, 127, 255, 0.08);
}

/* The transaction skin muted the first column, which made key data (names,
   materi, nomor) look disabled. Restore the normal readable text colour. */
.admina-table.admina-table--txn tbody td:first-child {
  color: #111827;
  font-weight: 500;
}
:root.dark .admina-table.admina-table--txn tbody td:first-child {
  color: #f9fafb;
}

/* Phosphor sort arrows (like the template) */
table.dataTable.admina-table--txn thead th.sorting,
table.dataTable.admina-table--txn thead th.sorting_asc,
table.dataTable.admina-table--txn thead th.sorting_desc {
  padding-right: 2rem;
}
table.dataTable.admina-table--txn thead th.sorting::after,
table.dataTable.admina-table--txn thead th.sorting_asc::after,
table.dataTable.admina-table--txn thead th.sorting_desc::after {
  font-family: "Phosphor" !important;
  font-size: 0.9rem;
  font-weight: normal;
}
table.dataTable.admina-table--txn thead th.sorting::after { content: "\e098"; color: #9ca3af; }
table.dataTable.admina-table--txn thead th.sorting_asc::after { content: "\e13c"; color: #487fff; }
table.dataTable.admina-table--txn thead th.sorting_desc::after { content: "\e136"; color: #487fff; }

/* Peserta didik list: two data points per identity cell (NIS/NISN and
   name/email) with a fixed layout so the six columns fit without a
   horizontal scrollbar. */
@media (min-width: 768px) {
  .admina-table.peserta-didik-table {
    table-layout: fixed;
  }
  .admina-table.peserta-didik-table thead th,
  .admina-table.peserta-didik-table tbody td {
    white-space: normal;
    overflow-wrap: anywhere;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
  .admina-table.peserta-didik-table thead th:nth-child(1) { width: 5%; }
  .admina-table.peserta-didik-table thead th:nth-child(2) { width: 35%; }
  .admina-table.peserta-didik-table thead th:nth-child(3) { width: 11%; }
  .admina-table.peserta-didik-table thead th:nth-child(4) { width: 14%; }
  .admina-table.peserta-didik-table thead th:nth-child(5) { width: 6%; }
  .admina-table.peserta-didik-table thead th:nth-child(6) { width: 11%; }
  .admina-table.peserta-didik-table thead th:nth-child(7) { width: 18%; }
  .admina-table.peserta-didik-table .btn-group {
    flex-wrap: wrap;
    justify-content: center;
  }
  .admina-table.peserta-didik-table .learning-presence-student__nis {
    display: block;
    overflow-wrap: anywhere;
  }
}

/* Harian / Sumatif score panel: pill tabs + grouped card lists. */
.learning-score-tabs {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  padding: 0.375rem;
  margin-bottom: 1rem;
  border-radius: 1rem;
  background-color: #f3f4f6;
}
.learning-score-tabs .nav-item { display: inline-flex; }
.learning-score-tabs .nav-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border: 0;
  border-radius: 0.75rem;
  background: transparent;
  color: #6b7280;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.25rem;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.learning-score-tabs .nav-link:hover {
  background-color: #e9ebef;
  color: #374151;
}
.learning-score-tabs .nav-link.active,
.learning-score-tabs .nav-link.active:hover,
.learning-score-tabs .nav-link.active span,
.learning-score-tabs .nav-link.active i {
  color: #fff;
}
.learning-score-tabs .nav-link.active,
.learning-score-tabs .nav-link.active:hover {
  background-color: #487fff;
  box-shadow: 0 4px 12px rgba(72, 127, 255, 0.28);
}
.learning-score-tabs .nav-link .tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.35rem;
  border-radius: 9999px;
  background-color: #e5e7eb;
  color: #4b5563;
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1;
}
.learning-score-tabs .nav-link.active .tab-count {
  background-color: rgba(255, 255, 255, 0.22);
  color: #fff;
}

.learning-score-groups {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}
.learning-score-group {
  --level-color: #487fff;
  border: 1px solid #e5e7eb;
  border-left: 3px solid var(--level-color);
  border-radius: 0.75rem;
  background-color: #fff;
}
.learning-score-group--memahami { --level-color: #487fff; }
.learning-score-group--mengaplikasi { --level-color: #0ea5e9; }
.learning-score-group--merefleksi { --level-color: #8b5cf6; }
.learning-score-group__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.625rem 1rem;
  background-color: #f9fafb;
  border-bottom: 1px solid #e5e7eb;
  border-radius: 0.75rem 0.75rem 0 0;
}
.learning-score-group__title {
  color: var(--level-color);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.learning-score-group__count {
  color: #9ca3af;
  font-size: 0.75rem;
  font-weight: 400;
}
.learning-score-items {
  list-style: none;
  margin: 0;
  padding: 0;
}
.learning-score-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-top: 1px solid #f3f4f6;
}
.learning-score-item:first-child { border-top: 0; }
.learning-score-item:last-child { border-radius: 0 0 0.75rem 0.75rem; }
.learning-score-item:hover { z-index: 1; background-color: #f5f8ff; }
.learning-score-item__icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 0.5rem;
  background-color: #eff4ff;
  color: var(--level-color);
  font-size: 1rem;
}
.learning-score-item__text {
  flex: 1 1 auto;
  min-width: 0;
  color: #374151;
  font-size: 0.875rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.learning-score-item__action {
  flex: none;
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  background-color: #fff;
  color: #6b7280;
}
.learning-score-item__action:hover {
  border-color: #bfdbfe;
  background-color: #eff4ff;
  color: #487fff;
}
/* Keep the action tooltip inside the card: anchor it to the right edge so it
   expands leftwards instead of being clipped past the viewport. */
.learning-score-item__action[data-tooltip]::after {
  left: auto;
  right: 0;
  transform: none;
}
:root.dark .learning-score-tabs { background-color: #1f2937; }
:root.dark .learning-score-tabs .nav-link { color: #9ca3af; }
:root.dark .learning-score-tabs .nav-link:hover { background-color: #374151; color: #e5e7eb; }
:root.dark .learning-score-tabs .nav-link.active,
:root.dark .learning-score-tabs .nav-link.active:hover { background-color: #487fff; color: #fff; }
:root.dark .learning-score-tabs .nav-link .tab-count { background-color: #374151; color: #d1d5db; }
:root.dark .learning-score-tabs .nav-link.active .tab-count { background-color: rgba(255, 255, 255, 0.22); color: #fff; }
:root.dark .learning-score-group {
  background-color: #273142;
  border-color: #3f4b5b;
  border-left-color: var(--level-color);
}
:root.dark .learning-score-group__head {
  background-color: #1f2937;
  border-bottom-color: #3f4b5b;
}
:root.dark .learning-score-group__count { color: #9ca3af; }
:root.dark .learning-score-item { border-top-color: #3f4b5b; }
:root.dark .learning-score-item:hover { background-color: rgba(72, 127, 255, 0.1); }
:root.dark .learning-score-item__icon { background-color: rgba(72, 127, 255, 0.16); }
:root.dark .learning-score-item__text { color: #e5e7eb; }
:root.dark .learning-score-item__action {
  border-color: #3f4b5b;
  background-color: #1f2937;
  color: #d1d5db;
}
:root.dark .learning-score-item__action:hover {
  border-color: #487fff;
  background-color: rgba(72, 127, 255, 0.15);
  color: #95c7ff;
}

/* Sumatif Akhir Semester: formula note above the editable score table. */
.sumatif-formula {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-top: 0.75rem;
  padding: 0.625rem 0.75rem;
  border: 1px solid #dbe6ff;
  border-left: 3px solid #487fff;
  border-radius: 0.5rem;
  background-color: #f5f8ff;
  color: #374151;
  font-size: 0.8125rem;
  line-height: 1.45;
}
.sumatif-formula > i {
  flex: none;
  margin-top: 0.05rem;
  color: #487fff;
  font-size: 1rem;
}
.sumatif-formula strong {
  color: #1d4ed8;
  font-weight: 600;
}
:root.dark .sumatif-formula {
  border-color: #374151;
  border-left-color: #487fff;
  background-color: rgba(72, 127, 255, 0.1);
  color: #e5e7eb;
}
:root.dark .sumatif-formula strong { color: #95c7ff; }

/* Today's absences: free-text columns (nama, catatan) wrap so the table fits
   its card without a horizontal scrollbar (overrides the txn nowrap). */
.admina-table.admina-table--txn.absence-table tbody td {
  white-space: normal;
  overflow-wrap: anywhere;
}
.admina-table.admina-table--txn.absence-table tbody td:first-child,
.admina-table.admina-table--txn.absence-table tbody td:nth-child(3),
.admina-table.admina-table--txn.absence-table tbody td:nth-child(4) {
  width: 1%;
  white-space: nowrap;
}

/* Teacher schedule list (nilai/presensi per kelas): the "No" column stays
   compact and centred, "Kelas" and the action column hug their content, so
   the subject column absorbs the remaining width instead of the number.
   Desktop only — the mobile card view (responsive-index-table) needs the
   cells full width. */
@media (min-width: 768px) {
  .admina-table.teacher-schedule-table thead th.col-no,
  .admina-table.teacher-schedule-table tbody td.col-no {
    width: 3.5rem;
    min-width: 3.5rem;
    text-align: center;
    white-space: nowrap;
  }
  .admina-table.teacher-schedule-table thead th.col-kelas,
  .admina-table.teacher-schedule-table tbody td.col-kelas,
  .admina-table.teacher-schedule-table thead th.col-aksi,
  .admina-table.teacher-schedule-table tbody td.col-aksi {
    width: 1%;
    white-space: nowrap;
  }
  .admina-table.teacher-schedule-table thead th.col-aksi,
  .admina-table.teacher-schedule-table tbody td.col-aksi {
    text-align: center;
  }
}

/* Sumatif akhir (editable score grid): compact, centred columns so the
   number/NIS/score cells don't get stretched by the table width. */
.admina-table.sumatif-akhir-table thead th.col-no,
.admina-table.sumatif-akhir-table tbody td.col-no {
  width: 3.5rem;
  min-width: 3.5rem;
  text-align: center;
  white-space: nowrap;
  color: #9ca3af;
  font-weight: 500;
}
.admina-table.sumatif-akhir-table thead th.col-nis,
.admina-table.sumatif-akhir-table tbody td.col-nis {
  width: 1%;
  white-space: nowrap;
  text-align: center;
  color: #6b7280;
  font-variant-numeric: tabular-nums;
}
.admina-table.sumatif-akhir-table thead th.col-score,
.admina-table.sumatif-akhir-table tbody td.col-score,
.admina-table.sumatif-akhir-table thead th.col-final,
.admina-table.sumatif-akhir-table tbody td.col-final {
  width: 7rem;
  min-width: 7rem;
  text-align: center;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.admina-table.sumatif-akhir-table tbody td.col-final .sumatif-final-score {
  color: #487fff;
}
.admina-table.sumatif-akhir-table thead th {
  background-color: #f9fafb;
}
:root.dark .admina-table.sumatif-akhir-table thead th {
  background-color: #1f2937;
  color: #9ca3af;
}
:root.dark .admina-table.sumatif-akhir-table tbody td.col-nis {
  color: #9ca3af;
}

/* Name column: regular weight */
.txn-name {
  font-weight: 400;
  color: #374151;
}
:root.dark .txn-name { color: #e5e7eb; }

/* PKL list: keep the combined columns wrapping so the table never scrolls
   sideways on desktop. */
.admina-table.pkl-index-table thead th,
.admina-table.pkl-index-table tbody td {
  white-space: normal;
  overflow-wrap: anywhere;
}
.admina-table.pkl-index-table thead th:first-child,
.admina-table.pkl-index-table tbody td:first-child {
  width: 4.5rem;
  white-space: nowrap;
}
.admina-table.pkl-index-table thead th:last-child,
.admina-table.pkl-index-table tbody td:last-child {
  width: 1%;
  white-space: nowrap;
}

/* Stacked main/sub text used by the name, company and date cells */
.pkl-cell__name {
  display: block;
  font-weight: 600;
  color: #111827;
}
.pkl-cell__sub {
  display: block;
  margin-top: 0.125rem;
  color: #6b7280;
  font-size: 0.75rem;
}
:root.dark .pkl-cell__name { color: #f9fafb; }
:root.dark .pkl-cell__sub { color: #9ca3af; }

/* Status badge (icon + label) and the riwayat button beneath it */
.pkl-status__badge {
  gap: 0.25rem;
}
.pkl-status__icon {
  font-size: 0.875rem;
}
.pkl-status__action {
  margin-top: 0.375rem;
}
.pkl-riwayat {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  border-color: #e5e7eb;
  color: #4b5563;
  text-decoration: none;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.pkl-riwayat:hover {
  border-color: #487fff;
  background-color: #eef4ff;
  color: #487fff;
}
:root.dark .pkl-riwayat {
  border-color: #3f4b5b;
  color: #d1d5db;
}
:root.dark .pkl-riwayat:hover {
  border-color: #487fff;
  background-color: rgba(72, 127, 255, 0.15);
  color: #95c7ff;
}

/* PKL filter bar: stacked on mobile, one row on desktop; the actions go
   full-width on mobile so the buttons are easy to tap. */
.pkl-filter__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.75rem;
}
.pkl-filter__actions {
  display: flex;
  gap: 0.5rem;
}
@media (min-width: 640px) {
  .pkl-filter__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
    align-items: end;
  }
}
@media (max-width: 639.98px) {
  .pkl-filter__actions .btn {
    flex: 1 1 0;
    justify-content: center;
  }
}

/* PKL page header actions (Tambah / Generate Status / Export): three equal-width
   columns, aligned to the right. On small screens the group takes its own
   full-width row so the three columns split the width evenly. */
.pkl-page > header > div:last-child {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(2.25rem, 1fr);
  align-items: center;
  gap: 0.5rem;
  margin-inline-start: auto;
  width: max-content;
}
.pkl-page > header > div:last-child .btn {
  width: 100%;
}
@media (max-width: 767.98px) {
  .pkl-page > header > div:last-child {
    width: 100%;
  }
}

/* Auto-numbered participant cards on the PKL activity form. The counter
   increments per rendered card, so removing/re-adding a row renumbers the
   rest (cocoon hides removed persisted rows, which are skipped). */
.pkl-peserta-list {
  counter-reset: pkl-peserta;
}
.pkl-peserta-list > .nested-fields {
  counter-increment: pkl-peserta;
}
.pkl-peserta-index::before {
  content: counter(pkl-peserta);
}

/* NIS column */
.txn-nis {
  font-weight: 400;
  color: #111827;
}
:root.dark .txn-nis { color: #f9fafb; }

/* Email column: account email + default/changed marker */
.txn-email { color: #374151; }
:root.dark .txn-email { color: #e5e7eb; }
/* Student accounts — default password banner. */
.student-default-password {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border: 1px solid #fde68a;
  border-radius: 0.75rem;
  background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
}
:root.dark .student-default-password {
  border-color: rgba(217, 119, 6, 0.45);
  background: linear-gradient(135deg, rgba(120, 53, 15, 0.35) 0%, rgba(120, 53, 15, 0.18) 100%);
}
.student-default-password__icon {
  display: inline-flex;
  width: 2.5rem;
  height: 2.5rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 0.75rem;
  background-color: #fde68a;
  color: #b45309;
  font-size: 1.25rem;
}
:root.dark .student-default-password__icon {
  background-color: rgba(217, 119, 6, 0.3);
  color: #fcd34d;
}
.student-default-password__body { flex: 1 1 12rem; min-width: 0; }
.student-default-password__title {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: #92400e;
}
:root.dark .student-default-password__title { color: #fcd34d; }
.student-default-password__text {
  margin: 0.125rem 0 0;
  font-size: 0.75rem;
  color: #b45309;
}
:root.dark .student-default-password__text { color: #fbbf24; }
.student-default-password__value {
  flex-shrink: 0;
  padding: 0.375rem 0.75rem;
  border: 1px dashed #f59e0b;
  border-radius: 0.5rem;
  background-color: #ffffff;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.875rem;
  font-weight: 700;
  color: #92400e;
  letter-spacing: 0.03em;
  user-select: all;
}
:root.dark .student-default-password__value {
  border-color: rgba(245, 158, 11, 0.6);
  background-color: rgba(31, 41, 55, 0.9);
  color: #fcd34d;
}

.email-flag {
  display: inline-flex;
  align-items: center;
  gap: 0.1875rem;
  margin-inline-end: 0.375rem;
  padding: 0.0625rem 0.4375rem;
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.5;
  vertical-align: middle;
}
.email-flag--default {
  background-color: #fef3c7;
  color: #b45309;
}
.email-flag--ok {
  background-color: #dcfce7;
  color: #15803d;
}
:root.dark .email-flag--default { background-color: rgba(217, 119, 6, 0.2); color: #fcd34d; }
:root.dark .email-flag--ok { background-color: rgba(34, 197, 94, 0.18); color: #86efac; }

/* Soft bordered pill badge (template status badge) */
.badge-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.375rem 1rem;
  border: 1px solid transparent;
  border-radius: 999px;
  background-color: transparent;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
}
.badge-pill--primary { border-color: #dbe6ff; color: #1d4ed8; }
.badge-pill--info { border-color: #bfdbfe; color: #2563eb; }
.badge-pill--danger { border-color: #fecaca; color: #dc2626; }
.badge-pill--success { border-color: #bbf7d0; color: #16a34a; }
.badge-pill--warning { border-color: #fde68a; color: #b45309; }
:root.dark .badge-pill--primary,
:root.dark .badge-pill--info { border-color: rgba(72, 127, 255, 0.35); color: #95c7ff; }
:root.dark .badge-pill--danger { border-color: rgba(239, 68, 68, 0.35); color: #fca5a5; }
:root.dark .badge-pill--success { border-color: rgba(34, 197, 94, 0.35); color: #86efac; }
:root.dark .badge-pill--warning { border-color: rgba(217, 119, 6, 0.35); color: #fcd34d; }

/* Mobile: centre the search / page-length controls and the footer controls */
@media (max-width: 767.98px) {
  .dataTables_wrapper .dt-header,
  .dataTables_wrapper .dt-footer {
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
  }
  .dataTables_wrapper .dataTables_length label,
  .dataTables_wrapper .dataTables_filter label {
    justify-content: space-between;
  }
  .dataTables_wrapper .dataTables_filter input {
    min-width: 0;
    width: 100%;
  }
  .dataTables_wrapper .dataTables_info {
    text-align: center;
  }
  .dataTables_wrapper .dataTables_paginate {
    justify-content: center;
  }
  .pkl-progress {
    min-width: 0;
    width: 100%;
  }
}

/* Nilai (grades) per-semester card */
.nilai-card__icon {
  display: inline-flex;
  width: 1.75rem;
  height: 1.75rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background-color: #e4f1ff;
  color: #487fff;
  font-size: 1rem;
}
:root.dark .nilai-card__icon {
  background-color: rgba(72, 127, 255, 0.18);
  color: #95c7ff;
}

/* Nilai per-semester list (default template cards on screen; A4 only in print) */
.nilai-view {
  overflow-x: auto;
}

/* Rubrik deskripsi: striking separator between learning objectives. */
.rd-divider {
  margin: 1.75rem 0;
  border: 0;
  border-top: 3px solid #487fff;
}
:root.dark .rd-divider {
  border-top-color: #6bb1ff;
}

/* Transkrip Nilai: on-screen document preview */
.transkrip-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.875rem;
}
.transkrip-toolbar__title {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: #374151;
}
:root.dark .transkrip-toolbar__title { color: #e5e7eb; }
.transkrip-view {
  overflow-x: auto;
}
/* Always a white "paper" previewed at true A4 size (a document stays light even
   in dark mode so the table styling remains readable). */
.transkrip-paper {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  width: 210mm;
  min-height: 297mm;
  margin-inline: auto;
  background-color: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  padding: 8mm;
  font-size: 7.5pt;
  line-height: 1.5;
}
/* The on-screen preview mirrors the printed sheet: all text black. */
.transkrip-paper,
.transkrip-paper * {
  color: #000000;
}
/* Uniform vertical rhythm: every block/row gets the same gap. */
.transkrip-paper .mt-3,
.transkrip-paper .mt-4,
.transkrip-paper .mb-1 {
  margin-top: 0;
  margin-bottom: 0;
}
.transkrip-paper > * + * {
  margin-top: 0.45rem !important;
}
.transkrip-paper .col-span-9 > * + * {
  margin-top: 0.45rem !important;
}
.transkrip-title {
  margin: 0;
  font-size: 10pt;
  font-weight: 700;
  letter-spacing: 0.06em;
}
.transkrip-qr-wrap {
  text-align: right;
}
.transkrip-qr {
  display: block;
  margin-left: auto;
  margin-right: 0;
  width: 110px;
  height: 110px;
  max-width: 100%;
  object-fit: contain;
}
/* Thin, light-grey grid lines for the transcript tables. Everything is white
   except the top header cells (`.transkrip-th`). */
.transkrip-table {
  width: 100%;
  border-collapse: collapse;
  background-color: #ffffff;
}
.transkrip-table td,
.transkrip-table th {
  border: 1px solid #d1d5db;
  color: #000000;
  padding: 3px 5px;
  line-height: 1.5;
}
.transkrip-table td.transkrip-th {
  background-color: #ebedf2;
}
/* Institution footer: school info left, boxed verification QR right, pinned to
   the bottom of the sheet. */
.transkrip-footer {
  margin-top: auto !important;
  padding-top: 0.6rem;
  border-top: 2px solid #6b7280;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.25rem;
}
.transkrip-footer__info {
  min-width: 0;
}
.transkrip-footer__school {
  margin: 0;
  font-size: 1.05em;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.transkrip-footer__addr {
  margin: 0.1rem 0 0;
  font-size: 0.92em;
}
.transkrip-footer__qr {
  flex-shrink: 0;
}
.transkrip-footer__qr img {
  display: block;
  margin-left: auto;
  width: 64px;
  height: 64px;
  object-fit: contain;
}
.transkrip-signature-space {
  margin-top: 4rem;
}

/* Report document (rapor): on-screen A4 document preview. */
.rapor-view {
  overflow-x: auto;
}
.rapor-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}
.rapor-paper {
  box-sizing: border-box;
  width: 210mm;
  min-height: 297mm;
  margin-inline: auto;
  padding: 12mm;
  background-color: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  color: #000000;
  font-size: 9pt;
  line-height: 1.4;
}
.rapor-title {
  margin: 0.5rem 0 0.75rem;
  font-size: 12pt;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.rapor-identity {
  margin: 0;
  font-size: 9pt;
}
.rapor-section-title {
  margin: 0.85rem 0 0.25rem;
  font-size: 9pt;
  font-weight: 700;
}
.rapor-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 8pt;
}
.rapor-table th,
.rapor-table td {
  border: 1px solid #000000;
  padding: 5px 8px;
  vertical-align: top;
  line-height: 1.5;
}
.rapor-table thead th {
  background-color: #ebedf2;
  text-align: center;
  font-weight: 600;
}
/* Header cells (including the second-row sub-headers) are centred both ways. */
.rapor-table thead th,
.rapor-table thead td {
  background-color: #ebedf2;
  vertical-align: middle;
  text-align: center;
}
/* Centred body cells (e.g. the score columns) are vertically centred too. */
.rapor-table td.text-center {
  vertical-align: middle;
}
.rapor-table tr {
  break-inside: avoid;
  page-break-inside: avoid;
}

/* Print: A4 page, white background and an ink-friendly (light) palette even
   when the screen is in dark mode. */
@page {
  size: A4;
  margin: 8mm;
}

@media print {
  .twin-sidebar,
  .twin-mobile-toggle,
  .twin-backdrop,
  .navbar-header,
  .d-footer,
  .d-print-none {
    display: none !important;
  }

  .dashboard-main {
    margin-inline-start: 0 !important;
    background-color: #ffffff !important;
  }

  .dashboard-main-body {
    padding: 0 !important;
    background-color: #ffffff !important;
  }

  html,
  body {
    background: #ffffff !important;
    color: #111827 !important;
  }

  .nilai-card__head {
    background-color: #ffffff !important;
    border-color: #d1d5db !important;
  }
  .nilai-card__title {
    color: #111827 !important;
  }
  .admina-table thead th {
    background-color: #f3f4f6 !important;
    color: #374151 !important;
  }
  .admina-table tbody td {
    background-color: #ffffff !important;
    color: #111827 !important;
  }
  .admina-table thead th,
  .admina-table tbody td {
    border-color: #d1d5db !important;
  }

  /* Nilai per-semester: printed as a full A4 sheet with the school letterhead
     (kop) on top and the school/QR in the footer pinned to the bottom. */
  [class*="print-semester-"] {
    display: flex;
    flex-direction: column;
    min-height: 281mm;
    border: 0 !important;
    border-radius: 0 !important;
    overflow: visible !important;
    background-color: #ffffff !important;
    font-size: 7.5pt;
    line-height: 1.5;
    color: #000000 !important;
  }
  [class*="print-semester-"] .admina-table,
  [class*="print-semester-"] .admina-table thead th,
  [class*="print-semester-"] .admina-table tbody td,
  [class*="print-semester-"] .admina-table__total td {
    font-size: inherit;
    color: #000000 !important;
  }
  [class*="print-semester-"] .admina-table thead th,
  [class*="print-semester-"] .admina-table tbody td {
    padding: 4px 6px;
  }
  [class*="print-semester-"] .nilai-card__title {
    font-size: 10pt;
  }
  [class*="print-semester-"] .nilai-card__head p {
    font-size: 7.5pt;
  }
  /* Letterhead only in print, with breathing room before the content. */
  .nilai-print-kop {
    margin-bottom: 1.25rem;
  }
  .nilai-print-footer {
    margin-top: auto;
    padding-top: 0.6rem;
    border-top: 2px solid #6b7280;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.25rem;
    color: #000000 !important;
  }
  .nilai-print-footer__school {
    margin: 0;
    font-size: 9pt;
    font-weight: 700;
  }
  .nilai-print-footer__addr {
    margin: 0.1rem 0 0;
    font-size: 8pt;
  }
  .nilai-print-footer__qr img {
    display: block;
    margin-left: auto;
    width: 64px;
    height: 64px;
    object-fit: contain;
  }
  /* Dashboard rekap: print the card as a single A4 sheet — drop the on-screen
     card padding/border and let the table span the full width. */
  .print-semester-rekap .rekap-body {
    padding: 0 !important;
  }
  .print-semester-rekap .rekap-table-wrap {
    border: 0 !important;
    border-radius: 0 !important;
    overflow: visible !important;
  }
  .print-semester-rekap .admina-table {
    min-width: 0 !important;
  }
  /* The rekap card is the A4 sheet itself (not an inner block), so drop the
     `.print-document` footer reservation and let the tail span the sheet. */
  .print-semester-rekap.print-document {
    padding-bottom: 0 !important;
  }
  /* Fit the whole rekap on a single A4 page: no top margin (it would push the
     281mm sheet onto a second page) and never split across pages. Body text is
     a touch smaller, the title bigger. */
  .print-semester-rekap {
    margin-top: 0 !important;
    break-inside: avoid;
    page-break-inside: avoid;
    font-size: 6.5pt;
  }
  .print-semester-rekap .rekap-title {
    font-size: 13pt;
    font-weight: 700;
  }
  /* Uniform font size for every block (table, signature). */
  .print-semester-rekap .text-sm,
  .print-semester-rekap .text-xs,
  .print-semester-rekap.print-document .admina-table,
  .print-semester-rekap.print-document .admina-table thead th,
  .print-semester-rekap.print-document .admina-table tbody td {
    font-size: inherit;
  }
  /* No blue totals on the printed sheet. */
  .print-semester-rekap .admina-table__pill {
    min-width: 0 !important;
    padding: 0 !important;
    background-color: transparent !important;
    color: #000000 !important;
    font-size: inherit !important;
  }
  .print-semester-rekap .admina-table__total td {
    background-color: transparent !important;
    color: #000000 !important;
  }
  /* No grand-total row on the printed sheet. */
  .print-semester-rekap .admina-table__total {
    display: none !important;
  }
  /* Taller rows: more cell padding so the table fills the sheet. */
  .print-semester-rekap.print-document .admina-table thead th,
  .print-semester-rekap.print-document .admina-table tbody td {
    padding: 8px 8px;
  }
  /* Tail block (signature + footer): fills the remaining height so the
     footer pins to the bottom of the A4 sheet. Used by the dashboard rekap. */
  .print-semester-rekap .rekap-tail {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding-bottom: 20mm;
  }
  /* Pin the school + QR footer to the bottom of every printed page, inset from
     the paper edges so the barcode is never clipped by the printer's
     non-printable area. */
  .print-semester-rekap .transkrip-footer {
    position: fixed;
    bottom: 8mm;
    left: 8mm;
    right: 8mm;
    margin-top: 0 !important;
    background-color: #ffffff !important;
    z-index: 2;
  }

  /* Mutasi peserta didik print: the kop lives in <thead> and the signature +
     footer in <tfoot>, so they repeat on every page. The table is stretched to
     the page height (a trailing spacer row absorbs the slack) so the tfoot
     pins to the bottom of the sheet. All table text is left-aligned. */
  .print-table-doc {
    display: block !important;
    min-height: 0 !important;
    padding: 0 !important;
    font-family: Inter, ui-sans-serif, system-ui, sans-serif;
    font-size: 7pt;
    line-height: 1.3;
  }
  /* No forced table height: the signature must flow after the last data row so
     it lands at the bottom of the LAST printed page (page 2, 3, …), not pinned
     to page 1. */
  .print-table-doc .print-doc-table {
    border-collapse: collapse;
  }
  .print-table-doc .admina-table th,
  .print-table-doc .admina-table td {
    text-align: left !important;
  }
  /* One uniform font family and size for the whole sheet, title included. */
  .print-table-doc .admina-table,
  .print-table-doc .admina-table thead th,
  .print-table-doc .admina-table tbody td,
  .print-table-doc .admina-table td.print-doc-title,
  .print-table-doc .print-doc-subtitle,
  .print-table-doc .print-doc-signature,
  .print-table-doc .print-doc-signature * {
    font-family: inherit !important;
    font-size: inherit !important;
  }
  .print-table-doc .print-doc-cover,
  .print-table-doc .print-doc-cover *,
  .print-table-doc .print-doc-title-cell,
  .print-table-doc .print-doc-sig-cell,
  .print-table-doc .print-doc-footer-space,
  .print-table-doc .print-doc-spacer td {
    border: 0 !important;
    padding: 0 !important;
    background-color: transparent !important;
  }
  /* The footer is fixed so it sits at the bottom of every printed page. The
     repeating tfoot row above it reserves the space so content never overlaps
     it on any page. */
  .print-table-doc .print-doc-footer-space {
    height: 22mm;
  }
  .print-table-doc .print-doc-fixed-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2;
    background-color: #ffffff;
  }
  .print-table-doc .admina-table td.print-doc-title {
    /* Bottom padding creates the gap between the title and the table. */
    padding: 6px 0 16px !important;
    font-weight: 700;
    text-align: center !important;
  }
  .print-table-doc .print-doc-subtitle {
    display: block;
    font-weight: 400;
  }
  .print-table-doc .print-doc-spacer,
  .print-table-doc .print-doc-spacer td {
    height: 100%;
  }
  /* Signature flows after the table so it lands on the last printed page. */
  .print-table-doc .print-doc-sig-row {
    break-inside: avoid;
    page-break-inside: avoid;
  }
  .print-table-doc .print-doc-sig-row td {
    padding-top: 6mm !important;
  }
  .print-table-doc .print-doc-signature {
    width: 50%;
    margin-left: auto;
  }

  /* Presensi export: full A4 sheet with the letterhead on top and the
     school/QR footer pinned to the bottom. On-screen card chrome is removed so
     the printed document reads as a single sheet. */
  .print-document .admina-page-card {
    border: 0 !important;
    border-radius: 0 !important;
    background-color: #ffffff !important;
    box-shadow: none !important;
  }
  .print-document .admina-page-card,
  .print-document .admina-page-card * {
    color: #000000 !important;
  }
  .print-document .admina-page-card > header {
    display: none !important;
  }
  .print-document .admina-page-card > div {
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow: visible !important;
  }
  .print-document .admina-table {
    font-size: 7pt;
    line-height: 1.35;
  }
  .print-document .admina-table thead th,
  .print-document .admina-table tbody td {
    padding: 2px 4px;
    color: #000000 !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
  }
  .print-document .admina-table tr {
    break-inside: avoid;
    page-break-inside: avoid;
  }
  /* Always print the desktop table, never the mobile card layout, even when
     printing from a narrow (mobile-width) window. Overrides the
     `.responsive-index-table` rules from application.css. */
  .print-document .responsive-index-table {
    display: table !important;
    width: 100% !important;
    min-width: 0 !important;
    border-collapse: collapse !important;
  }
  .print-document .responsive-index-table thead {
    display: table-header-group !important;
  }
  .print-document .responsive-index-table tbody {
    display: table-row-group !important;
  }
  .print-document .responsive-index-table tr {
    display: table-row !important;
  }
  .print-document .responsive-index-table th,
  .print-document .responsive-index-table td {
    display: table-cell !important;
    width: auto !important;
    margin: 0 !important;
    padding: 4px 6px !important;
    border: 0 !important;
    border-bottom: 1px solid #d1d5db !important;
    text-align: left !important;
    white-space: normal !important;
  }
  .print-document .responsive-index-table tbody td::before {
    display: none !important;
    content: none !important;
  }
  .print-document .dt-header,
  .print-document .dt-footer {
    display: none !important;
  }
  /* Footer pinned to the bottom of every printed A4 page. Reserve space at the
     end of the content so the signature block is not covered by it. */
  .print-document {
    padding-bottom: 24mm !important;
  }
  .print-document .nilai-print-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    margin-top: 0 !important;
    background-color: #ffffff !important;
  }
  .print-document .print-signature {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  /* Transkrip: compact enough that the whole document (including the
     signature block) fits on one A4 sheet. */
  .print-transkrip_nilai,
  .print-transkrip_nilai_v2 {
    width: 100% !important;
    font-size: 7.5pt;
    line-height: 1.5;
    background-color: #ffffff !important;
    break-inside: avoid;
    page-break-inside: avoid;
  }
  /* Every line of the transcript prints in black. */
  .print-transkrip_nilai,
  .print-transkrip_nilai *,
  .print-transkrip_nilai_v2,
  .print-transkrip_nilai_v2 * {
    color: #000000 !important;
  }
  .transkrip-title {
    font-size: 10pt !important;
    color: #000000 !important;
  }
  .print-transkrip_nilai table td,
  .print-transkrip_nilai table th,
  .print-transkrip_nilai_v2 table td,
  .print-transkrip_nilai_v2 table th {
    padding: 3px 5px;
    line-height: 1.5;
  }
  .print-transkrip_nilai .transkrip-table,
  .print-transkrip_nilai_v2 .transkrip-table {
    background-color: #ffffff !important;
  }
  .print-transkrip_nilai .transkrip-table td,
  .print-transkrip_nilai .transkrip-table th,
  .print-transkrip_nilai_v2 .transkrip-table td,
  .print-transkrip_nilai_v2 .transkrip-table th {
    border: 1px solid #d1d5db !important;
    color: #000000 !important;
    background-color: #ffffff !important;
  }
  .print-transkrip_nilai .transkrip-table td.transkrip-th,
  .print-transkrip_nilai_v2 .transkrip-table td.transkrip-th {
    background-color: #ebedf2 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .print-transkrip_nilai img,
  .print-transkrip_nilai_v2 img {
    max-width: 100%;
  }
  .transkrip-paper {
    box-sizing: border-box !important;
    width: auto !important;
    min-height: 281mm !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    background-color: #ffffff !important;
    color: #111827 !important;
  }
  .transkrip-qr {
    width: 110px !important;
    height: 110px !important;
  }

  /* Report document (rapor): print straight onto the A4 sheet. */
  .rapor-view {
    overflow: visible !important;
  }
  .rapor-view .admina-page-card {
    border: 0 !important;
    border-radius: 0 !important;
    background-color: #ffffff !important;
  }
  .rapor-view .admina-page-card > header {
    display: none !important;
  }
  .rapor-view .admina-page-card > div {
    padding: 0 !important;
    overflow: visible !important;
  }
  .rapor-paper {
    width: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 0 22mm 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
  .rapor-paper,
  .rapor-paper * {
    color: #000000 !important;
  }
  .rapor-table thead th,
  .rapor-table thead td {
    background-color: #ebedf2 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* Rapor print footer: pinned to the bottom of every A4 page. */
  .rapor-print-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex !important;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 0 !important;
    padding-top: 4px;
    border-top: 2px solid #6b7280;
    background-color: #ffffff !important;
    color: #000000 !important;
  }
  .rapor-print-footer__school {
    margin: 0;
    font-size: 9pt;
    font-weight: 700;
  }
  .rapor-print-footer__addr {
    margin: 0.1rem 0 0;
    font-size: 8pt;
  }
  .rapor-print-footer__qr img {
    display: block;
    margin-left: auto;
    width: 64px;
    height: 64px;
    object-fit: contain;
  }

  /* Print areas must stay on a white sheet even in dark mode. */
  .print-biodata,
  .print-transkrip_nilai,
  .print-transkrip_nilai_v2,
  [class*="print-semester-"] {
    background-color: #ffffff !important;
    color: #111827 !important;
  }
}

/* =====================================================================
   Permanent component CSS — class names kept from the Bootstrap/CORK era
   because they are part of the app's own API, not just a compat shim:

   - .badge / .badge-*      returned by the presensi_badge_color,
                            presensi_percentage_badge_color, kbm_badge_color,
                            pkl_badge_color, random_badge_color helpers
                            (host app) + election_status_class /
                            candidate_status_class (engines/election),
                            used across ~15 row/detail partials.
   - .nav-tabs / .nav-link  the markup the `tabs` Stimulus controller drives
     / .tab-content         (peserta_didiks show/_form, buku_induks/show,
                            modul_ajars/_silabus_element_fields,
                            learning_scores/teacher_view_detail).
   - .accordion-*           the markup the `collapse` Stimulus controller
                            drives (engines/lms/mapel_question_sets/*).

   These stay after admina_compat.css is eventually deleted.
   ===================================================================== */

/* ---- badges ---- */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.5rem;
  border-radius: 0.375rem;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}
.badge.badge-success       { background-color: #dcfce7; color: #15803d; }
.badge.badge-danger        { background-color: #fee2e2; color: #b91c1c; }
.badge.badge-warning       { background-color: #fff9e2; color: #b45309; }
.badge.badge-info          { background-color: #dbeafe; color: #1d4ed8; }
.badge.badge-primary       { background-color: #dbe6ff; color: #1d4ed8; }
.badge.badge-secondary     { background-color: #f3f4f6; color: #374151; }
.badge.badge-dark          { background-color: #1f2937; color: #fff; }
.badge.badge-light         { background-color: #f3f4f6; color: #374151; }
.badge.badge-light-info    { background-color: #dbeafe; color: #1d4ed8; }
.badge.badge-light-success { background-color: #dcfce7; color: #15803d; }
.badge.badge-light-dark    { background-color: #f3f4f6; color: #374151; }
.badge.rounded-full        { border-radius: 999px; padding: 0.25rem 0.75rem; }

/* CORK "badge group" + dot (dashboard/teacher, presence_charts legends) */
.badge--group { display: inline-flex; align-items: center; gap: 0.375rem; }
.badge-dot {
  width: 0.5rem;
  height: 0.5rem;
  padding: 0;
  border-radius: 999px;
}
.badge-dot.badge-success { background-color: #16a34a; }
.badge-dot.badge-danger  { background-color: #dc2626; }
.badge-dot.badge-warning { background-color: #d97706; }
.badge-dot.badge-info    { background-color: #2563eb; }
.badge-dot.badge-primary { background-color: #2563eb; }
.badge-dot.badge-secondary { background-color: #6b7280; }
.badge-dot.badge-dark    { background-color: #374151; }

:root.dark .badge.badge-secondary,
:root.dark .badge.badge-light,
:root.dark .badge.badge-light-dark { background-color: #374151; color: #e5e7eb; }
:root.dark .badge.badge-success,
:root.dark .badge.badge-light-success { background-color: rgba(22, 163, 74, 0.18); color: #86efac; }
:root.dark .badge.badge-danger        { background-color: rgba(220, 38, 38, 0.18); color: #fca5a5; }
:root.dark .badge.badge-warning       { background-color: rgba(217, 119, 6, 0.18); color: #fcd34d; }
:root.dark .badge.badge-info,
:root.dark .badge.badge-light-info    { background-color: rgba(37, 99, 235, 0.2); color: #93c5fd; }
:root.dark .badge.badge-primary       { background-color: rgba(37, 99, 235, 0.2); color: #93c5fd; }
:root.dark .badge.badge-dark          { background-color: #e5e7eb; color: #1f2937; }

/* stack the KBM + teacher-presence badges */
.status-stack {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
}

/* Two stacked lines inside a table cell: strong value over muted context */
.cell-stack {
  display: flex;
  flex-direction: column;
  line-height: 1.35;
}
.cell-primary {
  color: #111827;
  font-weight: 600;
}
.cell-secondary {
  color: #6b7280;
  font-size: 0.8125rem;
}
:root.dark .cell-primary { color: #ffffff; }
:root.dark .cell-secondary { color: #9ca3af; }

/* Student-care list: show the student count as a clickable pill that reveals
   the full list in a modal. */
.care-students__count {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.625rem;
  border-radius: 999px;
  background-color: #e4f1ff;
  color: #2563eb;
  font-size: 0.8125rem;
  font-weight: 600;
  white-space: nowrap;
}
.care-students__count:hover {
  background-color: #d3e5ff;
  color: #1d4ed8;
}
:root.dark .care-students__count {
  background-color: rgba(72, 127, 255, 0.2);
  color: #95c7ff;
}

/* Student-care list: free-text columns wrap so the table never scrolls
   sideways; the compact columns stay on one line. */
.admina-table.admina-table--txn.student-cares-table tbody td {
  white-space: normal;
  overflow-wrap: anywhere;
}
.admina-table.admina-table--txn.student-cares-table tbody td:nth-child(1),
.admina-table.admina-table--txn.student-cares-table tbody td:nth-child(2),
.admina-table.admina-table--txn.student-cares-table tbody td:nth-child(3),
.admina-table.admina-table--txn.student-cares-table tbody td:nth-child(6),
.admina-table.admina-table--txn.student-cares-table tbody td:nth-child(7) {
  width: 1%;
  white-space: nowrap;
}

/* Fouls list: name / violation columns wrap; compact columns stay on one line. */
.admina-table.admina-table--txn.fouls-table thead th,
.admina-table.admina-table--txn.fouls-table tbody td {
  white-space: normal;
  overflow-wrap: anywhere;
}
.admina-table.admina-table--txn.fouls-table tbody td:nth-child(5),
.admina-table.admina-table--txn.fouls-table tbody td:nth-child(6) {
  width: 1%;
  white-space: nowrap;
}
/* Keep the No and Poin columns (header + cells) centred and give them room. */
.admina-table.admina-table--txn.fouls-table thead th:nth-child(1),
.admina-table.admina-table--txn.fouls-table tbody td:nth-child(1) {
  width: 4.5rem;
  min-width: 4.5rem;
  text-align: center;
  white-space: nowrap;
}
.admina-table.admina-table--txn.fouls-table thead th:nth-child(4),
.admina-table.admina-table--txn.fouls-table tbody td:nth-child(4) {
  width: 6rem;
  min-width: 6rem;
  text-align: center;
  white-space: nowrap;
}

/* Foul-points recap: the class cell is a full link and the points column
   shows a compact severity meter. */
.foul-points-class-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
  color: #111827;
}
.foul-points-class-link__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  flex-shrink: 0;
  border-radius: 0.75rem;
  background-color: #eff4ff;
  color: #487fff;
  font-size: 1.1rem;
}
.foul-points-class-link__name {
  display: block;
  font-weight: 600;
  line-height: 1.3;
}
.foul-points-class-link__hint {
  display: block;
  margin-top: 0.1rem;
  color: #9ca3af;
  font-size: 0.75rem;
  line-height: 1.2;
}
.foul-points-class-link:hover .foul-points-class-link__name {
  color: #487fff;
  text-decoration: underline;
}
.foul-points-class-link:hover .foul-points-class-link__icon {
  background-color: #dbe6ff;
}
.foul-points-meter {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  min-width: 5rem;
  width: 100%;
}
.foul-points-meter__value {
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1;
}
.foul-points-meter__track {
  width: 100%;
  height: 0.3rem;
  border-radius: 999px;
  background-color: #eef1f6;
  overflow: hidden;
}
.foul-points-meter__bar {
  height: 100%;
  border-radius: 999px;
}
.foul-points-meter__label {
  color: #6b7280;
  font-size: 0.6875rem;
  line-height: 1.1;
}

/* Foul-point student recap: three academic years × Ganjil/Genap. The headers
   wrap onto two lines and the gutters are tightened so the ten columns fit
   without a horizontal scrollbar. */
.admina-table.foul-students-table thead th {
  white-space: normal;
  line-height: 1.2;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.admina-table.foul-students-table tbody td {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.admina-table.foul-students-table tbody td.foul-student-cell {
  white-space: normal;
}

@media (min-width: 768px) {
  .admina-table.foul-students-table {
    table-layout: fixed;
  }
  .admina-table.foul-students-table thead th,
  .admina-table.foul-students-table tbody td {
    white-space: normal;
    overflow-wrap: anywhere;
    padding-left: 0.4rem;
    padding-right: 0.4rem;
  }
  .admina-table.foul-students-table thead th:nth-child(1) { width: 4%; }
  .admina-table.foul-students-table thead th:nth-child(2) { width: 24%; }
  .admina-table.foul-students-table thead th:nth-child(9) { width: 8%; }
  .admina-table.foul-students-table thead th:nth-child(10) { width: 6%; }
}

@media print {
  /* Foul-point student recap: print only the dedicated sheet inside the card. */
  .foul-students-card { border: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
  .foul-students-card > header { display: none !important; }
  .foul-students-card > div { padding: 0 !important; overflow: visible !important; }
  .foul-students-page .kbm-stat-grid { display: none !important; }
}

/* Extracurricular list: name / schedule columns wrap; compact columns inline. */
.admina-table.admina-table--txn.ekstrakurikuler-table thead th,
.admina-table.admina-table--txn.ekstrakurikuler-table tbody td {
  white-space: normal;
  overflow-wrap: anywhere;
}
.admina-table.admina-table--txn.ekstrakurikuler-table tbody td:nth-child(1),
.admina-table.admina-table--txn.ekstrakurikuler-table tbody td:nth-child(3),
.admina-table.admina-table--txn.ekstrakurikuler-table tbody td:nth-child(5) {
  width: 1%;
  white-space: nowrap;
}

/* PTK picket (teacher) KBM matrix: same text sizing as the other Admina
   DataTables, but still compact enough to fit without horizontal scroll. */
.admina-table.admina-table--txn.ptk-picket-table {
  width: 100%;
  table-layout: fixed;
}
.admina-table.admina-table--txn.ptk-picket-table thead th,
.admina-table.admina-table--txn.ptk-picket-table tbody td {
  padding: 0.35rem 0.4rem !important;
  white-space: normal !important;
  overflow-wrap: anywhere;
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid #e5e7eb;
}
.admina-table.admina-table--txn.ptk-picket-table thead th {
  background-color: #f9fafb !important;
}
.admina-table.admina-table--txn.ptk-picket-table thead th:first-child,
.admina-table.admina-table--txn.ptk-picket-table tbody td:first-child {
  width: 18%;
  text-align: left !important;
}
:root.dark .admina-table.admina-table--txn.ptk-picket-table thead th,
:root.dark .admina-table.admina-table--txn.ptk-picket-table tbody td {
  border-color: #323d4e;
}
:root.dark .admina-table.admina-table--txn.ptk-picket-table thead th {
  background-color: #1f2937 !important;
}

/* PTK picket (teacher) KBM status legend — a compact bar of coloured chips. */
.ptk-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.875rem;
  margin-bottom: 1rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid #ebecef;
  border-radius: 0.75rem;
  background-color: #f8f9fc;
}
.ptk-legend__title {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin-right: 0.25rem;
  color: #6b7280;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1;
  text-transform: uppercase;
}
.ptk-legend__title i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  line-height: 1;
}
.ptk-legend__item {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  color: #4b5563;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.2;
}
.ptk-legend__item .badge-dot {
  width: 0.5rem;
  height: 0.5rem;
}
:root.dark .ptk-legend {
  border-color: #323d4e;
  background-color: #1f2937;
}
:root.dark .ptk-legend__title {
  color: #9ca3af;
}
:root.dark .ptk-legend__item {
  color: #d1d5db;
}

/* Modul ajar show: grouped list cards (tujuan, materi, detail). */
.learning-score-group--detail { --level-color: #6b7280; }
.learning-score-item--stack { align-items: flex-start; }
.learning-score-item--stack .learning-score-item__icon { margin-top: 0.0625rem; }
.learning-score-item__body {
  flex: 1 1 auto;
  min-width: 0;
}
.learning-score-item__title {
  display: block;
  margin: 0;
  color: #111827;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
a.learning-score-item__title:hover { color: #487fff; text-decoration: underline; }
.learning-score-item__sub {
  margin: 0.125rem 0 0;
  color: #6b7280;
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.learning-score-item__title p,
.learning-score-item__sub p {
  margin-bottom: 0;
}
.learning-score-item__title p:last-child,
.learning-score-item__sub p:last-child {
  margin-bottom: 0;
}
.learning-score-item__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.75rem;
  margin-top: 0.375rem;
  color: #9ca3af;
  font-size: 0.75rem;
  line-height: 1.4;
}
:root.dark .learning-score-item__title { color: #f3f4f6; }
:root.dark a.learning-score-item__title:hover { color: #95c7ff; }
:root.dark .learning-score-item__sub { color: #9ca3af; }
:root.dark .learning-score-item__meta { color: #9ca3af; }

/* Count badge on the modul ajar tahap tabs. */
.learning-score-tabs .modul-ajar-tab__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.375rem;
  border-radius: 9999px;
  background-color: #e5e7eb;
  color: #6b7280;
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1;
}
.learning-score-tabs .nav-link.active .modul-ajar-tab__count {
  background-color: rgba(255, 255, 255, 0.24);
  color: #fff;
}
:root.dark .learning-score-tabs .modul-ajar-tab__count { background-color: #374151; color: #9ca3af; }
:root.dark .learning-score-tabs .nav-link.active .modul-ajar-tab__count {
  background-color: rgba(255, 255, 255, 0.24);
  color: #fff;
}

/* Modul ajar form: section cards, nested element/goal/materi, sticky actions. */
.modul-ajar-form { font-size: 0.875rem; }
/* Keep every input, select and TomSelect control on the same height so
   rows (and the remove button) line up. */
.modul-ajar-form .form-control,
.modul-ajar-form .form-select,
.modul-ajar-form .ts-wrapper,
.modul-ajar-form .ts-wrapper .ts-control {
  min-height: 2.75rem;
  border-radius: 0.5rem;
}
.modul-ajar-form .form-control:not(textarea),
.modul-ajar-form .form-select {
  height: 2.75rem;
  padding-top: 0;
  padding-bottom: 0;
}
.modul-ajar-form .ts-wrapper .ts-control {
  display: flex;
  align-items: center;
  padding-top: 0;
  padding-bottom: 0;
}
.modul-ajar-materi__item .form-group { margin-bottom: 0; }
.modul-ajar-materi__remove {
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
}
.modul-ajar-form__section {
  border: 1px solid #e5e7eb;
  border-radius: 0.75rem;
  background-color: #fff;
}
.modul-ajar-form__section + .modul-ajar-form__section { margin-top: 1rem; }
.modul-ajar-form__section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
  border-bottom: 1px solid #e5e7eb;
}
.modul-ajar-form__section-title {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}
.modul-ajar-form__section-icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.625rem;
  background-color: #eff4ff;
  color: #487fff;
  font-size: 1.125rem;
}
.modul-ajar-form__section-title h4 {
  margin: 0;
  color: #111827;
  font-size: 0.9375rem;
  font-weight: 600;
}
.modul-ajar-form__section-title p {
  margin: 0.125rem 0 0;
  color: #6b7280;
  font-size: 0.8125rem;
  line-height: 1.4;
}
.modul-ajar-form__section-body { padding: 1rem; }

.modul-ajar-element__card {
  border: 1px solid #e5e7eb;
  border-radius: 0.75rem;
  background-color: #fbfcff;
}
.modul-ajar-element__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid #eef1f6;
}
.modul-ajar-element__title {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  min-width: 0;
}
.modul-ajar-element__icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 0.5rem;
  background-color: #e8efff;
  color: #487fff;
  font-size: 0.9375rem;
}
.modul-ajar-element__title h4 {
  margin: 0;
  color: #111827;
  font-size: 0.875rem;
  font-weight: 600;
}
.modul-ajar-element__title p {
  margin: 0.0625rem 0 0;
  color: #6b7280;
  font-size: 0.75rem;
  line-height: 1.4;
}
.modul-ajar-element__body { padding: 1rem; }

.modul-ajar-goal { --goal-color: #487fff; }
.modul-ajar-goal__card {
  border: 1px solid #e5e7eb;
  border-left: 3px solid var(--goal-color);
  border-radius: 0.625rem;
  background-color: #fff;
}
.modul-ajar-goal--mengaplikasi { --goal-color: #0ea5e9; }
.modul-ajar-goal--merefleksi { --goal-color: #8b5cf6; }
.modul-ajar-goal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid #f1f3f7;
  border-radius: 0.625rem 0.625rem 0 0;
  background-color: #f9fafb;
}
.modul-ajar-goal__title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--goal-color);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.modul-ajar-goal__dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 9999px;
  background-color: var(--goal-color);
}
.modul-ajar-goal__body { padding: 0.875rem; }

.modul-ajar-materi {
  margin-top: 0.75rem;
  padding: 0.75rem;
  border: 1px dashed #d1d5db;
  border-radius: 0.625rem;
  background-color: #f9fafb;
}
.modul-ajar-materi__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}
.modul-ajar-materi__title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #374151;
  font-size: 0.8125rem;
  font-weight: 600;
}
.modul-ajar-materi__title i { color: #6b7280; }
.modul-ajar-materi__hint {
  color: #9ca3af;
  font-size: 0.75rem;
}
.modul-ajar-materi__item {
  padding: 0.625rem;
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  background-color: #fff;
}

.modul-ajar-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  padding: 1.5rem 1rem;
  border: 1px dashed #d1d5db;
  border-radius: 0.625rem;
  text-align: center;
  color: #9ca3af;
}
.modul-ajar-empty > i { font-size: 1.5rem; }
.modul-ajar-empty p {
  margin: 0;
  color: #6b7280;
  font-size: 0.875rem;
  font-weight: 600;
}
.modul-ajar-empty span { font-size: 0.8125rem; }
.modul-ajar-empty--compact { padding: 1rem 0.75rem; margin-bottom: 0.75rem; }
.modul-ajar-empty--compact > i { font-size: 1.25rem; }
.modul-ajar-empty[hidden] { display: none; }

.modul-ajar-form__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 1rem;
  padding: 0.875rem 0 0.25rem;
  border-top: 1px solid #e5e7eb;
  background-color: #fff;
}
.modul-ajar-form__actions-note {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  color: #6b7280;
  font-size: 0.8125rem;
}

:root.dark .modul-ajar-form__section { border-color: #3f4b5b; background-color: #273142; }
:root.dark .modul-ajar-form__section-head { border-bottom-color: #3f4b5b; }
:root.dark .modul-ajar-form__section-title h4 { color: #f3f4f6; }
:root.dark .modul-ajar-form__section-title p { color: #9ca3af; }
:root.dark .modul-ajar-form__section-icon { background-color: rgba(72, 127, 255, 0.16); }
:root.dark .modul-ajar-element__card { border-color: #3f4b5b; background-color: #1f2937; }
:root.dark .modul-ajar-element__head { border-bottom-color: #3f4b5b; }
:root.dark .modul-ajar-element__title h4 { color: #f3f4f6; }
:root.dark .modul-ajar-element__title p { color: #9ca3af; }
:root.dark .modul-ajar-element__icon { background-color: rgba(72, 127, 255, 0.16); }
:root.dark .modul-ajar-goal__card { border-color: #3f4b5b; background-color: #273142; }
:root.dark .modul-ajar-goal__head { border-bottom-color: #3f4b5b; background-color: #1f2937; }
:root.dark .modul-ajar-materi { border-color: #4b5563; background-color: #1f2937; }
:root.dark .modul-ajar-materi__title { color: #d1d5db; }
:root.dark .modul-ajar-materi__item { border-color: #3f4b5b; background-color: #273142; }
:root.dark .modul-ajar-empty { border-color: #4b5563; }
:root.dark .modul-ajar-empty p { color: #d1d5db; }
:root.dark .modul-ajar-form__actions { border-top-color: #3f4b5b; background-color: #273142; }
:root.dark .modul-ajar-form__actions-note { color: #9ca3af; }

/* Ramadhan recap summary: 5 stat cards in one row on desktop/print. */
.ramadhan-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
@media (min-width: 768px) {
  .ramadhan-summary {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}
@media print {
  .ramadhan-summary {
    display: none !important;
  }
}

/* BMI list: "not yet filled / total" progress per class. */
.bmi-progress {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 8rem;
}
.bmi-progress__track {
  flex: 1;
  height: 0.5rem;
  border-radius: 999px;
  background-color: #e5e7eb;
  overflow: hidden;
}
.bmi-progress__bar {
  height: 100%;
  border-radius: 999px;
  background-color: #487fff;
}
.bmi-progress__label {
  flex: none;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #374151;
}
:root.dark .bmi-progress__track { background-color: #374151; }
:root.dark .bmi-progress__label { color: #e5e7eb; }

/* Row action buttons: a single row of buttons */
.action-btns {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

/* Joined action button group: solid white, small, icon + label */
.btn-group {
  display: inline-flex;
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  overflow: hidden;
  background-color: #ffffff;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}
.btn-group > .btn {
  border-radius: 0;
  background-color: #ffffff;
  color: #374151;
}
.btn-group > .btn + .btn {
  border-left: 1px solid #e5e7eb;
}
.btn-group > .btn:hover {
  background-color: #f5f8ff;
  color: #487fff;
}
:root.dark .btn-group {
  border-color: #3f4b5b;
  background-color: #1f2937;
  box-shadow: none;
}
:root.dark .btn-group > .btn {
  background-color: #1f2937;
  color: #e5e7eb;
}
:root.dark .btn-group > .btn + .btn {
  border-left-color: #3f4b5b;
}
:root.dark .btn-group > .btn:hover {
  background-color: rgba(72, 127, 255, 0.15);
  color: #95c7ff;
}

/* Icon-only action button (used inside .btn-group) */
.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  font-size: 1.05rem;
}
.btn-icon > i {
  line-height: 1;
}

/* Elements carrying `data-tooltip` show their label as a lightweight CSS
   tooltip (no JS needed). The joined action group must not clip it, so overflow
   is released and the outer buttons keep the group's rounded corners instead. */
.btn-group {
  overflow: visible;
}
.btn-group > .btn:first-child {
  border-top-left-radius: 0.5rem;
  border-bottom-left-radius: 0.5rem;
}
.btn-group > .btn:last-child {
  border-top-right-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
}

[data-tooltip] {
  position: relative;
}

[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 0.375rem);
  left: 50%;
  z-index: 50;
  transform: translateX(-50%);
  padding: 0.25rem 0.5rem;
  border-radius: 0.375rem;
  background-color: #1f2937;
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.15s ease-in-out;
}

[data-tooltip]:hover::after,
[data-tooltip]:focus-visible::after {
  opacity: 1;
  visibility: visible;
}

:root.dark [data-tooltip]::after {
  background-color: #f3f4f6;
  color: #111827;
}

/* ---------------------------------------------------------------------
   KBM info stat widgets (mirrors the Admina "Sessions Overview" strip)
   --------------------------------------------------------------------- */
.kbm-stat-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1px;
  margin-bottom: 1.5rem;
  overflow: hidden;
  border: 1px solid #ebecef;
  border-radius: 0.75rem;
  background-color: #ebecef;
}
@media (min-width: 640px) {
  .kbm-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .kbm-stat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.kbm-stat {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1.25rem;
  background-color: #f9fafb;
}
.kbm-stat > div { min-width: 0; }
.kbm-stat__icon {
  display: inline-flex;
  width: 2.75rem;
  height: 2.75rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-size: 1.25rem;
  background-color: #ffffff;
}
.kbm-stat__icon--primary { color: #487fff; }
.kbm-stat__icon--success { color: #16a34a; }
.kbm-stat__icon--warning { color: #d97706; }
.kbm-stat__icon--info    { color: #2563eb; }
.kbm-stat__label {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 400;
  color: #6b7280;
}
.kbm-stat__value {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.35;
  overflow-wrap: anywhere;
  color: #111827;
}
.kbm-stat__value--normal { font-weight: 400; }
.kbm-stat__sub {
  margin: 0.125rem 0 0;
  font-size: 0.6875rem;
  line-height: 1.2;
  color: #9ca3af;
}
:root.dark .kbm-stat__sub { color: #6b7280; }
.kbm-stat__progress {
  margin-top: 0.375rem;
  height: 0.35rem;
  border-radius: 999px;
  background-color: #e5e7eb;
  overflow: hidden;
}
.kbm-stat__progress-bar {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #487fff, #22d3ee);
}
:root.dark .kbm-stat__progress { background-color: #374151; }
.kbm-stat__icon--danger { color: #dc2626; }
/* The six-card absence recap stays 3-up on mobile (and wider), then 6-up on
   large screens. Declared before the >=1024px block so the 6-column rule wins
   there. */
.kbm-stat-grid--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* Tighter spacing so the 3-up cards stay readable on small phones. */
@media (max-width: 639px) {
  .kbm-stat-grid--6 .kbm-stat { padding: 0.75rem; gap: 0.5rem; }
  .kbm-stat-grid--6 .kbm-stat__icon { width: 2.25rem; height: 2.25rem; font-size: 1rem; }
  .kbm-stat-grid--6 .kbm-stat__label { font-size: 0.6875rem; }
  .kbm-stat-grid--6 .kbm-stat__value { font-size: 1.125rem; }
}
@media (min-width: 1024px) {
  .kbm-stat-grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .kbm-stat-grid--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .kbm-stat-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* The recap cards are buttons so they can open the per-status popup; strip the
   native button chrome so they keep the .kbm-stat look. */
button.kbm-stat {
  border: 0;
  font: inherit;
}

/* 5-column dashboard info grid */
.stat-grid-5 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
@media (min-width: 640px) {
  .stat-grid-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .stat-grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* Teacher dashboard: 5 metric cards — 2 columns on mobile, 5 in a single row on desktop. */
.teacher-stat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}
@media (min-width: 768px) {
  .teacher-stat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .teacher-stat-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (min-width: 1280px) {
  .teacher-stat-grid { gap: 1.25rem; }
}

/* Teacher dashboard — homeroom (wali kelas) attendance card. Replaces the
   "Mata Pelajaran" card and sits first: a compact metric row (students below
   95%, linking to the class recap) and, below it, the day's alpa/sakit/ijin
   students (linking to today's absence page). */
.teacher-alert-card {
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-color: #e5e7eb;
  background-color: #ffffff;
}
:root.dark .teacher-alert-card {
  border-color: #4b5563;
  background-color: #1f2937;
}
.teacher-alert-card--warning {
  border-color: #fecaca;
  background-image: linear-gradient(135deg, #ffffff 0%, #fff5f5 100%);
}
:root.dark .teacher-alert-card--warning {
  border-color: #7f1d1d;
  background-image: linear-gradient(135deg, #1f2937 0%, rgba(127, 29, 29, 0.28) 100%);
}
/* Live-stream style warning indicator: a solid dot with an expanding ring. */
.teacher-alert-card__dot {
  position: relative;
  display: inline-block;
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 999px;
  background-color: #ef4444;
  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.2);
}
.teacher-alert-card__dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-color: #ef4444;
  animation: teacher-alert-live 1.6s ease-out infinite;
}
@keyframes teacher-alert-live {
  0% { opacity: 0.65; transform: scale(1); }
  70%, 100% { opacity: 0; transform: scale(2.8); }
}
@media (prefers-reduced-motion: reduce) {
  .teacher-alert-card__dot::after { animation: none; opacity: 0; }
}

.teacher-alert-card__summary,
.teacher-alert-card__students-link {
  display: block;
  color: inherit;
  text-decoration: none;
}
.teacher-alert-card__summary:hover,
.teacher-alert-card__students-link:hover {
  color: inherit;
  text-decoration: none;
}

.teacher-alert-card__head {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.625rem;
}

.teacher-alert-card__icon {
  display: inline-flex;
  width: 2.5rem;
  height: 2.5rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 0.75rem;
  font-size: 1.25rem;
}
.teacher-alert-card__icon--warning { background-color: transparent; color: #dc2626; }
.teacher-alert-card__icon--safe { background-color: #dcfce7; color: #15803d; }
:root.dark .teacher-alert-card__icon--warning { background-color: transparent; color: #f87171; }
:root.dark .teacher-alert-card__icon--safe { background-color: rgba(22, 163, 74, 0.2); color: #86efac; }

.teacher-alert-card__metric {
  display: flex;
  align-items: baseline;
  gap: 0.375rem;
  min-width: 0;
}
.teacher-alert-card__value {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
}
.teacher-alert-card__value--warning { color: #dc2626; }
.teacher-alert-card__value--safe { color: #15803d; }
.teacher-alert-card__label {
  overflow: hidden;
  font-size: 0.75rem;
  font-weight: 500;
  color: #6b7280;
  text-overflow: ellipsis;
  white-space: nowrap;
}
:root.dark .teacher-alert-card__label { color: #9ca3af; }
.teacher-alert-card__arrow {
  margin-left: auto;
  font-size: 0.875rem;
  color: #d1d5db;
  transition: color 0.15s ease, transform 0.15s ease;
}
.teacher-alert-card__summary:hover .teacher-alert-card__arrow {
  color: #dc2626;
  transform: translate(1px, -1px);
}

.teacher-alert-card__absences {
  margin-top: 0.625rem;
  padding-top: 0.5rem;
  border-top: 1px solid #eef1f6;
}
:root.dark .teacher-alert-card__absences { border-top-color: #374151; }

.teacher-alert-card__students {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.teacher-alert-card__item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  line-height: 1.25;
}

.teacher-alert-card__name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font-size: 0.75rem;
  font-weight: 500;
  color: #4b5563;
  text-overflow: ellipsis;
  white-space: nowrap;
}
:root.dark .teacher-alert-card__name { color: #e5e7eb; }

.teacher-alert-card__statuses {
  display: inline-flex;
  flex-shrink: 0;
  gap: 0.25rem;
}

.teacher-alert-card__status {
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.teacher-alert-card__status--alpa { color: #b91c1c; }
.teacher-alert-card__status--sakit { color: #b45309; }
.teacher-alert-card__status--ijin { color: #1d4ed8; }
:root.dark .teacher-alert-card__status--alpa { color: #fca5a5; }
:root.dark .teacher-alert-card__status--sakit { color: #fcd34d; }
:root.dark .teacher-alert-card__status--ijin { color: #93c5fd; }

.teacher-alert-card__more,
.teacher-alert-card__empty {
  margin: 0.375rem 0 0;
  font-size: 0.6875rem;
  color: #6b7280;
}
:root.dark .teacher-alert-card__more,
:root.dark .teacher-alert-card__empty { color: #9ca3af; }

/* Teacher dashboard — "Jadwal Mengajar Hari Ini".
   A single card: header, a randomly-picked motivation strip and the list of
   teaching sessions (`.tday-item`). Each session reads as a compact timeline
   row — a time column, the subject/class details, a status pill and the primary
   action — and collapses into a stacked card with a full-width action on mobile.
   Colours mirror the KBM status tones (danger = belum mulai, info = berlangsung,
   success = selesai). */
.tday-card {
  overflow: hidden;
  border: 1px solid #e5e8ef;
  border-radius: 1rem;
  background-color: #ffffff;
}
.tday-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid #eef1f6;
}
.tday-card__head-main {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}
.tday-card__head-icon {
  display: inline-flex;
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  align-items: center;
  justify-content: center;
  border-radius: 0.625rem;
  background-color: #ecfdf5;
  color: #047857;
  font-size: 1.125rem;
}
.tday-card__title {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: #111827;
}
.tday-card__date {
  margin: 0;
  font-size: 0.8125rem;
  color: #6b7280;
}
.tday-card__count {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  background-color: #f1f5f9;
  color: #475569;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}
.tday-card__count i { font-size: 0.875rem; }

/* Random "semangat mengajar" strip */
.tday-motivation {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.875rem 1.25rem;
  border-bottom: 1px solid #eef1f6;
  background: linear-gradient(90deg, #eef2ff 0%, #f5f3ff 55%, #fdf2f8 100%);
}
.tday-motivation__icon {
  display: inline-flex;
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background-color: rgba(99, 102, 241, 0.14);
  color: #4f46e5;
  font-size: 1rem;
}
.tday-motivation__body { min-width: 0; }
.tday-motivation__text {
  margin: 0;
  font-size: 0.875rem;
  font-style: italic;
  font-weight: 500;
  line-height: 1.5;
  color: #4338ca;
}
.tday-motivation__author {
  display: block;
  margin-top: 0.125rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: #7c3aed;
}

.tday-card__body { padding: 1rem 1.25rem; }

.tday-list {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}
.tday-item {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr) auto auto;
  grid-template-areas: "time body status action";
  align-items: center;
  gap: 0.875rem;
  padding: 0.75rem 0.875rem;
  border: 1px solid #eef1f6;
  border-left: 3px solid #eef1f6;
  border-radius: 0.75rem;
  background-color: #ffffff;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.tday-item:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px -18px rgba(15, 23, 42, 0.55);
}
.tday-item--danger  { border-left-color: #dc2626; }
.tday-item--info    { border-left-color: #2563eb; }
.tday-item--success { border-left-color: #16a34a; }

.tday-item__time {
  grid-area: time;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.2;
}
.tday-item__time-start {
  font-size: 0.9375rem;
  font-weight: 700;
  color: #111827;
}
.tday-item__time-sep {
  width: 0.75rem;
  height: 1px;
  margin: 0.1875rem 0;
  background-color: #d1d5db;
}
.tday-item__time-end {
  font-size: 0.75rem;
  font-weight: 500;
  color: #9ca3af;
}

.tday-item__body { grid-area: body; min-width: 0; }
.tday-item__subject {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.35;
  color: #111827;
}
.tday-item__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.75rem;
  margin-top: 0.1875rem;
}
.tday-item__meta-item {
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
  font-size: 0.8125rem;
  color: #6b7280;
}
.tday-item__meta-item i {
  font-size: 0.875rem;
  color: #9ca3af;
}

.tday-item__status { grid-area: status; }
.tday-item__pill {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.625rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}
.tday-item__pill--danger  { border-color: #fecaca; background-color: #fef2f2; color: #b91c1c; }
.tday-item__pill--info    { border-color: #bfdbfe; background-color: #eff6ff; color: #1d4ed8; }
.tday-item__pill--success { border-color: #bbf7d0; background-color: #f0fdf4; color: #15803d; }
.tday-item__pill-dot {
  width: 0.4375rem;
  height: 0.4375rem;
  border-radius: 999px;
  background-color: currentColor;
}

.tday-item__action { grid-area: action; }
.tday-item__action .btn { justify-content: center; }
.tday-item__action .btn i { font-size: 0.9375rem; }
.tday-item__done {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  color: #15803d;
  font-size: 0.8125rem;
  font-weight: 600;
}
.tday-item__done i { font-size: 1rem; }

/* Empty state */
.tday-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 2.5rem 1rem;
  text-align: center;
}
.tday-empty__icon {
  display: inline-flex;
  width: 3.5rem;
  height: 3.5rem;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background-color: #f1f5f9;
  color: #94a3b8;
  font-size: 1.5rem;
}
.tday-empty__title {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: #475569;
}
.tday-empty__text {
  margin: 0;
  font-size: 0.8125rem;
  color: #94a3b8;
}

/* Incomplete-document alert shown inside the same card */
.tday-alert {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  margin-bottom: 0.75rem;
  padding: 0.75rem 1rem;
  border-radius: 0.75rem;
}
.tday-alert--warning {
  border: 1px solid #fde68a;
  background-color: #fffbeb;
}
.tday-alert__icon {
  color: #d97706;
  font-size: 1.125rem;
  line-height: 1.4;
}
.tday-alert__title {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: #111827;
}
.tday-alert__text {
  margin: 0;
  font-size: 0.8125rem;
  color: #6b7280;
}

/* Mobile — every session becomes its own card with a full-width action. */
@media (max-width: 767.98px) {
  .tday-card__body { padding: 0.875rem; }
  .tday-list { gap: 0.75rem; }
  .tday-item {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "time   status"
      "body   body"
      "action action";
    align-items: start;
    gap: 0.625rem 0.75rem;
    padding: 0.875rem;
  }
  .tday-item__time {
    flex-direction: row;
    align-items: center;
    gap: 0.375rem;
  }
  .tday-item__time-sep {
    width: 0.625rem;
    margin: 0;
  }
  .tday-item__status {
    align-self: center;
    justify-self: end;
  }
  .tday-item__body {
    padding-top: 0.625rem;
    border-top: 1px dashed #eef1f6;
  }
  .tday-item__action .btn { width: 100%; }
}

/* Dark mode */
:root.dark .tday-card {
  border-color: #3f4b5b;
  background-color: #273142;
}
:root.dark .tday-card__head { border-bottom-color: #3f4b5b; }
:root.dark .tday-card__title { color: #ffffff; }
:root.dark .tday-card__date { color: #9ca3af; }
:root.dark .tday-card__count { background-color: #374151; color: #cbd5e1; }
:root.dark .tday-card__head-icon { background-color: rgba(34, 197, 94, 0.16); color: #86efac; }
:root.dark .tday-motivation {
  border-bottom-color: #3f4b5b;
  background: linear-gradient(90deg, rgba(79, 70, 229, 0.22) 0%, rgba(124, 58, 237, 0.18) 100%);
}
:root.dark .tday-motivation__icon { background-color: rgba(129, 140, 248, 0.22); color: #c7d2fe; }
:root.dark .tday-motivation__text { color: #c7d2fe; }
:root.dark .tday-motivation__author { color: #a5b4fc; }
:root.dark .tday-item {
  border-top-color: #3f4b5b;
  border-right-color: #3f4b5b;
  border-bottom-color: #3f4b5b;
  background-color: #2b3648;
}
:root.dark .tday-item__time-start,
:root.dark .tday-item__subject { color: #ffffff; }
:root.dark .tday-item__time-sep { background-color: #4b5563; }
:root.dark .tday-item__time-end { color: #64748b; }
:root.dark .tday-item__meta-item { color: #9ca3af; }
:root.dark .tday-item__meta-item i { color: #64748b; }
:root.dark .tday-item__pill--danger  { border-color: rgba(239, 68, 68, 0.35); background-color: rgba(239, 68, 68, 0.16); color: #fca5a5; }
:root.dark .tday-item__pill--info    { border-color: rgba(59, 130, 246, 0.35); background-color: rgba(59, 130, 246, 0.16); color: #93c5fd; }
:root.dark .tday-item__pill--success { border-color: rgba(34, 197, 94, 0.35); background-color: rgba(34, 197, 94, 0.16); color: #86efac; }
:root.dark .tday-item__done { color: #86efac; }
:root.dark .tday-empty__icon { background-color: #374151; color: #94a3b8; }
:root.dark .tday-empty__title { color: #cbd5e1; }
:root.dark .tday-empty__text { color: #64748b; }
:root.dark .tday-alert--warning {
  border-color: rgba(217, 119, 6, 0.4);
  background-color: rgba(217, 119, 6, 0.12);
}
:root.dark .tday-alert__title { color: #ffffff; }
:root.dark .tday-alert__text { color: #cbd5e1; }
@media (max-width: 767.98px) {
  :root.dark .tday-item__body { border-top-color: #3f4b5b; }
}

/* Teacher dashboard — incomplete-document list inside the same card, kept
   just as minimal: subject left, actions right from md up. */
.docreq-list {
  display: flex;
  flex-direction: column;
}
.docreq {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.875rem 0.125rem;
  border-bottom: 1px solid #eef1f6;
}
.docreq:last-child { border-bottom: 0; }
.docreq__name {
  min-width: 0;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #111827;
}
.docreq__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.docreq__actions .btn {
  flex: 1 1 auto;
  justify-content: center;
}
@media (min-width: 768px) {
  .docreq {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
  }
  .docreq__actions { flex-wrap: nowrap; }
  .docreq__actions .btn { flex: 0 0 auto; }
}
:root.dark .docreq { border-bottom-color: #3f4b5b; }
:root.dark .docreq__name { color: #ffffff; }

/* 3-column dashboard info grid */
.stat-grid-3 {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 1rem;
}
@media (min-width: 640px) {
  .stat-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Standalone stat icon (coloured circle) for dashboard cards */
.stat-icon {
  display: inline-flex;
  width: 2.75rem;
  height: 2.75rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-size: 1.25rem;
}
.stat-icon--primary { background-color: #e4f1ff; color: #487fff; }
.stat-icon--success { background-color: #dcfce7; color: #16a34a; }
.stat-icon--info    { background-color: #dbeafe; color: #2563eb; }
.stat-icon--warning { background-color: #fff9e2; color: #d97706; }
.stat-icon--danger  { background-color: #fee2e2; color: #dc2626; }
:root.dark .stat-icon--primary { background-color: rgba(72, 127, 255, 0.18); color: #95c7ff; }
:root.dark .stat-icon--success { background-color: rgba(22, 163, 74, 0.18); color: #86efac; }
:root.dark .stat-icon--info    { background-color: rgba(37, 99, 235, 0.2); color: #93c5fd; }
:root.dark .stat-icon--warning { background-color: rgba(217, 119, 6, 0.18); color: #fcd34d; }
:root.dark .stat-icon--danger  { background-color: rgba(220, 38, 38, 0.18); color: #fca5a5; }

/* PTK dashboard stat cards: coloured icon tile + big value over a muted
   label, with a soft lift on hover. */
.ptk-stat {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 1rem 1.125rem;
  border: 1px solid #ebecef;
  border-radius: 1rem;
  background-color: #ffffff;
}
.ptk-stat__icon {
  display: inline-flex;
  flex-shrink: 0;
  width: 2.75rem;
  height: 2.75rem;
  align-items: center;
  justify-content: center;
  border-radius: 0.875rem;
  font-size: 1.25rem;
}
.ptk-stat__body { min-width: 0; }
.ptk-stat__value {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.1;
  color: #111827;
}
.ptk-stat__label {
  margin: 0.1875rem 0 0;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.3;
  color: #6b7280;
}
.ptk-stat__icon--primary { background-color: #e4f1ff; color: #487fff; }
.ptk-stat__icon--success { background-color: #dcfce7; color: #16a34a; }
.ptk-stat__icon--info    { background-color: #dbeafe; color: #2563eb; }
.ptk-stat__icon--warning { background-color: #fff9e2; color: #d97706; }
.ptk-stat__icon--danger  { background-color: #fee2e2; color: #dc2626; }
:root.dark .ptk-stat { border-color: #3f4b5b; background-color: #273142; }
:root.dark .ptk-stat__value { color: #ffffff; }
:root.dark .ptk-stat__label { color: #9ca3af; }
:root.dark .ptk-stat__icon--primary { background-color: rgba(72, 127, 255, 0.18); color: #95c7ff; }
:root.dark .ptk-stat__icon--success { background-color: rgba(22, 163, 74, 0.18); color: #86efac; }
:root.dark .ptk-stat__icon--info    { background-color: rgba(37, 99, 235, 0.2); color: #93c5fd; }
:root.dark .ptk-stat__icon--warning { background-color: rgba(217, 119, 6, 0.18); color: #fcd34d; }
:root.dark .ptk-stat__icon--danger  { background-color: rgba(220, 38, 38, 0.18); color: #fca5a5; }
:root.dark .kbm-stat-grid {
  border-color: #3f4b5b;
  background-color: #3f4b5b;
}
:root.dark .kbm-stat { background-color: #273142; }
:root.dark .kbm-stat__icon { background-color: #1f2937; }
:root.dark .kbm-stat__label { color: #9ca3af; }
:root.dark .kbm-stat__value { color: #ffffff; }
:root.dark .kbm-stat__icon--primary { color: #95c7ff; }
:root.dark .kbm-stat__icon--success { color: #86efac; }
:root.dark .kbm-stat__icon--warning { color: #fcd34d; }
:root.dark .kbm-stat__icon--info    { color: #93c5fd; }

/* Start / end time chips (KBM detail) */
.time-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.875rem;
  border-radius: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 600;
}
.time-chip--start { background-color: #dcfce7; color: #15803d; }
.time-chip--end   { background-color: #fee2e2; color: #b91c1c; }
:root.dark .time-chip--start { background-color: rgba(22, 163, 74, 0.18); color: #86efac; }
:root.dark .time-chip--end   { background-color: rgba(220, 38, 38, 0.18); color: #fca5a5; }

/* Circular icon beside a page-card header title (Admina index-2 style) */
.page-card__icon {
  display: inline-flex;
  width: 3rem;
  height: 3rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border: 1px solid #dbe6ff;
  border-radius: 999px;
  background-color: #e4f1ff;
  color: #487fff;
  font-size: 1.5rem;
}
:root.dark .page-card__icon {
  border-color: rgba(72, 127, 255, 0.3);
  background-color: rgba(72, 127, 255, 0.18);
  color: #95c7ff;
}

/* Learning Activities list: keep cells on one line; mute the row number */
#learning-activities-table {
  min-width: max-content;
}
#learning-activities-table tbody td:first-child {
  color: #9ca3af;
  font-weight: 500;
}
:root.dark #learning-activities-table tbody td:first-child {
  color: #6b7280;
}

/* Learning presences list: left-align every cell on desktop (names in
   particular). On mobile the row renders as a card and values are
   right-aligned, so the override lives behind the desktop breakpoint. */
@media (min-width: 768px) {
  #learning-presences-table th,
  #learning-presences-table td {
    text-align: left;
  }
}

/* Learning activity presence list: student photo/initials + name/NIS. */
.learning-presence-student {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}
.learning-presence-student__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: 999px;
  background: linear-gradient(135deg, #487fff 0%, #7c3aed 100%);
  color: #fff;
  font-size: 0.875rem;
  font-weight: 700;
}
.learning-presence-student__photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.learning-presence-student__body {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
}
.learning-presence-student__name {
  color: #111827;
  font-weight: 600;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.learning-presence-student__nis {
  color: #6b7280;
  font-size: 0.75rem;
  line-height: 1.2;
}
:root.dark .learning-presence-student__name { color: #f3f4f6; }
:root.dark .learning-presence-student__nis { color: #9ca3af; }

@media (min-width: 768px) {
  #learning-presences-table th:first-child,
  #learning-presences-table td:first-child {
    text-align: center;
    width: 3rem;
  }
}

@media (max-width: 767.98px) {
  /* On the mobile card the student identity is self-explanatory; drop its
     "Siswa" label so the name/NIS starts at the card edge. */
  #learning-presences-table tbody td[data-label="Siswa"] {
    justify-content: flex-start;
    padding-top: 0.25rem !important;
    text-align: left;
  }
  #learning-presences-table tbody td[data-label="Siswa"]::before {
    display: none;
  }
}

/* PTK presence list: left-align the name column on desktop */
@media (min-width: 768px) {
  #ptk-presence-table th:nth-child(2),
  #ptk-presence-table td:nth-child(2) {
    text-align: left;
  }
}

/* Teacher attendance table: left-align the name column on desktop */
@media (min-width: 768px) {
  #teacher-attendance-table th:nth-child(1),
  #teacher-attendance-table td:nth-child(1) {
    text-align: left;
  }
}

/* PTK list: left-align the name and email columns on desktop */
@media (min-width: 768px) {
  #ptks-table th:nth-child(2),
  #ptks-table td:nth-child(2),
  #ptks-table th:nth-child(5),
  #ptks-table td:nth-child(5) {
    text-align: left;
  }
}

/* PTK schedule matrix: left + top aligned cells */
#ptk-schedule-table th,
#ptk-schedule-table td {
  text-align: left;
  vertical-align: top;
}

/* Keep the teacher / subject column narrow and let long text wrap down */
#ptk-schedule-table {
  table-layout: fixed;
}
#ptk-schedule-table th:first-child,
#ptk-schedule-table td:first-child {
  width: 15%;
  max-width: none;
  white-space: normal;
  overflow-wrap: anywhere;
}
#ptk-schedule-table th:not(:first-child),
#ptk-schedule-table td:not(:first-child) {
  width: 14%;
}

/* Sticky header for the schedule matrix */
.ptk-schedule thead th {
  position: sticky;
  top: 0;
  z-index: 2;
}

/* Separator between the mapel and the class inside schedule badges */
.ptk-schedule .badge__sep {
  border-left: 1px solid currentColor;
  margin-left: 0.5rem;
  padding-left: 0.5rem;
}

/* Schedule badges: template default look (solid, white label, text-sm) */
.ptk-schedule .badge,
.ptk-schedule .badge span {
  font-size: 0.875rem !important;
  color: #ffffff !important;
}
.ptk-schedule .badge {
  padding: 0.375rem 0.75rem;
  border-radius: 0.5rem;
  font-weight: 600;
}

/* …the attendance status buttons (H A S I D B) start at the left; each
   label is centred inside its own button (see .learning-presence-status-btn) */
#learning-presences-table .learning-presence-status-group,
#block-presences-table .learning-presence-status-group {
  justify-content: flex-start;
}

/* Mobile: keep H A S I D B on one row (smaller, no wrapping) */
@media (max-width: 767.98px) {
  #learning-presences-table .learning-presence-status-group,
  #block-presences-table .learning-presence-status-group {
    flex-wrap: nowrap;
    gap: 0.25rem;
  }
  #learning-presences-table .learning-presence-status-btn,
  #block-presences-table .learning-presence-status-btn {
    min-width: 1.75rem;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
    font-size: 0.75rem;
  }
}

/* Mobile card view for `.responsive-index-table` (rules live in
   application.css) — dark-mode colours so the cards don't stay white. */
@media (max-width: 767.98px) {
  #learning-activities-table {
    min-width: 0;
  }

  :root.dark .responsive-index-table tbody tr {
    background-color: #273142;
    border-color: #3f4b5b;
  }
  :root.dark .responsive-index-table tbody td::before {
    color: #9ca3af;
  }
}

/* ---- tabs (driven by the `tabs` Stimulus controller) ---- */
.nav-tabs,
.nav-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  border-bottom: 1px solid #e5e7eb;
  margin-bottom: 1rem;
  padding: 0;
  list-style: none;
}
.nav-tabs .nav-link,
.nav-pills .nav-link {
  padding: 0.5rem 1rem;
  border: 0;
  background: transparent;
  color: #6b7280;
  font-weight: 500;
  cursor: pointer;
  border-bottom: 2px solid transparent;
}
.nav-tabs .nav-link.active,
.nav-pills .nav-link.active {
  color: #487fff;
  border-bottom-color: #487fff;
}
/* Panels are toggled via the `hidden` attribute by the controller; the
   .tab-pane rules cover the few partials still using the old markup. */
.tab-content > .tab-pane { display: none; }
.tab-content > .tab-pane.active,
.tab-pane.show.active { display: block; }

:root.dark .nav-tabs,
:root.dark .nav-pills { border-bottom-color: #3f4b5b; }
:root.dark .nav-tabs .nav-link,
:root.dark .nav-pills .nav-link { color: #9ca3af; }

/* Profile page pill tabs (Admina "View Profile" reference) */
.profile-tabs {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-bottom: 1.25rem;
  padding: 0.25rem;
  border: 0;
  border-radius: 999px;
  background-color: #f3f4f6;
}
.profile-tabs .nav-link {
  padding: 0.5rem 1.25rem;
  border: 0;
  border-radius: 999px;
  color: #6b7280;
  font-weight: 500;
}
.profile-tabs .nav-link.active {
  color: #487fff;
  background-color: #ffffff;
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.1);
}
:root.dark .profile-tabs { background-color: #323d4e; }
:root.dark .profile-tabs .nav-link { color: #9ca3af; }
:root.dark .profile-tabs .nav-link.active {
  color: #95c7ff;
  background-color: #1f2937;
}

/* ---- accordion (driven by the `collapse` Stimulus controller) ---- */
.accordion-item {
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  overflow: hidden;
  background-color: #fff;
}
.accordion-header {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
}
.accordion-button {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0.75rem 1rem;
  border: 0;
  background-color: #f9fafb;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
}
.accordion-button::after {
  content: "";
  flex-shrink: 0;
  width: 0;
  height: 0;
  margin-left: auto;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid currentColor;
  transition: transform 0.15s ease;
}
.accordion-button.collapsed::after,
.accordion-button[aria-expanded="false"]::after { transform: rotate(-90deg); }
/* Visibility of .accordion-collapse is driven by the `hidden` attribute
   (collapse Stimulus controller) — no display rule here on purpose. */
.accordion-body { padding: 1rem; }

.bg-soft-blue-primary { background-color: #eff6ff !important; }
.bg-soft-blue { background-color: #eff6ff !important; }
.bg-light { background-color: #f3f4f6 !important; }

:root.dark .accordion-item { background-color: #273142; border-color: #3f4b5b; }
:root.dark .accordion-button { background-color: #1f2937; }

/* ---- bg colour helpers (used by LMS engine badge views + download progress) ---- */
.bg-success { background-color: #16a34a !important; }
.bg-warning { background-color: #ff9f29 !important; }
.bg-danger { background-color: #dc2626 !important; }
.bg-info { background-color: #2563eb !important; }
.bg-primary { background-color: #487fff !important; }
.bg-secondary { background-color: #6b7280 !important; }

/* ---- progress bar (used by download turbo_stream files) ---- */
.progress {
  display: flex;
  height: 1rem;
  overflow: hidden;
  background-color: #e5e7eb;
  border-radius: 999px;
}
.progress-bar { height: 100%; }

/* Mobile menu button inside the navbar (desktop uses the collapse toggle) */
.twin-mobile-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (min-width: 1200px) {
  .twin-mobile-toggle { display: none; }
}

/* ---- dashboard progress bars (Admina progress.html style) ---- */
.dash-progress {
  display: flex;
  width: 100%;
  height: 0.5rem;
  overflow: hidden;
  border-radius: 999px;
  background-color: #eef1f6;
}
.dash-progress__bar {
  height: 100%;
  border-radius: 999px;
  transition: width 0.4s ease;
}
.dash-progress__bar--primary { background-color: #487fff; }
.dash-progress__bar--success { background-color: #16a34a; }
.dash-progress__bar--info    { background-color: #2563eb; }
.dash-progress__bar--warning { background-color: #ff9f29; }
.dash-progress__bar--danger  { background-color: #dc2626; }
:root.dark .dash-progress { background-color: #374151; }

/* Peserta didik detail: segmented button tabs */
.pd-tabs {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  padding: 0.25rem;
  border: 0;
  border-radius: 0.75rem;
  background-color: #f3f4f6;
  margin-bottom: 1rem;
}
.pd-tabs .nav-item { display: inline-flex; }
.pd-tabs .nav-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border: 0;
  border-radius: 0.5rem;
  background: transparent;
  color: #6b7280;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.pd-tabs .nav-link.active {
  background-color: #ffffff;
  color: #487fff;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06);
}
:root.dark .pd-tabs { background-color: #1f2937; }
:root.dark .pd-tabs .nav-link { color: #9ca3af; }
:root.dark .pd-tabs .nav-link.active { background-color: #374151; color: #95c7ff; }

/* ---- Buku Induk: sectioned label/value rows --------------------------- */
.biodata-section {
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  overflow: hidden;
}
.biodata-section__head {
  padding: 0.625rem 1rem;
  background-color: #f9fafb;
  border-bottom: 1px solid #e5e7eb;
}
.biodata-section__title {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: #111827;
}
.biodata-rows {
  margin: 0;
}
.biodata-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.125rem 1rem;
  padding: 0.5625rem 1rem;
  border-bottom: 1px solid #f3f4f6;
}
.biodata-row:last-child {
  border-bottom: 0;
}
.biodata-row dt {
  width: 100%;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #6b7280;
}
.biodata-row dd {
  margin: 0;
  flex: 1 1 0;
  min-width: 0;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.4;
  color: #111827;
}
.biodata-row dd.biodata-row__empty {
  color: #dc2626;
  font-style: italic;
}
:root.dark .biodata-row dd.biodata-row__empty { color: #f87171; }
@media (min-width: 640px) {
  .biodata-row dt {
    width: 38%;
    flex-shrink: 0;
  }
}
:root.dark .biodata-section { border-color: #3f4b5b; }
:root.dark .biodata-section__head {
  background-color: #1f2937;
  border-bottom-color: #3f4b5b;
}
:root.dark .biodata-section__title { color: #ffffff; }
:root.dark .biodata-row { border-bottom-color: #323d4e; }
:root.dark .biodata-row dt { color: #9ca3af; }
:root.dark .biodata-row dd { color: #ffffff; }

/* Elements with the `hidden` attribute must stay hidden even when a display
   utility (e.g. .flex) is present — used by the modal controller. */
[hidden] {
  display: none !important;
}

/* ---------------------------------------------------------------------
   Devise (sign-in) page — modern floating auth card
   --------------------------------------------------------------------- */
.auth-scene {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  background: #f5f6fa url(/admina/images/body-bg.png) center top / cover no-repeat fixed;
}
:root.dark .auth-scene {
  background: linear-gradient(rgba(11, 18, 32, 0.9), rgba(15, 23, 42, 0.9)),
    url(/admina/images/body-bg.png) center top / cover no-repeat fixed;
}
.auth-blob {
  position: absolute;
  border-radius: 999px;
  filter: blur(80px);
  opacity: 0.55;
  pointer-events: none;
}
.auth-blob--a { top: -6rem; left: -6rem; width: 22rem; height: 22rem; background: #bfdbfe; }
.auth-blob--b { right: -6rem; bottom: -8rem; width: 26rem; height: 26rem; background: #c7d2fe; }
.auth-blob--c { top: 30%; right: 20%; width: 16rem; height: 16rem; background: #e9d5ff; opacity: 0.4; }
:root.dark .auth-blob { opacity: 0.18; }

.auth-shell {
  display: flex;
  width: 100%;
  max-width: 64rem;
  overflow: hidden;
  border-radius: 2rem;
  background-color: #ffffff;
  box-shadow: 0 30px 70px rgba(16, 24, 40, 0.18);
}
:root.dark .auth-shell {
  background-color: #1f2937;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5);
}

.auth-shell__brand {
  display: none;
  width: 46%;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 2.5rem;
  background: linear-gradient(160deg, #487fff 0%, #6366f1 100%);
}
@media (min-width: 1024px) {
  .auth-shell__brand { display: flex; }
}

.auth-brand__art {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
}
.auth-illustration {
  width: 20rem;
  max-width: 85%;
  height: auto;
  filter: drop-shadow(0 24px 48px rgba(16, 24, 40, 0.25));
}

.auth-shell__form {
  display: flex;
  width: 100%;
  flex-direction: column;
  justify-content: center;
  padding: 2rem 1.5rem;
}
@media (min-width: 640px) {
  .auth-shell__form { padding: 3rem 2.5rem; }
}
@media (min-width: 1024px) {
  .auth-shell__form { width: 54%; }
}
.auth-shell__form > * {
  width: 100%;
  max-width: 24rem;
  margin-inline: auto;
}

/* Sign-in brand wordmark — mirrors the dashboard sidebar logo sizing and the
   trailing accent dot. */
.auth-brand-wordmark {
  display: inline-flex;
  align-items: center;
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  line-height: 1;
  text-transform: uppercase;
}
.auth-brand-wordmark::after {
  content: "";
  width: 0.4rem;
  height: 0.4rem;
  margin-inline-start: 0.4rem;
  flex-shrink: 0;
  border-radius: 999px;
  background-color: currentColor;
}

/* Heading */
.auth-page__head {
  margin-bottom: 1.75rem;
}
.auth-page__title {
  margin: 0;
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: #111827;
}
.auth-page__title::after {
  content: "";
  display: block;
  width: 2.5rem;
  height: 3px;
  margin-top: 0.75rem;
  border-radius: 999px;
  background: var(--siabjad-gradient);
}
:root.dark .auth-page__title {
  color: #ffffff;
}
.auth-page__subtitle {
  margin-top: 0.75rem;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: #6b7280;
}
:root.dark .auth-page__subtitle {
  color: #9ca3af;
}

/* Icon fields (Admina .icon-field) */
.auth-field {
  position: relative;
}
.auth-field + .auth-field {
  margin-top: 1rem;
}
.auth-field__icon {
  position: absolute;
  top: 0;
  bottom: 0;
  inset-inline-start: 0;
  width: 2.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9ca3af;
  font-size: 1.125rem;
  pointer-events: none;
}
.auth-field__toggle {
  position: absolute;
  top: 0;
  bottom: 0;
  inset-inline-end: 0;
  width: 2.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9ca3af;
  cursor: pointer;
  transition: color 0.15s ease;
}
.auth-field__toggle:hover {
  color: #487fff;
}
.auth-page .form-control {
  height: 3.25rem;
  padding-inline-start: 2.75rem;
  border-radius: 0.75rem;
  background-color: #fafafa;
  font-size: 0.875rem;
}
.auth-page .form-control.has-toggle {
  padding-inline-end: 2.75rem;
}
:root.dark .auth-page .form-control {
  background-color: #1f2937;
}

/* Remember / forgot row */
.auth-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 1.25rem;
}
.auth-remember {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: #4b5563;
  cursor: pointer;
}
:root.dark .auth-remember {
  color: #d1d5db;
}
.auth-forgot {
  font-size: 0.875rem;
  font-weight: 500;
  color: #487fff;
}
.auth-forgot:hover {
  text-decoration: underline;
}

/* Submit */
.auth-submit {
  display: flex;
  width: 100%;
  height: 3.25rem;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1.5rem;
  border-radius: 0.75rem;
  font-size: 0.875rem;
  font-weight: 600;
}
.auth-submit__icon {
  font-size: 1.125rem;
  transition: transform 0.15s ease;
}
.auth-submit:hover .auth-submit__icon {
  transform: translateX(3px);
}

/* Social button */
.auth-social {
  display: flex;
  width: 100%;
  height: 3.25rem;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 1rem;
  border: 1px solid #e5e7eb;
  border-radius: 0.75rem;
  background-color: #ffffff;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #374151;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.auth-social:hover {
  background-color: #f9fafb;
  border-color: #d1d5db;
}
:root.dark .auth-social {
  background-color: #1f2937;
  border-color: #374151;
  color: #e5e7eb;
}
:root.dark .auth-social:hover {
  background-color: #273142;
}

/* ---------------------------------------------------------------------
   Row action button used inside DataTables (icon-only)
   --------------------------------------------------------------------- */
.dt-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  background-color: #ffffff;
  color: #6b7280;
  font-size: 1rem;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.dt-action:hover {
  border-color: #487fff;
  background-color: #eef4ff;
  color: #487fff;
}
:root.dark .dt-action {
  border-color: #3f4b5b;
  background-color: #1f2937;
  color: #d1d5db;
}
:root.dark .dt-action:hover {
  border-color: #487fff;
  background-color: rgba(72, 127, 255, 0.15);
  color: #95c7ff;
}

/* ---------------------------------------------------------------------
   Percentage progress — compact table cell.
   The value sits above a short fixed-width bar so the column never has to
   stretch to fit a long progress bar.
   --------------------------------------------------------------------- */
.percentage-progress {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  width: 100%;
  max-width: 4.5rem;
  margin: 0 auto;
  vertical-align: middle;
}
.percentage-progress__value {
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
  color: #374151;
}
:root.dark .percentage-progress__value {
  color: #e5e7eb;
}
.percentage-progress__track {
  width: 100%;
  height: 0.25rem;
  border-radius: 999px;
  background-color: #eef1f6;
  overflow: hidden;
}
.percentage-progress__bar {
  height: 100%;
  border-radius: 999px;
  transition: width 0.4s ease;
}
:root.dark .percentage-progress__track {
  background-color: #374151;
}
.browser-progress {
  width: 64px;
  height: 6px;
  border-radius: 999px;
  background-color: #e5e7eb;
  overflow: hidden;
  flex-shrink: 0;
}
:root.dark .browser-progress {
  background-color: #374151;
}
.browser-progress__bar {
  height: 100%;
  border-radius: 999px;
}

/* PTK list: left-align Status (3rd) and Email (6th) columns (desktop) */
@media (min-width: 768px) {
  #ptks-table thead th:nth-child(3),
  #ptks-table tbody td:nth-child(3),
  #ptks-table thead th:nth-child(6),
  #ptks-table tbody td:nth-child(6) {
    text-align: start;
  }
}

/* Compact editable score table for the "Tampilkan nilai" modal so every
   column fits without horizontal scrolling. Font sizes stay at the template
   defaults; only the padding is tightened. */
.admina-table.score-modal-table thead th,
.admina-table.score-modal-table tbody td {
  padding: 0.35rem 0.5rem;
}
.admina-table.score-modal-table tbody td:first-child {
  min-width: 8rem;
  max-width: 14rem;
  white-space: normal;
}
.admina-table.score-modal-table .form-control-sm {
  height: auto;
  padding: 0.15rem 0.3rem;
}

/* Highlight the column that matches the selected learning stage so scores can
   be filled in or moved into the correct level. */
.admina-table.score-modal-table th.score-level-active { font-weight: 600; }
.admina-table.score-modal-table th.score-level--memahami.score-level-active { color: #487fff; }
.admina-table.score-modal-table td.score-level--memahami.score-level-active { background-color: #eff4ff; }
.admina-table.score-modal-table th.score-level--mengaplikasi.score-level-active { color: #0ea5e9; }
.admina-table.score-modal-table td.score-level--mengaplikasi.score-level-active { background-color: #f0f9ff; }
.admina-table.score-modal-table th.score-level--merefleksi.score-level-active { color: #8b5cf6; }
.admina-table.score-modal-table td.score-level--merefleksi.score-level-active { background-color: #f5f3ff; }
:root.dark .admina-table.score-modal-table td.score-level--memahami.score-level-active { background-color: rgba(72, 127, 255, 0.12); }
:root.dark .admina-table.score-modal-table td.score-level--mengaplikasi.score-level-active { background-color: rgba(14, 165, 233, 0.12); }
:root.dark .admina-table.score-modal-table td.score-level--merefleksi.score-level-active { background-color: rgba(139, 92, 246, 0.12); }

/* Scores left on another level than the selected stage need to be moved or
   removed, so flag those cells in the warning palette. */
.admina-table.score-modal-table td.score-level-mismatch {
  background-color: #fff9e2;
  box-shadow: inset 0 0 0 1px #fbbf24;
}
:root.dark .admina-table.score-modal-table td.score-level-mismatch {
  background-color: rgba(217, 119, 6, 0.18);
  box-shadow: inset 0 0 0 1px rgba(251, 191, 36, 0.5);
}

/* Score tables (page + modal): the student name column is not bold, unlike
   the default Admina first-column treatment. */
.admina-table[id^="tablenilai-"] tbody td:first-child {
  font-weight: 400;
}

/* ---------------------------------------------------------------------
   Modal layering.

   The modals live inside <main class="dashboard-main">, which the twin
   sidebar offsets with a margin. The sidebar is position:fixed with
   z-index 1045 (mobile toggle 1050), so the Tailwind z-50 on the dialog
   left the open sidebar panel covering the modal and its backdrop. Lift
   every remote/Stimulus modal above the sidebar chrome.
   --------------------------------------------------------------------- */
.admina-modal,
[data-modal-target="panel"] {
  z-index: 1070;
}

/* On mobile TomSelect parks its dropdown as a direct child of <body> so it can
   escape the modal's scroll container. Keep it above the modal overlay (1070)
   and the sidebar chrome. */
body > .ts-dropdown {
  z-index: 1080;
}

/* flatpickr's own stylesheet caps the open calendar at z-index 900, which sits
   below the fixed sidebar (1045) and modals (1070) — the calendar ends up
   behind the chrome and can't be clicked. Lift it above everything. */
body .flatpickr-calendar.open {
  z-index: 1090;
}

/* MCDatepicker's modal overlay ships at z-index 1002, below the fixed sidebar
   (1045) and modals (1070). Lift it above the chrome so it stays clickable.
   The `body` prefix raises specificity because mc-datepicker.css is loaded
   after this bundle. */
body .mc-calendar--modal,
body .mc-calendar--inline {
  z-index: 1090;
}

/* MCDatepicker has no overlay of its own, so a dedicated backdrop element is
   injected and toggled by application_footer.js while a picker is open. It
   sits above the sidebar (1045) and modals (1070) but below the calendar
   (1090), dimming and blurring the page behind it. It captures clicks so
   tapping anywhere outside the calendar dismisses the picker. */
.mc-calendar-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1085;
  background-color: rgba(17, 24, 39, 0.35);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0s linear 0.2s;
  pointer-events: auto;
  cursor: default;
}
.mc-calendar-backdrop.is-visible {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.2s ease;
}
:root.dark .mc-calendar-backdrop {
  background-color: rgba(0, 0, 0, 0.55);
}

/* ---------------------------------------------------------------------
   Modal motion + sizing.

   Both the turbo-frame remote modal (.admina-modal) and the Stimulus
   panel ([data-modal-target="panel"]) appear instantly with no open
   animation, matching the `data-turbo-confirm` dialog (admina_dialog.js),
   and reverse on close (the controllers add `.is-closing`).

   The frosted-glass blur lives on the backdrop element, not on the overlay
   wrapper: the wrapper holds the dialog and would become the backdrop root
   if it animated, leaving a nested backdrop-filter with nothing but its own
   box to blur. Keeping the wrapper static and blurring its full-bleed
   backdrop mirrors the datepicker backdrop (.mc-calendar-backdrop).
   --------------------------------------------------------------------- */
@keyframes admina-modal-fade-out {
  from { opacity: 1; }
  to { opacity: 0; }
}
@keyframes admina-modal-pop-out {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to { opacity: 0; transform: translateY(6px) scale(0.98); }
}
.admina-modal__backdrop,
[data-modal-target="panel"] > .fixed.inset-0 {
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.admina-modal.is-closing .admina-modal__backdrop,
[data-modal-target="panel"].is-closing > .fixed.inset-0 {
  animation: admina-modal-fade-out 0.16s ease-in both;
}
.admina-modal.is-closing .admina-modal__dialog,
[data-modal-target="panel"].is-closing > .relative {
  animation: admina-modal-pop-out 0.16s ease-in both;
}

/* Smaller icon badge + close icon inside the remote modal */
.admina-modal .page-card__icon {
  width: 2.5rem;
  height: 2.5rem;
  font-size: 1.125rem;
}

@media (prefers-reduced-motion: reduce) {
  .admina-modal.is-closing .admina-modal__backdrop,
  [data-modal-target="panel"].is-closing > .fixed.inset-0,
  .admina-modal.is-closing .admina-modal__dialog,
  [data-modal-target="panel"].is-closing > .relative {
    animation: none;
  }
}

/* Turbo `data-turbo-confirm` dialog (app/javascript/controllers/admina_dialog.js).
   Its overlay is created and appended to <body> at runtime — the delete button
   in table rows uses it — and already dims the page. Add the same frosted-glass
   blur as the datepicker and the pop-up backdrops. */
.admina-dialog-backdrop {
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

/* ---------------------------------------------------------------------
   Inline-editable score cells (Sumatif Akhir Semester tab + score modal).

   The number input and the value span used to swap via display:none, which
   let the auto-layout table column jump when entering/leaving edit mode. The
   wrapper keeps a fixed width and min-height and the input is absolutely
   positioned over the value, so clicking a score never reflows the table.
   --------------------------------------------------------------------- */
.score-edit-cell {
  --score-cell-w: 7rem;
  --score-cell-h: 1.9rem;
  position: relative;
  display: block;
  width: var(--score-cell-w);
  min-height: var(--score-cell-h);
  margin-inline: auto;
}
.score-edit-cell--sm {
  --score-cell-w: 4.5rem;
  --score-cell-h: 1.7rem;
}
.score-edit-cell input.form-control {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: var(--score-cell-h);
  max-width: none;
  margin: 0;
  padding-top: 0;
  padding-bottom: 0;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.score-edit-cell .sumatif-editable-value,
.score-edit-cell .score-editable-value {
  display: inline-block;
  width: 100%;
  min-height: var(--score-cell-h);
  line-height: var(--score-cell-h);
  cursor: pointer;
}

/* Presensi detail: keep the student name left-aligned (the admina table
   centers body cells by default). */
@media (min-width: 768px) {
  .admina-table tbody td.cell-name,
  .admina-table thead th.cell-name {
    text-align: start;
  }
}

/* Presensi recap: fixed column widths so all columns fit without horizontal
   scrolling. Count columns are intentionally narrow and their headers are
   allowed to wrap. */
.presence-recap-table {
  table-layout: fixed;
}
.presence-recap-table thead th {
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.2;
}
.presence-recap-table tbody td {
  overflow-wrap: anywhere;
}
.presence-recap-table .presence-col--no { width: 6%; }
.presence-recap-table .presence-col--name { width: 30%; }
.presence-recap-table .presence-col--count { width: 7.5%; }
.presence-recap-table .presence-col--percentage { width: 11.5%; }
.presence-recap-table thead th.cell-name,
.presence-recap-table tbody td.cell-name {
  width: auto;
  min-width: 0;
  white-space: normal;
}

/* Student identity cell: initials avatar + stacked name/NIS. */
.presence-student-cell {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
  color: #111827;
}
.presence-student-cell:hover .presence-student-name {
  color: #487fff;
  text-decoration: underline;
}
.presence-student-cell__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  flex-shrink: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, #487fff 0%, #7c3aed 100%);
  color: #fff;
  font-size: 0.875rem;
  font-weight: 700;
}
.presence-student-cell__body {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
}
.presence-student-name {
  font-weight: 600;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.presence-student-nis {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  color: #6b7280;
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.2;
}
.presence-student-nis i { font-size: 0.8125rem; }

/* Compact count pills for the absence/catatan/penanganan columns. */
.presence-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.75rem;
  padding: 0.25rem 0.5rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
}
a.presence-count:hover { filter: brightness(0.96); }
.presence-count--empty { background-color: #f3f4f6; color: #9ca3af; }
.presence-count--danger { background-color: #fee2e2; color: #b91c1c; }
.presence-count--info { background-color: #dbeafe; color: #1d4ed8; }
.presence-count--warning { background-color: #fff9e2; color: #b45309; }
.presence-count--dark { background-color: #e5e7eb; color: #374151; }
.presence-count--primary { background-color: #dbe6ff; color: #1d4ed8; }

.presence-recap-table .percentage-progress { max-width: 5rem; }

/* Framed table inside the recap card. */
.presence-table-shell { padding: 0.75rem; }
.presence-table-shell .dt-header { margin-bottom: 0.75rem; }
.presence-table-shell .dt-footer { margin-top: 0.75rem; }
.presence-table-shell .presence-recap-table thead th { background-color: #f9fafb; }
@media (min-width: 768px) {
  .presence-table-shell { padding: 1rem; }
}
:root.dark .presence-table-shell .presence-recap-table thead th { background-color: #1f2937; }

:root.dark .presence-student-cell { color: #f3f4f6; }
:root.dark .presence-student-cell:hover .presence-student-name { color: #95c7ff; }
:root.dark .presence-student-nis { color: #9ca3af; }
:root.dark .presence-count--empty { background-color: #374151; color: #9ca3af; }
:root.dark .presence-count--danger { background-color: rgba(220, 38, 38, 0.18); color: #fca5a5; }
:root.dark .presence-count--info { background-color: rgba(37, 99, 235, 0.18); color: #93c5fd; }
:root.dark .presence-count--warning { background-color: rgba(217, 119, 6, 0.18); color: #fcd34d; }
:root.dark .presence-count--dark { background-color: #374151; color: #d1d5db; }
:root.dark .presence-count--primary { background-color: rgba(72, 127, 255, 0.18); color: #95c7ff; }

@media (min-width: 768px) {
  .presence-recap-table thead th,
  .presence-recap-table tbody td {
    padding-left: 0.4rem;
    padding-right: 0.4rem;
  }
}
@media print {
  /* Only the printable sheet should reach the paper. Use !important because
     component display rules (e.g. .kbm-stat-grid) may load after Tailwind's
     print:hidden utility. */
  .dash-hero,
  .kbm-stat-grid,
  .presence-table-shell { display: none !important; }
  /* The printable table has its own heading; drop the interactive card head. */
  .presence-recap-card > header { display: none !important; }
  .presence-student-cell__avatar { display: none !important; }
  .presence-count {
    min-width: 0;
    padding: 0;
    background-color: transparent !important;
    color: #111827 !important;
  }
  .presence-recap-table .percentage-progress__track { display: none; }
  .presence-recap-table .percentage-progress__value { color: #111827 !important; }
}

/* ---------------------------------------------------------------------
   PKL progress widget (Rombel list).

   Compact stacked bar with a completion headline and a dotted legend.
   The segment colours still come from the model (`bg-success` etc.).
   --------------------------------------------------------------------- */
.pkl-progress {
  min-width: 11rem;
}
.pkl-progress__head {
  display: flex;
  align-items: baseline;
  gap: 0.375rem;
  margin-bottom: 0.375rem;
  white-space: nowrap;
}
.pkl-progress__value {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  color: #111827;
}
.pkl-progress__caption {
  font-size: 0.75rem;
  color: #6b7280;
}
.pkl-progress__track {
  display: flex;
  height: 0.5rem;
  width: 100%;
  overflow: hidden;
  border-radius: 999px;
  background-color: #e5e7eb;
}
.pkl-progress__seg {
  height: 100%;
  transition: width 0.3s ease;
}
.pkl-progress__seg + .pkl-progress__seg {
  box-shadow: -1px 0 0 0 #ffffff;
}
.pkl-progress__seg--empty {
  background-color: #e5e7eb;
}
.pkl-progress__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.75rem;
  margin-top: 0.375rem;
}
.pkl-progress__item {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.75rem;
  color: #4b5563;
}
.pkl-progress__item strong {
  color: #111827;
}
.pkl-progress__item--muted {
  color: #9ca3af;
}
.pkl-progress__dot {
  width: 0.5rem;
  height: 0.5rem;
  flex-shrink: 0;
  border-radius: 999px;
}
:root.dark .pkl-progress__value,
:root.dark .pkl-progress__item strong {
  color: #ffffff;
}
:root.dark .pkl-progress__caption,
:root.dark .pkl-progress__item {
  color: #9ca3af;
}
:root.dark .pkl-progress__track,
:root.dark .pkl-progress__seg--empty {
  background-color: #323d4e;
}
:root.dark .pkl-progress__seg + .pkl-progress__seg {
  box-shadow: -1px 0 0 0 #273142;
}

/* ---------------------------------------------------------------------
   Rombel timetable (show / edit).

   Fits the card width: a fixed table layout lets the day columns share
   the remaining space and wrap their content instead of scrolling
   sideways. Only the time column keeps a fixed, non-wrapping width.
   --------------------------------------------------------------------- */
.admina-table.schedule-timetable {
  table-layout: fixed;
  width: 100%;
}
.admina-table.schedule-timetable thead th,
.admina-table.schedule-timetable tbody td {
  padding: 0.5rem;
  white-space: normal;
  overflow-wrap: anywhere;
  vertical-align: top;
}
.admina-table.schedule-timetable thead th:first-child,
.admina-table.schedule-timetable tbody td:first-child {
  width: 6rem;
  white-space: nowrap;
}

/* ---------------------------------------------------------------------
   Template page background (Admina body-bg) for the dashboard shell.
   Applied on the body so it renders behind every page (dashboard, lists,
   etc.) regardless of the per-page content.
   --------------------------------------------------------------------- */
body[data-controller~="twin-sidebar"] {
  background-color: #f5f6fa;
}
:root.dark body[data-controller~="twin-sidebar"] {
  background-color: #1f2937;
}

/* Template background across the whole dashboard column (navbar → content →
   footer). Fixed + cover = one full-bleed image, never tiled. */
.dashboard-main {
  background-image: url(/admina/images/body-bg.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center top;
  background-attachment: fixed;
}
:root.dark .dashboard-main {
  background-image: linear-gradient(rgba(31, 41, 55, 0.92), rgba(31, 41, 55, 0.92)), url(/admina/images/body-bg.png);
}

/* Let the content grow so the footer sits at the bottom of the shell and the
   background stretches all the way down. */
#content.dashboard-main-body {
  flex: 1 0 auto;
}

/* admin_view_detail: the leading print-only letterhead is the first child of
   the `space-y-6` wrapper, so Tailwind pushes the first on-screen card down by
   the 1.5rem gap. Keep it flush, matching the other presensi detail pages. */
.print-semester-presensi > .admina-page-card:first-of-type {
  margin-top: 0;
}

/* ---------------------------------------------------------------------
   Dashboard hero banner — abstract gradients.
   `.dash-hero` is the base layer (abstract blobs + dot grid + a default
   gradient); a `.dash-hero--*` modifier supplies the palette. The
   `dashboard-hero` Stimulus controller swaps the modifier on every page
   load, so each refresh shows a different background.
   --------------------------------------------------------------------- */
.dash-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 1rem;
  background:
    radial-gradient(circle at 14% 16%, rgba(255, 255, 255, 0.30), transparent 40%),
    radial-gradient(circle at 86% 14%, rgba(255, 255, 255, 0.14), transparent 34%),
    radial-gradient(circle at 78% 90%, rgba(17, 24, 39, 0.28), transparent 48%),
    linear-gradient(135deg, #4f46e5 0%, #7c3aed 48%, #db2777 100%);
}

/* Soft diagonal sheen */
.dash-hero::before {
  content: "";
  position: absolute;
  top: -55%;
  right: -12%;
  width: 55%;
  height: 210%;
  z-index: 0;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.32), transparent);
  transform: rotate(20deg);
  pointer-events: none;
}

/* Abstract dot grid */
.dash-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.6) 1px, transparent 1.4px);
  background-size: 20px 20px;
  opacity: 0.14;
  pointer-events: none;
}

.dash-hero > * {
  position: relative;
  z-index: 1;
  animation: dash-hero-in 0.45s ease both;
}

@keyframes dash-hero-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .dash-hero > * { animation: none; }
}

/* Frosted pills inside the hero */
.dash-hero__chip {
  background-color: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.22);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

/* Hero title has a subtle shadow so it stays readable on every palette */
.dash-hero__title {
  text-shadow: 0 1px 2px rgba(15, 23, 42, 0.20);
}

/* Decorative icon badge */
.dash-hero__icon {
  font-size: 2.25rem;
  line-height: 1;
}

/* Hero body: left copy + right info panels (principal / NPSN) */
.dash-hero__body {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
@media (min-width: 992px) {
  .dash-hero__body {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

.dash-hero__info-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.75rem;
}
@media (min-width: 576px) {
  .dash-hero__info-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 992px) {
  .dash-hero__info-grid {
    grid-template-columns: minmax(0, 1fr);
    width: 20rem;
  }
}

/* Frosted info card inside the hero */
.dash-hero__panel {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
  border-radius: 1rem;
  background-color: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.22);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.dash-hero__panel-icon {
  display: inline-flex;
  width: 2.5rem;
  height: 2.5rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-size: 1.25rem;
  color: #fff;
  background-color: rgba(255, 255, 255, 0.20);
}
.dash-hero__panel-label {
  margin: 0;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
}
.dash-hero__panel-value {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 700;
  color: #fff;
  overflow-wrap: anywhere;
}

/* --- Palettes ------------------------------------------------------- */
.dash-hero--aurora {
  background:
    radial-gradient(circle at 14% 16%, rgba(255, 255, 255, 0.30), transparent 40%),
    radial-gradient(circle at 86% 14%, rgba(255, 255, 255, 0.14), transparent 34%),
    radial-gradient(circle at 78% 90%, rgba(28, 10, 60, 0.30), transparent 48%),
    linear-gradient(135deg, #4f46e5 0%, #7c3aed 48%, #db2777 100%);
}

.dash-hero--ocean {
  background:
    radial-gradient(circle at 16% 14%, rgba(255, 255, 255, 0.28), transparent 42%),
    radial-gradient(circle at 84% 22%, rgba(125, 211, 252, 0.35), transparent 38%),
    radial-gradient(circle at 72% 92%, rgba(15, 23, 42, 0.34), transparent 50%),
    linear-gradient(140deg, #0ea5e9 0%, #2563eb 52%, #1e3a8a 100%);
}

.dash-hero--emerald {
  background:
    radial-gradient(circle at 15% 18%, rgba(255, 255, 255, 0.26), transparent 42%),
    radial-gradient(circle at 82% 16%, rgba(167, 243, 208, 0.32), transparent 38%),
    radial-gradient(circle at 76% 92%, rgba(6, 78, 59, 0.34), transparent 52%),
    linear-gradient(140deg, #10b981 0%, #0d9488 50%, #065f46 100%);
}

.dash-hero--sunset {
  background:
    radial-gradient(circle at 14% 16%, rgba(255, 255, 255, 0.30), transparent 42%),
    radial-gradient(circle at 84% 18%, rgba(254, 215, 170, 0.35), transparent 38%),
    radial-gradient(circle at 78% 92%, rgba(124, 45, 18, 0.30), transparent 50%),
    linear-gradient(135deg, #f59e0b 0%, #ea580c 48%, #be123c 100%);
}

.dash-hero--flamingo {
  background:
    radial-gradient(circle at 15% 16%, rgba(255, 255, 255, 0.30), transparent 42%),
    radial-gradient(circle at 86% 20%, rgba(251, 207, 232, 0.35), transparent 38%),
    radial-gradient(circle at 76% 92%, rgba(76, 5, 25, 0.34), transparent 50%),
    linear-gradient(135deg, #db2777 0%, #e11d48 50%, #9d174d 100%);
}

.dash-hero--cosmos {
  background:
    radial-gradient(circle at 14% 16%, rgba(129, 140, 248, 0.45), transparent 44%),
    radial-gradient(circle at 86% 18%, rgba(167, 139, 250, 0.30), transparent 38%),
    radial-gradient(circle at 76% 92%, rgba(2, 6, 23, 0.55), transparent 52%),
    linear-gradient(140deg, #1e293b 0%, #4338ca 52%, #6d28d9 100%);
}

/* ---------------------------------------------------------------------
   Today's absences — details table grouped by student.

   The DataTables endpoint returns one row per student; the student's name and
   class sit on the left and the list of missed subjects renders to the right.
   --------------------------------------------------------------------- */
#today-absences-table td {
  vertical-align: top;
}

.absentee-name-cell {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 14rem;
  text-align: start;
}
.absentee-name-cell__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  flex-shrink: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, #487fff 0%, #7c3aed 100%);
  color: #fff;
  font-size: 0.9375rem;
  font-weight: 700;
}

.absentee-name-cell__body {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
}

.absentee-name-cell__name {
  font-weight: 600;
  color: #111827;
}

.absentee-name-cell__kelas {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.75rem;
  color: #6b7280;
}

:root.dark .absentee-name-cell__name { color: #f9fafb; }
:root.dark .absentee-name-cell__kelas { color: #9ca3af; }

.absence-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  min-width: 0;
  max-width: 100%;
}

.absence-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.5rem;
  border: 1px solid #e5e7eb;
  border-inline-start-width: 3px;
  border-radius: 999px;
  background-color: #f9fafb;
  white-space: nowrap;
}

.absence-chip__mapel {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #374151;
}

.absence-chip__meta {
  font-size: 0.75rem;
  color: #6b7280;
}

.absence-chip__badge {
  font-size: 0.6875rem;
}

:root.dark .absence-chip {
  border-color: #3f4b5b;
  background-color: #1f2937;
}
:root.dark .absence-chip__mapel { color: #e5e7eb; }
:root.dark .absence-chip__meta { color: #9ca3af; }

/* Status accent: colours the chip's left border. */
.absence-chip--warning { border-inline-start-color: #f59e0b; }
.absence-chip--info { border-inline-start-color: #3b82f6; }
.absence-chip--danger { border-inline-start-color: #ef4444; }
.absence-chip--neutral { border-inline-start-color: #9ca3af; }

/* Mobile: the rows become cards, so a long subject name must wrap inside its
   chip instead of forcing the whole card (and page) to scroll sideways. */
@media (max-width: 767.98px) {
  .absentee-name-cell {
    min-width: 0;
  }

  .absentee-name-cell__name,
  .absentee-name-cell__kelas {
    overflow-wrap: anywhere;
  }

  .absence-chips {
    gap: 0.25rem;
  }

  .absence-chip {
    max-width: 100%;
    min-width: 0;
    flex-wrap: wrap;
    white-space: normal;
    border-radius: 0.75rem;
  }

  .absence-chip__mapel,
  .absence-chip__meta {
    min-width: 0;
    overflow-wrap: anywhere;
  }
}
/*
 * Form glue for the Admina theme — plain CSS so it also applies on layouts
 * that don't load the Tailwind stylesheet (devise). Pairs with
 * config/initializers/simple_form_tailwind.rb.
 *
 * .form-control / .form-label / .form-select / .form-check-input are already
 * styled by the compiled Admina stylesheet; this file adds the wrapper,
 * error, hint, check-layout and button-variant pieces.
 */

.form-group {
  margin-bottom: 1.25rem;
}

/* simple_form date/time and multi-select inputs render several <select>s in a
   single flex row (see simple_form_tailwind.rb). Let that row wrap so the
   controls stay inside narrow containers — e.g. modals on mobile — instead of
   overflowing the dialog horizontally. */
.form-group.datetime > .flex,
.form-group > .flex.flex-row {
  flex-wrap: wrap;
}

/* 20 / 80 label–input rows (learning activity "Detail KBM") */
.kbm-form .form-group {
  display: grid;
  grid-template-columns: minmax(0, 20%) minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}
.kbm-form .form-actions {
  justify-content: flex-end;
}
.kbm-form .form-group > .form-label {
  margin-bottom: 0;
  padding-top: 0.625rem;
}
/* Compact controls — match the template's small form text */
.kbm-form .form-control,
.kbm-form .form-select {
  font-size: 0.875rem;
}
.doc-form .form-control,
.doc-form .form-select {
  font-size: 0.875rem;
}
.ptk-form .form-control,
.ptk-form .form-select {
  font-size: 0.875rem;
}
.pd-form .form-control,
.pd-form .form-select {
  font-size: 0.875rem;
}
/* Match the peserta didik form's 14px control text (TomSelect included). */
.foul-form .form-control,
.foul-form .form-select,
.foul-form .ts-control,
.foul-form .ts-dropdown {
  font-size: 0.875rem;
}
/* Keep the single date input and the TomSelect selects the same height. */
.foul-form .datetime-input {
  height: 2.5rem;
  padding-top: 0;
  padding-bottom: 0;
}
.foul-form .form-select,
.foul-form .ts-wrapper {
  min-height: 2.5rem;
}
.foul-form .ts-wrapper .ts-control {
  align-items: center;
}
/* Match the template's 14px form text everywhere inside the PKL forms,
   TomSelect widgets included. */
.pkl-form {
  font-size: 0.875rem;
}
.pkl-form .form-control,
.pkl-form .form-select,
.pkl-form .ts-control,
.pkl-form .ts-dropdown {
  font-size: 0.875rem;
}

/* PKL index filter: keep the selects and buttons the same height in one row */
.pkl-filter .form-select,
.pkl-filter .btn {
  height: 2.5rem;
  padding-top: 0;
  padding-bottom: 0;
  font-size: 0.875rem;
}
.pkl-filter .form-select {
  padding-left: 0.875rem;
  padding-right: 2.5rem;
}
.pkl-filter .btn {
  display: inline-flex;
  align-items: center;
  padding-left: 1rem;
  padding-right: 1rem;
}

/* Presence chart filter: stacked on mobile, one row on desktop with matching
   control heights so the inputs and the button line up. */
.presence-filter {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.presence-filter .form-control,
.presence-filter .btn {
  width: 100%;
  height: 2.5rem;
  padding-top: 0;
  padding-bottom: 0;
  font-size: 0.875rem;
}
.presence-filter .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-left: 1rem;
  padding-right: 1rem;
}
@media (min-width: 640px) {
  .presence-filter {
    flex-direction: row;
    align-items: flex-end;
  }
  .presence-filter .form-control,
  .presence-filter .btn {
    width: auto;
  }
}

/* Hide the green "valid" checkmark on the peserta didik form selects */
.pd-form .form-select.is-valid,
.pd-form .form-control.is-valid {
  border-color: #d1d5db;
}
:root.dark .pd-form .form-select.is-valid,
:root.dark .pd-form .form-control.is-valid {
  border-color: #6b7280;
}
.pd-form .ts-wrapper.is-valid,
.pd-form .ts-wrapper.is-valid.single {
  border-color: #d1d5db;
}
.pd-form .ts-wrapper.is-valid.single {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-position: right 0.875rem center;
  background-repeat: no-repeat;
  background-size: 1rem 1rem;
}
:root.dark .pd-form .ts-wrapper.is-valid,
:root.dark .pd-form .ts-wrapper.is-valid.single {
  border-color: #6b7280;
}
/* Neutralise the green "valid" state on the radio inputs too */
.pd-form .form-check-input.is-valid {
  border-color: #d1d5db;
}
.pd-form .form-check-input.is-valid:checked {
  background-color: #487fff;
  border-color: #487fff;
}
:root.dark .pd-form .form-check-input.is-valid {
  border-color: #6b7280;
}

/* Hide the green "valid" checkmark on the PKL form selects */
.pkl-form .form-select.is-valid,
.pkl-form .form-control.is-valid {
  border-color: #d1d5db;
}
:root.dark .pkl-form .form-select.is-valid,
:root.dark .pkl-form .form-control.is-valid {
  border-color: #6b7280;
}
.pkl-form .ts-wrapper.is-valid,
.pkl-form .ts-wrapper.is-valid.single {
  border-color: #d1d5db;
}
.pkl-form .ts-wrapper.is-valid.single {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-position: right 0.875rem center;
  background-repeat: no-repeat;
  background-size: 1rem 1rem;
}
:root.dark .pkl-form .ts-wrapper.is-valid,
:root.dark .pkl-form .ts-wrapper.is-valid.single {
  border-color: #6b7280;
}

/* Hide the green "valid" checkmark on the rombel schedule setting form selects */
.rss-form .form-select.is-valid,
.rss-form .form-control.is-valid {
  border-color: #d1d5db;
}
:root.dark .rss-form .form-select.is-valid,
:root.dark .rss-form .form-control.is-valid {
  border-color: #6b7280;
}
.rss-form .ts-wrapper.is-valid,
.rss-form .ts-wrapper.is-valid.single {
  border-color: #d1d5db;
}
.rss-form .ts-wrapper.is-valid.single {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-position: right 0.875rem center;
  background-repeat: no-repeat;
  background-size: 1rem 1rem;
}
:root.dark .rss-form .ts-wrapper.is-valid,
:root.dark .rss-form .ts-wrapper.is-valid.single {
  border-color: #6b7280;
}

/* All form controls inside a page card use the template's 14px text. */
.admina-page-card .form-control,
.admina-page-card .form-select,
.admina-page-card .ts-control,
.admina-page-card .ts-dropdown {
  font-size: 0.875rem;
}

/* Wali kelas form: keep the PTK / Rombel dropdowns and the No. HP text input
   the same height when laid out in one row (TomSelect's control ships with a
   smaller padding than .form-control/.form-select). */
.wali-kelas-form .form-control,
.wali-kelas-form .form-select,
.wali-kelas-form .ts-wrapper .ts-control {
  min-height: 2.75rem;
}
.wali-kelas-form .form-control,
.wali-kelas-form .form-select {
  padding-top: 0;
  padding-bottom: 0;
}
.wali-kelas-form .ts-wrapper .ts-control {
  display: flex;
  align-items: center;
  padding-top: 0;
  padding-bottom: 0;
  border-radius: 0.5rem;
}

/* Ekstrakurikuler form: give text inputs, selects and TomSelect controls the
   same height so the "Nama Siswa" / "Nilai" and every "Jadwal Latihan" field
   line up in their rows. */
.ekstrakurikuler-form .form-control,
.ekstrakurikuler-form .form-select,
.ekstrakurikuler-form .ts-wrapper,
.ekstrakurikuler-form .ts-wrapper .ts-control {
  min-height: 2.75rem;
  border-radius: 0.5rem;
}
.ekstrakurikuler-form .form-control,
.ekstrakurikuler-form .form-select {
  padding-top: 0;
  padding-bottom: 0;
}
.ekstrakurikuler-form .ts-wrapper .ts-control {
  display: flex;
  align-items: center;
  padding-top: 0;
  padding-bottom: 0;
}

/* Semester form: match the template's 14px form text */
.semester-form {
  font-size: 0.875rem;
}

/* Peserta didik form — simple, sectioned layout */
.pd-section__head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.pd-section__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  flex-shrink: 0;
  border-radius: 0.625rem;
  background-color: #e4f1ff;
  color: #487fff;
  font-size: 1.25rem;
}
.pd-section__title {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
}
.pd-section__desc {
  margin: 0;
  font-size: 0.8125rem;
  color: #6b7280;
}
:root.dark .pd-section__icon {
  background-color: rgba(72, 127, 255, 0.18);
  color: #95c7ff;
}
:root.dark .pd-section__desc {
  color: #9ca3af;
}
.pd-form .form-check-inline {
  margin-right: 1rem;
}

/* Hide the green "valid" state on the document form selects/inputs */
.doc-form .form-select.is-valid,
.doc-form .form-control.is-valid {
  border-color: #d1d5db;
}
:root.dark .doc-form .form-select.is-valid,
:root.dark .doc-form .form-control.is-valid {
  border-color: #6b7280;
}
.doc-form .ts-wrapper.is-valid,
.doc-form .ts-wrapper.is-valid.single {
  border-color: #d1d5db;
}
.doc-form .ts-wrapper.is-valid.single {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-position: right 0.875rem center;
  background-repeat: no-repeat;
  background-size: 1rem 1rem;
}
:root.dark .doc-form .ts-wrapper.is-valid,
:root.dark .doc-form .ts-wrapper.is-valid.single {
  border-color: #6b7280;
}
/* Hide the green "valid" state on selects/inputs in this form */
.kbm-form .form-select.is-valid,
.kbm-form .form-control.is-valid {
  border-color: #d1d5db;
}
:root.dark .kbm-form .form-select.is-valid,
:root.dark .kbm-form .form-control.is-valid {
  border-color: #6b7280;
}

/* TomSelect mirrors the select's `is-valid` class and draws a green checkmark
   next to the chevron — keep only the chevron. */
.kbm-form .ts-wrapper.is-valid,
.kbm-form .ts-wrapper.is-valid.single {
  border-color: #d1d5db;
}
.kbm-form .ts-wrapper.is-valid.single {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-position: right 0.875rem center;
  background-repeat: no-repeat;
  background-size: 1rem 1rem;
}
:root.dark .kbm-form .ts-wrapper.is-valid,
:root.dark .kbm-form .ts-wrapper.is-valid.single {
  border-color: #6b7280;
}

/* TomSelect dark mode — the vendored theme hard-codes dark grey text */
:root.dark .ts-control,
:root.dark .ts-control input,
:root.dark .ts-control .item {
  color: #ffffff;
}
:root.dark .ts-dropdown {
  background-color: #1f2937;
  border-color: #3f4b5b;
  color: #e5e7eb;
}
:root.dark .ts-dropdown .option {
  color: #e5e7eb;
}
:root.dark .ts-dropdown .active {
  background-color: #374151;
  color: #ffffff;
}
@media (max-width: 767.98px) {
  .kbm-form .form-group {
    grid-template-columns: minmax(0, 1fr);
  }
  .kbm-form .form-group > .form-label {
    padding-top: 0;
    margin-bottom: 0.5rem;
  }
  /* Full-width action buttons on mobile */
  .kbm-form .form-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .kbm-form .form-actions .btn {
    width: 100%;
    justify-content: center;
  }
}

/* The compiled Admina form controls only set border-color, but Tailwind's
   preflight resets border-width to 0 — so restore a visible border. */
.form-control,
.form-select,
.form-check-input {
  border-width: 1px;
  border-style: solid;
}

/* Native select chevron (the compiled .form-select ships none) */
.form-select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 2.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.875rem center;
  background-size: 1rem 1rem;
}
:root.dark .form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}

/* Calendar affordance for MCDatepicker-backed date fields (`.date-input`). */
.date-input {
  padding-right: 2.5rem;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.875rem center;
  background-size: 1.125rem 1.125rem;
}
:root.dark .date-input {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
}

/* The Admina base heading style colours MCDatepicker's display headings dark
   (h1 on mobile, h3 on desktop), but they sit on the blue display panel —
   inherit the panel colour instead. */
.mc-display h1,
.mc-display h2,
.mc-display h3,
.mc-display__day,
.mc-display__date,
.mc-display__month,
.mc-display__year {
  color: inherit;
}

/* Admina's base stylesheet colours every bare `span` grey. MCDatepicker wraps
   the month/year labels (the header selects and the month/year grid cells) in
   spans, so they ignored the picker theme: the picked year stayed grey on the
   blue highlight and the header did not follow the dark theme. Let them take
   the colour of their themed cell. */
.mc-calendar span {
  color: inherit;
}

/* No drop shadow on the MCDatepicker panel (mobile and desktop). */
body .mc-calendar,
body .mc-calendar--modal {
  box-shadow: none;
}

/* On desktop the display panel and the picker fill the whole modal, but the
   modal is centred on a half pixel and its own (theme-coloured) background
   bleeds through as a blue seam along the picker's right edge. The mobile
   layout still relies on that background behind the display header. */
@media (min-width: 625px) {
  body .mc-calendar--modal {
    background-color: transparent;
  }
}

.form-control:focus,
.form-select:focus {
  outline: none;
  border-color: #487fff;
  box-shadow: 0 0 0 3px rgba(72, 127, 255, 0.15);
}

/* The compiled Admina stylesheet colours every <span> grey, which overrides
   the button's own colour — let the contents inherit the button colour. */
.btn span,
.btn i {
  color: inherit;
}

/* Boolean "check button" — a checkbox rendered as a clickable pill with a
   tick indicator (used for Lulus / SKL Ditahan). The real checkbox is kept in
   the DOM (visually hidden) so form submission is unchanged. */
.check-toggle {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.check-toggle__label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0.5rem 0.875rem;
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  background-color: #ffffff;
  color: #6b7280;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.25rem;
  cursor: pointer;
  user-select: none;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.check-toggle__label::before {
  content: "";
  width: 1.125rem;
  height: 1.125rem;
  flex-shrink: 0;
  border: 2px solid #d1d5db;
  border-radius: 999px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 0.75rem;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.check-toggle:checked + .check-toggle__label {
  border-color: #86efac;
  background-color: #f0fdf4;
  color: #15803d;
}
.check-toggle:checked + .check-toggle__label::before {
  border-color: #22c55e;
  background-color: #22c55e;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}
.check-toggle:focus-visible + .check-toggle__label {
  outline: 2px solid #487fff;
  outline-offset: 2px;
}
:root.dark .check-toggle__label {
  border-color: #3f4b5b;
  background-color: #1f2937;
  color: #9ca3af;
}
:root.dark .check-toggle:checked + .check-toggle__label {
  border-color: #15803d;
  background-color: rgba(34, 197, 94, 0.15);
  color: #86efac;
}

/* simple_form_for ... .form-inputs / .form-actions convention used across the app */
.form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.form-actions + div,
.form-inputs + .form-actions {
  margin-top: 0.5rem;
}

.form-label {
  display: inline-block;
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: #4b5563;
}

.form-error {
  margin-top: 0.375rem;
  font-size: 0.8125rem;
  color: #dc2626;
}

.form-hint {
  margin-top: 0.375rem;
  font-size: 0.8125rem;
  color: #6b7280;
}

.form-control.is-invalid,
.form-select.is-invalid,
.is-invalid .form-control,
.is-invalid .form-select {
  border-color: #dc2626;
}

/* simple_form flags every untouched field `.is-valid`; drop the green
   validation state (border + TomSelect checkmark) everywhere, modals
   included, so forms only react to real errors. */
/* `body` prefix raises specificity above the vendored tom-select theme, so the
   TomSelect green checkmark is neutralised app-wide (the per-form variants
   below stay for their own font/Font rules). */
body .form-control.is-valid,
body .form-select.is-valid {
  border-color: #d1d5db;
}
:root.dark body .form-control.is-valid,
:root.dark body .form-select.is-valid {
  border-color: #6b7280;
}
body .ts-wrapper.is-valid,
body .ts-wrapper.is-valid.single {
  border-color: #d1d5db;
}
body .ts-wrapper.is-valid.single {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-position: right 0.875rem center;
  background-repeat: no-repeat;
  background-size: 1rem 1rem;
}
:root.dark body .ts-wrapper.is-valid,
:root.dark body .ts-wrapper.is-valid.single {
  border-color: #6b7280;
}
.form-check-input.is-valid {
  border-color: #d1d5db;
}
.form-check-input.is-valid:checked {
  background-color: #487fff;
  border-color: #487fff;
}

/* checkboxes / radios */
.form-check {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.form-check + .form-check {
  margin-top: 0.375rem;
}

.form-check-inline {
  display: inline-flex;
  margin-right: 1rem;
}

.form-check .form-check-input {
  width: 1rem;
  height: 1rem;
  margin: 0;
  flex-shrink: 0;
}

.form-check-label {
  margin-bottom: 0;
  font-weight: 400;
  color: #374151;
}

.form-switch .form-check-input {
  width: 2.25rem;
  height: 1.25rem;
  border-radius: 999px;
}

fieldset.form-group {
  border: 0;
  padding: 0;
  margin: 0 0 1.25rem;
  min-width: 0;
}

fieldset.form-group > legend.form-label {
  float: none;
  width: auto;
  padding: 0;
}

.input-group {
  display: flex;
  align-items: stretch;
}

.input-group > .form-control:not(:first-child) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.input-group > .form-control:not(:last-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

/* Button variants not shipped by the Admina button component.
   `.btn` (base) and `.btn-primary` / `.btn-outline-primary` come from Admina. */
.btn-secondary {
  background-color: #6b7280;
  color: #fff;
}
.btn-secondary:hover { background-color: #4b5563; }

.btn-success {
  background-color: #16a34a;
  color: #fff;
}
.btn-success:hover { background-color: #15803d; }

.btn-danger {
  background-color: #dc2626;
  color: #fff;
}
.btn-danger:hover { background-color: #b91c1c; }

.btn-info {
  background-color: #2563eb;
  color: #fff;
}
.btn-info:hover { background-color: #1d4ed8; }

.btn-warning {
  background-color: #ff9f29;
  color: #fff;
}
.btn-warning:hover { background-color: #f39016; }

.btn-dark {
  background-color: #1f2937;
  color: #fff;
}
.btn-dark:hover { background-color: #111827; }

.btn-light {
  background-color: #f3f4f6;
  color: #1f2937;
}
.btn-light:hover { background-color: #e5e7eb; }

.btn-link {
  background: transparent;
  color: #487fff;
  text-decoration: underline;
  padding: 0;
}

.btn-outline-secondary {
  border: 1px solid #d1d5db;
  color: #4b5563;
  background: transparent;
}
.btn-outline-secondary:hover { background-color: #f3f4f6; }

.btn-outline-danger {
  border: 1px solid #dc2626;
  color: #dc2626;
  background: transparent;
}
.btn-outline-danger:hover { background-color: #dc2626; color: #fff; }

.btn-outline-info {
  border: 1px solid #2563eb;
  color: #2563eb;
  background: transparent;
}
.btn-outline-info:hover { background-color: #2563eb; color: #fff; }

.btn-outline-success {
  border: 1px solid #16a34a;
  color: #16a34a;
  background: transparent;
}
.btn-outline-success:hover { background-color: #16a34a; color: #fff; }

.btn-outline-warning {
  border: 1px solid #ff9f29;
  color: #d97706;
  background: transparent;
}
.btn-outline-warning:hover { background-color: #ff9f29; color: #fff; }

.btn-outline-dark {
  border: 1px solid #1f2937;
  color: #1f2937;
  background: transparent;
}
.btn-outline-dark:hover { background-color: #1f2937; color: #fff; }

/* Soft (tinted) buttons — for action bars */
.btn-soft-primary { background-color: #e4f1ff; color: #1d4ed8; }
.btn-soft-primary:hover { background-color: #cfe3ff; }
.btn-soft-success { background-color: #dcfce7; color: #15803d; }
.btn-soft-success:hover { background-color: #bbf7d0; }
.btn-soft-warning { background-color: #fff9e2; color: #b45309; }
.btn-soft-warning:hover { background-color: #fef3c7; }
.btn-soft-danger { background-color: #fee2e2; color: #b91c1c; }
.btn-soft-danger:hover { background-color: #fecaca; }
.btn-soft-info { background-color: #dbeafe; color: #1d4ed8; }
.btn-soft-info:hover { background-color: #bfdbfe; }

:root.dark .btn-soft-primary { background-color: rgba(72, 127, 255, 0.18); color: #95c7ff; }
:root.dark .btn-soft-primary:hover { background-color: rgba(72, 127, 255, 0.28); }
:root.dark .btn-soft-success { background-color: rgba(22, 163, 74, 0.18); color: #86efac; }
:root.dark .btn-soft-success:hover { background-color: rgba(22, 163, 74, 0.28); }
:root.dark .btn-soft-warning { background-color: rgba(217, 119, 6, 0.18); color: #fcd34d; }
:root.dark .btn-soft-warning:hover { background-color: rgba(217, 119, 6, 0.28); }
:root.dark .btn-soft-danger { background-color: rgba(220, 38, 38, 0.18); color: #fca5a5; }
:root.dark .btn-soft-danger:hover { background-color: rgba(220, 38, 38, 0.28); }
:root.dark .btn-soft-info { background-color: rgba(37, 99, 235, 0.2); color: #93c5fd; }
:root.dark .btn-soft-info:hover { background-color: rgba(37, 99, 235, 0.3); }

.btn-sm {
  padding: 0.4rem 1rem;
  font-size: 0.8125rem;
}

/* Action button that sits on the same row as a form field — match the
   .form-control height/type so the button and the input line up. */
.form-inline-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.625rem;
  padding-top: 0;
  padding-bottom: 0;
  font-size: 0.875rem;
}

/* Materi ajar nested row: stacked on mobile, fields + button on one row from
   the md breakpoint up. */
.materi-ajar-row {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.materi-ajar-row .form-group {
  width: 100%;
  min-width: 0;
  margin-bottom: 0;
}
.materi-ajar-row .form-inline-action {
  align-self: flex-start;
  margin-bottom: 0;
}
@media (min-width: 768px) {
  .materi-ajar-row {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-end;
  }
  .materi-ajar-row .form-group {
    flex: 1 1 0%;
    margin-bottom: 1.25rem;
  }
  .materi-ajar-row .form-inline-action {
    align-self: auto;
    margin-bottom: 1.25rem;
  }
}

.btn.disabled,
.btn:disabled {
  opacity: 0.6;
  pointer-events: none;
}

/* ---------------------------------------------------------------------
   Activity report form (Laporan Kegiatan).

   TomSelect, the native file input and the flatpickr date input all ship
   different heights from `.form-control`, so the controls in each row no
   longer line up. Pin every control to the same box and blend the picker
   widgets into the Admina fields.
   --------------------------------------------------------------------- */
.activity-report-form {
  --ar-control-height: 2.875rem;
}

.activity-report-form .form-control,
.activity-report-form .form-select,
.activity-report-form .ts-wrapper,
.activity-report-form .ts-wrapper .ts-control {
  font-size: 0.875rem;
}

.activity-report-form .form-control,
.activity-report-form .form-select,
.activity-report-form .ts-wrapper {
  min-height: var(--ar-control-height);
}

.activity-report-form .ts-wrapper {
  border-radius: 0.5rem;
}

/* The wrapper owns the border, so keep the inner control 2px shorter. */
.activity-report-form .ts-wrapper .ts-control {
  min-height: calc(var(--ar-control-height) - 2px);
  display: flex;
  align-items: center;
  padding-top: 0;
  padding-bottom: 0;
  border-radius: 0.5rem;
}

/* flatpickr disables free typing via `readonly`; without an override the
   input inherits the muted disabled look and reads as non-interactive. */
.activity-report-form .flatpickr-input[readonly] {
  background-color: #ffffff;
  color: #374151;
  cursor: pointer;
  padding-right: 2.75rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 1.125rem 1.125rem;
}

:root.dark .activity-report-form .flatpickr-input[readonly] {
  background-color: transparent;
  color: #e5e7eb;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
}

/* Document rows: fields and the remove button share one baseline. */
.activity-report-form .nested-fields .form-group {
  margin-bottom: 0;
}

.activity-report-form .nested-fields .btn-icon {
  width: var(--ar-control-height);
  height: var(--ar-control-height);
}

/* Native file input: centre the control and give the browser button a
   proper, theme-matching appearance instead of the OS default. */
.activity-report-form input[type="file"].form-control {
  height: var(--ar-control-height);
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  line-height: calc(var(--ar-control-height) - 0.5rem);
}

.activity-report-form input[type="file"].form-control::file-selector-button {
  margin-right: 0.75rem;
  padding: 0.375rem 0.75rem;
  border: 1px solid #d1d5db;
  border-radius: 0.375rem;
  background-color: #f3f4f6;
  color: #374151;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.activity-report-form input[type="file"].form-control::file-selector-button:hover {
  background-color: #e5e7eb;
}

:root.dark .activity-report-form input[type="file"].form-control::file-selector-button {
  border-color: #4b5563;
  background-color: #374151;
  color: #e5e7eb;
}

:root.dark .activity-report-form input[type="file"].form-control::file-selector-button:hover {
  background-color: #4b5563;
}

/* Detail page documents table: the File column is regular content, not an
   action bar, so undo the shared last-cell action styling used by the mobile
   card view (.responsive-index-table). */
@media (max-width: 767.98px) {
  body .activity-report-documents-table tbody td:last-child {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-top: 0;
    padding-top: 0.45rem !important;
    border-top: 0 !important;
  }

  body .activity-report-documents-table tbody td:last-child::before {
    display: block;
  }
}
/* Kartu Ujian — WYSIWYG A4 preview. Each .a4-sheet is a real 210x297mm sheet
   holding eight cards (2 columns x 4 rows), so the on-screen preview matches
   the printed page. */
.exam-cards-body {
  background-color: #e5e7eb;
}

.a4-sheet {
  box-sizing: border-box;
  width: 210mm;
  min-height: 297mm;
  margin: 0 auto 8mm;
  padding: 8mm;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(4, minmax(0, 1fr));
  gap: 4mm;
  background-color: #ffffff;
  box-shadow: 0 0 0 1px #cbd5e1, 0 10px 30px -12px rgba(15, 23, 42, 0.35);
}
.a4-sheet:last-child {
  margin-bottom: 0;
}

.exam-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border: 0.6px solid #94a3b8;
  border-radius: 2.5mm;
  background-color: #ffffff;
  color: #0f172a;
  font-family: 'Inter', Arial, Helvetica, sans-serif;
}

/* Kop sekolah + logo (no fill — ink-friendly). */
.exam-card__head {
  display: flex;
  align-items: center;
  gap: 2mm;
  padding: 1.1mm 2mm 0.8mm;
}

.exam-card__logo {
  width: 7mm;
  height: 7mm;
  flex: none;
  object-fit: contain;
  background-color: #ffffff;
}

.exam-card__head-text {
  min-width: 0;
  flex: 1 1 auto;
  text-align: center;
}

.exam-card__foundation {
  color: #1e3a8a;
  font-size: 6.4pt;
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1.1;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.exam-card__school {
  color: #0f172a;
  font-size: 7.4pt;
  font-weight: 800;
  line-height: 1.1;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.exam-card__group {
  color: #475569;
  font-size: 5.2pt;
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1.15;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.exam-card__address {
  color: #475569;
  font-size: 5.4pt;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Gold accent rule under the kop, echoing the reference card. */
.exam-card__accent {
  height: 0.5mm;
  background: linear-gradient(90deg, #b45309 0%, #fbbf24 50%, #b45309 100%);
}

/* Title band. */
.exam-card__band {
  padding: 0.8mm 2mm;
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 45%, #fbbf24 100%);
  border-top: 0.25mm solid #b45309;
  border-bottom: 0.25mm solid #b45309;
  color: #1e293b;
  text-align: center;
}

.exam-card__title {
  color: #0f172a;
  font-size: 7pt;
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1.15;
  text-transform: uppercase;
}

.exam-card__subtitle {
  color: #78350f;
  font-size: 5pt;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
}

.exam-card__dot {
  color: #b45309;
}

/* Identity block: name on its own row, then NIS / NISN / Kelas in a 3-up grid. */
.exam-card__ident {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.4mm 2mm;
  padding: 0.9mm 2mm;
  border-bottom: 1px solid #cbd5e1;
}

.exam-card__ident-item {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}

.exam-card__ident-item--wide {
  grid-column: 1 / -1;
  padding-bottom: 0.5mm;
  border-bottom: 1px dashed #e2e8f0;
}

.exam-card__ident-label {
  display: block;
  color: #64748b;
  font-size: 4.6pt;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.1;
}

.exam-card__ident-value {
  display: block;
  color: #0f172a;
  font-size: 6.6pt;
  font-weight: 700;
  line-height: 1.15;
  overflow: hidden;
  text-overflow: ellipsis;
}

.exam-card__ident-value--name {
  font-size: 7.8pt;
  font-weight: 800;
  text-transform: uppercase;
}

/* The body fills the card but the table keeps its natural height, so the rows
   hug the header instead of being stretched down the card. */
.exam-card__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.exam-card__table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  border: 0;
  font-size: 6.8pt;
  line-height: 1.2;
}

/* Clean rule-based table: no outer frame, no vertical grid — only a strong
   header underline plus soft row dividers, so it prints without heavy ink. */
.exam-card__table th,
.exam-card__table td {
  padding: 0.55mm 1.2mm;
  text-align: left;
  vertical-align: middle;
  border: 0;
}

.exam-card__table thead th {
  padding-bottom: 0.5mm;
  background-color: transparent;
  color: #475569;
  font-size: 5.6pt;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-align: center;
  border-bottom: 0.25mm solid #94a3b8;
}

.exam-card__table tbody tr {
  border-bottom: 0.2mm dotted #cbd5e1;
}

.exam-card__table tbody tr:last-child {
  border-bottom: 0;
}

.exam-card__table tbody tr:nth-child(even) {
  background-color: #f8fafc;
}

.exam-card__col-no {
  width: 4mm;
  text-align: center !important;
}

.exam-card__col-date {
  width: 22mm;
}

.exam-card__col-time {
  width: 13mm;
}

.exam-card__col-token {
  width: 15mm;
  text-align: center !important;
}

.exam-card__table td:first-child {
  text-align: center;
  color: #94a3b8;
  font-weight: 600;
  font-size: 6pt;
}

.exam-card__table td {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.exam-card__table td:nth-child(2),
.exam-card__table td:nth-child(3) {
  color: #475569;
  font-size: 6.4pt;
}

.exam-card__mapel {
  color: #0f172a;
  font-weight: 600;
  white-space: normal;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-height: 1.1;
}

.exam-card__table td.exam-card__token {
  color: #1e3a8a;
  font-family: 'Courier New', monospace;
  font-size: 7pt;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-align: center;
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
}

.exam-card__empty,
.exam-card__more {
  color: #64748b;
  font-size: 6.4pt;
  font-style: italic;
  text-align: center !important;
  padding: 1.6mm !important;
}

/* Footer: verification chip on the left, signature block on the right. */
.exam-card__foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2mm;
  padding: 0.6mm 2mm 1mm;
  border-top: 1px solid #cbd5e1;
}

.exam-card__foot-left {
  display: flex;
  flex-direction: column;
  gap: 0.4mm;
  min-width: 0;
}

.exam-card__status {
  display: inline-block;
  width: max-content;
  padding: 0.25mm 1.4mm;
  border: 0.3mm solid #047857;
  border-radius: 2mm;
  color: #047857;
  font-size: 4.4pt;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.exam-card__note {
  color: #94a3b8;
  font-size: 4.2pt;
  line-height: 1.15;
}

.exam-card__sign {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  line-height: 1.1;
}

.exam-card__sign-date {
  color: #475569;
  font-size: 4.4pt;
}

.exam-card__sign-title {
  color: #475569;
  font-size: 4.4pt;
}

.exam-card__sign-name {
  margin-top: 2.6mm;
  padding-top: 0.3mm;
  border-top: 0.2mm solid #64748b;
  color: #0f172a;
  font-size: 5.2pt;
  font-weight: 700;
  white-space: nowrap;
  max-width: 34mm;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media screen and (max-width: 820px) {
  .a4-sheet {
    transform: scale(0.82);
    transform-origin: top center;
  }
}

@media print {
  .exam-cards-body {
    background-color: #ffffff !important;
  }

  .admina-page-card {
    border: 0 !important;
    background-color: transparent !important;
    box-shadow: none !important;
  }
  .admina-page-card > header {
    display: none !important;
  }
  .admina-page-card > div {
    padding: 0 !important;
  }

  .a4-sheet {
    box-shadow: none !important;
    margin: 0;
    break-after: page;
    page-break-after: always;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .a4-sheet:last-child {
    break-after: auto;
    page-break-after: auto;
  }

  .exam-card {
    border-color: #94a3b8 !important;
  }
  .exam-card__band {
    background: linear-gradient(135deg, #fef9e7 0%, #fdf0c4 45%, #fde9a8 100%) !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .exam-card__title,
  .exam-card__subtitle,
  .exam-card__dot {
    color: #000000 !important;
  }
  .exam-card__foundation,
  .exam-card__group {
    color: #000000 !important;
  }
  .exam-card__accent {
    background: linear-gradient(90deg, #d1d5db 0%, #e5e7eb 50%, #d1d5db 100%) !important;
  }
  .exam-card__table thead th {
    background-color: transparent !important;
    color: #000000 !important;
  }
  .exam-card__table tbody tr:nth-child(even) {
    background-color: transparent !important;
  }
  .exam-card__table tbody tr {
    border-bottom-color: #cbd5e1 !important;
  }
  .exam-card__school,
  .exam-card__address,
  .exam-card__ident strong,
  .exam-card__table tbody td,
  .exam-card__table tbody td strong,
  .exam-card__mapel,
  .exam-card__token {
    color: #000000 !important;
  }
}
/*
 * Kartu Pelajar (Student ID card) — landscape CR80, 85.6mm x 54mm.
 * Front (identity + barcode) and back (tata tertib + signature).
 * The popup renders the card at its true physical size and can be zoomed.
 */
.id-card-print-area {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  align-items: flex-start;
}

.id-card {
  --id-blue-1: #0b3b8f;
  --id-blue-2: #1d64d8;
  --id-gold: #f5b301;
  --id-ink: #0f2557;
  --id-muted: #64748b;
  --id-line: #e2e8f0;
  --id-soft: #f4f7fb;
  position: relative;
  display: flex;
  flex-direction: column;
  width: 85.6mm;
  height: 54mm;
  overflow: hidden;
  border-radius: 3mm;
  background: #ffffff;
  color: var(--id-ink);
  font-family: 'Outfit', 'Inter', Arial, Helvetica, sans-serif;
  box-shadow: 0 12px 30px rgba(15, 37, 87, 0.22);
}

/* ---------- Header ---------- */
.id-card__head {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  height: 14mm;
  padding: 0 3mm;
  background: #ffffff;
  overflow: hidden;
}

/* Angled blue panel on the right holding the card title. */
.id-card__head::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 46%;
  background: linear-gradient(135deg, var(--id-blue-2) 0%, var(--id-blue-1) 100%);
  clip-path: polygon(20% 0, 100% 0, 100% 100%, 0 100%);
}

/* Orange accent line (solid gradient, no stripes). */
.id-card__head::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1.1mm;
  background: linear-gradient(90deg, #ff8a00 0%, #ffb020 45%, #ffc93c 100%);
}

.id-card__brand {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 2mm;
  width: 50%;
  min-width: 0;
}

/* School logo: no circle / border, blends with the white header. */
.id-card__logo {
  flex: 0 0 auto;
  width: 10mm;
  height: 10mm;
  object-fit: contain;
}

.id-card__brand-text {
  min-width: 0;
}

.id-card__stars {
  color: var(--id-gold);
  font-size: 8px;
  letter-spacing: 1.2px;
  line-height: 1;
}

.id-card__school {
  margin-top: 0.3mm;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.3px;
  line-height: 1.05;
  color: var(--id-blue-1);
  white-space: nowrap;
}

.id-card__school-sub {
  font-size: 5.6px;
  letter-spacing: 0.5px;
  color: var(--id-muted);
  white-space: nowrap;
}

.id-card__badge {
  position: relative;
  z-index: 1;
  margin-left: auto;
  text-align: right;
  line-height: 1;
}

.id-card__badge-title {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.6px;
  color: #ffffff;
}

.id-card__badge-sub {
  margin-top: 0.5mm;
  font-size: 5px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--id-gold);
}

/* Back header is the flipped front header: blue panel moves to the left,
   brand sits on the right, and the logo is rendered smaller. */
.id-card__head--back {
  flex-direction: row-reverse;
  align-items: center;
}

.id-card__head--back::before {
  right: auto;
  left: 0;
  background: linear-gradient(225deg, var(--id-blue-2) 0%, var(--id-blue-1) 100%);
  clip-path: polygon(0 0, 80% 0, 100% 100%, 0 100%);
}

.id-card__head--back .id-card__badge {
  margin-left: 0;
  margin-right: auto;
  text-align: left;
}

.id-card__head--back .id-card__brand {
  flex-direction: row-reverse;
  align-items: center;
  width: auto;
}

.id-card__head--back .id-card__brand-text {
  text-align: right;
}

.id-card__head--back .id-card__logo {
  width: 6mm;
  height: 6mm;
}

/* ---------- Footer (white text) ---------- */
.id-card__foot {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2mm;
  height: 4.8mm;
  padding: 0 3mm;
  background: linear-gradient(135deg, var(--id-blue-1) 0%, var(--id-blue-2) 100%);
  color: #ffffff;
  font-size: 5.4px;
  letter-spacing: 0.2px;
}

.id-card__foot::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 0.6mm;
  background: linear-gradient(90deg, #ff8a00 0%, #ffb020 52%, #ffc93c 100%);
}

.id-card__foot-left {
  display: flex;
  align-items: center;
  gap: 1.5mm;
  min-width: 0;
}

.id-card__foot-school {
  font-weight: 800;
  color: #ffffff;
  white-space: nowrap;
}

.id-card__foot-dot {
  flex: 0 0 auto;
  width: 0.9mm;
  height: 0.9mm;
  border-radius: 50%;
  background: #ffb020;
}

.id-card__foot-npsn {
  color: #ffffff;
  white-space: nowrap;
}

.id-card__foot-note {
  color: #ffffff;
  white-space: nowrap;
}

/* ---------- Body (front) ---------- */
.id-card__body {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 2mm 3mm;
  background-color: #ffffff;
  background-image: linear-gradient(155deg, #ffffff 0%, #f1f7ff 48%, #e2edff 100%);
  overflow: hidden;
}

/* Transparent decorative elements on the light gradient background. */
.id-card__body::before {
  content: "";
  position: absolute;
  top: -9mm;
  right: -7mm;
  width: 32mm;
  height: 32mm;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(29, 100, 216, 0.18) 0%, rgba(29, 100, 216, 0) 68%);
  pointer-events: none;
}

.id-card__body::after {
  content: "";
  position: absolute;
  left: -12mm;
  bottom: -13mm;
  width: 46mm;
  height: 24mm;
  background: linear-gradient(120deg, rgba(245, 179, 1, 0.24) 0%, rgba(245, 179, 1, 0) 68%);
  transform: rotate(-14deg);
  pointer-events: none;
}

.id-card__name {
  position: relative;
  z-index: 1;
  width: 100%;
  padding-bottom: 0.8mm;
  border-bottom: 0.4mm solid var(--id-line);
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: -0.2px;
  line-height: 1.1;
  color: var(--id-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.id-card__main {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 3.5mm;
  flex: 1 1 auto;
  min-height: 0;
  margin-top: 1.6mm;
}

.id-card__photo {
  position: relative;
  flex: 0 0 16mm;
  width: 16mm;
  height: 22mm;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 1.6mm;
  background: #eef2f8;
  border: 0.8mm solid #ffffff;
  box-shadow: 0 0 0 0.25mm var(--id-line), 0 2px 6px rgba(15, 37, 87, 0.15);
}

.id-card__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.id-card__photo i {
  font-size: 22px;
  color: #b9c4d8;
}

.id-card__photo--zoomable {
  cursor: zoom-in;
}

.id-card__zoom-badge {
  position: absolute;
  right: 0.6mm;
  bottom: 0.6mm;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4.4mm;
  height: 4.4mm;
  border-radius: 50%;
  background: rgba(15, 37, 87, 0.65);
  color: #ffffff;
  font-size: 3mm;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.id-card__photo--zoomable:hover .id-card__zoom-badge {
  opacity: 1;
}

.id-card__fields {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1.5mm;
  padding-top: 0.4mm;
}

.id-card__field {
  display: flex;
  align-items: baseline;
  gap: 1mm;
  font-size: 7.4px;
  line-height: 1.15;
}

.id-card__field-label {
  flex: 0 0 9.5mm;
  color: var(--id-muted);
  font-size: 5.8px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

.id-card__field-value {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 600;
  letter-spacing: -0.1px;
  color: var(--id-ink);
  word-break: break-word;
}

.id-card__field-value--capitalize {
  text-transform: capitalize;
}

.id-card__qr {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6mm;
}

/* Modern barcode frame: pronounced rounded corners, wide margin + soft shadow. */
.id-card__qr-img {
  width: 17mm;
  height: 17mm;
  padding: 1.2mm;
  overflow: hidden;
  border-radius: 2.6mm;
  border: 0.3mm solid rgba(29, 100, 216, 0.18);
  background: linear-gradient(150deg, #ffffff 0%, #f2f7ff 100%);
  box-shadow: 0 1.2mm 3mm rgba(15, 37, 87, 0.12);
}

.id-card__qr-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 1.2mm;
}

.id-card__qr-label {
  padding: 0.3mm 2mm;
  border-radius: 2mm;
  background: rgba(29, 100, 216, 0.12);
  color: var(--id-blue-1);
  font-size: 5px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}

.id-card__qr-code {
  display: inline-flex;
  align-items: center;
  color: var(--id-ink);
  font-family: 'Courier New', monospace;
  font-size: 5.4px;
  font-weight: 700;
  letter-spacing: 1px;
}

/* Colored dot marker rendered next to the card code (not inside the text). */
.id-card__code-dot {
  display: inline-block;
  width: 1.4mm;
  height: 1.4mm;
  margin-right: 0.8mm;
  border-radius: 50%;
  background: #22c55e;
  vertical-align: middle;
}

/* ---------- Body (back) ---------- */
.id-card__body--back {
  padding: 1.8mm 3mm;
  /* Mirror the front background: gradient direction + decorative shapes. */
  background-image: linear-gradient(205deg, #ffffff 0%, #f1f7ff 48%, #e2edff 100%);
}

.id-card__body--back::before {
  right: auto;
  left: -7mm;
}

.id-card__body--back::after {
  left: auto;
  right: -12mm;
  transform: rotate(14deg);
}

.id-card__terms-title {
  position: relative;
  z-index: 1;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.3px;
  color: var(--id-ink);
  margin-bottom: 0.8mm;
}

.id-card__terms {
  position: relative;
  z-index: 1;
  margin: 0;
  padding-left: 4mm;
  list-style: disc outside;
  font-size: 6px;
  line-height: 1.22;
  color: #334155;
}

.id-card__terms li {
  margin-bottom: 0.15mm;
  padding-left: 0.4mm;
}

.id-card__terms li::marker {
  color: #ffb020;
  font-size: 0.9em;
}

.id-card__back-foot {
  position: relative;
  z-index: 1;
  margin-top: auto;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 3mm;
  padding-top: 1mm;
  border-top: 0.2mm solid var(--id-line);
}

.id-card__contact {
  color: var(--id-muted);
  font-size: 5.2px;
  line-height: 1.25;
}

.id-card__contact-title {
  margin-bottom: 0.2mm;
  color: var(--id-ink);
  font-size: 6px;
  font-weight: 800;
}

/* Digital signature (no scan/handwritten signature). */
.id-card__digital {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.6mm;
  text-align: right;
}

.id-card__digital-seal {
  display: inline-flex;
  align-items: center;
  gap: 0.7mm;
  padding: 0.6mm 1.8mm;
  border-radius: 3mm;
  background: linear-gradient(135deg, #16a34a 0%, #22c55e 100%);
  color: #ffffff;
  font-size: 5.2px;
  font-weight: 800;
  letter-spacing: 0.5px;
  box-shadow: 0 0.8mm 2mm rgba(22, 163, 74, 0.28);
}

.id-card__digital-seal span,
.id-card__digital-seal i {
  color: #ffffff;
}

.id-card__digital-seal i {
  font-size: 3mm;
}

.id-card__digital-meta {
  display: flex;
  align-items: center;
  gap: 1.2mm;
  color: var(--id-muted);
  font-size: 5px;
}

.id-card__digital-dot {
  width: 0.8mm;
  height: 0.8mm;
  border-radius: 50%;
  background: #ffb020;
}

.id-card__digital-note {
  color: var(--id-muted);
  font-size: 4.6px;
  letter-spacing: 0.2px;
}

.id-card__digital-code {
  display: inline-flex;
  align-items: center;
  color: var(--id-ink);
  font-family: 'Courier New', monospace;
  font-size: 5px;
  font-weight: 700;
  letter-spacing: 1px;
}

/* ---------- Photo zoom (preview) ---------- */
.id-card-zoom {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: rgba(15, 23, 42, 0.8);
  cursor: zoom-out;
}

.id-card-zoom img {
  max-width: min(90vw, 420px);
  max-height: 85vh;
  border-radius: 0.5rem;
  background: #ffffff;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}

/* ---------- Popup sizing ---------- */
.id-card-modal .admina-modal__body {
  padding: 0.75rem;
  background: #eef2f7;
}

.id-card-modal .admina-modal__dialog {
  background: transparent;
  border: 0;
  box-shadow: none;
}

.id-card-modal .id-card-actions {
  margin-bottom: 0.6rem;
}

/* ---------- Print ---------- */
/* NOTE: the card's own page size (85.6mm x 54mm) is declared inside the card
   modal partial (id_card.html.slim), NOT here. A global @page rule leaks into
   every other print preview in the app (student list, PTK, etc.) and forces
   them to card size instead of A4. */
@media print {
  * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  .id-card-print-area {
    display: block !important;
    gap: 0 !important;
  }

  .id-card {
    margin: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    break-after: page;
    page-break-after: always;
  }

  .id-card:last-child {
    break-after: auto;
    page-break-after: auto;
  }
}

/* ---------- Bulk A4 sheet (cetak kartu per kelas) ---------- */
.id-cards-sheet {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6mm;
  overflow-x: auto;
}

.id-cards-page {
  display: grid;
  grid-template-columns: repeat(2, 85.6mm);
  grid-auto-rows: 54mm;
  column-gap: 4mm;
  row-gap: 2mm;
  justify-content: center;
  align-content: start;
  break-after: page;
  page-break-after: always;
}

.id-cards-page:last-child {
  break-after: auto;
  page-break-after: auto;
}

/* Cell is exactly the original card size (85.6 x 54 mm); the dashed cut line is
   drawn on top of the edge so it does not change the card dimensions. */
.id-card-cell {
  position: relative;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 85.6mm;
  height: 54mm;
}

.id-card-cell::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 0.2mm dashed #94a3b8;
  pointer-events: none;
}

.id-card-cell .id-card-print-area {
  gap: 0;
}

@media print {
  .id-cards-card {
    border: 0 !important;
  }

  .id-cards-card > header {
    display: none !important;
  }

  .id-cards-card > .id-cards-body {
    padding: 0 !important;
  }

  .id-cards-sheet {
    gap: 0;
    overflow: visible;
  }

  .id-cards-page {
    column-gap: 4mm;
    row-gap: 2mm;
    break-after: page;
    page-break-after: always;
  }

  .id-cards-page:last-child {
    break-after: auto;
    page-break-after: auto;
  }

  .id-cards-page .id-card {
    break-after: auto !important;
    page-break-after: auto !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  .id-card-cell::after {
    border: 0.2mm dashed #64748b;
  }
}

/* ---------- Print options toolbar ---------- */
.id-cards-field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.id-cards-field__label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--id-muted);
}

.id-cards-field__control {
  position: relative;
}

.id-cards-field__icon {
  position: absolute;
  top: 50%;
  left: 0.7rem;
  transform: translateY(-50%);
  font-size: 1rem;
  color: var(--id-blue-2);
  pointer-events: none;
}

.id-cards-field__control .form-select {
  min-width: 17rem;
  padding-left: 2.2rem;
  font-weight: 600;
}

/* ---------- Loading progress bar (top of page) ---------- */
.id-cards-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 80;
  height: 3px;
  overflow: hidden;
  background: rgba(29, 100, 216, 0.15);
}

.id-cards-progress__bar {
  height: 100%;
  width: 40%;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(90deg, var(--id-blue-2) 0%, var(--id-gold) 100%);
  animation: id-cards-progress 1.1s ease-in-out infinite;
}

@keyframes id-cards-progress {
  0% { transform: translateX(-110%); }
  100% { transform: translateX(360%); }
}

/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */

@import "trix/dist/trix.css";
@import "actiontext";

html {
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
}

body {
  height: auto !important;
  min-height: 100%;
  overflow: visible;
}

.floating-bottom{
  position: fixed; bottom: 0
}

.w-0 {
  width: 0%;
}

.label {
  width: 220px !important;
  min-width: 150px;
  font-weight: bold;
}

.value {
  flex: 1;
}

.card-group-resume {
  border: 1.5px solid #e0e6ed;
  border-radius: 10px;
}

.bg-soft-blue {
  background-color: #eff6ff !important;
  border: none !important;
}

.bg-soft-blue-primary{
  background-color: #cfe2ff;
  border: none;
}
.bg-soft-yellow {
  background-color: #fff3cb !important;
}

.tabel-ramadhan table th,
.tabel-ramadhan table td {
  padding: 0.5rem !important;
}

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

.semester-switcher {
  max-width: 100%;
  min-width: 0;
}

.peserta-didik-index-toolbar .filtered-list-search {
  margin-bottom: 0;
}

.peserta-didik-index-toolbar .input-group > .form-control,
.index-search-field .form-control {
  min-width: 0;
}

.index-search-field {
  position: relative;
}

.index-search-field .form-control {
  padding-right: 2.5rem;
}

.index-search-clear {
  -webkit-appearance: none;
  align-items: center;
  appearance: none;
  background: transparent;
  border: 0;
  color: #6c757d;
  cursor: pointer;
  display: inline-flex;
  font-size: 1rem;
  height: 1rem;
  justify-content: center;
  line-height: 1rem;
  margin: 0;
  padding: 0;
  position: absolute;
  right: 0.625rem;
  text-decoration: none;
  top: calc(50%) !important;
  transform: translateY(-50%);
  width: 1rem;
}

.index-search-clear:hover {
  color: #212529;
}

.peserta-didik-toolbar-card {
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 0.75rem;
  height: 100%;
  padding: 0.75rem 1rem;
}

.peserta-didik-toolbar-label {
  color: #6c757d;
  font-size: 0.75rem;
  margin-bottom: 0.25rem;
  text-transform: uppercase;
}

.peserta-didik-toolbar-value {
  color: #212529;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.2;
}

.peserta-didik-toolbar-card label {
  color: #6c757d;
  display: block;
  font-size: 0.75rem;
  margin-bottom: 0.25rem;
  text-transform: uppercase;
}

.peserta-didik-toolbar-card .limit-page-dropdown {
  min-width: 0;
}

.peserta-didik-mobile-card {
  border: 1px solid #e9ecef;
  border-radius: 1rem;
  box-shadow: 0 0.125rem 0.5rem rgba(31, 45, 61, 0.08);
}

.peserta-didik-mobile-card .card-title {
  color: #212529;
  font-size: 1rem;
  font-weight: 700;
}

.peserta-didik-mobile-meta-label {
  color: #6c757d;
  font-size: 0.75rem;
  margin-bottom: 0.15rem;
  text-transform: uppercase;
}

.peserta-didik-mobile-meta-value {
  color: #212529;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.3;
}

.learning-presence-status-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.learning-presence-status-btn {
  min-width: 2.25rem;
  align-items: center;
  justify-content: center;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.learning-presence-status-btn.active {
  box-shadow: 0 0 0 0.2rem rgba(67, 97, 238, 0.15);
}

@media (max-width: 767.98px) {
  .peserta-didik-index-toolbar .input-group {
    flex-wrap: nowrap;
  }

  .peserta-didik-toolbar-card {
    padding: 0.75rem;
  }

  .responsive-index-table thead {
    display: none;
  }

  .responsive-index-table,
  .responsive-index-table tbody,
  .responsive-index-table tr,
  .responsive-index-table td {
    display: block;
    width: 100%;
  }

  .responsive-index-table tbody tr {
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 1rem;
    box-shadow: 0 0.125rem 0.5rem rgba(31, 45, 61, 0.08);
    margin-bottom: 0.875rem;
    padding: 0.5rem 0.875rem;
  }

  .responsive-index-table tbody td {
    align-items: flex-start;
    border: 0 !important;
    display: flex;
    gap: 0.625rem;
    justify-content: space-between;
    padding: 0.45rem 0 !important;
    text-align: right;
    white-space: normal !important;
  }

  .responsive-index-table tbody td::before {
    color: #6c757d;
    content: attr(data-label);
    flex: 0 0 34%;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-align: left;
    text-transform: uppercase;
  }

  .responsive-index-table tbody td.text-center {
    text-align: right !important;
  }

  /* Columns marked as hidden on the mobile card layout (e.g. the row number). */
  .responsive-index-table tbody td.dt-hide-mobile {
    display: none !important;
  }

  /* Centred datatable controls (length, search, pagination) */
  .dataTables_wrapper .dt-header,
  .dataTables_wrapper .dt-footer {
    justify-content: center;
    text-align: center;
  }
  .dataTables_wrapper .dataTables_length,
  .dataTables_wrapper .dataTables_filter,
  .dataTables_wrapper .dataTables_info,
  .dataTables_wrapper .dataTables_paginate {
    width: 100%;
    text-align: center;
  }
  .dataTables_wrapper .dataTables_length label,
  .dataTables_wrapper .dataTables_filter label {
    justify-content: center;
    width: 100%;
  }
  .dataTables_wrapper .dataTables_filter input {
    min-width: 0;
    width: 100%;
  }
  .dataTables_wrapper .dataTables_paginate {
    justify-content: center;
  }

  /* Nothing may overflow the mobile datatable */
  .dataTables_wrapper,
  .dataTables_wrapper .dt-header,
  .dataTables_wrapper .dt-footer,
  .dataTables_wrapper .dataTables_length,
  .dataTables_wrapper .dataTables_filter,
  .dataTables_wrapper .dataTables_info,
  .dataTables_wrapper .dataTables_paginate {
    max-width: 100%;
    min-width: 0;
  }
  .dataTables_wrapper .dataTables_length label,
  .dataTables_wrapper .dataTables_filter label {
    white-space: normal;
    max-width: 100%;
  }
  .dataTables_wrapper .dataTables_paginate {
    flex-wrap: wrap;
  }
  .responsive-index-table,
  .responsive-index-table tbody,
  .responsive-index-table tr,
  .responsive-index-table td {
    max-width: 100%;
    min-width: 0;
    overflow-wrap: anywhere;
  }
  .responsive-index-table tbody td > * {
    max-width: 100%;
    min-width: 0;
    overflow-wrap: anywhere;
  }

  /* Row actions: a full-width bar pinned to the bottom of the mobile card */
  .responsive-index-table tbody td:last-child {
    display: block;
    margin-top: 0.25rem;
    padding-top: 0.75rem !important;
    border-top: 1px solid #f3f4f6 !important;
  }

  .responsive-index-table tbody td:last-child::before {
    display: none;
  }

  .responsive-index-table tbody td:last-child .btn-group,
  .responsive-index-table tbody td:last-child .action-btns {
    display: flex;
    width: 100%;
    max-width: none;
    gap: 0.5rem;
    justify-content: space-between;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background-color: transparent;
    box-shadow: none;
  }

  .responsive-index-table tbody td:last-child .btn-group > .btn,
  .responsive-index-table tbody td:last-child .action-btns > .btn {
    flex: 1 1 0;
    width: auto;
    height: 2.5rem;
    justify-content: center;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    background-color: #fff;
  }

  :root.dark .responsive-index-table tbody td:last-child .btn-group > .btn,
  :root.dark .responsive-index-table tbody td:last-child .action-btns > .btn {
    border-color: #3f4b5b;
    background-color: #1f2937;
  }

  /* PKL index card: right-align the stacked name/company/date values and let
     the action buttons fill the card width (the desktop rule pins the action
     cell to 1% width). */
  .responsive-index-table.pkl-index-table tbody td > .pkl-cell {
    flex: 1 1 auto;
    text-align: right;
  }
  .responsive-index-table.pkl-index-table tbody td .pkl-cell__name,
  .responsive-index-table.pkl-index-table tbody td .pkl-cell__sub {
    text-align: right;
  }
  .responsive-index-table.pkl-index-table tbody td .pkl-status__action {
    text-align: right;
  }
  .responsive-index-table.pkl-index-table tbody td:last-child {
    width: auto;
  }

  /* PKL page: header actions go full-width on mobile. */
  .pkl-page header .btn {
    width: 100%;
    justify-content: center;
  }

  /* Penanganan Siswa list: mobile card redesign. The date becomes the card
     title, the student count a soft pill, and Masalah/Penanganan/Link render
     as stacked labelled blocks with the action row pinned to the bottom. */
  .responsive-index-table.student-cares-table tbody tr {
    border-radius: 0.75rem;
    padding: 0.875rem 1rem;
  }

  /* The desktop column rule pins columns 1/2/3/6/7 to `width: 1%`; on the
     stacked card every cell must fill the width instead (otherwise the date
     and link text collapse to one character per line). */
  .responsive-index-table.student-cares-table tbody td {
    width: 100% !important;
  }

  /* Row number is redundant on a stacked card. */
  .responsive-index-table.student-cares-table tbody td[data-label="No"] {
    display: none;
  }

  /* Date = card title. */
  .responsive-index-table.student-cares-table tbody td[data-label="Tanggal"] {
    display: block;
    padding: 0 0 0.625rem !important;
    border-bottom: 1px solid #f3f4f6;
    margin-bottom: 0.625rem;
    text-align: left;
    color: #111827;
    font-size: 0.9375rem;
    font-weight: 700;
  }
  .responsive-index-table.student-cares-table tbody td[data-label="Tanggal"]::before {
    display: none;
  }

  /* Student count = pill, left aligned. */
  .responsive-index-table.student-cares-table tbody td[data-label="Jumlah Siswa"] {
    display: block;
    padding: 0 0 0.625rem !important;
    text-align: left;
  }
  .responsive-index-table.student-cares-table tbody td[data-label="Jumlah Siswa"]::before {
    display: none;
  }

  /* Masalah / Penanganan / Link = stacked labelled blocks. */
  .responsive-index-table.student-cares-table tbody td[data-label="Masalah"],
  .responsive-index-table.student-cares-table tbody td[data-label="Penanganan"],
  .responsive-index-table.student-cares-table tbody td[data-label="Link"] {
    display: block;
    padding: 0.375rem 0 !important;
    text-align: left;
  }
  .responsive-index-table.student-cares-table tbody td[data-label="Masalah"]::before,
  .responsive-index-table.student-cares-table tbody td[data-label="Penanganan"]::before,
  .responsive-index-table.student-cares-table tbody td[data-label="Link"]::before {
    display: block;
    flex: none;
    margin-bottom: 0.125rem;
    color: #9ca3af;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }
  .responsive-index-table.student-cares-table tbody td[data-label="Masalah"] > div,
  .responsive-index-table.student-cares-table tbody td[data-label="Penanganan"] > div {
    color: #374151;
    font-size: 0.875rem;
    line-height: 1.45;
  }

  /* Actions: bottom bar, right aligned. */
  .responsive-index-table.student-cares-table tbody td:last-child {
    border-top: 1px solid #f3f4f6 !important;
  }
  .responsive-index-table.student-cares-table tbody td:last-child .btn-group {
    justify-content: flex-end;
    gap: 0.5rem;
  }

  :root.dark .responsive-index-table.student-cares-table tbody tr {
    background-color: #273142;
    border-color: #3f4b5b;
  }
  :root.dark .responsive-index-table.student-cares-table tbody td[data-label="Tanggal"] {
    color: #ffffff;
    border-bottom-color: #3f4b5b;
  }
  :root.dark .responsive-index-table.student-cares-table tbody td[data-label="Masalah"] > div,
  :root.dark .responsive-index-table.student-cares-table tbody td[data-label="Penanganan"] > div {
    color: #d1d5db;
  }
  :root.dark .responsive-index-table.student-cares-table tbody td:last-child {
    border-top-color: #3f4b5b !important;
  }

  /* Empty DataTables message ("Tidak ada Informasi"): span the full card
     width and centre, instead of the default label/value flex row. Placed
     last so it also wins over the generic `td:last-child` rule. */
  .responsive-index-table tbody td.dataTables_empty {
    display: block;
    width: 100% !important;
    margin-top: 0;
    padding: 1.25rem 0.5rem !important;
    border-top: 0 !important;
    text-align: center;
    color: #6b7280;
  }

  .responsive-index-table tbody td.dataTables_empty::before {
    content: none;
  }

  :root.dark .responsive-index-table tbody td.dataTables_empty {
    color: #9ca3af;
  }

  .learning-activity-action-buttons .btn {
    width: 100%;
  }

  .learning-presence-status-group {
    justify-content: flex-end;
  }

  /* KBM per-student presence card (learning activity show page). Drop the
     redundant row number, keep the name on the right as the card title, let
     the absence status buttons fill the row and push the Catatan action to
     the right edge. */
  .learning-presences-table tbody td[data-label="No"] {
    display: none;
  }

  .learning-presences-table tbody td[data-label="Nama"] {
    color: #111827;
    font-weight: 700;
    text-align: right;
  }

  :root.dark .learning-presences-table tbody td[data-label="Nama"] {
    color: #ffffff;
  }

  .learning-presences-table tbody td[data-label="Status"]::before {
    display: none;
  }

  .learning-presences-table tbody td[data-label="Status"] > .learning-presence-status-builder {
    width: 100%;
  }

  .learning-presences-table tbody td[data-label="Status"] .learning-presence-status-group {
    width: 100%;
    justify-content: space-between;
  }

  .learning-presences-table tbody td[data-label="Status"] .learning-presence-status-btn {
    flex: 1 1 0;
  }

  .learning-presences-table tbody td[data-label="Catatan"] .learning-presence-catatan-group {
    width: 100%;
    justify-content: space-between;
  }
}

.ptk-card {
  border: 1px solid #e9ecef;
  border-radius: 1rem;
  box-shadow: 0 0.125rem 0.5rem rgba(31, 45, 61, 0.08);
  transition: box-shadow 0.2s ease;
}

.ptk-card:hover {
  box-shadow: 0 0.25rem 1rem rgba(31, 45, 61, 0.12);
}

.ptk-card .card-title {
  color: #212529;
  font-size: 1rem;
  font-weight: 700;
}

.ptk-card-meta-label {
  color: #6c757d;
  font-size: 0.75rem;
  margin-bottom: 0.15rem;
  text-transform: uppercase;
}

.ptk-card-meta-value {
  color: #212529;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.3;
}

/* Phone numbers rendered as WhatsApp deep links (wali kelas, etc.). */
.whatsapp-link {
  align-items: center;
  display: inline-flex;
  gap: 0.3rem;
  color: #16a34a;
  font-weight: 600;
}
.whatsapp-link:hover {
  text-decoration: underline;
}
:root.dark .whatsapp-link {
  color: #4ade80;
}

/* Collapse toggle: rotate the caret when the region is collapsed. */
[data-action~="collapse#toggle"] i.ph-caret-down {
  transition: transform 0.15s ease;
}
[data-action~="collapse#toggle"][aria-expanded="false"] i.ph-caret-down {
  transform: rotate(-90deg);
}

/* Bank Soal: auto-number questions and answer choices (survives cocoon
   add/remove without server-side indexes). */
.question-list {
  counter-reset: question-number;
}
.question-list > .nested-fields {
  counter-increment: question-number;
}
.question-number::before {
  content: "Soal " counter(question-number);
}
.answer-choices-container {
  counter-reset: answer-choice;
}
.answer-choices-container > .nested-fields {
  counter-increment: answer-choice;
}
.answer-choice-letter::before {
  content: counter(answer-choice, upper-alpha);
}

/* Question number reflects whether a correct answer is set: green = answered,
   red = still missing an answer. */
.question-number--answered { background-color: #16a34a; }
.question-number--empty { background-color: #dc2626; }

/* Clear separator between questions in the list. */
.question-list > .nested-fields {
  border-bottom: 1px solid #94a3b8;
}
.question-list > .nested-fields:last-child {
  border-bottom: 0;
}
:root.dark .question-list > .nested-fields {
  border-bottom-color: #64748b;
}

/* Bank Soal: keep the "Nama Group" input and the "Materi Ajar" TomSelect the
   same height. */
.group-field.form-control {
  height: 2.75rem;
}
.group-field-select .ts-wrapper {
  height: 2.75rem;
  min-height: 2.75rem;
}
.group-field-select .ts-wrapper .ts-control {
  height: 100%;
  padding-top: 0;
  padding-bottom: 0;
}

/* ===== Bank Soal — redesigned "Materi Ajar" select (TomSelect) =====
   The tom-select.css bundle loads after this file, hence the !important
   overrides on the control and the dropdown. */
.bank-materi-select.form-select {
  min-height: 2.75rem;
  padding: 0 !important;
  border: 1px solid #e5e7eb;
  border-radius: 0.75rem;
  background-color: #ffffff;
  box-shadow: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.bank-materi-select.form-select.focus,
.bank-materi-select.form-select:focus-within {
  border-color: #487fff;
  box-shadow: 0 0 0 3px rgba(72, 127, 255, 0.15);
}
.bank-materi-select .ts-control {
  min-height: 2.75rem !important;
  padding: 0 2.25rem 0 0.875rem !important;
  border: none !important;
  background: transparent !important;
  font-size: 0.875rem !important;
  font-weight: 500;
  color: #111827 !important;
}
.bank-materi-select .ts-control .item {
  color: #111827;
}
.bank-materi-select .ts-control > input {
  color: #111827 !important;
}
.bank-materi-select .ts-control > input::placeholder {
  color: #9ca3af;
}
.bank-materi-select.form-select::after {
  content: "";
  position: absolute;
  right: 1rem;
  top: 50%;
  width: 0.4375rem;
  height: 0.4375rem;
  border-right: 2px solid #9ca3af;
  border-bottom: 2px solid #9ca3af;
  transform: translateY(-65%) rotate(45deg);
  pointer-events: none;
  transition: transform 0.15s ease;
}
.bank-materi-select.form-select.dropdown-active::after {
  transform: translateY(-35%) rotate(-135deg);
}
:root.dark .bank-materi-select.form-select::after {
  border-color: #64748b;
}

.bank-materi-dd {
  padding: 0.25rem !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 0.75rem !important;
  background-color: #ffffff !important;
  box-shadow: 0 18px 40px -18px rgba(16, 24, 40, 0.35) !important;
}
.bank-materi-dd .ts-dropdown-content {
  max-height: 16rem;
}
.bank-materi-dd .option {
  padding: 0.5rem 0.75rem !important;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  color: #374151;
}
.bank-materi-dd .option.active,
.bank-materi-dd .option:hover {
  background-color: #eff6ff !important;
  color: #1d4ed8 !important;
}
.bank-materi-dd .option.selected {
  background-color: #487fff !important;
  color: #ffffff !important;
}
.bank-materi-dd .optgroup-header {
  padding: 0.5rem 0.75rem 0.125rem;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #9ca3af;
}
:root.dark .bank-materi-dd .optgroup-header {
  color: #64748b;
}

:root.dark .bank-materi-select.form-select {
  border-color: #3f4b5b;
  background-color: #1f2937;
}
:root.dark .bank-materi-select.form-select.focus,
:root.dark .bank-materi-select.form-select:focus-within {
  border-color: #487fff;
  box-shadow: 0 0 0 3px rgba(72, 127, 255, 0.25);
}
:root.dark .bank-materi-select .ts-control,
:root.dark .bank-materi-select .ts-control .item,
:root.dark .bank-materi-select .ts-control > input {
  color: #e5e7eb !important;
}
:root.dark .bank-materi-dd {
  border-color: #3f4b5b !important;
  background-color: #273142 !important;
}
:root.dark .bank-materi-dd .option {
  color: #cbd5e1;
}
:root.dark .bank-materi-dd .option.active,
:root.dark .bank-materi-dd .option:hover {
  background-color: rgba(72, 127, 255, 0.16) !important;
  color: #93c5fd !important;
}