/* Comfortaa (used under body.ru below) is self-hosted: css/legacy/comfortaa.css,
   linked by the base templates on Russian pages only. No @import here - an
   @import on line 1 blocks rendering for every visitor. */

@font-face {
  font-family: "WorkSans";
  src: url("fonts/WorkSans-ExtraLight.08652b835887.ttf") format("truetype");
  font-weight: 200;
}
@font-face {
  font-family: "WorkSans";
  src: url("fonts/WorkSans-Light.fac65b7a2b5c.ttf") format("truetype");
  font-weight: 300;
}
@font-face {
  font-family: "WorkSans";
  src: url("fonts/WorkSans-Regular.7d761a652f8e.ttf") format("truetype");
  font-weight: 400;
}
@font-face {
  font-family: "WorkSans";
  src: url("fonts/WorkSans-Bold.3759abb1de9d.ttf") format("truetype");
  font-weight: 700;
}

.WorkSans-ExtraLight {
  font-family: "WorkSans", sans-serif !important;
  font-weight: 200 !important;
}
.WorkSans-Light {
  font-family: "WorkSans", sans-serif !important;
  font-weight: 300 !important;
}
.WorkSans-Regular {
  font-family: "WorkSans", sans-serif !important;
  font-weight: 400 !important;
}

@font-face {
  font-family: "Neoteric-Regular";
  src: url("fonts/NEOTERIC-Regular-JO.f21749156b51.ttf") format("truetype");
}

@font-face {
  font-family: "Neoteric-Bold";
  src: url("fonts/NEOTERIC-Bold-JO.a653b947fb58.ttf") format("truetype");
}

@font-face {
  font-family: "Neoteric-Light";
  src: url("fonts/NEOTERIC-Light-JO.ed61f615e3db.ttf") format("truetype");
}

@font-face {
  font-family: "PoiretOne-Regular";
  src: url("fonts/PoiretOne-Regular.8d15f9c0d468.ttf") format("truetype");
}

@font-face {
  font-family: "PoiretOne-Bold";
  src: url("fonts/PoiretOne-Bold.3b5ef58c7af4.ttf") format("truetype");
}

@font-face {
  font-family: "Roboto-Bold";
  src: url("fonts/Roboto-Bold.b8e42971dec8.ttf") format("truetype");
}

@font-face {
  font-family: "Roboto-Regular";
  src: url("fonts/Roboto-Regular.8a36205bd9b8.ttf") format("truetype");
}

body {
  -webkit-font-smoothing: antialiased;
}

/* Use absolute bold weight, not relative 'bolder' */
b,
strong {
  font-weight: 700 !important;
}

/* .nav-link {
    color: #8c5538d8 !important;
}
.active {
    color: #8c5538 !important;
    font-weight: 600;
} */
/* Ensure navbar items are vertically centered when some items wrap */
.navbar-nav.lang-fonts-bold {
  align-items: center;
}

.nav-color {
  color: #8c5538e0 !important;
  padding: 10px 16px !important;
  font-size: 15px;
  border-radius: 20px;
  border: 1px solid transparent;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  display: inline-block;
  text-align: center;
  vertical-align: middle;
}

/* When space is limited, shrink nav items to fit wrapped text */
@media (min-width: 768px) and (max-width: 1100px) {
  .nav-color {
    width: min-content;
  }
}

.nav-color:hover {
  background: rgba(255, 255, 255, 0.45);
  -webkit-backdrop-filter: blur(5px) saturate(180%);
  backdrop-filter: blur(5px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 20px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.06),
    0 8px 24px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.5);
  transform: scale(1.02);
}

.nav-color:active {
  transform: scale(0.98);
}

/* Active menu item - glass pill styling */
.active-header {
  background: rgba(255, 255, 255, 0.45) !important;
  -webkit-backdrop-filter: blur(5px) saturate(180%);
  backdrop-filter: blur(5px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  border-radius: 20px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.06),
    0 8px 24px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

body.lv #homepage h1,
body.en #homepage h1 {
  font-family: "Neoteric-Light";
  margin-bottom: -3px;
}

/* .Neoteric-Regular {
    font-family: "Neoteric-Regular";
    color: #8c5538;
}

.Neoteric-Bold {
    font-family: "Neoteric-Bold";
}

.Neoteric-Light {
    font-family: "Neoteric-Light";
    color: #8c5538;
} */

body.lv .lang-fonts-light,
body.en .lang-fonts-light {
  font-family: "Neoteric-Light";
}

body.lv .lang-fonts-regular,
body.en .lang-fonts-regular {
  font-family: "Neoteric-Regular";
}

body.lv .lang-fonts-bold,
body.en .lang-fonts-bold {
  font-family: "Neoteric-Bold";
}

body.lv .lang-fonts-light p,
body.en .lang-fonts-light p,
body.lv .lang-fonts-light li,
body.en .lang-fonts-light li,
body.lv .lang-fonts-light p small,
body.en .lang-fonts-light p small {
  font-family: "WorkSans";
}

body.lv .lang-fonts-regular p,
body.en .lang-fonts-regular p,
body.lv .lang-fonts-regular li,
body.en .lang-fonts-regular li,
body.lv .lang-fonts-regular p small,
body.en .lang-fonts-regular p small {
  font-family: "WorkSans";
}

.lang-fonts-regular strong {
  font-weight: 700 !important;
  -webkit-font-smoothing: antialiased;
}

body.lv .lang-fonts-bold p,
body.en .lang-fonts-bold p,
body.lv .lang-fonts-bold li,
body.en .lang-fonts-bold li,
body.lv .lang-fonts-bold p small,
body.en .lang-fonts-bold p small {
  font-family: "WorkSans";
  font-weight: 500;
}

body.ru .lang-fonts-light {
  font-family: "PoiretOne-Regular";
  font-weight: 400;
}

body.ru .lang-fonts-regular {
  font-family: "PoiretOne-Bold";
  font-weight: 400;
}

body.ru .lang-fonts-regular h1,
body.ru .lang-fonts-regular h2,
body.ru .lang-fonts-regular h3 {
  font-family: "PoiretOne-Regular";
}

body.ru .lang-fonts-bold {
  font-family: "PoiretOne-Bold";
  font-weight: 700;
}

/* Russian language - Comfortaa for header navigation */
body.ru .nav-color,
body.ru .navbar-nav {
  font-family: 'Comfortaa', cursive !important;
  font-weight: 500 !important;
}


body.ru #homepage h1 {
  font-family: "PoiretOne-Regular";
  margin-bottom: -6px;
}

body.lv #homepage p,
body.en #homepage p {
  /* font-family: "PoiretOne-Bold"; */
  font-family: "WorkSans";
}

body.ru #homepage p {
  font-family: "PoiretOne-Bold";
  font-weight: 700;
}

.carttext {
  font-size: small;
}

@media screen and (max-width: 550px) {
  body.lv #homepage h1,
  body.en #homepage h1 {
    font-family: "Neoteric-Regular" !important;
    /* font-size: 1.5rem;
        margin-bottom: -2px !important; */
  }

  body.ru #homepage h1 {
    font-family: "PoiretOne-Regular" !important;
    /* font-size: 1.5rem;
        margin-bottom: -2px !important; */
  }

  /* body.lv #homepage p,
    body.en #homepage p{
        font-family: "Neoteric-Bold";
        font-size: 0.8rem;
    } */

  /* body.ru #homepage p{
        font-family: "PoiretOne-Regular";
        font-size: 0.9rem;
        font-weight: 700;
    } */

  .small-device-text {
    font-size: 14px !important;
    font-weight: 400 !important;
    font-family: "WorkSans", sans-serif !important;
  }
  .classtext {
    font-size: small;
  }
  .login-class {
    height: 776px !important;
  }
  .class-col,
  .login-class-col {
    padding-left: 3px !important;
    padding-right: 3px !important;
    min-width: 290px !important;
  }
}

.Roboto-Regular {
  font-family: "Roboto-Regular";
}

.Roboto-Bold {
  font-family: "Roboto-Bold";
}

.PoiretOne-Regular {
  font-family: "PoiretOne-Regular";
}

.PoiretOne-Bold {
  font-family: "PoiretOne-Bold";
}

.justbrandcolor {
  color: #8c5538;
  font-weight: 500;
}

.brandcolor {
  color: #8c5538;
  font-weight: 500;
}

.brandcolor:hover {
  color: #8c5538dd;
  font-weight: 500;
}

.brandbgcolor {
  background-color: #8c5538;
  color: #ffffff;
  font-weight: 500;
}

.brandbgcolor:hover {
  background-color: #8c5538dd;
  color: #ffffff;
  font-weight: 500;
}

.basecolorhr {
  background-color: #8c5538;
  /* set transperancy to 1*/
  opacity: 1;
  max-width: 998px;
}

.modal-close {
  margin-left: -25px;
  margin-top: 11px;
}

.modal-mobile-close {
  justify-self: end !important;
  margin-right: 15px !important;
  margin-top: 15px !important;
}

.modal-mobile-lg-close {
  margin-right: -15px !important;
  margin-top: -15px !important;
}

.login {
  border-radius: 25px;
  max-width: 768px;
  height: 588px;
}

.login-class {
  border-radius: 25px;
  max-width: 988px;
  height: 756px;
}

.login-class-col {
  max-width: 494px;
  min-width: 450px;
}

.login-col {
  max-width: 384px;
  min-width: 320px;
}

.registration-form-col {
  min-width: 384px;
}

@media screen and (max-width: 767px) {
  .registration-form-col {
    min-width: auto;
  }
}

.login-image {
  margin-top: -1px;
  margin-left: 1px;
  border-radius: 0 25px 25px 0;
}

/* ================================================
   CLASS MODAL (#ClassModal) - SCROLLABLE ATTENDEE LIST

   .modal-content gets a fixed height from .login-class, but none of the
   rows/cols between it and .modal-body were height-constrained, so a long
   attendee list grew the inner layout and spilled outside the modal shell
   instead of using the .overflow-auto already on .modal-body.
   These rules cap the shell to the viewport and hand the leftover height
   down to .modal-body so the list scrolls inside the modal.
   Applies to all three class modal templates (schedule + legacy pages).
   ================================================ */

#ClassModal .modal-dialog.login-class,
#ClassModal .modal-content.login-class {
  /* never taller than the viewport (bootstrap .modal-dialog margin: .5rem) */
  max-height: calc(100vh - 1rem);
}

@media (min-width: 576px) {
  #ClassModal .modal-dialog.login-class,
  #ClassModal .modal-content.login-class {
    /* bootstrap .modal-dialog margin: 1.75rem auto */
    max-height: calc(100vh - 3.5rem);
  }
}

#ClassModal .modal-content {
  /* keep any residual overflow inside the rounded shell */
  overflow: hidden;
}

#ClassModal .modal-content > .row {
  flex: 1 1 auto;
  min-height: 0;
}

#ClassModal .modal-content > .row > .class-col {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

#ClassModal .class-col > .row {
  flex: 1 1 auto;
  min-height: 0;
}

/* left pane only - the image column carries .d-none/.d-md-block */
#ClassModal .login-class-col:not(.d-none) {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

#ClassModal .login-class-col:not(.d-none) > .modal-header,
#ClassModal .login-class-col:not(.d-none) > .modal-footer {
  flex: 0 0 auto;
}

#ClassModal .login-class-col:not(.d-none) > .modal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

/* follow the shell height instead of the image's natural 756px */
#ClassModal .login-image {
  height: 100%;
  object-fit: cover;
}

@media screen and (max-width: 576px) {
  .login {
    margin: auto !important;
  }
}

@media screen and (max-width: 767px) {
  .login {
    max-width: 384px !important;
    height: 95vh !important;
    max-height: 850px !important;
  }
  .login-class {
    max-width: 494px !important;
  }
}

.alert {
  display: none;
}

.avatar {
  min-width: 40px;
  text-align: center;
  background-color: #8c5538;
  color: white;
}

.carousel {
  max-width: 550px;
  min-width: 300px;
}

@media screen and (max-width: 575px) {
  .sidebar_collapse {
    max-width: 35px;
  }

  .mobtime {
    max-width: 185px !important;
    font-family: "Neoteric-Regular";
    font-size: 5vw !important;
    white-space: nowrap;
  }
}

.text-github {
  color: #495057;
}

.text-github:hover {
  color: #24292e;
}

.tablehover {
  color: #24292e;
}

.js-clickable-row:hover #fa-beat-hover {
  -webkit-animation: fa-beat 2s infinite linear;
  -moz-animation: fa-beat 2s infinite linear;
  -o-animation: fa-beat 2s infinite linear;
  animation: fa-beat 2s infinite linear;
}

.js-clickable-row:hover #fa-spin-hover {
  -webkit-animation: fa-spin 2s infinite linear;
  -moz-animation: fa-spin 2s infinite linear;
  -o-animation: fa-spin 2s infinite linear;
  animation: fa-spin 2s infinite linear;
  animation-duration: 7s;
}

.fa-bag-shopping,
.js-clickable-table .js-clickable-row {
  cursor: pointer;
  position: relative;
  transition: background-color 0.2s ease, transform 0.15s ease;
}

/* Hover effect for clickable rows */
.js-clickable-table .js-clickable-row:hover {
  background-color: rgba(140, 85, 56, 0.08);
  transform: translateX(2px);
}

/* Active/pressed state */
.js-clickable-table .js-clickable-row:active {
  background-color: rgba(140, 85, 56, 0.15);
  transform: translateX(0);
}

/* Chevron indicator for clickable rows (mobile) */
.js-clickable-table .js-clickable-row::after {
  content: "\f054"; /* FontAwesome chevron-right */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #8c5538;
  opacity: 0.5;
  font-size: 0.8rem;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.js-clickable-table .js-clickable-row:hover::after {
  opacity: 1;
  transform: translateY(-50%) translateX(3px);
}

/* Hide chevron on header row */
.js-clickable-table .t-tr.header::after {
  display: none;
}

/* Subscription name emphasis */
.subs-name-cell {
  font-weight: 600;
  color: #333;
}

/* Used subscription styling */
.used-subscription {
  opacity: 0.6;
}

/* Hidden row (for toggle) */
.hidden-row {
  display: none !important;
}

.nopointer {
  cursor: default;
}

.sidebar_collapse.active {
  background-color: #e2e4e7 !important;
}

.piyo-sidebar .nav-link.active {
  background-color: #e2e4e7 !important;
  color: var(--bs-body-color) !important;
}

.piyo-menu-btn {
  min-height: 44px;
  padding: 0.5rem 0.75rem;
}

/* Floating Action Button (FAB) style for mobile menu */
.piyo-menu-fab {
  position: fixed;
  bottom: 20px;
  left: 20px;
  z-index: 1050;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  min-width: 56px;
  min-height: 56px;
  padding: 0 20px;

  background: linear-gradient(135deg, #8c5538 0%, #a86c4a 100%);
  color: white;
  border: none;
  border-radius: 28px;

  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;

  box-shadow: 0 4px 12px rgba(140, 85, 56, 0.35), 0 2px 4px rgba(0, 0, 0, 0.1);

  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.piyo-menu-fab:hover,
.piyo-menu-fab:focus {
  background: linear-gradient(135deg, #a86c4a 0%, #8c5538 100%);
  color: white;
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 8px 20px rgba(140, 85, 56, 0.4), 0 4px 8px rgba(0, 0, 0, 0.15);
}

.piyo-menu-fab:active {
  transform: translateY(0) scale(0.98);
}

.piyo-menu-fab i {
  font-size: 1.1rem;
}

/* Subtle pulse animation for discoverability (first-time users) */
@keyframes fab-pulse {
  0%,
  100% {
    box-shadow: 0 4px 12px rgba(140, 85, 56, 0.35), 0 2px 4px rgba(0, 0, 0, 0.1),
      0 0 0 0 rgba(140, 85, 56, 0.4);
  }
  50% {
    box-shadow: 0 4px 12px rgba(140, 85, 56, 0.35), 0 2px 4px rgba(0, 0, 0, 0.1),
      0 0 0 8px rgba(140, 85, 56, 0);
  }
}

/* Slide-in from left animation */
@keyframes fab-slide-in {
  0% {
    transform: translateX(-100px);
    opacity: 0;
  }
  60% {
    transform: translateX(10px);
    opacity: 1;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

/* Combined slide-in + pulse animation */
.piyo-menu-fab.slide-in {
  animation: fab-slide-in 0.6s ease-out, fab-pulse 2s ease-in-out 0.8s 3;
}

/* Simple pulse only (legacy) */
.piyo-menu-fab.pulse {
  animation: fab-pulse 2s ease-in-out 3;
}

/* Sidebar peek animation - briefly shows sidebar then retracts */
@keyframes sidebar-peek {
  0% {
    transform: translateX(-100%);
  }
  30%,
  50% {
    transform: translateX(-70%);
  }
  100% {
    transform: translateX(-100%);
  }
}

/* Apply peek animation to offcanvas on mobile */
.offcanvas.offcanvas-start.peek-hint {
  visibility: visible !important;
  transform: translateX(-100%);
  animation: sidebar-peek 1.2s ease-in-out forwards !important;
}

/* Overlay that appears during peek (subtle) */
@keyframes peek-overlay {
  0%,
  100% {
    opacity: 0;
  }
  30%,
  50% {
    opacity: 0.15;
  }
}

.peek-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #000;
  opacity: 0;
  z-index: 1039;
  pointer-events: none;
  animation: peek-overlay 1.2s ease-in-out forwards;
}

/* Icon-only variant for tighter spaces */
.piyo-menu-fab.icon-only {
  width: 56px;
  padding: 0;
  border-radius: 50%;
}

.piyo-menu-fab.icon-only span {
  display: none;
}

/* Right-side positioning option */
.piyo-menu-fab.right {
  left: auto;
  right: 20px;
}

/* Frosted glass variant for FAB */
.piyo-menu-fab.glass-frost {
  background: rgba(255, 255, 255, 0.45);
  -webkit-backdrop-filter: blur(5px) saturate(180%);
  backdrop-filter: blur(5px) saturate(180%);
  color: #5a3825;
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.06),
    0 8px 24px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.piyo-menu-fab.glass-frost:hover,
.piyo-menu-fab.glass-frost:focus {
  background: rgba(255, 255, 255, 0.35);
  color: #8c5538;
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.piyo-menu-fab.glass-frost i {
  color: #8c5538;
}

/* Hide on desktop where sidebar is visible */
@media screen and (min-width: 768px) {
  .piyo-menu-fab {
    display: none;
  }
}

.link-dark:hover {
  background-color: #f2f3f5 !important;
}

.popout {
  position: absolute !important;
}

.maxwidth1000 {
  max-width: 1000px;
}

.maxwidth500 {
  max-width: 500px;
}

/* TABLE STYLES */

.t-shadow {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.t-wrapper-small {
  margin: 0;
  padding: 5px;
  max-width: 600px;
  /* box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  border-radius: 0.3rem;
  background-color: transparent;
}

.t-wrapper-admin {
  margin: 0;
  padding: 5px;
  max-width: 855px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  border-radius: 0.3rem;
}

.t-wrapper-medium {
  margin: 0;
  padding: 5px;
  max-width: 1000px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  border-radius: 0.3rem;
}

.t-wrapper-larger {
  margin: 0;
  padding: 5px;
  max-width: 1250px;
  /* box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    border-radius: 0.3rem; */
}

.t-wrapper {
  margin: 0;
  padding: 5px;
  max-width: 1500px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  border-radius: 0.3rem;
}

.t-table {
  /* margin: 0 0 40px 0; */
  width: 100%;
  display: table;
  border-spacing: 0 10px;
}

@media screen and (max-width: 767px) {
  .t-table {
    display: block;
    border-spacing: 0 10px !important;
  }
}

.t-tr-m,
.t-tr {
  display: table-row;
  background: white;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  border-radius: 0.3rem;
}

.t-tr:nth-of-type(odd):hover,
.t-tr:hover {
  background-color: #f2f3f5;
}

.t-tr-m:nth-of-type(odd),
.t-tr:nth-of-type(odd) {
  background: white;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  border-radius: 0.3rem;
}

.t-div {
  background-color: rgb(235, 229, 229);
  border-radius: 0.3rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  display: flex;
}

@supports (-webkit-touch-callout: none) {
  .t-tr-m.header,
  .t-tr.header {
    font-weight: 500;
    color: white;
    /* background: #E2E4E7; */
    background: rgb(140, 85, 56);
    border-radius: 0.3rem;
  }
}

@supports not (-webkit-touch-callout: none) {
  .t-tr-m.header,
  .t-tr.header {
    font-weight: 500;
    color: white;
    /* background: #E2E4E7; */
    background-image: linear-gradient(
      to bottom right,
      rgb(140, 85, 56),
      rgba(140, 85, 56, 0.843)
    );
    border-radius: 0.3rem;
  }
}

@media screen and (max-width: 767px) {
  .t-tr {
    padding: 14px 0 7px;
    display: block !important;
    margin-bottom: 10px;
  }

  .t-tr.header {
    padding: 0;
    height: 6px;
  }

  .t-tr.header .cell {
    display: none;
  }

  .t-tr .cell {
    margin-bottom: 10px;
  }

  .t-tr .cell:before {
    margin-bottom: 3px;
    content: attr(data-title);
    min-width: 98px;
    font-size: 10px;
    line-height: 10px;
    font-weight: bold;
    text-transform: uppercase;
    color: #969696;
    display: block;
  }

  /* mobile calendar wiew */
  .t-tr-m {
    padding: 14px 0 7px;
    display: block;
    margin-bottom: 10px;
  }

  .t-tr-m.header {
    padding: 0;
    height: 6px;
  }

  .t-tr-m.header .cell {
    display: none;
  }

  .t-tr-m .cell {
    margin-bottom: 10px;
  }

  .mobtime {
    max-width: 220px;
    font-family: "Neoteric-Regular";
    font-size: 4vw;
    white-space: nowrap;
  }

  .calfontmobile {
    font-family: "Neoteric-Light";
    font-size: 55px;
    line-height: 45px;
    color: #8c5538;
  }
}

.cell {
  padding: 10px 6px;
  background-color: transparent;
  display: table-cell;
}

.cell:first-child {
  border-top-left-radius: 0.3rem;
  border-bottom-left-radius: 0.3rem;
}

.cell:last-child {
  border-top-right-radius: 0.3rem;
  border-bottom-right-radius: 0.3rem;
}

@media screen and (max-width: 767px) {
  .cell {
    margin: 5px;
    padding: 2px 8px;
    display: block;
  }

  .tinycell {
    margin: 5px;
    padding: 2px 8px;
    display: block;
  }

  .dt-on .cell:before {
    margin-bottom: 3px;
    content: attr(data-title-large);
    min-width: 98px;
    font-size: 10px;
    line-height: 10px;
    font-weight: bold;
    text-transform: uppercase;
    color: #969696;
    display: block;
  }

  div.sticky {
    position: -webkit-sticky;
    position: sticky;
    top: 1px;
    background-color: white;
    z-index: 1;
  }
}

.sticky-all {
  position: -webkit-sticky;
  position: sticky;
  top: 1px;
  background-color: white;
  z-index: 1;
}

.sticky-custcal {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 10;
  padding: 10px 8px 4px 8px;
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  margin-left: -12px;
  margin-right: -12px;
  transition: background 0.5s ease, backdrop-filter 0.5s ease,
    box-shadow 0.5s ease, border-bottom 0.5s ease;
  border-bottom: 2px solid transparent;
}

/* When sticky nav is over the white calendar content */
.sticky-custcal.over-content {
  background: rgba(255, 255, 255, 0.3);
  -webkit-backdrop-filter: blur(5px) saturate(180%);
  backdrop-filter: blur(5px) saturate(180%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

/* Shadow on scroll - added via JS class */
.sticky-custcal.scrolled {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

/* Single row container for all navigation */
.sticky-custcal .sticky-nav-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* Compact week navigation - frosted glass */
.sticky-custcal .week-nav-compact {
  background: rgba(255, 255, 255, 0.45);
  -webkit-backdrop-filter: blur(5px) saturate(180%);
  backdrop-filter: blur(5px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 25px;
  padding: 8px 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.06),
    0 8px 24px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.5);
  min-height: 44px;
}

.sticky-custcal .week-nav-compact h6 {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 700;
  white-space: nowrap;
  color: #8c5538;
}

.sticky-custcal .week-nav-compact .iconbutton {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #f5e6dc;
  border: none;
  transition: all 0.2s ease;
}

.sticky-custcal .week-nav-compact .iconbutton:hover {
  background: #8c5538;
}

.sticky-custcal .week-nav-compact .iconbutton:hover i {
  color: white;
}

/* Location Pill - frosted glass matching week-nav-compact */
.location-pill {
  background: rgba(255, 255, 255, 0.45);
  -webkit-backdrop-filter: blur(5px) saturate(180%);
  backdrop-filter: blur(5px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 25px;
  padding: 8px 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.06),
    0 8px 24px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.5);
  min-height: 44px;
}

.location-pill .location-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: transparent;
  border: none;
  font-size: 0.85rem;
  font-weight: 600;
  color: #8c5538;
  cursor: pointer;
  padding-right: 18px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238c5538' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right center;
}

.location-pill .location-select:focus {
  outline: none;
}

/* Mobile hamburger button - glass-frost styling */
.navbar-toggler {
  background: rgba(255, 255, 255, 0.45) !important;
  -webkit-backdrop-filter: blur(5px) saturate(180%);
  backdrop-filter: blur(5px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.06),
    0 8px 24px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.navbar-toggler:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
}

.navbar-toggler:active {
  transform: scale(0.95);
}

/* Avatar circle - glass-frost styling with overlay */
#navbarDropdown.avatar {
  position: relative;
  -webkit-backdrop-filter: blur(5px) saturate(180%);
  backdrop-filter: blur(5px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.06),
    0 8px 24px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  overflow: hidden;
}

/* Glass overlay on avatar - preserves original background color */
#navbarDropdown.avatar::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

#navbarDropdown.avatar:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
}

#navbarDropdown.avatar:active {
  transform: scale(0.95);
}

/* Language picker - glass-frost styling */
#languageDropdown {
  background: rgba(255, 255, 255, 0.45) !important;
  -webkit-backdrop-filter: blur(5px) saturate(180%);
  backdrop-filter: blur(5px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  border-radius: 12px;
  padding: 8px 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.06),
    0 8px 24px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

#languageDropdown:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
}

#languageDropdown:active {
  transform: scale(0.95);
}

/* Compact action buttons */
.sticky-custcal .btn-action-compact {
  font-size: 0.8rem;
  padding: 8px 14px;
  border-radius: 25px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.45);
  color: #5a3825;
  white-space: nowrap;
  transition: all 0.2s ease;
  min-height: 44px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  -webkit-backdrop-filter: blur(5px) saturate(180%);
  backdrop-filter: blur(5px) saturate(180%);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.06),
    0 8px 24px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.sticky-custcal .btn-action-compact:hover,
.sticky-custcal .btn-action-compact:active {
  background: white;
  color: #8c5538;
  border-color: white;
  transform: scale(1.02);
}

/* Active/selected state for location - filled style */
.sticky-custcal .btn-action-compact.active {
  background: white;
  color: #8c5538;
}

.sticky-custcal .btn-action-compact i {
  margin-right: 6px;
  font-size: 0.85rem;
}

/* Special notify button */
.sticky-custcal .btn-action-compact.btn-notify {
  border-color: #ffc107;
  color: #ffc107;
}

.sticky-custcal .btn-action-compact.btn-notify:hover {
  background: #ffc107;
  color: #333;
  border-color: #ffc107;
}

/* ============================================
   DESKTOP NAVIGATION STYLES
   Matching mobile design language
   ============================================ */

.sticky-custcal-desktop {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 10;
  padding: 15px 20px;
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  transition: background 0.5s ease, backdrop-filter 0.5s ease,
    box-shadow 0.5s ease, border-bottom 0.5s ease;
  border-bottom: 2px solid transparent;
}

/* When desktop sticky nav is over content */
.sticky-custcal-desktop.over-content {
  background: rgba(140, 85, 56, 0.85);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 2px solid #c9a96c;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Frosted glass variant for desktop sticky nav (trainer calendar) */
.sticky-custcal-desktop.glass-frost {
  background: rgba(255, 255, 255, 0.45);
  -webkit-backdrop-filter: blur(10px) saturate(180%);
  backdrop-filter: blur(10px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-bottom: none;
  border-radius: 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06), 0 8px 24px rgba(0, 0, 0, 0.04);
  padding: 12px 0 8px;
  margin-bottom: 0;
}

/* Desktop week-nav-compact and location-pill - matching mobile style */
.sticky-custcal-desktop .week-nav-compact,
.sticky-custcal-desktop .location-pill {
  background: rgba(255, 255, 255, 0.45);
  -webkit-backdrop-filter: blur(5px) saturate(180%);
  backdrop-filter: blur(5px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 25px;
  padding: 8px 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.06),
    0 8px 24px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.5);
  min-height: 44px;
}

.sticky-custcal-desktop .week-nav-compact h6 {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 700;
  white-space: nowrap;
  color: #8c5538;
}

.sticky-custcal-desktop .week-nav-compact .iconbutton {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #f5e6dc;
  border: none;
  transition: all 0.2s ease;
  cursor: pointer;
}

.sticky-custcal-desktop .week-nav-compact .iconbutton:hover {
  background: #8c5538;
}

.sticky-custcal-desktop .week-nav-compact .iconbutton:hover i {
  color: white;
}

/* Week picker dropdown */
.week-picker-dropdown {
  display: inline-block;
}

.week-picker-dropdown .week-label-trigger {
  background: transparent;
  border: 0;
  padding: 0 0.5rem;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  color: inherit;
  width: auto;
  height: auto;
}

.week-picker-dropdown .week-label-trigger:hover {
  background: transparent;
}

.week-nav-compact button:focus,
.week-nav-compact button:focus-visible {
  outline: none;
  box-shadow: none;
}

.week-picker-dropdown .week-label-trigger h6 {
  font-size: 0.9rem;
  font-weight: 700;
  color: #8c5538;
}

.week-picker-menu {
  width: min(320px, 92vw);
  max-height: 60vh;
  overflow-y: auto;
}

.week-picker-row {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.5rem 1rem;
  background: none;
  border: 0;
  border-radius: 0;
  font-size: 0.9rem;
}

.week-picker-row:hover {
  background: rgba(140, 85, 56, 0.08);
}

.week-picker-row.active {
  background: rgba(140, 85, 56, 0.15);
  font-weight: 600;
  color: #8c5538;
}

.week-picker-expand {
  font-size: 0.875rem;
  text-decoration: none;
}

.week-picker-expand:hover {
  text-decoration: underline;
}

.week-picker-header {
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  font-size: 0.875rem;
  color: #8c5538;
}

.sticky-custcal-desktop .location-pill .location-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: transparent;
  border: none;
  font-size: 0.85rem;
  font-weight: 600;
  color: #8c5538;
  cursor: pointer;
  padding-right: 18px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238c5538' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right center;
}

.sticky-custcal-desktop .location-pill .location-select:focus {
  outline: none;
}

.sticky-custcal-desktop.glass-frost.over-content {
  background: rgba(255, 255, 255, 0.45);
  -webkit-backdrop-filter: blur(10px) saturate(180%);
  backdrop-filter: blur(10px) saturate(180%);
  border-bottom: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06), 0 8px 24px rgba(0, 0, 0, 0.04);
}

/* Mobile sticky nav glass-frost variant */
.sticky-custcal.glass-frost {
  background: rgba(255, 255, 255, 0.18);
  -webkit-backdrop-filter: blur(5px) saturate(180%);
  backdrop-filter: blur(5px) saturate(180%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
}

.sticky-custcal.glass-frost.over-content,
.sticky-custcal.glass-frost.scrolled {
  background: rgba(255, 255, 255, 0.3);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

/* Sticky Weekday Display */
.sticky-weekday-display {
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2px 12px;
  font-size: 1.5rem;
  font-weight: 600;
  color: #8c5538;
  font-family: "Neoteric-Regular", Georgia, serif;
  border-top: 1px solid rgba(200, 180, 160, 0.2);
  margin-top: 4px;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity 0.3s ease, max-height 0.3s ease, padding 0.3s ease,
    margin 0.3s ease;
}

.sticky-weekday-display.visible {
  opacity: 1;
  max-height: 40px;
  padding: 4px 12px;
}

.sticky-weekday-display span {
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Hide brown left stripe in trainer calendar */
.glass-frost ~ #calendar-container .t-tr::before,
.glass-frost ~ #calendar-container .t-tr::after,
#wrapper:has(.glass-frost) .t-tr::before,
#wrapper:has(.glass-frost) .t-tr::after {
  display: none !important;
  content: none !important;
}

/* Desktop week navigation pill */
.week-nav-compact-desktop {
  background: rgba(255, 255, 255, 0.45);
  -webkit-backdrop-filter: blur(5px) saturate(180%);
  backdrop-filter: blur(5px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 25px;
  padding: 10px 24px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.06),
    0 8px 24px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.5);
  min-height: 50px;
}

.week-nav-compact-desktop h5 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
  white-space: nowrap;
  color: #8c5538;
}

/* Desktop icon buttons in week nav */
.iconbutton-desktop {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #f5e6dc;
  border: none;
  transition: all 0.2s ease;
  cursor: pointer;
  color: #8c5538;
}

.iconbutton-desktop:hover {
  background: #8c5538;
  color: white;
}

/* Desktop action buttons */
.btn-action-desktop {
  font-size: 0.95rem;
  padding: 12px 24px;
  border-radius: 25px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.45);
  color: #5a3825;
  white-space: nowrap;
  transition: all 0.2s ease;
  min-height: 50px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  -webkit-backdrop-filter: blur(5px) saturate(180%);
  backdrop-filter: blur(5px) saturate(180%);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.06),
    0 8px 24px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.btn-action-desktop:hover,
.btn-action-desktop:active {
  background: white;
  color: #8c5538;
  border-color: white;
  transform: scale(1.02);
}

/* Desktop notify button - special yellow styling */
.btn-action-desktop.btn-notify-desktop {
  border-color: #ffc107;
  color: #ffc107;
}

.btn-action-desktop.btn-notify-desktop:hover {
  background: #ffc107;
  color: #333;
  border-color: #ffc107;
}

/* Sticky table header for desktop - sticks below nav with glass effect */
.d-md-block .t-tr.header,
.t-tr.sticky-header {
  position: -webkit-sticky;
  position: sticky;
  top: 145px; /* Height of nav bar */
  z-index: 5;
  background: rgba(140, 85, 56, 0.85);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

/* Trainer calendar sticky header - adjust for wrapper context */
#desktop-calendar .t-tr.sticky-header {
  top: 71px;
  background: rgba(255, 255, 255, 0.45);
  -webkit-backdrop-filter: blur(10px) saturate(180%);
  backdrop-filter: blur(10px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-top: none;
  border-radius: 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06), 0 8px 24px rgba(0, 0, 0, 0.04);
  margin-top: 0;
}

#desktop-calendar .t-tr.sticky-header .cell {
  color: #8c5538;
  font-weight: 700;
}

@media screen and (min-width: 767px) {
  .t-center {
    text-align: center !important;
    /* align-items: center; */
  }

  .t-center-content {
    /* display: flex; */
    justify-content: center;
  }
}

.invalid-feedback {
  display: none;
}

.pointer:hover {
  cursor: pointer;
}

#div_id_is_online {
  padding-top: 6px;
}

/* RIGT MODAL COLUMN */
/* #div_id_close_reg_before,
#div_id_is_online {
    max-width: 150px;
    padding-left: 3px;
    padding-right: 0px;
} */

/* LEFT MODAL COLUMN */
/* #div_id_trainer,
#div_id_class_capacity {
    max-width: 150px;
    padding-left: 0px;
    padding-right: 3px;
} */

.classbutton {
  width: 180px !important;
  min-height: 85px;
  font-size: x-small !important;
  border-radius: 12px;
  position: relative;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  padding: 10px 8px;
  /* Glass-frost styling matching navigation pills */
  -webkit-backdrop-filter: blur(5px) saturate(180%);
  backdrop-filter: blur(5px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.06),
    0 8px 24px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
  overflow: hidden;
}

/* Glass overlay for class buttons - creates frosted effect over colored background */
.classbutton::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.25);
  border-radius: 12px;
  pointer-events: none;
  z-index: 0;
}

/* Ensure button content is above the overlay */
.classbutton > * {
  position: relative;
  z-index: 1;
}

.classbutton:hover,
.classbutton:active {
  transform: scale(1.02);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
}

.classbutton:active {
  transform: scale(0.98);
}

.classbutton_calendar {
  width: 130px !important;
  font-size: small !important;
  border-radius: 12px;
  min-height: 70px;
  position: relative; /* Fix for absolute positioning of child elements */
  /* Glass-frost styling matching navigation pills */
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  -webkit-backdrop-filter: blur(5px) saturate(180%);
  backdrop-filter: blur(5px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.06),
    0 8px 24px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
  overflow: hidden;
}

/* Glass overlay for desktop class buttons */
.classbutton_calendar::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.25);
  border-radius: 12px;
  pointer-events: none;
  z-index: 0;
}

/* Ensure button content is above the overlay */
.classbutton_calendar > * {
  position: relative;
  z-index: 1;
}

/* Desktop hover animation matching mobile */
.classbutton_calendar:hover,
.classbutton_calendar:active {
  transform: scale(1.02);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
}

.classbutton_calendar:active {
  transform: scale(0.98);
}

/* Add padding and flexbox when strip is present to prevent overlap */
.classbutton.has-strip,
.classbutton_calendar.has-strip {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  padding-bottom: 40px !important;
}

/* Past-class tiles: visually muted and non-interactive */
.classbutton.past-class,
.classbutton_calendar.past-class,
.trainer-schedule-class-btn.past-class {
  opacity: 0.4 !important;
  filter: grayscale(0.8);
  pointer-events: none;
  cursor: not-allowed;
}

.sm_lineheight {
  line-height: 0.8 !important;
}

.nonfielderror {
  padding: 0px;
}

.visible {
  visibility: visible !important;
}

.select2 {
  width: 100% !important;
}

.modal_info {
  max-height: 150px;
}

.iconbutton {
  all: unset;
}

.rez_icon {
  min-width: 105px;
  margin-top: -7px !important;
  margin-bottom: 7px;
}

#div_id_searchquery {
  width: 82%;
}

.modalsearch {
  min-height: 28px;
  padding-top: 1px !important;
  padding-bottom: 1px !important;
}

.nodecor:link {
  text-decoration: none;
  color: #24292e;
}

.nodecor:visited {
  text-decoration: none;
  color: #24292e;
}

.nodecor:hover {
  text-decoration: none;
  color: #24292e;
}

.nodecor:active {
  text-decoration: none;
  color: #24292e;
}

.modal:nth-of-type(even) {
  z-index: 1052 !important;
}

.modal-backdrop.show:nth-of-type(even) {
  z-index: 1051 !important;
}

.calicon {
  padding-left: 4px !important;
  padding-right: 0px !important;
  margin-top: -10px !important;
  font-size: 1.5rem;
}

.iconrow {
  margin-bottom: 6px !important;
}

.iconrow_mobile {
  margin-bottom: 0px !important;
}

.mobile_times {
  margin-bottom: 5px !important;
}

.pulse {
  background-color: rgb(184, 230, 0);
  box-shadow: 0 0 0 0 rgba(0, 0, 0, 1);
  transform: scale(1);
  animation: pulse 2s infinite;
}

.pulse:hover {
  opacity: 0.75;
}

@keyframes pulse {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(184, 230, 0, 0.7);
  }

  70% {
    transform: scale(1);
    box-shadow: 0 0 0 10px rgba(184, 230, 0, 0);
  }

  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(184, 230, 0, 0);
  }
}

.pulse-brandcolor {
  background-color: rgb(184, 230, 0);
  box-shadow: 0 0 0 0 rgba(0, 0, 0, 1);
  transform: scale(1);
  animation: pulse 2s infinite;
}

.pulse-brandcolor:hover {
  opacity: 0.75;
}

@keyframes pulse {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(184, 230, 0, 0.7);
  }

  70% {
    transform: scale(1);
    box-shadow: 0 0 0 10px rgba(184, 230, 0, 0);
  }

  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(184, 230, 0, 0);
  }
}

.cal_mobile_day {
  margin: 0 0 0.25rem 4%;
  font-size: 1.75rem;
  font-weight: 600;
  color: #8c5538;
  border-bottom: 2px solid #c9a96c;
  padding-bottom: 0.25rem;
}

/* Combined time display for mobile calendar */
.timeslot_time {
  width: 40%;
  min-width: 90px;
  font-size: 1.2rem;
  color: #8c5538;
  padding-left: 8px;
  padding-right: 8px;
  white-space: nowrap;
  text-align: center;
}

.timeslot_time p {
  width: 100%;
  text-align: center;
}

.timeslot_1,
.timeslot_3 {
  width: 15%;
  font-size: 1.1rem;
  color: #666;
}

.timeslot_2 {
  width: 1%;
  font-size: 1rem;
}

.timeslot_4 {
  width: 60%;
  margin-left: 0;
}

/* Mobile calendar button styling */
#mobile-calendar .btn-xs,
#mobile-calendar .btn-outline-secondary {
  padding: 6px 16px;
  font-size: 0.85rem;
  min-width: 130px;
}

/* Timeslot row - frosted glass pill */
.timeslot-row {
  background: rgba(255, 255, 255, 0.45);
  -webkit-backdrop-filter: blur(8px) saturate(180%);
  backdrop-filter: blur(8px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 20px;
  padding: 10px 8px !important;
  margin: 4px 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.06),
    0 8px 24px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.5);
  align-items: center;
}

/* Hide empty timeslot rows that have no visible children */
/* Note: Customer calendar uses .timeslot-time (hyphen), trainer calendar uses .timeslot_time (underscore) */
.timeslot-row:not(:has(.timeslot_1)):not(:has(.classbutton)):not(
    :has(.timeslot-time)
  ):not(:has(.timeslot_time)) {
  display: none !important;
}

@media screen and (max-width: 390px) {
  .modal-mobile-close {
    margin-right: 10px !important;
    margin-top: 10px !important;
  }

  th,
  td {
    padding-left: 0.3rem !important;
    padding-right: 0.3rem !important;
  }

  .cal_mobile_day {
    margin: 0 0 0.25rem 3%;
    font-size: 1.5rem;
  }

  .login-col {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }

  .classtext {
    font-size: x-small;
  }

  .carttext {
    font-size: x-small;
  }

  .timeslot_1,
  .timeslot_2,
  .timeslot_3 {
    font-size: 0.95rem;
  }

  .timeslot_4 {
    width: 72%;
    margin-left: 0;
  }
}

.iconrow {
  margin-bottom: -7px;
}

.cal_box {
  padding: 5px;
  box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;
  border-radius: 0.3rem;
}

.fa-trash-can:hover {
  color: #9e0606;
}

.fa-trash-can {
  color: rgb(73, 72, 72);
}

.pricelist-col,
.card {
  width: 350px !important;
  min-height: 350px !important;
}

.price-row {
  max-width: 85% !important;
}

/* Russian language - use Comfortaa for prices page body text for better readability */
/* Headings (h1) keep Poiret One, but card-text uses Comfortaa */
body.ru .pricelist-col h5.card-text {
  font-family: 'Comfortaa', cursive !important;
  font-size: 1rem !important;
  font-weight: 500 !important;
  line-height: 1 !important;
}

/* Russian language - Comfortaa for special offer card body text */
body.ru .pricelist-col .card-content p {
  font-family: 'Comfortaa', cursive !important;
  font-weight: 500 !important;
}

/* Euro symbol in price cards - smaller than the price number */
.pricelist-col .euro-symbol {
  font-size: 0.6em;
  vertical-align: super;
  margin-right: 3px;
}

.col-1 {
  padding: 1px !important;
}

/* INVOICE TEMPLATE */
.invoice-container {
  position: relative;
  width: 794px;
  height: 1122px;
  margin-top: 20px;
  margin-bottom: 20px;
  margin-left: 40px;
  margin-right: 40px;
}

.invoice-details {
  text-align: right;
}

.invoice-header {
  margin-top: 25px;
  text-align: start;
}

.invoice-header h1 {
  margin: 0;
  font-size: 36px;
}

.invoice-details h6 {
  margin-top: 0;
  margin-bottom: 0;
}

.invoice-details p {
  margin-bottom: 5px;
}

.customer-details p {
  margin-bottom: 0;
}
.customer-details {
  text-align: left;
  margin-top: 20px;
}

.order-details {
  width: 100%;
  margin-top: 15px;
}

.order-details th,
.order-details td {
  padding: 10px;
  text-align: left;
}

.order-details thead th {
  border-top: 2px solid black;
  border-bottom: 2px solid black;
}

.total-amount {
  border-top: 2px solid black;
  border-bottom: 2px solid black;
  color: black;
  padding: 10px;
  text-align: right;
  font-size: 24px;
}

.invoice-footer {
  border-top: 2px solid black;
  width: 100%;
  position: absolute;
  bottom: 0;
  margin-top: 20px;
  text-align: start;
}

.invoice-footer p {
  margin: 0;
}

#mobile-wiew {
  max-width: 500px;
}

.background {
  background-color: #8c55388f;
}

@media screen and (max-width: 385px) {
  .img-fluid {
    width: 80px;
    height: 80px;
  }
  .carousel-inner {
    width: 100% !important;
  }
  .carousel-control-prev,
  .carousel-control-next {
    width: auto !important;
  }
  .mob-row {
    padding-right: 0px !important;
    padding-left: 0px !important;
  }

  .carousel-inner {
    height: auto; /* Adjust height as needed */
  }
}

.class-search-container {
  max-height: 200px;
}

@media screen and (min-width: 767px) {
  .carousel-control-prev {
    margin-left: -2rem;
  }
  .carousel-control-next {
    margin-right: -2rem;
  }
}

.rew_pic {
  max-width: 250px !important;
}

.carousel {
  max-width: 1000px !important;
  max-height: 1000px !important;
}

.hidden-row {
  display: none !important;
}

.w-90 {
  width: 90% !important;
}

.TitleText {
  font-size: 1.5rem;
  line-height: 1.1;
  text-align: justify;
}

.TitleText h1 {
  font-size: 3.5rem;
  line-height: 1.1;
}

#homePageContent .col-md-5 {
  max-width: 600px;
}

#homePageContent .col-md-10 {
  max-width: 1200px;
}

.justify-text {
  text-align: justify;
}

/* Sliding text banner */
.slide-banner {
  background-color: #8c55388f;
  height: 60px;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
}

.slide-text {
  display: flex;
  align-items: center;
  white-space: nowrap;
  color: #ffffff;
  font-size: 2rem;
  height: 60px;
  will-change: transform;
}

.slide-text-content {
  padding: 0 3rem;
}

/* Mobile sliding text banner */
.slide-banner-mobile {
  background-color: rgb(184, 230, 0);
  height: auto;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.5rem 0 0.8rem 0;
}

.slide-text-mobile {
  display: flex;
  align-items: center;
  white-space: nowrap;
  color: #8c5538;
  font-size: 1.4rem;
  will-change: transform;
}

.slide-text-content {
  padding: 0 2rem;
}

@keyframes slide {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* Sliding banner buttons */
.slide-banner-btn {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  padding: 0.6rem 1.5rem;
  border-radius: 25px;
  text-decoration: none;
  font-size: 1rem;
  letter-spacing: 0.5px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  z-index: 10;
  white-space: nowrap;
  display: inline-block;
  width: auto;
  opacity: 0.9;
}

/* Mobile button - contrasting orange/red on green background */
.slide-banner-btn-wrapper {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: 0.05rem;
}

.slide-banner-btn-mobile {
  background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%);
  color: #ffffff;
  font-size: 0.85rem;
  padding: 0.5rem 1.5rem;
  position: static;
  transform: none;
}

.slide-banner-btn-mobile:hover {
  background: linear-gradient(135deg, #f7931e 0%, #ff6b35 100%);
  color: #ffffff;
  box-shadow: 0 6px 20px rgba(255, 107, 53, 0.4);
  transform: scale(1.05);
  opacity: 1;
}

/* Desktop button - contrasting bright yellow/green on brown background */
.slide-banner-btn-desktop {
  background: linear-gradient(135deg, #b8e600 0%, #c8f030 100%);
  color: #8c5538;
  font-size: 1rem;
  padding: 0.7rem 1.8rem;
}

.slide-banner-btn-desktop:hover {
  background: linear-gradient(135deg, #c8f030 0%, #b8e600 100%);
  color: #8c5538;
  box-shadow: 0 6px 20px rgba(184, 230, 0, 0.5);
  transform: translateY(-50%) scale(1.05);
  opacity: 1;
}

/* Responsive adjustments */
@media (max-width: 480px) {
  .slide-banner-btn-mobile {
    font-size: 0.75rem;
    padding: 0.4rem 0.7rem;
    right: 5px;
  }
}

@media (max-width: 768px) {
  .slide-banner-btn-desktop {
    font-size: 0.9rem;
    padding: 0.6rem 1.4rem;
  }
}

.card-content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}

#spinner {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #8c55388f;
  /* background-color: rgba(0, 0, 0, 0.5); */
  z-index: 2000; /* Increase the z-index to ensure the spinner appears above modals */
}

.spinner-custom-color {
  color: #8c5538;
}

.my-mobile-gap {
  display: none;
}

@media (max-width: 576px) {
  .my-mobile-gap {
    display: block;
    margin-top: 16px;
    margin-bottom: 16px;
  }
}

.btn-xs {
  padding: 0.15rem 1.3rem;
  font-size: 0.8rem;
  line-height: 1.5;
  border-radius: 0.1rem;
}

.custom-dropdown-width {
  width: 50% !important;
}

.landing-1 {
  position: absolute;
  bottom: 45%;
  left: 60%;
  max-width: 350px;
}

.bg-image {
  background-image: url("/static/images/davanu_karte_piyo16_4.8bcc5d96542b.png");
  background-size: cover;
  background-position: center;
}
.overlay-content {
  position: absolute;
  top: 30%;
  left: 65%;
  width: 60%;
  transform: translate(-50%, -50%);
  /* color: white; */
}
.btn-custom {
  background: linear-gradient(
    to right,
    #f9cb9d,
    #854c3d
  ); /* Example gradient */
  color: white;
  border-radius: 50rem; /* Pill shape */
  padding: 0.75rem 3rem; /* Larger padding for a wider button */
  border: none; /* No border */
  font-size: 1.25rem; /* Larger text */
  transition: transform 0.1s ease-in-out; /* Smooth click effect */
}
.btn-custom:hover {
  transform: scale(1.05); /* Slightly larger on hover */
  color: white;
  text-decoration: none; /* No underline on hover */
}

@media (max-width: 390px) {
  .overlay-content {
    top: 25%;
    left: 63%;
  }
  .btn-custom {
    padding: 0.65rem 1rem;
    font-size: 1rem;
  }
}

@media (max-width: 910px) {
  .overlay-content {
    top: 25%;
    left: 67%;
  }
  .btn-custom {
    padding: 0.65rem 1rem;
    font-size: 1rem;
  }
}

.home_bg_3 {
  background-image: url("/static/images/LINNA REFORMER.59676a723ccc.webp");
  background-size: 70% auto;
  background-position-x: 230px;
  background-position-y: -20px;
  /* background-attachment: fixed; */
  height: 600px;
  background-repeat: no-repeat;
}
.overlay-home-1 {
  position: absolute;
  top: -10%;
  left: 70%;
  width: 850px;
  transform: translate(-100%, -18%);
}

@keyframes slideFadeIn {
  from {
    opacity: 0;
    transform: translate(-100%, 0%);
  }
  to {
    opacity: 1;
    transform: translate(-100%, -13.2%);
  }
}

.overlay-home-2 {
  position: absolute;
  top: -10%;
  left: 80%;
  width: 800px;
  transform: translate(-100%, -13.2%);
  animation: slideFadeIn 1s ease-out forwards; /* Use the forwards value to retain the final animation state */
}

.home_section_h1 {
  font-size: 4rem;
  margin-bottom: -12px !important;
}

.home_section_p {
  color: #854c3d;
  margin-left: -8px;
}

/* Override any inline styles from database content */
.home_section_p p,
.home_section_p span,
.home_section_p div,
.home_section_p h1,
.home_section_p h2,
.home_section_p h3,
.home_section_p h4,
.home_section_p h5,
.home_section_p h6,
.home_section_p li {
  font-size: inherit !important;
  line-height: inherit !important;
}

/* Ensure all text uses default browser styles on mobile */
@media screen and (max-width: 767px) {
  .home_section_p * {
    font-size: 1rem !important;
    line-height: 1.5 !important;
  }

  .home_section_p h1 {
    font-size: 2rem !important;
  }

  .home_section_p h2 {
    font-size: 1.5rem !important;
  }
}

/* Fix bullet points on mobile - add left padding for lists */
.home_section_p ul,
.home_section_p ol {
  padding-left: 1.5rem;
  margin-left: 8px;
}

/* Use WorkSans-Bold for strong/bold elements */
.home_section_p strong,
.home_section_p b {
  font-weight: 700 !important;
  font-family: "WorkSans", sans-serif;
}

/* Optional: if using variable fonts, lock the weight explicitly */
@supports (font-variation-settings: normal) {
  .home_section_p strong,
  .home_section_p b {
    font-variation-settings: "wght" 700;
  }
}

.overlay-home-2 h1,
.overlay-home-1 h1 {
  text-align: right;
  margin-right: -10px;
  font-size: 8rem;
  color: white;
}

.overlay-home-2 h2,
.overlay-home-1 h2 {
  font-size: 3.5rem;
  text-align: right;
  color: #854c3d;
  margin-top: -30px;
}

.overlay-home-2 p,
.overlay-home-1 p {
  font-size: 1.2rem;
  color: #854c3d;
}

.home_top_row {
  height: 100px;
}

.btn-home-custom-2,
.btn-home-custom {
  background: rgb(184, 230, 0); /* Lime green */
  color: #8c5538; /* Brandcolor */
  border-radius: 50rem; /* Pill shape */
  padding: 0.65rem 2.5rem; /* Larger padding for a wider button */
  border: none; /* No border */
  font-size: 1.25rem; /* Larger text */
  transition: transform 0.2s ease-in-out; /* Smooth click effect */
}

.btn-home-custom {
  margin-top: 130px;
  margin-right: 30px;
}
.btn-home-custom-2 {
  text-align: center !important;
}

.btn-home-custom-2:hover,
.btn-home-custom:hover {
  transform: scale(1.05); /* Slightly larger on hover */
  color: #8c5538; /* Brandcolor */
  text-decoration: none; /* No underline on hover */
}

#button-container {
  text-align: right;
}

@media (max-width: 1520px) {
  .home_bg_3 {
    background-size: 85% auto;
    background-position-x: 50px;
    height: 500px;
  }
  .overlay-home-2 h1 {
    font-size: 6.4rem;
  }
  .overlay-home-2 h2 {
    font-size: 3.2rem;
  }
  .overlay-home-2 {
    width: 650px;
  }
}
@media (max-width: 1200px) {
  @keyframes slideFadeIn {
    from {
      opacity: 0;
      transform: translate(-100%, 0%);
    }
    to {
      transform: translate(-100%, -12.5%);
    }
  }
  .home_bg_3 {
    background-size: 85% auto;
    background-position-x: 20px;
    height: 500px;
  }
  .overlay-home-2 h1 {
    font-size: 6rem;
  }
  .overlay-home-2 h2 {
    font-size: 2.8rem;
    margin-top: -20px;
  }
  .overlay-home-2 {
    width: 650px;
    transform: translate(-100%, -11.5%);
  }
}
@media (max-width: 1050px) {
  @keyframes slideFadeIn {
    from {
      opacity: 0;
      transform: translate(-90%, 0%);
    }
    to {
      transform: translate(-90%, -11.5%) !important;
    }
  }
  .overlay-home-2 {
    width: 650px;
    transform: translate(-90%, -12.5%);
  }
  .home_bg_3 {
    background-size: 100% auto;
    background-position-y: 50px;
    background-position-x: 0px;
    height: 500px;
  }
}
@media (max-width: 850px) {
  .overlay-home-2 {
    width: 650px;
    transform: translate(-90%, -12.5%) !important;
  }
}
@media (max-width: 770px) {
  @keyframes slideFadeIn {
    from {
      opacity: 0;
      transform: translate(-85%, 0%);
    }
    to {
      transform: translate(-85%, -11.5%);
    }
  }
  .home_bg_3 {
    background-size: 110% auto;
    background-position-y: 50px;
    background-position-x: -40px;
    height: 500px;
  }
  .overlay-home-2 {
    width: 650px;
    transform: translate(-85%, -12.5%) !important;
  }
}
@media (max-width: 710px) {
  .btn-home-custom {
    margin-top: 200px;
    margin-right: 0px;
  }
  .home_top_row {
    height: 70px;
  }
  .home_bg_3 {
    background-size: 120% auto;
    background-position-y: 40px;
    background-position-x: -40px;
    height: 450px;
  }
  .overlay-home-2 h1 {
    font-size: 4.2rem;
  }
  .overlay-home-2 h2 {
    margin-right: -7px;
    margin-top: -17px;
    font-size: 2rem;
  }
  @keyframes slideFadeIn {
    from {
      opacity: 0;
      transform: translate(-90%, 0%);
    }
    to {
      transform: translate(-90%, -8.8%);
    }
  }
  .overlay-home-2 {
    width: 450px;
    transform: translate(-90%, -8.8%) !important;
  }
}
@media (max-width: 520px) {
  .home_top_row {
    height: 60px;
  }
  .home_bg_3 {
    background-size: 140% auto;
    background-position-y: 20px;
    background-position-x: -30px;
    height: 400px;
  }
  .home_section_h1 {
    margin-bottom: -9px !important;
    font-size: 3rem;
  }
  /* Removed .home_section_p font-size override - now uses default */
  .overlay-home-2 h1 {
    font-size: 3.2rem;
  }
  .overlay-home-2 h2 {
    margin-top: -7px;
    font-size: 1.7rem;
  }
  @keyframes slideFadeIn {
    from {
      opacity: 0;
      transform: translate(-90%, 0%);
    }
    to {
      transform: translate(-90%, -6.5%);
    }
  }
  .overlay-home-2 {
    width: 350px;
    transform: translate(-90%, -5.5%) !important;
  }
  .btn-home-custom {
    margin-top: 260px;
    border-radius: 50rem; /* Pill shape */
    padding: 0.5rem 1rem;
  }
}
@media (max-width: 390px) {
  .home_top_row {
    height: 50px;
  }
  .home_bg_3 {
    background-size: 140% auto;
    background-position-y: 10px;
    background-position-x: -30px;
    height: 360px;
  }
  .home_section_h1 {
    margin-bottom: -7px !important;
    font-size: 2.5rem;
  }
  /* Removed .home_section_p font-size override - now uses default */
  .overlay-home-2 h1 {
    font-size: 2.7rem;
  }
  .overlay-home-2 h2 {
    margin-top: -4px;
    font-size: 1.3rem;
  }
  @keyframes slideFadeIn {
    from {
      opacity: 0;
      transform: translate(-85%, 0%);
    }
    to {
      transform: translate(-85%, -6.2%);
    }
  }
  .overlay-home-2 {
    width: 350px;
    transform: translate(-85%, -5.5%);
  }
  .btn-home-custom {
    margin-top: 240px;
    border-radius: 50rem; /* Pill shape */
    padding: 0.5rem 1rem; /* Larger padding for a wider button */
    border: none; /* No border */
    font-size: 1.2rem; /* Larger text */
    transition: transform 0.2s ease-in-out; /* Smooth click effect */
  }
}

.no-gutter {
  --bs-gutter-x: 0;
}

.grade-option {
  display: flex;
  flex-direction: column; /* Use 'column-reverse' if you want the label below */
  align-items: center;
  margin-right: 10px; /* Adjust the spacing between each option */
}

.grade-label {
  /* Adjust the font size and margin for the label */
  font-size: 0.8rem;
  margin-bottom: 5px; /* Adjust based on label position */
}

.grade-radio {
  /* Optional: Adjust the radio button size */
  transform: scale(0.8);
}

.gap-10 {
  gap: 10px;
}

/* Fix UserCreationModal image alignment - shift image right with positive left margin */
#UserCreationModal .login-image {
  margin-left: 17px !important;
}

/* Ensure brandcolor applies to all nested elements in CKEditor content */
.brandcolor p,
.brandcolor h1,
.brandcolor h2,
.brandcolor h3,
.brandcolor h4,
.brandcolor h5,
.brandcolor h6,
.brandcolor li,
.brandcolor span,
.brandcolor div,
.brandcolor strong,
.brandcolor em {
  color: #8c5538 !important;
}
/* Minimize gap between form labels and fields in modals */
#UserCreationModal .form-label,
#UserLoginModal .form-label {
  margin-bottom: 3px !important;
}

#UserCreationModal .mb-1,
#UserLoginModal .mb-1 {
  margin-bottom: 4px !important;
}

/* Reduce height of form fields in registration modal */
#UserCreationModal .form-control {
  padding-top: 0.25rem !important;
  padding-bottom: 0.25rem !important;
  font-size: 0.9rem !important;
}

/* ================================================
   MyWeek Page UI Improvements
   ================================================ */

/* Cancel button - brand-aligned outline style */
.btn-cancel-class {
  background: transparent;
  border: 1px solid #c9a96c;
  color: #8c5538;
  transition: all 0.2s ease;
}

.btn-cancel-class:hover {
  background: #c9a96c;
  color: white;
  border-color: #c9a96c;
}

.btn-cancel-class:focus {
  box-shadow: 0 0 0 0.2rem rgba(201, 169, 108, 0.25);
}

/* Table row hover effect */
.t-table .t-tr:not(.header):hover {
  background-color: rgba(140, 85, 56, 0.05);
  transition: background-color 0.2s ease;
}

/* Empty state styling */
.empty-state {
  padding: 3rem 1rem;
}

.empty-state i {
  display: block;
  color: #c9a96c;
}

.empty-state h5 {
  color: #8c5538;
}

.empty-state .btn-primary {
  background: linear-gradient(135deg, #8c5538 0%, #a86c4a 100%);
  border: none;
  border-radius: 25px;
  padding: 0.6rem 1.5rem;
  transition: all 0.2s ease;
}

.empty-state .btn-primary:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 15px rgba(140, 85, 56, 0.3);
}

/* Week navigation styling */
.week-nav {
  padding: 0.5rem 0;
}

.week-nav .btn-light {
  border: 1px solid #e0e0e0;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.week-nav .btn-light:hover {
  background-color: #f5e6dc;
  border-color: #c9a96c;
  color: #8c5538;
}

.week-nav h5 {
  color: #8c5538;
  min-width: 200px;
  text-align: center;
}

@media screen and (max-width: 767px) {
  .week-nav h5 {
    min-width: auto;
    font-size: 1rem;
  }

  .week-nav .btn-light {
    width: 40px;
    height: 40px;
    min-width: 40px;
  }
}

/* ================================================
   Customer Area (mobile layout)
   ================================================ */

@media screen and (max-width: 767px) {
  .customer-layout {
    margin-left: 0;
    margin-right: 0;
  }

  .customer-sidebar-col {
    flex: 0 0 52px;
    max-width: 52px;
    padding-left: 0;
    padding-right: 0;
  }

  .customer-content-col {
    padding-left: 10px;
    padding-right: 10px;
  }

  .customer-sidebar-col .nav {
    padding-top: 0.25rem !important;
  }

  /* Sidebar is hidden on mobile now (offcanvas is used instead) */
}

/* ================================================
   MyWeek Page (mobile density)
   ================================================ */

@media screen and (max-width: 767px) {
  /* Keep the week switcher visible while scrolling */
  #wrapper .week-nav {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #fff;
  }

  /* Make the card-style rows denser and easier to scan */
  #wrapper .t-table {
    border-spacing: 0 8px !important;
  }

  /* Keep the slim header divider visible (but not card-styled) */
  #wrapper .t-tr.header {
    padding: 0;
    height: 6px;
    border: 0;
    box-shadow: none;
  }

  #wrapper .t-tr {
    border: 1px solid rgba(140, 85, 56, 0.12);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    padding: 10px 0 6px;
  }

  /* Left accent stripe for clearer card separation */
  #wrapper .t-tr::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: #c9a96c;
    border-top-left-radius: 0.3rem;
    border-bottom-left-radius: 0.3rem;
  }

  #wrapper .t-tr.header::after {
    display: none;
    content: none;
  }

  #wrapper .t-tr .cell {
    margin-bottom: 6px;
  }

  #wrapper .t-tr .cell:before {
    margin-bottom: 2px;
    font-size: 9px;
    line-height: 9px;
  }

  /* 1) Date formatting enhancement (weekday emphasis) */
  #wrapper .myweek-date .myweek-day {
    font-weight: 700;
    color: #8c5538;
    margin-right: 0.35rem;
    white-space: nowrap;
  }

  #wrapper .myweek-date .myweek-datetime {
    font-weight: 600;
    white-space: nowrap;
  }

  /* 2) Class name typography (mobile) */
  #wrapper .myweek-class-name {
    font-size: 1.05rem;
    font-weight: 500;
    color: #8c5538;
  }

  #wrapper .cell {
    margin: 4px;
    padding: 2px 6px;
  }

  /* Row number as a compact badge (top-right) */
  #wrapper .t-tr {
    position: relative;
  }

  #wrapper .myweek-row-index {
    position: absolute;
    top: 8px;
    right: 10px;
    margin: 0;
    padding: 0;
    width: auto;
  }

  #wrapper .myweek-row-index:before {
    display: none;
    content: none;
  }

  #wrapper .myweek-index-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    font-size: 12px;
    line-height: 1;
    font-weight: 600;
    border-radius: 999px;
    border: 1px solid #c9a96c;
    color: #8c5538;
    background: #fff;
  }

  /* Primary action should be an easy tap target */
  #wrapper .btn-cancel-class {
    width: 100%;
  }
}

/* ================================================
   Generic Button Styles
   ================================================ */

.btn-view-details {
  background: linear-gradient(135deg, #8c5538 0%, #a86c4a 100%);
  color: white;
  border: none;
  border-radius: 20px;
  padding: 8px 16px;
  font-weight: 500;
  transition: all 0.2s ease;
  white-space: nowrap; /* Prevent wrapping on desktop */
}

.btn-view-details:hover {
  transform: scale(1.02);
  box-shadow: 0 4px 12px rgba(140, 85, 56, 0.3);
  color: white;
}

.btn-view-details:active {
  transform: scale(0.98);
}

.btn-view-details i {
  margin-right: 4px;
}

/* ================================================
   MySubs Page (mobile card styling)
   ================================================ */

@media screen and (max-width: 767px) {
  /* Card-style rows for subscriptions */
  .t-wrapper-medium .t-table,
  .t-wrapper-small .t-table {
    border-spacing: 0 8px !important;
  }

  /* Hide header row on mobile */
  .t-wrapper-medium .t-tr.header,
  .t-wrapper-small .t-tr.header {
    display: none !important;
  }

  /* Card styling for each subscription row */
  .t-wrapper-medium .t-tr,
  .t-wrapper-small .t-tr {
    position: relative;
    border: 1px solid rgba(140, 85, 56, 0.12);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    padding: 12px 10px 10px;
    border-radius: 0.3rem;
    margin-bottom: 8px;
  }

  /* Left accent stripe */
  .t-wrapper-medium .t-tr::before,
  .t-wrapper-small .t-tr::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: #c9a96c;
    border-top-left-radius: 0.3rem;
    border-bottom-left-radius: 0.3rem;
  }

  /* Override chevron positioning for mobile cards */
  .t-wrapper-medium .js-clickable-table .js-clickable-row::after,
  .t-wrapper-small .js-clickable-table .js-clickable-row::after {
    display: none; /* Hide chevron on mobile card layout */
  }

  /* Row number badge (top-right) */
  .t-wrapper-medium .card-row-index,
  .t-wrapper-small .card-row-index {
    position: absolute;
    top: 8px;
    right: 10px;
    margin: 0;
    padding: 0;
    width: auto;
  }

  .t-wrapper-medium .card-row-index::before,
  .t-wrapper-small .card-row-index::before {
    display: none !important;
  }

  .t-wrapper-medium .card-index-badge,
  .t-wrapper-small .card-index-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 999px;
    border: 1px solid #c9a96c;
    color: #8c5538;
    background: #fff;
  }

  /* Card title emphasis */
  .t-wrapper-medium .card-title-cell,
  .t-wrapper-small .card-title-cell {
    font-size: 1.05rem;
    font-weight: 600;
    color: #8c5538;
    padding-right: 40px; /* Space for badge */
  }

  /* Cell spacing */
  .t-wrapper-medium .t-tr .cell,
  .t-wrapper-small .t-tr .cell {
    margin-bottom: 4px;
    padding: 2px 6px;
  }

  .t-wrapper-medium .t-tr .cell::before,
  .t-wrapper-small .t-tr .cell::before {
    margin-bottom: 2px;
    font-size: 9px;
    line-height: 9px;
  }

  /* Visits remaining styling */
  .t-wrapper-medium .t-tr .cell .text-success,
  .t-wrapper-small .t-tr .cell .text-success {
    font-size: 1.1rem;
  }

  /* Action/Details button cell */
  .t-wrapper-medium .card-action-cell,
  .t-wrapper-small .card-action-cell {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(140, 85, 56, 0.1);
  }

  .t-wrapper-medium .card-action-cell::before,
  .t-wrapper-small .card-action-cell::before {
    display: none !important;
  }

  .btn-view-details {
    width: 100%;
  }
}

/* ================================================
   Customer Calendar Fixes
   ================================================ */

/* Fix "Reģistrēta" strip overflow */
.classbutton_calendar,
.classbutton {
  overflow: hidden !important;
  /* Removed border-radius override to respect original shape */
}

/* Prevent unwanted transparency/hover effects in customer calendar */
/* For cells in non-header rows, ensure they stay white */
.t-wrapper-larger .t-tr:not(.header) .cell:hover,
.t-wrapper-larger .t-tr:not(.header):hover {
  background-color: white !important;
  opacity: 1 !important;
}

/* For header row and its cells, keep glass brown background on hover */
.t-wrapper-larger .t-tr.header:hover,
.t-wrapper-larger .t-tr.header .cell:hover {
  opacity: 1 !important;
  background-color: rgba(140, 85, 56, 0.85) !important;
}

/* Remove visual vertical line (accent stripe) leaking from other views */
.t-wrapper-larger .t-tr::after {
  display: none !important;
  content: none !important;
}

/* Enhanced registration status badge */
.class-regslip {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.95) 0%,
    rgba(245, 245, 245, 0.95) 100%
  ) !important;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  padding: 4px 0 !important;
  font-size: 11px !important;
  letter-spacing: 0.3px;
}

.class-regslip strong em {
  color: #2e7d32; /* Green for registered */
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.class-regslip strong em::before {
  content: "✓";
  font-style: normal;
  font-weight: bold;
}

/* Date badge next to day name */
.cal_mobile_date {
  font-size: 0.85em;
  font-weight: 600;
  color: #8c5538;
  margin-left: 0.5rem;
}

/* Time slot styling - smaller, lighter */
.timeslot-time {
  font-size: 1.25rem;
  font-weight: 600;
  color: #8c5538;
  padding: 0;
  margin: 0;
}

@media screen and (max-width: 390px) {
  .timeslot-time {
    font-size: 1.1rem;
  }

  .cal_mobile_date {
    font-size: 0.7em;
  }
}

/* Empty day state */
.cal_mobile_empty {
  color: #999;
  font-size: 0.9rem;
  font-style: italic;
  padding: 1rem 0;
  text-align: center;
}

/* ===== Print styles for trainer customer report ===== */
@media print {
  /* Hide navigation, sidebar, controls */
  .piyo-menu-fab,
  .offcanvas,
  .d-print-none,
  nav,
  footer,
  .collapse {
    display: none !important;
  }

  /* Hide sidebar column */
  .row > .col-1,
  .row > .col-xl-2,
  .row > .col-lg-2,
  .row > .col-md-2 {
    display: none !important;
  }

  /* Make content full width */
  .row > .col-12,
  .row > .col-md-10,
  .row > .col-xl-10,
  .row > .col-lg-10 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  .t-wrapper-medium {
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Show print-only elements */
  .d-print-block {
    display: block !important;
  }
  .d-print-inline {
    display: inline !important;
  }
  .d-print-table-cell {
    display: table-cell !important;
  }

  /* Table adjustments */
  .t-table {
    font-size: 11px;
  }
  .t-table .cell {
    padding: 2px 4px !important;
  }
  .sticky-all {
    position: static !important;
  }

  /* Preserve colors in print */
  .t-tr .rounded {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  .t-tr.header {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* No page breaks inside rows */
  .t-tr {
    page-break-inside: avoid;
  }
}

/* ============================================================
   Customer search typeahead  (schedule/customer_search.html)
   Native to the trainer-area "glass pill" language: frosted
   surfaces, soft layered shadows, WorkSans UI / Neoteric display.
   ============================================================ */
.cust-search-wrap {
  max-width: 720px;
  margin-inline: auto;
  padding-inline: 1rem;
}

.cust-search-hero {
  text-align: center;
  padding-top: clamp(1rem, 6vh, 4rem);
}

.cust-search-title {
  font-family: "Neoteric-Light", "WorkSans", sans-serif;
  font-size: clamp(1.9rem, 5vw, 2.6rem);
  color: #24292e;
  margin-bottom: 0.15rem;
  letter-spacing: 0.01em;
}

.cust-search-sub {
  color: #6c757d;
  font-size: 0.95rem;
  margin-bottom: 1.6rem;
}

/* --- the field (hero) + dropdown anchor --- */
.cust-search-field {
  position: relative;
  text-align: left;
}

.cust-search-ico {
  position: absolute;
  left: 1.15rem;
  top: 50%;
  transform: translateY(-50%);
  color: #adb5bd;
  font-size: 1rem;
  pointer-events: none;
  transition: color 0.15s ease;
}

.cust-search-input {
  width: 100%;
  height: 60px;
  padding: 0 3.2rem 0 3rem;
  font-size: 1.1rem;
  font-family: "WorkSans", sans-serif;
  color: #24292e;
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: blur(5px) saturate(180%);
  backdrop-filter: blur(5px) saturate(180%);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 30px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 6px 18px rgba(0, 0, 0, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
  transition: box-shadow 0.18s ease, border-color 0.18s ease,
    background 0.18s ease;
  outline: none;
}

.cust-search-input::placeholder {
  color: #adb5bd;
}

.cust-search-input:focus {
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(13, 110, 253, 0.45);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 8px 26px rgba(0, 0, 0, 0.08),
    0 0 0 4px rgba(13, 110, 253, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.cust-search-field:focus-within .cust-search-ico {
  color: #495057;
}

.cust-search-clear {
  position: absolute;
  right: 0.9rem;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.06);
  color: #6c757d;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease;
}

.cust-search-clear:hover {
  background: rgba(0, 0, 0, 0.12);
  color: #24292e;
}

.cust-search-clear:active {
  transform: translateY(-50%) scale(0.9);
}

.cust-search-spinner {
  position: absolute;
  right: 1.05rem;
  top: 50%;
  width: 20px;
  height: 20px;
  margin-top: -10px;
  border: 2.5px solid rgba(13, 110, 253, 0.18);
  border-top-color: #0d6efd;
  border-radius: 50%;
  animation: custSearchSpin 0.6s linear infinite;
}

/* --- the frosted dropdown panel --- */
.cust-search-panel {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 0.6rem);
  z-index: 1050;
  background: rgba(255, 255, 255, 0.86);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  backdrop-filter: blur(12px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 22px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08), 0 12px 28px rgba(0, 0, 0, 0.12),
    0 24px 60px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.7);
  padding: 0.4rem;
  max-height: min(60vh, 460px);
  overflow-y: auto;
  overscroll-behavior: contain;
  animation: custSearchPanelIn 0.16s ease both;
}

@keyframes custSearchPanelIn {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
}

.cust-search-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.85rem;
  min-height: 58px;
  padding: 0.55rem 0.7rem;
  border-radius: 16px;
  text-decoration: none;
  color: #24292e;
  cursor: pointer;
  animation: custSearchReveal 0.26s ease both;
  animation-delay: calc(var(--row-i, 0) * 28ms);
  transition: background 0.13s ease, transform 0.1s ease;
}

.cust-search-row + .cust-search-row {
  margin-top: 2px;
}

.cust-search-row:hover,
.cust-search-row.is-active {
  background: rgba(13, 110, 253, 0.09);
}

.cust-search-row.is-active {
  box-shadow: inset 0 0 0 1px rgba(13, 110, 253, 0.25);
}

.cust-search-row:active {
  transform: scale(0.99);
}

.cust-search-chip {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "WorkSans", sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  color: #fff;
  background: linear-gradient(135deg, #495057, #24292e);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
  flex-shrink: 0;
}

.cust-search-meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.cust-search-name {
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cust-search-contact {
  font-size: 0.82rem;
  color: #6c757d;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cust-search-status {
  font-size: 0.74rem;
  font-weight: 600;
  color: #495057;
  background: rgba(0, 0, 0, 0.06);
  padding: 0.28rem 0.7rem;
  border-radius: 20px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Trainer accounts show up in the customer search too — badge them so they
   read as trainers at a glance. Kept visible on mobile (unlike the status
   pill): "is this a trainer?" matters more on a small screen, not less. */
.cust-search-trainer {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #59359a;
  background: rgba(111, 66, 193, 0.13);
  padding: 0.28rem 0.6rem;
  border-radius: 20px;
  white-space: nowrap;
  flex-shrink: 0;
}

.cust-search-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 2rem 1rem;
  color: #adb5bd;
}

.cust-search-empty i {
  font-size: 1.6rem;
}

.cust-search-empty span {
  font-size: 0.92rem;
}

.cust-search-hint {
  margin-top: 1rem;
  font-size: 0.8rem;
  color: #adb5bd;
}

.cust-search-hint i {
  margin-right: 0.3rem;
}

.cust-search-add {
  margin-top: 1.4rem;
}

@keyframes custSearchReveal {
  from {
    opacity: 0;
    transform: translateY(5px);
  }
}

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

/* --- mobile: full-bleed panel, taller rows, never a sideways scroll --- */
@media (max-width: 575px) {
  .cust-search-input {
    height: 56px;
    font-size: 1rem;
  }

  .cust-search-panel {
    border-radius: 18px;
    max-height: 70vh;
  }

  .cust-search-row {
    min-height: 64px;
  }

  .cust-search-contact {
    font-size: 0.78rem;
  }

  /* keep the status from crowding the name on the narrowest screens */
  .cust-search-status {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cust-search-panel,
  .cust-search-row {
    animation: none;
  }
}

/* ============================================================
   Customer detail — tabbed workspace  (customer_details.html)
   Shares the trainer-area glass language with .cust-search-*.
   ============================================================ */
.cust-detail {
  max-width: 1120px;
  margin-inline: auto;
  padding-inline: 1rem;
}

/* --- customer header --- */
.cust-detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  flex-wrap: wrap;
  padding: 1.1rem 1.3rem;
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: blur(8px) saturate(180%);
  backdrop-filter: blur(8px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 22px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 8px 22px rgba(0, 0, 0, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.cust-detail-id {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-width: 0;
}

.cust-detail-avatar {
  width: 58px;
  height: 58px;
  flex-shrink: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "WorkSans", sans-serif;
  font-weight: 600;
  font-size: 1.3rem;
  color: #fff;
  background: linear-gradient(135deg, #495057, #24292e);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.cust-detail-name {
  font-family: "Neoteric-Light", "WorkSans", sans-serif;
  font-size: clamp(1.5rem, 3.5vw, 2.05rem);
  color: #24292e;
  margin: 0 0 0.3rem;
  line-height: 1.1;
}

.cust-detail-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.9rem;
  font-size: 0.85rem;
  color: #6c757d;
}

.cust-detail-facts i {
  margin-right: 0.25rem;
  color: #adb5bd;
}

/* status pill — shared by the header and the Profils tab */
.cust-detail-status {
  font-weight: 600;
  font-size: 0.78rem;
  padding: 0.2rem 0.7rem;
  border-radius: 20px;
  background: rgba(0, 0, 0, 0.06);
  color: #495057;
}
.cust-detail-status--active {
  background: rgba(25, 135, 84, 0.14);
  color: #146c43;
}
.cust-detail-status--resumed {
  background: rgba(13, 110, 253, 0.14);
  color: #0a58ca;
}
.cust-detail-status--stopped {
  background: rgba(255, 193, 7, 0.2);
  color: #997404;
}
.cust-detail-status--lost,
.cust-detail-status--deleted {
  background: rgba(220, 53, 69, 0.13);
  color: #b02a37;
}

/* Trainer accounts can be opened here as well — mark the header so the
   nodarbību/abonementu history is read as their own, not the ones they lead. */
.cust-detail-trainer {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-weight: 600;
  font-size: 0.78rem;
  padding: 0.2rem 0.7rem;
  border-radius: 20px;
  background: rgba(111, 66, 193, 0.13);
  color: #59359a;
}

.cust-detail-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.cust-detail-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.88rem;
  font-weight: 600;
  padding: 0.5rem 1rem;
  border-radius: 22px;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.1s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.cust-detail-btn:active {
  transform: scale(0.97);
}
.cust-detail-btn--primary {
  background: #24292e;
  color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}
.cust-detail-btn--primary:hover {
  background: #0d1117;
  color: #fff;
}
.cust-detail-btn--ghost {
  background: rgba(255, 255, 255, 0.6);
  border-color: rgba(0, 0, 0, 0.1);
  color: #495057;
}
.cust-detail-btn--ghost:hover {
  background: #fff;
  color: #24292e;
}

.cust-detail-banner {
  margin-top: 1rem;
  margin-bottom: 0;
  border-radius: 16px;
}

/* --- stats strip --- */
.cust-detail-stats {
  display: flex;
  gap: 0.7rem;
  flex-wrap: wrap;
  margin-top: 1rem;
}

.cust-detail-stat {
  flex: 1 1 110px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.85rem 0.5rem;
  background: rgba(255, 255, 255, 0.7);
  -webkit-backdrop-filter: blur(6px) saturate(180%);
  backdrop-filter: blur(6px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 18px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05), 0 6px 16px rgba(0, 0, 0, 0.05);
  border-top: 3px solid #adb5bd;
}
.cust-detail-stat--total { border-top-color: #495057; }
.cust-detail-stat--ok { border-top-color: #198754; }
.cust-detail-stat--warn { border-top-color: #ffc107; }
.cust-detail-stat--muted { border-top-color: #adb5bd; }
.cust-detail-stat--danger { border-top-color: #dc3545; }

.cust-detail-stat-num {
  font-family: "Neoteric-Light", "WorkSans", sans-serif;
  font-size: 1.7rem;
  line-height: 1;
  color: #24292e;
}
.cust-detail-stat-label {
  font-size: 0.74rem;
  color: #6c757d;
  margin-top: 0.25rem;
  text-align: center;
}

/* --- sticky pill tab bar --- */
.cust-detail-tabs {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  flex-wrap: nowrap;
  gap: 0.35rem;
  margin: 1.1rem 0 0;
  padding: 0.45rem;
  list-style: none;
  background: rgba(255, 255, 255, 0.78);
  -webkit-backdrop-filter: blur(10px) saturate(180%);
  backdrop-filter: blur(10px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 20px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 6px 16px rgba(0, 0, 0, 0.06);
  overflow-x: auto;
  scrollbar-width: none;
}
.cust-detail-tabs::-webkit-scrollbar { display: none; }

.cust-detail-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  white-space: nowrap;
  padding: 0.5rem 0.95rem;
  border: none;
  border-radius: 15px;
  background: transparent;
  color: #6c757d;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.cust-detail-tab:hover {
  background: rgba(0, 0, 0, 0.04);
  color: #24292e;
}
.cust-detail-tab.active {
  background: #24292e;
  color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}
.cust-detail-tab-count {
  font-size: 0.72rem;
  padding: 0.05rem 0.45rem;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.08);
  color: inherit;
}
.cust-detail-tab.active .cust-detail-tab-count {
  background: rgba(255, 255, 255, 0.25);
}

/* --- tab panes / panels --- */
.cust-detail-panes {
  margin-top: 0.8rem;
}

.cust-detail-panel {
  background: rgba(255, 255, 255, 0.82);
  -webkit-backdrop-filter: blur(8px) saturate(180%);
  backdrop-filter: blur(8px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 20px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 8px 22px rgba(0, 0, 0, 0.06);
  padding: 1rem 1.2rem;
  animation: custDetailPaneIn 0.2s ease both;
}

@keyframes custDetailPaneIn {
  from { opacity: 0; transform: translateY(6px); }
}

/* --- profile field grid --- */
.cust-detail-fields {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem 1.5rem;
  margin: 0;
}
.cust-detail-field {
  padding: 0.5rem 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
.cust-detail-field dt {
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #adb5bd;
  font-weight: 600;
  margin-bottom: 0.15rem;
}
.cust-detail-field dd {
  margin: 0;
  font-size: 0.95rem;
  color: #24292e;
}

/* --- panel toolbar (Abonementi tab "Pievienot abonementu" etc.) --- */
.cust-detail-toolbar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 0.75rem;
}

/* --- shared data table --- */
.cust-detail-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}
.cust-detail-table thead th {
  text-align: left;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #adb5bd;
  font-weight: 600;
  padding: 0.4rem 0.6rem;
  border-bottom: 2px solid rgba(0, 0, 0, 0.06);
}
.cust-detail-table tbody td {
  padding: 0.6rem 0.6rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  color: #24292e;
  vertical-align: middle;
}
.cust-detail-table tbody tr:last-child td {
  border-bottom: none;
}
.cust-detail-table tbody tr {
  transition: background 0.12s ease;
}
.cust-detail-table tbody tr:hover {
  background: rgba(13, 110, 253, 0.05);
}

/* small status tags inside tables */
.cust-detail-tag {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.18rem 0.55rem;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.06);
  color: #495057;
}
.cust-detail-tag--ok { background: rgba(25, 135, 84, 0.14); color: #146c43; }
.cust-detail-tag--warn { background: rgba(255, 193, 7, 0.22); color: #997404; }
.cust-detail-tag--info { background: rgba(13, 110, 253, 0.13); color: #0a58ca; }
.cust-detail-tag--muted { background: rgba(0, 0, 0, 0.07); color: #6c757d; }
.cust-detail-tag--danger { background: rgba(220, 53, 69, 0.13); color: #b02a37; }

/* --- per-row status control (keeps Bootstrap .btn base for the JS) --- */
.cust-detail .status-dropdown-toggle {
  border-radius: 14px;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.28rem 0.7rem;
  border: none;
}
.cust-detail .status-dropdown-toggle.btn-success {
  background: rgba(25, 135, 84, 0.16);
  color: #146c43;
}
.cust-detail .status-dropdown-toggle.btn-warning {
  background: rgba(255, 193, 7, 0.25);
  color: #997404;
}
.cust-detail .status-dropdown-toggle.btn-danger {
  background: rgba(220, 53, 69, 0.16);
  color: #b02a37;
}
.cust-detail .status-dropdown-toggle:disabled {
  opacity: 0.55;
}

/* --- subscription pill (Nodarbības table, Abonements cell) ---------------
   Editorial ticket-stub: neutral surface card with the user-chosen sub
   color living ONLY as decoration (left rail / progress fill / id chip
   tint). Avoids the white-on-arbitrary-hex contrast problem. */
.cust-detail .sub-pill {
  --pill-bg: #6c757d;                                              /* fallback */
  --pill-tint: color-mix(in srgb, var(--pill-bg) 7%, #fff);
  --pill-edge: color-mix(in srgb, var(--pill-bg) 26%, rgba(15, 23, 42, 0.08));
  --pill-text-dim: #5a6470;

  position: relative;
  display: inline-flex;
  flex-direction: column;
  gap: 0.32rem;
  min-width: 12rem;
  max-width: 19rem;
  padding: 0.5rem 0.75rem 0.5rem 1rem;
  background: linear-gradient(180deg, #ffffff 0%, var(--pill-tint) 100%);
  border: 1px solid var(--pill-edge);
  border-radius: 10px;
  box-shadow:
    0 1px 0 rgba(0, 0, 0, 0.02),
    0 2px 6px rgba(15, 23, 42, 0.04);
  font-size: 0.78rem;
  line-height: 1.25;
  color: #1f2933;
  overflow: hidden;
}
.cust-detail .sub-pill::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--pill-bg) 88%, #fff) 0%,
    var(--pill-bg) 55%,
    color-mix(in srgb, var(--pill-bg) 78%, #000) 100%
  );
}
.cust-detail .sub-pill-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.55rem;
}
.cust-detail .sub-pill-name {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 600;
  font-size: 0.83rem;
  color: #11141a;
  letter-spacing: -0.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cust-detail .sub-pill-id {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 1px 7px;
  border-radius: 999px;
  color: color-mix(in srgb, var(--pill-bg) 65%, #2c3340);
  background: color-mix(in srgb, var(--pill-bg) 14%, #fff);
  border: 1px solid color-mix(in srgb, var(--pill-bg) 22%, transparent);
}
.cust-detail .sub-pill-progress {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}
.cust-detail .sub-pill-bar {
  position: relative;
  flex: 1 1 auto;
  height: 5px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.07);
  overflow: hidden;
}
.cust-detail .sub-pill-bar-fill {
  display: block;
  height: 100%;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--pill-bg) 75%, #fff) 0%,
    var(--pill-bg) 100%
  );
  border-radius: inherit;
  transition: width 0.25s ease;
}
.cust-detail .sub-pill-count {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
  font-size: 0.74rem;
  letter-spacing: 0.01em;
  white-space: nowrap;
  color: #11141a;
}
.cust-detail .sub-pill-count strong { font-weight: 700; }
.cust-detail .sub-pill-count-sep {
  margin: 0 0.18rem;
  color: var(--pill-text-dim);
}
.cust-detail .sub-pill-count-total {
  color: var(--pill-text-dim);
  font-weight: 500;
}
.cust-detail .sub-pill-dates {
  display: flex;
  align-items: center;
  gap: 0.38rem;
  font-size: 0.72rem;
  color: var(--pill-text-dim);
  font-variant-numeric: tabular-nums;
}
.cust-detail .sub-pill-dates i {
  font-size: 0.7rem;
  color: color-mix(in srgb, var(--pill-bg) 50%, #6c757d);
}
.cust-detail .sub-pill-dates-sep {
  color: color-mix(in srgb, var(--pill-bg) 40%, #adb5bd);
  font-weight: 500;
}
@media (max-width: 760px) {
  .cust-detail .sub-pill { width: 100%; max-width: none; }
}
@media (forced-colors: active) {
  .cust-detail .sub-pill { border-color: CanvasText; }
  .cust-detail .sub-pill::before { background: Highlight; }
  .cust-detail .sub-pill-bar-fill { background: Highlight; }
}

/* --- subscription pill cell controls --- */
.cust-detail .sub-pill-cell .btn {
  border-radius: 13px;
  font-size: 0.78rem;
  margin-top: 0.25rem;
}

/* --- ENDED subscription (admin override) — deliberately loud so it can't be
   picked by mistake --- */
.cust-detail .ended-sub-zone {
  margin-top: 0.5rem;
  padding: 0.5rem 0.6rem;
  border: 2px dashed #d39e00;
  border-radius: 12px;
  background: repeating-linear-gradient(
    45deg,
    rgba(255, 193, 7, 0.13),
    rgba(255, 193, 7, 0.13) 10px,
    rgba(255, 193, 7, 0.22) 10px,
    rgba(255, 193, 7, 0.22) 20px
  );
}
.cust-detail .ended-sub-warning {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #8a6100;
  margin-bottom: 0.4rem;
}
.cust-detail .ended-sub-warning i {
  color: #d39e00;
}
.cust-detail .sub-pill-cell .btn.ended-sub-btn {
  border: 1.5px solid #b8860b;
  background: #ffc107;
  color: #4d3800;
  font-weight: 600;
}
.cust-detail .sub-pill-cell .btn.ended-sub-btn:hover {
  background: #e0a800;
  color: #2e2200;
}
.cust-detail .sub-pill-cell .btn.ended-sub-btn:disabled {
  opacity: 0.5;
}

/* --- pagination --- */
.cust-detail-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  margin-top: 1rem;
}
.cust-detail-pager-btn {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.1);
  color: #495057;
  text-decoration: none;
  transition: background 0.13s ease, transform 0.1s ease;
}
.cust-detail-pager-btn:hover {
  background: #fff;
  color: #24292e;
}
.cust-detail-pager-btn:active {
  transform: scale(0.92);
}
.cust-detail-pager-btn.is-disabled {
  opacity: 0.4;
  pointer-events: none;
}
.cust-detail-pager-info {
  font-size: 0.85rem;
  color: #6c757d;
  font-weight: 600;
}

/* --- empty state --- */
.cust-detail-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 2.2rem 1rem;
  color: #adb5bd;
}
.cust-detail-empty i { font-size: 1.7rem; }
.cust-detail-empty span { font-size: 0.92rem; }

/* --- payment-link tools on the Pasutijumi tab --- */
.order-actions-cell { white-space: nowrap; }
.order-actions-cell .btn { margin: 0 0.15rem 0.15rem 0; }
.order-bank-panel {
  margin-top: 0.5rem;
  padding: 0.6rem 0.7rem;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.7);
  white-space: normal;
  font-size: 0.85rem;
  max-width: 420px;
}
.order-bank-panel-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.35rem;
}
.order-bank-panel-amount { font-weight: 600; color: #24292e; }
.order-bank-panel-line { margin: 0 0 0.3rem; color: #495057; }
.order-bank-panel-warn {
  margin: 0.4rem 0 0.3rem;
  padding: 0.45rem 0.6rem;
  border-radius: 8px;
  background: rgba(255, 193, 7, 0.18);
  color: #7a5b00;
}
.order-bank-panel-link {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin-top: 0.4rem;
}
.order-bank-panel-link label {
  width: 100%;
  font-size: 0.75rem;
  font-weight: 600;
  color: #6c757d;
}
.order-bank-panel-link input { flex: 1 1 220px; font-size: 0.8rem; }
.order-bank-panel-hint {
  margin: 0.35rem 0 0;
  font-size: 0.8rem;
  color: #6c757d;
}

/* --- audit trail --- */
.cust-detail-audit {
  list-style: none;
  margin: 0;
  padding: 0;
}
.cust-detail-audit-item {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.6rem 0.2rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
.cust-detail-audit-item:last-child { border-bottom: none; }
.cust-detail-audit-action {
  flex-shrink: 0;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.2rem 0.6rem;
  border-radius: 12px;
  background: rgba(36, 41, 46, 0.08);
  color: #24292e;
}
.cust-detail-audit-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.cust-detail-audit-actor {
  font-size: 0.88rem;
  color: #24292e;
  font-weight: 600;
}
.cust-detail-audit-detail {
  font-size: 0.78rem;
  color: #adb5bd;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cust-detail-audit-time {
  flex-shrink: 0;
  font-size: 0.78rem;
  color: #adb5bd;
}

/* --- tablet & mobile: tables restack into cards --- */
@media (max-width: 768px) {
  .cust-detail-fields {
    grid-template-columns: 1fr;
  }

  .cust-detail-table thead {
    display: none;
  }
  .cust-detail-table,
  .cust-detail-table tbody,
  .cust-detail-table tr,
  .cust-detail-table td {
    display: block;
    width: 100%;
  }
  .cust-detail-table tr {
    margin-bottom: 0.7rem;
    padding: 0.4rem 0.7rem;
    border: 1px solid rgba(0, 0, 0, 0.07);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.6);
  }
  .cust-detail-table tbody tr:last-child td {
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  }
  .cust-detail-table td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 0.45rem 0;
  }
  .cust-detail-table td:last-child {
    border-bottom: none;
  }
  .cust-detail-table td::before {
    content: attr(data-label);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #adb5bd;
    font-weight: 600;
    flex-shrink: 0;
  }
  /* the subscription cell holds buttons — let it stack full-width */
  .cust-detail-table td.sub-pill-cell {
    flex-direction: column;
    align-items: stretch;
    gap: 0.35rem;
  }
  .cust-detail-table td.sub-pill-cell::before {
    margin-bottom: 0.1rem;
  }
  /* same reason as .sub-pill-cell above: this cell holds buttons and, once a
     bank check has run, a result panel — it needs the full card width */
  .cust-detail-table td.order-actions-cell {
    flex-direction: column;
    align-items: stretch;
    gap: 0.35rem;
  }
  .cust-detail-table td.order-actions-cell::before {
    margin-bottom: 0.1rem;
  }

  .cust-detail-header {
    padding: 1rem;
  }
  .cust-detail-actions {
    width: 100%;
  }
  .cust-detail-actions .cust-detail-btn {
    flex: 1;
    justify-content: center;
  }
  .cust-detail-stat {
    flex-basis: calc(33.333% - 0.5rem);
  }
}

/* --- Datums cell spans: desktop default spacing -------------------------
   Template renders <span class="weekday"><span class="date"><span class="time">
   with no whitespace so mobile CSS can fully control layout. Desktop just
   needs a small gap between the three. */
.cust-detail-table--classes .cust-class-weekday,
.cust-detail-table--classes .cust-class-date {
  margin-right: 0.4rem;
}

/* --- Class history (Nodarbības) on mobile — museum card v2.
   Title lives on its own full-width row (no more squeezed grid column,
   no more character-shattering). Date band gets a small bordered weekday
   stamp + tabular date · time. Type + location share a quiet metadata
   strip below. Hairline above the title divides the header band from
   the body, so the card reads as three discrete tiers. */
@media (max-width: 768px) {
  .cust-detail-table.cust-detail-table--classes thead { display: none; }

  .cust-detail-table.cust-detail-table--classes,
  .cust-detail-table.cust-detail-table--classes tbody {
    display: block;
    width: 100%;
  }
  .cust-detail-table.cust-detail-table--classes tbody {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
  }

  .cust-detail-table.cust-detail-table--classes tr {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "num     status"
      "title   title"
      "date    date"
      "type    location"
      "pill    pill";
    column-gap: 0.7rem;
    row-gap: 0.5rem;
    align-items: baseline;
    margin: 0;
    padding: 0.95rem 1.05rem 1.05rem;
    background: linear-gradient(180deg, #fff 0%, rgba(248, 250, 252, 0.85) 100%);
    border: 1px solid rgba(15, 23, 42, 0.07);
    border-radius: 18px;
    box-shadow:
      0 1px 0 rgba(0, 0, 0, 0.02),
      0 4px 14px rgba(15, 23, 42, 0.05);
  }

  /* Cell reset — beat the generic mobile rules. */
  .cust-detail-table.cust-detail-table--classes td {
    display: block;
    padding: 0;
    border: none;
    width: auto;
  }
  .cust-detail-table.cust-detail-table--classes td::before { content: none; }

  /* === Catalogue number ============================================ */
  .cust-detail-table.cust-detail-table--classes td[data-label="#"] {
    grid-area: num;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #94a3b8;
    font-variant-numeric: tabular-nums;
    align-self: center;
    line-height: 1;
  }
  .cust-detail-table.cust-detail-table--classes td[data-label="#"]::before {
    content: "Nº ";
    color: #cbd5e1;
    font-weight: 600;
  }

  /* === Status pill (Bootstrap btn — keep its own styling) ========== */
  .cust-detail-table.cust-detail-table--classes td[data-label="Statuss"] {
    grid-area: status;
    justify-self: end;
    align-self: center;
  }

  /* === Title — full-width, word-boundary wrap ====================== */
  .cust-detail-table.cust-detail-table--classes td[data-label="Nosaukums"] {
    grid-area: title;
    font-size: 1.08rem;
    font-weight: 700;
    color: #0b1220;
    letter-spacing: -0.012em;
    line-height: 1.22;
    overflow-wrap: break-word;
    word-break: normal;
    hyphens: none;
    border-top: 1px solid rgba(15, 23, 42, 0.06);
    padding-top: 0.6rem;
    margin-top: 0.15rem;
  }

  /* === Date band: weekday stamp + date · time string =============== */
  .cust-detail-table.cust-detail-table--classes td[data-label="Datums"] {
    grid-area: date;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    flex-wrap: wrap;
    font-variant-numeric: tabular-nums;
    line-height: 1.25;
    margin-top: 0.1rem;
  }
  .cust-detail-table.cust-detail-table--classes .cust-class-weekday {
    display: inline-block;
    padding: 0.22rem 0.5rem 0.18rem;
    border: 1px solid rgba(15, 23, 42, 0.16);
    border-radius: 6px;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #2c3340;
    background: rgba(15, 23, 42, 0.025);
    line-height: 1;
    font-variant-numeric: normal;
    margin-right: 0; /* override the desktop default */
  }
  .cust-detail-table.cust-detail-table--classes .cust-class-date,
  .cust-detail-table.cust-detail-table--classes .cust-class-time {
    font-size: 0.88rem;
    font-weight: 600;
    color: #11141a;
    margin-right: 0; /* override the desktop default */
  }
  .cust-detail-table.cust-detail-table--classes .cust-class-time::before {
    content: "·";
    color: #cbd5e1;
    margin: 0 0.5rem 0 0.45rem;
    font-weight: 700;
  }

  /* === Metadata strip — type (left) · location (right) ============= */
  .cust-detail-table.cust-detail-table--classes td[data-label="Veids"] {
    grid-area: type;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: #6c757d;
    line-height: 1.35;
    overflow-wrap: break-word;
  }
  .cust-detail-table.cust-detail-table--classes td[data-label="Lokācija"] {
    grid-area: location;
    justify-self: end;
    text-align: right;
    font-size: 0.8rem;
    font-weight: 500;
    color: #2c3340;
    line-height: 1.35;
    overflow-wrap: break-word;
  }

  /* === Sub-pill cell ============================================== */
  .cust-detail-table.cust-detail-table--classes td.sub-pill-cell {
    grid-area: pill;
    margin-top: 0.55rem;
  }

  /* Sub-pill stretches inside the card on narrow screens. */
  .cust-detail .sub-pill {
    width: 100%;
    max-width: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cust-detail-panel {
    animation: none;
  }
}

/* =========================================================================
   Gift-card administration — admin-area page
   Reuses the trainer/customers glass design tokens, scoped to .gc-admin-*.
   ========================================================================= */
.gc-admin {
  font-family: "WorkSans", sans-serif;
  color: #24292e;
}

/* --- header --- */
.gc-admin-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  flex-wrap: wrap;
  padding: 1.1rem 1.3rem;
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: blur(8px) saturate(180%);
  backdrop-filter: blur(8px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 22px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 8px 22px rgba(0, 0, 0, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.gc-admin-headid {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-width: 0;
}
.gc-admin-headicon {
  width: 58px;
  height: 58px;
  flex-shrink: 0;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: #fff;
  background: linear-gradient(135deg, #495057, #24292e);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.gc-admin-title {
  font-family: "Neoteric-Light", "WorkSans", sans-serif;
  font-size: clamp(1.5rem, 3.5vw, 2.05rem);
  color: #24292e;
  margin: 0 0 0.25rem;
  line-height: 1.1;
}
.gc-admin-sub {
  margin: 0;
  font-size: 0.85rem;
  color: #6c757d;
}

/* --- stats strip --- */
.gc-admin-stats {
  display: flex;
  gap: 0.7rem;
  flex-wrap: wrap;
  margin-top: 1rem;
}
.gc-admin-stat {
  flex: 1 1 130px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.85rem 0.5rem;
  background: rgba(255, 255, 255, 0.7);
  -webkit-backdrop-filter: blur(6px) saturate(180%);
  backdrop-filter: blur(6px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 18px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05), 0 6px 16px rgba(0, 0, 0, 0.05);
  border-top: 3px solid #adb5bd;
  text-align: center;
}
.gc-admin-stat--total { border-top-color: #495057; }
.gc-admin-stat--redeemed { border-top-color: #0d6efd; }
.gc-admin-stat--outstanding { border-top-color: #198754; }
.gc-admin-stat--expired { border-top-color: #ffc107; }
.gc-admin-stat--voided { border-top-color: #dc3545; }
.gc-admin-stat--incomplete { border-top-color: #adb5bd; }
.gc-admin-stat-num {
  font-family: "Neoteric-Light", "WorkSans", sans-serif;
  font-size: 1.7rem;
  line-height: 1;
  color: #24292e;
}
.gc-admin-stat-label {
  font-size: 0.74rem;
  color: #6c757d;
  margin-top: 0.3rem;
  font-weight: 600;
}
.gc-admin-stat-sub {
  font-size: 0.68rem;
  color: #adb5bd;
  margin-top: 0.1rem;
}

/* --- filter bar --- */
.gc-admin-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
  padding: 0.7rem 0.8rem;
  background: rgba(255, 255, 255, 0.66);
  -webkit-backdrop-filter: blur(8px) saturate(180%);
  backdrop-filter: blur(8px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 18px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05), 0 6px 16px rgba(0, 0, 0, 0.05);
}
.gc-admin-field--search {
  position: relative;
  flex: 1 1 240px;
  display: flex;
  align-items: center;
}
.gc-admin-field--search i {
  position: absolute;
  left: 0.85rem;
  color: #adb5bd;
  font-size: 0.85rem;
  pointer-events: none;
}
.gc-admin-field--search input {
  width: 100%;
  padding: 0.5rem 0.8rem 0.5rem 2.2rem;
  border-radius: 14px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  background: rgba(255, 255, 255, 0.85);
  font-family: "WorkSans", sans-serif;
  font-size: 0.88rem;
  color: #24292e;
}
.gc-admin-select,
.gc-admin-daterange input {
  padding: 0.5rem 0.7rem;
  border-radius: 14px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  background: rgba(255, 255, 255, 0.85);
  font-family: "WorkSans", sans-serif;
  font-size: 0.85rem;
  color: #495057;
}
.gc-admin-daterange {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.78rem;
  color: #6c757d;
}
.gc-admin-filters input:focus,
.gc-admin-filters select:focus {
  outline: none;
  border-color: #0d6efd;
  box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.12);
}

/* --- shared buttons --- */
.gc-admin-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: "WorkSans", sans-serif;
  font-size: 0.88rem;
  font-weight: 600;
  padding: 0.5rem 1rem;
  border-radius: 22px;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.1s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.gc-admin-btn:active { transform: scale(0.97); }
.gc-admin-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.gc-admin-btn--primary {
  background: #24292e;
  color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}
.gc-admin-btn--primary:hover { background: #0d1117; color: #fff; }
.gc-admin-btn--dark {
  background: rgba(36, 41, 46, 0.9);
  color: #fff;
}
.gc-admin-btn--dark:hover { background: #0d1117; color: #fff; }
.gc-admin-btn--ghost {
  background: rgba(255, 255, 255, 0.6);
  border-color: rgba(0, 0, 0, 0.1);
  color: #495057;
}
.gc-admin-btn--ghost:hover { background: #fff; color: #24292e; }
.gc-admin-btn--danger {
  background: #dc3545;
  color: #fff;
  box-shadow: 0 2px 8px rgba(220, 53, 69, 0.3);
}
.gc-admin-btn--danger:hover { background: #b02a37; color: #fff; }

/* --- table panel --- */
.gc-admin-panel {
  margin-top: 1rem;
  background: rgba(255, 255, 255, 0.82);
  -webkit-backdrop-filter: blur(8px) saturate(180%);
  backdrop-filter: blur(8px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 20px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 8px 22px rgba(0, 0, 0, 0.06);
  padding: 0.6rem 1rem;
  animation: gcAdminIn 0.2s ease both;
}
@keyframes gcAdminIn {
  from { opacity: 0; transform: translateY(6px); }
}

.gc-admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}
.gc-admin-table thead th {
  text-align: left;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #adb5bd;
  font-weight: 600;
  padding: 0.55rem 0.6rem;
  border-bottom: 2px solid rgba(0, 0, 0, 0.06);
}
.gc-admin-th-actions { text-align: right; }
.gc-admin-row td {
  padding: 0.65rem 0.6rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  color: #24292e;
  vertical-align: middle;
}
.gc-admin-row { transition: background 0.12s ease; }
.gc-admin-row:hover { background: rgba(13, 110, 253, 0.05); }
.gc-admin-row--voided { opacity: 0.62; }
.gc-admin-row--voided .gc-admin-cardno { text-decoration: line-through; }
.gc-admin-row--expired { background: rgba(255, 193, 7, 0.05); }

.gc-admin-cardno {
  font-family: "WorkSans", sans-serif;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #24292e;
}
.gc-admin-name { display: block; }
.gc-admin-muted {
  display: block;
  font-size: 0.76rem;
  color: #adb5bd;
}

/* card-type / status tags + badges */
.gc-admin-tag {
  display: inline-block;
  font-size: 0.64rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.1rem 0.4rem;
  border-radius: 8px;
  margin-left: 0.3rem;
  vertical-align: middle;
}
.gc-admin-tag--manual { background: rgba(13, 110, 253, 0.13); color: #0a58ca; }
.gc-admin-badge {
  display: inline-block;
  font-size: 0.74rem;
  font-weight: 600;
  padding: 0.2rem 0.65rem;
  border-radius: 20px;
  background: rgba(0, 0, 0, 0.06);
  color: #495057;
  white-space: nowrap;
}
.gc-admin-badge--ok { background: rgba(25, 135, 84, 0.14); color: #146c43; }
.gc-admin-badge--used { background: rgba(13, 110, 253, 0.13); color: #0a58ca; }
.gc-admin-badge--warn { background: rgba(255, 193, 7, 0.22); color: #997404; }
.gc-admin-badge--danger { background: rgba(220, 53, 69, 0.13); color: #b02a37; }

/* --- per-row action icon buttons --- */
.gc-admin-actions {
  display: flex;
  gap: 0.3rem;
  justify-content: flex-end;
}
.gc-admin-iconbtn {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  background: rgba(255, 255, 255, 0.7);
  color: #495057;
  cursor: pointer;
  font-size: 0.8rem;
  text-decoration: none;
  transition: background 0.13s ease, color 0.13s ease, transform 0.1s ease;
}
.gc-admin-iconbtn:hover { background: #fff; color: #24292e; }
.gc-admin-iconbtn:active { transform: scale(0.92); }
.gc-admin-iconbtn:disabled { opacity: 0.5; cursor: not-allowed; }
.gc-admin-iconbtn--danger { color: #b02a37; }
.gc-admin-iconbtn--danger:hover {
  background: #dc3545;
  color: #fff;
  border-color: #dc3545;
}
.gc-detail-toggle.is-open {
  background: #24292e;
  color: #fff;
  border-color: #24292e;
}
.gc-detail-toggle i { transition: transform 0.15s ease; }
.gc-detail-toggle.is-open i { transform: rotate(180deg); }

/* --- audit / detail drawer --- */
.gc-admin-detailrow td {
  padding: 0 0.6rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
.gc-admin-detail {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  padding: 0.9rem 0.4rem 1rem;
}
.gc-admin-deflist {
  flex: 1 1 280px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem 1.2rem;
  margin: 0;
}
.gc-admin-deflist > div { min-width: 0; }
.gc-admin-def--wide { grid-column: 1 / -1; }
.gc-admin-deflist dt {
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #adb5bd;
  font-weight: 600;
}
.gc-admin-deflist dd {
  margin: 0.1rem 0 0;
  font-size: 0.85rem;
  color: #24292e;
  word-break: break-word;
}
.gc-admin-audit {
  flex: 1 1 280px;
}
.gc-admin-audit h4 {
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #adb5bd;
  font-weight: 600;
  margin: 0 0 0.5rem;
}
.gc-admin-auditrow {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  padding: 0.32rem 0;
  border-bottom: 1px dashed rgba(0, 0, 0, 0.06);
}
.gc-admin-auditrow:last-child { border-bottom: none; }
.gc-admin-auditdot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  background: #adb5bd;
}
.gc-admin-auditdot--issue { background: #198754; }
.gc-admin-auditdot--resend_email { background: #0d6efd; }
.gc-admin-auditdot--void { background: #dc3545; }
.gc-admin-auditact { font-weight: 600; color: #24292e; }
.gc-admin-audittime { margin-left: auto; color: #adb5bd; font-size: 0.74rem; }

/* --- empty state --- */
.gc-admin-empty {
  text-align: center;
  padding: 2.8rem 1rem;
  color: #adb5bd;
}
.gc-admin-empty i { font-size: 2rem; margin-bottom: 0.6rem; }
.gc-admin-empty p { margin: 0; font-size: 0.9rem; }

/* --- pagination --- */
.gc-admin-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  margin-top: 1rem;
}
.gc-admin-pagebtn {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.1);
  color: #495057;
  text-decoration: none;
  transition: background 0.13s ease;
}
.gc-admin-pagebtn:hover { background: #24292e; color: #fff; }
.gc-admin-pageinfo {
  font-size: 0.85rem;
  font-weight: 600;
  color: #6c757d;
}

/* --- modals --- */
.modal-content.gc-admin-modal {
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.96);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  backdrop-filter: blur(12px) saturate(180%);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.22);
  overflow: hidden;
}
.gc-admin-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem 1.3rem 0.8rem;
}
.gc-admin-modal-title {
  font-family: "Neoteric-Light", "WorkSans", sans-serif;
  font-size: 1.4rem;
  color: #24292e;
  margin: 0;
}
.gc-admin-modal-body { padding: 0.4rem 1.3rem 0.4rem; }
.gc-admin-modal-foot {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  padding: 0.8rem 1.3rem 1.2rem;
}
.gc-admin-modal-note {
  font-size: 0.84rem;
  color: #6c757d;
  margin: 0 0 0.8rem;
}
.gc-admin-modal-note--danger {
  background: rgba(220, 53, 69, 0.08);
  border: 1px solid rgba(220, 53, 69, 0.2);
  border-radius: 14px;
  padding: 0.6rem 0.8rem;
  color: #b02a37;
}
.gc-admin-modal-hint {
  font-size: 0.76rem;
  color: #adb5bd;
  margin: 0.8rem 0 0;
}

/* --- modal form fields --- */
.gc-admin-formgrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7rem 0.9rem;
}
.gc-admin-formfield {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}
.gc-admin-formfield--wide { grid-column: 1 / -1; }
.gc-admin-formfield > span {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #6c757d;
  font-weight: 600;
}
.gc-admin-fieldhint {
  font-size: 0.7rem;
  color: #adb5bd;
  margin-top: 0.15rem;
}
.gc-admin-form input,
.gc-admin-form select,
.gc-admin-form textarea {
  width: 100%;
  padding: 0.5rem 0.7rem;
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  background: #fff;
  font-family: "WorkSans", sans-serif;
  font-size: 0.88rem;
  color: #24292e;
}
.gc-admin-form input:focus,
.gc-admin-form select:focus,
.gc-admin-form textarea:focus {
  outline: none;
  border-color: #0d6efd;
  box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.12);
}
.gc-admin-formerror {
  background: rgba(220, 53, 69, 0.1);
  border: 1px solid rgba(220, 53, 69, 0.25);
  color: #b02a37;
  font-size: 0.82rem;
  border-radius: 12px;
  padding: 0.5rem 0.7rem;
  margin-bottom: 0.7rem;
}

/* --- toast --- */
.gc-admin-toast {
  position: fixed;
  right: 1.2rem;
  bottom: 1.2rem;
  z-index: 1090;
  max-width: 340px;
  padding: 0.75rem 1rem;
  border-radius: 14px;
  font-size: 0.86rem;
  font-weight: 600;
  color: #fff;
  background: #24292e;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.25);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
}
.gc-admin-toast.is-visible { opacity: 1; transform: translateY(0); }
.gc-admin-toast--ok { background: #198754; }
.gc-admin-toast--err { background: #dc3545; }

/* --- tablet & mobile: table restacks into cards --- */
@media (max-width: 768px) {
  .gc-admin-table thead { display: none; }
  .gc-admin-table,
  .gc-admin-table tbody,
  .gc-admin-table tr,
  .gc-admin-table td { display: block; width: 100%; }
  .gc-admin-row {
    margin-bottom: 0.7rem;
    padding: 0.45rem 0.75rem;
    border: 1px solid rgba(0, 0, 0, 0.07);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.6);
  }
  .gc-admin-row td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 0.4rem 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  }
  .gc-admin-row td:last-child { border-bottom: none; }
  .gc-admin-row td::before {
    content: attr(data-label);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #adb5bd;
    font-weight: 600;
    flex-shrink: 0;
  }
  .gc-admin-actions { justify-content: flex-end; }
  .gc-admin-muted { text-align: right; }
  .gc-admin-detailrow {
    margin: -0.4rem 0 0.7rem;
    border: 1px solid rgba(0, 0, 0, 0.07);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.55);
  }
  .gc-admin-detailrow td { display: block; }
  .gc-admin-detailrow td::before { content: none; }
  .gc-admin-deflist { grid-template-columns: 1fr; }
  .gc-admin-header { padding: 1rem; }
  .gc-admin-stat { flex-basis: calc(50% - 0.5rem); }
  .gc-admin-formgrid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .gc-admin-panel { animation: none; }
  .gc-admin-toast { transition: none; }
}

/* ============================================================================
   Customer notes — "Piezīmes" tab (schedule/customer_details) + follow-up
   worklist panel on the customer-search page. Scoped, matches cust-detail-*.
   ============================================================================ */
.cust-detail-notes-head {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 0.9rem;
}

.cust-detail-notes {
  list-style: none;
  margin: 0;
  padding: 0;
}

.cust-detail-note {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  padding: 0.85rem 0.6rem 0.85rem 0.85rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  border-left: 3px solid transparent;
}
.cust-detail-note:last-child { border-bottom: none; }
.cust-detail-note--overdue { border-left-color: #c0392b; background: rgba(192, 57, 43, 0.04); }
.cust-detail-note--resolved { opacity: 0.62; }

.cust-detail-note-main { flex: 1; min-width: 0; }

.cust-detail-note-body {
  margin: 0 0 0.35rem;
  font-size: 0.92rem;
  color: #24292e;
  white-space: normal;
  overflow-wrap: anywhere;
}

.cust-detail-note-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem 0.9rem;
  font-size: 0.78rem;
  color: #adb5bd;
}
.cust-detail-note-author { font-weight: 600; color: #6c757d; }
.cust-detail-note-followup { color: #8c5538; font-weight: 600; }
.cust-detail-note-followup.is-overdue { color: #c0392b; }
.cust-detail-note-done { color: #2f9e44; font-weight: 600; }

.cust-detail-note-actions { display: flex; gap: 0.25rem; flex-shrink: 0; }

.cust-detail-iconbtn {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.05);
  color: #6c757d;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}
.cust-detail-iconbtn:hover { background: rgba(140, 85, 56, 0.14); color: #8c5538; }
.cust-detail-iconbtn--danger:hover { background: rgba(192, 57, 43, 0.14); color: #c0392b; }

/* Follow-up worklist panel — customer-search page */
.cust-followups {
  max-width: 720px;
  margin: 1.5rem auto 0;
  padding: 1rem 1.2rem 0.4rem;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 10px;
}

.cust-followups-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
  font-weight: 700;
  color: #24292e;
  margin: 0 0 0.6rem;
}
.cust-followups-title i { color: #8c5538; }

.cust-followups-count {
  font-size: 0.74rem;
  font-weight: 700;
  padding: 0.1rem 0.5rem;
  border-radius: 10px;
  background: rgba(140, 85, 56, 0.12);
  color: #8c5538;
}

.cust-followups-list { list-style: none; margin: 0; padding: 0; }

.cust-followups-item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2rem 0.9rem;
  padding: 0.55rem 0.2rem 0.55rem 0.6rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  border-left: 3px solid transparent;
}
.cust-followups-item:last-child { border-bottom: none; }
.cust-followups-item--overdue { border-left-color: #c0392b; }

.cust-followups-customer { font-weight: 700; color: #8c5538; text-decoration: none; }
.cust-followups-customer:hover { text-decoration: underline; }

.cust-followups-date { font-size: 0.8rem; color: #6c757d; white-space: nowrap; }

.cust-followups-overdue-tag {
  margin-left: 0.35rem;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 0.05rem 0.4rem;
  border-radius: 8px;
  background: rgba(192, 57, 43, 0.12);
  color: #c0392b;
}

.cust-followups-body {
  flex: 1 1 100%;
  font-size: 0.8rem;
  color: #adb5bd;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* === Notes board (customer-search page): Pārbaudes / Visas piezīmes ====== */
.cust-notes-board {
  max-width: 720px;
  margin: 1.5rem auto 0;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 10px;
  overflow: hidden;
}

.cust-notes-tabs {
  display: flex;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.cust-notes-tab {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.8rem 1.1rem;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  font-size: 0.9rem;
  font-weight: 600;
  color: #6c757d;
  cursor: pointer;
}
.cust-notes-tab i { color: #8c5538; }
.cust-notes-tab:hover { color: #24292e; }
.cust-notes-tab.active {
  color: #24292e;
  border-bottom-color: #8c5538;
}

.cust-notes-badge {
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1;
  padding: 0.18rem 0.45rem;
  border-radius: 10px;
  background: #c0392b;
  color: #fff;
}

.cust-notes-panes { padding: 1rem 1.2rem; }
.cust-notes-panes .cust-followups-list { margin: 0; }

/* --- Visas piezīmes: search + paginated feed --- */
.cust-allnotes-search {
  position: relative;
  margin-bottom: 0.8rem;
}
.cust-allnotes-ico {
  position: absolute;
  left: 0.8rem;
  top: 50%;
  transform: translateY(-50%);
  color: #adb5bd;
  font-size: 0.85rem;
}
.cust-allnotes-input {
  width: 100%;
  padding: 0.55rem 2.2rem 0.55rem 2.2rem;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 8px;
  font-size: 0.9rem;
}
.cust-allnotes-input:focus {
  outline: none;
  border-color: #8c5538;
  box-shadow: 0 0 0 3px rgba(140, 85, 56, 0.12);
}
.cust-allnotes-spinner {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  width: 14px;
  height: 14px;
  margin-top: -7px;
  border: 2px solid rgba(140, 85, 56, 0.25);
  border-top-color: #8c5538;
  border-radius: 50%;
  animation: custAllNotesSpin 0.7s linear infinite;
}
@keyframes custAllNotesSpin { to { transform: rotate(360deg); } }

.cust-allnotes-count {
  font-size: 0.76rem;
  color: #adb5bd;
  margin: 0 0 0.4rem 0.1rem;
}

.cust-allnotes-list { list-style: none; margin: 0; padding: 0; }

.cust-allnotes-item {
  padding: 0.6rem 0.2rem 0.6rem 0.6rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  border-left: 3px solid transparent;
}
.cust-allnotes-item:last-child { border-bottom: none; }
.cust-allnotes-item--overdue { border-left-color: #c0392b; }
.cust-allnotes-item--resolved { opacity: 0.6; }

.cust-allnotes-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2rem 0.8rem;
}
.cust-allnotes-customer { font-weight: 700; color: #8c5538; text-decoration: none; }
.cust-allnotes-customer:hover { text-decoration: underline; }
.cust-allnotes-date,
.cust-allnotes-followup,
.cust-allnotes-done {
  font-size: 0.78rem;
  color: #6c757d;
  white-space: nowrap;
}
.cust-allnotes-followup.is-overdue { color: #c0392b; }
.cust-allnotes-done { color: #2e7d32; }
.cust-allnotes-tag {
  margin-left: 0.3rem;
  font-size: 0.66rem;
  font-weight: 700;
  padding: 0.05rem 0.4rem;
  border-radius: 8px;
  background: rgba(192, 57, 43, 0.12);
  color: #c0392b;
}
.cust-allnotes-body {
  margin: 0.25rem 0 0.15rem;
  font-size: 0.84rem;
  color: #495057;
  white-space: pre-line;
}
.cust-allnotes-author { font-size: 0.74rem; color: #adb5bd; }

/* Pabeigt / Atjaunot checkmark — shared by the Visas piezīmes feed and the
   Pārbaudes worklist; pushed to the far right of the row. */
.cust-allnotes-resolve,
.cust-followups-resolve {
  margin-left: auto;
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.22rem 0.6rem;
  border: 1px solid rgba(46, 125, 50, 0.45);
  border-radius: 8px;
  background: rgba(46, 125, 50, 0.08);
  color: #2e7d32;
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.cust-allnotes-resolve:hover:not(:disabled),
.cust-followups-resolve:hover:not(:disabled) { background: rgba(46, 125, 50, 0.18); }
.cust-allnotes-resolve:disabled,
.cust-followups-resolve:disabled { opacity: 0.5; cursor: default; }
.cust-allnotes-resolve.is-resolved {
  border-color: rgba(0, 0, 0, 0.15);
  background: rgba(0, 0, 0, 0.04);
  color: #6c757d;
}
.cust-allnotes-resolve.is-resolved:hover:not(:disabled) { background: rgba(0, 0, 0, 0.09); }

.cust-allnotes-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding-top: 0.8rem;
}
.cust-allnotes-pagebtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 8px;
  background: #fff;
  color: #495057;
  cursor: pointer;
}
.cust-allnotes-pagebtn:hover:not(:disabled) {
  border-color: #8c5538;
  color: #8c5538;
}
.cust-allnotes-pagebtn:disabled { opacity: 0.4; cursor: default; }
.cust-allnotes-pageinfo { font-size: 0.82rem; color: #6c757d; }

.cust-allnotes-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  padding: 1.8rem 1rem;
  color: #adb5bd;
  font-size: 0.85rem;
}
.cust-allnotes-empty i { font-size: 1.6rem; }

/* Red count badge on the admin sidebar "Klientu detaļas" link. */
.piyo-sidebar-badge {
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1;
  padding: 0.16rem 0.42rem;
  border-radius: 10px;
  background: #c0392b;
  color: #fff;
}

/* =========================================================================
   TRAINING PROGRAMMES — admin area (Apmācības)
   Matches the visual language of the gift-card and classes admin screens.
   ========================================================================= */
.tr-admin-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}
.tr-admin-headid { display: flex; align-items: center; gap: 14px; }
.tr-admin-headicon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: #F0E4D2;
    color: #7E5120;
    font-size: 19px;
}
.tr-admin-title { font-size: 22px; margin: 0; color: #4A2F10; }
.tr-admin-sub { font-size: 13px; color: #8C7F73; margin: 2px 0 0; }
.tr-admin-slug { font-size: 12px; color: #8C7F73; }
.tr-admin-mail { font-size: 12px; color: #8C7F73; }
.tr-admin-empty {
    padding: 22px;
    background: #FBF7F1;
    border: 1px dashed #E5DACB;
    border-radius: 12px;
    color: #8C7F73;
}
.tr-admin-stats { display: flex; gap: 12px; flex-wrap: wrap; }
.tr-admin-stat {
    flex: 1 1 160px;
    background: #FBF7F1;
    border: 1px solid #E5DACB;
    border-radius: 12px;
    padding: 14px 16px;
}
.tr-admin-stat-num { display: block; font-size: 24px; font-weight: 700; color: #4A2F10; }
.tr-admin-stat-label { display: block; font-size: 12px; color: #8C7F73; }
.tr-admin-table { font-size: 13px; }
.tr-admin-modules { margin: 0; padding-left: 1rem; font-size: 12px; color: #5C5049; }
.tr-admin-saving { font-size: 12px; color: #4F7A3A; }
.tr-admin-actions { white-space: nowrap; }
.tr-admin-done { font-size: 12px; color: #4F7A3A; }
.tr-admin-card {
    background: #FFFDFA;
    border: 1px solid #E5DACB;
    border-radius: 14px;
    padding: 20px 22px;
}
.tr-admin-cardtitle { font-size: 16px; color: #4A2F10; margin: 0 0 14px; }
.tr-admin-hint { font-size: 12px; color: #8C7F73; margin-bottom: 14px; }


/* Education module picker ================================================== */
/* `.brandcolor div` is `color: #8c5538 !important` at specificity (0,1,1), which
   outranks Bootstrap's `.text-success` (0,1,0) — so the saving line lost its
   green the moment it became a <div>. Own rule, higher specificity, no reliance
   on a utility class. */
.piyo-modules [data-module-saving] {
  color: #198754 !important;
  display: block;
}
/* Belt and braces for the hide: the JS toggles the `hidden` attribute, and its
   UA-stylesheet `display: none` loses to any author `display` rule. */
.piyo-modules [data-module-saving][hidden] {
  display: none !important;
}