/* ╔══════════════════════════════════════════════════════════╗
   ║  ApolloClinic POS — style.css                           ║
   â•‘  Font: Space Grotesk (Google Fonts)                     â•‘
   ╚══════════════════════════════════════════════════════════╝ */

/* ── Variables ─────────────────────────────────── */
:root {
  --orange:       #FF7A1F;
  --orange-dk:    #E86D18;

  --teal:         #29979D;      /* timer button */
  --teal-dk:      #148F77;

  --sidebar:      #1C2432;      /* dark navy */

  --white:        #FFFFFF;
  --bg:           #F7F8FC;
  --border:       #E7EBF3;

  --txt:          #1D2338;
  --txt-mid:      #5A6480;
  --txt-soft:     #9AA3B5;

  --red:          #E74C3C;
  --green:        #27AE60;
  --green-bg:     #E8F8EF;
  --green-bd:     rgba(39,174,96,0.30);

  --hdr-h:        60px;
  --sb-w:         200px;
  --panel-w:      352px;

  --r4:  4px;  --r6:  6px;  --r8:  8px;
  --rpill: 999px;

  --sh1: 0 1px 3px rgba(0,0,0,0.07);
  --sh2: 0 4px 16px rgba(0,0,0,0.10);
  --sh-orange: 0 3px 10px rgba(255,122,31,0.32);
  --sh-teal:   0 3px 10px rgba(23,165,137,0.32);
}

/* ── Reset ──────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 13px;
  color: var(--txt);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

button { cursor: pointer; border: none; background: none; font-family: inherit; }
button:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
input  { font-family: inherit; border: none; outline: none; }
table  { border-collapse: collapse; width: 100%; }

body.modal-open { overflow: hidden; }

/* ╔══════════════════════════════════════════════╗
   â•‘  APP SHELL                                  â•‘
   ╚══════════════════════════════════════════════╝ */
.app {
  display: flex;
  flex-direction: column;
  height: 100vh;
  min-height: 0;
  overflow: hidden;
}

/* ╔══════════════════════════════════════════════╗
   â•‘  HEADER                                     â•‘
   ╚══════════════════════════════════════════════╝ */
.hdr {
  height: var(--hdr-h);
  background: var(--white);
  border-bottom: 1.5px solid var(--border);
  display: flex;
  align-items: center;
  padding: 0 10px 0 0;
  gap: 16px;
  flex-shrink: 0;
  z-index: 300;
  box-shadow: var(--sh1);
}

/* Left group */
.hdr-left {
  display: flex;
  align-items: center;
  gap: 0;
  flex: 0 0 var(--sb-w);
  min-width: 0;
  justify-content: center;
}

.hdr-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  overflow: hidden;
  max-width: 100%;
}

.logo-img {
  height: 45px;
  width: auto;
  max-width: 100%;
  display: block;
  padding: 0;
  object-fit: contain;
}

/* Fallback logo (if SVG fails) */
.logo-fallback {
  display: flex;
  align-items: center;
  gap: 10px;
}
.logo-badge {
  width: 38px; height: 38px;
  background: var(--orange);
  border-radius: var(--r8);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.logo-text-wrap {
  display: flex; flex-direction: column;
}
.logo-t1 {
  font-size: 15px; font-weight: 800; color: var(--txt);
  letter-spacing: -0.4px; line-height: 1.2;
}
.logo-orange { color: var(--orange); }
.logo-t2 {
  font-size: 8.5px; font-weight: 400; color: var(--txt-soft);
  letter-spacing: 0.1px;
}

/* Center group */
.hdr-mid {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex: 1;
  min-width: 0;
}

.timer-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--teal);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: var(--r6);
  letter-spacing: 0.4px;
  white-space: nowrap;
  transition: background 0.16s;
  box-shadow: var(--sh-teal);
}
.timer-btn:hover { background: var(--teal-dk); }

/* Right group */
.hdr-right {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 0 0 auto;
  justify-content: flex-end;
}

.dash-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--orange);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  padding: 7px 16px;
  border-radius: var(--r6);
  white-space: nowrap;
  transition: background 0.16s;
  box-shadow: var(--sh-orange);
}
.dash-btn:hover { background: var(--orange-dk); }

.hdr-icon-btn {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--r6);
  border: 1.5px solid var(--border);
  background: var(--white);
  color: var(--txt-mid);
  transition: background 0.16s, color 0.16s;
  flex-shrink: 0;
}
.hdr-icon-btn:hover { background: var(--bg); color: var(--txt); }

.notification-wrap {
  position: relative;
  flex-shrink: 0;
}

.notification-btn {
  position: relative;
}

.notification-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 17px;
  height: 17px;
  padding: 0 5px;
  border: 2px solid #fff;
  border-radius: 999px;
  background: #ff6b1a;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  line-height: 13px;
}

.notification-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 720;
  width: min(360px, calc(100vw - 28px));
  display: none;
  overflow: hidden;
  border: 1px solid #E4E9F2;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 18px 42px rgba(16, 24, 40, 0.16);
}

.notification-wrap.open .notification-panel {
  display: block;
}

.notification-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 14px;
  border-bottom: 1px solid #EEF2F6;
}

.notification-head strong {
  color: #1C2432;
  font-size: 14px;
  font-weight: 800;
}

.notification-head span {
  color: #7C879B;
  font-size: 11px;
  font-weight: 700;
}

.notification-list {
  max-height: 330px;
  overflow-y: auto;
}

.notification-empty {
  padding: 24px 16px;
  color: #7C879B;
  font-size: 13px;
  text-align: center;
}

.notification-item {
  display: block;
  padding: 12px 14px;
  border-bottom: 1px solid #F0F3F8;
  color: inherit;
}

.notification-item:hover {
  background: #F8FAFC;
}

.notification-item:last-child {
  border-bottom: 0;
}

.notification-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.notification-type {
  color: #29979D;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .4px;
  text-transform: uppercase;
}

.notification-time {
  color: #ff6b1a;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

.notification-title {
  margin-top: 6px;
  color: #1C2432;
  font-size: 13px;
  font-weight: 800;
}

.notification-meta {
  margin-top: 3px;
  color: #667085;
  font-size: 12px;
  line-height: 1.35;
}

.avatar-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  border: 2px solid var(--border);
  border-radius: var(--rpill);
  padding: 2px 8px 2px 2px;
  background: var(--white);
  transition: border-color 0.16s;
  flex-shrink: 0;
}
.avatar-btn:hover { border-color: var(--orange); }

.avatar-img {
  width: 30px; height: 30px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

.avatar-caret { color: var(--txt-soft); flex-shrink: 0; }

.profile-menu-wrap {
  position: relative;
  flex-shrink: 0;
}

.profile-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 700;
  width: 210px;
  display: none;
  padding: 8px;
  border: 1px solid #E4E9F2;
  border-radius: 8px;
  background: #FFFFFF;
  box-shadow: 0 12px 28px rgba(16, 24, 40, 0.14);
}

.profile-menu-wrap.open .profile-menu {
  display: block;
}

.profile-menu-head {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 8px 10px;
  border-bottom: 1px solid #EEF2F6;
}

.profile-menu-head img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
}

.profile-menu-head strong {
  display: block;
  color: #1C2432;
  font-size: 12px;
  line-height: 1.2;
  font-weight: 800;
}

.profile-menu-head span {
  display: block;
  max-width: 140px;
  margin-top: 2px;
  color: #7C879B;
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.profile-menu button {
  width: 100%;
  height: 34px;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  padding: 0 9px;
  border-radius: 6px;
  color: #E55353;
  font-size: 12px;
  font-weight: 700;
  text-align: left;
}

.profile-menu button:hover {
  background: #FFF2F2;
}

.profile-menu button svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ╔══════════════════════════════════════════════╗
   â•‘  BODY WRAP                                  â•‘
   ╚══════════════════════════════════════════════╝ */
.body-wrap {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* ╔══════════════════════════════════════════════╗
   â•‘  SIDEBAR                                    â•‘
   ╚══════════════════════════════════════════════╝ */
.sidebar,
.dash-sidebar {
  width: var(--sb-w);
  height: calc(100vh - var(--hdr-h));
  max-height: calc(100vh - var(--hdr-h));
  background: var(--sidebar);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 18px 6px 22px;
  gap: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: rgba(95, 240, 230, 0.42) transparent;
  flex-shrink: 0;
  z-index: 100;
}

.sidebar::-webkit-scrollbar,
.dash-sidebar::-webkit-scrollbar {
  width: 5px;
}

.sidebar::-webkit-scrollbar-track,
.dash-sidebar::-webkit-scrollbar-track {
  background: transparent;
}

.sidebar::-webkit-scrollbar-thumb,
.dash-sidebar::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(95, 240, 230, 0.36);
}

.sidebar::-webkit-scrollbar-thumb:hover,
.dash-sidebar::-webkit-scrollbar-thumb:hover {
  background: rgba(95, 240, 230, 0.62);
}

.pos-side-title,
.dash-side-title {
  width: 100%;
  margin: 0 0 14px;
  padding-left: 8px;
  font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: 1.2px;
  color: #fff;
  text-transform: uppercase;
  text-align: left;
}

.cat-item,
.dash-nav {
  position: relative;
  width: 110px;
  height: 80px;
  min-height: 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 8px 5px 7px;
  margin: 0;
  border-radius: 8px;
  cursor: pointer;
  user-select: none;
  overflow: hidden;
  color: rgba(255,255,255,0.78);
  font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0;
  transition:
    transform 0.22s ease,
    background 0.22s ease,
    color 0.22s ease,
    box-shadow 0.22s ease;
  background: #252E40;
  border: none;
  box-shadow: inset 0 -1px 0 rgba(32,175,160,0.55);
}

.cat-item::before,
.dash-nav::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 24% 22%, rgba(255,255,255,0.18), transparent 26%),
    linear-gradient(135deg, rgba(41,151,157,0.88), rgba(32,175,160,0.18));
  opacity: 0;
  transform: translateX(-18px) scale(0.96);
  transition: opacity 0.24s ease, transform 0.24s ease;
  pointer-events: none;
}

.cat-item::after,
.dash-nav::after {
  content: "";
  position: absolute;
  left: 15px;
  right: 15px;
  bottom: 8px;
  height: 2px;
  border-radius: 999px;
  background: #5FF0E6;
  opacity: 0;
  transform: scaleX(0);
  transition: opacity 0.2s ease, transform 0.24s ease;
  pointer-events: none;
}

.cat-item + .cat-item,
.dash-nav + .dash-nav {
  margin-top: 11px;
}

.dash-nav + .dash-nav-group,
.dash-nav-group + .dash-nav,
.dash-nav-group + .dash-nav-group {
  margin-top: 11px;
}

.dash-nav-group {
  position: relative;
  width: 110px;
}

.dash-nav-group::after {
  content: "";
  position: absolute;
  top: -12px;
  left: 100%;
  z-index: 340;
  width: 46px;
  height: calc(100% + 24px);
  pointer-events: auto;
}

.dash-side-title + .dash-nav-group {
  margin-top: 0;
}

.dash-nav-group .dash-nav {
  width: 100%;
}

.dash-submenu {
  position: fixed;
  top: var(--hdr-h);
  bottom: 0;
  left: var(--sb-w);
  z-index: 350;
  width: 310px;
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 28px 26px;
  border-left: 1px solid #E6EAF1;
  background: #FFFFFF;
  box-shadow: 18px 0 42px rgba(16, 24, 40, 0.12);
  opacity: 0;
  visibility: hidden;
  transform: translateX(-22px);
  transform-origin: left center;
  transition: opacity 0.24s ease, transform 0.24s ease, visibility 0.24s;
  pointer-events: none;
}

.dash-submenu::before {
  content: attr(data-title);
  display: block;
  margin: 0 0 8px;
  color: #1C2432;
  font-size: 18px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.2px;
}

.dash-submenu a {
  position: relative;
  z-index: 1;
  min-height: 52px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 14px;
  border: 1px solid transparent;
  border-radius: 10px;
  color: #1C2432;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.dash-submenu a span {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 9px;
  background: #F0F7F8;
  color: #29979D;
  font-size: 11px;
  font-weight: 800;
}

.dash-submenu a:hover,
.dash-submenu a:focus-visible {
  background: linear-gradient(135deg, #F3FAFB 0%, #EAFBFC 100%);
  border-color: #BFE7EA;
  color: #123236;
  transform: translateX(6px);
  outline: none;
  cursor: pointer;
}

.dash-submenu a:hover span,
.dash-submenu a:focus-visible span {
  background: linear-gradient(135deg, #29979D, #20AFA0);
  color: #FFFFFF;
}

.dash-nav-group:hover .dash-submenu,
.dash-nav-group:focus-within .dash-submenu,
.dash-submenu:hover {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
  pointer-events: auto;
}

.cat-item:hover,
.dash-nav:hover,
.cat-item:focus-visible,
.dash-nav:focus-visible {
  background: #2E3A50;
  color: #FFFFFF;
  transform: translateY(-3px) scale(1.025);
  box-shadow:
    0 12px 24px rgba(0, 0, 0, 0.18),
    inset 0 -1px 0 rgba(95,240,230,0.7);
  outline: none;
}

.cat-item:hover::before,
.dash-nav:hover::before,
.cat-item:focus-visible::before,
.dash-nav:focus-visible::before,
.cat-item.active::before,
.dash-nav.active::before {
  opacity: 1;
  transform: translateX(0) scale(1);
}

.cat-item:hover::after,
.dash-nav:hover::after,
.cat-item:focus-visible::after,
.dash-nav:focus-visible::after,
.cat-item.active::after,
.dash-nav.active::after {
  opacity: 1;
  transform: scaleX(1);
}

.cat-item.active {
  background: #29979D;
  color: #fff;
  box-shadow: 0 8px 22px rgba(35, 179, 165, 0.32);
}

.cat-icon,
.dash-nav-ico {
  position: relative;
  z-index: 1;
  width: 18px; height: 18px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  color: currentColor;
  transition: transform 0.24s ease, filter 0.24s ease;
}

.cat-item:hover .cat-icon,
.dash-nav:hover .dash-nav-ico,
.cat-item:focus-visible .cat-icon,
.dash-nav:focus-visible .dash-nav-ico {
  transform: translateY(-2px) scale(1.16) rotate(-5deg);
  filter: drop-shadow(0 5px 8px rgba(0, 0, 0, 0.22));
}

.cat-icon svg,
.dash-nav-ico svg {
  width: 100%;
  height: 100%;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cat-lbl {
  position: relative;
  z-index: 1;
  font-size: inherit;
  font-weight: inherit;
  text-align: center;
  line-height: inherit;
  letter-spacing: inherit;
  white-space: nowrap;
}

.dash-nav {
  isolation: isolate;
}

.dash-nav::after {
  display: none;
}

.dash-nav-label {
  position: relative;
  z-index: 1;
  display: block;
  max-width: 100%;
  text-align: center;
  line-height: 1.2;
  text-decoration: none;
  white-space: normal;
  word-break: keep-all;
}

.package-service-combo {
  width: 100%;
}

.package-selected-services {
  min-height: 42px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
  padding: 8px;
  border: 1px dashed #CBD5E1;
  border-radius: 8px;
  background: #F8FAFC;
}

.package-service-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 28px;
  padding: 4px 8px 4px 10px;
  border-radius: 999px;
  color: #123236;
  background: #DDF7F5;
  font-size: 12px;
  font-weight: 800;
}

.package-service-chip button {
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #FFFFFF;
  background: #29979D;
  font-size: 15px;
  line-height: 1;
}

.package-service-empty {
  align-self: center;
  color: #7A8496;
  font-size: 12px;
  font-weight: 600;
}

.package-detail-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 18px;
  border: 1px solid #E2E8F0;
  border-radius: 14px;
  background: linear-gradient(135deg, #FFFFFF, #F5FBFC);
}

.package-detail-hero h2 {
  margin: 10px 0 4px;
  color: #111827;
  font-size: 24px;
  line-height: 1.1;
}

.package-detail-hero p {
  margin: 0;
  color: #7A8496;
  font-size: 13px;
  font-weight: 700;
}

.package-detail-hero > strong {
  color: #123236;
  font-size: 24px;
  white-space: nowrap;
}

.package-detail-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.package-detail-card {
  padding: 14px;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  background: #FFFFFF;
}

.package-detail-card small {
  display: block;
  margin-bottom: 8px;
  color: #7A8496;
  font-size: 12px;
  font-weight: 700;
}

.package-detail-card strong {
  color: #111827;
  font-size: 18px;
}

.package-detail-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.package-detail-pill {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 6px 12px;
  border-radius: 999px;
  color: #123236;
  background: #DDF7F5;
  font-size: 13px;
  font-weight: 800;
}

.package-detail-row {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 14px;
  border: 1px solid #E2E8F0;
  border-radius: 10px;
  background: #FFFFFF;
  color: #111827;
  text-decoration: none;
}

.package-detail-row span {
  color: #7A8496;
  font-size: 12px;
  font-weight: 700;
}

.package-detail-row strong {
  font-size: 13px;
  font-weight: 800;
}

.package-detail-link:hover {
  border-color: #9ADBE0;
  background: #F5FBFC;
}

.add-field.is-locked-field {
  opacity: 0.72;
}

.add-field.is-locked-field input,
.add-field.is-locked-field textarea,
.add-field.is-locked-field select {
  color: #64748B;
  background: #EEF2F7;
  border-color: #D5DEE9;
  cursor: not-allowed;
}

.add-field.is-locked-field .role-combo-toggle {
  color: #94A3B8;
  background: #EEF2F7;
  cursor: not-allowed;
}

@media (prefers-reduced-motion: reduce) {
  .cat-item,
  .dash-nav,
  .cat-item::before,
  .dash-nav::before,
  .cat-item::after,
  .dash-nav::after,
  .cat-icon,
  .dash-nav-ico {
    transition: none;
  }

  .cat-item:hover,
  .dash-nav:hover,
  .cat-item:focus-visible,
  .dash-nav:focus-visible,
  .cat-item:hover .cat-icon,
  .dash-nav:hover .dash-nav-ico,
  .cat-item:focus-visible .cat-icon,
  .dash-nav:focus-visible .dash-nav-ico {
    transform: none;
  }
}

/* Compact label for long words */
.cat-item[data-cat="acupuncture"] .cat-lbl { font-size: 14px; }

/* ╔══════════════════════════════════════════════╗
   â•‘  CART AREA                                  â•‘
   ╚══════════════════════════════════════════════╝ */
.cart-wrap {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border-right: 1.5px solid var(--border);
  overflow-y: auto;
  overflow-x: hidden;
}

/* ── Cart Top Bar ─── */
.cart-bar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 12px 24px 9px;
  border-bottom: 1.5px solid var(--border);
  flex-shrink: 0;
  min-height: 66px;
  background: var(--bg);
}

.cart-bar-left {
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  column-gap: 3px;
  row-gap: 5px;
}

.cart-bar-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--txt-mid);
}

.cart-bar-id {
  font-size: 13px;
  font-weight: 700;
  color: var(--txt);
}

.cart-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  grid-column: 1 / -1;
  justify-self: start;
  background: var(--sidebar);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px 4px 8px;
  border-radius: var(--rpill);
  line-height: 1;
}

.clear-btn {
  font-size: 12px;
  font-weight: 700;
  color: #F06B7C;
  padding: 6px 13px;
  border-radius: var(--rpill);
  border: 0;
  background: #FFECEF;
  transition: all 0.16s;
}
.clear-btn:hover {
  background: var(--red);
  color: #fff;
  border-color: var(--red);
}

/* ── Cart Table ─── */
.cart-table-wrap {
  flex: 0 0 auto;
  min-height: 110px;
  max-height: 472px;
  overflow-y: auto;
  overflow-x: auto;
  background: var(--white);
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: #C9D2DF #F3F6FA;
}

.cart-table-wrap::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

.cart-table-wrap::-webkit-scrollbar-track {
  background: #F3F6FA;
  border-radius: var(--rpill);
}

.cart-table-wrap::-webkit-scrollbar-thumb {
  background: #C9D2DF;
  border-radius: var(--rpill);
}

.cart-table-wrap::-webkit-scrollbar-thumb:hover {
  background: #AEB9C8;
}

.cart-tbl {
  min-width: 1120px;
  table-layout: fixed;
}

.cart-tbl thead {
  position: sticky;
  top: 0;
  z-index: 10;
}

.cart-tbl thead tr {
  background: var(--white);
  border-bottom: 1px solid #EEF1F6;
}

.cart-tbl thead th {
  padding: 10px 10px;
  font-size: 12.5px;
  font-weight: 600;
  color: #1C2432;
  text-align: left;
  text-transform: none;
  letter-spacing: 0;
  white-space: nowrap;
}

.cart-tbl tbody tr {
  height: 54px;
  border-bottom: 1px solid #F0F2F6;
  transition: background 0.14s;
}
.cart-tbl tbody tr:nth-child(even) { background: #FCFDFF; }
.cart-tbl tbody tr:hover { background: #F8FBFF; }
.cart-tbl tbody tr:last-child { border-bottom: none; }

.cart-tbl tbody td {
  padding: 9px 10px;
  vertical-align: middle;
}

/* Column widths */
.th-sr   { width: 42px;  }
.th-desc { width: 220px; }
.th-qty  { width: 92px; }
.th-mrp  { width: 84px;  }
.th-gross { width: 104px; }
.th-package { width: 108px; }
.th-discount { width: 176px; }
.th-gst  { width: 72px;  }
.th-tqty { width: 126px; }
.th-sp   { width: 126px;  }

/* Cell content */
.td-sr {
  font-size: 13px;
  font-weight: 600;
  color: #1C2432;
}

.td-name {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--txt);
  line-height: 1.3;
}
.td-code {
  font-size: 11px;
  color: var(--txt-soft);
  margin-top: 3px;
  font-weight: 400;
}

/* Quantity stepper */
.qty-box {
  display: inline-flex;
  align-items: center;
  border: 1.5px solid var(--border);
  border-radius: var(--r6);
  overflow: hidden;
  background: var(--white);
}

.qty-b {
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  font-size: 17px;
  font-weight: 400;
  line-height: 1;
  color: var(--txt-mid);
  background: var(--bg);
  transition: background 0.14s, color 0.14s;
  flex-shrink: 0;
}
.qty-b:hover { background: var(--orange); color: #fff; }

.qty-n {
  min-width: 32px;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--txt);
  background: var(--white);
  padding: 0 4px;
}

.td-price {
  font-size: 13px;
  font-weight: 500;
  color: var(--txt);
}

.td-sp {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--txt);
}

.pos-line-input {
  width: 100%;
  min-height: 34px;
  border: 1px solid #E4E9F1;
  border-radius: 8px;
  background: #fff;
  color: var(--txt);
  font: inherit;
  font-size: 12px;
  padding: 7px 8px;
  outline: none;
}

.pos-line-input:focus {
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(255, 122, 36, 0.12);
}

.pos-qty-input {
  max-width: 58px;
}

.pos-price-input {
  max-width: 76px;
}

.pos-item-select {
  min-width: 168px;
  font-weight: 700;
}

.pos-package-pill {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 68px;
  padding: 6px 9px;
  border-radius: 999px;
  background: #F1F4F8;
  color: var(--txt-mid);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.15;
}

.pos-package-pill.yes {
  background: #EAF9F0;
  color: #219653;
}

.pos-package-pill small {
  max-width: 110px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10px;
  font-weight: 600;
}

.pos-discount-cell {
  display: grid;
  grid-template-columns: 108px 68px;
  gap: 5px;
  align-items: center;
}

.pos-discount-cell select {
  min-width: 0;
  padding-left: 6px;
  padding-right: 18px;
  font-size: 11px;
  text-overflow: clip;
}

.pos-discount-cell input {
  min-width: 0;
  padding-left: 6px;
  padding-right: 6px;
}

.pos-discount-cell small {
  grid-column: 1 / -1;
  color: var(--red);
  font-size: 11px;
  font-weight: 700;
}

.pos-line-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-left: 8px;
  border-radius: 50%;
  background: #FFECEF;
  color: var(--red);
  font-size: 13px;
  font-weight: 800;
  vertical-align: middle;
}

.pos-line-remove:hover {
  background: var(--red);
  color: #fff;
}

/* Empty cart */
.empty-tr td { padding: 0 !important; }
.empty-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 70px 20px;
  color: var(--txt-soft);
  text-align: center;
}
.empty-inner p { font-size: 13px; font-weight: 500; }

/* ── Cart Summary ─── */
.cart-summary {
  padding: 31px 80px 18px 16px;
  border-top: 0;
  flex-shrink: 0;
  background: var(--bg);
}

.sum-lines {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sum-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.sum-key {
  font-size: 12.5px;
  font-weight: 400;
  color: var(--txt-mid);
}

.sum-val {
  font-size: 13px;
  font-weight: 500;
  color: var(--txt);
}
.sum-red { color: var(--red); }

.sum-total-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
  padding-top: 0;
  border-top: 0;
}

.sum-total-key {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--txt);
}

.sum-total-val {
  font-size: 24px;
  font-weight: 800;
  color: var(--txt);
  letter-spacing: -0.5px;
}

/* ── Cart Action / Next button ─── */
.cart-action {
  padding: 16px 24px 28px;
  flex-shrink: 0;
  display: flex;
  justify-content: flex-end;
  background: var(--bg);
}

.next-btn {
  width: 338px;
  min-width: 260px;
  max-width: 100%;
  height: 46px;
  background: var(--orange);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  border-radius: var(--r6);
  letter-spacing: 0.3px;
  transition: background 0.16s, transform 0.1s, box-shadow 0.16s;
  box-shadow: var(--sh-orange);
}
.next-btn:hover:not(:disabled) {
  background: var(--orange-dk);
  box-shadow: 0 5px 18px rgba(255,122,31,0.42);
}
.next-btn:active:not(:disabled) { transform: scale(0.985); }
.next-btn:disabled {
  background: #C8CCDA;
  box-shadow: none;
  cursor: not-allowed;
  color: rgba(255,255,255,0.65);
}

/* ╔══════════════════════════════════════════════╗
   â•‘  RIGHT PANEL                                â•‘
   ╚══════════════════════════════════════════════╝ */
.r-panel {
  width: var(--panel-w);
  background: #FFFFFF;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  overflow: hidden;
  border-left: 1px solid var(--border);
}

/* Tabs */
.r-tabs {
  display: flex;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  background: #FFFFFF;
}

.r-tab {
  flex: 1;
  height: 42px;
  font-size: 13px;
  font-weight: 500;
  color: var(--txt-soft);
  border-bottom: 2.5px solid transparent;
  transition: color 0.16s, border-color 0.16s;
}
.r-tab:hover { color: var(--txt); }
.r-tab.active {
  color: var(--txt);
  font-weight: 600;
  border-bottom-color: #16A085;
}

/* Panes */
.r-pane {
  display: none;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  background: #FFFFFF;
}
.r-pane.active { display: flex; }

/* Search */
.r-search {
  position: relative;
  padding: 12px 32px 12px 16px;
  border-bottom: 0;
  flex-shrink: 0;
  background: #FFFFFF;
}

.r-search-ico {
  position: absolute;
  left: 25px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}

.r-search-inp {
  width: 100%;
  height: 34px;
  padding: 0 12px 0 36px;
  border: 1px solid var(--border);
  border-radius: var(--rpill);
  font-size: 12.5px;
  color: var(--txt);
  background: #FAFBFD;
  transition: border-color 0.16s, background 0.16s;
}
.r-search-inp::placeholder { color: var(--txt-soft); }
.r-search-inp:focus {
  border-color: var(--orange);
  background: var(--white);
}

/* ── Service Grid ─── */
.svc-grid {
  --svc-card-h: 170px;
  --svc-grid-gap: 10px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--svc-grid-gap);
  height: calc((var(--svc-card-h) * 4) + (var(--svc-grid-gap) * 3) + 24px);
  max-height: calc((var(--svc-card-h) * 4) + (var(--svc-grid-gap) * 3) + 24px);
  padding: 12px 28px 18px 18px;
  overflow-y: auto;
  overflow-x: hidden;
  flex: 0 0 auto;
  align-content: start;
  background: #FFFFFF;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: #C9D2DF #F3F6FA;
}

.svc-grid::-webkit-scrollbar {
  width: 5px;
}

.svc-grid::-webkit-scrollbar-track {
  background: #F3F6FA;
  border-radius: var(--rpill);
}

.svc-grid::-webkit-scrollbar-thumb {
  background: #C9D2DF;
  border-radius: var(--rpill);
}

.svc-grid::-webkit-scrollbar-thumb:hover {
  background: #AEB9C8;
}

/* ── Service Card ─── */
.svc-card {
  background: var(--white);
  border: 1px solid rgba(22,160,133,0.72);
  border-radius: var(--r4);
  overflow: hidden;
  padding: 5px;
  height: var(--svc-card-h);
  min-height: 0;
  cursor: pointer;
  transition: box-shadow 0.18s, transform 0.14s, border-color 0.18s;
}
.svc-card:hover {
  box-shadow: var(--sh2);
  transform: translateY(-2px);
}
.svc-card.in-cart {
  border-color: rgba(22,160,133,0.95);
  box-shadow: inset 0 0 0 1px rgba(22,160,133,0.12);
}

.svc-card.is-out-stock {
  border-color: #E4E9F1;
  opacity: 0.78;
}

.svc-card.no-image {
  min-height: 104px;
  display: flex;
  align-items: stretch;
  padding: 12px;
}

.svc-card.no-image .svc-info {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 0;
}

.svc-card.no-image .svc-name {
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* Card image */
.svc-img {
  width: 100%;
  height: 80px;
  overflow: hidden;
  position: relative;
  border-radius: 3px;
  background: #1D2940;  /* fallback bg if image missing */
}

.svc-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  transition: transform 0.22s;
}
.svc-card:hover .svc-img img { transform: scale(1.04); }

/* Card info */
.svc-info {
  padding: 6px 2px 0;
}

.svc-name {
  font-size: 12px;
  font-weight: 700;
  color: var(--txt);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.svc-sub {
  font-size: 10px;
  color: var(--txt-soft);
  margin-top: 1px;
  font-weight: 400;
}

.svc-stock {
  margin-top: 4px;
  color: #219653;
  font-size: 10px;
  font-weight: 800;
}

.svc-stock.empty,
.stock-empty {
  color: var(--red);
}

.svc-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 5px;
  min-height: 20px;
}

.svc-price {
  font-size: 12px;
  font-weight: 700;
  color: var(--txt);
}

/* ✓ Added badge */
.badge-added {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 9px;
  font-weight: 700;
  color: var(--green);
  background: var(--green-bg);
  border: 1px solid var(--green-bd);
  padding: 2px 7px;
  border-radius: var(--rpill);
  white-space: nowrap;
  flex-shrink: 0;
  line-height: 1.2;
}

.badge-added.stock-empty {
  border-color: rgba(235, 87, 87, 0.28);
  background: #FFECEF;
}

.pos-stock-note {
  color: #219653;
  font-weight: 700;
}

/* + Add button */
.btn-add {
  width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--r4);
  background: var(--orange);
  color: #fff;
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
  transition: background 0.14s, transform 0.1s;
  flex-shrink: 0;
}
.btn-add:hover { background: var(--orange-dk); transform: scale(1.1); }

/* No results */
.no-results {
  grid-column: 1 / -1;
  text-align: center;
  padding: 50px 16px;
  color: var(--txt-soft);
  font-size: 12.5px;
}

/* ── Billing Form ─── */
.billing-form {
  flex: 1;
  min-height: 0;
  padding: 14px 16px 14px;
  background: #F7F8FC;
  overflow-y: auto;
}

.bill-section {
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid #E7EBF3;
}
.bill-section:last-of-type { border-bottom: none; }

.bill-section-title {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 12px;
  font-size: 10px;
  font-weight: 800;
  color: #9AA3B5;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.bill-section-title::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #E7EBF3;
}

.bill-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 12px;
}
.bill-field:last-child { margin-bottom: 0; }

.bill-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.bill-field label,
.payment-head {
  color: #5A6480;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.65px;
  line-height: 1.2;
}

.bill-field sup {
  color: #E74C3C;
  font-size: 10px;
}

.bill-select,
.bill-input,
.bill-note {
  width: 100%;
  border: 1.5px solid #E4E9F2;
  border-radius: 0;
  background: #FFFFFF;
  color: #1D2338;
  font-size: 12.5px;
  font-weight: 600;
  box-shadow: none;
  transition: border-color 0.16s, box-shadow 0.16s;
}

.bill-select:focus,
.bill-input:focus,
.bill-note:focus {
  border-color: var(--orange);
  box-shadow: 0 0 0 2px rgba(255,122,31,0.12);
  outline: none;
}

.bill-select {
  height: 36px;
  padding: 0 32px 0 10px;
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, #8B94A8 50%),
    linear-gradient(135deg, #8B94A8 50%, transparent 50%);
  background-position:
    calc(100% - 14px) 15px,
    calc(100% - 9px) 15px;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

.bill-input {
  height: 36px;
  padding: 0 10px;
}

.bill-note {
  min-height: 72px;
  resize: vertical;
  padding: 8px 10px;
  font-size: 12px;
}

.payment-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 2px 0 11px;
}

.payment-head strong {
  color: #FF7A1F;
  font-size: 11px;
  font-weight: 800;
}

.payment-options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}

.pay-option {
  min-height: 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 1.5px solid rgba(22,160,133,0.45);
  border-radius: var(--r4);
  background: #F8FBFC;
  color: #16A085;
  font-size: 11px;
  font-weight: 800;
  transition: background 0.16s, border-color 0.16s, color 0.16s, box-shadow 0.16s;
}

.pay-option.active {
  background: #209FA1;
  border-color: #209FA1;
  color: #FFFFFF;
  box-shadow: 0 4px 12px rgba(32,159,161,0.22);
}

.return-bar {
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  padding: 0 18px;
  background: #1C2432;
  color: #FFFFFF;
  font-size: 16px;
  font-weight: 800;
}

/* ╔══════════════════════════════════════════════╗
   â•‘  MOBILE OVERLAY                             â•‘
   ╚══════════════════════════════════════════════╝ */
.mob-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.38);
  z-index: 99;
  backdrop-filter: blur(1px);
}
.mob-overlay.show { display: block; }

/* ╔══════════════════════════════════════════════╗
   â•‘  SCROLLBARS                                 â•‘
   ╚══════════════════════════════════════════════╝ */
::-webkit-scrollbar          { width: 4px; height: 4px; }
::-webkit-scrollbar-track    { background: transparent; }
::-webkit-scrollbar-thumb    { background: var(--border); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: #b8c0d0; }

/* ╔══════════════════════════════════════════════╗
   ║  RESPONSIVE — 1200px                        ║
   ╚══════════════════════════════════════════════╝ */
@media (max-width: 1200px) {
  :root { --panel-w: 318px; }
  .svc-grid {
    --svc-card-h: 126px;
    --svc-grid-gap: 10px;
    height: calc((var(--svc-card-h) * 4) + (var(--svc-grid-gap) * 3) + 24px);
    max-height: calc((var(--svc-card-h) * 4) + (var(--svc-grid-gap) * 3) + 24px);
    padding: 8px 8px 16px 12px;
  }
  .svc-img { height: 64px; }
  .cart-table-wrap { min-height: 282px; max-height: 472px; }
  .cart-tbl { min-width: 720px; }
  .cart-tbl thead th,
  .cart-tbl tbody td { padding-left: 12px; padding-right: 12px; }
}

/* ╔══════════════════════════════════════════════╗
   ║  RESPONSIVE — 900px                         ║
   ╚══════════════════════════════════════════════╝ */
@media (max-width: 900px) {
  .body-wrap {
    overflow-y: auto;
    flex-direction: column;
  }

  .cart-wrap,
  .r-panel {
    width: 100%;
    flex: 0 0 auto;
  }

  .cart-wrap {
    overflow: visible;
  }

  .r-panel {
    min-height: 420px;
    border-left: 0;
    border-top: 1px solid var(--border);
  }

  .svc-grid {
    height: auto;
    max-height: 460px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .billing-form {
    max-height: none;
  }
}

/* ╔══════════════════════════════════════════════╗
   ║  RESPONSIVE — 768px  (tablet)               ║
   ╚══════════════════════════════════════════════╝ */
@media (max-width: 768px) {
  :root {
    --sb-w:  80px;
    --hdr-h: 50px;
  }

  .hdr { padding: 0 14px; gap: 10px; }

  .logo-img { height: 34px; }

  .timer-btn { font-size: 12px; padding: 6px 13px; }

  .dash-btn { padding: 6px 11px; font-size: 12px; }

  .hdr-icon-btn { width: 30px; height: 30px; }

  .sidebar {
    padding: 12px 7px 18px;
  }

  .cat-item {
    width: 66px;
    height: 54px;
    min-height: 54px;
  }

  .cart-tbl .th-gst,
  .cart-tbl .th-tqty { display: none; }

  .cart-bar { padding: 10px 16px; }

  .cart-tbl thead th,
  .cart-tbl tbody td { padding: 10px 14px; }

  .sum-total-val { font-size: 20px; }

  .next-btn { width: 70%; height: 46px; font-size: 15px; }
}

/* ╔══════════════════════════════════════════════╗
   ║  RESPONSIVE — 600px                         ║
   ╚══════════════════════════════════════════════╝ */
@media (max-width: 600px) {
  .hdr-icon-btn:not(#notifBtn) { display: none; }
  .cart-tbl .th-mrp { display: none; }

  .sum-total-val { font-size: 18px; }

  .next-btn { width: 80%; min-width: 200px; }
  .svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .payment-options { gap: 8px; }
  .pay-option { min-height: 50px; }
}

/* ╔══════════════════════════════════════════════╗
   ║  RESPONSIVE — 480px  (mobile)               ║
   ╚══════════════════════════════════════════════╝ */
@media (max-width: 480px) {
  :root { --sb-w: 92px; }

  /* Sidebar slides in from left */
  .sidebar {
    position: fixed;
    top: var(--hdr-h);
    left: 0;
    bottom: 0;
    width: var(--sb-w);
    padding: 12px 10px 18px;
    transform: translateX(-100%);
    transition: transform 0.24s ease;
    z-index: 100;
  }
  .sidebar.open { transform: translateX(0); }

  .cat-item {
    width: 72px;
  }

  .cart-wrap { flex: 1; }

  .hdr { padding: 0 12px; gap: 8px; }

  .dash-btn { display: none; }

  .logo-img { height: 30px; }

  .timer-btn { font-size: 11.5px; padding: 5px 11px; }

  .cart-action { padding: 12px 16px 18px; }
  .next-btn { width: 88%; height: 44px; font-size: 14px; }
  .svc-grid { grid-template-columns: 1fr; max-height: 420px; }
  .billing-form { padding: 14px; }
  .payment-options { grid-template-columns: 1fr; }
  .return-bar { padding: 0 14px; }

  .sum-total-val { font-size: 18px; }

  .cart-summary { padding: 14px 16px 12px; }
  .cart-bar { padding: 10px 14px; }
  .cart-tbl thead th,
  .cart-tbl tbody td { padding: 9px 12px; }
}

/* POS sidebar labels should never be clipped by the menu card edge. */
.pos-nav-sidebar {
  align-items: stretch;
  padding-left: 10px;
  padding-right: 10px;
  scrollbar-gutter: auto;
}

.pos-nav-sidebar .pos-side-title {
  padding-left: 0;
}

.pos-nav-sidebar .cat-item {
  width: 100%;
  max-width: 128px;
  height: auto;
  min-height: 70px;
  margin-left: auto;
  margin-right: auto;
  padding: 10px 8px 12px;
  overflow: visible;
  transform-origin: center;
}

.pos-nav-sidebar .cat-item:hover,
.pos-nav-sidebar .cat-item:focus-visible {
  transform: translateY(-2px);
}

.pos-nav-sidebar .cat-item::before {
  border-radius: inherit;
}

.pos-nav-sidebar .cat-item::after {
  left: 12px;
  right: 12px;
  bottom: 7px;
}

.pos-nav-sidebar .cat-lbl {
  display: block;
  width: 100%;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
  text-align: center;
  font-size: 13px;
  line-height: 1.15;
}

.pos-menu-group {
  width: 100%;
  max-width: 128px;
  margin-left: auto;
  margin-right: auto;
}

.pos-menu-group + .pos-menu-group,
.pos-menu-group + .cat-item,
.cat-item + .pos-menu-group {
  margin-top: 11px;
}

.pos-menu-group .cat-item {
  max-width: none;
}

.pos-menu-flyout {
  position: fixed;
  top: var(--hdr-h);
  bottom: 0;
  left: var(--sb-w);
  z-index: 360;
  width: 330px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 24px 22px;
  border-left: 1px solid #E6EAF1;
  background: #FFFFFF;
  box-shadow: 18px 0 42px rgba(16, 24, 40, 0.12);
  opacity: 0;
  visibility: hidden;
  transform: translateX(-18px);
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
  pointer-events: none;
}

.pos-menu-group:hover .pos-menu-flyout,
.pos-menu-group:focus-within .pos-menu-flyout,
.pos-menu-flyout:hover {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
  pointer-events: auto;
}

.pos-menu-flyout strong {
  color: #1C2432;
  font-size: 18px;
  line-height: 1;
  font-weight: 800;
}

.pos-menu-search {
  height: 42px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  border: 1px solid #E4E9F1;
  border-radius: 12px;
  background: #F8FAFD;
}

.pos-menu-search svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  fill: none;
  stroke: #9AA3B5;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pos-menu-search input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: #1C2432;
  font: inherit;
  font-size: 13px;
}

.pos-menu-list {
  display: grid;
  gap: 9px;
  overflow-y: auto;
  padding-right: 4px;
}

.pos-menu-option {
  min-height: 58px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 4px;
  padding: 10px 12px;
  border: 1px solid #EEF1F6;
  border-radius: 12px;
  background: #FFFFFF;
  text-align: left;
  transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}

.pos-menu-option:hover,
.pos-menu-option:focus-visible {
  border-color: #BFE7EA;
  background: #F3FAFB;
  transform: translateX(4px);
  outline: none;
}

.pos-menu-option span {
  color: #1C2432;
  font-size: 13px;
  font-weight: 800;
}

.pos-menu-option small,
.pos-menu-empty {
  color: #7D8797;
  font-size: 11px;
  font-weight: 600;
}

.pos-menu-empty {
  padding: 18px 12px;
}

.pos-package-search {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
}

.pos-package-search .bill-input {
  min-width: 0;
}

.pos-package-search button {
  min-width: 62px;
  border: 1px solid #E4E9F1;
  border-radius: 10px;
  background: #FFF3EC;
  color: var(--orange);
  font-size: 12px;
  font-weight: 800;
}

.pos-package-list {
  display: grid;
  gap: 8px;
  max-height: 184px;
  overflow-y: auto;
  margin-top: 8px;
}

.pos-package-option {
  display: grid;
  gap: 5px;
  padding: 10px 11px;
  border: 1px solid #E4E9F1;
  border-radius: 12px;
  background: #fff;
  text-align: left;
}

.pos-package-option:hover,
.pos-package-option:focus-visible,
.pos-package-option.active {
  border-color: #20AFA0;
  background: #F1FBFA;
  outline: none;
}

.pos-package-option strong {
  color: #1C2432;
  font-size: 12.5px;
  font-weight: 800;
}

.pos-package-option span,
.pos-package-empty {
  color: #7D8797;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.35;
}

.pos-package-option em {
  color: #219653;
  font-style: normal;
  font-size: 11px;
  font-weight: 800;
}

.pos-package-empty {
  padding: 12px 4px;
}

.pos-total-discount {
  display: grid;
  grid-template-columns: minmax(112px, 1fr) 96px;
  gap: 8px;
}

.pos-total-discount .bill-select,
.pos-total-discount .bill-input {
  min-width: 0;
}

.pos-discount-hint {
  display: block;
  margin-top: 6px;
  color: #7D8797;
  font-size: 11px;
  font-weight: 700;
}

.pos-customer-combo {
  position: relative;
}

.pos-customer-list {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 390;
  max-height: 220px;
  display: none;
  overflow-y: auto;
  padding: 6px;
  border: 1px solid #E4E9F1;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 16px 34px rgba(16, 24, 40, 0.16);
}

.pos-customer-combo.open .pos-customer-list {
  display: grid;
  gap: 5px;
}

.pos-customer-option {
  min-height: 38px;
  padding: 8px 10px;
  border-radius: 9px;
  background: #fff;
  color: #1C2432;
  font-size: 12px;
  font-weight: 700;
  text-align: left;
}

.pos-customer-option:hover,
.pos-customer-option:focus-visible {
  background: #F1FBFA;
  color: #0F5F63;
  outline: none;
}

.pos-customer-add {
  background: #FFF3EC;
  color: var(--orange);
  font-weight: 800;
}

.pos-customer-add:hover,
.pos-customer-add:focus-visible {
  background: #FFE4D3;
  color: #D85D10;
}

.pos-customer-empty {
  padding: 10px;
  color: #7D8797;
  font-size: 11px;
  font-weight: 600;
}

.pos-quick-customer {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 8px;
  margin-top: 8px;
}

.pos-quick-customer .bill-input {
  min-width: 0;
}

.pos-quick-customer button {
  min-width: 58px;
  border: 0;
  border-radius: 10px;
  background: var(--orange);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
}

.pos-quick-customer button:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

.pos-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 700;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(15, 23, 42, 0.48);
}

.pos-modal-overlay.show {
  display: flex;
}

.pos-modal {
  width: min(420px, 100%);
  max-height: calc(100vh - 40px);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.28);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.pos-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px 14px;
  border-bottom: 1px solid #EEF1F6;
}

.pos-modal-head h2 {
  margin: 0;
  color: #1C2432;
  font-size: 18px;
  font-weight: 800;
}

.pos-modal-head button {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #F3F6FA;
  color: #7D8797;
  font-size: 15px;
  font-weight: 800;
}

.pos-modal-body {
  display: grid;
  gap: 14px;
  padding: 18px 20px;
  overflow-y: auto;
}

.pos-modal-body label {
  display: grid;
  gap: 7px;
}

.pos-modal-body span {
  color: #667085;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.pos-modal-body b {
  color: var(--orange);
}

.pos-modal-body input {
  height: 42px;
  border: 1px solid #E4E9F1;
  border-radius: 11px;
  padding: 0 12px;
  color: #1C2432;
  font: inherit;
  font-size: 13px;
  outline: none;
}

.pos-modal-body input:focus {
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(255, 122, 36, 0.12);
}

.pos-modal-actions {
  display: flex;
  flex-shrink: 0;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 20px 20px;
  border-top: 1px solid #EEF1F6;
  background: #fff;
}

.pos-modal-actions button {
  min-width: 112px;
  height: 40px;
  border-radius: 11px;
  font-size: 13px;
  font-weight: 800;
}

.pos-modal-cancel {
  border: 1px solid #E4E9F1;
  background: #fff;
  color: #667085;
}

.pos-modal-save {
  background: var(--orange);
  color: #fff;
  box-shadow: 0 12px 24px rgba(255, 122, 36, 0.22);
}

.pos-modal-save:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

.pos-dialog {
  width: min(460px, 100%);
}

.pos-dialog-message {
  margin: 0;
  color: #4B5565;
  font-size: 14px;
  line-height: 1.55;
  white-space: pre-line;
}

.pos-dialog-input {
  width: 100%;
  height: 42px;
  border: 1px solid #E4E9F1;
  border-radius: 12px;
  padding: 0 12px;
  color: #1C2432;
  outline: none;
}

.pos-dialog-input:focus {
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(255, 122, 36, 0.12);
}

.pos-dialog-list {
  display: grid;
  gap: 8px;
  max-height: 270px;
  overflow-y: auto;
}

.pos-dialog-option {
  width: 100%;
  border: 1px solid #E4E9F1;
  background: #fff;
  border-radius: 12px;
  padding: 10px 12px;
  text-align: left;
  color: #1C2432;
  cursor: pointer;
}

.pos-dialog-option:hover,
.pos-dialog-option.active {
  border-color: var(--orange);
  background: #FFF7F1;
}

.pos-dialog-option strong,
.pos-dialog-option span {
  display: block;
}

.pos-dialog-option span {
  margin-top: 4px;
  color: #7B8494;
  font-size: 12px;
}

.stock-pill {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 5px 10px;
  border-radius: 999px;
  background: #EAF9F0;
  color: #219653;
  font-size: 12px;
  font-weight: 800;
}

.stock-pill.empty {
  background: #FFECEF;
  color: var(--red);
}

.stock-pill.low {
  background: #FFF7E6;
  color: #B76A00;
}

.stock-adjust-input {
  width: 96px;
  min-height: 36px;
  border: 1px solid #E4E9F1;
  border-radius: 10px;
  padding: 0 10px;
  color: #1C2432;
  font: inherit;
  font-size: 13px;
  outline: none;
}

.stock-adjust-input:focus {
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(255, 122, 36, 0.12);
}

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

.stock-btn {
  min-height: 34px;
  padding: 0 12px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 800;
}

.stock-inc {
  background: #EAF9F0;
  color: #219653;
}

.stock-dec {
  background: #FFECEF;
  color: var(--red);
}

.pos-settings-box {
  margin: 18px;
}

.pos-settings-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.pos-settings-save {
  width: auto;
  min-width: 180px;
  margin-top: 16px;
}

.cart-head-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.queue-date-filter {
  min-height: 42px;
  border: 1px solid #E4E9F1;
  border-radius: 12px;
  padding: 0 12px;
  color: #1C2432;
  font: inherit;
}

.queue-quick-filters {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 12px;
}

.queue-quick-filters button {
  min-height: 58px;
  border: 1px solid #E4E9F1;
  border-radius: 15px;
  padding: 10px 12px;
  background: #fff;
  color: #1C2432;
  text-align: left;
  box-shadow: 0 8px 20px rgba(16, 24, 40, 0.04);
}

.queue-quick-filters button:hover,
.queue-quick-filters button.active {
  border-color: rgba(32, 175, 160, 0.35);
  background: linear-gradient(135deg, #20AFA0, #13B8A6);
  color: #fff;
}

.queue-quick-filters strong,
.queue-quick-filters span {
  display: block;
}

.queue-quick-filters strong {
  font-size: 14px;
  font-weight: 900;
}

.queue-quick-filters span {
  margin-top: 4px;
  color: #7B8494;
  font-size: 11px;
  font-weight: 800;
}

.queue-quick-filters button:hover span,
.queue-quick-filters button.active span {
  color: rgba(255, 255, 255, 0.86);
}

.queue-quick-filters b {
  color: var(--orange);
}

.queue-quick-filters button:hover b,
.queue-quick-filters button.active b {
  color: #fff;
}

.queue-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 0 0 16px;
}

.queue-stats div {
  min-height: 78px;
  border: 1px solid #E4E9F1;
  border-radius: 16px;
  background: #fff;
  padding: 14px 16px;
}

.queue-stats strong,
.queue-stats span {
  display: block;
}

.queue-stats strong {
  color: #1C2432;
  font-size: 24px;
  line-height: 1;
}

.queue-stats span {
  margin-top: 8px;
  color: #7B8494;
  font-size: 12px;
  font-weight: 800;
}

.queue-token {
  display: block;
  color: var(--orange);
}

.queue-token + small {
  color: #98A2B3;
  font-size: 11px;
}

.queue-status {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  border-radius: 999px;
  padding: 4px 10px;
  background: #FFF7E6;
  color: #B76A00;
  font-size: 11px;
  font-weight: 900;
}

.queue-status.in-consultation {
  background: #E9F3FF;
  color: #1769C2;
}

.queue-status.completed {
  background: #EAF9F0;
  color: #219653;
}

.queue-actions button {
  width: auto;
  min-width: 68px;
  padding: 0 10px;
  border-radius: 9px;
  color: #fff;
  background: var(--orange);
  font-size: 11px;
  font-weight: 900;
}

.queue-done {
  color: #219653;
  font-size: 12px;
  font-weight: 900;
}

.queue-modal {
  width: min(620px, 100%);
}

#consultModal .queue-modal {
  width: min(720px, 100%);
}

#consultModal .pos-modal-head {
  padding: 12px 16px 10px;
}

#consultModal .pos-modal-body {
  gap: 10px;
  padding: 12px 16px;
}

#consultModal .pos-modal-actions {
  gap: 8px;
  justify-content: flex-end;
  padding: 10px 16px 12px;
}

#consultModal .pos-modal-actions button {
  min-width: 88px;
  height: 38px;
  padding: 0 14px;
  border-radius: 10px;
  font-size: 12px;
  white-space: nowrap;
}

#consultModal .pos-modal-save {
  min-width: 150px;
}

.queue-modal-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.queue-modal-full {
  grid-column: 1 / -1;
}

.queue-modal select,
.queue-modal textarea {
  width: 100%;
  border: 1px solid #E4E9F1;
  border-radius: 12px;
  padding: 10px 12px;
  color: #1C2432;
  font: inherit;
  outline: none;
}

.queue-modal textarea {
  min-height: 82px;
  resize: vertical;
}

#consultModal .queue-modal textarea {
  min-height: 58px;
}

#consultModal .pos-modal-body input {
  height: 38px;
}

.queue-modal select:focus,
.queue-modal textarea:focus {
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(255, 122, 36, 0.12);
}

.queue-view-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px 20px}
.queue-view-row{display:flex;flex-direction:column;gap:2px;padding:6px 0;border-bottom:1px solid #f1f5f9}
.queue-view-row span{font-size:11px;font-weight:600;color:#94a3b8;text-transform:uppercase;letter-spacing:.4px}
.queue-view-row strong{font-size:13px;color:#1e293b;font-weight:600}
.queue-view-full{grid-column:1 / -1}
.queue-pay-card{background:#f8fafc;border:1.5px solid #e2e8f0;border-radius:10px;padding:14px 16px;margin-top:4px}
.queue-pay-head{font-size:13px;font-weight:700;color:#1e293b;margin-bottom:10px;letter-spacing:.3px}
.queue-pay-row{display:flex;justify-content:space-between;font-size:13px;padding:3px 0;color:#475569}
.queue-pay-row.is-total{font-weight:700;color:#0f172a;border-top:1px solid #e2e8f0;padding-top:8px;margin-top:6px}
.queue-pay-row.is-free{color:#16a34a}
.queue-pay-row.is-pkg{color:#0284c7}
.queue-pay-collect{margin-top:12px;padding-top:12px;border-top:1.5px solid #e2e8f0}
.queue-pay-label{font-size:12px;font-weight:600;color:#64748b;white-space:nowrap}
.mini-pos-amount-row{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.mini-pos-amount-row input{flex:1;height:38px;border:1.5px solid #e2e8f0;border-radius:8px;padding:0 10px;font:inherit;outline:none}
.mini-pos-amount-row input:focus{border-color:var(--orange);box-shadow:0 0 0 3px rgba(255,122,36,.12)}
.mini-pos-methods{display:flex;gap:6px}
.mini-pos-method{padding:6px 14px;border:1.5px solid #e2e8f0;border-radius:8px;background:#fff;font-size:12px;font-weight:600;color:#475569;cursor:pointer;transition:all .15s}
.mini-pos-method.active{border-color:var(--orange);background:rgba(255,122,36,.08);color:var(--orange)}

.queue-consult-patient {
  border: 1px solid #E4E9F1;
  border-radius: 14px;
  padding: 12px;
  background: #F8FAFC;
}

.queue-consult-patient strong,
.queue-consult-patient span {
  display: block;
}

.queue-consult-patient span {
  margin-top: 4px;
  color: #7B8494;
  font-size: 12px;
}

.queue-history {
  border: 1px solid #E4E9F1;
  border-radius: 14px;
  padding: 12px;
  background: #FBFCFE;
}

.queue-medicine-assign {
  display: grid;
  gap: 10px;
}

.queue-medicine-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.queue-medicine-head span {
  color: #667085;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.queue-medicine-head button {
  min-height: 30px;
  border-radius: 9px;
  padding: 0 10px;
  background: #FFF3EC;
  color: var(--orange);
  font-size: 12px;
  font-weight: 900;
}

.queue-medicine-list {
  display: grid;
  gap: 10px;
}

.queue-med-shortcuts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.queue-med-shortcuts > span {
  color: #667085;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.queue-med-shortcuts button {
  min-height: 28px;
  border-radius: 999px;
  padding: 0 10px;
  background: #F4F7FB;
  color: #3D4A5C;
  font-size: 11px;
  font-weight: 800;
}

.queue-med-shortcuts button:hover {
  background: #E8F6F5;
  color: #0F5F63;
}

.queue-medicine-card {
  border: 1px solid #E4E9F1;
  border-radius: 12px;
  padding: 10px;
  background: #fff;
  display: grid;
  gap: 8px;
}

.queue-medicine-card.is-duplicate {
  border-color: #F5B5BE;
  background: #FFF8F9;
}

.queue-medicine-card.is-incomplete {
  border-color: #F5D9A8;
  background: #FFFBF3;
}

.queue-med-combo {
  position: relative;
  z-index: 1;
}

.queue-med-combo.open {
  z-index: 20;
}

.queue-medicine-card-head {
  display: grid;
  grid-template-columns: 1fr 32px;
  gap: 8px;
  align-items: start;
}

.queue-med-combo input[data-medicine-search],
.queue-med-combo input[data-therapy-search] {
  width: 100%;
  height: 38px;
  border: 1px solid #E4E9F1;
  border-radius: 10px;
  padding: 0 10px;
  color: #1C2432;
  font: inherit;
  font-size: 12px;
  outline: none;
}

.queue-med-remove {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #FFECEF;
  color: var(--red);
  font-size: 18px;
  line-height: 1;
  font-weight: 900;
  flex-shrink: 0;
}

.queue-med-dup-warn {
  margin: 0;
  color: var(--red);
  font-size: 11px;
  font-weight: 800;
}

.queue-medicine-fields {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.queue-therapy-fields {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 8px;
}

.queue-med-field {
  display: grid;
  gap: 4px;
}

.queue-med-field > span {
  color: #667085;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.25px;
}

.queue-med-field select,
.queue-med-field input {
  width: 100%;
  height: 36px;
  border: 1px solid #E4E9F1;
  border-radius: 10px;
  padding: 0 8px;
  color: #1C2432;
  font: inherit;
  font-size: 12px;
  outline: none;
}

.queue-med-instructions {
  grid-column: 1 / -1;
}

.queue-prescription-preview {
  border: 1px dashed #D7DEE8;
  border-radius: 12px;
  padding: 10px 12px;
  background: #FBFCFE;
}

.queue-prescription-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.queue-prescription-head strong {
  color: #1C2432;
  font-size: 12px;
}

.queue-prescription-head button,
.consult-modal-actions .pos-modal-print {
  min-height: 30px;
  border-radius: 9px;
  padding: 0 12px;
  background: #EEF5FF;
  color: #2F5FB8;
  font-size: 12px;
  font-weight: 900;
}

.queue-prescription-body {
  color: #3D4A5C;
  font-size: 12px;
  line-height: 1.5;
}

.queue-prescription-body ol {
  margin: 0;
  padding-left: 18px;
}

.queue-prescription-body li + li {
  margin-top: 6px;
}

.queue-prescription-section {
  display: block;
  margin: 8px 0 4px;
  color: #1C2432;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.25px;
}

.queue-prescription-empty {
  margin: 0;
  color: #7B8494;
  font-size: 12px;
  font-weight: 700;
}

.queue-prescription-incomplete {
  color: #B54708;
}

.queue-prescription-warn {
  margin: 8px 0 0;
  color: #B54708;
  font-size: 11px;
  font-weight: 800;
}

.consult-modal-actions {
  flex-wrap: wrap;
}

.queue-history-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.queue-history-head strong {
  color: #1C2432;
  font-size: 14px;
}

.queue-history-head span,
.queue-history-empty {
  color: #7B8494;
  font-size: 12px;
  font-weight: 700;
}

.queue-history-list {
  display: grid;
  gap: 10px;
  max-height: 230px;
  overflow-y: auto;
}

.queue-history-card {
  border: 1px solid #EDF1F6;
  border-radius: 12px;
  padding: 10px;
  background: #fff;
}

.queue-history-card div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.queue-history-card strong {
  color: var(--orange);
  font-size: 12px;
}

.queue-history-card span,
.queue-history-card p {
  color: #667085;
  font-size: 12px;
}

.queue-history-card p {
  margin: 4px 0 0;
  line-height: 1.45;
}

@media (max-width: 900px) {
  .pos-settings-grid {
    grid-template-columns: 1fr;
  }

  .queue-stats,
  .queue-quick-filters,
  .queue-modal-grid {
    grid-template-columns: 1fr;
  }

  .queue-medicine-fields {
    grid-template-columns: 1fr 1fr;
  }

  .queue-therapy-fields {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .pos-nav-sidebar {
    padding-left: 8px;
    padding-right: 8px;
  }

  .pos-nav-sidebar .cat-item {
    max-width: none;
    min-height: 62px;
    padding-left: 5px;
    padding-right: 5px;
  }

  .pos-nav-sidebar .cat-lbl {
    font-size: 11.5px;
  }

  .pos-menu-group {
    max-width: none;
  }

  .pos-menu-flyout {
    width: min(300px, calc(100vw - var(--sb-w)));
  }
}

/* ╔══════════════════════════════════════════════╗
   â•‘  PRINT                                      â•‘
   ╚══════════════════════════════════════════════╝ */
@media print {
  .hdr, .sidebar, .r-panel, .cart-action { display: none !important; }
  .cart-wrap { overflow: visible; }
  .cart-table-wrap { overflow: visible; }
}

/* ╔══════════════════════════════════════════════╗
   â•‘  DASHBOARD PAGE                             â•‘
   ╚══════════════════════════════════════════════╝ */
.dashboard-app {
  background: #F4F6FA;
}

.dashboard-hdr {
  height: 60px;
  padding: 0 20px 0 0;
  border-bottom: 1px solid #E7EBF2;
  box-shadow: 0 1px 4px rgba(16, 24, 40, 0.08);
}

.dashboard-hdr .timer-btn {
  height: 32px;
  padding: 0 14px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.4px;
  background: #29979D;
  box-shadow: 0 4px 12px rgba(22, 160, 133, 0.22);
}

.dashboard-hdr .hdr-right {
  gap: 10px;
}

.pos-nav-btn {
  height: 32px;
  padding: 0 14px;
  font-size: 13px;
  font-weight: 600;
  background: #FF7A1F;
  box-shadow: 0 3px 10px rgba(255, 122, 31, 0.22);
}

.dashboard-body {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  background: #F4F6FA;
}

.dash-nav.active {
  color: #FFFFFF;
  background: #20AFA0;
  box-shadow:
    0 10px 24px rgba(32, 175, 160, 0.30),
    inset 0 -1px 0 rgba(95, 240, 230, 0.75);
}

.dash-title-icon svg,
.stat-icon svg,
.customer-search svg,
.view-btn svg,
.export-btn svg,
.cust-row svg {
  width: 100%;
  height: 100%;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dashboard-main {
  flex: 1;
  min-width: 0;
  min-height: 0;
  padding: 18px 18px 30px;
  background: #F4F6FA;
  overflow-y: auto;
  overflow-x: hidden;
}

.dash-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}

.dash-title {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: #1C2432;
    font-size: 14px;
    font-weight: 500;
}

.dash-title-icon {
  width: 18px;
  height: 18px;
  color: #FFB05E;
  background: #FFF4E9;
  border-radius: 5px;
}

.new-customer-btn {
  height: 34px;
  padding: 0 14px;
  border-radius: 5px;
  background: #29979D;
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 500;
  box-shadow: 0 4px 14px rgba(22, 160, 133, 0.22);
}

.theme-action-btn {
  height: 34px;
  padding: 0 14px;
  border-radius: 5px;
  background: #29979D;
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 500;
  box-shadow: 0 4px 14px rgba(22, 160, 133, 0.22);
}

.theme-action-btn:hover,
.theme-action-btn:focus-visible {
  background: #23878D;
  color: #FFFFFF;
  outline: none;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 17px;
  margin-bottom: 32px;
  border-bottom: 1px solid #DBDEE1;
    padding: 0px 0px 20px;
}

.stat-card {
  min-height: 110px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 26px 20px 20px;
  border: 1px solid #E4E8F0;
  border-radius: 5px;
  background: #FFFFFF;
  box-shadow: 0 3px 8px rgba(16, 24, 40, 0.08);
  overflow: hidden;
}

.stat-purple {
  background: linear-gradient(105deg, #FFFFFF 0%, #FFFFFF 54%, #F0D7FF 100%);
}

.stat-blue {
  background: linear-gradient(105deg, #FFFFFF 0%, #FFFFFF 54%, #D6ECFF 100%);
}

.stat-orange {
  background: linear-gradient(105deg, #FFFFFF 0%, #FFFFFF 54%, #FFE0CF 100%);
}

.stat-green {
  background: linear-gradient(105deg, #FFFFFF 0%, #FFFFFF 54%, #D9F8E7 100%);
}

.stat-main {
  display: flex;
  align-items: center;
  gap: 9px;
  color: #1D2338;
  font-size: 26px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.7px;
}

.stat-card p {
  margin-top: 12px;
  color: #3D465A;
  font-size: 12px;
  font-weight: 600;
}

.trend-pill {
  display: inline-flex;
  align-items: center;
  height: 15px;
  padding: 0 7px;
  border-radius: 999px;
  background: #20B98E;
  color: #FFFFFF;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.1px;
}

.stat-icon {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #FFFFFF;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.16);
}

.stat-purple .stat-icon { background: linear-gradient(135deg, #C942F4 0%, #8B2BEA 100%); }
.stat-blue .stat-icon { background: linear-gradient(135deg, #0AA7E4 0%, #0476CA 100%); }
.stat-orange .stat-icon { background: linear-gradient(135deg, #FF781D 0%, #E64B00 100%); }
.stat-green .stat-icon { background: linear-gradient(135deg, #29C94E 0%, #0D9E31 100%); }

.stat-icon svg {
  width: 22px;
  height: 22px;
  stroke-width: 1.8;
}

.customer-panel {
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.customer-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.customer-search {
  width: min(300px, 100%);
  height: 36px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  border: 1px solid #DBDEE1;
  border-radius: 999px;
  background: #FFFFFF;
  color: #8282824D;
  box-shadow: 0 2px 5px rgba(16, 24, 40, 0.03);
}

.customer-search svg {
  width: 17px;
  height: 17px;
  stroke-width: 1.8;
}

.customer-search input {
  flex: 1;
  min-width: 0;
  color: #1D2338;
  font-size: 14px;
  font-weight: 500;
}

.customer-search input::placeholder {
  color: #B2BAC8;
}

.reminder-filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 12px;
}

.reminder-filter-chips button {
  min-height: 34px;
  border: 1px solid #E4E9F1;
  border-radius: 999px;
  padding: 0 12px;
  background: #fff;
  color: #3D4A5C;
  font-size: 12px;
  font-weight: 900;
}

.reminder-filter-chips button.active,
.reminder-filter-chips button:hover {
  border-color: rgba(32, 175, 160, 0.35);
  background: #20AFA0;
  color: #fff;
}

.reminder-filter-chips span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  min-height: 22px;
  margin-left: 6px;
  border-radius: 999px;
  background: #F4F7FB;
  color: var(--orange);
  font-size: 11px;
}

.reminder-filter-chips button.active span,
.reminder-filter-chips button:hover span {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}

.table-actions.reminder-actions {
  gap: 10px;
}

.table-actions.reminder-actions .reminder-done-btn {
  width: auto;
  min-width: 48px;
  height: 24px;
  border-radius: 999px;
  padding: 0 10px;
  background: #EAF9F0;
  color: #219653;
  font-size: 11px;
  font-weight: 900;
}

.session-stats {
  margin-top: 4px;
}

.session-progress {
  min-width: 130px;
}

.session-progress span {
  display: block;
  margin-bottom: 6px;
  color: #1C2432;
  font-size: 12px;
  font-weight: 900;
}

.session-progress div {
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: #EEF2F7;
}

.session-progress i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #20AFA0, #13B8A6);
}

.table-status.status-complete {
  background: #EAF9F0;
  color: #219653;
}

.table-actions.session-actions {
  gap: 8px;
}

.table-actions.session-actions button {
  width: auto;
  min-width: 54px;
  height: 24px;
  border-radius: 999px;
  padding: 0 10px;
  font-size: 11px;
  font-weight: 900;
}

.session-done-btn {
  background: #EAF9F0;
  color: #219653 !important;
}

.session-option-btn {
  background: #FFF3EC;
  color: var(--orange) !important;
}

.session-done-modal {
  width: min(560px, 100%);
}

.session-done-modal textarea {
  width: 100%;
  min-height: 76px;
  border: 1px solid #E4E9F1;
  border-radius: 11px;
  padding: 10px 12px;
  color: #1C2432;
  font: inherit;
  font-size: 13px;
  outline: none;
  resize: vertical;
}

.session-done-modal textarea:focus {
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(255, 122, 36, 0.12);
}

.session-done-patient {
  border: 1px solid #E4E9F1;
  border-radius: 12px;
  padding: 12px;
  background: #F8FAFC;
}

.session-done-patient strong,
.session-done-patient span {
  display: block;
}

.session-done-patient span {
  margin-top: 4px;
  color: #667085;
  font-size: 12px;
  font-weight: 800;
}

.session-field-error {
  min-height: 14px;
  color: var(--red);
  font-size: 11px;
  font-weight: 800;
}

.payment-due-text {
  color: var(--red) !important;
  font-weight: 900 !important;
}

.payment-status-paid {
  color: #219653;
}

.payment-status-partial {
  color: #B76A00;
}

.payment-status-pending {
  color: var(--red);
}

.payment-detail-modal {
  width: min(640px, 100%);
}

.payment-detail-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.payment-detail-summary div {
  border: 1px solid #E4E9F1;
  border-radius: 10px;
  padding: 10px;
  background: #FBFCFE;
}

.payment-detail-summary span,
.payment-detail-summary strong {
  display: block;
}

.payment-detail-summary span {
  color: #667085;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.payment-detail-summary strong {
  margin-top: 4px;
  color: #1C2432;
  font-size: 13px;
}

.view-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.view-btn,
.export-btn {
  height: 31px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  border: 1px solid #DDE3EC;
  border-radius: 4px;
  background: #FFFFFF;
  color: #3D465A;
  font-size: 12px;
  font-weight: 500;
}

.view-btn svg,
.export-btn svg {
  width: 14px;
  height: 14px;
}

.view-btn.active {
  background: #29979D;
  border-color: #29979D;
  color: #FFFFFF;
  box-shadow: 0 4px 12px rgba(32, 175, 160, 0.18);
}

.export-btn {
  color: #8B5960;
}

.customer-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  max-height: calc(100vh - 300px);
  overflow-y: auto;
  padding-right: 6px;
}

.customer-grid.list-mode {
  grid-template-columns: 1fr;
  gap: 0;
  max-height: calc(100vh - 300px);
  overflow: hidden;
  padding-right: 0;
}

.customer-card {
  position: relative;
  min-height: 194px;
  padding: 18px 16px 14px;
  border: 1px solid #E1E6EF;
  border-radius: 5px;
  background: #FFFFFF;
  box-shadow: 0 2px 7px rgba(16, 24, 40, 0.07);
}

.customer-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 17px;
}

.customer-person {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.cust-avatar {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 50%;
  background: #FFF3E4;
  border: 1px solid #F1C78B;
  color: #E29A36;
  font-size: 16px;
  font-weight: 500;
}

.cust-name {
  color: #1C2432;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.15;
}

.cust-id {
  margin-top: 4px;
  color: #99A3B6;
  font-size: 10px;
  font-weight: 600;
}

.status-badge {
  height: 20px;
  padding: 0 11px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  background: #E7F9F1;
  color: #25B978;
  font-size: 10px;
  font-weight: 800;
}

.status-badge.is-warning {
  background: #FFF3E2;
  color: #F5A623;
}

.customer-card-actions {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
}

.card-menu-btn {
  width: 18px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #FF7A1F;
  font-size: 16px;
  font-weight: 800;
  line-height: 1;
  border-radius: 4px;
}

.card-menu-btn svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
  display: block;
}

.card-action-menu {
  position: absolute;
  top: 26px;
  right: 0;
  z-index: 20;
  min-width: 140px;
  display: none;
  padding: 6px;
  border: 1px solid #E4E9F2;
  border-radius: 4px;
  background: #FFFFFF;
  box-shadow: 0 8px 22px rgba(16, 24, 40, 0.13);
}

.customer-card.menu-open .card-action-menu {
  display: grid;
  gap: 2px;
}

.card-action-menu button {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 8px;
  color: #6A7285;
  font-size: 12px;
  font-weight: 500;
  text-align: left;
  border-radius: 3px;
}

.card-action-menu button svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  fill: none;
  stroke: #FF7A1F;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.card-action-menu button:hover {
  color: #1D2338;
  background: #F7F8FC;
}

.view-drawer-overlay {
  position: fixed;
  inset: 0;
  z-index: 590;
  display: none;
  justify-content: flex-end;
  background: rgba(18, 24, 34, 0.42);
}

.view-drawer-overlay.show {
  display: flex;
}

.view-drawer {
  width: 356px;
  max-width: 100%;
  height: calc(100vh - var(--hdr-h));
  margin-top: var(--hdr-h);
  display: flex;
  flex-direction: column;
  background: #F7F8FC;
  box-shadow: -8px 0 24px rgba(16, 24, 40, 0.16);
  overflow: hidden;
}

.view-drawer-head {
  height: 48px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 18px;
  border-bottom: 1px solid #E1E6EF;
  background: #FFFFFF;
}

.view-head-icon {
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 50%;
  background: #29979D;
  color: #FFFFFF;
}

.view-head-icon svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.view-drawer-head h2 {
  flex: 1;
  color: #1C2432;
  font-size: 15px;
  line-height: 1;
  font-weight: 700;
}

.view-drawer-close {
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #7C879B;
  font-size: 18px;
  line-height: 1;
}

.view-drawer-close:hover {
  background: #F1F4F8;
  color: #1C2432;
}

.view-drawer-body {
  flex: 1;
  min-height: 0;
  padding: 16px 18px 14px;
  overflow-y: auto;
}

.view-drawer-body::-webkit-scrollbar {
  width: 6px;
}

.view-drawer-body::-webkit-scrollbar-thumb {
  background: #C9D1DD;
  border-radius: 999px;
}

.view-profile-card {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 74px;
  padding: 12px;
  border: 1px solid #E0A258;
  border-radius: 5px;
  background: #FFFFFF;
}

.view-avatar {
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 3px;
  background: #FFF3E4;
  border: 1px solid #F1C78B;
  color: #E29A36;
  font-size: 15px;
  font-weight: 700;
}

.view-profile-main {
  flex: 1;
  min-width: 0;
}

.view-profile-main h3 {
  margin: 0 0 5px;
  color: #30384A;
  font-size: 12px;
  line-height: 1;
  font-weight: 800;
}

.view-profile-main p {
  margin: 3px 0 0;
  color: #8B95A7;
  font-size: 10px;
  line-height: 1.15;
  font-weight: 600;
}

.view-details {
  display: grid;
  gap: 10px;
  margin: 18px 0 22px;
}

.view-detail-row {
  display: grid;
  grid-template-columns: 14px 58px 1fr;
  align-items: center;
  gap: 8px;
  color: #6A7285;
  font-size: 10.5px;
  line-height: 1.2;
  font-weight: 600;
}

.view-detail-row svg {
  width: 13px;
  height: 13px;
  color: #536276;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.view-detail-row strong {
  justify-self: end;
  min-width: 0;
  color: #30384A;
  font-size: 10.5px;
  font-weight: 700;
  text-align: right;
  overflow-wrap: anywhere;
}

.view-history h3 {
  margin: 0 0 10px;
  color: #30384A;
  font-size: 13px;
  line-height: 1.2;
  font-weight: 800;
}

.view-history-card {
  border: 1px solid #DDE3EC;
  border-radius: 5px;
  background: #FFFFFF;
  overflow: hidden;
}

.view-service-row {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 14px;
  padding: 12px 10px;
}

.view-service-row + .view-service-row {
  border-top: 1px solid #EEF2F6;
}

.view-service-row div {
  display: grid;
  gap: 3px;
}

.view-service-row span {
  color: #9AA3B5;
  font-size: 8.5px;
  line-height: 1;
  font-weight: 700;
}

.view-service-row strong {
  color: #30384A;
  font-size: 11px;
  line-height: 1.1;
  font-weight: 800;
  white-space: nowrap;
}

.view-service-row small {
  color: #5A6480;
  font-size: 9px;
  line-height: 1;
  font-weight: 700;
}

.view-drawer-foot {
  padding: 14px 18px 22px;
  background: #F7F8FC;
}

.view-drawer-foot button {
  width: 100%;
  height: 32px;
  border-radius: 999px;
  background: #29979D;
  color: #FFFFFF;
  font-size: 12px;
  font-weight: 800;
  box-shadow: 0 3px 8px rgba(41, 151, 157, 0.22);
}

.view-drawer-foot button:hover {
  background: #23898F;
}

.add-drawer-overlay {
  position: fixed;
  inset: 0;
  z-index: 595;
  display: none;
  justify-content: flex-end;
  background: rgba(18, 24, 34, 0.42);
}

.add-drawer-overlay.show {
  display: flex;
}

.add-drawer {
  width: 410px;
  max-width: 100%;
  height: calc(100vh - var(--hdr-h));
  margin-top: var(--hdr-h);
  background: #F5F7FA;
  box-shadow: -8px 0 24px rgba(16, 24, 40, 0.16);
  overflow: hidden;
}

.add-customer-form {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.add-drawer-head {
  height: 48px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 18px;
  border-bottom: 1px solid #E1E6EF;
  background: #FFFFFF;
}

.add-drawer-head h2 {
  flex: 1;
  color: #1C2432;
  font-size: 18px;
  line-height: 1;
  font-weight: 700;
}

.add-drawer-body {
  flex: 1;
  min-height: 0;
  padding: 18px;
  overflow-y: auto;
}

.add-drawer-body::-webkit-scrollbar {
  width: 6px;
}

.add-drawer-body::-webkit-scrollbar-thumb {
  background: #C9D1DD;
  border-radius: 999px;
}

.add-profile-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 18px;
}

.add-profile-row h3 {
  margin-top: 7px;
  color: #1C2432;
  font-size: 15px;
  font-weight: 700;
}

.add-upload-box {
  position: relative;
  width: 84px;
  height: 84px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1px solid #BFC7D3;
  border-radius: 4px;
  background: #E7ECF2;
  cursor: pointer;
}

.add-upload-preview,
.add-upload-preview img {
  width: 100%;
  height: 100%;
}

.add-upload-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #3D465A;
}

.add-upload-preview svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.add-upload-preview img {
  object-fit: cover;
  border-radius: 4px;
}

.add-upload-loading {
  position: absolute;
  width: 22px;
  height: 22px;
  display: none;
  border: 3px solid rgba(41, 151, 157, 0.22);
  border-top-color: #29979D;
  border-radius: 50%;
  animation: addSpin 0.8s linear infinite;
}

.add-upload-box.is-loading .add-upload-loading {
  display: block;
}

.profile-panel-upload.is-loading .add-upload-loading {
  display: block;
}

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

.add-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 14px;
}

.add-field {
  display: grid;
  gap: 6px;
}

.add-field-full {
  grid-column: 1 / -1;
  margin-bottom: 14px;
}

.add-intake-title {
  margin: 18px 0 14px;
  padding-top: 18px;
  border-top: 1px solid rgba(28, 36, 50, 0.08);
  color: #1C2432;
  font-size: 15px;
  font-weight: 800;
}

.form-template-block {
  max-width: calc(100% - 330px);
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid rgba(28, 36, 50, 0.08);
}

.form-template-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(280px, 1fr));
  gap: 0 28px;
  margin-top: 12px;
}

.form-template-empty {
  margin: 0;
  padding: 14px;
  border: 1px dashed rgba(41, 151, 157, 0.28);
  border-radius: 10px;
  color: #6F7890;
  font-size: 12px;
  background: #F7FCFD;
}

.add-field span {
  color: #1C2432;
  font-size: 12px;
  font-weight: 500;
}

.add-field b {
  color: #E55353;
}

.add-field em {
  color: #7C879B;
  font-style: normal;
  font-weight: 600;
}

.add-field input,
.add-field select {
  width: 100%;
  height: 31px;
  padding: 0 12px;
  border: 1.5px solid #E0E6EF;
  border-radius: 0;
  background: #FFFFFF;
  color: #30384A;
  font-size: 12px;
  font-weight: 600;
  box-shadow: none;
  transition: border-color 0.16s;
}
.add-field input:focus,
.add-field select:focus {
  border-color: #29979D;
  outline: none;
}

.add-field input::placeholder {
  color: #B2BAC8;
}

.add-field select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, #8A94A6 50%), linear-gradient(135deg, #8A94A6 50%, transparent 50%);
  background-position: calc(100% - 15px) 13px, calc(100% - 10px) 13px;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

.add-field.is-invalid input,
.add-field.is-invalid select {
  border-color: #E55353;
  background: #FFF8F8;
}

.add-field-error {
  min-height: 10px;
  color: #E55353;
  font-size: 9px;
  font-weight: 600;
}

.add-dynamic-fields {
  display: grid;
  gap: 14px;
  margin-top: 28px;
}

.doc-upload-area {
  margin-top: 18px;
}

.doc-description-field {
  gap: 6px;
}

.doc-upload-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 94px;
  align-items: center;
  gap: 12px;
}

.doc-upload-row input {
  height: 31px;
  min-width: 0;
}

.doc-browse-btn {
  height: 31px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #E7F7F7;
  color: #29979D;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.doc-browse-btn:hover {
  background: #D9F0F1;
}

.doc-upload-card {
  min-height: 46px;
  display: grid;
  grid-template-columns: 40px 1fr auto;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  padding: 7px 9px;
  border: 1px solid #E2E7EF;
  border-radius: 4px;
  background: #FFFFFF;
}

.doc-thumb {
  width: 34px;
  height: 34px;
  border-radius: 2px;
  background:
    linear-gradient(135deg, rgba(41,151,157,0.25), rgba(30,36,56,0.1)),
    linear-gradient(145deg, #123A40 0%, #10A0A8 48%, #17223A 100%);
}

.doc-info {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.doc-info strong {
  color: #30384A;
  font-size: 11px;
  line-height: 1.1;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.doc-info small {
  color: #8B95A7;
  font-size: 8.5px;
  line-height: 1;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.doc-progress {
  width: 100%;
  height: 4px;
  overflow: hidden;
  border-radius: 999px;
  background: #F2E0D9;
}

.doc-progress i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #FF7A1F;
  animation: docProgressPulse 0.9s ease-in-out infinite alternate;
}

@keyframes docProgressPulse {
  from { opacity: 0.75; }
  to { opacity: 1; }
}

.doc-percent {
  align-self: end;
  color: #1D2338;
  font-size: 10px;
  font-weight: 800;
}

.doc-upload-card button {
  width: 20px;
  height: 20px;
  color: #7C879B;
  font-size: 14px;
  line-height: 1;
}

.add-dynamic-row {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.add-attachment-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(280px, 1fr);
  gap: 14px;
}

.add-dynamic-fields {
  display: grid;
  gap: 14px;
}

.add-attachment-fields {
  display: grid;
  gap: 14px;
}

.add-dynamic-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 168px;
  align-items: start;
  gap: 16px;
}

.add-dynamic-line.is-empty {
  grid-template-columns: 168px;
}

.add-attachment-line.is-empty {
  grid-template-columns: 168px;
}

.add-dynamic-line .add-dynamic-fields {
  margin-top: 0;
}

.add-dynamic-line .add-attachment-fields {
  margin-top: 0;
}

.add-dynamic-line .add-field-line-btn {
  margin-top: 0;
}

.add-remove-field {
  position: absolute;
  top: -8px;
  right: -6px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #FFE9E9;
  color: #E55353;
  font-size: 14px;
  line-height: 1;
}

.add-field-line-btn {
  width: 100%;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-top: 0;
  border: 1px solid rgba(41, 151, 157, 0.28);
  border-radius: 8px;
  color: #217E83;
  font-size: 13px;
  font-weight: 800;
  background: linear-gradient(180deg, #FFFFFF 0%, #F2FBFC 100%);
  box-shadow: 0 8px 18px rgba(41, 151, 157, 0.08);
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

.add-field-line-btn::before {
  content: "+";
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #29979D;
  color: #FFFFFF;
  font-size: 17px;
  line-height: 1;
  font-weight: 800;
}

.add-field-line-btn:hover,
.add-field-line-btn:focus-visible {
  border-color: rgba(41, 151, 157, 0.62);
  box-shadow: 0 10px 22px rgba(41, 151, 157, 0.14);
  transform: translateY(-1px);
  outline: none;
}

.attachment-upload-card {
  cursor: pointer;
}

.attachment-upload-card input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.attachment-upload-ui {
  min-height: 52px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px dashed rgba(41, 151, 157, 0.42);
  border-radius: 10px;
  background: linear-gradient(180deg, #FFFFFF 0%, #F2FBFC 100%);
  box-shadow: 0 8px 18px rgba(41, 151, 157, 0.06);
  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.attachment-upload-card:hover .attachment-upload-ui,
.attachment-upload-card:focus-within .attachment-upload-ui {
  border-color: rgba(41, 151, 157, 0.72);
  box-shadow: 0 12px 24px rgba(41, 151, 157, 0.12);
  transform: translateY(-1px);
}

.attachment-upload-icon {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #29979D;
  color: #FFFFFF;
  font-size: 18px;
  font-weight: 800;
  line-height: 1;
}

.attachment-upload-ui strong {
  display: block;
  color: #217E83;
  font-size: 13px;
  font-weight: 800;
}

.attachment-upload-ui small {
  display: block;
  margin-top: 2px;
  color: #6F7890;
  font-size: 11px;
}

.attachment-current {
  color: #217E83;
  font-size: 11px;
  font-weight: 700;
}

.attachment-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.attachment-link {
  display: grid;
  gap: 4px;
  padding: 13px 14px;
  border: 1px solid rgba(41, 151, 157, 0.18);
  border-radius: 10px;
  background: #F7FCFD;
  color: #1C2432;
  text-decoration: none;
}

.attachment-link strong {
  color: #217E83;
  font-size: 13px;
}

.attachment-link span {
  color: #6F7890;
  font-size: 12px;
}

.settings-page-card {
  max-width: calc(100% - 40px);
}

.settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(280px, 1fr));
  gap: 22px;
  padding: 24px;
}

.settings-box {
  padding: 18px;
  border: 1px solid rgba(28, 36, 50, 0.08);
  border-radius: 14px;
  background: #FFFFFF;
  box-shadow: 0 12px 28px rgba(28, 36, 50, 0.04);
}

.settings-box-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

.settings-box-head h3 {
  margin: 0 0 4px;
  color: #1C2432;
  font-size: 15px;
  font-weight: 800;
}

.settings-box-head p {
  margin: 0;
  color: #6F7890;
  font-size: 12px;
}

.settings-module-tabs {
  display: inline-flex;
  gap: 8px;
  margin: 0 0 18px;
  padding: 4px;
  border: 1px solid #DDE4ED;
  border-radius: 8px;
  background: #FFFFFF;
}

.settings-module-tab {
  min-width: 110px;
  height: 34px;
  padding: 0 16px;
  border-radius: 6px;
  color: #5A6480;
  background: transparent;
  font-size: 13px;
  font-weight: 700;
}

.settings-module-tab.active {
  color: #FFFFFF;
  background: #29979D;
  box-shadow: 0 4px 12px rgba(32, 175, 160, 0.18);
}

.settings-small-btn {
  width: auto;
  min-width: 144px;
  padding: 0 14px;
  white-space: nowrap;
}

.settings-list {
  display: grid;
  gap: 12px;
}

.settings-row {
  position: relative;
}

.settings-row input {
  width: 100%;
  height: 48px;
  padding: 0 44px 0 14px;
  border: 1px solid #E4E8F1;
  border-radius: 8px;
  background: #FFFFFF;
  color: #1C2432;
  font-size: 13px;
}

.staff-page-card {
  margin-bottom: 24px;
}

.staff-list-panel {
  max-width: calc(100% - 40px);
  padding: 20px;
}

.staff-main .staff-list-panel {
  max-width: 100%;
  padding: 0;
}

.staff-primary-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  white-space: nowrap;
}

.staff-main .customer-toolbar {
  align-items: center;
  margin-bottom: 12px;
}

.staff-main .customer-table-card {
  min-height: 340px;
}

.staff-main .customer-table-wrap {
  max-height: calc(100vh - 220px);
}

.staff-main .staff-table {
  min-width: 1100px;
}

.service-main .service-table {
  min-width: 1120px;
}

.appointment-table {
  min-width: 1240px;
}

.booking-step-head {
  display: grid;
  gap: 3px;
  padding: 12px 14px;
  border: 1px solid rgba(41, 151, 157, 0.14);
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(41, 151, 157, 0.09), rgba(255, 255, 255, 0.94));
}

.booking-step-head span {
  color: #29979d;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.booking-step-head strong {
  color: #172b3a;
  font-size: 15px;
  font-weight: 800;
}

.booking-step-head p {
  margin: 0;
  color: #728394;
  font-size: 12px;
}

[data-booking-step].is-step-locked,
[data-step-heading].is-step-locked {
  display: none !important;
}

.add-footer-btn:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.appointment-add-customer-option {
  margin-top: 6px;
  border-top: 1px solid #edf2f7 !important;
  color: #29979d !important;
  font-weight: 800 !important;
}

.quick-customer-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 620;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(18, 24, 34, 0.42);
}

.quick-customer-modal-overlay.show {
  display: flex;
}

.quick-customer-modal {
  width: min(440px, 96vw);
  overflow: hidden;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 24px 60px rgba(8, 24, 40, 0.22);
}

.quick-customer-head,
.quick-customer-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid #edf2f7;
}

.quick-customer-foot {
  border-top: 1px solid #edf2f7;
  border-bottom: 0;
  justify-content: flex-end;
}

.quick-customer-head h2 {
  margin: 0;
  color: #172b3a;
  font-size: 17px;
  font-weight: 800;
}

.quick-customer-head p {
  margin: 3px 0 0;
  color: #718293;
  font-size: 12px;
}

.quick-customer-head > button {
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: #f2f6fa;
  color: #52677a;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.quick-customer-body {
  display: grid;
  gap: 14px;
  padding: 18px;
}

.appointment-availability-warning {
  padding: 13px 14px;
  border: 1px solid rgba(217, 150, 31, 0.32);
  border-radius: 12px;
  background: rgba(217, 150, 31, 0.1);
  color: #7a5514;
}

.appointment-availability-warning strong {
  display: block;
  color: #6a4509;
  font-size: 13px;
  font-weight: 800;
}

.appointment-availability-warning p {
  margin: 4px 0 10px;
  font-size: 12px;
}

.appointment-availability-warning label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #47320c;
  font-size: 12px;
  font-weight: 800;
}

.staff-main [data-staff-panel="roles"] .customer-table-card {
  min-height: 340px;
}

.staff-main [data-staff-panel="roles"] .customer-table-wrap {
  max-height: calc(100vh - 220px);
}

.staff-main .role-list-table {
  min-width: 760px;
  table-layout: fixed;
}

.staff-main .role-list-table th,
.staff-main .role-list-table td {
  height: 38px;
  vertical-align: middle;
}

.staff-main .role-list-table th:nth-child(1),
.staff-main .role-list-table td:nth-child(1) {
  width: 100px;
  text-align: center;
}

.staff-main .role-list-table th:nth-child(2),
.staff-main .role-list-table td:nth-child(2) {
  text-align: left;
}

.staff-main .role-list-table th:nth-child(3),
.staff-main .role-list-table td:nth-child(3) {
  width: 150px;
  text-align: center;
}

.staff-main .role-list-table th:nth-child(4),
.staff-main .role-list-table td:nth-child(4) {
  width: 150px;
  text-align: center;
}

.staff-main .role-list-table .table-actions {
  justify-content: center;
}

/* Department table — 5-column layout: DID | Department | Description | Status | Action */
.staff-main [data-staff-panel="departments"] .role-list-table {
  min-width: 680px;
}

.staff-main [data-staff-panel="departments"] .role-list-table th:nth-child(1),
.staff-main [data-staff-panel="departments"] .role-list-table td:nth-child(1) {
  width: 60px;
  text-align: center;
}

.staff-main [data-staff-panel="departments"] .role-list-table th:nth-child(2),
.staff-main [data-staff-panel="departments"] .role-list-table td:nth-child(2) {
  width: 170px;
  text-align: left;
}

.staff-main [data-staff-panel="departments"] .role-list-table th:nth-child(3),
.staff-main [data-staff-panel="departments"] .role-list-table td:nth-child(3) {
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.staff-main [data-staff-panel="departments"] .role-list-table th:nth-child(4),
.staff-main [data-staff-panel="departments"] .role-list-table td:nth-child(4) {
  width: 90px;
  text-align: center;
}

.staff-main [data-staff-panel="departments"] .role-list-table th:nth-child(5),
.staff-main [data-staff-panel="departments"] .role-list-table td:nth-child(5) {
  width: 80px;
  text-align: center;
}

.table-empty-state {
  height: 160px;
  color: #7A849C !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  text-align: center !important;
}

.role-create-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 136px;
  gap: 10px;
}

.role-create-row .settings-small-btn {
  min-width: 0;
}

.staff-table th,
.staff-table td {
  white-space: nowrap;
}

.staff-dept-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: #EEF6FF;
  color: #1D6FD8;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.staff-dept-none {
  color: #9CA3AF;
}

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

.staff-submenu {
  display: inline-flex;
  gap: 10px;
  margin: 0 0 18px;
  padding: 6px;
  border: 1px solid rgba(41, 151, 157, 0.16);
  border-radius: 12px;
  background: #FFFFFF;
  box-shadow: 0 10px 22px rgba(28, 36, 50, 0.04);
}

.staff-submenu-btn {
  height: 38px;
  padding: 0 18px;
  border-radius: 9px;
  color: #6F7890;
  font-size: 13px;
  font-weight: 800;
}

.staff-submenu-btn.active {
  color: #FFFFFF;
  background: linear-gradient(135deg, #33C6C3 0%, #29979D 100%);
  box-shadow: 0 10px 20px rgba(41, 151, 157, 0.22);
}

.permission-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(140px, 1fr));
  gap: 12px;
  padding: 14px;
  border: 1px solid #E4E8F1;
  border-radius: 10px;
  background: #FFFFFF;
}

.permission-grid label {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #1C2432;
  font-size: 13px;
  font-weight: 700;
}

.permission-grid input {
  width: 16px;
  height: 16px;
  accent-color: #29979D;
}

.permission-pill {
  display: inline-flex;
  margin: 2px 5px 2px 0;
  padding: 4px 8px;
  border-radius: 999px;
  color: #217E83;
  background: #EAF9FA;
  font-size: 11px;
  font-weight: 800;
}

.table-action-btn {
  min-width: 68px;
  height: 30px;
  padding: 0 12px;
  border-radius: 8px;
  color: #217E83;
  background: #EAF9FA;
  font-size: 12px;
  font-weight: 800;
}

.table-action-btn:hover,
.table-action-btn:focus-visible {
  color: #FFFFFF;
  background: #29979D;
  outline: none;
}

.role-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 520;
  display: none;
  align-items: stretch;
  justify-content: flex-end;
  background: rgba(18, 26, 38, 0.36);
}

.role-modal-overlay.show {
  display: flex;
}

.role-modal {
  width: 460px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  background: #FFFFFF;
  box-shadow: -18px 0 42px rgba(16, 24, 40, 0.18);
  animation: drawerIn 0.22s ease both;
}

.role-modal .permission-grid {
  grid-template-columns: repeat(2, minmax(130px, 1fr));
}

.add-drawer-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  padding: 14px 32px 24px;
  background: #F7F8FC;
}

.add-footer-btn {
  flex: 1;
  height: 32px;
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 600;
}

.add-cancel-btn {
  background: #273244;
}

.add-next-btn {
  position: relative;
  background: #29979D;
}

.add-drawer-overlay.is-saving .add-next-btn {
  color: transparent;
  pointer-events: none;
}

.add-drawer-overlay.is-saving .add-next-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 16px;
  height: 16px;
  margin: auto;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: #FFFFFF;
  border-radius: 50%;
  animation: addSpin 0.8s linear infinite;
}

.add-page-main {
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 24px 28px 28px;
  background: #F3F6FA;
}

.add-page-card {
  width: 100%;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

.add-page-card .add-customer-form {
  height: auto;
  min-height: 0;
}

.add-page-head {
  display: none;
}

.add-page-body {
  position: relative;
  flex: 0 0 auto;
  min-height: 0;
  max-height: none;
  padding: 18px 0 8px;
  overflow: visible;
}

.add-page-foot {
  flex-shrink: 0;
  align-items: center;
  justify-content: flex-start;
  gap: 18px;
  padding: 0 0 0;
  background: transparent;
}

.add-page-foot .add-footer-btn {
  flex: 0 0 auto;
  width: 200px;
  height: 46px;
}

.booking-collect-hint {
  margin: 6px 0 0;
  font-size: 12px;
  color: #6b7280;
}

.booking-paid-banner {
  display: flex;
  flex-direction: column;
  gap: 2px;
  border: 1.5px solid #86efac;
  background: #f0fdf4;
  border-radius: 10px;
  padding: 12px 16px;
}

.booking-paid-banner.is-hidden {
  display: none;
}

.booking-paid-banner strong {
  color: #15803d;
  font-size: 14px;
}

.booking-paid-banner span {
  color: #166534;
  font-size: 12.5px;
}

.booking-mini-pos {
  border: 1.5px solid #d1fae5;
  background: #f0fdf4;
  border-radius: 10px;
  padding: 16px;
  margin-top: 4px;
}

.booking-mini-pos.is-hidden {
  display: none;
}

.mini-pos-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.mini-pos-methods {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}

.mini-pos-method {
  flex: 1;
  padding: 9px 10px;
  border-radius: 8px;
  border: 1.5px solid #d1d5db;
  background: #fff;
  color: #374151;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: all .15s;
}

.mini-pos-amount-row { display:flex; gap:8px; align-items:stretch; }
.mini-pos-amount-row input { flex:1; }
.mini-pos-suggested { padding:0 12px; border-radius:8px; border:1.5px solid #86efac; background:#f0fdf4; color:#15803d; font-size:13px; font-weight:600; cursor:pointer; font-family:inherit; white-space:nowrap; }
.mini-pos-suggested:hover { background:#dcfce7; }
.mini-pos-suggested:disabled { opacity:.4; cursor:not-allowed; }
.mini-pos-hint { display:block; margin-top:6px; font-size:12px; color:#6b7280; }
.mini-pos-hint.is-warn { color:#b45309; }

.mini-pos-method.active {
  background: #217E83;
  border-color: #217E83;
  color: #fff;
}

.add-page-main .dash-title-row {
  width: 100%;
  flex-shrink: 0;
  align-items: center;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid #DDE3EC;
}

.add-page-main .dash-title {
  color: #1C2432;
  font-size: 22px;
  font-weight: 800;
}

.add-page-main .dash-title-icon {
  display: none;
}

.add-page-main .new-customer-btn {
  height: auto;
  padding: 0;
  background: transparent;
  box-shadow: none;
  color: #6A5FA3;
  font-size: 12px;
  font-weight: 700;
}

.add-page-body > .add-profile-row {
  max-width: calc(70% - 12px);
  min-height: 120px;
  display: flex;
  align-items: center;
  gap: 22px;
  margin: 0 0 28px;
  padding: 22px 24px;
  background: #FFFFFF;
}

.add-page-body > .add-field-full,
.add-page-body > .add-form-grid,
.add-page-body .form-template-block {
  max-width: calc(100% - 330px);
}

.add-page-body > .add-field-full {
  margin-bottom: 0;
}

.add-page-body .add-form-grid {
  grid-template-columns: repeat(2, minmax(280px, 1fr));
  gap: 0px 28px;
}

.add-page-body .add-field {
  gap: 12px;
}

.add-page-body .add-field span {
  color: #1C2432;
  font-size: 13px;
  font-weight: 600;
}

.add-page-body .add-field input,
.add-page-body .add-field select,
.add-page-body .add-field textarea {
  height: 48px;
  border: 1.5px solid #DDE4ED;
  border-radius: 0;
  background: #FFFFFF;
  box-shadow: none;
  font-size: 13px;
  font-weight: 500;
  transition: border-color 0.16s;
}

.add-page-body .add-field textarea {
  min-height: 120px;
  padding-top: 14px;
  resize: vertical;
  line-height: 1.45;
  padding-left: 14px;
}

.add-page-body .add-field input:focus,
.add-page-body .add-field select:focus,
.add-page-body .add-field textarea:focus {
  border-color: #29979D;
  outline: none;
}

.role-combobox {
  position: relative;
}

.role-combobox input {
  padding-right: 44px;
}

.role-combo-toggle {
  position: absolute;
  top: 1px;
  right: 1px;
  width: 42px;
  height: calc(100% - 2px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #6D778B;
  background: transparent;
}

.role-combo-toggle svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.role-options {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 20;
  display: none;
  max-height: 220px;
  overflow: auto;
  padding: 6px;
  border: 1px solid #DDE4ED;
  border-radius: 8px;
  background: #FFFFFF;
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.12);
}

.role-combobox.is-open .role-options {
  display: block;
}

.role-option {
  width: 100%;
  min-height: 34px;
  display: flex;
  align-items: center;
  padding: 0 10px;
  border-radius: 6px;
  color: #1F2937;
  font-size: 13px;
  font-weight: 700;
  text-align: left;
}

.role-option:hover,
.role-option:focus-visible {
  color: #217E83;
  background: #EAF9FA;
  outline: none;
}

.role-option.is-empty {
  color: #8A94A6;
  cursor: default;
}

.role-option-group {
  padding: 8px 10px 4px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #8A94A6;
}

.staff-form-main .add-page-card {
  max-width: 1040px;
}

.staff-form-main .add-drawer-head {
  display: none;
}

.staff-form-main .add-page-body {
  padding-top: 8px;
}

.staff-form-main .add-page-body > .add-form-grid {
  max-width: 100%;
  grid-template-columns: repeat(2, minmax(260px, 1fr));
  column-gap: 28px;
  row-gap: 14px;
}

.staff-form-main .staff-template-block {
  max-width: 100%;
  margin-top: 18px;
}

.staff-form-main .form-template-grid {
  grid-template-columns: repeat(2, minmax(260px, 1fr));
  gap: 14px 28px;
}

.service-custom-fields {
  display: grid;
  gap: 12px;
}

.service-dynamic-row {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(180px, 1fr) 34px;
  gap: 12px;
  align-items: end;
}

.staff-availability-table {
  min-width: 1040px;
}

.availability-main {
  overflow-y: auto;
  overflow-x: hidden;
  padding-bottom: 18px;
}

.availability-main .customer-toolbar {
  margin-bottom: 10px;
}

.availability-main .is-hidden {
  display: none !important;
}

.availability-view-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border: 1px solid #e5ebf2;
  border-radius: 999px;
  background: #fff;
}

.availability-view-toggle button {
  min-height: 32px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #607486;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  transition: 0.18s ease;
}

.availability-view-toggle button.active {
  background: #29979d;
  color: #fff;
  box-shadow: 0 8px 18px rgba(41, 151, 157, 0.2);
}

.availability-month-filter {
  display: grid;
  grid-template-columns: auto 150px;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  color: #5c7080;
  font-size: 12px;
  font-weight: 700;
}

.availability-month-filter input {
  height: 40px;
  border: 1px solid #e5ebf2;
  border-radius: 12px;
  background: #fff;
  color: #172b3a;
  font: inherit;
  padding: 0 12px;
  outline: none;
}

.availability-calendar-card {
  margin-top: 10px;
  padding: 12px;
  border: 1px solid #e8eef5;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 18px 36px rgba(25, 49, 73, 0.06);
}

.availability-table-card {
  margin-top: 10px;
}

.availability-calendar-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 10px;
}

.availability-calendar-head h2 {
  margin: 0;
  color: #172b3a;
  font-size: 18px;
  font-weight: 800;
}

.availability-calendar-head p {
  margin: 2px 0 0;
  color: #7b8c9d;
  font-size: 12px;
}

.availability-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
  color: #647789;
  font-size: 11px;
  font-weight: 700;
}

.availability-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  display: inline-flex;
  margin-right: -4px;
  align-self: center;
}

.availability-dot.available,
.availability-event.available {
  --schedule-color: #16a060;
}

.availability-dot.leave,
.availability-event.leave {
  --schedule-color: #e05252;
}

.availability-dot.half-day,
.availability-event.half-day {
  --schedule-color: #d9961f;
}

.availability-dot.custom-time,
.availability-event.custom-time,
.availability-dot.permission-time,
.availability-event.permission-time {
  --schedule-color: #29979d;
}

.availability-dot {
  background: var(--schedule-color);
}

.availability-weekdays,
.availability-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(120px, 1fr));
}

.availability-weekdays {
  overflow: hidden;
  border: 1px solid #edf2f7;
  border-bottom: 0;
  border-radius: 14px 14px 0 0;
  background: #f7fafc;
}

.availability-weekdays span {
  padding: 8px 10px;
  color: #5f7283;
  font-size: 11px;
  font-weight: 800;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.availability-calendar-grid {
  overflow: visible;
  border-left: 1px solid #edf2f7;
  border-top: 1px solid #edf2f7;
}

.availability-day {
  min-height: clamp(82px, calc((100vh - 292px) / 6), 104px);
  padding: 7px;
  border-right: 1px solid #edf2f7;
  border-bottom: 1px solid #edf2f7;
  background: linear-gradient(180deg, #fff 0%, #fbfdff 100%);
  cursor: pointer;
  transition: 0.18s ease;
}

.availability-day:hover {
  background: #f7fcfc;
  box-shadow: inset 0 0 0 1px rgba(41, 151, 157, 0.16);
}

.availability-day.is-muted {
  background: #f9fbfd;
  cursor: default;
}

.availability-day.is-past {
  background: #f8fafc;
  cursor: not-allowed;
  opacity: 0.62;
}

.availability-day.is-today {
  background: linear-gradient(180deg, rgba(41, 151, 157, 0.08), #fff 52%);
}

.availability-day-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}

.availability-day-top span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  color: #25384a;
  font-size: 12px;
  font-weight: 800;
}

.availability-day.is-today .availability-day-top span {
  background: #29979d;
  color: #fff;
}

.availability-day-top button {
  width: 21px;
  height: 21px;
  border: 0;
  border-radius: 50%;
  background: rgba(41, 151, 157, 0.1);
  color: #29979d;
  font-weight: 800;
  cursor: pointer;
}

.availability-day-events {
  display: grid;
  gap: 4px;
  max-height: calc(clamp(82px, calc((100vh - 292px) / 6), 104px) - 34px);
  overflow-y: auto;
  scrollbar-width: thin;
}

.availability-no-event {
  color: #b2bfca;
  font-size: 10px;
}

.availability-event {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 20px;
  align-items: stretch;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--schedule-color) 22%, #fff);
  border-left: 4px solid var(--schedule-color);
  border-radius: 8px;
  background: color-mix(in srgb, var(--schedule-color) 9%, #fff);
}

.availability-event button {
  border: 0;
  background: transparent;
  cursor: pointer;
}

.availability-event > button:first-child {
  min-width: 0;
  padding: 5px 6px;
  text-align: left;
}

.availability-event strong,
.availability-event span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.availability-event strong {
  color: #213547;
  font-size: 10px;
  font-weight: 800;
}

.availability-event span {
  margin-top: 1px;
  color: #607386;
  font-size: 9px;
}

.availability-event-delete {
  color: #d45050;
  font-size: 15px;
  line-height: 1;
}

.availability-calendar-error {
  padding: 40px;
  color: #d45050;
  text-align: center;
}

.availability-day-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(9, 19, 31, 0.46);
  backdrop-filter: blur(6px);
}

.availability-day-modal-overlay.show {
  display: flex;
}

.availability-day-modal {
  width: min(620px, 96vw);
  max-height: min(720px, 88vh);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 24px 60px rgba(8, 24, 40, 0.22);
}

.availability-day-modal-head,
.availability-day-modal-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  border-bottom: 1px solid #eef3f7;
}

.availability-day-modal-foot {
  border-top: 1px solid #eef3f7;
  border-bottom: 0;
  justify-content: flex-end;
}

.availability-day-modal-head h2 {
  margin: 0;
  color: #172b3a;
  font-size: 18px;
  font-weight: 800;
}

.availability-day-modal-head p {
  margin: 3px 0 0;
  color: #687b8d;
  font-size: 12px;
  font-weight: 700;
}

.availability-day-modal-close {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: #f2f6fa;
  color: #52677a;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.availability-day-modal-body {
  display: grid;
  gap: 10px;
  padding: 16px 20px;
  overflow-y: auto;
}

.availability-detail-card {
  --schedule-color: #29979d;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  padding: 13px;
  border: 1px solid color-mix(in srgb, var(--schedule-color) 22%, #fff);
  border-left: 5px solid var(--schedule-color);
  border-radius: 14px;
  background: color-mix(in srgb, var(--schedule-color) 8%, #fff);
}

.availability-detail-card.leave {
  --schedule-color: #e05252;
}

.availability-detail-card.half-day {
  --schedule-color: #d9961f;
}

.availability-detail-card.permission-time,
.availability-detail-card.custom-time {
  --schedule-color: #29979d;
}

.availability-detail-card strong,
.availability-detail-card span,
.availability-detail-card p {
  display: block;
}

.availability-detail-card strong {
  color: #172b3a;
  font-size: 13px;
  font-weight: 800;
}

.availability-detail-card span {
  margin-top: 3px;
  color: #4c6476;
  font-size: 12px;
  font-weight: 700;
}

.availability-detail-card p {
  margin: 8px 0 0;
  color: #6f8294;
  font-size: 12px;
  line-height: 1.4;
}

.availability-detail-muted,
.availability-detail-empty {
  color: #9badbb;
}

.availability-detail-empty {
  padding: 34px 16px;
  border: 1px dashed #dce6ee;
  border-radius: 14px;
  text-align: center;
}

.availability-detail-actions {
  display: flex;
  align-items: flex-start;
  gap: 7px;
}

.availability-detail-actions button {
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid rgba(41, 151, 157, 0.22);
  border-radius: 999px;
  background: #fff;
  color: #25767c;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}

.availability-detail-actions button.danger {
  border-color: rgba(224, 82, 82, 0.22);
  color: #d45050;
}

.add-field.is-soft-disabled {
  opacity: 0.62;
}

.add-field.is-soft-disabled input {
  background: #f5f8fb;
  cursor: not-allowed;
}

.duration-picker {
  padding: 8px;
  border: 1px solid rgba(41, 151, 157, 0.18);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(240, 250, 250, 0.72));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 10px 24px rgba(20, 39, 61, 0.05);
}

.duration-input-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.duration-unit-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 6px 10px;
  border: 1px solid rgba(41, 151, 157, 0.14);
  border-radius: 11px;
  background: #fff;
}

.duration-unit-card small {
  color: #2f6f76;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.staff-form-main .add-page-body .duration-unit-card input {
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #172b3a;
  font-size: 15px;
  font-weight: 700;
  text-align: right;
  box-shadow: none;
}

.staff-form-main .add-page-body .duration-unit-card input:focus {
  outline: none;
  box-shadow: none;
}

.duration-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.duration-presets button {
  min-height: 26px;
  padding: 5px 10px;
  border: 1px solid rgba(41, 151, 157, 0.2);
  border-radius: 999px;
  background: #fff;
  color: #25767c;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: 0.18s ease;
}

.duration-presets button:hover {
  border-color: rgba(41, 151, 157, 0.55);
  background: rgba(41, 151, 157, 0.1);
  transform: translateY(-1px);
}

.staff-form-main .add-page-body .add-field {
  min-height: 74px;
  gap: 8px;
}

.staff-form-main .add-page-body .add-field span {
  min-height: 16px;
  font-size: 12px;
}

.staff-form-main .add-page-body .add-field input,
.staff-form-main .add-page-body .add-field select {
  height: 42px;
  border-radius: 2px;
}

.staff-form-main .role-combo-toggle {
  height: 40px;
}

.staff-form-main .add-page-foot {
  max-width: 100%;
  padding-top: 12px;
  justify-content: flex-start;
}

.staff-form-main .add-page-foot .add-footer-btn {
  width: 170px;
  height: 42px;
}

.add-page-body .doc-upload-area {
  position: absolute;
  top: 48px;
  right: 0;
  width: 292px;
  min-width: 0;
  margin: 0;
  padding: 0;
  background: transparent;
}

.add-page-body .add-profile-row .add-upload-box {
  width: 92px;
  height: 92px;
  border: 1px dashed #BFC7D3;
  border-radius: 6px;
  background: #F1F4F8;
}

.add-page-body .add-profile-row h3 {
  margin: 0;
  color: #1C2432;
  font-size: 16px;
  font-weight: 700;
}

.add-page-body .doc-upload-area::before {
  content: "Profile Image";
  position: absolute;
  top: -28px;
  left: 0;
  color: #1C2432;
  font-size: 13px;
  font-weight: 600;
}

.add-page-body .profile-panel-upload {
  min-height: 166px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  border: 1px solid #B9C1CC;
  border-radius: 8px;
  background: #E5E9EE;
  cursor: pointer;
}

.add-page-body .profile-panel-upload .add-upload-preview {
  flex-direction: column;
  gap: 10px;
  padding: 20px;
  color: #9AA3B5;
  text-align: center;
}

.add-page-body .profile-panel-upload .add-upload-preview svg {
  width: 42px;
  height: 42px;
  color: #B5BBC6;
}

.add-page-body .profile-panel-upload .add-upload-preview strong {
  color: #8B95A7;
  font-size: 13px;
  font-weight: 600;
}

.add-page-body .profile-panel-upload .add-upload-preview small {
  color: #6A5FA3;
  font-size: 12px;
  font-weight: 700;
}

.add-page-body .profile-panel-upload .add-upload-preview img {
  object-fit: cover;
  border-radius: 8px;
}

.add-page-body .doc-description-field {
  margin: 0 20px;
}

.add-page-body .doc-description-field > span {
  display: none;
}

.add-page-body .doc-upload-row {
  grid-template-columns: 1fr;
}

.add-page-body .doc-upload-row input {
  height: 54px;
  border: 0;
  border-radius: 0;
}

.add-page-body .doc-browse-btn {
  height: 30px;
  width: auto;
  margin-top: 10px;
  border-radius: 0;
  background: transparent;
  color: #6A5FA3;
}

.add-page-body .add-dynamic-line {
  max-width: calc(100% - 330px);
}

.add-page-body .add-field-line-btn {
  height: 48px;
}

.add-customer-form.is-saving .add-next-btn {
  color: transparent;
  pointer-events: none;
}

.add-customer-form.is-saving .add-next-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 16px;
  height: 16px;
  margin: auto;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: #FFFFFF;
  border-radius: 50%;
  animation: addSpin 0.8s linear infinite;
}

.customer-detail-page {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  align-items: start;
  gap: 22px;
}

.detail-view-card {
  min-width: 0;
  min-height: 100%;
  border: 1px solid #E1E6EF;
  border-radius: 6px;
  background: #FFFFFF;
  box-shadow: 0 3px 10px rgba(16, 24, 40, 0.07);
  padding: 18px;
}

.detail-profile {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 18px;
  border-bottom: 1px solid #EEF2F6;
}

.detail-profile h2 {
  margin: 0 0 5px;
  color: #1C2432;
  font-size: 18px;
  font-weight: 800;
}

.detail-profile p {
  margin: 3px 0 0;
  color: #7C879B;
  font-size: 12px;
  font-weight: 600;
}

.detail-profile .status-badge {
  margin-left: auto;
}

.detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  padding-top: 18px;
}

.detail-grid div {
  min-height: 58px;
  display: grid;
  gap: 6px;
  padding: 12px 14px;
  border-radius: 5px;
  background: #F7F8FC;
}

.detail-grid span,
.detail-history-row span {
  color: #8B95A7;
  font-size: 11px;
  font-weight: 700;
}

.detail-grid strong,
.detail-history-row strong {
  color: #1C2432;
  font-size: 13px;
  font-weight: 800;
}

.detail-span {
  grid-column: 1 / -1;
}

.detail-section-title {
  margin: 0 0 12px;
  color: #1C2432;
  font-size: 15px;
  font-weight: 800;
}

.detail-history-card {
  border: 1px solid #DDE3EC;
  border-radius: 5px;
  overflow: hidden;
}

.detail-history-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 18px;
  padding: 13px 14px;
}

.detail-history-row div:last-child {
  grid-column: 1 / -1;
}

.detail-history-row + .detail-history-row {
  border-top: 1px solid #EEF2F6;
}

.detail-history-row div {
  display: grid;
  gap: 4px;
}

.detail-history-row small {
  color: #5A6480;
  font-size: 10px;
  font-weight: 700;
}

.detail-actions {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
  gap: 16px;
}

.detail-actions .add-footer-btn {
  flex: 0 0 150px;
}

.patient-history-list {
  display: grid;
  gap: 10px;
}

.patient-history-card {
  border: 1px solid #E4E9F1;
  border-radius: 12px;
  padding: 12px;
  background: #FBFCFE;
}

.patient-history-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.patient-history-head strong {
  color: #1C2432;
  font-size: 13px;
}

.patient-history-head span {
  color: #20AFA0;
  font-size: 11px;
  font-weight: 900;
}

.patient-history-card p,
.detail-empty-note {
  margin: 6px 0 0;
  color: #667085;
  font-size: 12px;
  line-height: 1.5;
}

.detail-mini-list {
  margin: 8px 0 0;
  padding-left: 18px;
  color: #3D4A5C;
  font-size: 12px;
  line-height: 1.5;
}

.patient-progress {
  margin: 8px 0;
}

.detail-edit-card {
  width: 100%;
}

.delete-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 600;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(18, 24, 34, 0.42);
}

.delete-modal-overlay.show {
  display: flex;
}

.delete-modal {
  width: min(332px, 100%);
  min-height: 142px;
  padding: 18px 34px 16px;
  border-radius: 5px;
  background: #FFFFFF;
  box-shadow: 0 10px 30px rgba(16, 24, 40, 0.18);
  text-align: center;
}

.delete-modal-icon {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
  border-radius: 50%;
  background: #FFE9E9;
  color: #E55353;
}

.delete-modal-icon svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.delete-modal h2 {
  margin: 0 0 6px;
  color: #30384A;
  font-size: 17px;
  line-height: 1.2;
  font-weight: 700;
}

.delete-modal p {
  margin: 0 0 18px;
  color: #7C879B;
  font-size: 11px;
  line-height: 1.35;
  font-weight: 500;
}

.delete-modal-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 26px;
}

.delete-modal-btn {
  width: 108px;
  height: 29px;
  border-radius: 999px;
  color: #FFFFFF;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}

.delete-modal-cancel {
  background: #273244;
}

.delete-modal-confirm {
  background: #29979D;
}

.delete-modal-cancel:hover {
  background: #1F2938;
}

.delete-modal-confirm:hover {
  background: #23898F;
}

.cust-metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
  margin-bottom: 15px;
}

.metric-box {
  min-height: 62px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
}

.metric-visits {
  background: #125F3F1F;
  color: #18745B;
}

.metric-sales {
  background: #ECF5FF;
  color: #1E7EDD;
}

.metric-label {
  font-size: 12px;
  font-weight: 500;
}

.metric-value {
  margin-top: 4px;
  font-size: 20px;
  line-height: 1;
  font-weight: 800;
}

.cust-info {
  display: grid;
  gap: 7px;
}

.cust-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 5px;
  color: #1C2432CC;
  font-size: 12px;
  font-weight: 500;
}

.cust-row svg {
  width: 12px;
  height: 12px;
  color: #20AFA0;
}

.cust-row-value {
  justify-self: end;
  color: #1E2637;
  font-weight: 700;
}

.customer-table-card {
  grid-column: 1 / -1;
  min-height: 0;
  padding: 0;
  border: 1px solid #DDE3EC;
  border-radius: 4px;
  background: #FFFFFF;
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.04);
  overflow: hidden;
}

.customer-table-wrap {
  width: 100%;
  max-height: calc(100vh - 302px);
  overflow: auto;
}

.customer-table-wrap::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}

.customer-table-wrap::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: #C9D1DD;
}

.customer-table-wrap::-webkit-scrollbar-track {
  background: #F3F6FA;
}

.customer-table {
  width: 100%;
  min-width: 850px;
  border-collapse: collapse;
}

.customer-table thead tr {
  height: 38px;
  background: #F1F4F8;
}

.customer-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #F1F4F8;
}

.customer-table th,
.customer-table td {
  padding: 0 12px;
  color: #1F2937;
  font-size: 12px;
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
  border-bottom: 1px solid #EEF2F6;
}

.customer-table th {
  color: #5A6480;
  font-size: 12px;
  font-weight: 800;
}

.customer-table tbody tr {
  height: 38px;
  background: #FFFFFF;
}

.customer-table tbody tr:hover {
  background: #FAFCFF;
}

.table-status {
  color: #16A060;
  font-size: 11px;
  font-weight: 800;
}

.table-actions {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.table-actions button {
  width: 16px;
  height: 16px;
  color: #20AFA0;
}

.table-actions.queue-actions button {
  color: #fff;
}

.table-actions .table-action-delete {
  color: #E74C3C;
}

.role-view-modal .view-field span {
  display: block;
  margin-bottom: 6px;
  color: #5A6480;
  font-size: 12px;
  font-weight: 800;
}

.role-view-modal .view-field p {
  margin: 0;
  color: #1F2937;
  font-size: 14px;
  font-weight: 700;
}

.role-view-permissions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.role-view-empty {
  color: #7A849C;
  font-size: 13px;
  font-weight: 600;
}

.table-actions svg {
  width: 100%;
  height: 100%;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dash-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 99;
  background: rgba(12, 18, 30, 0.42);
}

.dash-overlay.show {
  display: block;
}

@media (max-width: 860px) {
  .stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .customer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .dashboard-hdr {
    padding: 0 14px;
    gap: 10px;
  }

  .dashboard-hdr .hdr-left {
    flex-basis: auto;
  }

  .dashboard-hdr .logo-img {
    height: 34px;
  }

  .dash-sidebar {
    position: fixed;
    top: var(--hdr-h);
    left: 0;
    bottom: 0;
    z-index: 120;
    transform: translateX(-100%);
    transition: transform 0.22s ease;
  }

  .dash-sidebar.open {
    transform: translateX(0);
  }

  .dashboard-main {
    padding: 16px 14px 26px;
  }

  .add-page-body > .add-field-full,
  .add-page-body > .add-profile-row,
  .add-page-body > .add-form-grid,
  .add-page-body .form-template-block,
  .add-page-body .add-dynamic-line,
  .add-page-body .add-dynamic-fields,
  .add-page-body .add-field-line-btn {
    max-width: 100%;
  }

  .add-dynamic-line {
    grid-template-columns: 1fr;
  }

  .form-template-grid,
  .settings-grid {
    grid-template-columns: 1fr;
  }

  .add-dynamic-line .add-field-line-btn {
    margin-top: 0;
  }

  .add-page-body .doc-upload-area {
    position: static;
    width: min(100%, 220px);
    margin: 20px auto 0;
  }

  .add-page-body .doc-upload-area::before {
    position: static;
    display: block;
    margin-bottom: 10px;
  }

  .customer-detail-page {
    grid-template-columns: 1fr;
  }

  .customer-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .customer-search {
    width: 100%;
  }

  .customer-grid.list-mode {
    max-height: calc(100vh - 280px);
  }

  .customer-table-wrap {
    max-height: calc(100vh - 282px);
  }

  .view-actions {
    justify-content: flex-end;
    flex-wrap: wrap;
  }
}

@media (max-width: 640px) {
  .dash-sidebar {
    padding: 12px 7px 18px;
  }

  .dash-nav {
    width: 66px;
    height: 54px;
    min-height: 54px;
  }

  .dashboard-hdr .hdr-icon-btn:not(:nth-of-type(2)) {
    display: none;
  }

  .stats-grid,
  .customer-grid {
    grid-template-columns: 1fr;
  }

  .customer-grid.list-mode {
    max-height: calc(100vh - 260px);
  }

  .customer-table-wrap {
    max-height: calc(100vh - 262px);
  }

  .stat-card {
    padding: 18px 18px 16px;
  }

  .stat-main {
    font-size: 23px;
  }

  .dash-title-row {
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
  }

  .new-customer-btn {
    width: 100%;
  }

  .view-actions {
    justify-content: stretch;
  }

  .view-btn,
  .export-btn {
    flex: 1;
    justify-content: center;
  }

  .view-drawer {
    width: min(360px, 92vw);
  }

  .add-drawer {
    width: min(360px, 92vw);
  }

  .add-page-card {
    width: 100%;
  }

  .add-page-body > .add-field-full,
  .add-page-body > .add-profile-row,
  .add-page-body > .add-form-grid,
  .add-page-body .form-template-block,
  .add-page-body .add-dynamic-line,
  .add-page-body .add-dynamic-fields,
  .add-page-body .add-field-line-btn {
    max-width: 100%;
  }

  .add-page-body .doc-upload-area {
    position: static;
    width: min(100%, 220px);
    min-width: 0;
    margin: 20px auto 0;
  }

  .add-page-body .doc-upload-area::before {
    position: static;
    display: block;
    margin-bottom: 10px;
  }

  .customer-detail-page,
  .detail-edit-card {
    width: 100%;
  }

  .view-service-row {
    grid-template-columns: 1fr 1fr auto;
    gap: 10px;
  }
}

@media (max-width: 460px) {
  .dashboard-hdr .timer-btn {
    padding: 0 9px;
    font-size: 10px;
  }

  .dash-nav-group {
    width: 66px;
  }

  .dash-submenu {
    left: 80px;
    width: min(260px, calc(100vw - 80px));
    padding: 22px 16px;
  }

  .dash-submenu a {
    min-height: 46px;
    font-size: 13px;
  }

  .pos-nav-btn {
    padding: 0 9px;
  }

  .customer-card {
    padding: 15px 12px 13px;
  }

  .cust-metrics {
    gap: 10px;
  }

  .view-drawer {
    width: 100vw;
    height: calc(100vh - var(--hdr-h));
  }

  .add-drawer {
    width: 100vw;
    height: calc(100vh - var(--hdr-h));
  }

  .add-page-main {
    padding: 14px;
  }

  .add-page-main .dash-title-row {
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 22px;
  }

  .add-page-main .dash-title {
    font-size: 20px;
  }

  .add-page-card .add-customer-form {
    min-height: auto;
  }

  .add-page-body {
    padding: 14px 0 8px;
  }

  .add-page-body .add-form-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .add-page-body .add-field input,
  .add-page-body .add-field select,
  .add-page-body .doc-upload-row input {
    height: 40px;
  }

  .add-page-foot {
    flex-direction: column;
    padding: 16px 0 0;
  }

  .add-page-foot .add-footer-btn {
    flex: 0 0 auto;
    width: min(100%, 190px);
  }

  .detail-profile {
    align-items: flex-start;
  }

  .detail-grid,
  .detail-history-row {
    grid-template-columns: 1fr;
  }

  .detail-actions {
    flex-direction: column;
  }

  .detail-actions .add-footer-btn {
    flex: 0 0 auto;
    width: 100%;
  }

  .view-drawer-head {
    padding: 0 14px;
  }

  .add-drawer-head {
    padding: 0 14px;
  }

  .view-drawer-body {
    padding: 14px;
  }

  .add-drawer-body {
    padding: 14px;
  }

  .add-profile-row {
    margin-bottom: 14px;
  }

  .add-form-grid,
  .add-dynamic-row {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .doc-upload-row {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .doc-browse-btn {
    width: 100%;
  }

  .doc-upload-card {
    grid-template-columns: 36px 1fr auto;
    gap: 8px;
  }

  .add-field-full {
    margin-bottom: 12px;
  }

  .add-drawer-foot {
    gap: 14px;
    padding: 12px 14px 18px;
  }

  .view-profile-card {
    align-items: flex-start;
    gap: 10px;
  }

  .view-detail-row {
    grid-template-columns: 14px 54px 1fr;
    gap: 6px;
  }

  .view-service-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .view-service-row div:last-child {
    justify-items: start;
  }

  .view-drawer-foot {
    padding: 12px 14px 18px;
  }

  .delete-modal {
    padding: 18px 18px 16px;
  }

  .delete-modal-actions {
    gap: 12px;
  }

  .delete-modal-btn {
    flex: 1;
    max-width: 120px;
  }
}

/* ╔══════════════════════════════════════════════╗
   â•‘  LOGIN PAGE                                  â•‘
   ╚══════════════════════════════════════════════╝ */
.login-page {
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background: #F5F6FA;
}

.login-page::-webkit-scrollbar { display: none; }

.login-shell {
  height: 100vh;
  height: 100dvh;
  display: grid;
  grid-template-columns: 41.7% 58.3%;
  background: #F5F6FA;
}

.login-banner {
  position: relative;
  height: 100%;
  overflow: hidden;
  background:
    radial-gradient(circle at 34% 25%, rgba(39, 210, 230, 0.34), transparent 25%),
    linear-gradient(135deg, #071624 0%, #102C42 45%, #07111E 100%);
}

.login-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0,0,0,0.08), rgba(0,0,0,0));
}

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

.login-panel {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 24px;
  text-align: center;
  overflow-y: auto;
  scrollbar-width: none;
}

.login-panel::-webkit-scrollbar { display: none; }

.login-card {
  width: min(100%, 420px);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.login-logo {
  width: 170px;
  height: 42px;
  object-fit: contain;
  margin: 0 0 44px;
}

.login-title {
  width: 100%;
  margin-bottom: 30px;
  text-align: center;
}

.login-title h1 {
  margin: 0 0 12px;
  color: #1C2432;
  font-size: 32px;
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.4px;
}

.login-title p {
  width: min(100%, 390px);
  margin: 0 auto;
  color: #9AA3B5;
  font-size: 15px;
  line-height: 1.5;
  font-weight: 500;
}

.login-form {
  width: 100%;
  display: grid;
  gap: 20px;
  text-align: left;
}

.login-field {
  display: grid;
  gap: 8px;
}

.login-field span {
  color: #30384A;
  font-size: 14px;
  line-height: 1;
  font-weight: 700;
}

.login-input-wrap {
  height: 48px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 13px 0 14px;
  border: 1.5px solid #E6EAF1;
  border-radius: 0;
  background: #FFFFFF;
  box-shadow: none;
  transition: border-color 0.16s;
}
.login-input-wrap:focus-within {
  border-color: #FF7A1F;
  box-shadow: 0 0 0 2px rgba(255,122,31,0.10);
}

.login-input-wrap input {
  flex: 1;
  min-width: 0;
  color: #1C2432;
  font-size: 14.5px;
  font-weight: 600;
}

.login-input-wrap input::placeholder {
  color: #B2BAC8;
  font-weight: 500;
}

.login-input-wrap svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  fill: none;
  stroke: #1C2432;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.login-eye {
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #1C2432;
}

.login-error {
  min-height: 12px;
  color: #E55353;
  font-size: 12px;
  font-weight: 600;
}

.login-remember {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: -3px;
  color: #30384A;
  font-size: 14px;
  font-weight: 500;
}

.login-remember input {
  width: 15px;
  height: 15px;
  accent-color: #FF7A1F;
}

.login-submit {
  position: relative;
  height: 48px;
  margin-top: 16px;
  border-radius: 2px;
  background: #FF7A1F;
  color: #FFFFFF;
  font-size: 15px;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(255, 122, 31, 0.20);
}

.login-submit:hover {
  background: #E86D18;
}

.login-form.is-loading .login-submit span {
  visibility: hidden;
}

.login-form.is-loading .login-submit::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 18px;
  height: 18px;
  margin: auto;
  border: 2px solid rgba(255,255,255,0.45);
  border-top-color: #FFFFFF;
  border-radius: 50%;
  animation: addSpin 0.8s linear infinite;
}

@media (max-height: 700px) and (min-width: 901px) {
  .login-panel {
    padding-top: 20px;
    padding-bottom: 20px;
  }

  .login-logo {
    margin-bottom: 28px;
  }

  .login-title {
    margin-bottom: 20px;
  }

  .login-title h1 {
    font-size: 26px;
  }

  .login-title p {
    font-size: 13px;
  }

  .login-form {
    gap: 14px;
  }

  .login-input-wrap {
    height: 42px;
  }

  .login-submit {
    height: 42px;
    margin-top: 10px;
    font-size: 14px;
  }
}

@media (max-width: 900px) {
  .login-page {
    height: auto;
    min-height: 100vh;
    min-height: 100dvh;
    overflow-y: auto;
    scrollbar-width: none;
  }

  .login-shell {
    height: auto;
    min-height: 100vh;
    min-height: 100dvh;
    grid-template-columns: 1fr;
  }

  .login-banner {
    height: clamp(220px, 34vh, 320px);
  }

  .login-panel {
    flex: 1;
    align-items: center;
    justify-content: center;
    padding: 40px 24px 50px;
    overflow-y: visible;
  }

  .login-card {
    width: min(100%, 480px);
    justify-content: center;
  }

  .login-logo {
    margin: 0 auto 48px;
  }

  .login-title h1 {
    font-size: 30px;
  }
}

@media (max-width: 600px) {
  .login-banner {
    height: clamp(160px, 28vh, 220px);
  }

  .login-panel {
    padding: 32px 20px 44px;
  }

  .login-logo {
    width: 148px;
    height: 36px;
    margin: 0 auto 36px;
  }

  .login-title {
    margin-bottom: 28px;
  }

  .login-title h1 {
    font-size: 26px;
    line-height: 1.2;
  }

  .login-title p {
    font-size: 14px;
    line-height: 1.55;
  }

  .login-field span {
    font-size: 13px;
  }

  .login-input-wrap {
    height: 46px;
  }

  .login-input-wrap input {
    font-size: 14px;
  }

  .login-form {
    gap: 18px;
  }

  .login-remember {
    font-size: 13px;
  }

  .login-submit {
    height: 46px;
    margin-top: 14px;
    font-size: 15px;
  }
}

@media (max-width: 375px) {
  .login-banner {
    height: clamp(130px, 22vh, 170px);
  }

  .login-panel {
    padding: 28px 16px 36px;
  }

  .login-title h1 {
    font-size: 23px;
  }

  .login-title p {
    font-size: 13px;
  }

  .login-input-wrap {
    height: 44px;
  }

  .login-submit {
    height: 44px;
    font-size: 14px;
  }
}


/* Booking type toggle */
.booking-type-toggle{display:flex;gap:0;border:1.5px solid #e2e6f0;border-radius:8px;overflow:hidden;width:fit-content;margin-top:4px}
.booking-type-btn{padding:7px 22px;font-size:13px;font-weight:500;font-family:inherit;background:#fff;color:#5A6480;border:none;cursor:pointer;transition:background .15s,color .15s}
.booking-type-btn:first-child{border-right:1.5px solid #e2e6f0}
.booking-type-btn.active{background:#1C2432;color:#fff}

/* ── Role permissions matrix (card style) ── */
.perm-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin:6px 0 14px}
.perm-head-titles{display:flex;align-items:center;gap:12px}
.perm-head-icon{width:40px;height:40px;border-radius:10px;background:#29979D;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.perm-head-icon svg{width:20px;height:20px;fill:none;stroke:#fff;stroke-width:1.4}
.perm-head-titles strong{font-size:16px;color:#1f2937;display:block}
.perm-head-titles p{font-size:12px;color:#6b7280;margin:2px 0 0}
.perm-head-actions{display:flex;gap:8px;flex-wrap:wrap}
.perm-btn{padding:7px 14px;border-radius:8px;border:1.5px solid #d1d5db;background:#fff;color:#374151;font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;transition:all .15s}
.perm-btn:hover{background:#f3f4f6}
.perm-btn-grant{border-color:#7fc7c2;color:#0e6e68;background:#e4f4f3}
.perm-btn-grant:hover{background:#d5efec}
.perm-btn-revoke{border-color:#fca5a5;color:#b91c1c;background:#fef2f2}
.perm-btn-revoke:hover{background:#fee2e2}

.perm-presets{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.perm-preset{padding:7px 16px;border-radius:20px;border:1.5px solid #e2e6f0;background:#fff;color:#475467;font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;transition:all .15s;display:inline-flex;align-items:center;gap:6px}
.perm-preset:hover{border-color:#94a3b8;background:#f8fafc}
.perm-preset.active{background:#e4f4f3;border-color:#7fc7c2;color:#0e6e68}

.perm-modules{display:flex;flex-direction:column;gap:10px}
.perm-card{border:1px solid #e5e9f0;border-radius:12px;background:#fff;overflow:hidden;transition:border-color .15s}
.perm-card:hover{border-color:#cbd5e1}
.perm-card-head{display:flex;align-items:center;gap:12px;padding:13px 16px;cursor:pointer}
.perm-mod-icon{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.perm-mod-icon svg{width:19px;height:19px;fill:none;stroke:#fff;stroke-width:1.4}
.perm-mod-title{flex:1;display:flex;align-items:center;gap:10px}
.perm-mod-title strong{font-size:14px;color:#1f2937;font-weight:600}
.perm-count{font-size:11px;font-weight:700;color:#64748b;background:#f1f5f9;border-radius:20px;padding:2px 9px}
.perm-card.has-some .perm-count{background:#e4f4f3;color:#0e6e68}
.perm-card.has-all .perm-count{background:#d5efec;color:#0f6e56}

.perm-all-toggle{display:inline-flex;align-items:center;gap:8px;cursor:pointer;user-select:none}
.perm-all-toggle>span{font-size:12px;color:#6b7280;font-weight:600}
.perm-all-toggle input{display:none}
.perm-all-toggle i{width:38px;height:21px;border-radius:20px;background:#d1d5db;position:relative;transition:background .15s;display:inline-block}
.perm-all-toggle i::after{content:"";position:absolute;top:2px;left:2px;width:17px;height:17px;border-radius:50%;background:#fff;transition:transform .15s}
.perm-all-toggle input:checked+i{background:#148F77}
.perm-all-toggle input:checked+i::after{transform:translateX(17px)}
.perm-all-toggle input:indeterminate+i{background:#fbbf24}

.perm-chevron{border:none;background:none;cursor:pointer;color:#94a3b8;display:flex;align-items:center;padding:4px}
.perm-chevron svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;transition:transform .2s}
.perm-card.open .perm-chevron svg{transform:rotate(90deg)}

.perm-card-body{display:flex;gap:10px;flex-wrap:wrap;padding:4px 16px 14px 66px}
.perm-action{display:inline-flex;align-items:center;gap:7px;padding:6px 14px;border:1.5px solid #e2e6f0;border-radius:8px;cursor:pointer;font-size:13px;color:#475467;font-weight:500;transition:all .15s}
.perm-action:has(input:checked){background:#e4f4f3;border-color:#7fc7c2;color:#0e6e68}
.perm-action input{accent-color:#148F77;width:15px;height:15px;cursor:pointer}

/* ── Role permissions: sub-page groups ── */
.perm-card-body{flex-direction:column;align-items:stretch;gap:0;padding:2px 16px 12px 66px}
.perm-sub{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:9px 0;border-top:1px dashed #eef1f6}
.perm-sub:first-child{border-top:none}
.perm-sub-label{font-size:12px;font-weight:600;color:#64748b;min-width:120px}
.perm-sub-actions{display:flex;gap:8px;flex-wrap:wrap}

.booking-form-alert{margin:0 0 16px;padding:12px 14px;border-radius:8px;font-size:14px;font-weight:700}
.booking-form-alert.is-hidden{display:none}
.booking-form-alert.is-error{background:#fff1f0;border:1px solid #ffb4ab;color:#b42318}
.booking-form-alert.is-success{background:#ecfdf3;border:1px solid #8ee0ad;color:#067647}

/* Searchable service multi-select */
.add-field .ts-wrapper.multi .ts-control{min-height:52px;border:1.5px solid #dfe5ee;border-radius:0;background:#fff;padding:8px 12px;box-shadow:none;font-family:inherit;gap:7px}
.add-field .ts-wrapper.focus .ts-control{border-color:#29979d;box-shadow:0 0 0 3px rgba(41,151,157,.12)}
.add-field .ts-wrapper.multi .ts-control>div{border-radius:7px;background:#e7f5f4;border:1px solid #a7dbd7;color:#0b6f70;font-size:12px;font-weight:700;padding:5px 28px 5px 9px}
.add-field .ts-wrapper.plugin-remove_button .item .remove{border-left:1px solid #a7dbd7;color:#0b6f70;font-weight:800;padding:0 7px}
.add-field .ts-wrapper .ts-control input{font-family:inherit!important;font-size:15px!important;color:#111827}
.add-field .ts-dropdown{border:1px solid #dfe5ee;border-radius:0;box-shadow:0 18px 45px rgba(15,23,42,.14);font-family:inherit;margin-top:6px;overflow:hidden}
.add-field .ts-dropdown .option{padding:0}
.service-ts-option{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:11px 13px;border-bottom:1px solid #f0f3f8}
.service-ts-option strong{display:block;font-size:14px;color:#111827}
.service-ts-option small{display:block;margin-top:3px;color:#667085;font-size:11px;font-weight:600}
.service-ts-option b{font-size:13px;color:#ff6b1a;white-space:nowrap}
.add-field .ts-dropdown .active{background:#f0fbfa;color:#111827}
.add-field .ts-dropdown .no-results{padding:14px;color:#667085;font-size:13px}
.service-native-select{display:none!important}
.service-tom-select{position:relative;width:100%;font-family:inherit}
.service-tom-control{min-height:52px;border:1.5px solid #dfe5ee;background:#fff;display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:8px 42px 8px 12px;cursor:text;transition:border-color .15s,box-shadow .15s,background .15s}
.service-tom-select.is-open .service-tom-control{border-color:#29979d;box-shadow:0 0 0 3px rgba(41,151,157,.12)}
.service-tom-tags{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.service-tom-tag{display:inline-flex;align-items:center;gap:7px;max-width:100%;padding:5px 8px;border-radius:7px;background:#e7f5f4;border:1px solid #a7dbd7;color:#0b6f70;font-size:12px;font-weight:700}
.service-tom-tag span{max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.service-tom-tag button{width:18px;height:18px;border:0;border-radius:50%;background:#29979d;color:#fff;display:inline-flex;align-items:center;justify-content:center;line-height:1;cursor:pointer;font-size:14px;font-weight:700}
.service-tom-input{flex:1;min-width:190px;border:0!important;outline:0!important;background:transparent!important;box-shadow:none!important;padding:6px 0!important;height:auto!important;font:inherit;color:#111827}
.service-tom-input::placeholder{color:#98a2b3}
.service-tom-clear{position:absolute;right:10px;top:50%;transform:translateY(-50%);width:24px;height:24px;border:0;border-radius:50%;background:#eef2f7;color:#667085;font-size:18px;line-height:1;cursor:pointer}
.service-tom-clear:hover{background:#ffe8dd;color:#ff6b1a}
.service-tom-menu{display:none;position:absolute;z-index:40;left:0;right:0;top:calc(100% + 6px);max-height:280px;overflow:auto;background:#fff;border:1px solid #dfe5ee;box-shadow:0 18px 45px rgba(15,23,42,.14)}
.service-tom-select.is-open .service-tom-menu{display:block}
.service-tom-option{width:100%;border:0;background:#fff;padding:11px 13px;display:flex;align-items:center;justify-content:space-between;gap:14px;text-align:left;cursor:pointer;font-family:inherit;color:#111827;border-bottom:1px solid #f0f3f8}
.service-tom-option:hover,.service-tom-option:focus{background:#f0fbfa;outline:0}
.service-tom-option strong{display:block;font-size:14px;font-weight:700}
.service-tom-option small{display:block;margin-top:3px;color:#667085;font-size:11px;font-weight:600}
.service-tom-option b{font-size:13px;color:#ff6b1a;white-space:nowrap}
.service-tom-empty{padding:14px;color:#667085;font-size:13px}
@media (max-width: 640px){
  .service-tom-control{padding-right:38px}
  .service-tom-input{min-width:120px}
  .service-tom-tag span{max-width:160px}
}
.session-done-modal {
  width: min(760px, calc(100vw - 32px));
  max-width: 760px;
}
.session-done-modal .pos-modal-body {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 16px;
  max-height: min(70vh, 720px);
  overflow: auto;
  padding-right: 18px;
}
.session-modal-full,
.session-done-patient {
  grid-column: 1 / -1;
}
.session-assessment-wrap {
  border: 1px solid #d9e6f2;
  border-radius: 8px;
  background: #f8fbff;
  padding: 16px;
}
.session-assessment-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid #e3ebf5;
}
.session-assessment-head strong {
  color: #111827;
  font-size: 15px;
  font-weight: 900;
}
.session-assessment-head small {
  color: #64748b;
  font-size: 12px;
  line-height: 1.4;
}
.session-assessment-image {
  border: 1px dashed #cbd5e1;
  border-radius: 8px;
  background: #fff;
  margin-bottom: 14px;
  padding: 10px;
}
.session-assessment-image img {
  display: block;
  max-width: 100%;
  max-height: 240px;
  object-fit: contain;
}
.session-assessment-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.session-assessment-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.session-assessment-label {
  color: #5f6f86;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.35;
  text-transform: uppercase;
}
.session-assessment-label b {
  color: #ff6b1a;
}
.session-assessment-fields input:not([type="radio"]):not([type="checkbox"]):not([type="range"]),
.session-assessment-fields select,
.session-assessment-fields textarea {
  width: 100%;
  min-height: 44px;
  border: 1px solid #dbe3ee;
  border-radius: 8px;
  background: #fff;
  color: #111827;
  font: inherit;
  font-size: 14px;
  outline: 0;
  padding: 10px 12px;
}
.session-assessment-fields textarea {
  min-height: 86px;
  resize: vertical;
}
.session-assessment-fields input:focus,
.session-assessment-fields select:focus,
.session-assessment-fields textarea:focus {
  border-color: #20a5a6;
  box-shadow: 0 0 0 3px rgba(32, 165, 166, 0.12);
}
.session-assessment-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.session-assessment-options label {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  border: 1px solid #dbe3ee;
  border-radius: 8px;
  background: #fff;
  padding: 10px 12px;
  color: #4b5870;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.25;
  text-transform: uppercase;
}
.session-assessment-options input[type="radio"],
.session-assessment-options input[type="checkbox"] {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: #20a5a6;
}
.session-assessment-options label:has(input:checked) {
  border-color: #20a5a6;
  background: #ecfdfb;
  color: #0f766e;
}
.session-range {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
}
.session-range input[type="range"] {
  flex: 1;
  min-width: 0;
  accent-color: #20a5a6;
}
.session-range strong {
  min-width: 32px;
  text-align: center;
  color: #111827;
}

.session-complete-main {
  gap: 18px;
}

.session-complete-title {
  margin: 0;
  color: #0f172a;
  font-size: 28px;
  font-weight: 900;
  letter-spacing: 0;
}

.session-complete-subtitle {
  margin: 6px 0 0;
  color: #667085;
  font-size: 14px;
}

.session-complete-back {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.session-complete-alert {
  border: 1px solid #fed7aa;
  background: #fff7ed;
  color: #9a3412;
  border-radius: 8px;
  padding: 14px 16px;
  font-size: 14px;
  font-weight: 700;
}

.session-complete-shell {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 1160px;
}

.session-complete-shell.is-disabled {
  opacity: 0.78;
}

.session-complete-card {
  border: 1px solid #dfe7f2;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
  padding: 18px;
}

.session-complete-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  background: linear-gradient(135deg, #ffffff 0%, #f4fbfb 100%);
}

.session-complete-summary h2,
.session-complete-card h3 {
  margin: 4px 0 0;
  color: #111827;
  font-size: 20px;
  font-weight: 900;
  letter-spacing: 0;
}

.session-complete-summary p {
  margin: 6px 0 0;
  color: #667085;
  font-size: 13px;
}

.session-complete-kicker {
  display: block;
  color: #168b8b;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.session-complete-pill,
.session-complete-required {
  flex: 0 0 auto;
  border-radius: 999px;
  background: #ecfdfb;
  color: #0f766e;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 900;
}

.session-complete-required {
  background: #fff7ed;
  color: #ff6b1a;
}

.session-complete-grid {
  display: grid;
  grid-template-columns: minmax(360px, 0.85fr) minmax(420px, 1.15fr);
  gap: 16px;
  align-items: start;
}

.session-complete-card-head,
.session-complete-two {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}

.session-complete-card-head {
  display: flex;
  justify-content: space-between;
  margin-bottom: 16px;
}

.session-complete-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.session-complete-field span {
  color: #526078;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.session-complete-field b {
  color: #ff6b1a;
}

.session-complete-field input,
.session-complete-field select,
.session-complete-field textarea {
  width: 100%;
  min-height: 46px;
  border: 1px solid #dbe3ee;
  border-radius: 8px;
  background: #fff;
  color: #111827;
  font: inherit;
  font-size: 15px;
  outline: 0;
  padding: 11px 13px;
}

.session-complete-field textarea {
  min-height: 116px;
  resize: vertical;
}

.session-complete-field input:focus,
.session-complete-field select:focus,
.session-complete-field textarea:focus {
  border-color: #20a5a6;
  box-shadow: 0 0 0 3px rgba(32, 165, 166, 0.13);
}

.session-complete-full {
  margin-bottom: 16px;
}

.session-complete-assessment .session-assessment-head {
  align-items: flex-start;
}

.session-complete-assessment .session-assessment-head strong {
  display: block;
  margin-top: 4px;
  font-size: 18px;
}

.session-complete-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  border-top: 1px solid #e5edf6;
  background: transparent;
  padding: 18px 0 8px;
}

.session-complete-actions .pos-modal-cancel,
.session-complete-actions .pos-modal-save {
  width: 150px;
  min-height: 48px;
  text-decoration: none;
}

.session-complete-actions .pos-modal-save:disabled {
  cursor: not-allowed;
  opacity: 0.7;
}

@media (max-width: 760px) {
  .session-done-modal .pos-modal-body,
  .session-assessment-fields,
  .session-assessment-options {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1040px) {
  .session-complete-grid,
  .session-complete-two {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .session-complete-summary,
  .session-complete-card-head,
  .session-complete-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .session-complete-actions .pos-modal-cancel,
  .session-complete-actions .pos-modal-save {
    width: 100%;
  }
}