:root {
  --bg: #f7f8fc;
  --sidebar: #fbfcff;
  --panel: #ffffff;
  --panel-soft: #f6f7fb;
  --line: #e6e8f0;
  --text: #252a3e;
  --muted: #7b8497;
  --blue: #2f80ff;
  --blue-dark: #1f6eea;
  --blue-soft: #eaf2ff;
  --rose: #e5004f;
  --rose-soft: #fde8ef;
  --warning-bg: #f8f0e8;
  --warning-text: #75614f;
  --shadow: 0 12px 28px rgba(37, 42, 62, 0.06);
}

.agents-page {
  padding-top: 38px;
}

.agents-title {
  margin: 0 0 36px;
  color: #252831;
  font-size: 38px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.1;
}

.agents-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 390px));
  gap: 30px;
  align-items: stretch;
  justify-content: start;
}

.agent-card,
.agent-new-card,
.agent-editor-section,
.agent-save-card,
.agent-section-nav {
  border: 1px solid #dfe3ee;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 18px 44px rgba(40, 46, 70, 0.07);
}

.agent-card {
  padding: 16px 18px 16px;
}

.agent-card,
.agent-new-card {
  min-height: 252px;
}

.agent-card-top {
  display: flex;
  gap: 16px;
  align-items: center;
  min-height: 68px;
  padding: 0 0 14px;
  border-bottom: 1px solid #e8ebf3;
}

.agent-avatar,
.agent-photo-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 50%;
  background: #e7ebf5;
  color: #7f8aa3;
}

.agent-avatar {
  width: 50px;
  height: 50px;
  flex: 0 0 50px;
  font-size: 18px;
  font-weight: 700;
}

.agent-avatar img,
.agent-photo-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.agent-card h2 {
  margin: 0;
  color: #242735;
  font-size: 19px;
  font-weight: 500;
}

.agent-card-top p {
  margin: 4px 0 0;
  color: #7b8499;
  font-size: 14px;
}

.agent-week {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0;
  padding: 13px 0;
  border-bottom: 1px solid #e8ebf3;
}

.agent-week div {
  display: flex;
  flex-direction: column;
  gap: 13px;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0 4px;
  border-right: 1px solid #edf0f6;
}

.agent-week div:last-child {
  border-right: 0;
}

.agent-week span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #4fc98d;
}

.agent-week em {
  color: #4d5362;
  font-size: 11px;
  font-style: normal;
  line-height: 1;
  text-align: center;
}

.agent-week div.is-off {
  background: transparent;
}

.agent-week div.is-off span {
  background: #c9cfdd;
}

.agent-week div.is-off em {
  color: #c3c6d4;
}

.agent-card-meta {
  display: grid;
  grid-template-columns: 1fr 96px;
  border-bottom: 1px solid #e8ebf3;
}

.agent-card-meta div {
  min-height: 70px;
  padding: 14px 12px 12px;
}

.agent-card-meta div + div {
  border-left: 1px solid #e8ebf3;
  text-align: center;
}

.agent-card-meta span,
.agent-card-meta strong,
.agent-card-meta b {
  display: block;
}

.agent-card-meta span {
  color: #7b8499;
  font-size: 14px;
}

.agent-card-meta strong {
  display: inline-flex;
  width: auto;
  margin-left: 6px;
  vertical-align: middle;
}

.agent-card-meta strong.is-active {
  display: inline-flex;
  width: auto;
  padding: 3px 7px;
  border-radius: 999px;
  background: #55c98f;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}

.agent-card-meta strong.is-off {
  display: inline-flex;
  width: auto;
  padding: 3px 7px;
  border-radius: 999px;
  background: #ff7179;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}

.agent-card-meta p {
  margin: 7px 0 0;
  color: #2b2f3d;
  font-size: 15px;
  line-height: 1.25;
}

.agent-card-time {
  display: grid;
  gap: 2px;
}

.agent-card-time-line {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
}

.agent-card-meta b {
  margin-top: 6px;
  color: #2b2f3d;
  font-size: 24px;
  font-weight: 400;
}

.agent-edit-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 40px;
  margin-top: 14px;
  border-radius: 18px;
  background: #f0f1f7;
  color: #2a2e3b;
  font-size: 16px;
  text-decoration: none;
}

.agent-new-card {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 18px;
  border: 2px dotted #d5dae6;
  box-shadow: none;
  color: #272b37;
  text-decoration: none;
}

.agent-new-card span,
.agent-dashed-tile span {
  display: flex;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #2d7df7;
  color: #fff;
  box-shadow: 0 0 0 18px #eef2fb;
  font-size: 26px;
  font-weight: 700;
}

.agent-new-card strong {
  font-size: 21px;
  font-weight: 500;
}

.agent-empty-state {
  color: #778299;
}

.agent-editor {
  display: grid;
  grid-template-columns: minmax(0, 980px) 300px;
  gap: 30px;
  align-items: start;
  max-width: 1320px;
  padding-top: 18px;
}

.agent-editor-main {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 30px;
}

.agent-editor-title {
  margin: 0;
  color: #1f2431;
  font-size: 34px;
  font-weight: 600;
  letter-spacing: 0;
}

.agent-editor-section {
  overflow: hidden;
}

.agent-editor-section > header {
  display: flex;
  min-height: 72px;
  align-items: center;
  justify-content: space-between;
  padding: 0 36px;
  border-bottom: 1px solid #e1e5ef;
  color: #262a36;
  font-size: 22px;
  font-weight: 500;
}

.agent-editor-section > header em {
  color: #8a94aa;
  font-size: 13px;
  font-style: normal;
}

.agent-editor-section > label,
.agent-editor-section > .agent-form-grid,
.agent-general-card,
.agent-service-list,
.agent-editor-section > .weekly-schedule-list,
.agent-schedule-strip,
.agent-note,
.agent-dashed-tile,
.agent-photo-upload.wide,
.agent-highlight-title {
  margin: 32px 36px;
}

.agent-editor-section > .weekly-schedule-list {
  padding: 0 0 8px;
}

.agent-editor-section > .agent-note + .weekly-schedule-list {
  margin-top: 0;
}

.agent-schedule-section .weekly-schedule-list {
  padding-bottom: 10px;
}

.agent-schedule-section .weekly-schedule-row {
  grid-template-columns: minmax(260px, 1fr) auto 28px;
  gap: 14px;
  min-height: 66px;
}

.agent-schedule-section .schedule-time-editor {
  padding: 0 0 20px;
}

.agent-schedule-section .schedule-periods {
  border-top: 0;
  display: grid;
  gap: 12px;
  padding-top: 0;
}

.agent-schedule-section .schedule-period {
  border: 1px solid #dfe5f1;
  border-radius: 16px;
  background: transparent;
}

.agent-schedule-section .schedule-period + .schedule-period {
  margin-top: 0;
  padding-top: 0;
}

.agent-schedule-section .schedule-time-row {
  display: grid !important;
  min-height: 50px;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  padding: 0 10px 0 16px;
  border-bottom: 1px solid rgba(218, 224, 237, 0.88);
  color: #454b5a;
}

.agent-schedule-section .schedule-period .schedule-time-row:last-child {
  border-bottom: 0;
}

.agent-schedule-section .schedule-time-row > span {
  color: #454b5a;
  font-size: 15px;
  font-weight: 500;
}

.agent-schedule-section .schedule-time-control {
  width: auto;
  max-width: 100%;
  min-width: 0;
  justify-self: end;
}

.agent-schedule-section .schedule-time-control input {
  width: 80px;
  height: 32px;
  border: 0;
  border-radius: 999px;
  background: #eef1f7;
  padding: 0 10px;
  text-align: center;
}

.agent-schedule-section .schedule-remove-period {
  left: -12px;
  top: 50%;
  transform: translateY(-50%);
}

.agent-schedule-section .schedule-add-period {
  min-height: 52px;
  border-radius: 16px;
  padding: 0 18px;
  font-size: 15px;
}

.agent-general-card {
  display: grid;
  grid-template-columns: 210px 1fr;
  gap: 34px;
}

.agent-photo-upload {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 14px;
  color: #7a849a;
}

.agent-photo-upload.wide {
  min-height: 96px;
  align-items: center;
  justify-content: flex-start;
  flex-direction: row;
  gap: 24px;
  padding: 0 28px;
  border: 2px dashed #d7dce8;
  border-radius: 18px;
}

.agent-photo-preview {
  width: 96px;
  height: 96px;
  flex: 0 0 96px;
  font-size: 28px;
}

.agent-photo-upload input {
  width: 100%;
}

.agent-form-grid {
  display: grid;
  gap: 26px;
}

.agent-form-grid.two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.agent-editor-section label {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 12px;
  color: #9aa2b4;
  font-size: 17px;
}

.agent-editor-section input,
.agent-editor-section select,
.agent-editor-section textarea {
  width: 100%;
  min-width: 0;
  border: 0;
  border-bottom: 1px solid #cfd5e2;
  border-radius: 0;
  background: transparent;
  color: #252936;
  font: inherit;
  outline: 0;
  padding: 8px 0 11px;
}

.agent-editor-section textarea {
  min-height: 120px;
  resize: vertical;
}

.agent-switch-row,
.agent-select-all {
  display: inline-flex !important;
  align-items: center;
  flex-direction: row !important;
  gap: 12px !important;
  color: #252936 !important;
}

.agent-switch-row input,
.agent-select-all input {
  width: 18px;
  height: 18px;
}

.agent-note {
  padding: 16px 24px;
  border-radius: 16px;
  background: #f2ede8;
  color: #716b66;
  font-size: 16px;
  line-height: 1.5;
}

.agent-bio-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 50%, #cbd2e2 0 22%, transparent 24%),
    radial-gradient(circle at 70% 30%, #cbd2e2 0 24%, transparent 26%),
    radial-gradient(circle at 70% 72%, #cbd2e2 0 26%, transparent 28%);
}

.agent-highlight-title {
  color: #262a36;
  font-size: 20px;
  font-weight: 500;
}

.agent-service-list {
  display: grid;
  gap: 14px;
  min-height: 190px;
}

.agent-service-option {
  display: grid !important;
  position: relative;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  gap: 14px !important;
  align-items: center;
  flex-direction: row !important;
  min-height: 50px;
  padding: 8px 18px;
  border: 2px solid #d8dae2;
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.48);
  cursor: pointer;
  transition: border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
}

.agent-service-option strong,
.agent-service-duration {
  display: block;
}

.agent-service-option input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.agent-service-check {
  display: inline-flex;
  width: 20px;
  height: 20px;
  align-items: center;
  justify-content: center;
  border: 2px solid #d8dae2;
  border-radius: 50%;
  color: #fff;
}

.agent-service-check::after {
  content: "✓";
  opacity: 0;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
}

.agent-service-body {
  min-width: 0;
}

.agent-service-option strong {
  color: #272b37;
  font-size: 17px;
}

.agent-service-duration {
  justify-self: end;
  color: #8791a8;
  font-size: 14px;
  white-space: nowrap;
}

.agent-service-option input:checked + .agent-service-check {
  border-color: #2f80ff;
  background: #2f80ff;
}

.agent-service-option input:checked + .agent-service-check::after {
  opacity: 1;
}

.agent-service-option input:checked ~ .agent-service-body strong {
  color: #1f2431;
}

.agent-service-option:has(input:checked) {
  border-color: #2f80ff;
  background: transparent;
  box-shadow: inset 0 0 0 1px rgba(47, 128, 255, 0.12);
}

.agent-service-option:focus-within {
  border-color: #2f80ff;
  box-shadow: 0 0 0 3px rgba(47, 128, 255, 0.13);
}

.agent-empty-service {
  display: flex;
  min-height: 210px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 14px;
  color: #9ba7bf;
}

.agent-empty-service a {
  display: inline-flex;
  padding: 12px 22px;
  border-radius: 18px;
  background: #2d7df7;
  color: #fff;
  text-decoration: none;
}

.agent-schedule-strip {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 10px;
}

.agent-schedule-strip div {
  display: flex;
  min-height: 86px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 8px;
  border: 1px solid #edf0f6;
  border-radius: 16px;
  background: #fafbfe;
}

.agent-schedule-strip span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #c6ccda;
}

.agent-schedule-strip span.is-on {
  background: #4fc98d;
}

.agent-schedule-strip strong {
  color: #2d3241;
  font-size: 14px;
}

.agent-schedule-strip em {
  color: #7b8499;
  font-size: 11px;
  font-style: normal;
  text-align: center;
}

.agent-dashed-tile {
  display: flex;
  width: 180px;
  height: 150px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 24px;
  border: 2px dashed #d7dce8;
  border-radius: 18px;
  background: transparent;
  color: #272b37;
  font-size: 18px;
}

.agent-editor-side {
  position: sticky;
  top: 96px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: 64px;
}

.agent-save-card {
  display: flex;
  gap: 14px;
  padding: 16px;
}

.agent-round-button {
  display: flex;
  width: 54px;
  height: 54px;
  align-items: center;
  justify-content: center;
  border: 1px solid #dde2ed;
  border-radius: 20px;
  color: #1f2431;
  text-decoration: none;
  font-size: 30px;
}

.agent-save-card .primary-button {
  flex: 1;
  height: 54px;
  border-radius: 20px;
  font-size: 17px;
}

.agent-section-nav {
  display: flex;
  flex-direction: column;
  padding: 18px 22px;
}

.agent-section-nav a {
  padding: 14px 0;
  border-bottom: 1px solid #edf0f6;
  color: #768197;
  font-size: 17px;
  text-decoration: none;
}

.agent-section-nav a:hover {
  color: #1f2431;
  text-decoration: underline;
}

.agent-saved-toast {
  margin: 0;
}

@media (max-width: 1180px) {
  .agents-grid {
    grid-template-columns: repeat(auto-fit, minmax(320px, 390px));
  }

  .agent-editor {
    grid-template-columns: 1fr;
  }

  .agent-editor-side {
    position: static;
    order: -1;
    margin-top: 0;
  }
}

@media (max-width: 760px) {
  .agents-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .agent-week {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }

  .agent-general-card,
  .agent-form-grid.two,
  .agent-schedule-strip {
    grid-template-columns: 1fr;
  }

  .agent-editor-section > header,
  .agent-editor-section > label,
  .agent-editor-section > .agent-form-grid,
  .agent-general-card,
  .agent-service-list,
  .agent-editor-section > .weekly-schedule-list,
  .agent-schedule-strip,
  .agent-note,
  .agent-dashed-tile,
  .agent-photo-upload.wide,
  .agent-highlight-title {
    margin-left: 22px;
    margin-right: 22px;
  }

  .agent-service-option {
    grid-template-columns: 24px minmax(0, 1fr);
  }

  .agent-service-duration {
    grid-column: 2;
    justify-self: start;
  }
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.sr-only {
  border: 0;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

button,
input,
select,
textarea {
  font: inherit;
}

a {
  color: inherit;
}

.login-body {
  align-items: center;
  display: flex;
  justify-content: center;
  min-height: 100vh;
  padding: 24px;
}

.login-panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow);
  max-width: 400px;
  padding: 32px;
  width: 100%;
}

.login-panel h1 {
  font-size: 28px;
  margin: 0;
}

.login-panel p {
  color: var(--muted);
  margin: 10px 0 24px;
}

.login-form {
  display: grid;
  gap: 10px;
}

.login-form label,
.editor-section label span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 650;
}

.login-form input,
.editor-section input,
.editor-section select,
.editor-section textarea {
  background: #fff;
  border: 1px solid #dfe3ed;
  border-radius: 12px;
  color: var(--text);
  min-height: 42px;
  padding: 9px 12px;
  width: 100%;
}

.editor-section textarea {
  min-height: 42px;
  resize: vertical;
}

.service-editor .editor-section label > input,
.service-editor .editor-section label > select,
.service-editor .editor-section label > textarea {
  height: 48px;
  line-height: 1.2;
  min-height: 48px;
}

.service-editor .editor-section label > textarea {
  overflow: hidden;
  resize: none;
}

.login-form input:focus,
.editor-section input:focus,
.editor-section select:focus,
.editor-section textarea:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(47, 128, 255, 0.13);
  outline: 0;
}

.login-form button,
.primary-button {
  background: var(--blue);
  border: 0;
  border-radius: 12px;
  color: #fff;
  cursor: pointer;
  font-weight: 750;
  min-height: 42px;
  padding: 10px 16px;
}

.login-form button:hover,
.primary-button:hover {
  background: var(--blue-dark);
}

.secondary-button {
  align-items: center;
  background: #f0f4ff;
  border: 1px solid #d8e2ff;
  border-radius: 12px;
  color: var(--blue);
  cursor: pointer;
  display: inline-flex;
  font-weight: 750;
  justify-content: center;
  min-height: 42px;
  padding: 9px 14px;
}

.secondary-button:hover {
  background: var(--blue-soft);
  border-color: rgba(47, 128, 255, 0.4);
}

.error-box {
  background: #fff1f0;
  border: 1px solid #f1c5c1;
  border-radius: 10px;
  color: #9f2f26;
  margin-bottom: 18px;
  padding: 10px 12px;
}

.admin-shell {
  display: grid;
  grid-template-columns: 200px 1fr;
  min-height: 100vh;
  transition: grid-template-columns 0.2s ease;
}

.admin-shell.sidebar-collapsed {
  grid-template-columns: 68px 1fr;
}

.sidebar {
  background: var(--sidebar);
  border-right: 1px solid var(--line);
  color: var(--text);
  overflow: visible;
  padding: 18px 12px;
  position: relative;
  transition: padding 0.2s ease;
  z-index: 140;
}

.sidebar-head {
  align-items: center;
  display: flex;
  gap: 10px;
  justify-content: space-between;
  margin: 0 0 30px;
}

.brand {
  align-items: center;
  color: var(--blue);
  display: inline-flex;
  font-size: 24px;
  font-weight: 800;
  gap: 8px;
  min-width: 0;
  text-decoration: none;
}

.brand-mark {
  align-items: center;
  background: var(--blue);
  border-radius: 8px;
  color: #fff;
  display: none;
  font-size: 16px;
  height: 34px;
  justify-content: center;
  width: 34px;
}

.brand-text,
.nav-label {
  overflow: hidden;
  text-overflow: ellipsis;
  transition: opacity 0.16s ease, width 0.2s ease;
  white-space: nowrap;
}

.sidebar-toggle {
  align-content: center;
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 10px;
  color: #8a93a5;
  cursor: pointer;
  display: inline-grid;
  flex-shrink: 0;
  gap: 2px;
  height: 34px;
  justify-content: center;
  padding: 0;
  width: 34px;
}

.sidebar-toggle:hover,
.sidebar-toggle:focus-visible {
  background: var(--blue-soft);
  color: var(--blue);
  outline: 0;
}

.sidebar-toggle span {
  background: currentColor;
  border-radius: 999px;
  display: block;
  height: 2px;
  width: 16px;
}

.nav {
  display: grid;
  gap: 5px;
  position: relative;
}

.nav-item {
  position: relative;
}

.nav-tone-blue {
  --nav-accent: var(--blue);
  --nav-accent-soft: var(--blue-soft);
}

.nav-tone-red {
  --nav-accent: var(--rose);
  --nav-accent-soft: var(--rose-soft);
}

.nav > a,
.nav-item > a {
  align-items: center;
  border-radius: 12px;
  color: #4f586d;
  display: flex;
  font-size: 14px;
  gap: 11px;
  min-height: 42px;
  padding: 0 12px;
  text-decoration: none;
}

.nav > a:hover,
.nav > a.active,
.nav-item > a:hover,
.nav-item > a.active,
.nav-item.has-subnav:hover > a,
.nav-item.has-subnav:focus-within > a {
  background: var(--blue-soft);
  color: var(--blue);
}

.nav > a.nav-operations:hover,
.nav > a.nav-operations.active,
.nav-tone-red > a:hover,
.nav-tone-red > a.active,
.nav-tone-red.has-subnav:hover > a,
.nav-tone-red.has-subnav:focus-within > a {
  background: var(--rose-soft);
  color: var(--rose);
}

.nav-tone-blue > a:hover,
.nav-tone-blue > a.active,
.nav-tone-blue.has-subnav:hover > a,
.nav-tone-blue.has-subnav:focus-within > a {
  background: var(--blue-soft);
  color: var(--blue);
}

.nav-subnav-chevron {
  color: #a9b0bf;
  font-size: 15px;
  line-height: 1;
  margin-left: auto;
  transition: color 0.16s ease, transform 0.16s ease;
}

.nav-item.has-subnav:hover .nav-subnav-chevron,
.nav-item.has-subnav:focus-within .nav-subnav-chevron {
  color: var(--nav-accent);
  transform: translateX(1px);
}

.nav-flyout {
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid #edf0f6;
  border-radius: 12px;
  box-shadow: 0 18px 38px rgba(35, 39, 54, 0.12);
  display: grid;
  gap: 4px;
  left: calc(100% + 10px);
  min-width: 150px;
  opacity: 0;
  padding: 16px 18px;
  pointer-events: none;
  position: absolute;
  top: 0;
  transform: translate(-4px, -4px);
  transition: opacity 0.14s ease, transform 0.14s ease, visibility 0.14s ease;
  visibility: hidden;
  z-index: 50;
}

.nav-flyout::before {
  content: "";
  inset: 0 auto 0 -12px;
  position: absolute;
  width: 12px;
}

.nav-item.has-subnav:hover .nav-flyout,
.nav-item.has-subnav:focus-within .nav-flyout {
  opacity: 1;
  pointer-events: auto;
  transform: translate(0, -4px);
  visibility: visible;
}

.nav-flyout-title {
  color: #c5c9d3;
  font-size: 17px;
  line-height: 1.25;
  margin-bottom: 6px;
  white-space: nowrap;
}

.nav-flyout-link {
  border-radius: 8px;
  color: #2f3445;
  display: block;
  font-size: 14px;
  line-height: 1.2;
  min-height: 30px;
  padding: 7px 0;
  text-decoration: none;
  white-space: nowrap;
}

.nav-flyout-link:hover,
.nav-flyout-link.active {
  color: var(--nav-accent);
}

.nav-icon {
  align-items: center;
  display: inline-flex;
  flex: 0 0 20px;
  height: 20px;
  justify-content: center;
  width: 20px;
}

.nav-icon svg {
  display: block;
  fill: none;
  height: 19px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.85;
  width: 19px;
}

.admin-shell.sidebar-collapsed .sidebar {
  padding-inline: 10px;
}

.admin-shell.sidebar-collapsed .sidebar-head {
  display: grid;
  gap: 10px;
  justify-items: center;
}

.admin-shell.sidebar-collapsed .brand {
  justify-content: center;
}

.admin-shell.sidebar-collapsed .brand-text,
.admin-shell.sidebar-collapsed .nav-label {
  opacity: 0;
  pointer-events: none;
  width: 0;
}

.admin-shell.sidebar-collapsed .brand-mark {
  display: inline-flex;
}

.admin-shell.sidebar-collapsed .nav-subnav-chevron {
  display: none;
}

.admin-shell.sidebar-collapsed .nav > a,
.admin-shell.sidebar-collapsed .nav-item > a {
  justify-content: center;
  padding: 0;
}

.main {
  min-width: 0;
  padding: 28px 32px 56px;
}

.app-topbar {
  align-items: center;
  display: flex;
  gap: 18px;
  justify-content: space-between;
  margin: -8px 0 28px;
}

.top-search {
  align-items: center;
  background: rgba(255, 255, 255, 0.74);
  border: 1px solid rgba(230, 232, 240, 0.8);
  border-radius: 999px;
  box-shadow: 0 12px 28px rgba(37, 42, 62, 0.04);
  color: #b7bfce;
  display: flex;
  gap: 8px;
  min-height: 42px;
  padding: 0 16px;
  position: relative;
  width: min(520px, 46vw);
}

.top-search:focus-within {
  border-color: rgba(47, 128, 255, 0.48);
  box-shadow: 0 12px 28px rgba(37, 42, 62, 0.04), 0 0 0 3px rgba(47, 128, 255, 0.1);
}

.top-search input {
  background: transparent;
  border: 0;
  color: var(--text);
  min-width: 0;
  outline: 0;
  width: 100%;
}

.top-search input::placeholder {
  color: #aab2c2;
}

.top-search-menu {
  background: #fff;
  border: 1px solid rgba(221, 225, 236, 0.92);
  border-radius: 16px;
  box-shadow: 0 22px 48px rgba(37, 42, 62, 0.16);
  display: grid;
  gap: 4px;
  left: 0;
  padding: 8px;
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 120;
}

.top-search-menu[hidden] {
  display: none;
}

.top-search-result,
.top-search-empty {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 12px;
  color: #33394b;
  cursor: pointer;
  display: grid;
  gap: 2px;
  min-height: 48px;
  padding: 8px 12px;
  text-align: left;
  text-decoration: none;
  width: 100%;
}

.top-search-empty {
  cursor: default;
}

.top-search-result:hover,
.top-search-result:focus-visible {
  background: var(--blue-soft);
  color: var(--blue);
  outline: 0;
}

.top-search-result strong,
.top-search-result span,
.top-search-empty {
  overflow-wrap: anywhere;
}

.top-search-result strong {
  font-size: 14px;
}

.top-search-result span,
.top-search-empty {
  color: var(--muted);
  font-size: 12px;
}

.top-actions {
  align-items: center;
  display: inline-flex;
  gap: 12px;
}

.top-action-icon {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 10px;
  color: #151b2c;
  display: inline-flex;
  height: 36px;
  justify-content: center;
  text-decoration: none;
  width: 36px;
}

.top-action-icon:hover,
.top-action-icon:focus-visible {
  background: rgba(47, 128, 255, 0.08);
  color: var(--blue);
  outline: 0;
}

.top-action-icon svg {
  fill: none;
  height: 23px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.2;
  width: 23px;
}

.booking-button {
  align-items: center;
  background: var(--blue);
  border: 0;
  border-radius: 999px;
  box-shadow: 0 8px 18px rgba(47, 128, 255, 0.22);
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  font-size: 14px;
  font-weight: 750;
  min-height: 36px;
  padding: 0 18px;
  text-decoration: none;
}

.profile-avatar {
  align-items: center;
  background: #d5d8df;
  border: 0;
  border-radius: 999px;
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  font-size: 13px;
  font-weight: 800;
  height: 38px;
  justify-content: center;
  position: relative;
  width: 38px;
}

.profile-avatar:hover,
.profile-avatar:focus-visible,
.profile-avatar[aria-expanded="true"] {
  background: var(--blue);
  outline: 0;
}

.profile-avatar span {
  display: block;
  line-height: 1;
  max-width: 30px;
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-menu-wrap {
  position: relative;
}

.profile-menu {
  background: #fff;
  border: 1px solid rgba(221, 225, 236, 0.92);
  border-radius: 16px;
  box-shadow: 0 22px 48px rgba(37, 42, 62, 0.16);
  display: grid;
  min-width: 190px;
  padding: 8px;
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  z-index: 130;
}

.profile-menu[hidden] {
  display: none;
}

.profile-menu-head {
  border-bottom: 1px solid var(--line);
  display: grid;
  gap: 3px;
  margin-bottom: 6px;
  padding: 10px 10px 12px;
}

.profile-menu-head strong,
.profile-menu-head span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-menu-head strong {
  color: var(--text);
  font-size: 14px;
}

.profile-menu-head span {
  color: var(--muted);
  font-size: 12px;
}

.profile-menu a,
.profile-menu button {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 12px;
  color: #3e4658;
  cursor: pointer;
  display: flex;
  min-height: 38px;
  padding: 0 10px;
  text-align: left;
  text-decoration: none;
  width: 100%;
}

.profile-menu a:hover,
.profile-menu a:focus-visible,
.profile-menu button:hover,
.profile-menu button:focus-visible {
  background: var(--blue-soft);
  color: var(--blue);
  outline: 0;
}

.profile-menu form {
  margin: 0;
}

.booking-success-banner {
  align-items: center;
  background: #eefbea;
  border: 1px solid #9fe7a5;
  border-radius: 14px;
  box-shadow: 0 16px 35px rgba(33, 132, 67, 0.16);
  color: #04732d;
  display: flex;
  gap: 18px;
  left: 50%;
  min-height: 48px;
  padding: 0 12px 0 16px;
  position: fixed;
  top: 14px;
  transform: translateX(-50%);
  z-index: 5000;
}

.booking-success-banner.is-error {
  background: #fff1f2;
  border-color: #f4a4ad;
  color: #b4232f;
}

.booking-success-content {
  align-items: center;
  display: flex;
  gap: 12px;
  font-size: 14px;
  font-weight: 750;
}

.booking-success-content a {
  color: var(--blue);
  font-size: 16px;
  line-height: 1;
  text-decoration: none;
}

.booking-success-banner button {
  align-items: center;
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  display: inline-flex;
  font-size: 18px;
  height: 30px;
  justify-content: center;
  width: 30px;
}

.booking-success-pulse {
  background: #40d96f;
  border-radius: 999px;
  box-shadow: 0 0 0 7px rgba(64, 217, 111, 0.16);
  display: inline-block;
  height: 12px;
  position: relative;
  width: 12px;
}

.booking-success-pulse::after {
  animation: booking-success-pulse 1.4s ease-out infinite;
  border: 2px solid rgba(64, 217, 111, 0.55);
  border-radius: inherit;
  content: "";
  inset: -7px;
  position: absolute;
}

@keyframes booking-success-pulse {
  0% {
    opacity: 0.9;
    transform: scale(0.55);
  }
  100% {
    opacity: 0;
    transform: scale(1.35);
  }
}

body.booking-drawer-open {
  overflow: hidden;
}

body.customer-editor-open {
  overflow: hidden;
}

.booking-drawer-shell {
  inset: 0;
  opacity: 0;
  pointer-events: none;
  position: fixed;
  transition: opacity 0.18s ease;
  z-index: 50;
}

.booking-drawer-shell[aria-hidden="false"] {
  opacity: 1;
  pointer-events: auto;
}

.booking-drawer-backdrop {
  background: rgba(37, 42, 62, 0.26);
  border: 0;
  cursor: pointer;
  inset: 0;
  position: absolute;
}

.booking-drawer {
  background: #fbfaff;
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(37, 42, 62, 0.2);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  height: calc(100vh - 28px);
  max-width: calc(100vw - 28px);
  overflow: hidden;
  position: absolute;
  right: 14px;
  top: 14px;
  transform: translateX(26px);
  transition: transform 0.18s ease;
  width: 420px;
}

.booking-drawer-shell[aria-hidden="false"] .availability-panel[aria-hidden="false"] + .booking-drawer {
  border-left: 0;
  border-radius: 0 18px 18px 0;
}

.booking-drawer-shell[aria-hidden="false"] .booking-drawer {
  transform: translateX(0);
}

.customer-editor-shell {
  inset: 0;
  opacity: 0;
  pointer-events: none;
  position: fixed;
  transition: opacity 0.18s ease;
  z-index: 55;
}

.customer-editor-shell[aria-hidden="false"] {
  opacity: 1;
  pointer-events: auto;
}

.customer-editor-backdrop {
  background: rgba(37, 42, 62, 0.22);
  border: 0;
  cursor: pointer;
  inset: 0;
  position: absolute;
}

.customer-editor-drawer {
  background: #fbfaff;
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(37, 42, 62, 0.22);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  height: calc(100vh - 28px);
  max-width: calc(100vw - 28px);
  overflow: hidden;
  position: absolute;
  right: 14px;
  top: 14px;
  transform: translateX(28px);
  transition: transform 0.18s ease;
  width: 420px;
}

.customer-editor-shell[aria-hidden="false"] .customer-editor-drawer {
  transform: translateX(0);
}

.customer-editor-head {
  align-items: center;
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  min-height: 64px;
  padding: 0 26px;
}

.customer-editor-head h2 {
  font-size: 20px;
  margin: 0;
}

.customer-editor-form {
  overflow-y: auto;
  padding: 22px 26px 24px;
}

.customer-editor-profile {
  align-items: end;
  grid-template-columns: 58px minmax(0, 1fr);
}

.customer-editor-avatar {
  background:
    radial-gradient(circle at 50% 34%, #cfd5e4 0 20%, transparent 21%),
    radial-gradient(circle at 50% 84%, #cfd5e4 0 34%, transparent 35%),
    #eef1f8;
  border-radius: 999px;
  height: 54px;
  width: 54px;
}

.customer-editor-alert {
  background: #fff2f2;
  border: 1px solid #ffd3d3;
  border-radius: 12px;
  color: #b42318;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 16px;
  padding: 10px 12px;
}

.customer-editor-form .drawer-section-title {
  border-bottom-color: #202431;
}

.customer-editor-form .drawer-section textarea {
  min-height: 74px;
}

.customer-account-pill {
  align-items: center;
  background: #fbf4e9;
  border: 1px solid #e6ca9b;
  border-radius: 16px;
  color: #756a5c;
  display: flex;
  gap: 9px;
  min-height: 38px;
  padding: 0 12px;
}

.customer-account-pill span,
.customer-delete-button {
  align-items: center;
  display: inline-flex;
  justify-content: center;
}

.customer-account-pill svg {
  fill: none;
  height: 16px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
  width: 16px;
}

.customer-appointments-list {
  display: grid;
  gap: 10px;
}

.customer-appointment-card {
  align-items: center;
  background: #fff;
  border: 1px solid #dfe3ed;
  border-radius: 16px;
  box-shadow: 0 8px 18px rgba(37, 42, 62, 0.05);
  display: grid;
  gap: 2px 12px;
  grid-template-columns: 34px minmax(0, 1fr);
  min-height: 56px;
  padding: 9px 12px;
}

.customer-appointment-avatar {
  background:
    radial-gradient(circle at 50% 32%, #d5dae7 0 24%, transparent 25%),
    radial-gradient(circle at 50% 88%, #d5dae7 0 35%, transparent 36%);
  grid-row: span 2;
  height: 34px;
  width: 26px;
}

.customer-appointment-card strong {
  color: var(--text);
  font-size: 13px;
}

.customer-appointment-card span {
  color: #7b8497;
  font-size: 12px;
}

.customer-appointments-empty {
  background: #f5f2f5;
  border-radius: 16px;
  color: #7f8798;
  font-weight: 700;
  min-height: 42px;
  padding: 12px;
  text-align: center;
}

.customer-editor-footer {
  border-top: 1px solid var(--line);
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 16px 26px;
}

.customer-editor-save {
  background: var(--blue);
  border: 0;
  border-radius: 16px;
  color: #fff;
  cursor: pointer;
  font-size: 16px;
  font-weight: 800;
  min-height: 46px;
  width: 100%;
}

.customer-delete-button {
  background: #f4f3f8;
  border: 1px solid #e5e1ea;
  border-radius: 999px;
  color: #303442;
  cursor: pointer;
  height: 46px;
  width: 54px;
}

.customer-delete-button svg {
  fill: none;
  height: 20px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.9;
  width: 20px;
}

.availability-panel {
  background: #fbfaff;
  border: 1px solid var(--line);
  border-radius: 18px 0 0 18px;
  box-shadow: 0 24px 60px rgba(37, 42, 62, 0.16);
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  height: calc(100vh - 28px);
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  position: absolute;
  right: 434px;
  top: 14px;
  transform: translateX(26px);
  transition: opacity 0.16s ease, transform 0.16s ease;
  width: min(720px, calc(100vw - 470px));
}

.availability-panel[aria-hidden="false"] {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
}

.availability-head {
  align-items: center;
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  min-height: 64px;
  padding: 0 26px;
}

.availability-head h2 {
  font-size: 20px;
  margin: 0;
}

.availability-hours {
  color: #677084;
  display: grid;
  gap: 4px;
  font-size: 11px;
  grid-template-columns: 40px repeat(var(--availability-slot-count, 22), minmax(18px, 1fr));
  padding: 10px 20px 8px;
  text-align: center;
}

.availability-hours::before {
  content: "";
}

.availability-hours span {
  line-height: 1.05;
}

.availability-list {
  overflow-y: auto;
  padding: 14px 20px 24px;
}

.availability-month {
  margin-bottom: 18px;
  padding-bottom: 14px;
}

.availability-month h3 {
  border-bottom: 2px dotted var(--blue);
  color: var(--blue);
  font-size: 18px;
  font-weight: 650;
  margin: 0 0 12px;
  padding: 0 0 8px;
}

.availability-row {
  align-items: center;
  display: grid;
  gap: 12px;
  grid-template-columns: 40px minmax(0, 1fr);
  min-height: 30px;
}

.availability-date {
  align-items: baseline;
  color: #667087;
  display: flex;
  gap: 5px;
  justify-content: end;
}

.availability-date strong {
  font-size: 13px;
}

.availability-date span {
  color: #a0a8b8;
  font-size: 10px;
}

.availability-slots {
  display: grid;
  gap: 4px;
  grid-template-columns: repeat(var(--availability-slot-count, 22), minmax(18px, 1fr));
  min-height: 24px;
  overflow: visible;
  position: relative;
}

.availability-slot-dot {
  background: var(--blue);
  border: 0;
  border-radius: 999px;
  color: transparent;
  cursor: pointer;
  height: 22px;
  min-width: 18px;
  padding: 0;
  position: relative;
  transition: background 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.availability-slot-dot.is-available {
  background: var(--blue);
}

.availability-slot-dot.is-unavailable {
  cursor: not-allowed;
}

.availability-slot-dot.is-booked {
  background: #dbe3ff;
}

.availability-slot-dot.is-selected {
  background: #22c56e;
  box-shadow: 0 0 0 3px rgba(34, 197, 110, 0.18);
}

.availability-slot-dot.is-available:hover {
  background: var(--blue-dark);
  transform: scale(1.08);
}

.availability-slot-dot.is-booked:hover,
.availability-slot-dot.is-booked:focus-visible {
  background: #ffc8cf;
  box-shadow: 0 0 0 3px rgba(255, 99, 99, 0.16);
  transform: scale(1.08);
}

.availability-rest-cell {
  align-self: stretch;
  background-color: rgba(245, 247, 252, 0.75);
  background-image:
    linear-gradient(90deg, rgba(255, 255, 255, 0.72), rgba(146, 157, 181, 0.18)),
    repeating-linear-gradient(
      90deg,
      rgba(145, 156, 181, 0.34) 0,
      rgba(145, 156, 181, 0.34) 1px,
      transparent 1px,
      transparent 5px
    );
  border-radius: 999px;
  display: block;
  min-height: 22px;
  min-width: 18px;
  position: relative;
  transition: background-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.availability-rest-cell:hover,
.availability-rest-cell:focus-visible {
  background-color: #ffe8ea;
  background-image:
    linear-gradient(90deg, rgba(255, 241, 242, 0.95), rgba(255, 99, 99, 0.16)),
    repeating-linear-gradient(
      90deg,
      rgba(255, 99, 99, 0.32) 0,
      rgba(255, 99, 99, 0.32) 1px,
      transparent 1px,
      transparent 5px
    );
  box-shadow: 0 0 0 3px rgba(255, 99, 99, 0.12);
  transform: scaleY(1.08);
}

.availability-rest-bars {
  align-self: stretch;
  background-image: repeating-linear-gradient(
    90deg,
    rgba(160, 171, 195, 0.14) 0,
    rgba(160, 171, 195, 0.14) 1px,
    transparent 1px,
    transparent 5px
  );
  border-radius: 999px;
  display: block;
  grid-column: 1 / -1;
  min-height: 22px;
  position: relative;
}

.availability-rest-bars::after {
  background: linear-gradient(90deg, transparent 0%, rgba(180, 190, 213, 0.18) 52%, rgba(180, 190, 213, 0.34) 100%);
  border-radius: inherit;
  content: "";
  inset: 0;
  position: absolute;
}

.availability-selection-popover {
  background: #111;
  border-radius: 10px;
  bottom: calc(100% + 8px);
  box-shadow: 0 10px 24px rgba(17, 17, 17, 0.2);
  color: #fff;
  display: grid;
  gap: 2px;
  left: 50%;
  min-width: 94px;
  padding: 8px 10px;
  pointer-events: none;
  position: absolute;
  transform: translateX(-50%);
  z-index: 4;
}

.availability-selection-popover::after {
  border: 6px solid transparent;
  border-top-color: #111;
  content: "";
  left: 50%;
  position: absolute;
  top: 100%;
  transform: translateX(-50%);
}

.availability-selection-popover em,
.availability-selection-popover strong {
  color: #fff;
  display: block;
  font-style: normal;
  line-height: 1.1;
  text-align: center;
}

.availability-selection-popover em {
  color: rgba(255, 255, 255, 0.72);
  font-size: 12px;
}

.availability-selection-popover strong {
  font-size: 15px;
}

.availability-unavailable-popover {
  background: #fff1f2;
  border: 1px solid rgba(255, 99, 99, 0.34);
  border-radius: 10px;
  bottom: calc(100% + 8px);
  box-shadow: 0 10px 24px rgba(255, 99, 99, 0.18);
  color: #f2555f;
  display: grid;
  gap: 2px;
  left: 50%;
  min-width: 86px;
  opacity: 0;
  padding: 7px 10px;
  pointer-events: none;
  position: absolute;
  transform: translateX(-50%) translateY(4px);
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s ease;
  visibility: hidden;
  z-index: 5;
}

.availability-unavailable-popover::after {
  border: 6px solid transparent;
  border-top-color: #fff1f2;
  content: "";
  left: 50%;
  position: absolute;
  top: 100%;
  transform: translateX(-50%);
}

.availability-unavailable-popover em,
.availability-unavailable-popover strong {
  color: #f2555f;
  display: block;
  font-style: normal;
  line-height: 1.1;
  text-align: center;
}

.availability-unavailable-popover em {
  font-size: 12px;
  font-weight: 650;
}

.availability-unavailable-popover strong {
  color: #ff6b73;
  font-size: 15px;
}

.availability-slot-dot.is-unavailable:hover .availability-unavailable-popover,
.availability-slot-dot.is-unavailable:focus-visible .availability-unavailable-popover,
.availability-rest-cell:hover .availability-unavailable-popover,
.availability-rest-cell:focus-visible .availability-unavailable-popover {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  visibility: visible;
}

.booking-drawer-head {
  align-items: center;
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  min-height: 64px;
  padding: 0 26px;
}

.booking-drawer-head h2 {
  font-size: 20px;
  margin: 0;
}

.drawer-close {
  background: #f1f2f7;
  border: 0;
  border-radius: 999px;
  color: #4d5668;
  cursor: pointer;
  font-size: 24px;
  height: 36px;
  line-height: 1;
  width: 36px;
}

.booking-drawer-form {
  overflow-y: auto;
  padding: 20px 26px 24px;
}

.drawer-section {
  display: grid;
  gap: 12px;
  margin-bottom: 28px;
}

.drawer-section-title {
  align-items: center;
  border-bottom: 2px solid #3f4452;
  display: flex;
  justify-content: space-between;
  min-height: 38px;
}

.drawer-section-title h3 {
  font-size: 16px;
  margin: 0;
}

.drawer-section-title button,
.drawer-section-title a {
  background: transparent;
  border: 0;
  color: var(--blue);
  cursor: pointer;
  font-weight: 700;
}

.action-title div {
  display: inline-flex;
  gap: 8px;
}

.drawer-grid {
  display: grid;
  gap: 12px;
}

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

.drawer-section label {
  display: grid;
  gap: 7px;
}

.drawer-section label span {
  color: #667087;
  font-size: 12px;
  font-weight: 750;
}

.drawer-section input,
.drawer-section select,
.drawer-section textarea,
.drawer-soft-button {
  background: #fff;
  border: 1px solid #dfe3ed;
  border-radius: 14px;
  color: var(--text);
  min-height: 40px;
  padding: 8px 10px;
  width: 100%;
}

.booking-service-field {
  position: relative;
}

.booking-service-field.is-custom-ready select[data-booking-service-native] {
  height: 1px;
  left: 0;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  top: 28px;
  width: 1px;
}

.booking-service-select[hidden] {
  display: none;
}

.booking-service-select {
  position: relative;
}

.booking-service-trigger {
  align-items: center;
  background: #fff;
  border: 1px solid #dfe3ed;
  border-radius: 14px;
  color: var(--text);
  cursor: pointer;
  display: grid;
  gap: 12px;
  grid-template-columns: auto minmax(0, 1fr) auto;
  min-height: 40px;
  padding: 8px 10px;
  text-align: left;
  width: 100%;
}

.booking-service-field.is-open .booking-service-trigger,
.booking-service-trigger:focus-visible {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(47, 128, 255, 0.12);
  outline: 0;
}

.drawer-section label .booking-service-color {
  background: var(--booking-service-color, #252a3e);
  border: 1px solid rgba(37, 42, 62, 0.08);
  border-radius: 3px;
  display: inline-block;
  height: 10px;
  width: 10px;
}

.drawer-section label .booking-service-name {
  color: inherit;
  font-size: 14px;
  font-weight: 650;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.drawer-section label .booking-service-chevron {
  color: #667087;
  font-size: 14px;
  font-weight: 750;
  line-height: 1;
}

.booking-service-menu {
  background: #fff;
  border: 1px solid #cfd4e2;
  border-radius: 14px;
  box-shadow: 0 18px 42px rgba(37, 42, 62, 0.18);
  display: none;
  left: 0;
  max-height: 260px;
  overflow: auto;
  padding: 4px 0;
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 30;
}

.booking-service-field.is-open .booking-service-menu {
  display: grid;
}

.booking-service-option {
  align-items: center;
  background: #fff;
  border: 0;
  color: #3f4656;
  cursor: pointer;
  display: grid;
  gap: 12px;
  grid-template-columns: auto minmax(0, 1fr);
  min-height: 42px;
  padding: 0 14px;
  text-align: left;
  width: 100%;
}

.booking-service-option:hover {
  background: #f4f6fb;
}

.booking-service-option.is-selected {
  background: var(--blue);
  color: #fff;
}

.booking-service-option.is-selected .booking-service-color {
  border-color: rgba(255, 255, 255, 0.72);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.4);
}

.booking-service-option:disabled {
  color: #9ca5b6;
  cursor: default;
}

.booking-service-option:disabled:hover {
  background: #fff;
}

.drawer-section input[readonly] {
  cursor: default;
}

.booking-time-control {
  align-items: center;
  background: #fff;
  border: 1px solid #dfe3ed;
  border-radius: 14px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  min-height: 40px;
  padding: 4px 6px 4px 10px;
}

.booking-time-control:focus-within {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(47, 128, 255, 0.12);
}

.booking-time-control input {
  border: 0;
  min-height: 30px;
  padding: 0;
}

.booking-time-control input:focus {
  box-shadow: none;
}

.drawer-section textarea {
  min-height: 40px;
  resize: vertical;
}

.drawer-section input:focus,
.drawer-section select:focus,
.drawer-section textarea:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(47, 128, 255, 0.12);
  outline: 0;
}

.drawer-soft-button {
  color: var(--blue);
  cursor: pointer;
  font-weight: 750;
  text-align: left;
}

.customer-form-fields {
  display: grid;
  gap: 12px;
}

.customer-search-panel {
  display: grid;
  gap: 14px;
}

.customer-form-fields[hidden],
.customer-search-panel[hidden] {
  display: none !important;
}

.customer-search-box {
  align-items: center;
  background: #f1f2f7;
  border-radius: 14px;
  display: grid !important;
  gap: 8px;
  grid-template-columns: auto minmax(0, 1fr) auto;
  min-height: 42px;
  padding: 0 10px;
}

.customer-search-box span {
  color: #9ca5b6 !important;
  font-size: 18px !important;
}

.customer-search-box input {
  background: transparent;
  border: 0;
  box-shadow: none;
  min-height: 36px;
  padding: 0;
}

.customer-search-box input:focus {
  box-shadow: none;
}

.customer-search-box button {
  background: transparent;
  border: 0;
  color: #e06b74;
  cursor: pointer;
  font-size: 12px;
  font-weight: 750;
}

.customer-search-results {
  display: grid;
  max-height: 290px;
  overflow-y: auto;
}

.customer-search-result {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  cursor: pointer;
  display: grid;
  gap: 2px 12px;
  grid-template-columns: 36px minmax(0, 1fr);
  padding: 11px 0;
  text-align: left;
}

.customer-search-result:hover {
  background: rgba(47, 128, 255, 0.05);
}

.customer-search-result .customer-avatar {
  grid-row: span 3;
  height: 34px;
  justify-self: center;
  width: 28px;
}

.customer-search-result strong {
  color: var(--blue);
  font-size: 14px;
}

.customer-search-result em {
  color: #6d7689;
  font-size: 12px;
  font-style: normal;
}

.price-breakdown {
  display: grid;
  gap: 0;
  margin: 0;
}

.price-breakdown div {
  border-bottom: 1px solid var(--line);
  display: grid;
  grid-template-columns: 1fr auto;
  padding: 10px 0;
}

.price-breakdown dt {
  color: #4d5668;
}

.price-breakdown dd {
  color: var(--text);
  font-weight: 750;
  margin: 0;
}

.price-breakdown .total dt,
.price-breakdown .total dd {
  color: var(--text);
  font-weight: 850;
}

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

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

.payment-summary strong {
  color: var(--text);
  font-size: 18px;
}

.payment-summary div:last-child strong {
  color: #d64f57;
  font-size: 24px;
}

.payment-summary span {
  color: var(--muted);
  font-size: 12px;
  margin-top: 4px;
}

.payment-request {
  background: #f1f2f7;
  border-radius: 14px;
  min-height: 42px;
  padding: 12px;
}

.drawer-dashed-button {
  background: #fff;
  border: 1px dashed #d3d8e4;
  border-radius: 999px;
  color: var(--blue);
  cursor: pointer;
  font-weight: 750;
  min-height: 36px;
}

.booking-drawer-footer {
  background: #fbfaff;
  border-top: 1px solid var(--line);
  padding: 14px 26px;
}

.booking-drawer-footer .primary-button {
  border-radius: 16px;
  width: 100%;
}

.topbar {
  border-bottom: 1px solid rgba(230, 232, 240, 0.72);
  margin-bottom: 24px;
  padding-bottom: 20px;
}

.topbar-plain {
  border-bottom: 0;
  padding-bottom: 0;
}

.eyebrow {
  color: #0f6c80;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

h1 {
  font-size: 30px;
  font-weight: 750;
  letter-spacing: 0;
  margin: 6px 0 0;
}

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

.metric-card,
.table-panel,
.calendar-shell,
.editor-section {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow);
}

.metric-card {
  padding: 20px;
}

.metric-card span {
  color: var(--muted);
  display: block;
  font-size: 14px;
}

.metric-card strong {
  display: block;
  font-size: 34px;
  margin-top: 10px;
}

.table-panel,
.calendar-shell {
  overflow: hidden;
}

.panel-head {
  align-items: center;
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  min-height: 56px;
  padding: 0 18px;
}

.panel-head h2 {
  font-size: 18px;
  margin: 0;
}

.operations-page {
  display: grid;
  gap: 18px;
}

.operations-hero-card,
.operations-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow);
}

.operations-hero-card {
  padding: 28px;
}

.operations-hero-card span {
  color: var(--rose);
  display: block;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.04em;
  margin-bottom: 10px;
}

.operations-hero-card h2 {
  color: var(--text);
  font-size: 34px;
  line-height: 1.1;
  margin: 0 0 12px;
}

.operations-hero-card p,
.operations-card p {
  color: var(--muted);
  line-height: 1.7;
  margin: 0;
}

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

.operations-card {
  padding: 18px;
}

.operations-card strong {
  color: var(--text);
  display: block;
  font-size: 16px;
  margin-bottom: 8px;
}

.appointments-panel {
  margin: 0;
  max-width: none;
}

.appointments-panel-head {
  align-items: center;
  min-height: 112px;
}

.appointments-panel-head h1 {
  color: var(--text);
  font-size: 30px;
  font-weight: 750;
  letter-spacing: 0;
  margin: 0;
}

.appointments-panel-head p {
  color: var(--muted);
  font-size: 16px;
  margin: 8px 0 0;
}

.appointments-panel-actions {
  align-items: center;
  display: inline-flex;
  gap: 12px;
}

.appointments-panel-actions button {
  font-size: 14px;
  min-height: 34px;
  padding: 0 14px;
}

.appointments-table-shell {
  overflow-x: auto;
  overflow-y: hidden;
}

.appointments-table {
  min-width: 1440px;
  table-layout: fixed;
}

.appointments-table th,
.appointments-table td {
  border-right: 1px solid #dde0e9;
  color: #252a3a;
  font-size: 14px;
  padding: 9px 14px;
  vertical-align: middle;
  white-space: nowrap;
}

.appointments-table th {
  color: #222737;
  font-size: 12px;
  font-weight: 750;
  letter-spacing: 0.12em;
  text-align: center;
}

.appointments-table thead tr:first-child th,
.appointments-table tfoot th {
  height: 38px;
}

.appointments-table tbody td {
  height: 46px;
}

.appointments-filter-row td {
  background: rgba(255, 255, 255, 0.5);
  padding: 10px 12px;
}

.appointments-filter-row input,
.appointments-filter-row select {
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid #d7dce8;
  border-radius: 14px;
  color: #232838;
  font-size: 14px;
  height: 34px;
  max-width: 100%;
  padding: 0 12px;
  width: 100%;
}

.appointments-col-id {
  width: 82px;
}

.appointments-col-service {
  width: 250px;
}

.appointments-col-date {
  width: 210px;
}

.appointments-col-left {
  width: 170px;
}

.appointments-col-agent {
  width: 180px;
}

.appointments-col-customer {
  width: 230px;
}

.appointments-col-status {
  width: 190px;
}

.appointments-col-payment {
  width: 170px;
}

.appointments-col-created {
  width: 220px;
}

.appointments-id {
  color: #737b90 !important;
  text-align: right;
}

.appointment-service {
  align-items: center;
  display: inline-flex;
  gap: 12px;
}

.appointment-service-dot {
  background: #2f5df5;
  border-radius: 999px;
  display: inline-block;
  height: 10px;
  width: 10px;
}

.appointment-time-left {
  border: 1px solid #cfd5e1;
  border-radius: 8px;
  color: #151926;
  display: inline-flex;
  font-size: 13px;
  min-height: 26px;
  padding: 3px 8px;
}

.appointment-person {
  align-items: center;
  display: grid;
  gap: 10px;
  grid-template-columns: 24px minmax(0, 1fr) 24px;
}

.appointment-person > span:nth-child(2) {
  overflow: hidden;
  text-overflow: ellipsis;
}

.appointment-avatar {
  background:
    radial-gradient(circle at 50% 33%, #d7dce8 0 28%, transparent 29%),
    radial-gradient(circle at 50% 88%, #d7dce8 0 39%, transparent 40%);
  display: inline-block;
  height: 26px;
  width: 22px;
}

.appointment-menu-button {
  align-items: center;
  background: #edf0f6;
  border: 0;
  border-radius: 999px;
  color: #7c8496;
  cursor: pointer;
  display: inline-flex;
  font-size: 11px;
  height: 22px;
  justify-content: center;
  padding: 0;
  width: 22px;
}

.appointment-status-pill,
.appointment-payment-pill {
  align-items: center;
  border-radius: 7px;
  display: inline-flex;
  font-size: 13px;
  font-weight: 650;
  min-height: 26px;
  padding: 3px 10px;
}

.appointment-status-pill.is-approved {
  background: #dffbf0;
  border: 1px solid #4ccf91;
  color: #078153;
}

.appointment-status-pill.is-pending,
.appointment-status-pill.is-submitted {
  background: #fff7dc;
  border: 1px solid #edd287;
  color: #8a6200;
}

.appointment-status-pill.is-cancelled {
  background: #fff1f2;
  border: 1px solid #ef9aa4;
  color: #b4232f;
}

.appointment-status-pill.is-completed,
.appointment-status-pill.is-arrived {
  background: #edf4ff;
  border: 1px solid #9abef9;
  color: #1f66c2;
}

.appointment-payment-pill {
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid #d0d5e0;
  color: #363c4d;
}

.appointment-payment-pill.is-paid {
  background: #eafaf0;
  border-color: #8bd9aa;
  color: #087443;
}

.appointments-empty {
  color: var(--muted) !important;
  height: 80px !important;
  text-align: center;
}

.appointments-panel-footer {
  color: #a0a5b2;
  font-size: 16px;
}

.appointments-panel-footer label {
  align-items: center;
  color: #343a4a;
  display: inline-flex;
  gap: 8px;
}

.appointments-panel-footer select {
  border: 1px solid #d7dce8;
  border-radius: 999px;
  min-height: 38px;
  padding: 0 14px;
}

table {
  border-collapse: collapse;
  width: 100%;
}

th,
td {
  border-bottom: 1px solid var(--line);
  padding: 13px 18px;
  text-align: left;
  vertical-align: top;
}

th {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.inline-alert {
  background: #fff4e5;
  border-bottom: 1px solid var(--line);
  color: #8a4b12;
  padding: 12px 18px;
}

.muted {
  color: var(--muted);
}

.resource-tabs {
  align-items: center;
  border-bottom: 1px solid var(--line);
  display: flex;
  gap: 22px;
  margin-bottom: 28px;
}

.service-resource-page .resource-tabs {
  border-bottom: 0;
}

.settings-tabs,
.message-tabs,
.task-tabs,
.kpi-tabs,
.debug-subtabs,
.employee-tabs {
  border-bottom: 0;
}

.resource-tabs a,
.resource-tabs span {
  color: var(--muted);
  font-weight: 650;
  padding: 0 0 12px;
  text-decoration: none;
}

.resource-tabs .active {
  border-bottom: 2px solid #ff9d6e;
  color: var(--text);
}

.employees-resource,
.employee-departments-page {
  display: grid;
  gap: 6px;
}

.employee-tabs .active {
  border-bottom-color: #e5004f;
  color: #e5004f;
}

.employee-tabs a:hover {
  color: #e5004f;
}

.employees-page {
  padding-top: 10px;
}

.employee-card {
  border-color: rgba(229, 0, 79, 0.14);
}

.employee-avatar,
.employee-photo .agent-photo-preview {
  background: #fde8ef;
  color: #e5004f;
}

.employee-card-meta b {
  font-size: 18px;
  font-weight: 650;
}

.employee-enabled {
  color: #18a46b;
}

.employee-disabled {
  color: #e24d55;
}

.employee-card-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 36px;
  align-items: center;
  padding: 12px 0 0;
  color: #7b8499;
  font-size: 13px;
}

.employee-card-foot span {
  border-radius: 999px;
  background: #f6f7fb;
  padding: 5px 9px;
}

.employee-new-card span {
  background: #e5004f;
  box-shadow: 0 0 0 18px #fde8ef;
}

.employee-general-card {
  grid-template-columns: 190px 1fr;
}

.employee-active-switch {
  align-self: end;
  min-height: 44px;
}

.employee-department-list,
.employee-responsible-list {
  display: grid;
  gap: 16px;
}

.employee-departments-page,
.employee-responsibles-page {
  max-width: 1120px;
}

.employee-department-card,
.employee-department-create,
.employee-responsible-card {
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid #f0c4d3;
  border-radius: 18px;
  box-shadow: var(--shadow);
  overflow: hidden;
}

.employee-department-card {
  position: relative;
}

.employee-department-card[data-employee-department-card],
.employee-department-member[data-employee-department-member] {
  user-select: none;
}

.employee-department-card,
.employee-department-member,
.employee-department-create,
.employee-department-create summary span,
.employee-department-members,
.employee-responsible-card,
.employee-department-edit,
.employee-department-edit summary span {
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease, background 0.18s ease, color 0.18s ease;
}

.employee-department-card[data-employee-department-card]:hover,
.employee-department-card.is-drag-over {
  border-color: rgba(229, 0, 79, 0.36);
  box-shadow: 0 18px 42px rgba(229, 0, 79, 0.1);
  transform: translateY(-2px);
}

.employee-department-card-head {
  align-items: center;
  display: flex;
  gap: 18px;
  justify-content: space-between;
  min-height: 62px;
  padding: 0 62px 0 20px;
}

.employee-department-title,
.employee-department-meta {
  align-items: center;
  display: inline-flex;
  gap: 14px;
  min-width: 0;
}

.employee-department-title span,
.employee-department-member span {
  color: #e5004f;
  font-size: 18px;
  line-height: 1;
}

.employee-department-title h2 {
  color: var(--text);
  font-size: 18px;
  font-weight: 650;
  margin: 0;
}

.employee-department-meta {
  flex-wrap: wrap;
  justify-content: flex-end;
}

.employee-department-meta span,
.employee-department-meta a,
.employee-department-member em {
  background: #fde8ef;
  border-radius: 999px;
  color: #a54b67;
  font-size: 12px;
  font-style: normal;
  font-weight: 750;
  padding: 4px 9px;
  text-decoration: none;
  white-space: nowrap;
}

.employee-department-meta a {
  background: transparent;
  color: #e5004f;
  padding-inline: 2px;
}

.employee-department-members {
  border: 1px solid rgba(229, 0, 79, 0.12);
  border-radius: 14px;
  display: grid;
  gap: 10px;
  margin: 0 20px 16px;
  min-height: 58px;
  padding: 12px;
}

.employee-department-members.is-drag-over {
  background: rgba(253, 232, 239, 0.52);
  border-color: rgba(229, 0, 79, 0.32);
  box-shadow: inset 0 0 0 1px rgba(229, 0, 79, 0.08);
}

.employee-department-member {
  align-items: center;
  background: #fff7fa;
  border: 1px solid #f2bfd0;
  border-radius: 12px;
  color: var(--text);
  display: grid;
  gap: 12px;
  grid-template-columns: auto minmax(0, 1fr) auto;
  min-height: 40px;
  padding: 0 12px;
  text-decoration: none;
}

.employee-department-member:hover {
  background: #fff;
  border-color: rgba(229, 0, 79, 0.28);
  box-shadow: 0 10px 24px rgba(229, 0, 79, 0.08);
  transform: translateY(-1px);
}

.employee-department-member.is-responsible {
  background: linear-gradient(135deg, #fff5f8, #ffffff);
  border-color: rgba(229, 0, 79, 0.34);
}

.employee-department-member strong {
  color: var(--text);
  font-size: 14px;
  font-weight: 650;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.employee-department-member em {
  background: #f6dce6;
  color: #a54b67;
}

.employee-department-empty,
.employee-department-empty-state {
  color: var(--muted);
  margin: 0;
}

.employee-department-empty {
  font-size: 13px;
  padding: 8px;
}

.employee-department-empty-state {
  border: 1px dashed #f0c4d3;
  border-radius: 18px;
  display: grid;
  gap: 6px;
  padding: 24px;
}

.employee-department-empty-state strong {
  color: var(--text);
}

.employee-department-edit {
  border-top: 0;
  margin: 0;
}

.employee-department-create summary {
  align-items: center;
  cursor: pointer;
  display: flex;
  gap: 14px;
  min-height: 62px;
  padding: 0 20px;
}

.employee-department-edit summary::-webkit-details-marker,
.employee-department-create summary::-webkit-details-marker {
  display: none;
}

.employee-department-create summary span {
  align-items: center;
  background: #fde8ef;
  border-radius: 999px;
  color: #e5004f;
  display: inline-flex;
  font-size: 20px;
  font-weight: 800;
  height: 32px;
  justify-content: center;
  width: 32px;
}

.employee-department-create summary strong {
  color: var(--text);
  font-size: 17px;
  font-weight: 650;
}

.employee-department-edit-trigger {
  align-items: center;
  border-radius: 999px;
  color: #2f80ff;
  cursor: pointer;
  display: inline-flex;
  height: 34px;
  justify-content: center;
  min-height: 0;
  padding: 0;
  position: absolute;
  right: 20px;
  top: 14px;
  transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
  width: 34px;
  z-index: 2;
}

.employee-department-edit-trigger:hover,
.employee-department-edit-trigger:focus-visible,
.employee-department-edit[open] .employee-department-edit-trigger {
  background: #fde8ef;
  color: #e5004f;
  outline: 0;
  transform: translateY(-1px);
}

.employee-department-edit-icon {
  font-size: 19px;
  font-weight: 850;
  line-height: 1;
}

.employee-department-edit form,
.employee-department-create form {
  border-top: 1px solid rgba(229, 0, 79, 0.1);
  display: grid;
  gap: 18px;
  padding: 24px;
}

.employee-department-form-row {
  align-items: end;
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(0, 1fr) auto auto;
}

.employee-department-create .employee-department-form-row {
  grid-template-columns: minmax(160px, 240px) minmax(0, 1fr) auto auto;
}

.employee-department-card label,
.employee-department-create label,
.employee-responsible-card label {
  display: grid;
  gap: 8px;
  color: var(--muted);
  font-size: 14px;
}

.employee-department-card label > span,
.employee-department-create label > span,
.employee-responsible-card label > span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 750;
}

.employee-department-card input,
.employee-department-card select,
.employee-department-create input,
.employee-department-create select,
.employee-responsible-card select {
  width: 100%;
  min-height: 40px;
  border: 1px solid #f0c4d3;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.88);
  color: var(--text);
  padding: 0 12px;
}

.employee-department-card input:focus,
.employee-department-card select:focus,
.employee-department-create input:focus,
.employee-department-create select:focus,
.employee-responsible-card select:focus {
  border-color: #e5004f;
  box-shadow: 0 0 0 3px rgba(229, 0, 79, 0.08);
  outline: 0;
}

.employee-inline-check {
  display: inline-flex !important;
  grid-auto-flow: column;
  align-items: center;
  justify-content: start;
  gap: 8px !important;
  min-height: 40px;
}

.employee-inline-check input {
  width: 16px;
  min-height: 16px;
}

.employee-department-enable-switch {
  align-items: center !important;
  align-self: end;
  cursor: pointer;
  display: inline-grid !important;
  gap: 9px !important;
  grid-template-columns: auto auto;
  min-height: 40px;
  white-space: nowrap;
}

.employee-department-enable-switch input[type="hidden"] {
  display: none;
}

.employee-department-enable-switch input[type="checkbox"] {
  height: 1px;
  min-height: 1px;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  width: 1px;
}

.employee-department-enable-switch span {
  background: #e8dbe3;
  border-radius: 999px;
  display: inline-flex;
  height: 24px;
  position: relative;
  transition: background 0.18s ease, box-shadow 0.18s ease;
  width: 44px;
}

.employee-department-enable-switch span::after {
  background: #ffffff;
  border-radius: 50%;
  box-shadow: 0 3px 8px rgba(37, 42, 62, 0.16);
  content: "";
  height: 18px;
  left: 3px;
  position: absolute;
  top: 3px;
  transition: transform 0.18s ease;
  width: 18px;
}

.employee-department-enable-switch input[type="checkbox"]:checked + span {
  background: #e5004f;
  box-shadow: 0 0 0 4px rgba(229, 0, 79, 0.08);
}

.employee-department-enable-switch input[type="checkbox"]:checked + span::after {
  transform: translateX(20px);
}

.employee-department-enable-switch strong {
  color: var(--text);
  font-size: 14px;
  font-weight: 750;
}

.employee-secondary-button {
  min-height: 40px;
  border: 1px solid #f3b6ca;
  border-radius: 12px;
  background: #fde8ef;
  color: #e5004f;
  cursor: pointer;
  font-weight: 700;
  padding: 0 16px;
}

.employee-secondary-button:hover:not(:disabled) {
  background: #e5004f;
  border-color: #e5004f;
  color: #ffffff;
}

.employee-secondary-button:disabled,
.employee-responsible-card select:disabled {
  cursor: not-allowed;
  opacity: 0.56;
}

.employee-department-actions {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

.employee-department-form-actions {
  align-items: center;
  align-self: end;
  display: flex;
  justify-content: flex-end;
}

@media (max-width: 820px) {
  .employee-department-form-row,
  .employee-department-create .employee-department-form-row {
    grid-template-columns: 1fr;
  }

  .employee-department-form-actions {
    justify-content: flex-start;
  }
}

.employee-department-create {
  margin-top: 20px;
}

.employee-department-create:hover,
.employee-department-create:focus-within,
.employee-department-create[open] {
  border-color: rgba(229, 0, 79, 0.32);
  box-shadow: 0 16px 34px rgba(229, 0, 79, 0.08);
}

.employee-department-create:hover summary span,
.employee-department-create:focus-within summary span,
.employee-department-create[open] summary span {
  background: #e5004f;
  color: #ffffff;
}

.employee-department-create[open] {
  transform: none;
}

[data-employee-department-drag-handle],
[data-employee-member-drag-handle] {
  cursor: grab;
  display: inline-flex;
  touch-action: none;
}

[data-employee-department-drag-handle]:active,
[data-employee-member-drag-handle]:active,
.employee-department-card.is-dragging [data-employee-department-drag-handle],
.employee-department-member.is-dragging [data-employee-member-drag-handle] {
  cursor: grabbing;
}

.employee-department-card.is-dragging,
.employee-department-member.is-dragging {
  border-color: rgba(229, 0, 79, 0.58);
  box-shadow: 0 20px 48px rgba(229, 0, 79, 0.14);
  opacity: 0.56;
  transform: scale(0.99);
}

.employee-department-card.is-drag-over,
.employee-department-members.is-drag-over {
  background: rgba(253, 232, 239, 0.42);
  border-color: rgba(229, 0, 79, 0.42);
  box-shadow: 0 16px 34px rgba(229, 0, 79, 0.08);
}

.employee-department-drop-placeholder,
.employee-member-drop-placeholder {
  background: linear-gradient(135deg, rgba(253, 232, 239, 0.86), rgba(255, 255, 255, 0.62));
  border: 1.5px dashed rgba(229, 0, 79, 0.5);
  border-radius: 18px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.65);
  min-height: 64px;
}

.employee-member-drop-placeholder {
  border-radius: 12px;
  min-height: 40px;
}

.employee-department-list.is-saving .employee-department-card,
.employee-department-members.is-saving .employee-department-member {
  cursor: progress;
}

.employee-department-list.is-saved .employee-department-card,
.employee-department-members.is-saved .employee-department-member {
  box-shadow: 0 14px 32px rgba(229, 0, 79, 0.09);
}

.employee-responsible-card {
  display: grid;
  gap: 18px;
  padding: 22px;
}

.employee-responsible-card header {
  align-items: center;
  display: flex;
  justify-content: space-between;
  gap: 18px;
}

.employee-responsible-card header strong,
.employee-responsible-card header span {
  display: block;
}

.employee-responsible-card header strong {
  color: var(--text);
  font-size: 20px;
}

.employee-responsible-card header span {
  color: var(--muted);
  font-size: 13px;
  margin-top: 4px;
}

.employee-responsible-card header em {
  background: #f1f2f7;
  border-radius: 999px;
  color: #7f87a0;
  font-size: 12px;
  font-style: normal;
  font-weight: 750;
  padding: 5px 10px;
  white-space: nowrap;
}

.employee-responsible-card header em.is-set {
  background: #fde8ef;
  color: #e5004f;
}

.employee-responsible-card form {
  align-items: end;
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(0, 1fr) auto;
}

.employee-responsible-card p {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.65;
  margin: 0;
}

.service-category-section + .service-category-section {
  margin-top: 54px;
}

.service-category-heading {
  align-items: center;
  display: grid;
  gap: 24px;
  grid-template-columns: auto minmax(0, 1fr);
  margin: 36px 0 24px;
}

.service-category-heading::after {
  background: #eef0f5;
  border-radius: 999px;
  content: "";
  display: block;
  height: 8px;
}

.service-category-heading span {
  background: #edf0f6;
  border-radius: 999px;
  color: #222735;
  display: inline-flex;
  font-size: 14px;
  font-weight: 850;
  letter-spacing: 0.2em;
  padding: 8px 16px;
  text-transform: uppercase;
}

.service-card-grid {
  display: grid;
  align-items: start;
  gap: 30px 34px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 320px));
  justify-content: start;
}

.service-card {
  background: rgba(255, 255, 255, 0.76);
  border: 1px solid #dfe3ed;
  border-radius: 20px;
  box-shadow: 0 18px 44px rgba(40, 46, 70, 0.07);
  color: var(--text);
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  min-height: 210px;
  overflow: hidden;
  text-decoration: none;
  width: min(100%, 320px);
}

.service-card-title {
  align-items: center;
  border-bottom: 1px solid #e7eaf2;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  min-height: 54px;
  padding: 0 16px;
}

.service-card h2 {
  font-size: 18px;
  font-weight: 500;
  margin: 0;
}

.status-pill {
  background: #eef3ff;
  border-radius: 999px;
  color: #7ea8ff;
  font-size: 12px;
  font-weight: 800;
  padding: 5px 10px;
  white-space: nowrap;
}

.status-pill.active {
  background: #eaf2ff;
  color: var(--blue);
}

.service-card-agents {
  align-items: center;
  border-bottom: 1px solid #edf0f6;
  color: #a1a6b3;
  display: flex;
  justify-content: space-between;
  min-height: 54px;
  padding: 0 16px;
}

.service-card-agents > span,
.service-card-details dt {
  color: #a1a6b3;
  font-size: 14px;
  font-weight: 500;
}

.service-agent-stack {
  align-items: center;
  display: inline-flex;
  justify-content: flex-end;
  min-width: 120px;
}

.service-agent-avatar {
  background:
    radial-gradient(circle at 50% 34%, #d9deea 0 28%, transparent 29%),
    radial-gradient(circle at 50% 88%, #d9deea 0 38%, transparent 39%);
  border-radius: 999px;
  display: inline-block;
  height: 28px;
  margin-left: -8px;
  object-fit: cover;
  width: 24px;
}

.service-agent-more {
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid #e3e7f0;
  border-radius: 999px;
  box-shadow: 0 4px 12px rgba(37, 42, 62, 0.06);
  color: #4b5363;
  font-size: 12px;
  font-style: normal;
  margin-left: -2px;
  padding: 4px 8px;
}

.service-agent-empty {
  color: #9aa2b3;
  font-size: 13px;
  font-style: normal;
}

.service-card-details {
  align-content: center;
  display: grid;
  gap: 5px;
  margin: 0;
  padding: 16px;
}

.service-card-details div {
  display: grid;
  grid-template-columns: 1fr auto;
}

.service-card-details dd {
  color: #4b5363;
  font-size: 14px;
  margin: 0;
}

.service-edit-button {
  align-items: center;
  background: #f1f2f7;
  border: 0;
  border-radius: 16px;
  color: #2d3241;
  cursor: pointer;
  display: flex;
  font-size: 15px;
  gap: 10px;
  justify-content: center;
  margin: 0 12px 12px;
  min-height: 36px;
  text-decoration: none;
}

.service-edit-button span {
  color: #2d3241;
  font-size: 18px;
  line-height: 1;
}

.new-service-card {
  align-items: center;
  background: rgba(255, 255, 255, 0.62);
  border: 2px dotted #d6dae5;
  box-shadow: none;
  gap: 20px;
  grid-template-rows: auto auto;
  justify-content: center;
  justify-items: center;
  min-height: 210px;
  padding: 24px;
  width: min(100%, 320px);
}

.new-service-plus {
  align-items: center;
  background: var(--blue);
  border-radius: 999px;
  box-shadow: 0 0 0 20px #eef0f6;
  color: #fff;
  display: inline-flex;
  font-size: 24px;
  font-weight: 700;
  height: 40px;
  justify-content: center;
  width: 40px;
}

.new-service-card strong {
  font-size: 18px;
  font-weight: 500;
}

.bundle-card-grid {
  align-items: start;
  display: grid;
  gap: 34px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 460px));
  justify-content: start;
}

.bundle-card {
  background: rgba(255, 255, 255, 0.76);
  border: 1px solid #dfe3ed;
  border-radius: 20px;
  box-shadow: 0 18px 44px rgba(40, 46, 70, 0.07);
  color: var(--text);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-height: 250px;
  overflow: visible;
  position: relative;
  text-decoration: none;
  width: min(100%, 460px);
}

.bundle-card::after {
  background: rgba(255, 255, 255, 0.68);
  border: 1px solid #e1e5ef;
  border-radius: 16px;
  bottom: -12px;
  box-shadow: 0 6px 16px rgba(40, 46, 70, 0.05);
  content: "";
  height: 28px;
  left: 14px;
  position: absolute;
  right: 28px;
  z-index: -1;
}

.bundle-card-head {
  align-items: center;
  border-bottom: 1px solid #e7eaf2;
  display: flex;
  gap: 16px;
  justify-content: space-between;
  min-height: 72px;
  padding: 0 22px;
}

.bundle-card-head h2 {
  font-size: 20px;
  font-weight: 500;
  margin: 0;
}

.bundle-card-head strong {
  color: var(--blue);
  font-size: 22px;
  font-weight: 650;
}

.bundle-card-body {
  display: grid;
  gap: 14px;
  padding: 20px 22px;
}

.bundle-card-columns,
.bundle-card-items div {
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr) 72px;
}

.bundle-card-columns {
  color: #a3a8b3;
  font-size: 14px;
  font-weight: 700;
}

.bundle-card-columns span:last-child,
.bundle-card-items strong {
  text-align: right;
}

.bundle-card-items {
  display: grid;
  gap: 10px;
}

.bundle-card-items div span {
  color: #3d4352;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bundle-card-items strong {
  color: #303646;
  font-weight: 500;
}

.bundle-card-empty {
  color: var(--muted);
  margin: 0;
}

.bundle-edit-button {
  align-items: center;
  background: #f1f2f7;
  border: 0;
  border-radius: 16px;
  color: #2d3241;
  cursor: pointer;
  display: flex;
  font-size: 16px;
  gap: 12px;
  justify-content: center;
  margin: 0 22px 22px;
  min-height: 46px;
  text-decoration: none;
}

.new-bundle-card {
  align-items: center;
  background: rgba(255, 255, 255, 0.52);
  border: 2px dotted #d3d7e2;
  box-shadow: none;
  gap: 28px;
  grid-template-rows: auto auto;
  justify-content: center;
  justify-items: center;
}

.new-bundle-card::after {
  display: none;
}

.new-bundle-plus {
  align-items: center;
  background: var(--blue);
  border-radius: 999px;
  box-shadow: 0 0 0 20px #eef0f6;
  color: #fff;
  display: inline-flex;
  font-size: 30px;
  font-weight: 700;
  height: 46px;
  justify-content: center;
  line-height: 1;
  width: 46px;
}

.new-bundle-card strong {
  color: var(--text);
  font-size: 20px;
  font-weight: 500;
}

.bundle-editor {
  display: grid;
  gap: 34px;
}

.bundle-editor-panel {
  background: rgba(255, 255, 255, 0.76);
  background-image: radial-gradient(#dfe4ef 1px, transparent 1px);
  background-position: right 16px top 16px;
  background-size: 18px 18px;
  border: 1px solid #dfe3ed;
  border-radius: 22px;
  box-shadow: 0 18px 44px rgba(40, 46, 70, 0.07);
  overflow: hidden;
}

.bundle-editor-panel header {
  align-items: center;
  border-bottom: 1px solid #e5e8f0;
  display: flex;
  justify-content: space-between;
  min-height: 78px;
  padding: 0 28px;
}

.bundle-editor-panel h2 {
  font-size: 20px;
  font-weight: 500;
  margin: 0;
}

.bundle-editor-panel header span {
  color: #545b6c;
  font-size: 15px;
}

.bundle-editor-grid {
  display: grid;
  gap: 20px 24px;
  padding: 32px 36px 40px;
}

.bundle-editor-grid.general {
  grid-template-columns: minmax(0, 2fr) minmax(180px, 1fr) minmax(180px, 1fr);
}

.bundle-editor-grid.price {
  grid-template-columns: repeat(2, minmax(180px, 320px));
}

.bundle-editor-grid label {
  display: grid;
  gap: 8px;
}

.bundle-editor-grid label > span,
.bundle-service-option > strong,
.bundle-quantity > span:first-child {
  color: #4e5668;
  font-weight: 500;
}

.bundle-editor-grid input,
.bundle-editor-grid select,
.bundle-editor-grid textarea {
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid #d7dce8;
  border-radius: 18px;
  color: var(--text);
  font-size: 16px;
  height: 48px;
  padding: 0 14px;
}

.bundle-editor-grid textarea {
  min-height: 48px;
  padding-top: 12px;
  resize: vertical;
}

.bundle-service-list {
  display: grid;
  gap: 16px;
  padding: 36px;
}

.bundle-service-option {
  align-items: center;
  border: 2px solid #dcdfe7;
  border-radius: 24px;
  cursor: pointer;
  display: grid;
  gap: 18px;
  grid-template-columns: auto minmax(0, 1fr) auto;
  min-height: 60px;
  padding: 0 18px;
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.bundle-service-option:has(input:checked) {
  border-color: var(--blue);
  box-shadow: inset 0 0 0 1px rgba(47, 128, 255, 0.1);
}

.bundle-service-option > input {
  height: 1px;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  width: 1px;
}

.bundle-service-check {
  align-items: center;
  border: 2px solid #d1d5de;
  border-radius: 999px;
  display: inline-flex;
  height: 22px;
  justify-content: center;
  width: 22px;
}

.bundle-service-check::after {
  color: #fff;
  content: "✓";
  font-size: 13px;
  font-weight: 900;
  opacity: 0;
}

.bundle-service-option input:checked + .bundle-service-check {
  background: var(--blue);
  border-color: var(--blue);
}

.bundle-service-option input:checked + .bundle-service-check::after {
  opacity: 1;
}

.bundle-service-option strong {
  font-size: 18px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bundle-quantity {
  align-items: center;
  border-left: 1px solid #dfe3ed;
  display: inline-flex;
  gap: 12px;
  padding-left: 16px;
}

.bundle-quantity-control {
  align-items: center;
  display: inline-grid;
  gap: 6px;
  grid-template-columns: 28px 40px 28px;
}

.bundle-quantity-control button,
.bundle-quantity-control input {
  background: #f1f3f8;
  border: 1px solid transparent;
  border-radius: 8px;
  color: #303646;
  font-size: 16px;
  height: 30px;
  text-align: center;
}

.bundle-quantity-control button {
  cursor: pointer;
  font-weight: 800;
}

.bundle-quantity-control input {
  background: #fff;
  border-color: #d7dce8;
  padding: 0;
  width: 40px;
}

.bundle-editor-actions {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

.danger-button {
  background: #f4676d;
  border: 0;
  border-radius: 16px;
  color: #fff;
  cursor: pointer;
  font-size: 16px;
  font-weight: 750;
  min-height: 48px;
  padding: 0 22px;
}

.service-extra-empty-state {
  align-items: center;
  color: #a4acc0;
  display: grid;
  gap: 22px;
  justify-items: center;
  min-height: 320px;
  text-align: center;
}

.service-extra-empty-state strong {
  color: #a8b2ca;
  font-size: 20px;
  font-weight: 500;
}

.service-extra-empty-icon {
  border: 3px solid #d8deee;
  border-radius: 4px;
  display: inline-block;
  height: 34px;
  position: relative;
  width: 24px;
}

.service-extra-empty-icon::after {
  background: #d8deee;
  bottom: 5px;
  content: "";
  height: 3px;
  left: 4px;
  position: absolute;
  right: 4px;
}

.service-extra-card-grid {
  align-items: start;
  display: grid;
  gap: 34px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 420px));
  justify-content: start;
}

.service-extra-card {
  background: rgba(255, 255, 255, 0.76);
  border: 1px solid #dfe3ed;
  border-radius: 20px;
  box-shadow: 0 18px 44px rgba(40, 46, 70, 0.07);
  color: var(--text);
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  min-height: 286px;
  overflow: hidden;
  text-decoration: none;
  width: min(100%, 420px);
}

.service-extra-card-head {
  align-items: center;
  border-bottom: 1px solid #e7eaf2;
  display: flex;
  min-height: 72px;
  padding: 0 22px;
}

.service-extra-card-head h2 {
  font-size: 20px;
  font-weight: 500;
  margin: 0;
}

.service-extra-service-row {
  align-items: center;
  border-bottom: 1px solid #edf0f6;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr) auto;
  min-height: 64px;
  padding: 0 22px;
}

.service-extra-service-row span,
.service-extra-card-details dt {
  color: #a4a8b3;
  font-size: 15px;
  font-weight: 650;
}

.extra-service-badge {
  border: 1px solid #f0ba26;
  border-radius: 7px;
  color: #b57a00;
  font-size: 13px;
  font-weight: 700;
  padding: 4px 8px;
}

.extra-service-badge.all {
  background: #e9fbef;
  border-color: #47d06f;
  color: #069a33;
}

.extra-service-badge.empty {
  border-color: #d8deea;
  color: #8e97aa;
}

.service-extra-card-details {
  align-content: center;
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 20px 22px;
}

.service-extra-card-details div {
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr) auto;
}

.service-extra-card-details dd {
  color: #4a5162;
  margin: 0;
}

.service-extra-edit-button {
  align-items: center;
  background: #f1f2f7;
  border-radius: 16px;
  color: #2d3241;
  display: flex;
  font-size: 16px;
  gap: 12px;
  justify-content: center;
  margin: 0 18px 18px;
  min-height: 46px;
  text-decoration: none;
}

.new-service-extra-card {
  align-items: center;
  background: rgba(255, 255, 255, 0.52);
  border: 2px dotted #d3d7e2;
  box-shadow: none;
  gap: 28px;
  grid-template-rows: auto auto;
  justify-content: center;
  justify-items: center;
}

.new-service-extra-plus {
  align-items: center;
  background: var(--blue);
  border-radius: 999px;
  box-shadow: 0 0 0 20px #eef0f6;
  color: #fff;
  display: inline-flex;
  font-size: 30px;
  font-weight: 700;
  height: 46px;
  justify-content: center;
  width: 46px;
}

.new-service-extra-card strong {
  color: var(--text);
  font-size: 20px;
  font-weight: 500;
}

.service-extra-editor-title {
  color: #1f2431;
  font-size: 34px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.1;
  margin: 12px 0 34px;
}

.service-extra-editor {
  display: grid;
  gap: 34px;
  max-width: 1252px;
}

.service-extra-editor-top {
  align-items: start;
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.service-extra-editor-panel {
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid #dfe3ed;
  border-radius: 22px;
  box-shadow: 0 18px 44px rgba(40, 46, 70, 0.07);
  overflow: hidden;
}

.service-extra-editor-panel header {
  align-items: center;
  border-bottom: 1px solid #e5e8f0;
  display: flex;
  justify-content: space-between;
  min-height: 76px;
  overflow: hidden;
  padding: 0 36px;
  position: relative;
}

.service-extra-editor-panel header::after {
  background-image: radial-gradient(#d9deea 1px, transparent 1px);
  background-size: 18px 18px;
  content: "";
  height: 54px;
  opacity: 0.95;
  pointer-events: none;
  position: absolute;
  right: 13px;
  top: 12px;
  width: 72px;
}

.service-extra-editor-panel header > * {
  position: relative;
  z-index: 1;
}

.service-extra-editor-panel h2,
.service-extra-media-body h3 {
  font-size: 20px;
  font-weight: 500;
  margin: 0;
}

.service-extra-editor-panel header span {
  color: #545b6c;
  font-size: 15px;
}

.service-extra-basic-grid {
  display: grid;
  gap: 18px 22px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: 34px 36px 38px;
}

.extra-field {
  display: grid;
  gap: 6px;
  min-width: 0;
  position: relative;
}

.extra-field.full {
  grid-column: 1 / -1;
}

.extra-field > span {
  color: #7c8495;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
}

.extra-field.placeholder-only > span {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.extra-field input,
.extra-field select,
.extra-field textarea {
  background: transparent;
  border: 0;
  border-bottom: 1px solid #cfd4df;
  color: var(--text);
  font-size: 16px;
  line-height: 1.3;
  min-height: 40px;
  outline: 0;
  padding: 0 0 9px;
  width: 100%;
}

.extra-field input::placeholder,
.extra-field textarea::placeholder {
  color: #9aa1ae;
}

.extra-field input:focus,
.extra-field textarea:focus {
  border-bottom-color: var(--blue);
}

.extra-field select {
  border: 1px solid #d7dce8;
  border-radius: 18px;
  min-height: 46px;
  padding: 0 14px;
}

.extra-field textarea {
  min-height: 94px;
  padding-top: 10px;
  resize: vertical;
}

.extra-attendee-check {
  align-items: center;
  border: 1px solid #d7dce8;
  border-radius: 18px;
  color: var(--blue);
  cursor: pointer;
  display: grid;
  gap: 12px;
  grid-template-columns: auto minmax(0, 1fr);
  min-height: 48px;
  padding: 0 14px;
}

.extra-attendee-check.full {
  grid-column: 1 / -1;
}

.extra-attendee-check strong {
  font-size: 16px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.extra-attendee-check input {
  height: 1px;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  width: 1px;
}

.extra-attendee-check span,
.extra-select-all span,
.extra-service-check {
  align-items: center;
  border: 1px solid #aeb5c4;
  border-radius: 999px;
  display: inline-flex;
  height: 20px;
  justify-content: center;
  width: 20px;
}

.extra-attendee-check span::after,
.extra-select-all span::after,
.extra-service-check::after {
  color: #fff;
  content: "✓";
  font-size: 12px;
  font-weight: 900;
  opacity: 0;
}

.extra-attendee-check input:checked + span,
.extra-select-all input:checked + span,
.extra-service-option input:checked + .extra-service-check {
  background: var(--blue);
  border-color: var(--blue);
}

.extra-attendee-check input:checked + span::after,
.extra-select-all input:checked + span::after,
.extra-service-option input:checked + .extra-service-check::after {
  opacity: 1;
}

.service-extra-media-body {
  display: grid;
  gap: 18px;
  padding: 40px 36px 48px;
}

.service-extra-media-body p {
  color: #a3a8b3;
  font-size: 16px;
  line-height: 1.35;
  margin: 0;
}

.service-extra-media-drop {
  align-items: center;
  border: 2px dotted #d6dae5;
  border-radius: 18px;
  cursor: pointer;
  display: grid;
  gap: 18px;
  grid-template-columns: auto minmax(0, 1fr);
  min-height: 90px;
  padding: 18px 22px;
  position: relative;
}

.service-extra-media-drop span {
  background:
    radial-gradient(circle at 60% 32%, #d9deea 0 28%, transparent 29%),
    radial-gradient(circle at 38% 70%, #d9deea 0 32%, transparent 33%);
  border-radius: 999px;
  height: 42px;
  width: 42px;
}

.service-extra-media-drop strong {
  color: #7b8497;
  font-size: 20px;
  font-weight: 500;
}

.service-extra-media-input {
  height: 1px;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  width: 1px;
}

.extra-select-all {
  align-items: center;
  color: var(--text);
  cursor: pointer;
  display: inline-grid;
  gap: 10px;
  grid-template-columns: auto auto;
}

.extra-select-all input,
.extra-service-option > input {
  height: 1px;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  width: 1px;
}

.extra-service-list {
  display: grid;
  gap: 14px;
  padding: 36px;
}

.extra-service-option {
  align-items: center;
  border: 2px solid #dcdfe7;
  border-radius: 24px;
  cursor: pointer;
  display: grid;
  gap: 14px;
  grid-template-columns: auto auto minmax(0, 1fr);
  min-height: 58px;
  padding: 0 18px;
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.extra-service-option:has(input:checked) {
  border-color: var(--blue);
  box-shadow: inset 0 0 0 1px rgba(47, 128, 255, 0.1);
}

.extra-service-leaf {
  background:
    radial-gradient(ellipse at 58% 35%, #d9deea 0 32%, transparent 33%),
    radial-gradient(ellipse at 42% 72%, #d9deea 0 32%, transparent 33%);
  display: inline-block;
  height: 34px;
  width: 36px;
}

.extra-service-option strong {
  color: #2d3241;
  font-size: 18px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.service-extra-editor-actions {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

.service-categories-page {
  max-width: 1120px;
}

.service-category-list {
  display: grid;
  gap: 16px;
}

.service-category-card,
.service-category-create {
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid #dfe3ed;
  border-radius: 18px;
  box-shadow: var(--shadow);
  overflow: hidden;
}

.service-category-card-head {
  align-items: center;
  display: flex;
  gap: 18px;
  justify-content: space-between;
  min-height: 62px;
  padding: 0 20px;
}

.service-category-title,
.service-category-meta {
  align-items: center;
  display: inline-flex;
  gap: 14px;
  min-width: 0;
}

.service-category-title span,
.service-category-service span {
  color: var(--blue);
  font-size: 18px;
  line-height: 1;
}

.service-category-title h2 {
  font-size: 18px;
  font-weight: 650;
  margin: 0;
}

.service-category-meta span,
.service-category-service em {
  background: #eef0fb;
  border-radius: 999px;
  color: #7f87a0;
  font-size: 12px;
  font-style: normal;
  font-weight: 750;
  padding: 4px 9px;
  white-space: nowrap;
}

.service-category-meta button {
  background: transparent;
  border: 0;
  color: var(--blue);
  cursor: pointer;
  font-size: 20px;
}

.service-category-services {
  border: 1px solid var(--line);
  border-radius: 14px;
  display: grid;
  gap: 10px;
  margin: 0 20px 16px;
  padding: 12px;
}

.service-category-service {
  align-items: center;
  background: #f7f8ff;
  border: 1px solid #d8dcf4;
  border-radius: 12px;
  color: var(--text);
  display: grid;
  gap: 12px;
  grid-template-columns: auto minmax(0, 1fr) auto;
  min-height: 40px;
  padding: 0 12px;
  text-decoration: none;
}

.service-category-service strong {
  font-size: 14px;
  font-weight: 650;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.service-category-empty,
.service-category-empty-state {
  color: var(--muted);
  margin: 0;
}

.service-category-empty {
  padding: 8px;
}

.service-category-empty-state {
  border: 1px dashed #d5dae6;
  border-radius: 18px;
  display: grid;
  gap: 6px;
  padding: 24px;
}

.service-category-empty-state strong {
  color: var(--text);
}

.service-category-create {
  margin-top: 20px;
}

.service-category-create summary {
  align-items: center;
  cursor: pointer;
  display: flex;
  gap: 14px;
  min-height: 62px;
  padding: 0 20px;
}

.service-category-create summary::-webkit-details-marker {
  display: none;
}

.service-category-create summary span {
  align-items: center;
  background: #edf0f6;
  border-radius: 999px;
  color: var(--blue);
  display: inline-flex;
  font-size: 22px;
  font-weight: 800;
  height: 32px;
  justify-content: center;
  width: 32px;
}

.service-category-create summary strong {
  font-size: 17px;
  font-weight: 650;
}

.service-category-create form {
  border-top: 1px solid var(--line);
  display: grid;
  gap: 18px;
  padding: 24px;
}

.service-category-form-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.service-category-create label {
  display: grid;
  gap: 8px;
}

.service-category-create label > span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 750;
}

.service-category-create input,
.service-category-create textarea {
  background: transparent;
  border: 0;
  border-bottom: 1px solid #d9dde8;
  color: var(--text);
  min-height: 38px;
  padding: 6px 0;
  width: 100%;
}

.service-category-create textarea {
  resize: vertical;
}

.service-category-create input:focus,
.service-category-create textarea:focus {
  border-color: var(--blue);
  box-shadow: none;
  outline: 0;
}

.service-category-image-field {
  align-items: center;
  border: 2px dotted #d6dae5;
  border-radius: 14px;
  display: grid !important;
  gap: 14px;
  grid-template-columns: auto minmax(0, 1fr);
  min-height: 70px;
  padding: 0 22px;
}

.service-category-image-field span {
  color: #ccd2df !important;
  font-size: 34px !important;
}

.service-category-image-field input {
  border-bottom: 0;
  font-size: 16px;
}

.service-category-actions {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

.service-category-actions .primary-button {
  min-width: 128px;
}

.service-category-actions a {
  align-items: center;
  background: #f1f2f7;
  border: 1px solid var(--line);
  border-radius: 14px;
  color: var(--text);
  display: inline-flex;
  font-weight: 650;
  min-height: 40px;
  padding: 0 18px;
  text-decoration: none;
}

.service-category-card,
.service-category-service,
.service-category-create,
.service-category-create summary span,
.service-category-services {
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease, background 0.18s ease, color 0.18s ease;
}

.service-category-card[data-service-category-card],
.service-category-service[data-service-category-service] {
  user-select: none;
}

[data-category-drag-handle],
[data-service-drag-handle] {
  cursor: grab;
  display: inline-flex;
  touch-action: none;
}

[data-category-drag-handle]:active,
[data-service-drag-handle]:active,
.service-category-card.is-dragging [data-category-drag-handle],
.service-category-service.is-dragging [data-service-drag-handle] {
  cursor: grabbing;
}

.service-category-card.is-dragging,
.service-category-service.is-dragging {
  border-color: rgba(47, 128, 255, 0.58);
  box-shadow: 0 20px 48px rgba(47, 128, 255, 0.14);
  opacity: 0.56;
  transform: scale(0.99);
}

.service-category-card.is-drag-over,
.service-category-services.is-drag-over {
  background: rgba(234, 242, 255, 0.42);
  border-color: rgba(47, 128, 255, 0.42);
  box-shadow: 0 16px 34px rgba(47, 128, 255, 0.08);
}

.service-category-drop-placeholder,
.service-service-drop-placeholder {
  background: linear-gradient(135deg, rgba(234, 242, 255, 0.82), rgba(255, 255, 255, 0.56));
  border: 1.5px dashed rgba(47, 128, 255, 0.58);
  border-radius: 18px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.62);
  min-height: 64px;
}

.service-service-drop-placeholder {
  border-radius: 12px;
  min-height: 40px;
}

.service-category-services.is-drag-over .service-category-empty {
  color: #8ca0c5;
}

.service-category-list.is-saving .service-category-card,
.service-category-services.is-saving .service-category-service {
  cursor: progress;
}

.service-category-list.is-saved .service-category-card,
.service-category-services.is-saved .service-category-service {
  box-shadow: 0 14px 32px rgba(47, 128, 255, 0.09);
}

.service-category-create:hover,
.service-category-create:focus-within,
.service-category-create[open] {
  border-color: rgba(47, 128, 255, 0.42);
  box-shadow: 0 18px 42px rgba(47, 128, 255, 0.1);
  transform: translateY(-2px);
}

.service-category-create:hover summary span,
.service-category-create:focus-within summary span,
.service-category-create[open] summary span {
  background: var(--blue);
  color: #ffffff;
}

.service-category-create[open] {
  transform: none;
}

.service-editor {
  align-items: start;
  display: grid;
  gap: 22px;
  grid-template-columns: minmax(0, 1fr) 230px;
}

.service-editor-main {
  display: grid;
  gap: 24px;
}

.editor-section {
  overflow: hidden;
}

.editor-section header {
  align-items: center;
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  min-height: 58px;
  padding: 0 20px;
}

.section-id-pill {
  background: #eef3ff;
  border-radius: 999px;
  color: #7f8aa2;
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
  padding: 4px 9px;
}

.editor-grid {
  display: grid;
  gap: 18px;
  padding: 22px;
}

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

.editor-grid.four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.editor-grid.three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.editor-grid.no-pad {
  padding: 0;
}

.editor-section label {
  display: grid;
  gap: 8px;
}

.color-field {
  align-items: center;
  background: #fff;
  border: 1px solid #dfe3ed;
  border-radius: 12px;
  display: grid;
  gap: 10px;
  grid-template-columns: 18px minmax(0, 1fr);
  min-height: 42px;
  padding: 0 12px;
  position: relative;
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.color-field:focus-within {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(47, 128, 255, 0.13);
}

.color-field-swatch {
  background: var(--service-color, #252a3e);
  border: 0;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(37, 42, 62, 0.1);
  cursor: pointer;
  height: 16px;
  padding: 0;
  width: 16px;
}

.editor-section .color-field input[data-service-color-text] {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  min-height: 40px;
  padding: 0;
}

.editor-section .color-field input[data-service-color-text]:focus {
  border-color: transparent;
  box-shadow: none;
}

.editor-section .color-field-native {
  border: 0;
  height: 1px;
  left: 12px;
  min-height: 1px;
  opacity: 0;
  padding: 0;
  pointer-events: none;
  position: absolute;
  top: 20px;
  width: 1px;
}

.section-note {
  background: var(--warning-bg);
  border-radius: 12px;
  color: var(--warning-text);
  margin: 18px 22px 0;
  padding: 12px 14px;
}

.agent-picker {
  display: grid;
  gap: 12px;
  padding: 28px 36px;
}

.agent-option {
  align-items: center;
  border: 2px solid #dfe3ed;
  border-radius: 22px;
  cursor: pointer;
  display: grid !important;
  gap: 16px;
  grid-template-columns: auto auto minmax(0, 1fr);
  min-height: 58px;
  padding: 0 18px;
  position: relative;
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.agent-option:has(input:checked) {
  border-color: var(--blue);
  box-shadow: inset 0 0 0 1px rgba(47, 128, 255, 0.08);
}

.agent-option input {
  height: 1px;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  width: 1px;
}

.agent-option-check {
  align-items: center;
  border: 1px solid #aab0bd;
  border-radius: 999px;
  display: inline-flex;
  height: 20px;
  justify-content: center;
  width: 20px;
}

.agent-option-check::after {
  color: #fff;
  content: "✓";
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  opacity: 0;
}

.agent-option input:checked + .agent-option-check {
  background: var(--blue);
  border-color: var(--blue);
}

.agent-option input:checked + .agent-option-check::after {
  opacity: 1;
}

.agent-option-avatar {
  background:
    radial-gradient(circle at 50% 32%, #d5dae7 0 28%, transparent 29%),
    radial-gradient(circle at 50% 88%, #d5dae7 0 38%, transparent 39%);
  display: inline-block;
  height: 30px;
  width: 26px;
}

.agent-option-name {
  color: #2d3241;
  font-size: 17px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inline-check {
  align-items: center;
  color: var(--muted);
  display: inline-flex !important;
  gap: 8px;
}

.service-editor-side,
.settings-editor-side {
  display: grid;
  gap: 18px;
  position: sticky;
  top: 20px;
}

.section-nav {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow);
  display: grid;
  padding: 12px;
}

.section-nav a {
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  padding: 11px 0;
  text-decoration: none;
}

.section-nav span {
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  padding: 11px 0;
}

.section-nav a:last-child {
  border-bottom: 0;
}

.section-nav a:hover {
  color: var(--text);
}

.settings-editor {
  align-items: start;
  display: grid;
  gap: 22px;
  grid-template-columns: minmax(0, 1fr) 230px;
}

.settings-editor-main {
  display: grid;
  gap: 24px;
}

.settings-tabs {
  margin-bottom: 0;
}

.success-alert {
  background: #effaf5;
  border: 1px solid #c8eadb;
  border-radius: 12px;
  color: #137a56;
}

.settings-section header {
  font-size: 16px;
  font-weight: 750;
}

.settings-row {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
}

.settings-row + .settings-row {
  border-top: 1px solid var(--line);
}

.settings-row-title {
  border-right: 1px solid var(--line);
  color: #626b7f;
  font-weight: 700;
  padding: 28px 28px;
}

.settings-row-body {
  display: grid;
  gap: 18px;
  padding: 28px;
}

.settings-full {
  display: grid;
}

.top-gap {
  margin-top: 4px;
}

.section-note.no-margin {
  margin: 0;
}

.tag-input {
  align-items: center;
  background: #fff;
  border: 1px solid #dfe3ed;
  border-radius: 12px;
  display: flex;
  min-height: 42px;
  padding: 7px 8px;
}

.tag-input span {
  background: var(--blue-soft);
  border: 1px solid rgba(47, 128, 255, 0.45);
  border-radius: 999px;
  color: var(--blue);
  display: inline-flex;
  font-size: 13px;
  font-weight: 700;
  padding: 4px 9px;
}

.settings-switch-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.permissions-settings-page {
  max-width: 1500px;
}

.permission-section {
  overflow: hidden;
}

.permission-section > header {
  align-items: center;
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  min-height: 74px;
  padding: 20px 24px;
}

.permission-section > header strong,
.permission-create-title {
  color: #252a3e;
  display: block;
  font-size: 18px;
  font-weight: 780;
}

.permission-section > header p,
.permission-role-head p,
.permission-form-wide em,
.permission-table td em,
.permission-table td > span {
  color: var(--muted);
  font-size: 13px;
  font-style: normal;
  line-height: 1.5;
  margin: 4px 0 0;
}

.permission-super-note,
.permission-empty-card {
  background: #f6f8fc;
  border: 1px solid #e2e6f0;
  border-radius: 14px;
  color: #626b7f;
  line-height: 1.6;
  margin: 20px 24px 0;
  padding: 14px 16px;
}

.permission-role-list,
.permission-create-card {
  display: grid;
  gap: 18px;
  margin: 20px 24px 24px;
}

.permission-role-card,
.permission-create-card {
  background: #fff;
  border: 1px solid #e2e6f0;
  border-radius: 16px;
  box-shadow: 0 14px 32px rgba(37, 42, 62, 0.05);
  overflow: hidden;
}

.permission-role-card {
  display: grid;
}

.permission-create-card {
  padding: 20px;
}

.permission-role-head {
  align-items: start;
  background: #fbfcff;
  border-bottom: 1px solid #e7eaf2;
  display: flex;
  gap: 16px;
  justify-content: space-between;
  padding: 18px 20px;
}

.permission-role-head h3 {
  color: #252a3e;
  font-size: 20px;
  margin: 0;
}

.permission-role-head > span,
.permission-checkbox b,
.permission-status {
  border-radius: 999px;
  display: inline-flex;
  font-size: 12px;
  font-weight: 780;
  white-space: nowrap;
}

.permission-role-head > span {
  background: var(--blue-soft);
  color: var(--blue);
  padding: 6px 10px;
}

.permission-module-list {
  display: grid;
  gap: 14px;
  padding: 18px 20px;
}

.permission-module-card {
  border: 1px solid #e7eaf2;
  border-radius: 14px;
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  overflow: hidden;
}

.permission-module-name {
  background: #f8faff;
  border-right: 1px solid #e7eaf2;
  color: #4b556b;
  font-size: 14px;
  font-weight: 780;
  padding: 14px 16px;
}

.permission-checkboxes {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  padding: 12px;
}

.permission-checkbox {
  align-items: start;
  background: #fff;
  border: 1px solid #e5e9f2;
  border-radius: 12px;
  cursor: pointer;
  display: grid !important;
  gap: 10px !important;
  grid-template-columns: auto minmax(0, 1fr);
  padding: 12px;
}

.permissions-settings-page .permission-checkbox input[type="checkbox"] {
  accent-color: var(--blue);
  background: initial;
  border: initial;
  box-shadow: none;
  height: 18px !important;
  margin: 3px 0 0;
  min-height: 18px !important;
  padding: 0;
  width: 18px !important;
}

.permission-checkbox strong,
.permission-table td strong {
  color: #252a3e;
  display: block;
  font-weight: 780;
}

.permission-checkbox em {
  color: #8a93a5;
  display: block;
  font-size: 12px;
  font-style: normal;
  margin-top: 3px;
  overflow-wrap: anywhere;
}

.permission-checkbox.high-risk {
  background: #fff8fa;
  border-color: #f2c7cf;
}

.permission-checkbox b {
  background: #fde8ef;
  color: #c61f4e;
  margin-top: 8px;
  padding: 4px 8px;
}

.permission-form-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 16px;
}

.permission-form-grid label,
.permission-user-form,
.permission-reset-form {
  display: grid;
  gap: 8px;
}

.permission-form-wide {
  grid-column: 1 / -1;
}

.permission-form-grid select[multiple],
.permission-department-select {
  min-height: 108px;
}

.permission-switch-field {
  align-content: start;
}

.permission-switch {
  align-items: center;
  color: #303647;
  cursor: pointer;
  display: inline-flex !important;
  gap: 10px !important;
  justify-self: start;
  min-height: 42px;
}

.permissions-settings-page .permission-switch input[type="checkbox"] {
  height: 1px !important;
  min-height: 1px !important;
  opacity: 0;
  padding: 0;
  position: absolute;
  width: 1px !important;
}

.permission-switch > span {
  background: #c8cfdd;
  border-radius: 999px;
  display: inline-flex;
  flex: 0 0 44px;
  height: 24px;
  padding: 3px;
  transition: background 0.16s ease;
  width: 44px;
}

.permission-switch > span::after {
  background: #fff;
  border-radius: 999px;
  box-shadow: 0 2px 6px rgba(37, 42, 62, 0.18);
  content: "";
  display: block;
  height: 18px;
  transition: transform 0.16s ease;
  width: 18px;
}

.permission-switch input:checked + span {
  background: var(--blue);
}

.permission-switch input:checked + span::after {
  transform: translateX(20px);
}

.permission-switch strong {
  color: #303647;
  font-size: 13px;
  font-weight: 780;
}

.permission-inline-button {
  justify-self: start;
  margin: 18px 20px 20px;
}

.permission-create-card .permission-inline-button {
  margin: 18px 0 0;
}

.permission-table-wrap {
  margin: 20px 24px 24px;
  overflow-x: auto;
}

.permission-table {
  border-collapse: separate;
  border-spacing: 0;
  min-width: 1120px;
  width: 100%;
}

.permission-table th,
.permission-table td {
  border-bottom: 1px solid #e7eaf2;
  padding: 14px 16px;
  text-align: left;
  vertical-align: top;
}

.permission-table th {
  background: #f8faff;
  color: #687286;
  font-size: 12px;
  font-weight: 780;
  white-space: nowrap;
}

.permission-table td {
  background: #fff;
  color: #303647;
  font-size: 13px;
}

.permission-table td:first-child {
  min-width: 170px;
}

.permission-table td:nth-child(2) {
  min-width: 470px;
}

.permission-account-table {
  min-width: 980px;
}

.permission-account-table th:first-child,
.permission-account-table td:first-child {
  min-width: 150px;
  width: 150px;
}

.permission-account-table th:nth-child(2),
.permission-account-table td:nth-child(2) {
  min-width: 260px;
  width: 260px;
}

.permission-account-table .permission-user-form {
  max-width: 248px;
}

.permission-account-table .permission-user-form > input {
  max-width: 248px;
}

.permission-user-grid {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.permission-account-table .permission-user-grid {
  grid-template-columns: repeat(2, 120px);
  max-width: 248px;
}

.permission-account-table .permission-user-grid select {
  width: 120px;
}

.permission-user-form input,
.permission-user-form select,
.permission-reset-form input {
  min-height: 38px;
}

.permission-user-form .secondary-button,
.permission-reset-form .secondary-button {
  justify-self: start;
  min-height: 36px;
}

.permission-reset-form {
  min-width: 170px;
}

.permission-status {
  background: #eef2ff;
  color: #536079;
  padding: 5px 9px;
}

.permission-status.status-active,
.permission-status.status-success {
  background: #e8fff6;
  color: #0f7a55;
}

.permission-status.status-disabled,
.permission-status.status-failed,
.permission-status.status-error {
  background: #fde8ef;
  color: #bf1d4b;
}

.permission-status.status-locked,
.permission-status.status-unknown {
  background: #fff7e6;
  color: #a15c06;
}

.permission-log-table {
  min-width: 1180px;
}

.permission-log-table th:first-child,
.permission-log-table td:first-child {
  min-width: 150px;
  white-space: nowrap;
  width: 150px;
}

.permission-log-table th:nth-child(2),
.permission-log-table td:nth-child(2) {
  min-width: 140px;
  white-space: nowrap;
  width: 140px;
}

.permission-log-table code {
  background: #f3f6fb;
  border-radius: 8px;
  color: #475569;
  padding: 4px 7px;
}

.permission-empty-card,
.permission-table .empty-cell {
  color: var(--muted);
  text-align: center;
}

.settings-schedule-page {
  display: grid;
  gap: 28px;
  position: relative;
}

.settings-toast {
  align-items: center;
  background: #effaf5;
  border: 1px solid #9ee6bc;
  border-radius: 12px;
  box-shadow: var(--shadow);
  color: #16824f;
  display: inline-flex;
  font-weight: 750;
  gap: 10px;
  justify-self: center;
  min-height: 44px;
  padding: 0 18px;
  position: sticky;
  top: 12px;
  z-index: 5;
}

.settings-toast span {
  background: #24d866;
  border-radius: 999px;
  height: 9px;
  width: 9px;
}

.settings-toast a {
  color: #16824f;
  text-decoration: none;
}

.schedule-panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow);
  overflow: hidden;
}

.schedule-panel > header {
  border-bottom: 1px solid var(--line);
  font-size: 16px;
  font-weight: 750;
  min-height: 58px;
  padding: 20px 24px;
}

.weekly-schedule-list {
  padding: 18px 24px 8px;
}

.weekly-schedule-row {
  align-items: center;
  border-bottom: 1px solid rgba(230, 232, 240, 0.74);
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(180px, 1fr) auto 28px;
  min-height: 54px;
}

.weekly-schedule-row:last-child {
  border-bottom: 0;
}

.schedule-toggle {
  align-items: center;
  display: inline-grid !important;
  gap: 12px;
  grid-template-columns: 28px auto;
}

.schedule-toggle input {
  display: none;
}

.schedule-toggle span {
  background: #d7d9df;
  border-radius: 999px;
  height: 16px;
  position: relative;
  width: 28px;
}

.schedule-toggle span::after {
  background: #fff;
  border-radius: 999px;
  content: "";
  height: 10px;
  left: 3px;
  position: absolute;
  top: 3px;
  transition: transform 0.16s ease;
  width: 10px;
}

.schedule-toggle input:checked + span {
  background: var(--blue);
}

.schedule-toggle input:checked + span::after {
  transform: translateX(12px);
}

.schedule-toggle strong {
  color: var(--text);
  font-weight: 700;
}

.schedule-toggle input:not(:checked) ~ strong {
  color: #e24d55;
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

.schedule-time-summary {
  color: #7d8799;
  font-size: 13px;
}

.schedule-edit-button {
  background: transparent;
  border: 0;
  color: var(--blue);
  cursor: pointer;
  font-size: 16px;
}

.schedule-time-editor {
  grid-column: 1 / -1;
  padding: 0 0 16px 0;
}

.schedule-time-editor[hidden] {
  display: none;
}

.schedule-periods {
  border-top: 1px solid rgba(230, 232, 240, 0.74);
}

.schedule-period {
  position: relative;
}

.schedule-period + .schedule-period {
  border-top: 1px solid rgba(230, 232, 240, 0.74);
  margin-top: 12px;
  padding-top: 10px;
}

.schedule-remove-period {
  align-items: center;
  background: #fff;
  border: 1px solid #ff9aa2;
  border-radius: 999px;
  color: #ff6b78;
  cursor: pointer;
  display: inline-flex;
  font-size: 16px;
  height: 18px;
  justify-content: center;
  left: -10px;
  padding: 0;
  position: absolute;
  top: 42px;
  width: 18px;
  z-index: 1;
}

.schedule-time-row {
  align-items: center;
  border-bottom: 1px solid rgba(230, 232, 240, 0.74);
  display: grid;
  grid-template-columns: 1fr auto;
  min-height: 46px;
}

.schedule-time-row > span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 750;
}

.schedule-time-control {
  align-items: center;
  display: grid;
  gap: 8px;
  grid-template-columns: 80px auto;
  justify-content: flex-end;
  min-width: 0;
}

.schedule-time-control input {
  background: #f1f3f8;
  border: 1px solid transparent;
  border-radius: 14px;
  color: #4b5568;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  height: 32px;
  min-width: 0;
  outline: 0;
  padding: 0 10px;
  text-align: center;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
  width: 80px;
}

.schedule-time-control input::-webkit-calendar-picker-indicator {
  display: none;
}

.schedule-time-control input:focus {
  background: #fff;
  border-color: #93c5fd;
  box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.32);
}

.ampm-toggle {
  background: #edf1f8;
  border-radius: 999px;
  display: inline-flex;
  gap: 2px;
  padding: 2px;
}

.ampm-toggle button {
  align-items: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 999px;
  color: #8c96a8;
  cursor: pointer;
  display: inline-flex;
  font-size: 12px;
  font-style: normal;
  height: 24px;
  justify-content: center;
  min-width: 28px;
  outline: 0;
  padding: 0 7px;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, color 0.16s ease, background 0.16s ease;
}

.ampm-toggle button.active {
  background: #fff;
  border-color: var(--blue);
  color: var(--blue);
}

.ampm-toggle button:focus-visible {
  border-color: #93c5fd;
  box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.32);
}

.schedule-add-period {
  background: #fff;
  border: 1px dashed #d3d8e4;
  border-radius: 14px;
  color: var(--muted);
  cursor: pointer;
  font-weight: 700;
  margin-top: 12px;
  min-height: 40px;
  text-align: left;
  padding: 0 14px;
  width: 100%;
}

.schedule-panel-footer {
  display: flex;
  justify-content: flex-end;
  padding: 12px 24px 24px;
}

.schedule-panel-footer .primary-button {
  border-radius: 14px;
}

.schedule-empty-card {
  align-items: center;
  border: 2px dashed #d9deea;
  border-radius: 14px;
  color: #3f4656;
  display: inline-grid;
  font-weight: 700;
  gap: 10px;
  height: 112px;
  justify-items: center;
  margin: 28px;
  width: 130px;
}

.schedule-empty-card span {
  align-items: center;
  background: var(--blue);
  border-radius: 999px;
  color: #fff;
  display: inline-flex;
  font-size: 20px;
  height: 30px;
  justify-content: center;
  width: 30px;
}

.switch-line {
  align-items: start;
  color: var(--muted);
  display: grid !important;
  gap: 2px 10px;
  grid-template-columns: 24px minmax(0, 1fr);
}

.switch-line.single {
  align-items: center;
}

.switch-line input {
  display: none;
}

.switch-line > span {
  background: #d7d9df;
  border-radius: 999px;
  height: 14px;
  margin-top: 2px;
  position: relative;
  width: 24px;
}

.switch-line > span::after {
  background: #fff;
  border-radius: 999px;
  content: "";
  height: 10px;
  left: 2px;
  position: absolute;
  top: 2px;
  transition: transform 0.16s ease;
  width: 10px;
}

.switch-line input:checked + span {
  background: var(--blue);
}

.switch-line input:checked + span::after {
  transform: translateX(10px);
}

.switch-line strong {
  color: var(--text);
  font-size: 14px;
  font-weight: 700;
}

.switch-line em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  grid-column: 2;
}

.latepoint-calendar {
  display: grid;
  gap: 18px;
}

.calendar-hero {
  align-items: end;
  display: flex;
  justify-content: space-between;
  min-height: 68px;
}

.calendar-hero h2 {
  font-size: 30px;
  font-weight: 700;
  margin: 0;
  position: relative;
  z-index: 1;
}

.calendar-year {
  color: rgba(37, 42, 62, 0.055);
  display: block;
  font-size: 66px;
  font-weight: 750;
  height: 38px;
  line-height: 0.72;
}

.calendar-controls {
  align-items: center;
  display: flex;
  gap: 8px;
}

.today-button,
.icon-button,
.view-switch {
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: 0 8px 22px rgba(37, 42, 62, 0.05);
}

.today-button {
  align-items: center;
  border-radius: 999px;
  color: var(--text);
  display: inline-flex;
  gap: 8px;
  min-height: 38px;
  padding: 0 14px;
}

.today-button span {
  background: #ff6673;
  border-radius: 999px;
  height: 7px;
  width: 7px;
}

.icon-button {
  border-radius: 999px;
  color: var(--text);
  height: 38px;
  width: 38px;
}

.view-switch {
  border-radius: 999px;
  display: inline-flex;
  padding: 4px;
}

.view-switch button {
  background: transparent;
  border: 0;
  border-radius: 999px;
  color: var(--muted);
  cursor: pointer;
  min-height: 30px;
  padding: 0 12px;
}

.view-switch button.active {
  background: #fff;
  border: 1px solid var(--line);
  color: var(--text);
}

.month-strip {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow);
  display: grid;
  overflow-x: auto;
}

.month-row {
  display: grid;
  grid-template-columns: repeat(16, minmax(72px, 1fr));
  min-width: 1152px;
}

.month-row + .month-row {
  border-top: 1px solid var(--line);
}

.month-day {
  border-left: 1px solid var(--line);
  color: inherit;
  display: grid;
  gap: 6px;
  min-height: 56px;
  padding: 10px 8px 8px;
  position: relative;
  text-decoration: none;
}

.month-row .month-day:first-child {
  border-left: 0;
}

.month-day span {
  color: #c0c5d1;
  font-size: 12px;
}

.month-day strong {
  color: var(--muted);
  font-size: 14px;
  font-weight: 650;
}

.month-day-bars {
  align-self: end;
  height: 7px;
  position: relative;
  width: 100%;
}

.month-day-bars i {
  border-radius: 999px;
  bottom: 0;
  display: block;
  height: 7px;
  min-width: 8px;
  position: absolute;
}

.month-day.weekend {
  background: rgba(37, 42, 62, 0.035);
}

.month-day.blank {
  background: rgba(37, 42, 62, 0.025);
  pointer-events: none;
}

.month-day.selected {
  border: 2px solid var(--blue);
  border-radius: 10px;
  margin: -1px;
  position: relative;
  z-index: 1;
}

.month-day.selected::after {
  background: #ff6673;
  border-radius: 999px;
  content: "";
  height: 7px;
  position: absolute;
  right: 8px;
  top: 8px;
  width: 7px;
}

.day-board {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow);
  overflow: hidden;
}

.resource-row {
  border-bottom: 1px solid var(--line);
  display: grid;
  grid-template-columns: 56px repeat(var(--resource-count), minmax(160px, 1fr));
  min-height: 54px;
}

.resource-name {
  align-items: center;
  display: inline-flex;
  gap: 10px;
  justify-content: center;
}

.resource-avatar {
  align-items: center;
  background: #d9deea;
  border-radius: 999px;
  color: #667087;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 10px;
  font-weight: 800;
  height: 28px;
  justify-content: center;
  overflow: hidden;
  width: 28px;
}

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

.resource-name strong {
  font-size: 13px;
  text-decoration: underline;
}

.timeline {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
}

.time-column {
  border-right: 1px solid var(--line);
}

.time-slot {
  align-items: start;
  color: var(--muted);
  display: flex;
  font-size: 12px;
  height: 58px;
  justify-content: end;
  padding: 8px 8px 0 0;
}

.timeline-grid {
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(37, 42, 62, 0.018) 0,
    rgba(37, 42, 62, 0.018) 2px,
    transparent 2px,
    transparent 6px
  );
  display: grid;
  grid-template-columns: repeat(var(--resource-count), minmax(160px, 1fr));
  min-height: calc(var(--timeline-hour-count) * 58px);
  position: relative;
}

.hour-line {
  border-bottom: 1px solid rgba(230, 232, 240, 0.72);
  grid-column: 1 / -1;
  height: 58px;
}

.calendar-event {
  background: #2d55e7;
  border-radius: 8px;
  box-sizing: border-box;
  color: #fff;
  margin-inline: 6px;
  overflow: hidden;
  padding: 10px 12px;
  position: absolute;
  z-index: 2;
}

.calendar-event strong {
  display: block;
  font-size: 14px;
}

.calendar-event span,
.calendar-event em {
  color: rgba(255, 255, 255, 0.86);
  display: block;
  font-size: 12px;
  font-style: normal;
  margin-top: 2px;
}

.calendar-empty-state {
  align-self: start;
  color: var(--muted);
  grid-column: 1 / -1;
  justify-self: center;
  padding-top: 90px;
  text-align: center;
}

.calendar-empty-state strong {
  color: var(--text);
  display: block;
  margin-bottom: 6px;
}

.dashboard-page {
  display: grid;
  gap: 28px;
}

.dashboard-top-grid {
  --dashboard-top-gap: 28px;
  --performance-panel-basis: calc(66.666% - 50px);
  --upcoming-panel-basis: calc(33.333% + 50px);
  align-items: start;
  display: grid;
  gap: var(--dashboard-top-gap);
  grid-template-columns: minmax(0, calc(var(--performance-panel-basis) - 19px)) minmax(360px, calc(var(--upcoming-panel-basis) - 9px));
}

.dashboard-panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow);
  overflow: hidden;
}

.dashboard-panel-head {
  align-items: start;
  display: flex;
  justify-content: space-between;
  padding: 24px 28px 14px;
}

.dashboard-panel h2 {
  font-size: 24px;
  font-weight: 700;
  margin: 0 0 14px;
}

.dashboard-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.dashboard-filters button,
.preview-switch {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: 0 8px 18px rgba(37, 42, 62, 0.04);
}

.dashboard-filters button {
  align-items: center;
  color: #4f586d;
  cursor: pointer;
  display: inline-flex;
  gap: 8px;
  justify-content: center;
  min-height: 34px;
  padding: 0 14px;
}

.dashboard-filters.compact button {
  font-size: 13px;
}

.filter-chevron {
  border-bottom: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  display: inline-block;
  height: 7px;
  margin-top: -3px;
  opacity: 0.72;
  transform: rotate(45deg);
  width: 7px;
}

.day-preview-date-picker,
.day-preview-service-picker {
  position: relative;
}

.day-preview-calendar {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 19px;
  box-shadow: 0 28px 70px rgba(37, 42, 62, 0.22);
  left: -68px;
  padding: 22px 24px 24px;
  position: absolute;
  top: calc(100% + 10px);
  width: 320px;
  z-index: 40;
}

.day-preview-calendar[hidden] {
  display: none;
}

.day-preview-calendar-head {
  align-items: center;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) 32px;
  margin-bottom: 18px;
}

.day-preview-calendar-head a {
  align-items: center;
  color: var(--text);
  display: inline-flex;
  font-size: 26px;
  font-weight: 700;
  height: 32px;
  justify-content: center;
  text-decoration: none;
}

.day-preview-calendar-head strong {
  color: #303644;
  font-size: 17px;
  font-weight: 650;
  text-align: center;
}

.day-preview-calendar-weekdays,
.day-preview-calendar-grid {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(7, 1fr);
}

.day-preview-calendar-weekdays {
  color: var(--blue);
  font-size: 11px;
  font-weight: 750;
  margin-bottom: 8px;
  text-align: center;
}

.day-preview-calendar-grid a {
  align-items: center;
  border-radius: 999px;
  color: #4f586d;
  display: inline-flex;
  font-size: 15px;
  height: 30px;
  justify-content: center;
  justify-self: center;
  text-decoration: none;
  width: 30px;
}

.day-preview-calendar-grid a:hover {
  background: #eef4ff;
  color: var(--blue);
}

.day-preview-calendar-grid a.is-muted {
  color: #a4acbb;
}

.day-preview-calendar-grid a.is-today {
  box-shadow: inset 0 0 0 1px rgba(47, 128, 255, 0.36);
}

.day-preview-calendar-grid a.is-selected {
  background: var(--blue);
  color: #fff;
  font-weight: 750;
}

.day-preview-service-menu {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 22px 54px rgba(37, 42, 62, 0.18);
  display: grid;
  gap: 2px;
  left: 0;
  min-width: 176px;
  padding: 8px;
  position: absolute;
  top: calc(100% + 8px);
  z-index: 42;
}

.day-preview-service-menu[hidden] {
  display: none;
}

.day-preview-service-menu a {
  border-radius: 11px;
  color: #4f586d;
  display: block;
  font-size: 14px;
  line-height: 1.3;
  padding: 9px 11px;
  text-decoration: none;
  white-space: nowrap;
}

.day-preview-service-menu a:hover,
.day-preview-service-menu a.is-selected {
  background: #eef4ff;
  color: var(--blue);
}

.performance-metrics {
  border-top: 1px solid rgba(230, 232, 240, 0.72);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding: 22px 28px 0;
}

.performance-metric {
  min-height: 58px;
  position: relative;
}

.performance-metric strong {
  color: var(--text);
  font-size: 20px;
  font-weight: 650;
}

.performance-metric em {
  color: #19b38a;
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
  margin-left: 4px;
}

.performance-metric span {
  color: var(--muted);
  display: block;
  font-size: 13px;
  margin-top: 2px;
}

.performance-metric i {
  align-items: center;
  background: #edf0f6;
  border-radius: 999px;
  color: #aab2c2;
  display: inline-flex;
  font-size: 10px;
  font-style: normal;
  height: 14px;
  justify-content: center;
  position: absolute;
  right: 16px;
  top: 4px;
  width: 14px;
}

.performance-chart {
  height: 210px;
  padding: 0 28px 24px;
  position: relative;
}

.performance-chart svg {
  display: block;
  height: 174px;
  overflow: visible;
  width: 100%;
}

.chart-guide {
  stroke: #d7dce7;
  stroke-dasharray: 1 2;
  stroke-width: 0.2;
}

.chart-line {
  fill: none;
  stroke: var(--blue);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.2;
}

.chart-labels {
  color: var(--muted);
  display: grid;
  font-size: 11px;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  margin-top: -8px;
}

.chart-labels span {
  text-align: center;
}

.upcoming-panel {
  min-height: 410px;
}

.upcoming-panel .dashboard-panel-head {
  padding-bottom: 18px;
}

.upcoming-card-list {
  border-top: 1px solid rgba(230, 232, 240, 0.78);
  display: grid;
}

.upcoming-card-item {
  align-items: center;
  border-top: 1px solid rgba(230, 232, 240, 0.78);
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) 18px;
  min-height: 122px;
  padding: 20px 28px;
}

.upcoming-card-item:first-child {
  border-top: 0;
}

.upcoming-avatar {
  background: #dfe4f0;
  border-radius: 999px;
  display: block;
  height: 44px;
  position: relative;
  width: 44px;
}

.upcoming-avatar::before {
  background: #c9cfde;
  border-radius: 999px;
  content: "";
  height: 18px;
  left: 13px;
  position: absolute;
  top: 8px;
  width: 18px;
}

.upcoming-avatar::after {
  background: #c9cfde;
  border-radius: 50% 50% 45% 45%;
  bottom: 6px;
  content: "";
  height: 16px;
  left: 8px;
  position: absolute;
  width: 28px;
}

.upcoming-card-main {
  min-width: 0;
}

.upcoming-card-main strong,
.upcoming-card-main span,
.upcoming-card-main em {
  display: block;
}

.upcoming-card-main em {
  color: #cc6268;
  font-size: 13px;
  font-style: normal;
  line-height: 1.35;
  margin-bottom: 3px;
}

.upcoming-card-main strong {
  color: var(--text);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.upcoming-card-main span {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.4;
  margin-top: 2px;
}

.upcoming-status-dot {
  background: #6682ea;
  border-radius: 999px;
  display: block;
  height: 14px;
  justify-self: end;
  width: 14px;
}

.upcoming-empty {
  align-items: center;
  color: var(--muted);
  display: grid;
  justify-items: center;
  min-height: 150px;
  padding: 12px 28px 28px;
  text-align: center;
}

.empty-icon {
  border: 3px solid #dbe1ef;
  border-radius: 7px;
  display: block;
  height: 26px;
  margin-bottom: 14px;
  position: relative;
  width: 32px;
}

.empty-icon::before {
  background: #dbe1ef;
  border-radius: 999px;
  content: "";
  height: 8px;
  left: 8px;
  position: absolute;
  top: -7px;
  width: 12px;
}

.upcoming-empty strong {
  font-size: 14px;
  margin-bottom: 10px;
}

.upcoming-empty a {
  color: var(--blue);
  font-weight: 750;
}

.day-preview-panel {
  min-height: 260px;
  overflow: visible;
}

.day-preview-panel .dashboard-panel-head {
  position: relative;
  z-index: 30;
}

.preview-switch {
  display: inline-flex;
  padding: 4px;
}

.preview-switch a,
.preview-switch button {
  background: transparent;
  border: 0;
  border-radius: 999px;
  color: var(--muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 14px;
  text-decoration: none;
}

.preview-switch a.active,
.preview-switch button.active {
  background: #fff;
  border: 1px solid #404552;
  color: var(--text);
}

.day-preview-track {
  border-top: 1px solid rgba(230, 232, 240, 0.72);
  display: grid;
  gap: 8px 18px;
  grid-template-columns: 58px minmax(0, 1fr);
  min-height: 190px;
  padding: 24px 28px 30px;
}

.preview-time-spacer {
  min-height: 38px;
}

.day-preview-agent-list {
  display: grid;
  gap: 8px;
  grid-column: 1 / -1;
  position: relative;
}

.preview-hours {
  color: var(--muted);
  font-size: 11px;
  height: 38px;
  position: relative;
}

.preview-hours span {
  line-height: 1.08;
  position: absolute;
  text-align: center;
  top: 0;
  transform: translateX(-50%);
}

.preview-hours strong,
.preview-hours small {
  display: block;
  font-weight: 650;
}

.preview-hours small {
  font-size: 10px;
  letter-spacing: 0;
  text-transform: uppercase;
}

.day-preview-agent-row {
  align-items: center;
  display: grid;
  gap: 18px;
  grid-template-columns: 58px minmax(0, 1fr);
  min-height: 62px;
}

.preview-agent-cell {
  align-items: center;
  display: flex;
  justify-content: center;
}

.preview-agent-avatar {
  align-items: center;
  background: #dfe4f0;
  border-radius: 999px;
  color: #667087;
  display: inline-flex;
  font-size: 12px;
  font-weight: 800;
  height: 44px;
  justify-content: center;
  overflow: hidden;
  width: 44px;
}

.preview-agent-avatar img {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.preview-ruler {
  background-image: repeating-linear-gradient(
    90deg,
    rgba(37, 42, 62, 0.08) 0,
    rgba(37, 42, 62, 0.08) 1px,
    transparent 1px,
    transparent 5px
  );
  border-radius: 12px;
  height: 58px;
  overflow: visible;
  position: relative;
}

.day-preview-mode-content[hidden] {
  display: none;
}

.preview-ruler > i {
  border-left: 1px solid rgba(230, 232, 240, 0.85);
  display: block;
  height: 100%;
  position: absolute;
  top: 0;
  width: 1px;
}

.preview-ruler > i:nth-of-type(1) { left: 0%; }
.preview-ruler > i:nth-of-type(2) { left: 7.69%; }
.preview-ruler > i:nth-of-type(3) { left: 15.38%; }
.preview-ruler > i:nth-of-type(4) { left: 23.07%; }
.preview-ruler > i:nth-of-type(5) { left: 30.76%; }
.preview-ruler > i:nth-of-type(6) { left: 38.45%; }
.preview-ruler > i:nth-of-type(7) { left: 46.14%; }
.preview-ruler > i:nth-of-type(8) { left: 53.83%; }
.preview-ruler > i:nth-of-type(9) { left: 61.52%; }
.preview-ruler > i:nth-of-type(10) { left: 69.21%; }
.preview-ruler > i:nth-of-type(11) { left: 76.9%; }
.preview-ruler > i:nth-of-type(12) { left: 84.59%; }
.preview-ruler > i:nth-of-type(13) { left: 92.28%; }
.preview-ruler > i:nth-of-type(14) { left: 100%; }

.preview-now {
  bottom: 0;
  left: 76px;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 3;
}

.day-preview-agent-list .preview-now::before {
  background: #ff6673;
  bottom: 0;
  content: "";
  left: var(--preview-now-position);
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  width: 2px;
}

.preview-now span {
  background: #ff6673;
  border-radius: 5px;
  color: #fff;
  font-size: 11px;
  font-weight: 750;
  left: var(--preview-now-position);
  padding: 3px 6px;
  position: absolute;
  top: -22px;
  transform: translateX(-50%);
  white-space: nowrap;
}

.preview-booking {
  background: #2d55e7;
  border-radius: 999px;
  box-shadow: 0 12px 24px rgba(45, 85, 231, 0.22);
  color: #fff;
  min-width: 72px;
  overflow: hidden;
  padding: 6px 12px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
}

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

.preview-booking strong {
  font-size: 12px;
}

.preview-booking span {
  color: rgba(255, 255, 255, 0.86);
  font-size: 11px;
  margin-top: 2px;
}

.preview-availability-slot {
  background: #1f78ff;
  border: 0;
  border-left: 1px solid rgba(255, 255, 255, 0.78);
  border-radius: 0;
  box-shadow: 0 8px 16px rgba(31, 120, 255, 0.16);
  cursor: pointer;
  height: 14px;
  min-width: 8px;
  padding: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
}

.preview-availability-slot:hover,
.preview-availability-slot:focus-visible {
  background: #1fbf68;
  box-shadow: 0 10px 20px rgba(31, 191, 104, 0.22);
  outline: 0;
  z-index: 4;
}

.preview-availability-tooltip {
  background: #15161a;
  border-radius: 12px;
  bottom: calc(100% + 10px);
  box-shadow: 0 14px 32px rgba(20, 22, 28, 0.24);
  color: #fff;
  display: grid;
  gap: 2px;
  left: 50%;
  min-width: 104px;
  opacity: 0;
  padding: 9px 12px;
  pointer-events: none;
  position: absolute;
  text-align: left;
  transform: translateX(-50%) translateY(4px);
  transition: opacity 0.16s ease, transform 0.16s ease;
  visibility: hidden;
  white-space: nowrap;
}

.preview-availability-tooltip::after {
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 7px solid #15161a;
  content: "";
  left: 50%;
  position: absolute;
  top: 100%;
  transform: translateX(-50%);
}

.preview-availability-tooltip em,
.preview-availability-tooltip strong {
  display: block;
  font-style: normal;
  line-height: 1.08;
}

.preview-availability-tooltip em {
  color: rgba(255, 255, 255, 0.68);
  font-size: 12px;
}

.preview-availability-tooltip strong {
  color: #fff;
  font-size: 18px;
  font-weight: 780;
}

.preview-availability-slot:hover .preview-availability-tooltip,
.preview-availability-slot:focus-visible .preview-availability-tooltip {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  visibility: visible;
}

.day-preview-empty {
  align-items: center;
  color: var(--muted);
  display: flex;
  grid-column: 1 / -1;
  min-height: 92px;
}

.customers-page {
  display: grid;
}

.customers-panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow);
  overflow: hidden;
}

.customers-head {
  align-items: center;
  background-image: radial-gradient(#dfe4ef 1px, transparent 1px);
  background-position: right 12px top 12px;
  background-size: 18px 18px;
  display: flex;
  justify-content: space-between;
  min-height: 112px;
  padding: 24px 28px;
}

.customers-head h1 {
  font-size: 30px;
  margin: 0;
}

.customers-head p {
  color: var(--muted);
  margin: 8px 0 0;
}

.customers-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.customers-actions button {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: 0 8px 18px rgba(37, 42, 62, 0.04);
  color: #3e4658;
  cursor: pointer;
  font-weight: 700;
  min-height: 34px;
  padding: 0 14px;
}

.customers-table-wrap {
  overflow-x: auto;
}

.customers-table {
  table-layout: fixed;
  min-width: 1360px;
}

.customer-col-id {
  width: 70px;
}

.customer-col-name {
  width: 170px;
}

.customer-col-phone {
  width: 160px;
}

.customer-col-wechat {
  width: 200px;
}

.customer-col-total {
  width: 100px;
}

.customers-table th {
  color: #767f91;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-align: center;
  text-transform: uppercase;
}

.customers-table td,
.customers-table th {
  border-right: 1px solid var(--line);
}

.customers-table td:last-child,
.customers-table th:last-child {
  border-right: 0;
}

.customers-table td {
  color: #4d5668;
  height: 28px;
}

.customers-table tbody td {
  font-size: 14px;
  line-height: 1.25;
}

.customers-table .numeric {
  color: #8d95a6;
  text-align: right;
}

.customer-filter-row input,
.customer-filter-row button {
  background: #fff;
  border: 1px solid #dfe3ed;
  border-radius: 999px;
  color: var(--text);
  min-height: 28px;
  padding: 0 10px;
  width: 100%;
}

.customer-filter-row button {
  color: var(--muted);
  cursor: pointer;
  text-align: left;
}

.customer-name {
  align-items: center;
  color: var(--blue);
  display: inline-flex;
  font-weight: 700;
  gap: 8px;
  text-decoration: underline;
}

.customer-avatar {
  background:
    radial-gradient(circle at 50% 32%, #d5dae7 0 24%, transparent 25%),
    radial-gradient(circle at 50% 88%, #d5dae7 0 35%, transparent 36%);
  display: inline-block;
  height: 24px;
  width: 18px;
}

.customers-empty {
  color: var(--muted);
  height: 90px;
  text-align: center;
}

.customers-footer {
  align-items: center;
  color: var(--muted);
  display: flex;
  justify-content: space-between;
  min-height: 96px;
  padding: 0 28px;
}

.customers-footer label {
  align-items: center;
  display: inline-flex;
  gap: 8px;
}

.customers-footer select {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  min-height: 38px;
  padding: 0 12px;
}

.activity-log-page {
  display: grid;
  gap: 34px;
}

.activity-log-hero h1 {
  color: var(--text);
  font-size: 34px;
  font-weight: 750;
  margin: 0 0 20px;
}

.activity-log-tabs {
  align-items: center;
  border-bottom: 1px solid rgba(230, 232, 240, 0.78);
  display: flex;
  gap: 28px;
}

.activity-log-tabs a,
.activity-log-tabs span {
  color: #788196;
  font-size: 18px;
  font-weight: 650;
  padding: 0 0 13px;
  position: relative;
  text-decoration: none;
}

.activity-log-tabs .active {
  color: #151926;
}

.activity-log-tabs .active::after {
  background: linear-gradient(90deg, #7a42f4, #ffb287);
  border-radius: 999px;
  bottom: -1px;
  content: "";
  height: 3px;
  left: 0;
  position: absolute;
  right: 0;
}

.activity-log-table-card {
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow);
  overflow: hidden;
}

.activity-log-card-head {
  align-items: center;
  background-image: radial-gradient(#dfe4ef 1px, transparent 1px);
  background-position: right 12px top 12px;
  background-size: 18px 18px;
  display: flex;
  justify-content: space-between;
  min-height: 100px;
  padding: 24px 28px;
}

.activity-log-card-head p {
  color: #a4a9b5;
  font-size: 16px;
  margin: 0;
}

.activity-log-actions {
  display: inline-flex;
  gap: 12px;
}

.activity-log-actions form {
  margin: 0;
}

.activity-log-actions button {
  align-items: center;
  background: #fff;
  border: 1px solid var(--blue);
  border-radius: 999px;
  color: var(--blue);
  cursor: pointer;
  display: inline-flex;
  font-size: 14px;
  font-weight: 700;
  gap: 7px;
  min-height: 34px;
  padding: 0 13px;
}

.activity-log-actions button.danger {
  border-color: #ff7f83;
  color: #e24d55;
}

.activity-log-actions svg {
  fill: none;
  height: 16px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
  width: 16px;
}

.activity-log-filter-form {
  margin: 0;
}

.activity-log-table-wrap {
  overflow-x: auto;
}

.activity-log-table {
  min-width: 980px;
  table-layout: fixed;
}

.activity-log-table th,
.activity-log-table td {
  border-right: 1px solid #dde0e9;
  color: #303647;
  font-size: 14px;
  padding: 11px 14px;
  vertical-align: middle;
}

.activity-log-table th:last-child,
.activity-log-table td:last-child {
  border-right: 0;
}

.activity-log-table th {
  color: #222737;
  font-size: 12px;
  font-weight: 750;
  height: 38px;
  letter-spacing: 0.12em;
  text-align: center;
}

.activity-log-table tbody td {
  height: 44px;
}

.activity-log-col-type {
  width: 40%;
}

.activity-log-col-actor {
  width: 33%;
}

.activity-log-col-date {
  width: 27%;
}

.activity-log-filter-row th {
  background: rgba(255, 255, 255, 0.48);
  padding: 10px 12px;
}

.activity-log-filter-row input,
.activity-log-filter-row select,
.activity-log-filter-row button {
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid #d7dce8;
  border-radius: 999px;
  color: #232838;
  font-size: 14px;
  height: 34px;
  max-width: 100%;
  padding: 0 12px;
  width: 100%;
}

.activity-log-filter-row button {
  color: #4c5568;
  cursor: pointer;
  margin-top: 8px;
}

.activity-log-type {
  color: var(--blue);
  display: inline-block;
  font-weight: 650;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.activity-log-type.is-order {
  color: #2563eb;
}

.activity-log-type.is-appointment {
  color: #7c3aed;
}

.activity-log-type.is-staff,
.activity-log-type.is-service {
  color: #0f766e;
}

.activity-log-entity {
  color: #9aa1ae;
  display: block;
  font-size: 12px;
  margin-top: 4px;
}

.activity-log-actor {
  align-items: center;
  display: inline-flex;
  gap: 10px;
  min-width: 0;
}

.activity-log-actor a {
  color: var(--blue);
  font-weight: 650;
  overflow: hidden;
  text-decoration: underline;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.activity-actor-avatar {
  background:
    radial-gradient(circle at 50% 32%, #c9ced8 0 25%, transparent 26%),
    radial-gradient(circle at 50% 87%, #c9ced8 0 37%, transparent 38%);
  display: inline-block;
  flex: 0 0 auto;
  height: 26px;
  width: 22px;
}

.activity-log-empty {
  color: var(--muted) !important;
  height: 84px !important;
  text-align: center;
}

.activity-log-footer {
  align-items: center;
  color: #a0a5b2;
  display: flex;
  font-size: 16px;
  justify-content: space-between;
  min-height: 96px;
  padding: 0 28px;
}

.activity-log-footer label {
  align-items: center;
  color: #343a4a;
  display: inline-flex;
  gap: 8px;
}

.activity-log-footer select {
  background: #fff;
  border: 1px solid #d7dce8;
  border-radius: 999px;
  min-height: 38px;
  padding: 0 14px;
}

.tasks-page,
.task-categories-page,
.task-items-page,
.task-history-page {
  display: grid;
  gap: 28px;
}

.task-tabs .active,
.task-tabs a:hover {
  color: #e5004f;
}

.task-tabs .active::after {
  background: #e5004f;
}

.task-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.task-action {
  align-items: center;
  background: #fff;
  border: 1px solid #f4b8c9;
  border-radius: 999px;
  color: #e5004f;
  display: inline-flex;
  font-weight: 750;
  min-height: 38px;
  padding: 0 16px;
  text-decoration: none;
}

.task-action.primary {
  background: #e5004f;
  border-color: #e5004f;
  color: #fff;
}

.task-items-head {
  align-items: center;
  display: flex;
  gap: 18px;
  justify-content: space-between;
}

.task-items-head h1,
.task-items-head p {
  margin: 0;
}

.task-items-head h1 {
  color: #252a3e;
  font-size: 30px;
}

.task-items-head p {
  color: #7b8497;
  margin-top: 6px;
}

.task-group-section {
  display: grid;
  gap: 18px;
}

.task-group-heading {
  align-items: center;
  display: flex;
  justify-content: space-between;
}

.task-group-heading span {
  color: #252a3e;
  font-size: 22px;
  font-weight: 750;
}

.task-group-heading em {
  color: #8a93a5;
  font-style: normal;
}

.task-card-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 320px));
  justify-content: start;
}

.task-card {
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid #eadfe4;
  border-radius: 18px;
  box-shadow: 0 18px 40px rgba(56, 36, 45, 0.07);
  color: #252a3e;
  display: grid;
  gap: 18px;
  min-height: 220px;
  padding: 18px;
  text-decoration: none;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.task-card:hover {
  border-color: #f4a9c1;
  box-shadow: 0 20px 42px rgba(229, 0, 79, 0.11);
  transform: translateY(-1px);
}

.task-card-title {
  align-items: start;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.task-card-title h2 {
  font-size: 18px;
  line-height: 1.25;
  margin: 0;
}

.task-card-details {
  display: grid;
  gap: 10px;
  margin: 0;
}

.task-card-details div {
  align-items: center;
  border-bottom: 1px solid #f0e5ea;
  display: flex;
  justify-content: space-between;
  min-height: 28px;
}

.task-card-details dt,
.task-card-details dd {
  margin: 0;
}

.task-card-details dt {
  color: #8a93a5;
}

.task-card-details dd {
  color: #303647;
  font-weight: 700;
  text-align: right;
}

.task-edit-button {
  align-items: center;
  background: #fde8ef;
  border-radius: 999px;
  color: #e5004f;
  display: inline-flex;
  font-weight: 750;
  justify-content: center;
  min-height: 38px;
  padding: 0 14px;
  text-decoration: none;
}

.task-edit-button.muted {
  color: #9a6878;
}

.new-task-card {
  align-items: center;
  border-style: dashed;
  justify-items: center;
  text-align: center;
}

.new-task-plus {
  align-items: center;
  background: #e5004f;
  border-radius: 999px;
  box-shadow: 0 0 0 14px #fde8ef;
  color: #fff;
  display: inline-flex;
  font-size: 28px;
  font-weight: 800;
  height: 44px;
  justify-content: center;
  width: 44px;
}

.task-category-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.task-category-card {
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid #eadfe4;
  border-radius: 18px;
  box-shadow: 0 18px 40px rgba(56, 36, 45, 0.07);
  display: grid;
  gap: 22px;
  padding: 22px;
}

.task-category-card header {
  align-items: center;
  display: grid;
  gap: 16px;
  grid-template-columns: 46px minmax(0, 1fr);
}

.task-category-card header > span {
  align-items: center;
  background: #fde8ef;
  border-radius: 999px;
  color: #e5004f;
  display: inline-flex;
  font-weight: 850;
  height: 46px;
  justify-content: center;
  width: 46px;
}

.task-category-card h2,
.task-category-card p,
.task-category-card dl {
  margin: 0;
}

.task-category-card p {
  color: #7b8497;
  margin-top: 5px;
}

.task-category-card dl {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.task-category-card dl div {
  background: #faf5f7;
  border-radius: 14px;
  padding: 14px;
}

.task-category-card dt,
.task-category-card dd {
  margin: 0;
}

.task-category-card dt {
  color: #8a93a5;
}

.task-category-card dd {
  color: #252a3e;
  font-size: 24px;
  font-weight: 780;
}

.task-category-card a {
  color: #e5004f;
  font-weight: 750;
}

.task-history-head {
  align-items: center;
  display: flex;
  gap: 18px;
  justify-content: space-between;
}

.task-history-head h1,
.task-history-head p {
  margin: 0;
}

.task-history-head h1 {
  color: #252a3e;
  font-size: 30px;
  font-weight: 760;
}

.task-history-head p {
  color: #7b8497;
  margin-top: 6px;
}

.task-history-range {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.task-history-range a {
  align-items: center;
  background: #fff;
  border: 1px solid #f4b8c9;
  border-radius: 999px;
  color: #e5004f;
  display: inline-flex;
  font-weight: 750;
  min-height: 36px;
  padding: 0 14px;
  text-decoration: none;
}

.task-history-range a.active {
  background: #e5004f;
  border-color: #e5004f;
  color: #fff;
}

.task-history-summary {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.task-history-summary article,
.task-history-day {
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid #eadfe4;
  border-radius: 18px;
  box-shadow: 0 18px 40px rgba(56, 36, 45, 0.06);
}

.task-history-summary article {
  display: grid;
  gap: 8px;
  min-height: 100px;
  padding: 18px;
}

.task-history-summary span,
.task-history-day header span,
.task-history-main span,
.task-history-row dt {
  color: #7b8497;
}

.task-history-summary strong {
  color: #252a3e;
  font-size: 30px;
  line-height: 1;
}

.task-history-list {
  display: grid;
  gap: 16px;
}

.task-history-day {
  display: grid;
  gap: 12px;
  padding: 18px;
}

.task-history-day > header {
  align-items: center;
  display: flex;
  justify-content: space-between;
}

.task-history-day h2 {
  color: #252a3e;
  font-size: 20px;
  margin: 0;
}

.task-history-day header b {
  color: #e5004f;
  font-size: 22px;
}

.task-history-row {
  align-items: center;
  background: #fff;
  border: 1px solid #f0e5ea;
  border-radius: 14px;
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(180px, 1fr) auto minmax(360px, 1.2fr);
  min-height: 72px;
  padding: 14px;
}

.task-history-main {
  display: grid;
  gap: 4px;
}

.task-history-main strong {
  color: #252a3e;
}

.task-history-status {
  background: #f0f1f7;
  border-radius: 999px;
  color: #7b8497;
  font-size: 12px;
  font-weight: 800;
  padding: 6px 10px;
  text-align: center;
  white-space: nowrap;
}

.task-history-status.submitted {
  background: #e9fbef;
  color: #0f9f6e;
}

.task-history-status.warning {
  background: #fde8ef;
  color: #e5004f;
}

.task-history-row dl {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
}

.task-history-row dl div {
  background: #faf5f7;
  border-radius: 12px;
  padding: 8px 10px;
}

.task-history-row dt,
.task-history-row dd {
  margin: 0;
}

.task-history-row dd {
  color: #303647;
  font-weight: 720;
  overflow-wrap: anywhere;
}

.task-history-empty {
  color: #8a93a5;
  margin: 0;
}

.task-editor {
  align-items: start;
  display: grid;
  gap: 26px;
  grid-template-columns: minmax(0, 1120px);
  max-width: 1120px;
}

.task-editor[data-task-editor-mode="temporary"] {
  grid-template-columns: minmax(0, 920px);
}

.task-editor [hidden] {
  display: none !important;
}

.task-editor-main {
  display: grid;
  gap: 22px;
  min-width: 0;
}

.task-editor-title {
  align-items: center;
  display: flex;
  justify-content: space-between;
}

.task-editor-title h1 {
  color: #252a3e;
  font-size: 32px;
  margin: 0;
}

.task-editor-title span {
  color: #e5004f;
  display: inline-block;
  margin-top: 6px;
}

.task-editor-panel {
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid #eadfe4;
  border-radius: 18px;
  box-shadow: 0 18px 40px rgba(56, 36, 45, 0.06);
  display: grid;
  gap: 20px;
  padding: 24px;
}

.task-editor-panel > header {
  color: #252a3e;
  font-size: 20px;
  font-weight: 760;
}

.task-item-panel-header {
  align-items: center;
  display: flex;
  justify-content: space-between;
}

.task-item-add-button {
  align-items: center;
  background: #e5004f;
  border: 0;
  border-radius: 50%;
  box-shadow: 0 10px 22px rgba(229, 0, 79, 0.2);
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 24px;
  font-weight: 700;
  height: 36px;
  justify-content: center;
  line-height: 1;
  padding: 0 0 3px;
  transition: background 0.18s ease, opacity 0.18s ease, transform 0.18s ease;
  width: 36px;
}

.task-item-add-button:hover,
.task-item-add-button:focus-visible {
  background: #c90045;
  transform: translateY(-1px);
}

.task-item-add-button:disabled {
  background: #ccd2df;
  box-shadow: none;
  cursor: not-allowed;
  opacity: 0.72;
  transform: none;
}

.task-form-grid {
  display: grid;
  gap: 18px;
}

.task-form-grid.two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.task-form-grid.three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.task-basic-grid {
  align-items: end;
  grid-template-columns: minmax(260px, 1.4fr) minmax(210px, 1fr) minmax(150px, 0.75fr) auto;
}

.task-quiz-grid {
  grid-template-columns: minmax(280px, 520px);
}

.task-cycle-grid {
  align-items: end;
  grid-template-columns: minmax(160px, 1fr) minmax(150px, 1fr) minmax(150px, 1fr) auto;
}

.task-delay-grid {
  align-items: end;
  grid-template-columns: minmax(150px, 1fr) minmax(150px, 1fr) auto;
}

.task-editor label,
.task-month-days {
  color: #8791a5;
  display: grid;
  gap: 8px;
  min-width: 0;
}

.task-editor input,
.task-editor select {
  background: #fff;
  border: 1px solid #e2d7dc;
  border-radius: 12px;
  color: #252a3e;
  min-height: 42px;
  padding: 0 12px;
  width: 100%;
}

.task-time-control {
  align-items: center;
  display: grid;
  position: relative;
}

.task-editor .task-time-select {
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  font-variant-numeric: tabular-nums;
  padding-right: 44px;
}

.task-time-select::-ms-expand {
  display: none;
}

.task-time-icon {
  fill: none;
  height: 20px;
  pointer-events: none;
  position: absolute;
  right: 14px;
  stroke: #0f172a;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.2;
  width: 20px;
}

.task-time-control:focus-within .task-time-icon {
  stroke: #e5004f;
}

.task-choice-row {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
}

.task-choice-row > span {
  color: #8791a5;
  width: 100%;
}

.task-choice-row label,
.task-switch {
  align-items: center;
  display: inline-flex;
  flex-direction: row;
  gap: 8px;
}

.task-choice-row input,
.task-switch input {
  height: 16px;
  min-height: 16px;
  width: 16px;
}

.task-inline-switch {
  align-items: center;
  align-self: end;
  color: #252a3e !important;
  display: inline-flex !important;
  flex-direction: row !important;
  gap: 10px !important;
  justify-content: flex-start;
  min-height: 42px;
  white-space: nowrap;
}

.task-next-day-toggle,
.task-delay-toggle,
.task-status-switch {
  justify-content: flex-start;
}

.task-status-switch {
  min-width: 112px !important;
}

.task-inline-switch input[type="hidden"] {
  display: none;
}

.task-inline-switch input[type="checkbox"] {
  height: 1px;
  min-height: 1px;
  opacity: 0;
  padding: 0;
  position: absolute;
  width: 1px;
}

.task-inline-switch span {
  background: #e6e8ef;
  border-radius: 999px;
  cursor: pointer;
  display: block;
  height: 30px;
  position: relative;
  transition: background 0.18s ease;
  width: 56px;
}

.task-inline-switch span::after {
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 3px 8px rgba(37, 42, 62, 0.18);
  content: "";
  height: 24px;
  left: 3px;
  position: absolute;
  top: 3px;
  transition: transform 0.18s ease, background 0.18s ease;
  width: 24px;
}

.task-inline-switch input[type="checkbox"]:checked + span {
  background: #f477a6;
}

.task-inline-switch input[type="checkbox"]:checked + span::after {
  background: #e5004f;
  transform: translateX(26px);
}

.task-inline-switch b {
  font-size: 14px;
  font-weight: 760;
}

.task-item-list {
  display: grid;
  gap: 10px;
}

.task-item-row {
  align-items: center;
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(220px, 1fr) 150px 72px 40px;
}

.task-item-enable-switch {
  align-items: center;
  display: inline-flex;
  justify-content: flex-end;
}

.task-item-delete-button {
  align-items: center;
  background: #fde8ef;
  border: 0;
  border-radius: 999px;
  color: #e5004f;
  cursor: pointer;
  display: inline-flex;
  font-size: 22px;
  font-weight: 760;
  height: 34px;
  justify-content: center;
  line-height: 1;
  transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
  width: 34px;
}

.task-item-delete-button:hover,
.task-item-delete-button:focus-visible {
  background: #e5004f;
  color: #fff;
  transform: translateY(-1px);
}

.task-item-delete-button:disabled {
  background: #f1edf0;
  color: #c8bec5;
  cursor: not-allowed;
  transform: none;
}

.task-item-enable-switch input[type="hidden"] {
  display: none;
}

.task-item-enable-switch input[type="checkbox"] {
  height: 1px;
  opacity: 0;
  position: absolute;
  width: 1px;
}

.task-item-enable-switch span {
  background: #e6e8ef;
  border-radius: 999px;
  cursor: pointer;
  display: block;
  height: 30px;
  position: relative;
  transition: background 0.18s ease;
  width: 56px;
}

.task-item-enable-switch span::after {
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 3px 8px rgba(37, 42, 62, 0.18);
  content: "";
  height: 24px;
  left: 3px;
  position: absolute;
  top: 3px;
  transition: transform 0.18s ease, background 0.18s ease;
  width: 24px;
}

.task-item-enable-switch input[type="checkbox"]:checked + span {
  background: #f477a6;
}

.task-item-enable-switch input[type="checkbox"]:checked + span::after {
  background: #e5004f;
  transform: translateX(26px);
}

.task-editor-side {
  display: grid;
  gap: 18px;
  position: sticky;
  top: 22px;
}

.kpi-page,
.kpi-rules-page {
  display: grid;
  gap: 26px;
}

.kpi-tabs .active,
.kpi-tabs a:hover {
  color: #e5004f;
}

.kpi-tabs .active::after {
  background: #e5004f;
}

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

.kpi-toolbar h1,
.kpi-toolbar p {
  margin: 0;
}

.kpi-toolbar h1 {
  color: #252a3e;
  font-size: 30px;
  font-weight: 760;
}

.kpi-toolbar p {
  color: #7b8497;
  margin-top: 6px;
}

.kpi-month-switch {
  align-items: center;
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.kpi-month-switch a,
.kpi-month-switch button,
.kpi-adjustment-panel button,
.kpi-event-actions button,
.kpi-rule-card button {
  align-items: center;
  background: #e5004f;
  border: 1px solid #e5004f;
  border-radius: 999px;
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  font-weight: 750;
  justify-content: center;
  min-height: 36px;
  padding: 0 14px;
  text-decoration: none;
}

.kpi-month-switch a {
  background: #fde8ef;
  color: #e5004f;
  font-size: 22px;
  min-width: 38px;
  padding: 0;
}

.kpi-month-switch form {
  align-items: center;
  display: inline-flex;
  gap: 8px;
}

.kpi-month-switch input,
.kpi-adjustment-panel input,
.kpi-adjustment-panel select,
.kpi-adjustment-panel textarea,
.kpi-event-actions input,
.kpi-rule-card input {
  background: #fff;
  border: 1px solid #eadfe4;
  border-radius: 12px;
  color: #252a3e;
  min-height: 38px;
  padding: 0 12px;
}

.kpi-summary-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.kpi-summary-card,
.kpi-employee-board,
.kpi-adjustment-panel,
.kpi-day-section,
.kpi-rule-card {
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid #eadfe4;
  border-radius: 18px;
  box-shadow: 0 18px 40px rgba(56, 36, 45, 0.06);
}

.kpi-summary-card {
  display: grid;
  gap: 6px;
  min-height: 118px;
  padding: 20px;
}

.kpi-summary-card span,
.kpi-summary-card em,
.kpi-employee-row span,
.kpi-day-heading span,
.kpi-day-employee-head span,
.kpi-event-main span,
.kpi-rule-card p,
.kpi-adjustment-panel label span {
  color: #7b8497;
}

.kpi-summary-card strong {
  color: #252a3e;
  font-size: 34px;
  font-weight: 800;
  line-height: 1;
}

.kpi-summary-card.positive strong,
.kpi-employee-row b.positive,
.kpi-day-heading b.positive,
.kpi-day-employee-head b.positive,
.kpi-rule-card b.positive {
  color: #0f9f6e;
}

.kpi-summary-card.negative strong,
.kpi-employee-row b.negative,
.kpi-day-heading b.negative,
.kpi-day-employee-head b.negative,
.kpi-rule-card b.negative {
  color: #e5004f;
}

.kpi-main-grid {
  align-items: start;
  display: grid;
  gap: 20px;
  grid-template-columns: minmax(0, 1fr) 340px;
}

.kpi-employee-board,
.kpi-adjustment-panel,
.kpi-day-list,
.kpi-rule-group {
  display: grid;
  gap: 16px;
}

.kpi-employee-board,
.kpi-adjustment-panel {
  padding: 22px;
}

.kpi-employee-board > header,
.kpi-adjustment-panel > header,
.kpi-day-list > header,
.kpi-rule-group-heading,
.kpi-rule-card header {
  align-items: center;
  display: flex;
  gap: 14px;
  justify-content: space-between;
}

.kpi-employee-board h2,
.kpi-adjustment-panel h2,
.kpi-day-list h2,
.kpi-rule-card h2 {
  color: #252a3e;
  font-size: 20px;
  margin: 0;
}

.kpi-employee-list,
.kpi-adjustment-panel form,
.kpi-rule-grid {
  display: grid;
  gap: 12px;
}

.kpi-employee-row {
  align-items: center;
  border: 1px solid #f0e5ea;
  border-radius: 16px;
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(140px, 1fr) auto minmax(220px, 0.9fr);
  min-height: 76px;
  padding: 14px 16px;
}

.kpi-employee-row strong,
.kpi-day-heading strong,
.kpi-day-employee-head strong,
.kpi-event-main strong,
.kpi-rule-group-heading strong {
  color: #252a3e;
}

.kpi-employee-row > b,
.kpi-day-heading > b,
.kpi-day-employee-head > b,
.kpi-rule-card b {
  font-size: 22px;
  font-weight: 800;
}

.kpi-employee-row dl {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
}

.kpi-employee-row dl div {
  background: #faf5f7;
  border-radius: 12px;
  padding: 8px 10px;
}

.kpi-employee-row dt,
.kpi-employee-row dd {
  margin: 0;
}

.kpi-employee-row dt {
  color: #8a93a5;
  font-size: 12px;
}

.kpi-employee-row dd {
  color: #303647;
  font-weight: 760;
}

.kpi-adjustment-panel label {
  display: grid;
  gap: 7px;
}

.kpi-adjustment-panel textarea {
  min-height: 74px;
  padding-top: 10px;
  resize: vertical;
}

.kpi-day-list > header p {
  color: #7b8497;
  margin: 4px 0 0;
}

.kpi-day-section {
  display: grid;
  gap: 14px;
  padding: 18px;
}

.kpi-day-heading,
.kpi-day-employee-head {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.kpi-day-employee {
  border-top: 1px solid #f0e5ea;
  display: grid;
  gap: 10px;
  padding-top: 14px;
}

.kpi-event-row {
  align-items: center;
  background: #fff;
  border: 1px solid #f0e5ea;
  border-radius: 14px;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(180px, 1fr) auto minmax(260px, auto);
  min-height: 62px;
  padding: 12px;
}

.kpi-event-row.negative {
  background: #fff8fa;
}

.kpi-event-main {
  display: grid;
  gap: 3px;
}

.kpi-event-main em {
  color: #8a6370;
  font-style: normal;
}

.kpi-event-row > b {
  color: #252a3e;
  font-size: 18px;
}

.kpi-event-actions,
.kpi-event-actions form {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.kpi-event-actions input {
  max-width: 150px;
}

.kpi-empty {
  color: #8a93a5;
  margin: 0;
}

.kpi-rule-group-heading {
  padding-top: 4px;
}

.kpi-rule-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
}

.kpi-rule-card {
  display: grid;
  gap: 16px;
  padding: 18px;
}

.kpi-rule-card header span {
  background: #f0f1f7;
  border-radius: 999px;
  color: #7b8497;
  font-size: 12px;
  font-weight: 800;
  padding: 5px 10px;
}

.kpi-rule-card header span.active {
  background: #fde8ef;
  color: #e5004f;
}

.kpi-rule-card form {
  align-items: end;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(100px, 1fr) auto auto;
}

.kpi-rule-card label {
  color: #7b8497;
  display: grid;
  gap: 6px;
}

.debug-page {
  display: grid;
  gap: 28px;
}

.debug-subtabs {
  margin-bottom: 0;
}

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

.debug-date-control {
  align-items: center;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid #dfe5f2;
  border-radius: 14px;
  box-shadow: 0 12px 28px rgba(37, 42, 62, 0.04);
  display: inline-flex;
  flex: 0 0 auto;
  gap: 10px;
  margin: 0;
  min-height: 48px;
  padding: 0 14px;
}

.debug-date-chevron {
  align-items: center;
  color: #b8c0cf;
  display: inline-flex;
  font-size: 20px;
  font-weight: 800;
  height: 30px;
  justify-content: center;
  line-height: 1;
  text-decoration: none;
  transition: background 0.16s ease, color 0.16s ease;
  width: 30px;
}

a.debug-date-chevron:hover,
a.debug-date-chevron:focus-visible {
  background: #fde8ef;
  border-radius: 10px;
  color: #e5004f;
  outline: 0;
}

.debug-date-chevron.disabled {
  color: #d4d9e4;
  cursor: not-allowed;
}

.debug-date-input-wrap {
  display: block;
}

.debug-date-input-wrap input {
  background: transparent;
  border: 0;
  color: #252a3e;
  font-size: 16px;
  font-weight: 760;
  height: 44px;
  min-width: 150px;
  outline: 0;
  padding: 0;
}

.debug-date-control:focus-within {
  border-color: rgba(229, 0, 79, 0.35);
  box-shadow: 0 0 0 4px rgba(229, 0, 79, 0.08);
}

.debug-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 320px));
}

.debug-action-card {
  align-content: start;
}

.debug-action-card.danger {
  background: #fff8fa;
  border-color: #f2b6c8;
}

.debug-action-card form {
  display: grid;
  gap: 14px;
  margin: 0;
}

.debug-scope-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
}

.debug-action-desc {
  color: #7b8497;
  font-size: 13px;
  line-height: 1.6;
  margin: -4px 0 0;
}

.debug-action-card label {
  color: #7b8497;
  display: grid;
  gap: 7px;
}

.debug-action-card input {
  background: #fff;
  border: 1px solid #eadfe4;
  border-radius: 12px;
  color: #252a3e;
  min-height: 42px;
  padding: 0 12px;
}

.debug-submit-button {
  border: 0;
  cursor: pointer;
  width: 100%;
}

.debug-heading-actions {
  align-items: center;
  display: inline-flex;
  gap: 10px;
}

.debug-refresh-button {
  align-items: center;
  background: #fde8ef;
  border: 1px solid rgba(229, 0, 79, 0.14);
  border-radius: 999px;
  color: #e5004f;
  display: inline-flex;
  height: 34px;
  justify-content: center;
  text-decoration: none;
  transition: background 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
  width: 34px;
}

.debug-refresh-button:hover {
  background: #ffd9e7;
  box-shadow: 0 10px 22px rgba(229, 0, 79, 0.14);
  transform: translateY(-1px);
}

.debug-refresh-button svg {
  fill: none;
  height: 18px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.2;
  width: 18px;
}

.debug-submitted-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 320px));
}

.debug-submitted-card {
  align-content: start;
}

.debug-submitted-card form {
  margin: 0;
}

.debug-empty-card {
  align-items: center;
  border-style: dashed;
  justify-items: center;
  text-align: center;
}

.debug-danger-pill {
  background: #fde8ef;
  color: #e5004f;
}

.debug-result-section {
  gap: 14px;
}

.debug-result-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 240px));
  justify-content: start;
}

.debug-result-card {
  display: grid;
  gap: 8px;
  min-height: 118px;
}

.debug-result-card span {
  color: #7b8497;
  font-weight: 650;
}

.debug-result-card strong {
  color: #252a3e;
  font-size: 24px;
  line-height: 1;
}

@media (max-width: 980px) {
  .task-history-head,
  .task-history-day > header {
    align-items: flex-start;
    display: grid;
  }

  .task-history-range {
    justify-content: flex-start;
  }

  .task-history-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .task-history-row {
    grid-template-columns: 1fr;
  }

  .task-history-row dl {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 980px) {
  .kpi-toolbar,
  .kpi-employee-board > header,
  .kpi-adjustment-panel > header,
  .kpi-day-list > header,
  .kpi-rule-group-heading {
    align-items: flex-start;
    display: grid;
    justify-content: initial;
  }

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

  .kpi-main-grid {
    grid-template-columns: 1fr;
  }

  .debug-grid {
    grid-template-columns: 1fr;
  }

  .debug-toolbar {
    align-items: flex-start;
    display: grid;
    justify-content: initial;
  }

  .debug-date-control {
    justify-self: start;
    max-width: 100%;
    width: min(100%, 280px);
  }

  .debug-date-input-wrap,
  .debug-date-input-wrap input {
    min-width: 0;
    width: 100%;
  }

  .kpi-employee-row,
  .kpi-event-row,
  .kpi-rule-card form {
    grid-template-columns: 1fr;
  }

  .kpi-event-actions,
  .kpi-event-actions form {
    justify-content: flex-start;
  }

  .task-basic-grid,
  .task-cycle-grid,
  .task-delay-grid {
    grid-template-columns: 1fr;
  }

  .task-assignment-options {
    grid-template-columns: 1fr;
  }

  .task-inline-switch {
    justify-content: flex-start;
  }
}

@media (max-width: 1180px) {
  .service-editor {
    grid-template-columns: 1fr;
  }

  .service-extra-editor-top {
    grid-template-columns: 1fr;
  }

  .settings-editor {
    grid-template-columns: 1fr;
  }

  .service-editor-side,
  .settings-editor-side {
    position: static;
  }

  .dashboard-top-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .admin-shell {
    grid-template-columns: 1fr;
  }

  .admin-shell.sidebar-collapsed {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: static;
  }

  .admin-shell.sidebar-collapsed .sidebar {
    padding: 18px 12px;
  }

  .admin-shell.sidebar-collapsed .sidebar-head {
    align-items: center;
    display: flex;
    justify-items: initial;
  }

  .admin-shell.sidebar-collapsed .brand-text,
  .admin-shell.sidebar-collapsed .nav-label {
    opacity: 1;
    pointer-events: auto;
    width: auto;
  }

  .admin-shell.sidebar-collapsed .brand-mark {
    display: none;
  }

  .admin-shell.sidebar-collapsed .nav-subnav-chevron {
    display: inline;
  }

  .admin-shell.sidebar-collapsed .nav > a,
  .admin-shell.sidebar-collapsed .nav-item > a {
    justify-content: flex-start;
    padding: 0 12px;
  }

  .metric-grid,
  .service-card-grid,
  .service-extra-basic-grid,
  .editor-grid.two,
  .editor-grid.three,
  .editor-grid.four {
    grid-template-columns: 1fr;
  }

  .settings-row {
    grid-template-columns: 1fr;
  }

  .settings-row-title {
    border-right: 0;
    border-bottom: 1px solid var(--line);
    padding: 18px 20px;
  }

  .settings-row-body {
    padding: 20px;
  }

  .settings-switch-grid {
    grid-template-columns: 1fr;
  }

  .permission-section > header,
  .permission-role-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .permission-form-grid,
  .permission-module-card,
  .permission-user-grid {
    grid-template-columns: 1fr;
  }

  .permission-module-name {
    border-bottom: 1px solid #e7eaf2;
    border-right: 0;
  }

  .permission-role-list,
  .permission-create-card,
  .permission-super-note,
  .permission-table-wrap {
    margin-left: 16px;
    margin-right: 16px;
  }

  .weekly-schedule-row {
    grid-template-columns: 1fr auto;
  }

  .schedule-time-summary {
    grid-column: 1;
  }

  .schedule-time-editor {
    grid-template-columns: 1fr;
  }

  .customers-head {
    align-items: start;
    display: grid;
    gap: 18px;
  }

  .activity-log-card-head {
    align-items: start;
    display: grid;
    gap: 18px;
  }

  .activity-log-actions {
    flex-wrap: wrap;
  }

  .performance-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }

  .dashboard-panel-head {
    display: grid;
    gap: 14px;
    padding: 20px;
  }

  .day-preview-track {
    grid-template-columns: 58px minmax(760px, 1fr);
    overflow-x: auto;
    padding: 20px;
  }

  .preview-person {
    display: none;
  }

  .day-preview-agent-list {
    min-width: 836px;
  }

  .day-preview-calendar {
    left: 0;
  }

  .main {
    padding: 22px 16px 44px;
  }

  .app-topbar {
    align-items: stretch;
    display: grid;
  }

  .top-search {
    width: 100%;
  }

  .calendar-hero {
    align-items: start;
    display: grid;
    gap: 16px;
  }

  .calendar-controls {
    flex-wrap: wrap;
  }

  .month-row {
    min-width: 1040px;
  }

  .timeline-grid {
    min-width: 680px;
  }

  .day-board {
    overflow-x: auto;
  }

  .calendar-event {
    align-items: start;
  }

  .availability-panel {
    border-radius: 18px;
    left: 14px;
    right: 14px;
    width: auto;
    z-index: 2;
  }
}

/* Employee schedule editor: LatePoint-like custom schedule behavior */
.agent-custom-schedule-toggle {
  align-items: center;
  color: var(--blue);
  cursor: pointer;
  display: inline-flex;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
}

.agent-custom-schedule-toggle input {
  accent-color: var(--blue);
  cursor: pointer;
}

.employee-global-schedule-note[hidden] {
  display: none;
}

.employee-weekly-schedule-list.is-global-schedule-mode {
  background: rgba(248, 250, 255, 0.72);
  border-radius: 18px;
}

.employee-weekly-schedule-list.is-global-schedule-mode .weekly-schedule-row {
  cursor: default;
}

.weekly-schedule-row.is-schedule-readonly .schedule-toggle,
.weekly-schedule-row.is-schedule-readonly .schedule-edit-button,
.weekly-schedule-row.is-schedule-readonly .schedule-time-control,
.weekly-schedule-row.is-schedule-readonly .schedule-add-period {
  pointer-events: none;
}

.weekly-schedule-row.is-schedule-readonly .schedule-edit-button {
  color: #b7c0d4;
  opacity: 0.72;
}

.weekly-schedule-row.is-schedule-readonly .schedule-toggle span {
  opacity: 0.72;
}

.schedule-time-summary {
  display: grid;
  gap: 3px;
  justify-items: end;
  line-height: 1.35;
  text-align: right;
  white-space: normal;
}

.schedule-time-summary span {
  display: block;
}


.messages-page,
.message-history-page,
.message-detail-page {
  display: grid;
  gap: 28px;
}

.message-tabs .active,
.message-tabs a:hover {
  color: #e5004f;
}

.message-tabs .active::after {
  background: #e5004f;
}

.message-compose-card,
.message-detail-card,
.message-category-card,
.message-history-card,
.message-recipient-row,
.message-target-panel {
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid #eadfe4;
  border-radius: 18px;
  box-shadow: 0 18px 40px rgba(56, 36, 45, 0.06);
}

.message-compose-card,
.message-detail-card {
  display: grid;
  gap: 22px;
  padding: 22px;
}

.message-editor {
  display: block;
}

.message-editor-main {
  display: grid;
  gap: 30px;
}

.message-editor [hidden] {
  display: none !important;
}

.message-editor-title {
  align-items: center;
  display: flex;
  gap: 18px;
  justify-content: space-between;
}

.message-editor-title h2 {
  color: #252a3e;
  font-size: 30px;
  font-weight: 760;
  margin: 0;
}

.message-editor-panel {
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid #eadfe4;
  border-radius: 18px;
  box-shadow: 0 18px 40px rgba(56, 36, 45, 0.06);
  display: grid;
  gap: 18px;
  padding: 22px;
}

.message-editor-panel h3 {
  color: #252a3e;
  font-size: 22px;
  font-weight: 760;
  margin: 0;
}

.message-form-grid.message-basic-grid {
  align-items: end;
  grid-template-columns: minmax(260px, 1.5fr) repeat(2, minmax(160px, 0.8fr)) minmax(150px, 0.7fr);
}

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

.message-assignment-option {
  background: #fff;
  border: 1px solid #eadfe4;
  border-radius: 18px;
  cursor: pointer;
  display: grid;
  gap: 10px;
  min-height: 154px;
  padding: 18px;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.message-assignment-option:hover,
.message-assignment-option.is-selected {
  border-color: #f477a6;
  box-shadow: 0 16px 36px rgba(229, 0, 79, 0.1);
  transform: translateY(-1px);
}

.message-assignment-option input {
  height: 1px;
  min-height: 1px;
  opacity: 0;
  padding: 0;
  pointer-events: none;
  position: absolute;
  width: 1px;
}

.message-assignment-icon {
  align-items: center;
  background: #fde8ef;
  border-radius: 999px;
  color: #e5004f;
  display: inline-flex;
  font-weight: 850;
  height: 42px;
  justify-content: center;
  width: 42px;
}

.message-assignment-option.is-selected .message-assignment-icon {
  background: #e5004f;
  color: #fff;
}

.message-assignment-option strong {
  color: #252a3e;
  font-size: 17px;
}

.message-assignment-option em {
  color: #7b8497;
  font-style: normal;
  line-height: 1.6;
}

.message-target-config {
  background: rgba(253, 248, 250, 0.72);
  border: 1px solid #f0e5ea;
  border-radius: 16px;
  display: grid;
  gap: 14px;
  padding: 16px;
}

.message-target-config > label {
  display: grid;
  gap: 8px;
}

.message-target-config > label > span,
.message-select-all-line span {
  color: #7b8497;
  font-size: 13px;
  font-weight: 750;
}

.message-select-all-line {
  align-items: center;
  display: inline-flex;
  gap: 10px;
  justify-self: start;
}

.message-select-all-line input {
  min-height: auto;
}

.message-ack-toggle {
  cursor: pointer;
}

.message-ack-toggle input {
  height: 1px;
  min-height: 1px;
  opacity: 0;
  padding: 0;
  pointer-events: none;
  position: absolute;
  width: 1px;
}

.message-ack-toggle strong {
  align-items: center;
  background: #fff;
  border: 1px solid #e4dce2;
  border-radius: 14px;
  color: #252a3e;
  display: inline-flex;
  font-size: 15px;
  font-weight: 760;
  justify-content: center;
  min-height: 44px;
  padding: 0 14px;
  transition: background 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, color 0.16s ease;
}

.message-ack-toggle input:checked + strong {
  background: #e5004f;
  border-color: #e5004f;
  box-shadow: 0 12px 26px rgba(229, 0, 79, 0.14);
  color: #fff;
}

.message-page-head {
  align-items: center;
  display: flex;
  gap: 18px;
  justify-content: space-between;
}

.message-page-head h1,
.message-page-head h2,
.message-page-head p {
  margin: 0;
}

.message-page-head h1 {
  color: #252a3e;
  font-size: 30px;
  font-weight: 760;
  margin-top: 4px;
}

.message-page-head h2 {
  color: #252a3e;
  font-size: 22px;
  font-weight: 760;
}

.message-page-head p,
.message-page-head span {
  color: #7b8497;
}

.message-page-head span {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.message-history-link {
  align-items: center;
  background: #fde8ef;
  border-radius: 999px;
  color: #e5004f;
  display: inline-flex;
  font-weight: 750;
  min-height: 38px;
  padding: 0 14px;
  text-decoration: none;
}

.message-alert {
  border-radius: 14px;
  font-weight: 700;
  padding: 12px 14px;
}

.message-alert.success {
  background: #e9fbef;
  color: #0f9f6e;
}

.message-alert.warning {
  background: #fde8ef;
  color: #e5004f;
}

.message-form {
  display: grid;
  gap: 18px;
}

.message-form-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: 1.5fr repeat(3, minmax(150px, 1fr));
}

.message-form label,
.message-editor-panel > label,
.message-target-panel label,
.message-body-field {
  display: grid;
  gap: 8px;
}

.message-form label > span,
.message-editor-panel > label > span,
.message-target-panel label > span {
  color: #7b8497;
  font-size: 13px;
  font-weight: 750;
}

.message-form input,
.message-form select,
.message-form textarea,
.message-editor-panel > label select,
.message-body-field textarea,
.message-target-config select,
.message-target-panel select {
  background: #fff;
  border: 1px solid #e4dce2;
  border-radius: 14px;
  color: #252a3e;
  font: inherit;
  min-height: 44px;
  padding: 0 14px;
}

.message-form textarea,
.message-body-field textarea {
  line-height: 1.55;
  padding: 14px;
  resize: vertical;
}

.message-form input:focus,
.message-form select:focus,
.message-form textarea:focus,
.message-editor-panel > label select:focus,
.message-body-field textarea:focus,
.message-target-config select:focus {
  border-color: #e5004f;
  box-shadow: 0 0 0 4px rgba(229, 0, 79, 0.08);
  outline: 0;
}

.message-target-panel {
  display: grid;
  gap: 8px;
  padding: 16px;
}

.message-target-panel strong {
  color: #252a3e;
}

.message-target-panel p {
  color: #7b8497;
  margin: 0;
}

.message-employee-picker {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
  max-height: 320px;
  overflow: auto;
}

.message-employee-picker label,
.message-ack-check {
  align-items: center;
  background: #fff;
  border: 1px solid #f0e5ea;
  border-radius: 14px;
  display: flex;
  gap: 10px;
  padding: 10px 12px;
}

.message-employee-picker input,
.message-ack-check input {
  min-height: auto;
}

.message-employee-picker span {
  display: grid;
  gap: 2px;
}

.message-employee-picker em {
  color: #8a93a5;
  font-size: 12px;
  font-style: normal;
}

.message-form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.message-history-summary article {
  border-color: #eadfe4;
}

.message-history-list {
  display: grid;
  gap: 14px;
}

.message-category-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
}

.message-category-card {
  align-items: flex-start;
  display: flex;
  gap: 14px;
  min-height: 118px;
  padding: 18px 20px;
}

.message-category-card > span {
  align-items: center;
  background: #fde8ef;
  border-radius: 14px;
  color: #e5004f;
  display: inline-flex;
  flex: 0 0 44px;
  font-size: 19px;
  font-weight: 850;
  height: 44px;
  justify-content: center;
}

.message-category-card h2,
.message-category-card p {
  margin: 0;
}

.message-category-card h2 {
  color: #252a3e;
  font-size: 18px;
  font-weight: 760;
}

.message-category-card p {
  color: #7b8497;
  font-weight: 650;
  line-height: 1.5;
  margin-top: 6px;
}

.message-history-card {
  align-items: center;
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(260px, 1.2fr) minmax(260px, 0.9fr) auto;
  padding: 16px;
}

.message-history-main {
  align-items: center;
  display: flex;
  gap: 14px;
}

.message-history-main h2 {
  color: #252a3e;
  font-size: 18px;
  margin: 0;
}

.message-history-main p {
  color: #7b8497;
  margin: 4px 0 0;
}

.message-type-pill,
.message-read-pill {
  border-radius: 999px;
  display: inline-flex;
  font-size: 12px;
  font-weight: 850;
  justify-content: center;
  padding: 6px 10px;
  white-space: nowrap;
}

.message-type-pill {
  background: #f3f4f8;
  color: #7b8497;
}

.message-type-pill.important,
.message-type-pill.urgent {
  background: #fde8ef;
  color: #e5004f;
}

.message-history-card dl,
.message-detail-stats {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
}

.message-history-card dl div,
.message-detail-stats div {
  background: #faf5f7;
  border-radius: 12px;
  padding: 8px 10px;
}

.message-history-card dt,
.message-history-card dd,
.message-detail-stats dt,
.message-detail-stats dd {
  margin: 0;
}

.message-history-card dt,
.message-detail-stats dt {
  color: #8a93a5;
  font-size: 12px;
}

.message-history-card dd,
.message-detail-stats dd {
  color: #252a3e;
  font-weight: 750;
  margin-top: 3px;
}

.message-body-preview {
  background: #fff;
  border: 1px solid #f0e5ea;
  border-radius: 16px;
  color: #303647;
  line-height: 1.7;
  min-height: 120px;
  padding: 18px;
  white-space: pre-wrap;
}

.message-recipient-list {
  display: grid;
  gap: 10px;
}

.message-recipient-row {
  align-items: center;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(200px, 1fr) auto auto;
  min-height: 64px;
  padding: 12px 16px;
}

.message-recipient-row div {
  display: grid;
  gap: 4px;
}

.message-recipient-row strong {
  color: #252a3e;
}

.message-recipient-row span {
  color: #7b8497;
}

.message-read-pill {
  background: #f0f1f7;
  color: #7b8497;
}

.message-read-pill.active {
  background: #e9fbef;
  color: #0f9f6e;
}

.message-empty {
  background: #fff;
  border: 1px dashed #eadfe4;
  border-radius: 18px;
  color: #8a93a5;
  padding: 24px;
  text-align: center;
}

@media (max-width: 980px) {
  .message-form-grid.message-basic-grid,
  .message-form-grid,
  .message-assignment-options,
  .message-history-card,
  .message-recipient-row {
    grid-template-columns: 1fr;
  }
}

.task-assignments-page {
  display: grid;
  gap: 26px;
}

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

.task-assignment-compact {
  display: grid;
  gap: 10px;
}

.task-assignment-label {
  color: #8791a5;
  font-size: 14px;
  font-weight: 650;
}

.task-assignment-compact .task-assignment-options {
  gap: 10px;
}

.task-assignment-compact .task-assignment-option {
  border-radius: 14px;
  gap: 8px !important;
  min-height: 132px;
  padding: 14px;
}

.task-assignment-option {
  background: #fff;
  border: 1px solid #eadfe4;
  border-radius: 18px;
  cursor: pointer;
  display: grid !important;
  gap: 10px !important;
  padding: 18px;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease, opacity 0.16s ease;
}

.task-assignment-option:hover,
.task-assignment-option.is-selected {
  border-color: #f477a6;
  box-shadow: 0 16px 36px rgba(229, 0, 79, 0.1);
  transform: translateY(-1px);
}

.task-assignment-option.is-disabled {
  cursor: not-allowed;
  opacity: 0.48;
  transform: none;
}

.task-assignment-option input {
  height: 1px;
  min-height: 1px;
  opacity: 0;
  padding: 0;
  position: absolute;
  width: 1px;
}

.task-assignment-icon {
  align-items: center;
  background: #fde8ef;
  border-radius: 999px;
  color: #e5004f;
  display: inline-flex;
  font-weight: 850;
  height: 42px;
  justify-content: center;
  width: 42px;
}

.task-assignment-option.is-selected .task-assignment-icon {
  background: #e5004f;
  color: #fff;
}

.task-assignment-option strong {
  color: #252a3e;
  font-size: 17px;
}

.task-assignment-compact .task-assignment-icon {
  height: 34px;
  width: 34px;
}

.task-assignment-compact .task-assignment-option strong {
  font-size: 15px;
  line-height: 1.25;
}

.task-assignment-compact .task-assignment-option em {
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  display: -webkit-box;
  overflow: hidden;
}

.task-assignment-compact .task-assignment-option small {
  display: none;
}

.task-assignment-option em,
.task-assignment-option small,
.task-assignment-hint {
  color: #7b8497;
  font-style: normal;
  line-height: 1.6;
}

.task-assignment-option small {
  color: #a16b7b;
}

.task-assignment-hint,
.task-assignment-warning {
  margin: 0;
}

.task-assignment-warning {
  background: #fff6df;
  border: 1px solid #f4d48b;
  border-radius: 14px;
  color: #9a6900;
  padding: 12px 14px;
}

.task-quiz-empty {
  background: #fff6df;
  border: 1px solid #f4d48b;
  border-radius: 14px;
  color: #9a6900;
  margin: 14px 0 0;
  padding: 12px 14px;
}

.task-assignment-summary-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.task-assignment-summary-card {
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid #eadfe4;
  border-radius: 18px;
  box-shadow: 0 18px 40px rgba(56, 36, 45, 0.06);
  display: grid;
  gap: 18px;
  padding: 22px;
}

.task-assignment-summary-card span {
  align-items: center;
  background: #fde8ef;
  border-radius: 999px;
  color: #e5004f;
  display: inline-flex;
  font-weight: 850;
  height: 42px;
  justify-content: center;
  margin-bottom: 12px;
  width: 42px;
}

.task-assignment-summary-card h2,
.task-assignment-summary-card p,
.task-assignment-summary-card dl {
  margin: 0;
}

.task-assignment-summary-card p {
  color: #7b8497;
  line-height: 1.6;
  margin-top: 6px;
}

.task-assignment-summary-card dl {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.task-assignment-summary-card dl div {
  background: #faf5f7;
  border-radius: 14px;
  padding: 12px;
}

.task-assignment-summary-card dt,
.task-assignment-summary-card dd {
  margin: 0;
}

.task-assignment-summary-card dt {
  color: #8a93a5;
  font-size: 13px;
}

.task-assignment-summary-card dd {
  color: #252a3e;
  font-size: 22px;
  font-weight: 780;
}

.task-assignment-section {
  display: grid;
  gap: 16px;
}

.task-assignment-list {
  display: grid;
  gap: 14px;
}

.task-assignment-row {
  align-items: center;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid #eadfe4;
  border-radius: 18px;
  box-shadow: 0 16px 34px rgba(56, 36, 45, 0.055);
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(260px, 1fr) minmax(360px, 1.4fr) auto;
  padding: 18px;
}

.task-assignment-row.has-warning {
  border-color: #f4c56b;
}

.task-assignment-row-main {
  display: grid;
  gap: 6px;
}

.task-assignment-row-main span {
  background: #fde8ef;
  border-radius: 999px;
  color: #e5004f;
  display: inline-flex;
  font-size: 12px;
  font-weight: 760;
  justify-self: start;
  padding: 4px 10px;
}

.task-assignment-row h3,
.task-assignment-row p,
.task-assignment-row dl,
.task-assignment-row-main strong {
  margin: 0;
}

.task-assignment-row h3 {
  color: #252a3e;
  font-size: 18px;
}

.task-assignment-row p {
  color: #7b8497;
  line-height: 1.5;
}

.task-assignment-row-main strong {
  color: #9a6900;
  font-size: 13px;
}

.task-assignment-row dl {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.task-assignment-row dl div {
  background: #faf5f7;
  border-radius: 12px;
  padding: 10px 12px;
}

.task-assignment-row dt,
.task-assignment-row dd {
  margin: 0;
}

.task-assignment-row dt {
  color: #8a93a5;
  font-size: 12px;
}

.task-assignment-row dd {
  color: #303647;
  font-weight: 720;
  margin-top: 4px;
}

@media (max-width: 1040px) {
  .task-assignment-options,
  .task-assignment-summary-grid {
    grid-template-columns: 1fr;
  }

  .task-assignment-row {
    grid-template-columns: 1fr;
  }
}

/* Exam management */
.exam-tabs {
  border-bottom: 0;
}

.exam-tabs .active {
  border-bottom-color: #e5004f;
  color: #e5004f;
}

.exam-tabs a:hover {
  color: #e5004f;
}

.exams-page {
  display: grid;
  gap: 20px;
}

.exam-page-head {
  align-items: center;
  display: flex;
  gap: 18px;
  justify-content: space-between;
}

.exam-page-head h1,
.exam-page-head p {
  margin: 0;
}

.exam-page-head h1 {
  color: #252a3e;
  font-size: 30px;
  font-weight: 760;
}

.exam-page-head p {
  color: #7b8497;
  margin-top: 6px;
  max-width: 720px;
}

.exam-placeholder-card {
  align-items: center;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid #eadfe4;
  border-radius: 22px;
  box-shadow: 0 18px 40px rgba(56, 36, 45, 0.06);
  display: grid;
  gap: 18px;
  grid-template-columns: 58px minmax(0, 1fr);
  max-width: 760px;
  padding: 24px;
}

.exam-placeholder-card > span {
  align-items: center;
  background: #fde8ef;
  border-radius: 999px;
  color: #e5004f;
  display: inline-flex;
  font-size: 22px;
  font-weight: 850;
  height: 58px;
  justify-content: center;
  width: 58px;
}

.exam-placeholder-card h2,
.exam-placeholder-card p {
  margin: 0;
}

.exam-placeholder-card h2 {
  color: #252a3e;
  font-size: 22px;
}

.exam-placeholder-card p {
  color: #7b8497;
  margin-top: 6px;
}

.exam-placeholder-card a {
  color: #e5004f;
  display: inline-flex;
  font-weight: 750;
  margin-top: 12px;
  text-decoration: none;
}

.exam-summary-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.exam-summary-grid article {
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid #eadfe4;
  border-radius: 18px;
  box-shadow: 0 18px 40px rgba(56, 36, 45, 0.05);
  display: grid;
  gap: 8px;
  min-height: 98px;
  padding: 18px;
}

.exam-summary-grid span {
  color: #7b8497;
}

.exam-summary-grid strong {
  color: #252a3e;
  font-size: 30px;
  line-height: 1;
}

.exam-bank-list {
  display: grid;
  gap: 16px;
}

.exam-bank-card {
  background: rgba(255, 255, 255, 0.84);
  border: 1px solid #eadfe4;
  border-radius: 20px;
  box-shadow: 0 18px 40px rgba(56, 36, 45, 0.06);
  display: grid;
  gap: 18px;
  padding: 20px;
}

.exam-bank-card header {
  align-items: center;
  display: grid;
  gap: 14px;
  grid-template-columns: 48px minmax(0, 1fr) auto;
}

.exam-bank-card header > span {
  align-items: center;
  background: #fde8ef;
  border-radius: 999px;
  color: #e5004f;
  display: inline-flex;
  font-size: 18px;
  font-weight: 850;
  height: 48px;
  justify-content: center;
  width: 48px;
}

.exam-bank-card h2,
.exam-bank-card p,
.exam-bank-card dl {
  margin: 0;
}

.exam-bank-card h2 {
  color: #252a3e;
  font-size: 21px;
}

.exam-bank-card p {
  color: #7b8497;
  margin-top: 5px;
}

.exam-bank-status {
  background: #f0f1f7;
  border-radius: 999px;
  color: #7b8497;
  font-size: 12px;
  font-weight: 800;
  padding: 7px 11px;
  white-space: nowrap;
}

.exam-bank-status.active {
  background: #e9fbef;
  color: #0f9f6e;
}

.exam-bank-card dl {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.exam-bank-card dl div {
  background: #faf5f7;
  border-radius: 13px;
  padding: 12px;
}

.exam-bank-card dt,
.exam-bank-card dd {
  margin: 0;
}

.exam-bank-card dt {
  color: #8a93a5;
  font-size: 13px;
}

.exam-bank-card dd {
  color: #303647;
  font-weight: 760;
  margin-top: 4px;
  overflow-wrap: anywhere;
}

.exam-bank-card footer {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.exam-bank-card footer span {
  color: #e5004f;
  font-weight: 780;
}

.exam-bank-card code {
  background: #faf5f7;
  border-radius: 999px;
  color: #7b8497;
  font-family: inherit;
  padding: 7px 10px;
}

.exam-bank-new-card {
  align-content: center;
  color: inherit;
  min-height: 260px;
  text-decoration: none;
}

.exam-bank-new-card > span {
  align-items: center;
  background: #fde8ef;
  border-radius: 999px;
  color: #e5004f;
  display: inline-flex;
  font-size: 24px;
  font-weight: 850;
  height: 50px;
  justify-content: center;
  width: 50px;
}

.exam-bank-new-card strong {
  color: #252a3e;
  display: block;
  font-size: 22px;
  margin-top: 14px;
}

.exam-bank-new-card em {
  color: #7b8497;
  display: block;
  font-style: normal;
  margin-top: 6px;
}

.exam-bank-editor {
  display: grid;
  gap: 18px;
  max-width: 1120px;
}

.exam-bank-editor-card {
  background: rgba(255, 255, 255, 0.84);
  border: 1px solid #eadfe4;
  border-radius: 20px;
  box-shadow: 0 18px 40px rgba(56, 36, 45, 0.06);
  display: grid;
  gap: 18px;
  padding: 22px;
}

.exam-bank-editor-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(0, 1.2fr) minmax(220px, 0.9fr) minmax(130px, 0.45fr) minmax(210px, 0.8fr);
}

.exam-bank-editor-grid label {
  color: var(--muted);
  display: grid;
  font-size: 14px;
  font-weight: 650;
  gap: 7px;
}

.exam-bank-editor-grid input,
.exam-bank-editor-grid select {
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid #f0c4d3;
  border-radius: 14px;
  color: var(--text);
  font: inherit;
  min-height: 46px;
  padding: 0 14px;
  width: 100%;
}

.exam-question-count {
  background: #fde8ef;
  border-radius: 999px;
  color: #e5004f;
  padding: 7px 12px;
  white-space: nowrap;
}

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

.exam-question-card {
  background: #fff;
  border: 1px solid #f0c4d3;
  border-radius: 16px;
  display: grid;
  gap: 12px;
  padding: 16px;
}

.exam-question-card.is-disabled {
  opacity: 0.58;
}

.exam-question-card header {
  align-items: flex-start;
  display: grid;
  gap: 12px;
  grid-template-columns: 38px minmax(0, 1fr) auto;
}

.exam-question-card header > span {
  align-items: center;
  background: #fde8ef;
  border-radius: 999px;
  color: #e5004f;
  display: inline-flex;
  font-weight: 850;
  height: 38px;
  justify-content: center;
  width: 38px;
}

.exam-question-card h3,
.exam-question-card p,
.exam-question-card dl,
.exam-question-card dt,
.exam-question-card dd {
  margin: 0;
}

.exam-question-card h3 {
  color: #252a3e;
  font-size: 17px;
  line-height: 1.5;
}

.exam-question-card p,
.exam-question-card dt {
  color: #7b8497;
}

.exam-question-card b {
  background: #f0f1f7;
  border-radius: 999px;
  color: #7b8497;
  font-size: 12px;
  padding: 6px 10px;
}

.exam-question-card dl {
  background: #faf5f7;
  border-radius: 12px;
  display: grid;
  gap: 4px;
  padding: 10px 12px;
}

.exam-question-card dd {
  color: #303647;
  line-height: 1.6;
}

.exam-list-page {
  padding-top: 4px;
}

.exam-card-grid {
  grid-template-columns: repeat(auto-fit, minmax(340px, 410px));
}

.exam-card {
  border-color: #f0c4d3;
}

.exam-card .agent-card-top {
  align-items: flex-start;
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr) auto;
}

.exam-avatar {
  background: #fde8ef;
  color: #e5004f;
  font-weight: 850;
}

.exam-card-meta {
  grid-template-columns: 1fr 1fr;
}

.exam-card-meta strong {
  color: #252a3e;
  display: block;
  font-size: 18px;
  font-weight: 800;
  margin: 6px 0 0;
}

.exam-card-facts {
  align-items: center;
  border-bottom: 1px solid #e8ebf3;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 58px;
  padding: 12px 0;
}

.exam-card-facts span {
  background: #fde8ef;
  border-radius: 999px;
  color: #e5004f;
  font-size: 12px;
  font-weight: 760;
  padding: 5px 10px;
}

.exam-new-card span {
  background: #e5004f;
  box-shadow: 0 0 0 18px #fde8ef;
}

.exam-editor-form {
  display: grid;
  gap: 18px;
  max-width: 1040px;
}

.exam-editor-card {
  background: rgba(255, 255, 255, 0.84);
  border: 1px solid #eadfe4;
  border-radius: 20px;
  box-shadow: 0 18px 40px rgba(56, 36, 45, 0.06);
  display: grid;
  gap: 18px;
  padding: 22px;
}

.exam-editor-head {
  align-items: center;
  display: flex;
  gap: 16px;
  justify-content: space-between;
}

.exam-editor-head h2,
.exam-editor-head p {
  margin: 0;
}

.exam-editor-head h2 {
  color: #252a3e;
  font-size: 26px;
}

.exam-editor-head p {
  color: #7b8497;
  margin-top: 6px;
}

.exam-form-row,
.exam-form-grid {
  display: grid;
  gap: 14px;
}

.exam-basic-row {
  grid-template-columns: minmax(0, 1.2fr) minmax(220px, 0.8fr) minmax(260px, 1fr);
}

.exam-rule-row {
  align-items: end;
  grid-template-columns: minmax(190px, 1fr) minmax(150px, 0.72fr) minmax(150px, 0.72fr) minmax(150px, auto);
}

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

.exam-form-row label,
.exam-form-grid label,
.exam-retry-section label,
.exam-form-full {
  color: var(--muted);
  display: grid;
  font-size: 14px;
  font-weight: 650;
  gap: 7px;
}

.exam-form-row input,
.exam-form-row select,
.exam-form-grid input,
.exam-form-grid select,
.exam-retry-section input,
.exam-form-full textarea {
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid #f0c4d3;
  border-radius: 14px;
  color: var(--text);
  font: inherit;
  min-height: 46px;
  padding: 0 14px;
  width: 100%;
}

.exam-form-full textarea {
  line-height: 1.6;
  min-height: 92px;
  padding: 12px 14px;
  resize: vertical;
}

.exam-form-row input:focus,
.exam-form-row select:focus,
.exam-form-grid input:focus,
.exam-form-grid select:focus,
.exam-retry-section input:focus,
.exam-form-full textarea:focus {
  border-color: #e5004f;
  box-shadow: 0 0 0 3px rgba(229, 0, 79, 0.08);
  outline: 0;
}

.exam-retry-section {
  background: rgba(253, 232, 239, 0.42);
  border: 1px solid rgba(240, 196, 211, 0.9);
  border-radius: 16px;
  display: grid;
  max-width: 300px;
  padding: 14px;
}

.exam-retry-section[hidden] {
  display: none;
}

.exam-checkbox-field {
  align-content: center;
  grid-template-columns: auto minmax(0, 1fr);
}

.exam-retry-toggle {
  align-self: center;
  min-height: 46px;
  padding-top: 23px;
}

.exam-checkbox-field input[type="hidden"] {
  display: none;
}

.exam-checkbox-field input[type="checkbox"] {
  accent-color: #e5004f;
  height: 18px;
  min-height: 18px;
  width: 18px;
}

.exam-form-options {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.exam-form-actions {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

.exam-form-actions button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.task-form-secondary {
  align-items: center;
  background: #f0f1f7;
  border-radius: 999px;
  color: #303647;
  display: inline-flex;
  font-weight: 760;
  min-height: 42px;
  padding: 0 18px;
  text-decoration: none;
}

@media (max-width: 1100px) {
  .exam-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .exam-bank-card dl {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .exam-bank-editor-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

}

@media (max-width: 720px) {
  .exam-page-head,
  .exam-bank-card footer {
    align-items: flex-start;
    flex-direction: column;
  }

  .exam-summary-grid,
  .exam-bank-card dl {
    grid-template-columns: 1fr;
  }

  .exam-bank-card header,
  .exam-placeholder-card {
    grid-template-columns: 1fr;
  }

  .exam-bank-editor-grid,
  .exam-question-card header {
    grid-template-columns: 1fr;
  }

  .exam-editor-head,
  .exam-form-actions {
    align-items: flex-start;
    flex-direction: column;
  }

  .exam-form-row,
  .exam-form-grid {
    grid-template-columns: 1fr;
  }

  .exam-retry-toggle {
    padding-top: 0;
  }
}

/* Exam bank cards and department bank sorting */
.inline-alert.success {
  background: #eafaf0;
  color: #087443;
}

.exam-bank-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.exam-bank-grid > .task-history-empty {
  grid-column: 1 / -1;
}

.exam-bank-create-card {
  align-content: start;
  border-style: dashed;
  min-height: 220px;
}

.exam-bank-create-card summary {
  align-items: center;
  cursor: pointer;
  display: grid;
  gap: 14px;
  grid-template-columns: 48px minmax(0, 1fr);
  list-style: none;
}

.exam-bank-create-card summary::-webkit-details-marker,
.exam-bank-edit summary::-webkit-details-marker {
  display: none;
}

.exam-bank-create-card summary > span {
  align-items: center;
  background: #fde8ef;
  border-radius: 999px;
  color: #e5004f;
  display: inline-flex;
  font-size: 24px;
  font-weight: 850;
  height: 48px;
  justify-content: center;
  width: 48px;
}

.exam-bank-create-card summary strong {
  color: #252a3e;
  display: block;
  font-size: 21px;
}

.exam-bank-create-card summary em {
  color: #7b8497;
  display: block;
  font-style: normal;
  margin-top: 5px;
}

.exam-bank-form {
  border-top: 1px solid rgba(229, 0, 79, 0.09);
  display: grid;
  gap: 14px;
  margin-top: 16px;
  padding-top: 16px;
}

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

.exam-bank-form label,
.exam-bank-form-full {
  color: var(--muted);
  display: grid;
  font-size: 13px;
  font-weight: 650;
  gap: 7px;
}

.exam-bank-form input,
.exam-bank-form select,
.exam-bank-form textarea {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid #f0c4d3;
  border-radius: 12px;
  color: var(--text);
  font: inherit;
  min-height: 40px;
  padding: 0 12px;
  width: 100%;
}

.exam-bank-form textarea {
  line-height: 1.6;
  min-height: 86px;
  padding: 10px 12px;
  resize: vertical;
}

.exam-bank-form input:focus,
.exam-bank-form select:focus,
.exam-bank-form textarea:focus {
  border-color: #e5004f;
  box-shadow: 0 0 0 3px rgba(229, 0, 79, 0.08);
  outline: 0;
}

.exam-bank-form-actions {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

.exam-bank-card-actions > div {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

.exam-bank-card-actions a,
.exam-bank-edit > summary {
  background: #fde8ef;
  border-radius: 999px;
  color: #e5004f;
  cursor: pointer;
  display: inline-flex;
  font-size: 13px;
  font-weight: 780;
  min-height: 32px;
  padding: 7px 12px;
  text-decoration: none;
}

.exam-bank-card-actions a:hover,
.exam-bank-edit > summary:hover,
.exam-bank-edit[open] > summary {
  background: #e5004f;
  color: #fff;
}

.exam-bank-edit {
  position: relative;
}

.exam-bank-edit[open] .exam-bank-form {
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid #f0c4d3;
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(56, 36, 45, 0.16);
  left: auto;
  margin-top: 10px;
  min-width: min(720px, calc(100vw - 64px));
  padding: 18px;
  position: absolute;
  right: 0;
  top: 100%;
  z-index: 12;
}

.exam-bank-switch {
  justify-self: start;
}

.exam-departments-page {
  max-width: 1120px;
}

.exam-department-card .employee-department-title span {
  cursor: default;
}

.exam-department-banks {
  min-height: 66px;
}

.exam-department-bank {
  grid-template-columns: auto minmax(0, 1fr) auto;
}

.exam-department-bank.is-disabled {
  opacity: 0.62;
}

.exam-department-bank.is-dragging {
  border-color: rgba(229, 0, 79, 0.58);
  box-shadow: 0 20px 48px rgba(229, 0, 79, 0.14);
  opacity: 0.56;
  transform: scale(0.99);
}

.exam-department-banks.is-drag-over {
  background: rgba(253, 232, 239, 0.52);
  border-color: rgba(229, 0, 79, 0.32);
  box-shadow: inset 0 0 0 1px rgba(229, 0, 79, 0.08);
}

.exam-bank-drop-placeholder {
  background: linear-gradient(135deg, rgba(253, 232, 239, 0.86), rgba(255, 255, 255, 0.62));
  border: 1.5px dashed rgba(229, 0, 79, 0.5);
  border-radius: 12px;
  min-height: 40px;
}

.exam-department-banks.is-saving .exam-department-bank {
  cursor: progress;
}

.exam-department-banks.is-saved .exam-department-bank {
  box-shadow: 0 14px 32px rgba(229, 0, 79, 0.09);
}

[data-exam-bank-drag-handle] {
  cursor: grab;
  display: inline-flex;
  touch-action: none;
}

[data-exam-bank-drag-handle]:active,
.exam-department-bank.is-dragging [data-exam-bank-drag-handle] {
  cursor: grabbing;
}

@media (max-width: 1100px) {
  .exam-bank-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .exam-bank-form-grid {
    grid-template-columns: 1fr;
  }

  .exam-bank-edit[open] .exam-bank-form {
    min-width: min(480px, calc(100vw - 36px));
    right: -12px;
  }
}

.resource-page > .resource-tabs {
  margin-bottom: 30px;
}

.resource-page:is(
  .tasks-page,
  .task-categories-page,
  .task-items-page,
  .task-history-page,
  .task-assignments-page,
  .messages-page,
  .message-history-page,
  .message-detail-page,
  .message-categories-page,
  .kpi-page,
  .kpi-rules-page,
  .exams-page,
  .employees-resource,
  .employee-departments-page,
  .settings-schedule-page
) {
  row-gap: 30px;
}

.resource-page:is(
  .tasks-page,
  .task-categories-page,
  .task-items-page,
  .task-history-page,
  .task-assignments-page,
  .messages-page,
  .message-history-page,
  .message-detail-page,
  .message-categories-page,
  .kpi-page,
  .kpi-rules-page,
  .exams-page,
  .employees-resource,
  .employee-departments-page,
  .settings-schedule-page
) > .resource-tabs {
  margin-bottom: 0;
}

.settings-editor-main > .settings-tabs {
  margin-bottom: 6px;
}

/* Attendance management */
.attendance-page {
  display: grid;
  gap: 24px;
}

.attendance-tabs .active,
.attendance-tabs a:hover {
  color: #e5004f;
}

.attendance-toolbar {
  align-items: flex-start;
  display: flex;
  gap: 18px;
  justify-content: space-between;
}

.attendance-toolbar h1,
.attendance-toolbar p {
  margin: 0;
}

.attendance-toolbar h1 {
  color: #252a3e;
  font-size: 30px;
  font-weight: 760;
}

.attendance-toolbar p {
  color: #7b8497;
  margin-top: 6px;
}

.attendance-filter-form {
  align-items: end;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

.attendance-filter-form label {
  display: grid;
  gap: 6px;
}

.attendance-filter-form label span {
  color: #7b8497;
  font-size: 12px;
  font-weight: 700;
}

.attendance-filter-form input,
.attendance-filter-form select {
  background: #fff;
  border: 1px solid #eadfe4;
  border-radius: 12px;
  color: #252a3e;
  min-height: 38px;
  min-width: 132px;
  padding: 0 12px;
}

.attendance-filter-form button {
  align-items: center;
  background: #e5004f;
  border: 1px solid #e5004f;
  border-radius: 999px;
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  font-weight: 750;
  justify-content: center;
  min-height: 38px;
  padding: 0 18px;
}

.attendance-summary-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.attendance-summary-card,
.attendance-table-card {
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid #eadfe4;
  border-radius: 18px;
  box-shadow: 0 18px 40px rgba(56, 36, 45, 0.06);
}

.attendance-summary-card {
  display: grid;
  gap: 6px;
  min-height: 108px;
  padding: 18px;
}

.attendance-summary-card span,
.attendance-summary-card em,
.attendance-table-card > header p {
  color: #7b8497;
}

.attendance-summary-card strong {
  color: #252a3e;
  font-size: 30px;
  font-weight: 800;
  line-height: 1;
}

.attendance-summary-card.positive strong,
.attendance-points.positive {
  color: #0f9f6e;
}

.attendance-summary-card.negative strong,
.attendance-points.negative {
  color: #e5004f;
}

.attendance-summary-card.warning strong {
  color: #d97706;
}

.attendance-table-card {
  overflow: hidden;
}

.attendance-table-card > header {
  align-items: center;
  border-bottom: 1px solid #f0e5ea;
  display: flex;
  gap: 14px;
  justify-content: space-between;
  padding: 18px 20px;
}

.attendance-table-card > header h2,
.attendance-table-card > header p {
  margin: 0;
}

.attendance-table-card > header h2 {
  color: #252a3e;
  font-size: 20px;
}

.attendance-table-card > header span {
  color: #7b8497;
  font-weight: 760;
}

.attendance-table-wrap {
  overflow-x: auto;
}

.attendance-table {
  min-width: 1120px;
}

.attendance-record-table {
  min-width: 1220px;
}

.attendance-schedule-table {
  min-width: 980px;
}

.attendance-table th {
  background: #fff8fb;
  color: #8a93a5;
  font-size: 12px;
  white-space: nowrap;
}

.attendance-table td {
  color: #303647;
  font-size: 13px;
  white-space: nowrap;
}

.attendance-status-pill {
  align-items: center;
  border-radius: 999px;
  display: inline-flex;
  font-size: 12px;
  font-weight: 800;
  min-height: 26px;
  padding: 0 10px;
}

.attendance-status-pill.positive {
  background: #e8fff6;
  color: #0f9f6e;
}

.attendance-status-pill.negative {
  background: #fde8ef;
  color: #e5004f;
}

.attendance-status-pill.warning {
  background: #fff7e6;
  color: #d97706;
}

.attendance-status-pill.neutral {
  background: #eef2ff;
  color: #64748b;
}

.attendance-empty-cell {
  color: #7b8497;
  padding: 28px 18px;
  text-align: center;
}

@media (max-width: 1180px) {
  .attendance-toolbar {
    display: grid;
  }

  .attendance-filter-form {
    justify-content: flex-start;
  }

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

/* Debug attendance rebuild tools */
.debug-attendance-panel {
  overflow: visible;
}

.debug-attendance-body {
  display: grid;
  gap: 18px;
  padding: 18px 20px 20px;
}

.debug-attendance-filter {
  justify-content: flex-start;
}

.debug-quick-date-row {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.debug-quick-date-row a {
  text-decoration: none;
}

.debug-attendance-summary {
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.debug-attendance-actions {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
}

.debug-action-desc {
  color: #7b8497;
  font-size: 13px;
  line-height: 1.65;
  margin: 0;
}

.debug-action-card.strong {
  box-shadow: 0 18px 42px rgba(229, 0, 79, 0.13);
}

.debug-attendance-schedule-table {
  min-width: 980px;
}

.debug-attendance-record-table {
  min-width: 1440px;
}

.debug-attendance-result-table {
  min-width: 1380px;
}

.admin-dev-bypass-pill {
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(217, 119, 6, 0.3);
  background: rgba(251, 191, 36, 0.14);
  color: #92400e;
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 700;
}

/* Exam history */
.exam-history-page,
.exam-history-detail-page {
  display: grid;
  gap: 20px;
}

.exam-history-head {
  align-items: center;
  display: flex;
  gap: 18px;
  justify-content: space-between;
}

.exam-history-head h1,
.exam-history-head p {
  margin: 0;
}

.exam-history-head h1 {
  color: #252a3e;
  font-size: 30px;
  font-weight: 760;
}

.exam-history-head p {
  color: #7b8497;
  margin-top: 6px;
}

.exam-history-back {
  color: #e5004f;
  display: inline-flex;
  font-weight: 780;
  margin-bottom: 8px;
  text-decoration: none;
}

.exam-history-filter-card {
  align-items: end;
  background: rgba(255, 255, 255, 0.84);
  border: 1px solid #eadfe4;
  border-radius: 18px;
  box-shadow: 0 18px 40px rgba(56, 36, 45, 0.05);
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(4, minmax(140px, 1fr)) auto auto;
  padding: 18px;
}

.exam-history-filter-card label {
  color: #7b8497;
  display: grid;
  font-size: 13px;
  font-weight: 760;
  gap: 7px;
}

.exam-history-filter-card select {
  background: #fff;
  border: 1px solid #f0c4d3;
  border-radius: 14px;
  color: #252a3e;
  font: inherit;
  min-height: 42px;
  padding: 0 12px;
  width: 100%;
}

.exam-history-checkbox {
  align-items: center;
  align-self: center;
  display: inline-flex !important;
  gap: 8px !important;
  min-height: 42px;
  white-space: nowrap;
}

.exam-history-checkbox input {
  accent-color: #e5004f;
  height: 17px;
  width: 17px;
}

.exam-history-filter-card button,
.exam-history-detail-link {
  align-items: center;
  background: #e5004f;
  border: 0;
  border-radius: 999px;
  color: #fff;
  display: inline-flex;
  font: inherit;
  font-weight: 800;
  justify-content: center;
  min-height: 42px;
  padding: 0 16px;
  text-decoration: none;
  white-space: nowrap;
}

.exam-history-summary {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.exam-history-list,
.exam-history-question-list {
  display: grid;
  gap: 16px;
}

.exam-history-card {
  align-items: center;
  background: rgba(255, 255, 255, 0.84);
  border: 1px solid #eadfe4;
  border-radius: 18px;
  box-shadow: 0 18px 40px rgba(56, 36, 45, 0.05);
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(260px, 1.1fr) auto minmax(420px, 1.5fr) auto;
  padding: 16px;
}

.exam-history-main {
  align-items: center;
  display: grid;
  gap: 12px;
  grid-template-columns: 46px minmax(0, 1fr);
}

.exam-history-avatar {
  align-items: center;
  background: #fde8ef;
  border-radius: 999px;
  color: #e5004f;
  display: inline-flex;
  font-weight: 850;
  height: 46px;
  justify-content: center;
  width: 46px;
}

.exam-history-main h2,
.exam-history-main p,
.exam-history-card dl,
.exam-history-card dt,
.exam-history-card dd {
  margin: 0;
}

.exam-history-main h2 {
  color: #252a3e;
  font-size: 18px;
}

.exam-history-main p {
  color: #7b8497;
  margin-top: 4px;
}

.exam-history-card dl {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.exam-history-card dl div,
.exam-history-attempt-card dl div {
  background: #faf5f7;
  border-radius: 12px;
  padding: 8px 10px;
}

.exam-history-card dt,
.exam-history-attempt-card dt {
  color: #8a93a5;
  font-size: 12px;
}

.exam-history-card dd,
.exam-history-attempt-card dd {
  color: #303647;
  font-weight: 740;
  overflow-wrap: anywhere;
}

.exam-history-status.failed,
.exam-question-score.failed {
  background: #fde8ef;
  color: #e5004f;
}

.exam-history-status.pending,
.exam-question-score.pending {
  background: #fff4d8;
  color: #a06b00;
}

.exam-history-status.submitted,
.exam-question-score.submitted {
  background: #eef2ff;
  color: #4255a7;
}

.exam-history-empty {
  background: rgba(255, 255, 255, 0.84);
  border: 1px dashed #f0c4d3;
  border-radius: 18px;
  padding: 20px;
}

.exam-history-detail-summary {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.exam-history-detail-summary article,
.exam-history-attempt-card,
.exam-history-question-card {
  background: rgba(255, 255, 255, 0.84);
  border: 1px solid #eadfe4;
  border-radius: 18px;
  box-shadow: 0 18px 40px rgba(56, 36, 45, 0.05);
}

.exam-history-detail-summary article {
  display: grid;
  gap: 8px;
  min-height: 92px;
  padding: 18px;
}

.exam-history-detail-summary span {
  color: #7b8497;
}

.exam-history-detail-summary strong {
  color: #252a3e;
  font-size: 28px;
}

.exam-history-attempt-card,
.exam-history-question-card {
  display: grid;
  gap: 16px;
  padding: 18px;
}

.exam-history-attempt-card h2,
.exam-history-attempt-card dl {
  margin: 0;
}

.exam-history-attempt-card h2 {
  color: #252a3e;
  font-size: 20px;
}

.exam-history-attempt-card dl {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  margin: 0;
}

.exam-history-question-card.has-risk {
  border-color: #f4b8c9;
}

.exam-history-question-card header {
  align-items: flex-start;
  display: grid;
  gap: 12px;
  grid-template-columns: 40px minmax(0, 1fr) auto;
}

.exam-history-question-card header > span {
  align-items: center;
  background: #fde8ef;
  border-radius: 999px;
  color: #e5004f;
  display: inline-flex;
  font-weight: 850;
  height: 40px;
  justify-content: center;
  width: 40px;
}

.exam-history-question-card h2,
.exam-history-question-card h3,
.exam-history-question-card p,
.exam-history-question-card ul {
  margin: 0;
}

.exam-history-question-card h2 {
  color: #252a3e;
  font-size: 18px;
  line-height: 1.55;
}

.exam-history-question-card header p {
  color: #7b8497;
  margin-top: 5px;
}

.exam-question-score {
  border-radius: 999px;
  font-size: 13px;
  font-weight: 850;
  padding: 7px 11px;
  white-space: nowrap;
}

.exam-question-score.passed {
  background: #e9fbef;
  color: #0f9f6e;
}

.exam-answer-block {
  background: #faf5f7;
  border-radius: 14px;
  display: grid;
  gap: 8px;
  padding: 14px;
}

.exam-answer-block.feedback {
  background: #fff8fb;
  border: 1px solid #f4d6e0;
}

.exam-answer-block h3,
.exam-question-points-grid h3,
.exam-question-more h3,
.exam-question-dimension-scores h3 {
  color: #252a3e;
  font-size: 15px;
  font-weight: 820;
}

.exam-answer-block p,
.exam-question-points-grid p,
.exam-question-dimension-score p,
.exam-question-more p,
.exam-question-more li,
.exam-question-points-grid li {
  color: #4b5264;
  line-height: 1.65;
}

.exam-question-points-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.exam-question-points-grid > div,
.exam-question-more,
.exam-question-dimension-scores {
  background: #fff;
  border: 1px solid #f0e5ea;
  border-radius: 14px;
  display: grid;
  gap: 10px;
  padding: 14px;
}

.exam-question-dimension-list {
  display: grid;
  gap: 14px;
}

.exam-question-dimension-score {
  align-items: start;
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(0, 1fr) auto;
}

.exam-question-dimension-score strong {
  color: #252a3e;
  display: block;
  font-size: 15px;
  font-weight: 820;
  line-height: 1.45;
  margin-bottom: 4px;
}

.exam-question-dimension-score b {
  color: #e5004f;
  font-size: 16px;
  font-weight: 860;
  line-height: 1.45;
  white-space: nowrap;
}

.exam-question-points-grid ul,
.exam-question-more ul {
  padding-left: 18px;
}

.exam-question-more summary {
  color: #e5004f;
  cursor: pointer;
  font-weight: 820;
}

@media (max-width: 1180px) {
  .exam-history-filter-card,
  .exam-history-card {
    grid-template-columns: 1fr;
  }

  .exam-history-card dl {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .exam-history-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .exam-history-summary,
  .exam-history-detail-summary,
  .exam-history-attempt-card dl,
  .exam-question-points-grid,
  .exam-history-card dl {
    grid-template-columns: 1fr;
  }

  .exam-question-dimension-score {
    grid-template-columns: 1fr;
  }
}

/* Settings AI prompt management (super admin only) */
.settings-ai-page {
  --settings-ai-border: #cfe0ff;
  --settings-ai-soft: rgba(234, 242, 255, 0.68);
}

.settings-ai-form {
  display: grid;
}

.settings-ai-secondary-button {
  justify-content: center;
}

.settings-ai-prompt-section {
  display: grid;
  gap: 20px;
  padding: 0;
}

.settings-ai-prompt-section > header {
  align-items: center;
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  padding: 20px 24px;
}

.settings-ai-prompt-section > header span {
  color: #252a3e;
  font-size: 18px;
  font-weight: 780;
}

.settings-ai-count-pill,
.settings-ai-route-pill {
  background: var(--blue-soft);
  border-radius: 999px;
  color: var(--blue);
  display: inline-flex;
  font-size: 13px;
  font-weight: 850;
  padding: 8px 12px;
  white-space: nowrap;
}

.settings-ai-intro-card {
  align-items: start;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.96), var(--settings-ai-soft));
  border: 1px solid var(--settings-ai-border);
  border-radius: 18px;
  display: flex;
  gap: 16px;
  justify-content: space-between;
  margin: 20px 24px 0;
  padding: 20px;
}

.settings-ai-intro-card h2,
.settings-ai-intro-card p {
  margin: 0;
}

.settings-ai-intro-card h2 {
  color: #252a3e;
  font-size: 24px;
  font-weight: 820;
}

.settings-ai-intro-card p {
  color: #7b8497;
  font-size: 14px;
  font-weight: 650;
  line-height: 1.6;
  margin-top: 6px;
}

.settings-ai-guide-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0 24px;
}

.settings-ai-guide-grid article {
  background: #fff;
  border: 1px solid var(--settings-ai-border);
  border-radius: 16px;
  display: grid;
  gap: 6px;
  padding: 14px;
}

.settings-ai-guide-grid strong {
  color: #252a3e;
  font-size: 15px;
  font-weight: 850;
}

.settings-ai-guide-grid span {
  color: #7b8497;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.55;
}

.settings-ai-prompt-list {
  display: grid;
  gap: 16px;
  padding: 0 24px 24px;
}

.settings-ai-prompt-card {
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid var(--settings-ai-border);
  border-radius: 18px;
  display: grid;
  gap: 14px;
  padding: 18px;
}

.settings-ai-prompt-card.is-default {
  background: linear-gradient(135deg, rgba(248, 251, 255, 0.96), rgba(255, 255, 255, 0.86));
  border-color: var(--blue);
}

.settings-ai-prompt-head {
  align-items: center;
  display: flex;
  gap: 14px;
  justify-content: space-between;
}

.settings-ai-prompt-head h3,
.settings-ai-prompt-head p {
  margin: 0;
}

.settings-ai-prompt-head h3 {
  color: #252a3e;
  font-size: 20px;
}

.settings-ai-prompt-head p {
  color: #7b8497;
  font-size: 13px;
  font-weight: 700;
  margin-top: 3px;
}

.settings-ai-prompt-status {
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  padding: 6px 10px;
  white-space: nowrap;
}

.settings-ai-prompt-status.ready {
  background: #e8f8ef;
  color: #158252;
}

.settings-ai-prompt-status.empty {
  background: var(--blue-soft);
  color: var(--blue);
}

.settings-ai-prompt-card label {
  color: #7b8497;
  display: grid;
  gap: 8px;
  font-weight: 760;
}

.settings-ai-prompt-card textarea {
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid #dce8ff;
  border-radius: 14px;
  color: #20263a;
  font: inherit;
  line-height: 1.6;
  min-height: 230px;
  padding: 13px 14px;
  resize: vertical;
}

.settings-ai-prompt-card textarea:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(47, 128, 255, 0.10);
  outline: none;
}

.settings-ai-prompt-meta {
  align-items: center;
  color: #9aa2b3;
  display: flex;
  flex-wrap: wrap;
  font-size: 12px;
  font-weight: 720;
  gap: 8px 14px;
  justify-content: space-between;
}

@media (max-width: 980px) {
  .settings-ai-guide-grid {
    grid-template-columns: 1fr;
  }

  .settings-ai-intro-card {
    display: grid;
  }
}

.settings-tabs .active,
.settings-tabs a:hover {
  border-bottom-color: var(--blue);
  color: var(--blue);
}

.license-usage-grid {
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}

.license-settings-editor textarea {
  min-height: 120px;
}