/*
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  */
}

/* 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;
}

/* ---------------------------------------------------------------------
   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: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.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-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; }

/* Sumatif goal list: long learning-objective text wraps so the panel fits
   without a horizontal scrollbar (overrides the `.admina-table--txn` nowrap). */
.admina-table.admina-table--txn.sumatif-goal-table tbody td {
  white-space: normal;
  overflow-wrap: anywhere;
}
.admina-table.admina-table--txn.sumatif-goal-table tbody td:last-child {
  width: 1%;
  white-space: nowrap;
}

/* 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: 3rem;
}
.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;
}

/* 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; }
.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;
  }

  /* 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;
}

/* 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;
}

/* Modul ajar detail: wrap long text so the tables fit without horizontal scroll. */
.admina-table.admina-table--txn.modul-ajar-show-table {
  width: 100%;
}
.admina-table.admina-table--txn.modul-ajar-show-table thead th,
.admina-table.admina-table--txn.modul-ajar-show-table tbody td {
  white-space: normal !important;
  overflow-wrap: anywhere;
  vertical-align: top;
  text-align: left;
}
/* Tahap column: a touch wider, not bold. */
.admina-table.admina-table--txn.modul-ajar-goals-table thead th:nth-child(2),
.admina-table.admina-table--txn.modul-ajar-goals-table tbody td:nth-child(2) {
  font-weight: 400;
}
/* Modul ajar cards: on mobile keep the desktop layout and scroll horizontally. */
.modul-ajar-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
@media (max-width: 767px) {
  .modul-ajar-scroll .admina-table.modul-ajar-show-table {
    min-width: 720px;
  }
  .modul-ajar-scroll .admina-table.modul-ajar-goals-table {
    min-width: 900px;
  }
}

/* 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__icon--danger { color: #dc2626; }
@media (min-width: 1024px) {
  .kbm-stat-grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* 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)); }
}

/* 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; }
: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 (names in particular) */
#learning-presences-table th,
#learning-presences-table td {
  text-align: left;
}

/* 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(2),
  #teacher-attendance-table td:nth-child(2) {
    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 {
  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 {
    flex-wrap: nowrap;
    gap: 0.25rem;
  }
  #learning-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-open {
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (min-width: 1200px) {
  .twin-mobile-open { 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;
}

/* Heading */
.auth-page__head {
  margin-bottom: 1.75rem;
}
.auth-page__title {
  font-size: 1.5rem;
  font-weight: 600;
  color: #111827;
}
:root.dark .auth-page__title {
  color: #ffffff;
}
.auth-page__subtitle {
  margin-top: 0.375rem;
  font-size: 0.875rem;
  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);
}

/* "or sign in with" divider */
.auth-divider {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 1.5rem 0;
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #9ca3af;
}
.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background-color: #e5e7eb;
}
:root.dark .auth-divider::before,
:root.dark .auth-divider::after {
  background-color: #374151;
}

/* Social button */
.auth-social {
  display: flex;
  width: 100%;
  height: 3.25rem;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  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 (Browser Used style — Admina index-2)
   --------------------------------------------------------------------- */
.percentage-progress {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.percentage-progress__value {
  font-size: 0.875rem;
  font-weight: 500;
  color: #374151;
}
:root.dark .percentage-progress__value {
  color: #e5e7eb;
}
.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;
}

/* 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;
}

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

   Both the turbo-frame remote modal (.admina-modal) and the Stimulus
   panel ([data-modal-target="panel"]) fade the overlay in and pop the
   dialog, then reverse on close (the controllers add `.is-closing`).
   --------------------------------------------------------------------- */
@keyframes admina-modal-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes admina-modal-pop-in {
  from { opacity: 0; transform: translateY(10px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@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,
[data-modal-target="panel"] {
  animation: admina-modal-fade-in 0.18s ease-out both;
}
.admina-modal__dialog,
[data-modal-target="panel"] > .relative {
  animation: admina-modal-pop-in 0.22s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.admina-modal.is-closing,
[data-modal-target="panel"].is-closing {
  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,
  .admina-modal__dialog,
  [data-modal-target="panel"],
  [data-modal-target="panel"] > .relative {
    animation: none;
  }
}

/* ---------------------------------------------------------------------
   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;
  }
}

/* ---------------------------------------------------------------------
   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;
}

/* ---------------------------------------------------------------------
   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;
}

/* --- 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%);
}
/*
 * 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;
}

/* 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 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;
}

/* 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");
}

.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;
}
/*
 * 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;
}

.semester-switcher-select {
  min-width: 0;
  max-width: min(60vw, 16rem);
  text-overflow: ellipsis;
}

@media (max-width: 576px) {
  .semester-switcher-select {
    max-width: min(55vw, 10rem);
  }
}

.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;
  }

  /* 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;
  }

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

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

.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;
}