@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=Manrope:wght@400;500;600;700;800&display=swap');

:root {
  --oro-charcoal: #23211F;
  --oro-ink: #1D1C1B;
  --oro-ink-soft: #6B6864;
  --oro-ink-faint: #9A9691;
  --oro-rose: #3E5C58;
  --oro-blush: #E3EAE8;
  --oro-soft: #FAFAF9;
  --oro-sunken: #F2F1EF;
  --oro-white: #ffffff;
  --oro-line: rgba(29, 28, 27, 0.12);
  --oro-line-strong: rgba(29, 28, 27, 0.20);
  --oro-shadow: 0 1px 2px rgba(29, 28, 27, 0.04), 0 8px 24px -12px rgba(29, 28, 27, 0.10);
  --oro-shadow-lg: 0 4px 8px rgba(29, 28, 27, 0.04), 0 24px 48px -16px rgba(29, 28, 27, 0.16);
  --oro-radius: 14px;
  --oro-radius-sm: 10px;
  --oro-accent-tint: color-mix(in srgb, var(--oro-rose) 13%, white);
  --oro-accent-deep: color-mix(in srgb, var(--oro-rose) 72%, black);
  --oro-sage: #4C7A5C;
  --oro-sage-tint: #E6EFE8;
  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Manrope', 'Noto Sans Myanmar', 'Myanmar Text', 'Pyidaungsu', Inter, Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--oro-soft);
  color: var(--oro-charcoal);
  font-family: var(--font-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

a {
  color: inherit;
  text-decoration: none;
}

.site-shell {
  min-height: 100vh;
}

.site-header,
.system-topbar {
  align-items: center;
  background: rgba(250, 250, 249, 0.94);
  border-bottom: 1px solid var(--oro-line);
  display: flex;
  justify-content: space-between;
  padding: 18px clamp(18px, 5vw, 72px);
  position: sticky;
  top: 0;
  z-index: 10;
}

.brand {
  align-items: center;
  display: flex;
  gap: 12px;
}

.brand-mark {
  color: var(--oro-rose);
  font-family: Georgia, serif;
  font-size: clamp(32px, 5vw, 48px);
  letter-spacing: 0;
  line-height: 1;
}

.brand-name {
  color: var(--oro-ink);
  font-size: 14px;
  max-width: 180px;
}

.nav {
  align-items: center;
  display: flex;
  gap: 26px;
  font-size: 14px;
}

.language-switch {
  align-items: center;
  display: flex;
  gap: 8px;
}

.button,
button {
  background: var(--oro-rose);
  border: 1px solid var(--oro-rose);
  border-radius: 8px;
  color: var(--oro-white);
  cursor: pointer;
  display: inline-flex;
  font-weight: 700;
  justify-content: center;
  padding: 12px 22px;
}

.button.secondary {
  background: transparent;
  color: var(--oro-rose);
}

.hero {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(320px, 1.1fr);
  min-height: 620px;
}

.hero-copy {
  align-self: center;
  padding: clamp(36px, 6vw, 90px);
}

.hero h1 {
  color: var(--oro-ink);
  font-family: Georgia, serif;
  font-size: clamp(44px, 7vw, 84px);
  letter-spacing: 0;
  line-height: 0.98;
  margin: 0 0 24px;
}

.hero p {
  font-size: clamp(17px, 2vw, 22px);
  margin: 0 0 30px;
  max-width: 580px;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.hero-visual {
  background:
    linear-gradient(90deg, rgba(250, 250, 249, 0.24), rgba(250, 250, 249, 0)),
    linear-gradient(135deg, #ECEFF1, #BECACF);
  display: grid;
  min-height: 420px;
  place-items: center;
  padding: 40px;
}

.spa-card {
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.78);
  border-radius: 8px;
  box-shadow: var(--oro-shadow);
  max-width: 520px;
  padding: clamp(24px, 4vw, 46px);
}

.spa-card h2 {
  color: var(--oro-ink);
  font-family: Georgia, serif;
  font-size: clamp(32px, 5vw, 56px);
  line-height: 1;
  margin: 0 0 16px;
}

.section {
  padding: clamp(42px, 6vw, 84px) clamp(18px, 5vw, 72px);
}

.section-title {
  color: var(--oro-rose);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.16em;
  margin: 0 0 24px;
  text-align: center;
  text-transform: uppercase;
}

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

.service-card,
.promo,
.contact-card,
.metric-card,
.panel {
  background: var(--oro-white);
  border: 1px solid var(--oro-line);
  border-radius: 8px;
  box-shadow: 0 10px 26px rgba(35, 33, 31, 0.06);
}

.service-image {
  background: linear-gradient(135deg, var(--oro-blush), #2A4340);
  border-radius: 8px 8px 0 0;
  height: 150px;
}

.service-card div:last-child {
  padding: 18px;
}

.service-card h3,
.promo h2,
.contact-card h3,
.panel h2 {
  color: var(--oro-ink);
  margin-top: 0;
}

.promo {
  align-items: center;
  background: linear-gradient(135deg, var(--oro-blush), #fff);
  display: grid;
  gap: 24px;
  grid-template-columns: 1.3fr 0.7fr;
  margin-top: 28px;
  padding: clamp(24px, 4vw, 44px);
}

.promo-price {
  color: var(--oro-rose);
  font-size: clamp(28px, 5vw, 46px);
  font-weight: 800;
}

.contact-strip {
  background: var(--oro-blush);
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(3, 1fr);
  padding: clamp(18px, 3vw, 34px) clamp(18px, 5vw, 72px);
}

.contact-card {
  background: rgba(255, 255, 255, 0.62);
  box-shadow: none;
  padding: 20px;
}

.mobile-actions {
  background: var(--oro-rose);
  bottom: 0;
  color: var(--oro-white);
  display: none;
  grid-template-columns: repeat(3, 1fr);
  left: 0;
  position: fixed;
  right: 0;
  z-index: 20;
}

.mobile-actions a {
  padding: 12px 8px;
  text-align: center;
}

.system-layout {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  min-height: 100vh;
  min-width: 0;
}

.system-layout > main {
  min-width: 0;
  width: 100%;
}

.sidebar {
  background: linear-gradient(180deg, var(--oro-charcoal), #262524);
  color: var(--oro-white);
  padding: 22px 16px;
}

.sidebar-inner {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-height: calc(100vh - 44px);
  position: sticky;
  top: 22px;
}

.sidebar .brand,
.sidebar-brand {
  align-items: center;
  background: rgba(25, 24, 23, 0.3);
  border: 1px solid rgba(62, 92, 88, 0.78);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  justify-content: center;
  margin-bottom: 0;
  min-height: 112px;
  padding: 10px 12px 12px;
  text-align: center;
}

.sidebar-brand-crown {
  color: var(--oro-rose);
  font-family: Georgia, serif;
  font-size: 15px;
  line-height: 1;
}

.sidebar-brand-logo {
  display: block;
  max-height: 92px;
  max-width: 100%;
  object-fit: contain;
}

.sidebar .brand-mark {
  color: var(--oro-rose);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 48px;
  letter-spacing: .08em;
  line-height: .95;
  margin-left: .08em;
}

.sidebar .brand-name {
  color: var(--oro-rose);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .28em;
  line-height: 1.2;
  margin-left: .28em;
}

.sidebar-icon-library {
  height: 0;
  overflow: hidden;
  position: absolute;
  width: 0;
}

.sidebar-link-label {
  align-items: center;
  display: inline-flex;
  gap: 12px;
  min-width: 0;
}

.sidebar-link-label svg {
  fill: none;
  flex: 0 0 20px;
  height: 20px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
  width: 20px;
}

.sidebar-nav {
  display: grid;
  gap: 14px;
}

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

.sidebar-label {
  color: rgba(255, 255, 255, 0.42);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  padding: 0 10px;
  text-transform: uppercase;
}

.sidebar-links {
  display: grid;
  gap: 5px;
}

.sidebar a {
  align-items: center;
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.86);
  display: flex;
  font-weight: 800;
  justify-content: space-between;
  min-height: 42px;
  padding: 10px 12px;
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.sidebar a.active,
.sidebar a:hover {
  background: var(--oro-rose);
  color: var(--oro-white);
}

.sidebar a:hover {
  transform: translateX(2px);
}

.sidebar a.is-muted {
  color: rgba(255, 255, 255, 0.54);
}

.sidebar a small {
  background: rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.68);
  font-size: 10px;
  font-weight: 800;
  padding: 3px 7px;
}

.sidebar-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.52);
  display: flex;
  font-size: 12px;
  justify-content: space-between;
  margin-top: auto;
  padding: 14px 8px 0;
}

.sidebar-footer strong {
  color: rgba(255, 255, 255, 0.78);
}

.sidebar-logout {
  color: #fff !important;
  min-height: auto !important;
  padding: 0 !important;
}

.system-mobile-menu-toggle,
.system-mobile-menu-close,
.system-mobile-menu-backdrop {
  display: none;
}

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

.page-heading {
  align-items: center;
  display: flex;
  gap: 18px;
  justify-content: space-between;
  margin-bottom: 18px;
}

.page-heading h1 {
  color: var(--oro-ink);
  font-size: 30px;
  line-height: 1.2;
  margin: 0 0 4px;
}

.page-heading p {
  margin: 0;
}

.summary-strip {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 18px;
}

.summary-strip article {
  background: var(--oro-white);
  border: 1px solid var(--oro-line);
  border-radius: 8px;
  box-shadow: 0 10px 26px rgba(35, 33, 31, 0.06);
  padding: 16px 18px;
}

.summary-strip span {
  color: rgba(35, 33, 31, 0.72);
  display: block;
  font-size: 13px;
}

.summary-strip strong {
  color: var(--oro-ink);
  display: block;
  font-size: 24px;
}

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

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

.panel {
  padding: 20px 20px 8px;
}

.metric-card strong {
  color: var(--oro-ink);
  display: block;
  font-size: 28px;
}

.panel-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: 1fr 1fr;
  margin-top: 18px;
}

.login-page {
  display: grid;
  min-height: 100vh;
  place-items: center;
  padding: 24px;
}

.login-card {
  background: var(--oro-white);
  border: 1px solid var(--oro-line);
  border-radius: 8px;
  box-shadow: var(--oro-shadow);
  max-width: 440px;
  padding: 32px;
  width: 100%;
}

.notice {
  background: var(--oro-blush);
  border: 1px solid var(--oro-line);
  border-radius: 8px;
  margin: 16px 0;
  padding: 12px 14px;
}

.notice a {
  color: var(--oro-rose);
  font-weight: 800;
}

.notice.error {
  background: #ffecec;
  color: #8a1f1f;
}

.notice.success {
  background: #eef9f0;
  color: #23642e;
}

.field {
  display: grid;
  gap: 8px;
  margin-bottom: 16px;
  min-width: 0;
}

.field input {
  border: 1px solid var(--oro-line);
  border-radius: 8px;
  font: inherit;
  padding: 12px 14px;
  width: 100%;
  box-sizing: border-box;
  min-width: 0;
}

.field select,
.field textarea {
  border: 1px solid var(--oro-line);
  border-radius: 8px;
  font: inherit;
  padding: 12px 14px;
  width: 100%;
  box-sizing: border-box;
  min-width: 0;
}

.form-grid,
.form-grid > * {
  min-width: 0;
}

.payment-section {
  padding-top: 0;
}

.payment-chip-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

.payment-chip {
  background: var(--oro-white);
  border: 1px solid var(--oro-line);
  border-radius: 8px;
  color: var(--oro-ink);
  font-weight: 700;
  padding: 10px 16px;
}

.booking-section {
  align-items: start;
  background: var(--oro-blush);
  display: grid;
  gap: 28px;
  grid-template-columns: 0.8fr 1.2fr;
}

.booking-copy h2 {
  color: var(--oro-ink);
  font-family: Georgia, serif;
  font-size: clamp(32px, 4vw, 56px);
  line-height: 1.05;
  margin: 0 0 14px;
}

.booking-form,
.sales-grid {
  display: grid;
  gap: 16px;
}

.booking-form {
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid var(--oro-line);
  border-radius: 8px;
  padding: 22px;
}

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

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

.breakdown-list,
.receipt-items {
  display: grid;
  gap: 8px 16px;
  grid-template-columns: 1fr auto;
}

.sales-grid {
  grid-template-columns: minmax(0, 1.4fr) minmax(320px, 0.6fr);
}

.management-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(300px, 0.42fr) minmax(0, 0.58fr);
}

.service-workspace {
  align-items: start;
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(360px, 0.36fr) minmax(0, 0.64fr);
}

.service-form-panel {
  position: sticky;
  top: 92px;
}

.service-table-panel {
  min-width: 0;
}

.toolbar-row {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: space-between;
  margin-bottom: 16px;
}

.panel-title-row {
  align-items: start;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  margin-bottom: 14px;
}

.panel-title-row h2,
.toolbar-row h2 {
  margin-bottom: 2px;
}

.pill {
  background: var(--oro-blush);
  border-radius: 999px;
  color: var(--oro-ink);
  display: inline-flex;
  font-size: 12px;
  font-weight: 800;
  padding: 4px 9px;
}

.pill.soft {
  background: var(--oro-soft);
  border: 1px solid var(--oro-line);
}

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

.service-row {
  background: var(--oro-white);
  border: 1px solid var(--oro-line);
  border-radius: 8px;
  padding: 14px;
}

.service-row h3 {
  color: var(--oro-ink);
  margin: 0 0 4px;
}

.service-meta {
  color: rgba(35, 33, 31, 0.78);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin-top: 8px;
}

.muted {
  color: rgba(35, 33, 31, 0.68);
}

.field.compact {
  gap: 5px;
  margin-bottom: 12px;
}

.field.compact span,
.checkbox-line {
  font-size: 13px;
  font-weight: 700;
}

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

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

.checkbox-line {
  align-items: center;
  background: var(--oro-soft);
  border: 1px solid var(--oro-line);
  border-radius: 8px;
  display: flex;
  gap: 8px;
  min-height: 48px;
  padding: 10px 12px;
}

.form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.inline-filter {
  min-width: 220px;
}

.inline-filter select {
  border: 1px solid var(--oro-line);
  border-radius: 8px;
  font: inherit;
  padding: 10px 12px;
  width: 100%;
}

.service-table-wrap {
  border: 1px solid var(--oro-line);
  border-radius: 8px;
  max-width: 100%;
  overflow-x: auto;
}

.service-table {
  min-width: 900px;
}

.service-table th {
  background: var(--oro-soft);
  position: sticky;
  top: 0;
}

.service-table td {
  vertical-align: top;
}

.table-note {
  color: rgba(35, 33, 31, 0.62);
  display: block;
  font-size: 12px;
  line-height: 1.45;
  margin-top: 4px;
  max-width: 360px;
}

.table-actions {
  align-items: center;
  display: flex;
  gap: 10px;
}

.text-action,
.link-danger {
  background: transparent;
  border: 0;
  color: var(--oro-rose);
  cursor: pointer;
  font: inherit;
  font-weight: 800;
  padding: 0;
}

.link-danger {
  color: #9d3131;
}

.service-management {
  background:
    linear-gradient(180deg, rgba(227, 234, 232, 0.28), rgba(250, 250, 249, 0) 260px),
    var(--oro-soft);
}

.services-topbar {
  background: rgba(255, 255, 255, 0.92);
}

.services-command-bar,
.editor-header {
  align-items: center;
  display: flex;
  gap: 18px;
  justify-content: space-between;
  margin-bottom: 18px;
}

.services-command-bar h1,
.editor-header h1 {
  color: var(--oro-ink);
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.1;
  margin: 0 0 4px;
}

.services-command-bar p,
.editor-header p {
  margin: 0;
}

.services-filter-bar {
  align-items: end;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(240px, 420px) auto;
  margin-bottom: 18px;
}

.search-box {
  display: grid;
  gap: 6px;
}

.search-box span {
  color: rgba(35, 33, 31, 0.68);
  font-size: 13px;
  font-weight: 800;
}

.search-box input {
  background: var(--oro-white);
  border: 1px solid var(--oro-line);
  border-radius: 8px;
  box-shadow: 0 10px 26px rgba(35, 33, 31, 0.04);
  font: inherit;
  min-height: 48px;
  padding: 12px 16px;
}

.category-tabs {
  display: flex;
  gap: 10px;
  margin-bottom: 18px;
  overflow-x: auto;
  padding-bottom: 6px;
}

.category-tabs a {
  align-items: center;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid var(--oro-line);
  border-radius: 8px;
  color: var(--oro-charcoal);
  display: inline-flex;
  flex: 0 0 auto;
  font-weight: 800;
  gap: 8px;
  min-height: 44px;
  padding: 9px 14px;
}

.category-tabs a.active {
  background: var(--oro-rose);
  border-color: var(--oro-rose);
  color: var(--oro-white);
}

.category-tabs span {
  background: rgba(35, 33, 31, 0.1);
  border-radius: 999px;
  color: inherit;
  font-size: 12px;
  min-width: 26px;
  padding: 2px 8px;
  text-align: center;
}

.service-list-card {
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid var(--oro-line);
  border-radius: 8px;
  box-shadow: 0 18px 44px rgba(35, 33, 31, 0.08);
  padding: clamp(16px, 3vw, 24px);
}

.service-list-heading {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-bottom: 14px;
}

.service-list-heading h2 {
  color: var(--oro-ink);
  font-size: 26px;
  margin: 0 0 2px;
}

.service-list-heading p {
  margin: 0;
}

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

.management-service-card {
  align-items: stretch;
  background: rgba(250, 250, 249, 0.78);
  border: 1px solid rgba(62, 92, 88, 0.52);
  border-radius: 8px;
  display: grid;
  gap: 12px;
  grid-template-columns: 100px 1fr;
  min-height: 104px;
  padding: 10px;
}

.management-service-card:hover {
  border-color: var(--oro-rose);
  box-shadow: 0 16px 36px rgba(35, 33, 31, 0.08);
}

.service-thumb {
  align-items: center;
  background: linear-gradient(135deg, var(--oro-blush), rgba(62, 92, 88, 0.34));
  border-radius: 8px;
  color: var(--oro-rose);
  display: flex;
  font-family: Georgia, serif;
  font-size: 30px;
  font-weight: 800;
  justify-content: center;
  min-height: 84px;
}

.service-card-body {
  align-items: center;
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(0, 1fr) minmax(180px, auto);
}

.service-card-main h3 {
  color: var(--oro-ink);
  font-size: 19px;
  line-height: 1.25;
  margin: 0 0 4px;
}

.service-card-main p {
  color: rgba(35, 33, 31, 0.72);
  font-size: 13px;
  line-height: 1.45;
  margin: 8px 0 0;
  max-width: 720px;
}

.service-badges {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.service-badges span {
  background: rgba(227, 234, 232, 0.64);
  border-radius: 999px;
  color: var(--oro-charcoal);
  font-size: 12px;
  font-weight: 800;
  padding: 3px 9px;
}

.service-badges .status-badge {
  background: #e6f7e9;
  color: #247437;
}

.service-card-side {
  align-items: end;
  display: grid;
  gap: 6px;
  justify-items: end;
}

.service-card-side > span {
  color: rgba(35, 33, 31, 0.66);
  font-size: 13px;
  font-weight: 800;
}

.service-card-side strong {
  color: var(--oro-ink);
  font-size: 18px;
  white-space: nowrap;
}

.service-actions-menu {
  align-items: center;
  display: flex;
  gap: 12px;
}

.service-actions-menu a {
  color: var(--oro-rose);
  font-weight: 900;
}

.empty-state {
  align-items: center;
  border: 1px dashed var(--oro-line);
  border-radius: 8px;
  color: rgba(35, 33, 31, 0.72);
  display: grid;
  justify-items: center;
  min-height: 160px;
  padding: 24px;
  text-align: center;
}

.empty-state strong {
  color: var(--oro-ink);
  font-size: 18px;
}

.editor-actions {
  display: flex;
  gap: 10px;
}

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

.service-editor-stack {
  display: grid;
  gap: 18px;
  grid-column: 1;
  grid-row: 2;
}

.editor-card {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid var(--oro-line);
  border-radius: 8px;
  box-shadow: 0 16px 40px rgba(35, 33, 31, 0.07);
  padding: clamp(18px, 3vw, 30px);
}

.editor-card-title {
  align-items: start;
  display: flex;
  gap: 14px;
  margin-bottom: 22px;
}

.section-icon {
  align-items: center;
  background: var(--oro-rose);
  border-radius: 999px;
  color: var(--oro-white);
  display: inline-flex;
  flex: 0 0 38px;
  font-weight: 900;
  height: 38px;
  justify-content: center;
  width: 38px;
}

.editor-card h2 {
  color: var(--oro-ink);
  font-size: 24px;
  line-height: 1.2;
  margin: 0 0 4px;
}

.editor-card p {
  margin: 0;
}

.service-image-uploader {
  align-items: center;
  background: linear-gradient(135deg, rgba(227, 234, 232, 0.74), rgba(250, 250, 249, 0.95));
  border: 1px dashed rgba(62, 92, 88, 0.7);
  border-radius: 8px;
  cursor: pointer;
  display: grid;
  gap: 4px;
  justify-items: center;
  margin-bottom: 22px;
  max-width: 260px;
  min-height: 190px;
  padding: 20px;
  text-align: center;
}

.service-image-uploader img,
.service-image-uploader span {
  align-items: center;
  background: var(--oro-white);
  border-radius: 999px;
  color: var(--oro-rose);
  display: flex;
  font-family: Georgia, serif;
  font-size: 60px;
  font-weight: 800;
  height: 150px;
  justify-content: center;
  object-fit: cover;
  width: 150px;
}

.service-image-uploader input {
  font-size: 12px;
  max-width: 100%;
}

.new-category-panel {
  background: rgba(227, 234, 232, 0.35);
  border: 1px dashed rgba(62, 92, 88, 0.5);
  border-radius: 8px;
  margin: 4px 0 18px;
  padding: 14px 16px;
}

.new-category-panel summary {
  color: var(--oro-ink);
  cursor: pointer;
  font-weight: 600;
}

.new-category-panel p {
  color: rgba(35, 33, 31, 0.64);
  font-size: 12px;
  margin: 6px 0 12px;
}

.new-category-panel .form-grid,
.new-category-panel .field {
  margin-top: 12px;
}

.service-image-uploader strong {
  color: var(--oro-ink);
}

.service-image-uploader small,
.price-option-box p,
.team-placeholder span {
  color: rgba(35, 33, 31, 0.64);
}

.editor-checkbox {
  margin: 0 0 18px;
}

.ai-photo-generator {
  background: rgba(227, 234, 232, 0.35);
  border: 1px dashed rgba(62, 92, 88, 0.5);
  border-radius: 8px;
  margin: 0 0 22px;
  max-width: 420px;
  padding: 12px 16px;
}

.ai-photo-generator-row {
  display: flex;
  gap: 8px;
}

.ai-photo-generator-row input[type="text"] {
  flex: 1;
}

.ai-photo-generator [data-ai-status] {
  color: rgba(35, 33, 31, 0.64);
  display: block;
  font-size: 12px;
  margin-top: 6px;
  min-height: 14px;
}

.service-image-row {
  align-items: stretch;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 22px;
}

.service-image-row .service-image-uploader,
.service-image-row .ai-photo-generator {
  margin-bottom: 0;
}

.service-image-row .ai-photo-generator {
  flex: 1 1 260px;
}

.ai-spinner {
  animation: oro-spin 0.7s linear infinite;
  border: 2px solid rgba(62, 92, 88, 0.25);
  border-radius: 999px;
  border-top-color: var(--oro-rose);
  display: inline-block;
  height: 14px;
  margin-right: 7px;
  vertical-align: -2px;
  width: 14px;
}

@keyframes oro-spin {
  to {
    transform: rotate(360deg);
  }
}

.editor-save-btn[disabled],
.ai-generate-btn[disabled] {
  cursor: wait;
  opacity: 0.85;
}

.image-upload-progress {
  background: rgba(62, 92, 88, 0.15);
  border-radius: 999px;
  display: block;
  height: 6px;
  margin-top: 10px;
  overflow: hidden;
  width: 100%;
}

.image-upload-progress[hidden] {
  display: none;
}

.image-upload-progress .bar {
  animation: oro-upload-progress 1.1s ease-in-out infinite;
  background: var(--oro-rose);
  border-radius: 999px;
  display: block;
  height: 100%;
  width: 40%;
}

@keyframes oro-upload-progress {
  0% {
    margin-left: -40%;
  }
  100% {
    margin-left: 100%;
  }
}

.service-image-uploader.photo-pending {
  border-color: var(--oro-sage);
  border-style: solid;
}
.photo-status-pill {
  border-radius: 999px;
  display: inline-flex;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  margin-top: 2px;
  padding: 3px 9px;
}
.photo-status-pill[hidden] {
  display: none;
}
.photo-status-pill.pending {
  background: #F4EBD9;
  color: #8A5A2E;
}
.photo-status-pill.saving {
  background: rgba(62, 92, 88, 0.15);
  color: var(--oro-rose);
}
.price-option-box,
.team-placeholder {
  align-items: center;
  border: 1px dashed var(--oro-line);
  border-radius: 8px;
  display: flex;
  gap: 16px;
  justify-content: space-between;
  padding: 18px;
}

.price-options-panel {
  border: 1px solid rgba(35, 33, 31, 0.12);
  border-radius: 8px;
  display: grid;
  gap: 18px;
  padding: 22px;
}

.price-options-heading {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.price-options-heading strong {
  color: var(--oro-ink);
  display: block;
  font-size: 19px;
  margin-bottom: 2px;
}

.price-option-add {
  min-height: 44px;
  white-space: nowrap;
}

.price-option-card {
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid var(--oro-line);
  border-radius: 8px;
  display: grid;
  gap: 18px;
  padding: 18px;
}

.price-option-card-head {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.price-option-card h3 {
  color: var(--oro-ink);
  font-size: 18px;
  line-height: 1.2;
  margin: 0;
}

.price-option-fields {
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(220px, 1fr) minmax(180px, 1fr);
}

.price-option-fields label {
  display: grid;
  gap: 7px;
}

.price-option-fields label:last-child {
  max-width: 220px;
}

.price-option-fields span {
  color: var(--oro-ink);
  font-size: 14px;
  font-weight: 900;
}

.price-option-fields input,
.price-option-fields select {
  background: var(--oro-white);
  border: 1px solid var(--oro-line);
  border-radius: 8px;
  font: inherit;
  min-height: 48px;
  padding: 10px 14px;
  width: 100%;
}

.price-option-delete,
.price-option-remove-new {
  align-items: center;
  background: transparent;
  border: 0;
  color: #cc3f3f;
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-weight: 900;
  gap: 8px;
  padding: 0;
}

.price-option-delete input {
  min-height: auto;
  width: auto;
}

.new-option-card.is-hidden {
  display: none;
}

.addon-groups-panel {
  display: grid;
  gap: 16px;
}

.addon-group-card {
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid rgba(62, 92, 88, 0.32);
  border-radius: 8px;
  display: grid;
  gap: 16px;
  padding: 18px;
}

.addon-group-card.is-hidden {
  display: none;
}

.addon-group-head {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.addon-group-head strong {
  color: var(--oro-ink);
  font-size: 18px;
}

.addon-option-list {
  display: grid;
  gap: 10px;
}

.addon-option-row {
  align-items: end;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(220px, 1fr) minmax(150px, 220px) auto;
}

.addon-option-row .field {
  margin: 0;
}

.addon-option-row input[type="text"],
.addon-option-row input[type="number"] {
  min-height: 50px;
}

.addon-option-remove {
  align-items: center;
  color: #cc3f3f;
  display: inline-flex;
  font-size: 13px;
  font-weight: 900;
  gap: 7px;
  min-height: 50px;
  white-space: nowrap;
}

.addon-group-add {
  justify-self: start;
}

.team-placeholder {
  align-items: start;
  background: var(--oro-soft);
  display: grid;
}

.team-assignment-panel {
  border: 1px solid rgba(35, 33, 31, 0.12);
  border-radius: 8px;
  display: grid;
  gap: 14px;
  padding: 18px;
}

.team-member-live-search {
  margin-bottom: 0;
  max-width: none;
}

.team-assignment-toolbar {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.team-assignment-no-matches {
  background: var(--oro-soft);
  border-radius: 8px;
  color: rgba(35, 33, 31, 0.66);
  font-size: 13px;
  margin: 0;
  padding: 14px;
  text-align: center;
}

.assignment-count {
  background: rgba(62, 92, 88, 0.18);
  border: 1px solid rgba(62, 92, 88, 0.32);
  border-radius: 999px;
  color: var(--oro-ink);
  flex: 0 0 auto;
  font-size: 13px;
  font-weight: 900;
  padding: 5px 10px;
}

.team-assignment-note {
  color: rgba(35, 33, 31, 0.66);
  font-size: 13px;
  margin: 0;
}

.service-eligibility-category-label {
  color: rgba(35, 33, 31, 0.6);
  display: block;
  font-weight: 700;
  letter-spacing: 0.03em;
  margin: 10px 0 -2px;
  text-transform: uppercase;
}

.service-eligibility-category-label:first-child {
  margin-top: 0;
}

.team-management {
  background:
    linear-gradient(180deg, rgba(227, 234, 232, 0.28), rgba(250, 250, 249, 0) 260px),
    var(--oro-soft);
}

.team-page-grid {
  align-items: start;
  display: grid;
  gap: 20px;
  grid-template-columns: minmax(320px, 0.38fr) minmax(0, 0.62fr);
}

.team-form-card {
  position: sticky;
  top: 100px;
}

.team-form-card .form-grid.two {
  gap: 0;
  grid-template-columns: 1fr;
}

.team-form-card .field input,
.team-form-card .field select {
  min-width: 0;
  width: 100%;
}

.team-card-list,
.team-assignment-list {
  display: grid;
  gap: 12px;
}

.team-card {
  align-items: center;
  background: rgba(250, 250, 249, 0.78);
  border: 1px solid rgba(62, 92, 88, 0.42);
  border-radius: 8px;
  display: grid;
  gap: 14px;
  grid-template-columns: auto minmax(0, 1fr) auto;
  padding: 14px;
}

.team-card h3 {
  color: var(--oro-ink);
  font-size: 18px;
  line-height: 1.25;
  margin: 0;
}

.team-card p {
  margin: 2px 0 8px;
}

.payroll-defaults-panel {
  background: rgba(227, 234, 232, 0.24);
  border: 1px solid rgba(62, 92, 88, 0.34);
  border-radius: 8px;
  display: grid;
  gap: 16px;
  margin-top: 18px;
  padding: 18px;
}

.payroll-defaults-panel strong {
  color: var(--oro-ink);
  display: block;
  font-size: 18px;
  margin-bottom: 2px;
}

.payroll-defaults-panel p {
  color: rgba(35, 33, 31, 0.7);
  font-size: 14px;
  margin: 0;
}

.payroll-defaults-panel .form-grid.two {
  gap: 12px;
  grid-template-columns: 1fr;
}

.payroll-defaults-panel .field {
  margin-bottom: 0;
}

.payroll-defaults-panel .field span {
  color: var(--oro-ink);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.35;
}

.payroll-defaults-panel .field input {
  min-height: 48px;
  width: 100%;
}

.payroll-defaults-panel .field select {
  min-height: 48px;
}

.commission-rate-field small {
  color: var(--muted);
  display: block;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.45;
  margin-top: 7px;
}

.employee-code-field small {
  color: var(--muted);
  display: block;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.45;
  margin-top: 7px;
}

.commission-rate-help {
  background: rgba(255, 255, 255, .72);
  border-left: 3px solid var(--oro-rose);
  border-radius: 6px;
  color: var(--muted) !important;
  font-size: 12px !important;
  line-height: 1.55;
  padding: 11px 12px;
}

.commission-rate-help strong {
  color: var(--oro-ink);
  display: inline;
  font-size: inherit;
  margin: 0;
}

.team-form-card .form-actions {
  align-items: stretch;
  border-top: 1px solid var(--oro-line);
  gap: 12px;
  margin-top: 20px;
  padding-top: 20px;
}

.team-form-card .form-actions > button,
.team-form-card .form-actions > .button {
  align-items: center;
  display: inline-flex;
  justify-content: center;
  margin: 0;
  min-height: 50px;
  padding: 12px 22px;
}

.team-form-card .form-actions > button {
  flex: 1 1 210px;
}

.team-form-card .form-actions > .button {
  flex: 0 0 120px;
}

.allowance-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 10px;
}

.allowance-summary span {
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(62, 92, 88, 0.28);
  border-radius: 8px;
  color: rgba(35, 33, 31, 0.78);
  font-size: 12px;
  font-weight: 800;
  padding: 4px 8px;
}

/* Team Members �� category board (drag a card between columns to reclassify) */
.staff-board {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  padding-bottom: 6px;
}

.staff-column {
  background: rgba(242, 241, 239, 0.6);
  border-radius: var(--oro-radius-sm);
  display: flex;
  flex: 0 0 260px;
  flex-direction: column;
  max-width: 260px;
  min-width: 260px;
}

.staff-column-head {
  align-items: center;
  color: var(--oro-ink-soft);
  display: flex;
  font-size: 11px;
  font-weight: 800;
  justify-content: space-between;
  letter-spacing: 0.05em;
  padding: 10px 12px 6px;
  text-transform: uppercase;
}

.staff-column-count {
  background: var(--oro-white);
  border: 1px solid var(--oro-line);
  border-radius: 100px;
  color: var(--oro-ink);
  font-size: 11px;
  min-width: 20px;
  padding: 1px 7px;
  text-align: center;
}

.staff-column-body {
  border-radius: var(--oro-radius-sm);
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 8px;
  min-height: 64px;
  padding: 4px 8px 10px;
  transition: background-color 0.12s ease;
}

.staff-column-body.is-drop-target {
  background: var(--oro-accent-tint);
  outline: 2px dashed var(--oro-rose);
  outline-offset: -4px;
}

.staff-card {
  background: var(--oro-white);
  border: 1px solid var(--oro-line);
  border-radius: 10px;
  cursor: grab;
  padding: 10px 11px;
  transition: box-shadow 0.12s ease, border-color 0.12s ease, opacity 0.12s ease;
}

.staff-card:active {
  cursor: grabbing;
}

.staff-card.is-dragging {
  opacity: 0.4;
}

.staff-card.is-pending {
  opacity: 0.6;
  pointer-events: none;
}

.staff-card-top {
  align-items: center;
  display: flex;
  gap: 9px;
}

.staff-card-handle {
  color: var(--oro-ink-faint);
  flex: none;
  font-size: 11px;
}

.staff-card .team-avatar {
  flex: none;
  font-size: 12px;
  height: 32px;
  width: 32px;
}

.staff-card-name {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.staff-card-name strong {
  color: var(--oro-ink);
  font-size: 14px;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.staff-card-name span {
  color: var(--oro-ink-soft);
  font-size: 11.5px;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.staff-card-flags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 8px;
}

.staff-card-flags .warn {
  background: rgba(154, 123, 46, 0.14);
  border-radius: 6px;
  color: #8a7a4f;
  font-size: 10.5px;
  font-weight: 700;
  padding: 3px 7px;
}

.staff-card-actions {
  align-items: center;
  border-top: 1px solid var(--oro-line);
  display: flex;
  gap: 14px;
  margin-top: 9px;
  padding-top: 8px;
}

.staff-card-actions a {
  color: var(--oro-rose);
  font-size: 12px;
  font-weight: 700;
}

.staff-card-actions form {
  margin: 0;
}

.staff-card-actions .link-danger {
  font-size: 12px;
}

.staff-board-toast {
  background: var(--oro-charcoal);
  border-radius: 8px;
  color: var(--oro-white);
  font-size: 13px;
  margin-top: 12px;
  padding: 9px 14px;
}

@media (max-width: 760px) {
  .staff-column {
    flex-basis: 220px;
    max-width: 220px;
    min-width: 220px;
  }
}

/* Add/Edit Team Member �� multi-step wizard modal (Option C) */
body.staff-modal-open {
  overflow: hidden;
}

.staff-modal-overlay {
  align-items: center;
  background: rgba(29, 28, 27, 0.42);
  display: flex;
  inset: 0;
  justify-content: center;
  padding: 24px;
  position: fixed;
  z-index: 60;
}

/* The [hidden] attribute is normally handled by the browser's own default
   stylesheet, but author rules always take precedence over it regardless of
   selector specificity �� so the modal's own `display: flex` (and the global
   `button { display: inline-flex }` rule) would otherwise keep these elements
   visible even while [hidden] is set. Restate it explicitly here. */
.staff-modal-overlay[hidden],
.wizard-panel[hidden],
#wizardBackButton[hidden],
#wizardSaveButton[hidden] {
  display: none !important;
}

.staff-modal {
  background: var(--oro-white);
  border-radius: 14px;
  box-shadow: 0 24px 48px -16px rgba(29, 28, 27, 0.35);
  display: flex;
  flex-direction: column;
  max-height: min(720px, 92vh);
  max-width: 560px;
  overflow: hidden;
  width: 100%;
}

.staff-modal form {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.staff-modal-head {
  border-bottom: 1px solid var(--oro-line);
  flex: none;
  padding: 18px 24px 16px;
}

.staff-modal-head-top {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-bottom: 14px;
}

.staff-modal-head-top h2 {
  color: var(--oro-ink);
  font-size: 22px;
  margin: 0;
}

.staff-modal-close {
  background: transparent;
  border: none;
  color: var(--oro-ink-faint);
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
  padding: 4px;
}

.staff-modal-close:hover {
  color: var(--oro-ink);
}

.wizard-progress {
  align-items: flex-start;
  display: flex;
}

.wizard-step {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: none;
  width: 92px;
}

.wizard-step-dot {
  align-items: center;
  background: var(--oro-sunken);
  border-radius: 50%;
  color: var(--oro-ink-soft);
  display: flex;
  font-size: 12px;
  font-weight: 800;
  height: 24px;
  justify-content: center;
  width: 24px;
}

.wizard-step-label {
  color: var(--oro-ink-faint);
  font-size: 11px;
  font-weight: 700;
  text-align: center;
}

.wizard-step.is-active .wizard-step-dot {
  background: var(--oro-rose);
  color: var(--oro-white);
}

.wizard-step.is-active .wizard-step-label {
  color: var(--oro-ink);
}

.wizard-step.is-done .wizard-step-dot {
  background: var(--oro-blush);
  color: var(--oro-rose);
}

.wizard-step.is-done .wizard-step-label {
  color: var(--oro-ink-soft);
}

.wizard-connector {
  background: var(--oro-line);
  flex: 1 1 auto;
  height: 2px;
  margin-top: 12px;
}

.staff-modal-body {
  overflow-y: auto;
  padding: 20px 24px;
}

.staff-modal-body .form-grid.two {
  gap: 0;
  grid-template-columns: 1fr;
}

.staff-modal-body .field input,
.staff-modal-body .field select {
  min-width: 0;
  width: 100%;
}

.staff-modal-footer {
  align-items: center;
  border-top: 1px solid var(--oro-line);
  display: flex;
  flex: none;
  justify-content: space-between;
  padding: 16px 24px;
}

.wizard-step-caption {
  color: var(--oro-ink-faint);
  font-size: 12px;
  font-weight: 700;
}

.staff-modal-footer-actions {
  display: flex;
  gap: 10px;
}

@media (max-width: 640px) {
  .staff-modal-overlay {
    padding: 0;
  }

  .staff-modal {
    border-radius: 0;
    max-height: 100vh;
    max-width: none;
    height: 100%;
  }

  .wizard-step {
    width: 72px;
  }

  .wizard-step-label {
    font-size: 10px;
  }
}

.customer-management {
  background:
    linear-gradient(180deg, rgba(227, 234, 232, 0.28), rgba(250, 250, 249, 0) 260px),
    var(--oro-soft);
}

.customer-page-grid {
  grid-template-columns: minmax(340px, 0.36fr) minmax(0, 0.64fr);
}

.customer-form-card {
  position: sticky;
  top: 100px;
}

.customer-discount-panel {
  background: rgba(62, 92, 88, 0.1);
  border: 1px solid rgba(62, 92, 88, 0.32);
  border-radius: 8px;
  display: grid;
  gap: 14px;
  margin: 18px 0;
  padding: 18px;
}

.customer-discount-panel strong {
  color: var(--oro-ink);
  display: block;
  font-size: 18px;
  margin-bottom: 2px;
}

.customer-discount-panel p {
  color: rgba(35, 33, 31, 0.7);
  font-size: 14px;
  margin: 0;
}

.customer-discount-panel .field {
  margin-bottom: 0;
}

.customer-filter-bar {
  align-items: end;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(220px, 1fr) minmax(180px, 220px) auto;
  margin-bottom: 18px;
}

.customer-filter-bar .field {
  margin-bottom: 0;
}

.customer-card {
  align-items: start;
}

.customer-card .team-avatar {
  margin-top: 3px;
}

.customer-stats span {
  background: rgba(250, 250, 249, 0.86);
}

.customer-note {
  color: rgba(35, 33, 31, 0.7);
  font-size: 13px;
  margin-top: 8px;
  max-width: 720px;
}

.customer-topbar {
  background: rgba(255, 255, 255, 0.96);
}

.customer-list-header {
  align-items: end;
  display: flex;
  gap: 18px;
  justify-content: space-between;
  margin-bottom: 20px;
}

.customer-list-header h1 {
  color: var(--oro-ink);
  font-size: clamp(30px, 4vw, 46px);
  line-height: 1.05;
  margin: 0 0 6px;
}

.customer-list-header p {
  color: rgba(35, 33, 31, 0.72);
  margin: 0;
}

.customer-header-actions,
.customer-row-actions {
  align-items: center;
  display: flex;
  gap: 10px;
}

.customer-header-actions .button {
  min-height: 44px;
  white-space: nowrap;
}

.customer-search-row {
  align-items: end;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(280px, 420px) minmax(190px, 240px) auto;
  margin-bottom: 16px;
}

.customer-search-field,
.customer-type-field {
  display: grid;
  gap: 7px;
}

.customer-search-field span,
.customer-type-field span {
  color: rgba(35, 33, 31, 0.82);
  font-size: 13px;
  font-weight: 800;
}

.customer-search-field input,
.customer-type-field select,
.customer-modal-form input,
.customer-modal-form select,
.customer-modal-form textarea {
  background: var(--oro-white);
  border: 1px solid var(--oro-line);
  border-radius: 8px;
  color: var(--oro-ink);
  font: inherit;
  min-height: 50px;
  padding: 12px 14px;
  width: 100%;
}

.customer-search-field input,
.customer-type-field select,
.customer-search-row button {
  align-items: center;
  display: flex;
  height: 56px;
  line-height: 1.2;
  min-height: 56px;
}

.customer-type-field select {
  appearance: auto;
  padding-bottom: 0;
  padding-top: 0;
}

.customer-search-row button {
  justify-content: center;
  margin: 0;
  padding-bottom: 0;
  padding-top: 0;
  width: 100%;
}

.customer-name-link {
  color: inherit;
  text-decoration: none;
}

.customer-name-link:hover strong,
.customer-name-link:focus-visible strong {
  color: var(--oro-sage);
  text-decoration: underline;
}

.customer-history-modal {
  max-width: 560px;
}

.customer-history-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 16px;
  max-height: 60vh;
  overflow-y: auto;
}

.customer-history-row {
  background: var(--oro-white);
  border: 1px solid var(--oro-line);
  border-radius: var(--oro-radius-sm, 8px);
  padding: 12px 14px;
}

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

.customer-history-badge {
  background: rgba(139, 154, 108, 0.14);
  border-radius: 999px;
  color: var(--oro-sage);
  font-size: 12px;
  font-weight: 600;
  padding: 3px 10px;
  white-space: nowrap;
}

.customer-history-row-meta {
  color: var(--oro-ink-soft);
  display: flex;
  flex-wrap: wrap;
  font-size: 13px;
  gap: 4px 12px;
  margin-top: 6px;
}

.customer-history-empty {
  color: var(--oro-ink-soft);
  padding: 24px 4px;
  text-align: center;
}

.customer-table-card {
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--oro-line);
  border-radius: 8px;
  box-shadow: 0 18px 42px rgba(35, 33, 31, 0.07);
  overflow: hidden;
}

.customer-table-wrap {
  max-width: 100%;
  overflow-x: auto;
}

.customer-table {
  border-collapse: collapse;
  min-width: 980px;
  width: 100%;
}

.customer-table th,
.customer-table td {
  border-bottom: 1px solid rgba(35, 33, 31, 0.1);
  padding: 18px 20px;
  text-align: left;
  vertical-align: middle;
}

.customer-table th {
  color: rgba(35, 33, 31, 0.66);
  font-size: 13px;
  font-weight: 900;
}

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

.customer-identity {
  align-items: center;
  display: flex;
  gap: 14px;
  min-width: 260px;
}

.customer-identity strong,
.customer-identity small {
  display: block;
}

.customer-identity strong {
  color: var(--oro-ink);
  line-height: 1.25;
}

.customer-identity small {
  color: rgba(35, 33, 31, 0.64);
  font-size: 13px;
  line-height: 1.4;
  margin-top: 2px;
}

.customer-avatar {
  align-items: center;
  background: #f1f3f5;
  border: 2px solid rgba(62, 92, 88, 0.5);
  border-radius: 999px;
  color: var(--oro-ink);
  display: inline-flex;
  flex: 0 0 58px;
  font-size: 14px;
  font-weight: 900;
  height: 58px;
  justify-content: center;
  width: 58px;
}

.customer-membership,
.customer-points {
  color: #9f4bf2;
  display: block;
  font-weight: 900;
}

.customer-discount-text {
  color: rgba(35, 33, 31, 0.62);
  display: block;
  font-size: 12px;
  margin-top: 2px;
}

.customer-row-actions {
  justify-content: flex-start;
  white-space: nowrap;
}

.customer-row-actions a,
.customer-row-actions button {
  background: transparent;
  border: 0;
  color: var(--oro-rose);
  font: inherit;
  font-weight: 900;
  min-height: auto;
  padding: 0;
}

.customer-row-actions .link-danger {
  color: #9d3131;
}

.customer-empty-state {
  align-items: center;
  border: 1px dashed var(--oro-line);
  border-radius: 8px;
  color: rgba(35, 33, 31, 0.65);
  display: grid;
  gap: 10px;
  justify-items: center;
  min-height: 190px;
  padding: 28px;
  text-align: center;
}

.customer-empty-state strong {
  color: var(--oro-ink);
  font-size: 18px;
}

.customer-modal-backdrop {
  align-items: start;
  background: rgba(29, 28, 27, 0.4);
  display: grid;
  inset: 0;
  justify-items: center;
  overflow-y: auto;
  padding: 36px 18px;
  position: fixed;
  z-index: 50;
}

.customer-modal {
  background: var(--oro-white);
  border: 1px solid var(--oro-line);
  border-radius: 8px;
  box-shadow: 0 28px 80px rgba(29, 28, 27, 0.26);
  max-width: 920px;
  padding: clamp(20px, 3vw, 30px);
  width: min(920px, 100%);
}

.customer-modal-header {
  align-items: start;
  border-bottom: 1px solid var(--oro-line);
  display: flex;
  gap: 18px;
  justify-content: space-between;
  margin-bottom: 22px;
  padding-bottom: 18px;
}

.customer-modal-header h2 {
  color: var(--oro-ink);
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.1;
  margin: 0 0 6px;
}

.customer-modal-header p {
  color: rgba(35, 33, 31, 0.68);
  margin: 0;
}

.customer-modal-close {
  border: 1px solid var(--oro-rose);
  border-radius: 8px;
  color: var(--oro-rose);
  flex: 0 0 auto;
  font-weight: 900;
  min-height: 44px;
  padding: 10px 18px;
}

.customer-modal-form {
  display: grid;
  gap: 14px;
}

.customer-modal-form .field {
  margin-bottom: 0;
}

.customer-modal-discount {
  background: rgba(227, 234, 232, 0.18);
  border: 1px solid rgba(62, 92, 88, 0.3);
  border-radius: 8px;
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: 18px;
}

.customer-modal-actions {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  padding-top: 8px;
}

.product-management,
.inventory-management {
  background:
    radial-gradient(circle at top right, rgba(62, 92, 88, 0.14), transparent 34%),
    #F8FAFA;
}

.product-search-row {
  align-items: end;
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(260px, 1.4fr) minmax(170px, 0.65fr) minmax(190px, 0.8fr) minmax(150px, 0.6fr) minmax(140px, 0.45fr);
  margin: 24px 0;
}

.product-search-row label {
  color: #6F6D6A;
  display: grid;
  font-weight: 700;
  gap: 8px;
}

.product-search-row input,
.product-search-row select,
.product-search-row button,
.inventory-form input,
.inventory-form select,
.inventory-form textarea {
  border: 1px solid #E5E2DF;
  border-radius: 8px;
  font: inherit;
  min-height: 54px;
  padding: 0 16px;
  width: 100%;
}

.product-search-row button {
  background: #A9C7C2;
  color: #fff;
  cursor: pointer;
  font-weight: 800;
}

.product-table td {
  vertical-align: middle;
}

.product-table th:first-child,
.product-table td:first-child {
  min-width: 260px;
  width: 260px;
}

.product-table .customer-name-cell {
  align-items: center;
  display: flex;
  gap: 14px;
}

.product-name-copy {
  min-width: 0;
}

.product-name-copy strong {
  display: block;
  line-height: 1.35;
}

.product-photo {
  border: 2px solid rgba(62, 92, 88, 0.5);
  border-radius: 12px;
  flex: 0 0 64px;
  height: 64px;
  object-fit: cover;
  width: 64px;
}

.stock-badge {
  border: 1px solid #DFE6E5;
  border-radius: 999px;
  display: inline-flex;
  font-size: 12px;
  font-weight: 800;
  margin-left: 8px;
  padding: 4px 9px;
}

.stock-badge-ready {
  background: #ecf8ef;
  border-color: #bfe6c8;
  color: #287a3f;
}

.stock-badge-low {
  background: #fff6df;
  border-color: #f1d995;
  color: #93610d;
}

.stock-badge-out {
  background: #F4FAFB;
  border-color: #D0E4E4;
  color: #568889;
}

.customer-modal.product-modal {
  max-width: 1120px;
  width: min(1120px, 100%);
}

.product-modal-form {
  gap: 18px;
}

.product-identity-layout {
  align-items: start;
  display: grid;
  gap: 20px;
  grid-template-columns: 190px minmax(0, 1fr);
}

.product-identity-fields {
  display: grid;
  gap: 16px;
}

.product-photo-uploader {
  align-items: center;
  background: #FAFDFD;
  border: 1px dashed rgba(62, 92, 88, 0.72);
  border-radius: 10px;
  cursor: pointer;
  display: grid;
  gap: 7px;
  justify-items: center;
  min-height: 210px;
  padding: 16px;
  text-align: center;
}

.product-photo-uploader img,
.product-photo-uploader > span {
  align-items: center;
  background: #fff;
  border: 2px solid rgba(62, 92, 88, 0.5);
  border-radius: 14px;
  display: flex;
  height: 112px;
  justify-content: center;
  object-fit: cover;
  width: 112px;
}

.product-photo-uploader input {
  font-size: 12px;
  max-width: 100%;
}

.product-photo-uploader small,
.content-per-unit-preview {
  color: #817D79;
  font-size: 12px;
}

.stock-edit-guidance {
  color: #817D79;
  font-size: 12px;
}

.stock-edit-guidance a {
  color: var(--oro-rose);
  font-weight: 800;
}

input[readonly] {
  background: #F3F2F0;
  color: #706C69;
  cursor: not-allowed;
}

.product-name-input {
  font-size: 17px;
  font-weight: 700;
}

.content-per-unit-preview {
  background: #FAFDFD;
  border-radius: 8px;
  margin: -6px 0 0;
  padding: 10px 12px;
}

.supplier-terms-field {
  max-width: 520px;
}

.existing-supplier-field {
  background: #FAFDFD;
  border: 1px solid rgba(62, 92, 88, 0.34);
  border-radius: 10px;
  padding: 14px;
}

.existing-supplier-field small {
  color: #817D79;
  font-size: 12px;
}

.supplier-address-panel {
  background: #F9FBFD;
  border: 1px solid #DDE0E5;
  border-radius: 10px;
  display: grid;
  gap: 14px;
  padding: 16px;
}

.supplier-address-heading {
  display: grid;
  gap: 3px;
}

.supplier-address-heading strong {
  color: var(--oro-ink);
  font-size: 15px;
}

.supplier-address-heading span {
  color: #817D79;
  font-size: 12px;
}

.supplier-address-panel textarea {
  line-height: 1.55;
  min-height: 82px;
  resize: vertical;
}

.product-form-section {
  background: #fff;
  border: 1px solid #DFE6E5;
  border-radius: 8px;
  display: grid;
  gap: 16px;
  padding: 18px;
  position: relative;
}

.product-form-section::before {
  border-radius: 8px 0 0 8px;
  bottom: 14px;
  content: "";
  left: 0;
  position: absolute;
  top: 14px;
  width: 4px;
}

.product-section-identity {
  background: linear-gradient(135deg, #fff, #FBFDFD);
}

.product-section-category {
  background: linear-gradient(135deg, #fff, #F9FBFB);
}

.product-section-supplier {
  background: linear-gradient(135deg, #fff, #fbfaf7);
  border-color: #DCDFE3;
}

.product-section-inventory {
  background: linear-gradient(135deg, #fff, #f8fbfa);
  border-color: #dbe9e5;
}

.product-section-sellable {
  background: linear-gradient(135deg, #fff, #f8f5fb);
  border-color: #e6dcef;
}

.product-section-identity::before {
  background: #A7C4BE;
}

.product-section-category::before {
  background: #E3EAE8;
}

.product-section-supplier::before {
  background: #c9b39c;
}

.product-section-inventory::before {
  background: #83b7a6;
}

.product-section-sellable::before {
  background: #a68bc1;
}

.product-section-heading {
  display: grid;
  gap: 4px;
  padding-left: 8px;
}

.section-kicker {
  color: #7E9F9A;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.product-section-heading h3 {
  color: var(--oro-ink);
  font-size: 20px;
  margin: 0;
}

.product-section-heading p {
  color: #7D7874;
  margin: 4px 0 0;
}

.product-subpanel {
  border: 1px solid #DFE6E5;
  border-radius: 8px;
  display: grid;
  gap: 14px;
  padding: 16px;
}

.product-subpanel-muted {
  background: rgba(255, 255, 255, 0.72);
}

.product-subpanel-accent {
  background: rgba(227, 234, 232, 0.22);
}

.product-subpanel-title {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
}

.product-subpanel-title strong {
  color: var(--oro-ink);
  font-size: 15px;
}

.product-subpanel-title span {
  color: #827E7A;
  font-size: 13px;
}

.field-hint {
  color: rgba(35, 33, 31, 0.62);
  display: block;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
  margin-top: 7px;
}

.label-with-help {
  align-items: center;
  display: inline-flex;
  gap: 8px;
}

.help-popover {
  align-items: center;
  appearance: none;
  background: #fff;
  border: 1px solid rgba(62, 92, 88, 0.62);
  border-radius: 999px;
  color: var(--oro-pink);
  cursor: help;
  display: inline-flex;
  font-size: 11px;
  font-weight: 800;
  height: 20px;
  justify-content: center;
  line-height: 1;
  padding: 0;
  position: relative;
  width: 20px;
}

.help-popover::after {
  background: #23211F;
  border-radius: 8px;
  bottom: calc(100% + 10px);
  box-shadow: 0 14px 35px rgba(35, 33, 31, 0.22);
  color: #fff;
  content: attr(data-help);
  font-size: 12px;
  font-weight: 700;
  left: 50%;
  line-height: 1.45;
  max-width: 270px;
  opacity: 0;
  padding: 10px 12px;
  pointer-events: none;
  position: absolute;
  text-align: left;
  transform: translateX(-50%) translateY(4px);
  transition: opacity 0.16s ease, transform 0.16s ease;
  width: max-content;
  z-index: 40;
}

.help-popover::before {
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 7px solid #23211F;
  bottom: calc(100% + 4px);
  content: "";
  left: 50%;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  transform: translateX(-50%) translateY(4px);
  transition: opacity 0.16s ease, transform 0.16s ease;
  z-index: 41;
}

.help-popover:hover,
.help-popover:focus-visible {
  border-color: var(--oro-pink);
  box-shadow: 0 0 0 4px rgba(62, 92, 88, 0.14);
  outline: none;
}

.help-popover:hover::after,
.help-popover:hover::before,
.help-popover:focus-visible::after,
.help-popover:focus-visible::before {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.sellable-fields[hidden] {
  display: none !important;
}

.product-type-badge {
  border-radius: 999px;
  display: inline-flex;
  font-size: 12px;
  font-weight: 900;
  padding: 5px 10px;
  white-space: nowrap;
}

.product-type-badge-internal {
  background: #F4F6F6;
  color: #7D7874;
}

.product-type-badge-sellable {
  background: #ecf8ef;
  color: #287a3f;
}

.product-type-badge-both {
  background: #fff6df;
  color: #93610d;
}

.product-muted {
  color: rgba(35, 33, 31, 0.58);
  display: block;
  font-size: 12px;
  font-weight: 700;
  margin-top: 3px;
}

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

.inventory-summary-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 24px 0;
}

.inventory-tabs {
  position: sticky;
  top: 85px;
  z-index: 18;
  box-shadow: 0 10px 22px rgba(40, 46, 44, 0.08);
  background: #fff;
  border: 1px solid var(--oro-line);
  border-radius: 14px;
  display: flex;
  gap: 6px;
  margin: 18px 0 24px;
  overflow-x: auto;
  padding: 7px;
  scrollbar-width: thin;
}

.purchase-tabs {
  position: sticky;
  top: 157px;
  z-index: 17;
  display: flex;
  gap: 8px;
  margin: -12px 0 24px;
  padding: 10px;
  overflow-x: auto;
  background: #fff;
  border: 1px solid #E2E7E6;
  border-radius: 14px;
  box-shadow: 0 9px 20px rgba(40, 46, 44, 0.07);
}

.purchase-tab {
  flex: 1 0 max-content;
  padding: 12px 18px;
  border-radius: 10px;
  color: #68625C;
  text-align: center;
  text-decoration: none;
  transition: background-color .18s ease, color .18s ease, transform .18s ease;
}

.purchase-tab:hover {
  color: #607C75;
  background: #F3F8F7;
  transform: translateY(-1px);
}

.purchase-tab.is-active {
  color: #fff;
  background: #A5C2BC;
}

.inventory-tab {
  border-radius: 10px;
  color: #6F6C68;
  flex: 0 0 auto;
  font-size: 14px;
  font-weight: 800;
  padding: 12px 18px;
  text-decoration: none;
  transition: background-color 160ms ease, box-shadow 160ms ease, color 160ms ease, transform 160ms ease;
  white-space: nowrap;
}

a.inventory-tab:hover,
a.inventory-tab:focus-visible {
  background: #EDF4F3;
  box-shadow: 0 5px 14px rgba(62, 92, 88, 0.22);
  color: #678A85;
  outline: none;
  transform: translateY(-1px);
}

a.inventory-tab.is-active,
a.inventory-tab.is-active:hover,
a.inventory-tab.is-active:focus-visible {
  background: var(--oro-rose);
  box-shadow: 0 6px 16px rgba(62, 92, 88, 0.3);
  color: var(--oro-white);
}

[data-inventory-panel][hidden] {
  display: none !important;
}

.inventory-workspace {
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(320px, 0.8fr) minmax(0, 1.2fr);
  margin-bottom: 18px;
}

.stock-count-workspace {
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(300px, 0.75fr) minmax(0, 1.25fr);
  margin-bottom: 18px;
}

.purchase-receiving-workspace {
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(320px, 0.8fr) minmax(0, 1.2fr);
  margin-bottom: 18px;
}

.supplier-payables-workspace {
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(320px, 0.8fr) minmax(0, 1.2fr);
  margin-bottom: 18px;
}

.purchase-returns-workspace {
  display: grid;
  grid-template-columns: minmax(360px, .9fr) minmax(0, 1.35fr);
  gap: 24px;
  align-items: start;
}

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

.return-purchase-info {
  padding: 14px;
  border: 1px solid #E2E7E6;
  border-radius: 12px;
  background: #F9FBFB;
}

.return-purchase-info div,
.return-summary-grid div {
  display: grid;
  gap: 4px;
}

.return-purchase-info span,
.return-summary-grid span,
.return-purchase-info small {
  color: #817B75;
  font-size: .78rem;
}

.return-settlement {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 0;
  padding: 0;
  border: 0;
}

.return-settlement legend {
  grid-column: 1 / -1;
  margin-bottom: 8px;
  font-weight: 600;
}

.return-settlement label {
  display: flex;
  gap: 10px;
  padding: 14px;
  border: 1px solid #E2E7E6;
  border-radius: 12px;
  cursor: pointer;
}

.return-settlement label:hover {
  border-color: #A5C2BC;
  background: #FAFDFD;
}

.return-settlement span {
  display: grid;
  gap: 4px;
}

.return-settlement small {
  color: #817B75;
}

.return-refund-total {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 16px;
  border-radius: 12px;
  background: #F3F8F7;
}

.return-refund-total strong {
  color: #759890;
  font-size: 1.15rem;
}

.return-summary-grid {
  margin: 18px 0;
}

.return-summary-grid div {
  padding: 14px;
  border: 1px solid #E2E7E6;
  border-radius: 12px;
  background: #FBFBFB;
}

.return-settlement-badge {
  display: inline-block;
  padding: 6px 9px;
  border-radius: 999px;
  color: #607C75;
  background: #F3F8F7;
  white-space: nowrap;
}

.purchase-return-audit-note {
  margin: 16px 0 0;
  padding: 12px 14px;
  border-left: 3px solid #A5C2BC;
  background: #F9FBFB;
  color: #746E68;
}

.supplier-payment-form-panel h2,
.supplier-payment-form-panel p,
.supplier-payment-history-panel h2,
.supplier-payment-history-panel p {
  margin-top: 0;
}

.supplier-payment-history-panel small {
  color: #8C8985;
  display: block;
}

.purchase-form-panel h2,
.purchase-form-panel p,
.purchase-history-panel h2,
.purchase-history-panel p {
  margin-top: 0;
}

.purchase-history-panel small {
  color: #8C8985;
  display: block;
}

.payment-status-badge {
  border-radius: 999px;
  display: inline-flex;
  font-size: 12px;
  font-weight: 800;
  padding: 5px 9px;
  white-space: nowrap;
}

.payment-status-paid {
  background: #eaf7ed;
  color: #26743b;
}

.payment-status-partial {
  background: #fff6df;
  color: #8a6418;
}

.payment-status-unpaid {
  background: #F4FAFB;
  color: #568889;
}

.stock-count-form-panel h2,
.stock-count-form-panel p,
.stock-count-history-panel h2,
.stock-count-history-panel p {
  margin-top: 0;
}

.stock-count-history-panel small {
  color: #8C8985;
  display: block;
}

.variance-badge {
  border-radius: 999px;
  display: inline-flex;
  font-size: 12px;
  font-weight: 800;
  padding: 4px 9px;
}

.variance-even {
  background: #eef4f0;
  color: #52705b;
}

.variance-up {
  background: #eaf7ed;
  color: #26743b;
}

.variance-down {
  background: #F4FAFB;
  color: #568889;
}

.historical-stock-panel {
  margin-bottom: 18px;
}

.monthly-snapshot-panel {
  margin-bottom: 18px;
}

.monthly-snapshot-form {
  align-items: end;
  display: flex;
  gap: 10px;
}

.monthly-snapshot-form label {
  display: grid;
  font-size: 12px;
  font-weight: 800;
  gap: 5px;
}

.monthly-snapshot-form input {
  border: 1px solid var(--oro-line);
  border-radius: 8px;
  font: inherit;
  min-height: 46px;
  padding: 8px 12px;
}

.historical-stock-filter {
  align-items: end;
  display: flex;
  gap: 10px;
}

.historical-stock-filter label {
  display: grid;
  font-size: 12px;
  font-weight: 800;
  gap: 5px;
}

.historical-stock-filter input {
  border: 1px solid var(--oro-line);
  border-radius: 8px;
  font: inherit;
  min-height: 46px;
  padding: 8px 12px;
}

.historical-stock-summary {
  align-items: center;
  background: #FAFDFD;
  border: 1px solid rgba(62, 92, 88, 0.34);
  border-radius: 8px;
  display: flex;
  justify-content: space-between;
  margin-bottom: 16px;
  padding: 14px 16px;
}

.historical-stock-summary strong {
  color: var(--oro-ink);
  font-size: 22px;
}

.historical-stock-panel td small,
.historical-stock-note {
  color: #8C8985;
  display: block;
  font-size: 12px;
}

.history-missing {
  color: #9a6a21;
  font-size: 12px;
  font-weight: 800;
}

.inventory-form {
  display: grid;
  gap: 16px;
  margin-top: 18px;
}

.inventory-movement-types {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 6px 0 2px;
}

.inventory-movement-types label {
  cursor: pointer;
  display: block;
  min-width: 0;
}

.inventory-movement-types input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.inventory-movement-types label > span {
  align-items: center;
  background: linear-gradient(180deg, #fff, rgba(250, 250, 249, 0.76));
  border: 1px solid rgba(62, 92, 88, 0.28);
  border-radius: 8px;
  display: flex;
  gap: 10px;
  min-height: 58px;
  padding: 13px 14px;
  transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.inventory-movement-types label > span::before {
  border: 2px solid rgba(62, 92, 88, 0.54);
  border-radius: 50%;
  content: "";
  display: block;
  flex: 0 0 14px;
  height: 14px;
  width: 14px;
}

.inventory-movement-types strong {
  align-items: center;
  color: var(--oro-ink);
  display: inline-flex;
  font-size: 13px;
  font-weight: 700;
  gap: 6px;
  justify-content: flex-start;
  line-height: 1.25;
  min-width: 0;
  white-space: normal;
  width: 100%;
}

.movement-help {
  background: #fff;
  border: 1px solid rgba(62, 92, 88, 0.62);
  border-radius: 999px;
  color: var(--oro-pink);
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 9px;
  height: 16px;
  min-height: 16px;
  opacity: 0.82;
  padding: 0;
  width: 16px;
  margin-left: auto;
}

.inventory-movement-types input:checked + span {
  background: #F9FDFC;
  border-color: #A9C7C2;
  box-shadow: 0 12px 24px rgba(62, 92, 88, 0.14);
}

.inventory-movement-types input:checked + span::before {
  background: #A9C7C2;
  border-color: #A9C7C2;
  box-shadow: inset 0 0 0 3px #fff;
}

.inventory-movement-types input:focus-visible + span {
  outline: 3px solid rgba(62, 92, 88, 0.28);
  outline-offset: 3px;
}

.inventory-movement-types label:hover > span {
  border-color: #A9C7C2;
  transform: translateY(-1px);
}

.inventory-movement-types label:last-child {
  grid-column: 1 / -1;
}

.inventory-form > .button {
  align-items: center;
  box-shadow: 0 14px 30px rgba(62, 92, 88, 0.2);
  display: inline-flex;
  justify-content: center;
  min-height: 56px;
  width: 100%;
}

.inventory-form-note {
  background: #fff8ec;
  border: 1px solid #f0d5a8;
  border-radius: 8px;
  color: #80530d;
  font-size: 14px;
  padding: 12px 14px;
}

.inventory-form textarea {
  min-height: 94px;
  padding-bottom: 14px;
  padding-top: 14px;
  resize: vertical;
}

.inventory-stock-panel small {
  color: #8C8985;
  display: block;
  margin-top: 4px;
}

.movement-badge {
  background: #F1F5F4;
  border: 1px solid #D7E3E1;
  border-radius: 999px;
  color: #73948F;
  display: inline-flex;
  font-size: 12px;
  font-weight: 800;
  padding: 5px 10px;
}

.archived-product-name {
  color: #777470;
}

.archived-product-note {
  color: #A29E9A;
  font-size: 12px;
  font-weight: 700;
  margin-left: 5px;
  white-space: nowrap;
}

.inventory-alert-panel {
  margin-bottom: 18px;
}

.inventory-panel-heading {
  align-items: center;
  display: flex;
  gap: 18px;
  justify-content: space-between;
  margin-bottom: 18px;
}

.inventory-panel-heading h2,
.inventory-panel-heading p {
  margin: 0;
}

.inventory-panel-heading p {
  color: #84807D;
}

.inventory-alert-list {
  display: grid;
  gap: 10px;
}

.inventory-alert-item {
  align-items: center;
  background: #FBFEFE;
  border: 1px solid #E1E9E8;
  border-radius: 8px;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(180px, 1.4fr) minmax(110px, 0.6fr) minmax(110px, 0.6fr) auto;
  padding: 14px 16px;
}

.inventory-alert-item span,
.inventory-alert-item small {
  color: #88847F;
  display: block;
}

.empty-state.compact {
  min-height: 130px;
}

.expense-management .panel {
  overflow: hidden;
}

.expense-search-row {
  align-items: end;
  grid-template-columns: minmax(260px, 1.4fr) minmax(180px, 0.7fr) minmax(180px, 0.7fr) 150px;
}

.expense-search-row .button {
  align-items: center;
  height: 54px;
  min-height: 54px;
  padding-bottom: 0;
  padding-top: 0;
  width: 100%;
}

.report-management {
  max-width: 100%;
  overflow-x: hidden;
  padding-top: 48px;
}

.report-management .customer-list-header {
  align-items: flex-start;
  margin-bottom: 14px;
}

.report-management .customer-list-header h1 {
  font-size: clamp(34px, 4vw, 52px);
  line-height: 1.08;
}

.report-management .customer-header-actions {
  padding-top: 6px;
}

.report-management .customer-header-actions .button,
.report-management .customer-header-actions button {
  align-items: center;
  background: var(--oro-rose);
  border-color: var(--oro-rose);
  box-shadow: 0 8px 18px rgba(62, 92, 88, 0.2);
  color: #fff;
  display: inline-flex;
  font-size: 14px;
  font-weight: 800;
  justify-content: center;
  line-height: 1;
  min-height: 48px;
  min-width: 132px;
  padding: 0 22px;
  text-align: center;
  white-space: nowrap;
}

.report-management .customer-header-actions .secondary {
  background: var(--oro-rose);
  color: #fff;
}

.report-management .customer-header-actions .button:hover,
.report-management .customer-header-actions button:hover,
.report-management .customer-header-actions .button:focus,
.report-management .customer-header-actions button:focus {
  background: #96B5B0;
  border-color: #96B5B0;
}

.report-toolbar {
  align-items: end;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(220px, 280px) 160px;
  margin: 12px 0 28px;
}

.report-toolbar label {
  color: #555;
  display: grid;
  font-weight: 700;
  gap: 8px;
}

.report-toolbar input,
.report-toolbar select,
.report-toolbar .button {
  min-height: 48px;
}

.report-toolbar .button {
  align-items: center;
  display: inline-flex;
  justify-content: center;
}

.report-type-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0 18px;
}

.report-type-tabs a {
  align-items: center;
  background: #fff;
  border: 1px solid rgba(62, 92, 88, 0.5);
  border-radius: 8px;
  color: #6F8D88;
  display: inline-flex;
  font-size: 14px;
  font-weight: 800;
  justify-content: center;
  min-height: 40px;
  padding: 0 14px;
  text-decoration: none;
}

.report-type-tabs a:hover,
.report-type-tabs a:focus {
  background: rgba(62, 92, 88, 0.12);
  border-color: var(--oro-rose);
  color: #607C76;
}

.report-type-tabs a.active {
  background: var(--oro-rose) !important;
  border-color: var(--oro-rose) !important;
  box-shadow: 0 8px 18px rgba(62, 92, 88, 0.22);
  color: #fff !important;
}

.payroll-page {
  display: grid;
  gap: 22px;
}

.payroll-heading-actions {
  align-items: end;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(300px, auto) auto;
}

.payroll-heading-actions form,
.payroll-month-form .field {
  margin: 0;
}

.payroll-month-form {
  align-items: end;
}

.payroll-month-form input,
.payroll-month-form .button,
.payroll-heading-actions > form:last-child .button {
  box-sizing: border-box;
  height: 52px;
  min-height: 52px;
}

.payroll-header {
  align-items: end;
  display: grid;
  gap: 24px;
  grid-template-columns: minmax(0, 1fr) auto;
}

.payroll-header h1 {
  font-size: clamp(34px, 3vw, 42px);
  white-space: nowrap;
}

.payroll-heading-actions > form:last-child {
  align-self: end;
}

.payroll-tabs {
  display: grid;
  grid-template-columns: repeat(6, minmax(130px, 1fr));
  overflow-x: auto;
  padding: 10px;
  position: sticky;
  top: 68px;
  z-index: 30;
}

.payroll-tabs a {
  border-radius: 8px;
  color: var(--muted);
  font-weight: 800;
  min-width: 130px;
  padding: 17px 14px;
  text-align: center;
}

.payroll-tabs a:hover {
  background: rgba(62, 92, 88, 0.12);
  color: var(--oro-rose-dark);
}

.payroll-tabs a.active {
  background: var(--oro-rose);
  color: #fff;
}

.payroll-tips-metrics {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.payroll-tips-metrics .metric-card {
  min-height: 138px;
}

.payroll-tips-metrics .metric-card strong {
  font-size: clamp(22px, 2vw, 32px);
}

.payroll-tips-metrics .metric-card small {
  color: var(--muted);
}

.payroll-tips-metrics .is-tip {
  background: rgba(62, 92, 88, 0.08);
  border-color: rgba(62, 92, 88, 0.42);
}

.payroll-overview-layout {
  align-items: start;
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(0, 1.75fr) minmax(320px, 0.65fr);
}

.payroll-overview-main {
  display: grid;
  gap: 18px;
  min-width: 0;
}

.payroll-earnings-panel,
.payroll-tip-ledger,
.payroll-runs-panel,
.payroll-summary-panel {
  margin: 0;
  min-width: 0;
}

.payroll-earnings-panel,
.payroll-tip-ledger {
  overflow: hidden;
}

.payroll-earnings-panel .table-wrap,
.payroll-tip-ledger .table-wrap {
  max-width: 100%;
  overflow-x: auto;
}

.section-heading {
  align-items: center;
  display: flex;
  gap: 16px;
  justify-content: space-between;
  margin-bottom: 18px;
}

.section-heading h2 {
  margin: 0 0 5px;
}

.section-heading p {
  color: var(--muted);
  margin: 0;
}

.section-heading > a {
  color: var(--oro-rose-dark);
  font-weight: 800;
  white-space: nowrap;
}

.payroll-earnings-table th,
.payroll-earnings-table td,
.payroll-tip-ledger th,
.payroll-tip-ledger td,
.payroll-runs-panel th,
.payroll-runs-panel td {
  padding: 13px 12px;
  white-space: nowrap;
}

.tip-value {
  color: var(--oro-rose-dark);
  font-weight: 800;
}

.payroll-status {
  background: #F3F2F0;
  border: 1px solid #DDD9D5;
  border-radius: 999px;
  color: #6F6A65;
  display: inline-flex;
  font-size: 11px;
  font-weight: 850;
  padding: 6px 9px;
  white-space: nowrap;
}

.payroll-status.included,
.payroll-status.paid {
  background: #eaf7ed;
  border-color: #bfe3c6;
  color: #2f7940;
}

.payroll-status.pending,
.payroll-status.draft {
  background: #fff6e7;
  border-color: #edd4a1;
  color: #946921;
}

.payroll-summary-panel {
  background: linear-gradient(180deg, rgba(246, 251, 250, 0.96), #fff);
  box-sizing: border-box;
  width: 100%;
  position: sticky;
  top: 170px;
}

.payroll-summary-panel h2 {
  margin: 0 0 12px;
}

.payroll-summary-panel > div {
  align-items: center;
  border-bottom: 1px solid var(--line);
  display: flex;
  gap: 16px;
  justify-content: space-between;
  padding: 20px 0;
}

.payroll-summary-panel > div span {
  display: grid;
  gap: 5px;
}

.payroll-summary-panel > div small {
  color: var(--muted);
}

.payroll-summary-panel > div strong {
  text-align: right;
  white-space: nowrap;
}

.payroll-summary-panel > div.is-tip {
  color: var(--oro-rose-dark);
}

.payroll-summary-panel > div.total {
  border-bottom: 0;
  font-size: 18px;
}

.payroll-summary-panel > div.total strong {
  font-size: 23px;
}

.payroll-summary-panel form,
.payroll-summary-panel form button {
  margin-top: 10px;
  width: 100%;
}

.payroll-close-link {
  margin-top: 14px;
  width: 100%;
}

.payroll-close-progress {
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  overflow-x: auto;
  padding: 18px 24px;
}

.payroll-close-progress > div {
  align-items: center;
  display: flex;
  gap: 10px;
  justify-content: center;
  min-width: 150px;
  padding: 12px;
  position: relative;
}

.payroll-close-progress > div:not(:last-child)::after {
  background: var(--line);
  content: "";
  height: 2px;
  position: absolute;
  right: -18%;
  top: 50%;
  width: 36%;
}

.payroll-close-progress i {
  align-items: center;
  border: 1px solid #BDB9B5;
  border-radius: 50%;
  display: inline-flex;
  font-style: normal;
  height: 36px;
  justify-content: center;
  width: 36px;
}

.payroll-close-progress .is-complete,
.payroll-close-progress .is-current {
  color: var(--oro-rose-dark);
}

.payroll-close-progress .is-complete i,
.payroll-close-progress .is-current i {
  background: var(--oro-rose);
  border-color: var(--oro-rose);
  color: #fff;
}

.payroll-close-layout {
  align-items: start;
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(0, 1fr) 290px;
}

.payroll-close-review {
  margin: 0;
  min-width: 0;
  overflow: hidden;
}

.payroll-close-review .table-wrap {
  max-width: 100%;
  overflow-x: auto;
}

.payroll-close-review th,
.payroll-close-review td {
  font-size: 11.5px;
  padding: 12px 4px;
  white-space: nowrap;
}

.payroll-close-review td:first-child {
  display: grid;
  gap: 3px;
}

.payroll-close-review td:first-child small {
  color: var(--muted);
}

.payroll-review-badge {
  background: #eaf7ed;
  border-radius: 999px;
  color: #2f7940;
  display: inline-flex;
  font-size: 11px;
  font-weight: 850;
  padding: 6px 9px;
}

.payroll-close-summary {
  top: 170px;
}

.payroll-review-count {
  color: #2f7940;
  font-weight: 800;
  margin: 14px 0 0;
}

.payroll-close-lower {
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(0, 1.1fr) minmax(360px, .9fr);
}

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

.payroll-payment-form > .field {
  margin: 0;
  min-width: 0;
  width: 100%;
}

.payroll-payment-form input,
.payroll-payment-form select,
.payroll-payment-form textarea {
  box-sizing: border-box;
  max-width: 100%;
  min-width: 0;
  width: 100%;
}

.payroll-payment-form input,
.payroll-payment-form select {
  height: 58px;
  min-height: 58px;
}

.payroll-payment-form .full {
  grid-column: 1 / -1;
}

.payroll-audit-list {
  display: grid;
  gap: 0;
}

.payroll-audit-list p {
  align-items: center;
  border: 1px solid var(--line);
  display: grid;
  gap: 12px;
  grid-template-columns: 30px 1fr;
  margin: -1px 0 0;
  padding: 14px;
}

.payroll-audit-list i {
  color: var(--oro-rose-dark);
  font-style: normal;
  font-weight: 900;
}

.payroll-audit-list span {
  display: grid;
  gap: 3px;
}

.payroll-audit-list small {
  color: var(--muted);
}

.payroll-paid-note {
  background: #eaf7ed;
  border-radius: 8px;
  color: #2f7940;
  font-weight: 800;
  padding: 12px;
  text-align: center;
}

.payroll-documents-layout {
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(0, 1fr);
}

.payroll-documents-list {
  margin: 0;
  min-width: 0;
  overflow: hidden;
}

.payroll-documents-list .table-wrap { max-width: 100%; overflow-x: auto; }
.payroll-documents-list th,
.payroll-documents-list td { font-size: 11.5px; padding: 12px 8px; white-space: nowrap; }
.payroll-documents-list td:first-child { display: grid; gap: 3px; }
.payroll-documents-list td:first-child small { color: var(--muted); }
.payroll-document-actions { display: flex; gap: 6px; }
.payroll-document-actions a {
  align-items: center;
  border: 1px solid var(--oro-rose);
  border-radius: 7px;
  color: var(--oro-rose-dark);
  display: inline-flex;
  font-size: 11px;
  font-weight: 800;
  justify-content: center;
  min-height: 34px;
  padding: 0 10px;
}
.payroll-document-actions .icon-action { min-width: 34px; padding: 0; }
.payroll-export-card { margin: 0; }
.payroll-export-heading { align-items: center; display: flex; gap: 18px; justify-content: space-between; margin-bottom: 16px; }
.payroll-export-heading h2, .payroll-export-heading p { margin: 0; }
.payroll-export-heading p { color: var(--muted); margin-top: 4px; }
.payroll-ready-note { background: #eaf7ed; border-radius: 999px; color: #2f7940; font-weight: 800; margin: 0; padding: 9px 13px; }
.payroll-export-metrics { display: grid; grid-template-columns: .7fr repeat(4, 1fr); }
.payroll-export-metrics p { border-right: 1px solid var(--line); display: grid; gap: 6px; margin: 0; padding: 5px 16px; }
.payroll-export-metrics p:first-child { padding-left: 0; }
.payroll-export-metrics p:last-child { border-right: 0; }
.payroll-export-metrics span { color: var(--muted); font-size: 11px; }
.payroll-export-metrics strong { font-size: 16px; white-space: nowrap; }
.payroll-export-metrics .total { color: var(--oro-rose-dark); }
.payroll-export-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; }
.payroll-export-actions .button { justify-content: center; margin: 0; min-width: 170px; }
.payroll-export-actions .export-sheet { background: #eff9f1; border-color: #76b984; color: #2f7940; }
.payroll-payslip-preview { margin: 0; overflow: hidden; padding: 0; }
.payslip-title-row {
  align-items: center;
  border-bottom: 1px solid var(--line);
  display: grid;
  gap: 20px;
  grid-template-columns: 180px 1fr auto;
  padding: 22px 26px;
  text-align: center;
}
.payslip-title-row h2, .payslip-title-row p { margin: 0; }
.payslip-wordmark { color: var(--oro-rose); display: grid; justify-self: start; letter-spacing: 5px; line-height: 1; }
.payslip-wordmark strong { font-family: Georgia, serif; font-size: 42px; font-weight: 400; }
.payslip-wordmark span { font-size: 10px; font-weight: 900; margin-top: 6px; }
.payslip-grid { display: grid; grid-template-columns: .85fr 1.25fr .9fr; }
.payslip-grid > section { border-right: 1px solid var(--line); padding: 24px; }
.payslip-grid > section:last-child { border-right: 0; }
.payslip-grid h3 { color: var(--oro-rose-dark); font-size: 16px; margin: 0 0 14px; }
.payslip-grid .detail-list p { padding: 9px 0; }
.payslip-grid .detail-list p.total { color: var(--oro-rose-dark); font-size: 17px; }
.payslip-grid .detail-list p.allowance-total { background: rgba(62, 92, 88, .09); color: var(--oro-rose-dark); margin: 0 -8px; padding: 9px 8px; }
.payslip-notes { align-items: center; border-top: 1px solid var(--line); display: grid; gap: 14px; grid-template-columns: 90px 1fr; padding: 14px 24px; }
.payslip-notes span { color: var(--muted); }
.payslip-signatures { border-top: 1px solid var(--line); display: grid; gap: 80px; grid-template-columns: 1fr 1fr; padding: 24px 70px 18px; text-align: center; }
.payslip-signatures p { display: grid; gap: 8px; margin: 0; }
.payslip-signatures span { color: var(--muted); font-size: 11px; }
.payslip-signatures i { border-bottom: 1px solid #777; display: block; height: 24px; }
.payslip-signatures strong { font-size: 12px; }
.payslip-footer { align-items: center; border-top: 1px solid var(--line); display: flex; gap: 18px; justify-content: space-between; padding: 18px 24px; }
.payslip-footer p { margin: 0; }
.payslip-footer > div { display: flex; gap: 10px; }

.payroll-header {
  align-items: end;
}

.payroll-month-form {
  align-items: end;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(180px, 240px) auto;
}

.payroll-control-panel {
  align-items: center;
  display: flex;
  gap: 18px;
  justify-content: space-between;
}

.payroll-control-panel h2 {
  font-size: 26px;
  margin: 0 0 8px;
}

.payroll-control-panel p {
  color: var(--muted);
  margin: 0;
}

.payroll-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: flex-end;
}

.payroll-staff-grid {
  display: grid;
  gap: 18px;
}

.payroll-card {
  background: #fff;
  border: 1px solid rgba(62, 92, 88, 0.35);
  border-radius: 8px;
  box-shadow: var(--shadow);
  padding: 24px;
}

.payroll-card-heading {
  align-items: center;
  display: flex;
  gap: 16px;
  justify-content: space-between;
  margin-bottom: 18px;
}

.payroll-card-heading h3 {
  font-size: 26px;
  margin: 0 0 4px;
}

.payroll-card-heading p {
  color: var(--muted);
  margin: 0;
}

.payroll-card-summary {
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 18px;
  padding: 16px;
}

.payroll-card-summary span {
  color: var(--muted);
  display: grid;
  gap: 6px;
}

.payroll-card-summary strong {
  color: var(--ink);
  font-size: 20px;
}

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

.payroll-notes-field,
.payroll-net-box {
  grid-column: span 2;
}

.payroll-net-box {
  align-items: center;
  background: var(--soft);
  border: 1px solid rgba(62, 92, 88, 0.28);
  border-radius: 8px;
  display: grid;
  gap: 6px 18px;
  grid-template-columns: auto 1fr;
  padding: 14px 18px;
}

.payroll-net-box span {
  color: var(--muted);
}

.payroll-net-box strong {
  font-size: 20px;
}

.payroll-item-form .button {
  align-self: end;
  min-height: 56px;
}

.report-print-sheet {
  background: #fff;
  border: 1px solid #E7E4E1;
  border-radius: 8px;
  box-sizing: border-box;
  box-shadow: 0 18px 45px rgba(35, 33, 31, 0.08);
  display: grid;
  gap: 22px;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  padding: 32px;
  width: 100%;
}

.report-header {
  align-items: start;
  border-bottom: 1px solid #eee6e6;
  display: flex;
  justify-content: space-between;
  padding-bottom: 22px;
}

.report-kicker {
  color: #A7C5C0;
  display: block;
  font-weight: 800;
  letter-spacing: 0.08em;
  margin-bottom: 8px;
  text-transform: uppercase;
}

.report-header h1 {
  font-size: 42px;
  margin: 0 0 8px;
}

.report-header p {
  color: #666;
  margin: 0;
}

.report-brand {
  color: #A7C5C0;
  font-family: Georgia, serif;
  font-size: 54px;
  font-weight: 700;
}

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

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

.report-summary-grid-5 {
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

.report-kpi {
  background: #F9FAFA;
  border: 1px solid #DBE7E4;
  border-radius: 8px;
  padding: 18px;
}

.report-kpi span,
.report-kpi small {
  color: #777;
  display: block;
}

.report-kpi strong {
  color: #1D1C1B;
  display: block;
  font-size: 26px;
  margin: 8px 0;
}

.report-section-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  min-width: 0;
}

.report-section-grid > .report-panel:only-child {
  grid-column: 1 / -1;
}

.report-panel {
  border: 1px solid #E7E4E1;
  border-radius: 8px;
  min-width: 0;
  overflow: hidden;
  padding: 20px;
}

.report-panel h2 {
  font-size: 24px;
  margin: 0 0 14px;
}

.report-breakdown-list {
  display: grid;
}

.report-breakdown-row {
  align-items: center;
  border-bottom: 1px solid #eee6e6;
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(0, 1fr) minmax(150px, 180px);
  min-width: 0;
  padding: 14px 0;
}

.report-breakdown-row span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.report-breakdown-row strong {
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  max-width: 100%;
  overflow: hidden;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.report-breakdown-total span,
.report-breakdown-total strong {
  color: var(--ink);
  font-weight: 800;
}

.report-panel .report-breakdown-row:last-child {
  border-bottom: 0;
}

.report-empty {
  color: #777;
  margin: 0;
}

.report-table {
  border-collapse: collapse;
  max-width: 100%;
  table-layout: fixed;
  width: 100%;
}

.report-table th,
.report-table td {
  border-bottom: 1px solid #eee6e6;
  overflow-wrap: anywhere;
  padding: 12px 8px;
  text-align: left;
  vertical-align: top;
}

.report-table th {
  color: #777;
  font-size: 14px;
}

.report-table td:last-child,
.report-table th:last-child {
  text-align: right;
}

.report-section-grid .report-table tbody,
.report-section-grid .report-table tr {
  display: block;
}

.report-section-grid .report-table tr {
  border-bottom: 1px solid #eee6e6;
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(0, 1fr) max-content;
}

.report-section-grid .report-table td {
  border-bottom: 0;
  min-width: 0;
}

.report-section-grid .report-table td:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.report-section-grid .report-table td:last-child {
  font-variant-numeric: tabular-nums;
  overflow-wrap: normal;
  white-space: nowrap;
}

.report-footer {
  border-top: 1px solid #eee6e6;
  color: #777;
  display: flex;
  justify-content: space-between;
  padding-top: 18px;
}

.expense-table small {
  color: var(--muted);
  display: block;
  font-size: 13px;
  margin-top: 4px;
}

.expense-status {
  align-items: center;
  border: 1px solid rgba(35, 33, 31, 0.12);
  border-radius: 999px;
  display: inline-flex;
  font-size: 13px;
  font-weight: 700;
  min-height: 32px;
  padding: 5px 12px;
}

.expense-status.paid,
.expense-status.approved {
  background: #edf9f0;
  border-color: #bfe8c8;
  color: #24743b;
}

.expense-status.pending {
  background: #fff7e8;
  border-color: #f0d3a6;
  color: #8a5a12;
}

.expense-status.void {
  background: #f5f5f5;
  color: var(--muted);
}

.expense-modal {
  max-height: calc(100vh - 72px);
  max-width: 920px;
  overflow-y: auto;
}

.expense-modal .customer-modal-form {
  display: grid;
  gap: 16px;
}

.expense-modal .field {
  min-width: 0;
}

.team-avatar {
  align-items: center;
  background: linear-gradient(135deg, var(--oro-blush), rgba(62, 92, 88, 0.34));
  border-radius: 999px;
  color: var(--oro-rose);
  display: inline-flex;
  flex: 0 0 44px;
  font-family: Georgia, serif;
  font-size: 18px;
  font-weight: 900;
  height: 44px;
  justify-content: center;
  width: 44px;
}

.team-avatar.large {
  flex-basis: 58px;
  font-size: 22px;
  height: 58px;
  width: 58px;
}

.team-select-all,
.team-member-option {
  align-items: center;
  background: var(--oro-soft);
  border: 1px solid var(--oro-line);
  border-radius: 8px;
  display: flex;
  gap: 12px;
  padding: 12px 14px;
}

.team-select-all {
  color: var(--oro-ink);
  font-weight: 900;
}

.team-member-option {
  cursor: pointer;
}

.team-member-option.is-selected {
  background: rgba(62, 92, 88, 0.12);
  border-color: rgba(62, 92, 88, 0.68);
  box-shadow: 0 10px 24px rgba(35, 33, 31, 0.06);
}

.team-member-option input,
.team-select-all input {
  flex: 0 0 auto;
}

.team-member-copy {
  display: grid;
  gap: 7px;
  min-width: 0;
  width: 100%;
}

.team-member-option strong {
  color: var(--oro-ink);
  display: block;
}

.team-member-option small {
  color: rgba(35, 33, 31, 0.64);
}

.team-member-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.team-member-meta small {
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(35, 33, 31, 0.1);
  border-radius: 999px;
  color: rgba(35, 33, 31, 0.72);
  font-size: 12px;
  font-weight: 800;
  padding: 3px 8px;
}

.editor-stepper {
  background: var(--oro-white);
  border: 1px solid var(--oro-line);
  border-radius: 12px;
  display: flex;
  gap: 6px;
  grid-column: 1;
  grid-row: 1;
  overflow-x: auto;
  padding: 7px;
  position: sticky;
  scrollbar-width: thin;
  box-shadow: 0 10px 24px rgba(35, 33, 31, 0.1);
  top: 85px;
  z-index: 9;
}

.service-editor-stack > .editor-card {
  scroll-margin-top: 185px;
}

.editor-stepper a {
  align-items: center;
  color: rgba(35, 33, 31, 0.72);
  display: flex;
  flex: 0 0 auto;
  font-weight: 900;
  gap: 8px;
  padding: 10px 14px;
  position: relative;
  border-radius: 9px;
  transition: background-color 160ms ease, box-shadow 160ms ease, color 160ms ease, transform 160ms ease;
  white-space: nowrap;
}

.editor-stepper a + a {
  border-top: 0;
}

.editor-stepper span {
  align-items: center;
  background: var(--oro-soft);
  border-radius: 999px;
  color: rgba(35, 33, 31, 0.72);
  display: inline-flex;
  flex: 0 0 30px;
  height: 30px;
  justify-content: center;
  width: 30px;
}

.editor-stepper a:hover,
.editor-stepper a:focus-visible {
  background: #EDF4F3;
  box-shadow: 0 5px 14px rgba(62, 92, 88, 0.2);
  color: #678A85;
  outline: none;
  transform: translateY(-1px);
}

.editor-stepper a.active {
  background: var(--oro-rose);
  box-shadow: 0 6px 16px rgba(62, 92, 88, 0.28);
  color: var(--oro-white);
}

.editor-stepper a.active span {
  background: rgba(255, 255, 255, 0.22);
  color: var(--oro-white);
}

.editor-stepper a.active:hover,
.editor-stepper a.active:focus-visible {
  background: var(--oro-rose);
  color: var(--oro-white);
}

.responsive-table {
  max-width: 100%;
  overflow-x: auto;
}

table {
  border-collapse: collapse;
  min-width: 620px;
  width: 100%;
}

th,
td {
  border-bottom: 1px solid var(--oro-line);
  padding: 12px;
  text-align: left;
}

th {
  color: var(--oro-ink);
  font-size: 13px;
}

.invoice-total,
.payment-row {
  align-items: center;
  border-bottom: 1px solid var(--oro-line);
  display: flex;
  justify-content: space-between;
  padding: 12px 0;
}

.invoice-total strong {
  color: var(--oro-rose);
  font-size: 28px;
}

.commission-box {
  background: var(--oro-soft);
  border: 1px solid var(--oro-line);
  border-radius: 8px;
  margin: 18px 0;
  padding: 16px;
}

.quick-grid.two {
  grid-template-columns: 1fr 1fr;
}

.sales-management {
  background:
    linear-gradient(180deg, rgba(227, 234, 232, 0.28), rgba(250, 250, 249, 0) 260px),
    var(--oro-soft);
}

.pos-grid {
  align-items: start;
  gap: 22px;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.34fr);
}

.pos-invoice-panel,
.pos-payment-panel,
.recent-sales-panel {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid var(--oro-line);
  border-radius: 8px;
  box-shadow: 0 16px 40px rgba(35, 33, 31, 0.07);
}

.pos-payment-panel {
  min-width: 0;
  overflow: hidden;
  position: sticky;
  top: 100px;
}

.pos-lines {
  display: grid;
  gap: 14px;
  margin-top: 24px;
}

.pos-line-list {
  display: grid;
  gap: 14px;
}

.pos-section-title {
  align-items: start;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.pos-section-title h2 {
  color: var(--oro-ink);
  font-size: 26px;
  line-height: 1.2;
  margin: 0 0 4px;
}

.pos-section-title p {
  margin: 0;
}

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

.pos-line {
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid rgba(62, 92, 88, 0.36);
  border-radius: 8px;
  box-shadow: 0 10px 26px rgba(35, 33, 31, 0.05);
  padding: 16px;
}

.pos-line-head {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
}

.pos-line-head strong {
  color: var(--oro-ink);
}

.pos-line-grid {
  align-items: end;
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

.pos-line-grid > .field {
  min-width: 0;
}

.pos-line-grid > .pos-item-field {
  grid-column: span 7;
}

.pos-line-grid > .pos-staff-field {
  grid-column: span 5;
}

.pos-add-service {
  justify-self: start;
  margin-top: 2px;
  min-width: 180px;
}

.pos-add-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.pos-add-actions .pos-add-service {
  margin-top: 0;
  min-width: 0;
}

.pos-item-field select,
.pos-addons select,
.pos-line-grid select,
.pos-line-grid input,
.payment-split-row input {
  background: var(--oro-white);
  min-height: 56px;
  min-width: 0;
  width: 100%;
}

.pos-price-row {
  align-items: end;
  display: grid;
  gap: 12px;
  grid-column: 1 / -1;
  grid-template-columns: 82px minmax(250px, 0.95fr) minmax(360px, 1.35fr);
}

.pos-price-row > .field,
.pos-price-row .field {
  margin-bottom: 0;
  min-width: 0;
}

.pos-addons {
  align-items: end;
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.pos-addons .field {
  margin-bottom: 0;
}

.pos-addons.is-empty {
  display: none;
}

.pos-line-total {
  background: linear-gradient(135deg, rgba(227, 234, 232, 0.38), rgba(255, 255, 255, 0.92));
  border: 1px solid rgba(62, 92, 88, 0.28);
  border-radius: 8px;
  display: grid;
  gap: 2px;
  grid-column: 1 / -1;
  justify-self: stretch;
  min-height: 82px;
  padding: 12px 14px;
  width: 100%;
}

.pos-line-total span,
.pos-line-total small,
.pos-summary span {
  color: rgba(35, 33, 31, 0.68);
  font-size: 12px;
  font-weight: 800;
}

.pos-line-total strong {
  color: var(--oro-ink);
  font-size: 18px;
  white-space: nowrap;
}

.price-field small {
  color: rgba(35, 33, 31, 0.62);
  display: block;
  font-size: 11px;
  line-height: 1.25;
  margin-top: 3px;
}

.price-control {
  align-items: stretch;
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(0, 1fr) 110px;
}

.price-control > input {
  min-width: 0;
}

.price-field input.is-auto {
  background: rgba(250, 250, 249, 0.92);
  color: var(--oro-ink);
}

.price-field input.is-manual {
  background: var(--oro-white);
  border-color: rgba(62, 92, 88, 0.68);
}

.manual-price-toggle {
  align-items: center;
  background: var(--oro-white);
  border: 1px solid var(--oro-line);
  border-radius: 8px;
  color: rgba(35, 33, 31, 0.74);
  display: inline-flex;
  font-size: 12px;
  font-weight: 800;
  gap: 6px;
  justify-content: center;
  margin-top: 0;
  min-height: 56px;
  padding: 0 12px;
  white-space: nowrap;
}

.manual-price-toggle.is-active {
  background: rgba(62, 92, 88, 0.12);
  border-color: rgba(62, 92, 88, 0.62);
  color: #658682;
}

.manual-price-toggle input {
  min-height: auto;
  width: auto;
}

.invoice-discount-panel {
  background: rgba(250, 250, 249, 0.72);
  border: 1px solid var(--oro-line);
  border-radius: 8px;
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr;
  margin: 0 0 18px;
  padding: 12px;
}

.invoice-discount-panel .field {
  margin-bottom: 0;
}

.invoice-discount-panel small {
  color: rgba(35, 33, 31, 0.62);
  font-size: 12px;
  font-weight: 700;
  grid-column: 1 / -1;
  line-height: 1.35;
}

.pos-summary {
  border: 1px solid var(--oro-line);
  border-radius: 8px;
  display: grid;
  gap: 0;
  margin-bottom: 18px;
  overflow: hidden;
}

.pos-summary div {
  align-items: center;
  background: rgba(250, 250, 249, 0.72);
  display: flex;
  justify-content: space-between;
  padding: 12px 14px;
}

.pos-summary div + div {
  border-top: 1px solid var(--oro-line);
}

.pos-summary strong {
  color: var(--oro-ink);
}

.pos-summary .pos-grand-total {
  background: rgba(62, 92, 88, 0.14);
}

.pos-summary .pos-grand-total strong {
  color: var(--oro-rose);
  font-size: 24px;
}

.payment-split-list {
  display: grid;
  gap: 10px;
  max-height: 390px;
  overflow: auto;
  padding-right: 2px;
}

.payment-selector-panel {
  background: rgba(250, 250, 249, 0.72);
  border: 1px solid var(--oro-line);
  border-radius: 8px;
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr;
  margin-bottom: 14px;
  padding: 12px;
}

.payment-selector-panel .field {
  margin-bottom: 0;
}

.payment-hidden-fields {
  display: none;
}

.payment-split-row {
  background: rgba(250, 250, 249, 0.72);
  border: 1px solid var(--oro-line);
  border-radius: 8px;
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr;
  padding: 12px;
}

.payment-split-row .field {
  margin-bottom: 0;
}

.payment-balance {
  background: #fff5e7;
  border: 1px solid #ead2a8;
  border-radius: 8px;
  color: #7a4b08;
  font-weight: 900;
  margin-top: 14px;
  padding: 12px 14px;
}

.payment-balance.is-complete {
  background: #eef9f0;
  border-color: #ccebd2;
  color: #23642e;
}

.commission-box [data-commission-preview] {
  display: grid;
  gap: 8px;
}

.commission-box [data-commission-preview] p {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin: 0;
}

.recent-sales-panel {
  margin-top: 18px;
}

.appointment-detail-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: 18px;
}

.appointment-action-panel {
  margin-bottom: 18px;
}

.appointment-status-workflow {
  background: #fff;
  margin-bottom: 18px;
  overflow-x: auto;
  padding: 10px 18px;
  position: sticky;
  top: 68px;
  z-index: 32;
}

.appointment-status-progress {
  display: grid;
  grid-template-columns: repeat(5, minmax(135px, 1fr));
  list-style: none;
  margin: 0;
  min-width: 760px;
  padding: 0;
}

.appointment-status-progress li {
  align-items: center;
  color: var(--muted);
  display: flex;
  font-weight: 800;
  gap: 9px;
  justify-content: center;
  padding: 13px 8px;
  position: relative;
}

.appointment-status-progress li:not(:last-child)::after {
  background: var(--oro-line);
  content: "";
  height: 1px;
  position: absolute;
  right: -18%;
  top: 50%;
  width: 36%;
}

.appointment-status-progress i {
  align-items: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  display: inline-flex;
  font-size: 11px;
  font-style: normal;
  height: 28px;
  justify-content: center;
  width: 28px;
}

.appointment-status-progress .is-complete {
  color: var(--oro-rose-dark);
}

.appointment-status-progress .is-current {
  background: var(--oro-rose);
  border-radius: 9px;
  color: #fff;
}

.appointment-workflow-dashboard {
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(0, 1.35fr) minmax(330px, 0.65fr);
  margin-bottom: 18px;
}

.appointment-next-action,
.appointment-exception-actions,
.appointment-status-history,
.appointment-payment-guide {
  margin: 0;
}

.appointment-next-action .eyebrow,
.appointment-exception-actions .eyebrow,
.appointment-status-history .eyebrow,
.appointment-payment-guide .eyebrow {
  color: var(--oro-rose-dark);
  display: block;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
  margin-bottom: 5px;
  text-transform: uppercase;
}

.appointment-next-action h2,
.appointment-exception-actions h2,
.appointment-status-history h2,
.appointment-payment-guide h2 {
  margin: 0 0 8px;
}

.appointment-next-action form,
.appointment-next-action .button {
  margin-top: 10px;
}

.appointment-exception-actions > div {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 15px;
}

.appointment-exception-actions form {
  margin: 0;
}

.appointment-status-history ol,
.appointment-payment-guide ol {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
}

.appointment-status-history li {
  display: grid;
  gap: 12px;
  grid-template-columns: 12px 1fr;
  padding-bottom: 16px;
}

.appointment-status-history li i {
  background: var(--oro-rose);
  border: 3px solid #EEF5F4;
  border-radius: 50%;
  height: 12px;
  margin-top: 4px;
  width: 12px;
}

.appointment-status-history li div {
  display: grid;
  gap: 3px;
}

.appointment-status-history li span {
  color: var(--muted);
  font-size: 13px;
}

.appointment-payment-guide ol {
  counter-reset: payment-guide;
}

.appointment-payment-guide li {
  align-items: center;
  counter-increment: payment-guide;
  display: grid;
  gap: 10px;
  grid-template-columns: 30px 1fr;
  padding: 8px 0;
}

.appointment-payment-guide li::before {
  align-items: center;
  background: #EEF5F4;
  border-radius: 50%;
  color: var(--oro-rose-dark);
  content: counter(payment-guide);
  display: flex;
  font-size: 12px;
  font-weight: 900;
  height: 30px;
  justify-content: center;
}

.appointment-checkout-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(190px, 1fr));
  margin-bottom: 18px;
  overflow-x: auto;
  padding: 8px;
  position: sticky;
  top: 68px;
  z-index: 32;
}

.appointment-checkout-tabs a {
  align-items: center;
  border-radius: 8px;
  color: var(--muted);
  display: flex;
  font-weight: 800;
  gap: 10px;
  justify-content: center;
  min-width: 190px;
  padding: 15px 12px;
}

.appointment-checkout-tabs a:hover {
  background: rgba(62, 92, 88, 0.12);
  color: var(--oro-rose-dark);
}

.appointment-checkout-tabs a.active {
  background: var(--oro-rose);
  color: #fff;
}

.appointment-checkout-tabs i {
  align-items: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  display: inline-flex;
  font-size: 11px;
  font-style: normal;
  height: 28px;
  justify-content: center;
  width: 28px;
}

.appointment-action-form {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.appointment-checkout-layout {
  align-items: stretch;
  display: grid;
  gap: 18px;
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, 1.45fr) minmax(330px, 0.82fr);
}

.appointment-payment-card,
.appointment-checkout-summary {
  border: 1px solid var(--oro-line);
  border-radius: 10px;
  padding: 20px;
}

.appointment-checkout-heading {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  margin-bottom: 18px;
}

.appointment-checkout-heading h3,
.appointment-checkout-summary h3 {
  font-size: 24px;
  margin: 0;
}

.appointment-tip-box {
  background: rgba(62, 92, 88, 0.08);
  border: 1px solid rgba(62, 92, 88, 0.68);
  border-radius: 10px;
  display: grid;
  gap: 12px;
  margin-top: 18px;
  min-width: 0;
  overflow: hidden;
  padding: 16px;
}

.appointment-tip-title {
  align-items: center;
  display: flex;
  font-size: 19px;
  gap: 10px;
}

.appointment-tip-title i {
  align-items: center;
  background: var(--oro-rose);
  border-radius: 50%;
  color: #fff;
  display: inline-flex;
  font-style: normal;
  height: 30px;
  justify-content: center;
  width: 30px;
}

.tip-quick-buttons {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  min-width: 0;
  width: 100%;
}

.tip-quick-buttons button {
  background: #fff;
  border: 1px solid var(--oro-rose);
  box-sizing: border-box;
  color: var(--oro-rose-dark);
  min-width: 0;
  padding: 9px 6px;
  width: 100%;
}

.tip-quick-buttons button:hover {
  background: var(--oro-rose);
  color: #fff;
}

.appointment-tip-box small {
  color: var(--muted);
}

.tip-allocation-state {
  border: 1px solid transparent;
  border-radius: 8px;
  font-weight: 800;
  margin: 0;
  padding: 10px 12px;
}

.tip-allocation-state.is-valid {
  background: #edf8ef;
  border-color: #acd9b5;
  color: #2f7940;
}

.tip-allocation-state.is-invalid {
  background: #fff0f0;
  border-color: #e8b4b4;
  color: #a23d3d;
}

.appointment-checkout-summary {
  display: grid;
  gap: 0;
}

.appointment-checkout-summary > p,
.professional-payout-preview p {
  align-items: center;
  border-bottom: 1px solid var(--oro-line);
  display: flex;
  gap: 16px;
  justify-content: space-between;
  margin: 0;
  padding: 14px 0;
}

.appointment-checkout-summary > p.is-tip,
.professional-payout-preview p.is-tip {
  color: var(--oro-rose-dark);
}

.appointment-checkout-summary > p.total {
  font-size: 19px;
  font-weight: 900;
}

.appointment-checkout-summary > p.total strong {
  color: var(--oro-rose-dark);
  font-size: 23px;
}

.professional-payout-preview {
  border-top: 1px solid var(--oro-line);
  margin-top: 8px;
  padding-top: 18px;
}

.professional-payout-preview h4 {
  font-size: 19px;
  margin: 0 0 6px;
}

.appointment-action-form .field {
  margin-bottom: 0;
}

.appointment-action-form .wide {
  grid-column: span 2;
}

.appointment-action-form .full {
  grid-column: 1 / -1;
}

.appointment-action-form button:not(.help-popover) {
  justify-self: start;
  min-width: 170px;
}

.appointment-service-editor {
  border-top: 1px solid var(--oro-line);
  display: grid;
  gap: 14px;
  grid-column: 1 / -1;
  margin-top: 8px;
  padding-top: 18px;
}

.appointment-editor-heading {
  align-items: start;
  display: flex;
  justify-content: space-between;
  gap: 16px;
}

.appointment-editor-heading h3 {
  font-size: 1.35rem;
  margin: 0 0 4px;
}

.appointment-line-list {
  display: grid;
  gap: 14px;
}

.appointment-line-card {
  border: 1px solid rgba(62, 92, 88, 0.38);
  border-radius: 8px;
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  padding: 16px;
}

.appointment-line-title {
  align-items: center;
  display: flex;
  grid-column: 1 / -1;
  justify-content: space-between;
}

.appointment-remove-line {
  color: #c94848;
}

.appointment-add-line {
  justify-self: start;
}

.appointment-line-card .field {
  margin: 0;
}

.appointment-item-service {
  grid-column: span 7;
}

.appointment-item-staff {
  grid-column: span 5;
}

.appointment-item-qty {
  grid-column: span 2;
}

.appointment-item-price {
  grid-column: span 3;
  min-width: 0;
}

.appointment-addons {
  align-items: end;
  display: grid;
  gap: 12px;
  grid-column: span 7;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  min-width: 0;
}

.appointment-addons.is-empty {
  display: none;
}

.appointment-addons .field {
  min-width: 0;
}

.appointment-item-qty input {
  text-align: center;
}

.appointment-line-card input,
.appointment-line-card select {
  height: 54px;
  min-height: 54px;
  min-width: 0;
  width: 100%;
}

.appointment-line-total {
  background: rgba(250, 250, 249, 0.78);
  border: 1px solid rgba(62, 92, 88, 0.32);
  border-radius: 8px;
  display: grid;
  gap: 4px;
  grid-column: 1 / -1;
  padding: 12px 14px;
}

.appointment-line-total span {
  color: rgba(35, 33, 31, 0.66);
  font-size: 0.9rem;
  font-weight: 800;
}

.appointment-line-total strong {
  color: var(--oro-ink);
  font-size: 1.35rem;
}

.appointment-payment-summary {
  background: rgba(250, 250, 249, 0.82);
  border: 1px solid var(--oro-line);
  border-radius: 8px;
  color: rgba(35, 33, 31, 0.76);
  display: flex;
  font-weight: 800;
  gap: 18px;
  grid-column: 1 / -1;
  padding: 12px;
}

.appointment-payment-summary strong {
  color: var(--oro-ink);
}

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

.detail-list p {
  align-items: center;
  border-bottom: 1px solid var(--oro-line);
  display: flex;
  justify-content: space-between;
  margin: 0;
  padding: 0 0 10px;
}

.detail-list p:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.detail-list span {
  color: rgba(35, 33, 31, 0.62);
  font-weight: 800;
}

.detail-list strong {
  color: var(--oro-ink);
}

.modal-open {
  overflow: hidden;
}

.quick-appointment-modal[hidden] {
  display: none;
}

.quick-appointment-modal {
  align-items: center;
  display: flex;
  inset: 0;
  justify-content: center;
  padding: 24px;
  position: fixed;
  z-index: 100;
}

.quick-modal-backdrop {
  background: rgba(38, 37, 36, 0.58);
  border: 0;
  border-radius: 0;
  inset: 0;
  margin: 0;
  padding: 0;
  position: absolute;
}

.quick-modal-dialog {
  background: #fff;
  border: 1px solid var(--oro-line);
  border-radius: 17px;
  box-shadow: 0 24px 70px rgba(38, 37, 36, 0.28);
  max-height: calc(100vh - 48px);
  max-width: 860px;
  overflow: auto;
  padding: 24px;
  position: relative;
  width: 100%;
  z-index: 1;
}

.quick-modal-header {
  align-items: start;
  display: flex;
  justify-content: space-between;
  margin-bottom: 14px;
}

.quick-modal-header > div {
  display: grid;
  gap: 3px;
}

.quick-modal-header span {
  color: var(--oro-rose);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.quick-modal-header h2,
.quick-modal-header p {
  margin: 0;
}

.quick-modal-header p {
  color: rgba(35, 33, 31, 0.58);
}

.quick-modal-close {
  background: transparent;
  color: var(--oro-ink);
  font-size: 28px;
  line-height: 1;
  margin: 0;
  padding: 2px 8px;
}

.quick-slot-context {
  background: rgba(62, 92, 88, 0.12);
  border: 1px solid rgba(62, 92, 88, 0.35);
  border-radius: 10px;
  color: #6A8C88;
  font-weight: 850;
  margin-bottom: 18px;
  padding: 11px 14px;
  text-align: center;
}

.quick-appointment-form {
  display: grid;
  gap: 14px 16px;
  grid-template-columns: 1fr 1fr;
}

.quick-appointment-form .field {
  margin: 0;
}

.quick-appointment-form .field small {
  color: rgba(35, 33, 31, 0.52);
  margin-top: 4px;
}

.quick-availability-result {
  background: #eef9f0;
  border: 1px solid #bfe8c8;
  border-radius: 11px;
  color: #267337;
  display: grid;
  gap: 6px;
  grid-column: 1 / -1;
  padding: 13px 15px;
}

.quick-availability-result span {
  border-top: 1px solid rgba(38, 115, 55, 0.16);
  padding-top: 6px;
}

.quick-modal-actions {
  display: flex;
  gap: 10px;
  grid-column: 1 / -1;
  justify-content: flex-end;
}

.quick-modal-actions button {
  margin: 0;
  min-width: 150px;
}

.appointments-filter {
  align-items: end;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(260px, 1.4fr) repeat(3, minmax(150px, 0.7fr)) auto;
  margin: 0 0 18px;
}

.appointment-view-tabs {
  background: #fff;
  border: 1px solid var(--oro-line);
  border-radius: 16px;
  box-shadow: 0 10px 28px rgba(35, 33, 31, 0.08);
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(6, minmax(120px, 1fr));
  margin-bottom: 18px;
  padding: 9px;
  position: sticky;
  top: 84px;
  z-index: 24;
}

.appointment-view-tabs a {
  border-radius: 11px;
  color: rgba(35, 33, 31, 0.72);
  font-weight: 850;
  padding: 14px 12px;
  text-align: center;
  text-decoration: none;
  transition: background 160ms ease, color 160ms ease, transform 160ms ease;
}

.appointment-view-tabs a:hover {
  background: rgba(62, 92, 88, 0.12);
  color: var(--oro-ink);
  transform: translateY(-1px);
}

.appointment-view-tabs a.active {
  background: var(--oro-rose);
  color: #fff;
  box-shadow: 0 8px 18px rgba(125, 161, 156, 0.2);
}

.appointments-shell {
  grid-template-columns: 240px minmax(0, 1fr);
}

.appointment-turn-strip {
  align-items: center;
  background: #fff;
  border: 1px solid var(--oro-line);
  border-radius: 13px;
  box-shadow: 0 8px 22px rgba(35, 33, 31, 0.07);
  display: grid;
  gap: 0;
  grid-template-columns: auto minmax(180px, 1fr) auto auto auto;
  margin-bottom: 18px;
  min-height: 58px;
  padding: 9px 18px;
  position: sticky;
  top: 164px;
  z-index: 23;
}

.appointment-turn-strip > span {
  align-items: center;
  border-right: 1px solid var(--oro-line);
  color: rgba(35, 33, 31, 0.62);
  display: flex;
  font-size: 14px;
  gap: 11px;
  min-height: 34px;
  padding: 2px 22px;
}

.appointment-turn-strip > span:first-child {
  padding-left: 0;
}

.appointment-turn-strip strong {
  color: var(--oro-ink);
  font-weight: 900;
}

.turn-strip-icon {
  align-items: center;
  color: #6A8C88;
  display: inline-flex;
  flex: 0 0 24px;
  font-style: normal;
  height: 24px;
  justify-content: center;
  width: 24px;
}

.turn-strip-icon svg,
.turn-strip-open-icon svg {
  fill: none;
  height: 100%;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
  width: 100%;
}

.turn-strip-icon.hair {
  color: #3e6ba7;
}

.turn-strip-icon.auto {
  color: rgba(35, 33, 31, 0.72);
}

.appointment-turn-strip a {
  align-items: center;
  border: 1px solid rgba(62, 92, 88, 0.75);
  border-radius: 9px;
  color: #6A8C88;
  display: inline-flex;
  font-size: 14px;
  font-weight: 850;
  gap: 8px;
  justify-content: center;
  margin-left: 14px;
  min-height: 40px;
  padding: 8px 14px;
  text-align: center;
  text-decoration: none;
}

.turn-strip-open-icon {
  display: inline-flex;
  font-style: normal;
  height: 19px;
  width: 19px;
}

.appointment-calendar-toolbar {
  align-items: center;
  display: flex;
  gap: 20px;
  justify-content: space-between;
  margin-bottom: 18px;
  padding: 14px 18px;
}

.appointment-date-nav,
.appointment-date-picker,
.appointment-role-legend {
  align-items: center;
  display: flex;
  gap: 12px;
}

.appointment-date-nav div {
  display: grid;
  min-width: 210px;
}

.appointment-date-nav span,
.turn-preview-heading span {
  color: rgba(35, 33, 31, 0.54);
  font-size: 12px;
  font-weight: 850;
  text-transform: uppercase;
}

.calendar-arrow {
  align-items: center;
  border: 1px solid var(--oro-line);
  border-radius: 10px;
  color: var(--oro-ink);
  display: inline-flex;
  font-size: 28px;
  height: 40px;
  justify-content: center;
  text-decoration: none;
  width: 40px;
}

.appointment-date-picker input,
.appointment-date-picker button {
  margin: 0;
}

.appointment-role-legend span {
  align-items: center;
  color: rgba(35, 33, 31, 0.66);
  display: inline-flex;
  font-size: 13px;
  font-weight: 750;
  gap: 6px;
}

.appointment-role-legend i {
  background: #3E5C58;
  border-radius: 50%;
  height: 9px;
  width: 9px;
}

.appointment-role-legend i.hair {
  background: #6d96cc;
}

.appointment-planner-layout {
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(0, 1fr);
  margin-bottom: 24px;
}

.appointment-calendar-panel {
  overflow: hidden;
  padding: 0;
}

.appointment-calendar-scroll {
  overflow: auto;
}

.appointment-calendar-grid {
  display: grid;
  grid-template-columns: 72px repeat(var(--professional-count), minmax(170px, 1fr));
  min-width: 960px;
}

.calendar-corner,
.calendar-professional {
  background: #fff;
  border-bottom: 1px solid var(--oro-line);
  border-right: 1px solid var(--oro-line);
  min-height: 82px;
  position: sticky;
  top: 0;
  z-index: 3;
}

.calendar-corner {
  align-items: center;
  color: rgba(35, 33, 31, 0.55);
  display: flex;
  font-size: 12px;
  font-weight: 900;
  justify-content: center;
  text-transform: uppercase;
}

.calendar-professional {
  align-items: center;
  display: grid;
  gap: 2px 9px;
  grid-template-columns: 38px 1fr;
  padding: 14px;
}

.calendar-professional > span {
  align-items: center;
  background: rgba(62, 92, 88, 0.22);
  border-radius: 50%;
  display: flex;
  grid-row: 1 / 3;
  height: 38px;
  justify-content: center;
  width: 38px;
}

.calendar-professional.is-hair > span {
  background: rgba(109, 150, 204, 0.22);
  color: #3e6ba7;
}

.calendar-professional.is-unassigned {
  background: #fff8ed;
}

.calendar-professional.is-unassigned > span {
  background: #f7dfb8;
  color: #8a5609;
}

.calendar-professional.is-unassigned small {
  color: #8a5609;
}

.calendar-professional small {
  color: rgba(35, 33, 31, 0.55);
}

.calendar-time,
.calendar-slot {
  border-bottom: 1px solid var(--oro-line);
  border-right: 1px solid var(--oro-line);
  min-height: 82px;
}

.calendar-time {
  color: rgba(35, 33, 31, 0.55);
  font-size: 12px;
  font-weight: 800;
  padding: 12px 8px;
  text-align: center;
}

.calendar-slot {
  background: linear-gradient(to bottom, transparent 49%, rgba(35, 33, 31, 0.04) 50%, transparent 51%);
  padding: 6px;
  position: relative;
}

.calendar-add-slot {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 8px;
  color: rgba(62, 92, 88, 0.58);
  display: flex;
  font-size: 20px;
  height: 100%;
  justify-content: center;
  margin: 0;
  min-height: 68px;
  opacity: 0.45;
  padding: 0;
  width: 100%;
}

.calendar-add-slot:hover,
.calendar-add-slot:focus-visible {
  background: rgba(62, 92, 88, 0.1);
  color: #6A8C88;
  opacity: 1;
}

.calendar-booking {
  background: rgba(62, 92, 88, 0.14);
  border-left: 4px solid var(--oro-rose);
  border-radius: 8px;
  color: var(--oro-ink);
  display: grid;
  gap: 2px;
  margin-bottom: 5px;
  padding: 8px;
  text-decoration: none;
}

.calendar-booking:hover {
  box-shadow: 0 7px 16px rgba(35, 33, 31, 0.12);
}

.calendar-booking strong,
.calendar-booking span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calendar-booking strong {
  font-size: 12px;
}

.calendar-booking span,
.calendar-booking small {
  color: rgba(35, 33, 31, 0.65);
  font-size: 11px;
}

.appointment-turn-preview {
  display: none;
  padding: 20px;
}

.turn-preview-heading {
  align-items: start;
  display: flex;
  justify-content: space-between;
}

.turn-preview-heading h2,
.appointment-list-heading h2 {
  margin: 4px 0 0;
}

.appointment-turn-preview > p,
.appointment-list-heading p {
  color: rgba(35, 33, 31, 0.62);
  margin: 8px 0 18px;
}

.turn-preview-list {
  display: grid;
  gap: 8px;
  margin-bottom: 18px;
}

.turn-preview-list article {
  align-items: center;
  background: rgba(250, 250, 249, 0.8);
  border: 1px solid var(--oro-line);
  border-radius: 12px;
  display: grid;
  gap: 10px;
  grid-template-columns: 30px 1fr auto;
  padding: 10px;
}

.turn-preview-list article > b {
  align-items: center;
  background: rgba(62, 92, 88, 0.2);
  border-radius: 50%;
  display: flex;
  height: 30px;
  justify-content: center;
}

.turn-preview-list article div {
  display: grid;
}

.turn-preview-list article span,
.turn-preview-list article small {
  color: rgba(35, 33, 31, 0.55);
  font-size: 11px;
}

.full-width {
  width: 100%;
}

.appointment-list-section {
  border-top: 1px solid var(--oro-line);
  padding-top: 22px;
}

.appointment-list-heading {
  align-items: end;
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
}

.appointment-list-heading p {
  margin-bottom: 0;
}

.turn-board-layout {
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(0, 1fr);
  margin-bottom: 18px;
}

.professional-view-summary {
  display: grid;
  gap: 14px;
  grid-template-columns:
    minmax(360px, 1.5fr)
    minmax(220px, 0.95fr)
    repeat(3, minmax(145px, 0.72fr));
  margin-bottom: 18px;
}

.professional-selector-card,
.professional-metric-card {
  margin: 0;
  min-height: 82px;
  padding: 12px 15px;
}

.professional-selector-card {
  align-items: center;
  display: grid;
  gap: 12px;
  grid-template-columns: 52px minmax(0, 1fr) auto;
}

.professional-view-avatar {
  align-items: center;
  background: var(--oro-rose);
  border-radius: 50%;
  color: #fff;
  display: flex;
  font-family: Georgia, serif;
  font-size: 17px;
  height: 48px;
  justify-content: center;
  width: 48px;
}

.professional-selector-card label {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.professional-selector-card label > span,
.professional-metric-card div > span {
  color: rgba(35, 33, 31, 0.54);
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}

.professional-selector-card select {
  border: 0;
  font-size: 15px;
  font-weight: 900;
  margin: 0;
  min-height: 38px;
  min-width: 0;
  padding: 4px 30px 4px 0;
}

.professional-view-status {
  background: #eef9f0;
  border: 1px solid #bfe8c8;
  border-radius: 8px;
  color: #267337;
  font-size: 12px;
  font-weight: 850;
  padding: 7px 9px;
}

.professional-metric-card {
  align-items: center;
  display: grid;
  gap: 11px;
  grid-template-columns: 38px minmax(0, 1fr);
}

.professional-metric-card > i {
  align-items: center;
  border: 1px solid rgba(35, 33, 31, 0.34);
  border-radius: 50%;
  color: rgba(35, 33, 31, 0.72);
  display: inline-flex;
  font-size: 20px;
  font-style: normal;
  height: 36px;
  justify-content: center;
  width: 36px;
}

.professional-metric-card > div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.professional-metric-card strong {
  font-size: 17px;
  white-space: nowrap;
}

.professional-metric-card.is-working-hours {
  grid-template-columns: 38px minmax(150px, 1fr);
}

.professional-metric-card.is-working-hours strong {
  font-size: 16px;
}

.professional-metric-card strong.is-available {
  color: #267337;
}

.professional-view-layout {
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(0, 1.9fr) minmax(350px, 0.84fr);
  margin-bottom: 24px;
}

.professional-day-timeline {
  padding: 17px 20px;
}

.professional-timeline-list {
  border-left: 2px solid rgba(62, 92, 88, 0.48);
  display: grid;
  margin-left: 68px;
}

.professional-timeline-row {
  display: grid;
  grid-template-columns: 68px 1fr;
  min-height: 58px;
  position: relative;
}

.professional-timeline-row > time {
  color: rgba(35, 33, 31, 0.58);
  font-size: 12px;
  margin-left: -78px;
  padding-top: 12px;
  text-align: right;
}

.professional-timeline-row::before {
  background: var(--oro-rose);
  border: 3px solid #fff;
  border-radius: 50%;
  content: "";
  height: 10px;
  left: -6px;
  position: absolute;
  top: 13px;
  width: 10px;
}

.professional-timeline-track {
  border-bottom: 1px dashed rgba(35, 33, 31, 0.18);
  display: grid;
  gap: 6px;
  padding: 5px 0 6px 18px;
}

.professional-timeline-booking {
  background: rgba(62, 92, 88, 0.1);
  border: 1px solid rgba(62, 92, 88, 0.68);
  border-radius: 9px;
  color: var(--oro-ink);
  display: grid;
  gap: 3px;
  padding: 8px 12px;
  text-decoration: none;
}

.professional-timeline-booking > span {
  color: #6A8C88;
  font-size: 11px;
  font-weight: 850;
}

.professional-timeline-booking small {
  color: rgba(35, 33, 31, 0.58);
}

.professional-empty-slot {
  background: transparent;
  border: 1px dashed rgba(35, 33, 31, 0.22);
  border-radius: 8px;
  color: var(--oro-rose);
  font-size: 21px;
  margin: 0;
  min-height: 38px;
  padding: 0;
}

.professional-empty-slot:hover {
  background: rgba(62, 92, 88, 0.08);
}

.professional-conflict-warning {
  background: #fff5e7;
  border: 1px solid #ead2a8;
  border-radius: 8px;
  color: #8a5609;
  font-size: 12px;
  font-weight: 850;
  padding: 8px 10px;
}

.professional-view-aside {
  display: grid;
  gap: 12px;
  align-content: start;
}

.professional-side-card {
  margin: 0;
  padding: 13px 15px;
}

.professional-side-card h3 {
  border-bottom: 1px solid var(--oro-line);
  margin: -2px -2px 13px;
  font-size: 16px;
  padding: 0 2px 8px;
}

.professional-side-card > p {
  align-items: center;
  display: flex;
  gap: 7px;
}

.professional-turn-position {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
}

.professional-turn-position span {
  color: rgba(35, 33, 31, 0.58);
}

.professional-turn-position strong {
  font-size: 24px;
}

.professional-side-actions {
  display: grid;
  gap: 8px;
  grid-template-columns: 1fr 1fr;
}

.professional-side-actions .button,
.professional-side-actions button {
  margin: 0;
  min-height: 40px;
  padding: 8px;
  text-align: center;
}

.professional-service-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.professional-service-chips span {
  border: 1px solid rgba(62, 92, 88, 0.58);
  border-radius: 8px;
  color: #6A8C88;
  font-size: 11px;
  font-weight: 800;
  padding: 7px 9px;
}

.professional-service-chips small {
  color: rgba(35, 33, 31, 0.54);
  flex-basis: 100%;
}

.professional-workload-grid {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(3, 1fr);
  margin-bottom: 12px;
}

.professional-workload-grid span {
  color: rgba(35, 33, 31, 0.58);
  display: grid;
  font-size: 10px;
  text-align: center;
}

.professional-workload-grid strong {
  color: var(--oro-ink);
  font-size: 17px;
}

.professional-workload-bar {
  background: rgba(35, 33, 31, 0.08);
  border-radius: 999px;
  height: 9px;
  overflow: hidden;
}

.professional-workload-bar i {
  background: var(--oro-rose);
  border-radius: inherit;
  display: block;
  height: 100%;
}

.professional-activity-list {
  display: grid;
}

.professional-activity-list p {
  align-items: center;
  border-bottom: 1px solid var(--oro-line);
  display: flex;
  justify-content: space-between;
  margin: 0;
  padding: 8px 0;
}

.professional-activity-list span,
.professional-activity-list small {
  color: rgba(35, 33, 31, 0.54);
  font-size: 11px;
}

.professional-availability-board,
.automatic-turn-board,
.turn-audit-panel {
  padding: 20px;
}

.turn-board-title {
  align-items: center;
  display: flex;
  gap: 16px;
  justify-content: space-between;
  margin-bottom: 16px;
}

.turn-board-title > div {
  display: grid;
  gap: 3px;
}

.turn-board-title span {
  color: rgba(35, 33, 31, 0.54);
  font-size: 12px;
  font-weight: 850;
  text-transform: uppercase;
}

.turn-board-title h2 {
  margin: 0;
}

.professional-day-list {
  display: grid;
  gap: 9px;
}

.professional-day-row {
  align-items: center;
  border: 1px solid var(--oro-line);
  border-left: 4px solid var(--oro-rose);
  border-radius: 13px;
  display: grid;
  gap: 10px;
  grid-template-columns: 42px minmax(190px, 1.4fr) minmax(120px, 0.7fr) minmax(120px, 0.7fr) minmax(150px, 0.85fr) minmax(100px, 0.55fr) 110px;
  padding: 11px;
}

.professional-day-row.is-hair {
  border-left-color: #6d96cc;
}

.professional-avatar {
  align-items: center;
  align-self: center;
  background: rgba(62, 92, 88, 0.2);
  border-radius: 50%;
  display: flex;
  font-size: 12px;
  font-weight: 900;
  height: 42px;
  justify-content: center;
  width: 42px;
}

.professional-day-row .professional-avatar,
.professional-day-row .professional-identity,
.professional-day-row label {
  grid-row: 1;
}

.professional-day-row.is-hair .professional-avatar {
  background: rgba(109, 150, 204, 0.18);
  color: #3e6ba7;
}

.professional-identity,
.professional-next-free,
.professional-day-row label {
  display: grid;
  gap: 4px;
}

.professional-identity small,
.professional-next-free span,
.professional-day-row label > span {
  color: rgba(35, 33, 31, 0.54);
  font-size: 11px;
  font-weight: 750;
}

.professional-day-row input,
.professional-day-row select,
.professional-day-row button {
  margin: 0;
  min-height: 40px;
  padding: 8px 9px;
}

.professional-next-free {
  align-self: center;
  grid-column: 6;
  grid-row: 1;
}

.professional-day-row > button {
  grid-column: 7;
  grid-row: 1;
  justify-self: stretch;
}

.availability-available {
  border-color: #9ccfac;
  color: #267337;
}

.availability-in_service {
  border-color: #e5bd77;
  color: #8a5609;
}

.availability-break,
.availability-off_duty {
  color: rgba(35, 33, 31, 0.65);
}

.auto-assignment-form button {
  background: rgba(35, 33, 31, 0.08);
  color: rgba(35, 33, 31, 0.72);
  margin: 0;
}

.auto-assignment-form button.is-on {
  background: #eef9f0;
  border-color: #9ccfac;
  color: #267337;
}

.turn-queue-group {
  border: 1px solid rgba(62, 92, 88, 0.45);
  border-radius: 14px;
  margin-bottom: 14px;
  overflow: hidden;
}

.turn-queue-group.is-hair {
  border-color: rgba(109, 150, 204, 0.46);
}

.turn-queue-group h3 {
  background: rgba(62, 92, 88, 0.1);
  color: #6A8C88;
  margin: 0;
  padding: 12px 14px;
}

.turn-queue-group.is-hair h3 {
  background: rgba(109, 150, 204, 0.1);
  color: #3e6ba7;
}

.turn-queue-row {
  align-items: center;
  border-top: 1px solid var(--oro-line);
  display: grid;
  gap: 12px;
  grid-template-columns: 30px minmax(130px, 1fr) 62px 72px auto;
  padding: 10px 12px;
}

.turn-queue-row > b {
  align-items: center;
  background: var(--oro-rose);
  border-radius: 50%;
  color: #fff;
  display: flex;
  height: 30px;
  justify-content: center;
}

.turn-queue-group.is-hair .turn-queue-row > b {
  background: #6d96cc;
}

.turn-person,
.turn-queue-row > div:not(.turn-row-actions) {
  display: grid;
  gap: 3px;
}

.turn-queue-row > div > span {
  color: rgba(35, 33, 31, 0.54);
  font-size: 10px;
  text-transform: uppercase;
}

.availability-dot {
  align-items: center;
  display: flex;
  gap: 5px;
}

.availability-dot::before {
  background: #979797;
  border-radius: 50%;
  content: "";
  height: 7px;
  width: 7px;
}

.availability-dot.available::before {
  background: #43a45b;
}

.availability-dot.in_service::before {
  background: #d68c25;
}

.turn-row-actions {
  display: flex;
  gap: 5px;
}

.turn-row-actions form {
  margin: 0;
}

.turn-row-actions button {
  margin: 0;
  min-height: 36px;
  padding: 7px 9px;
}

.oro-icon-sprite {
  height: 0;
  overflow: hidden;
  position: absolute;
  width: 0;
}

.turn-fairness-rules {
  align-items: center;
  background: rgba(250, 250, 249, 0.8);
  border: 1px solid var(--oro-line);
  border-radius: 12px;
  display: grid;
  gap: 0;
  grid-template-columns: auto repeat(4, minmax(120px, 1fr)) minmax(150px, auto);
  padding: 14px 16px;
}

.turn-fairness-rules > strong {
  padding-right: 16px;
  white-space: nowrap;
}

.turn-fairness-rules > strong small {
  color: rgba(35, 33, 31, 0.5);
  display: block;
  font-size: 10px;
  font-weight: 700;
}

.fairness-rule,
.fairness-override {
  align-items: center;
  border-left: 1px solid var(--oro-line);
  display: flex;
  gap: 9px;
  min-height: 44px;
  padding: 0 14px;
}

.fairness-rule i,
.fairness-override i {
  align-items: center;
  border: 1px solid rgba(35, 33, 31, 0.35);
  border-radius: 50%;
  color: rgba(35, 33, 31, 0.72);
  display: inline-flex;
  flex: 0 0 30px;
  font-size: 16px;
  font-style: normal;
  height: 30px;
  justify-content: center;
  width: 30px;
}

.fairness-rule i svg {
  fill: none;
  height: 17px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
  width: 17px;
}

.fairness-rule span,
.fairness-override span {
  color: rgba(35, 33, 31, 0.68);
  font-size: 11px;
  line-height: 1.35;
}

.fairness-rule span b {
  color: var(--oro-rose);
}

.fairness-override {
  background: rgba(62, 92, 88, 0.08);
  border-radius: 0 9px 9px 0;
}

.fairness-override i {
  background: var(--oro-rose);
  border-color: var(--oro-rose);
  color: #fff;
  font-family: Georgia, serif;
  font-weight: 900;
}

.fairness-override span {
  color: #6A8C88;
  font-weight: 800;
}

.turn-audit-panel {
  margin-bottom: 24px;
}

.turn-audit-list {
  display: grid;
}

.turn-audit-list p {
  align-items: center;
  border-top: 1px solid var(--oro-line);
  display: grid;
  gap: 12px;
  grid-template-columns: 150px 120px 1fr;
  margin: 0;
  padding: 10px 0;
}

.turn-audit-list small {
  color: rgba(35, 33, 31, 0.56);
}

.appointments-filter .field {
  margin-bottom: 0;
}

.appointments-list-panel {
  padding: 0;
}

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

.appointments-table th {
  background: rgba(250, 250, 249, 0.78);
  color: rgba(35, 33, 31, 0.68);
  font-size: 13px;
  text-align: left;
  white-space: nowrap;
}

.appointments-table td,
.appointments-table th {
  border-bottom: 1px solid var(--oro-line);
  padding: 14px 16px;
  vertical-align: middle;
}

.appointments-table tbody tr:hover {
  background: rgba(62, 92, 88, 0.06);
}

.table-ref {
  color: var(--oro-rose);
  display: inline-block;
  font-weight: 900;
  text-decoration: none;
  white-space: nowrap;
}

.table-note {
  color: rgba(35, 33, 31, 0.5);
  display: block;
  font-size: 12px;
  margin-top: 3px;
}

.table-note.backdated-note {
  color: #A13A3A;
  font-weight: 700;
}

.status-badge,
.type-badge {
  border: 1px solid var(--oro-line);
  border-radius: 999px;
  display: inline-flex;
  font-size: 12px;
  font-weight: 900;
  padding: 5px 10px;
  white-space: nowrap;
}

.payment-paid {
  background: #eef9f0;
  border-color: #bfe8c8;
  color: #267337;
}

.payment-partial {
  background: #fff5e7;
  border-color: #ead2a8;
  color: #8a5609;
}

.payment-unpaid {
  background: rgba(250, 250, 249, 0.92);
  color: rgba(35, 33, 31, 0.74);
}

.appointment-completed {
  background: rgba(35, 33, 31, 0.06);
  border-color: rgba(35, 33, 31, 0.42);
  color: var(--oro-ink);
}

.appointment-confirmed {
  background: rgba(62, 92, 88, 0.12);
  border-color: rgba(62, 92, 88, 0.4);
  color: #658682;
}

.appointment-canceled {
  background: #fff0f0;
  border-color: #f0c5c5;
  color: #9b2222;
}

.appointment-date_changed {
  background: #f3f2ff;
  border-color: #d7d3fa;
  color: #51459b;
}

.type-badge {
  background: var(--oro-white);
  color: rgba(35, 33, 31, 0.76);
}

.receipt-page {
  background: #ECEAE8;
}

.receipt-wrap {
  display: grid;
  gap: 20px;
  justify-content: center;
  padding: 28px 16px;
}

.receipt-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
}

.receipt {
  background: #fff;
  color: #111;
  font-family: "Noto Sans Myanmar", "Myanmar Text", Arial, sans-serif;
  font-size: 12px;
  line-height: 1.35;
  padding: 10px;
}

.receipt-80mm {
  width: 80mm;
}

.receipt-58mm {
  width: 58mm;
}

.receipt header,
.receipt footer {
  text-align: center;
}

.receipt h1 {
  font-family: Georgia, serif;
  font-size: 28px;
  margin: 0;
}

.receipt header strong {
  display: block;
  font-size: 12px;
  letter-spacing: 0;
  margin-top: 4px;
}

.receipt h2 {
  font-size: 13px;
  margin: 8px 0;
}

.receipt p {
  margin: 3px 0;
}

.receipt b {
  font-weight: 900;
}

.receipt-items small {
  color: #555;
  font-size: 10px;
}

.receipt-item-name {
  display: grid;
  gap: 2px;
  overflow-wrap: anywhere;
}

.receipt-item-detail {
  display: block;
}

.appointment-line-card.is-locked {
  background: rgba(250, 250, 249, 0.55);
}

.appointment-line-card.is-locked input,
.appointment-line-card.is-locked select {
  color: rgba(35, 33, 31, 0.72);
}

.receipt-line {
  border-top: 1px dashed #111;
  margin: 8px 0;
}

.service-editor-page .price-options-panel {
  background: var(--oro-white);
  border: 1px solid rgba(35, 33, 31, 0.14);
  border-radius: 8px;
  display: grid;
  gap: 22px;
  padding: clamp(18px, 3vw, 28px);
}

.service-editor-page .price-options-heading {
  align-items: center;
  display: flex;
  gap: 18px;
  justify-content: space-between;
}

.service-editor-page .price-options-heading strong {
  color: var(--oro-ink);
  display: block;
  font-size: 24px;
  line-height: 1.2;
  margin: 0 0 8px;
}

.service-editor-page .price-option-add {
  align-items: center;
  background: var(--oro-white);
  border: 1px solid var(--oro-line);
  border-radius: 8px;
  color: var(--oro-ink);
  display: inline-flex;
  font-weight: 900;
  min-height: 46px;
  padding: 10px 18px;
  white-space: nowrap;
}

.service-editor-page .price-option-card {
  background: var(--oro-white);
  border: 1px solid rgba(35, 33, 31, 0.14);
  border-radius: 8px;
  box-shadow: 0 10px 24px rgba(35, 33, 31, 0.04);
  display: grid;
  gap: 20px;
  padding: clamp(18px, 3vw, 24px);
}

.service-editor-page .price-option-card-head {
  align-items: center;
  display: flex;
  gap: 16px;
  justify-content: space-between;
}

.service-editor-page .price-option-card h3 {
  color: var(--oro-ink);
  font-size: 20px;
  line-height: 1.2;
  margin: 0;
}

.service-editor-page .price-option-fields {
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(220px, 1fr) minmax(180px, 1fr);
}

.service-editor-page .price-option-fields label {
  display: grid;
  gap: 8px;
}

.service-editor-page .price-option-fields label:last-child {
  max-width: 220px;
}

.service-editor-page .price-option-fields span {
  color: var(--oro-ink);
  display: block;
  font-size: 14px;
  font-weight: 900;
}

.service-editor-page .price-option-fields input,
.service-editor-page .price-option-fields select {
  background: var(--oro-white);
  border: 1px solid var(--oro-line);
  border-radius: 8px;
  color: var(--oro-ink);
  display: block;
  font: inherit;
  min-height: 50px;
  padding: 11px 14px;
  width: 100%;
}

.service-editor-page .price-option-delete,
.service-editor-page .price-option-remove-new {
  align-items: center;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: #c94848 !important;
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-weight: 900;
  gap: 8px;
  min-height: auto;
  padding: 0 !important;
}

.service-editor-page .price-option-delete input {
  min-height: auto;
  width: auto;
}

.service-editor-page .new-option-card.is-hidden {
  display: none;
}

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

.service-recipe-row {
  background: var(--oro-white);
  border: 1px solid var(--oro-line);
  border-radius: 10px;
  display: grid;
  gap: 16px 18px;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 0.45fr);
  padding: 18px;
  position: relative;
}

.service-recipe-row.is-hidden {
  display: none;
}

.service-recipe-row.has-estimate {
  grid-template-columns: minmax(0, 1fr) minmax(180px, 0.45fr);
}

.service-recipe-row .recipe-product-field {
  grid-column: 1 / -1;
  padding-right: 38px;
}

.service-recipe-row .recipe-amount-field,
.service-recipe-row .recipe-unit-field {
  min-width: 0;
}

.service-recipe-row .field input,
.service-recipe-row .field select {
  max-width: none;
  min-width: 0;
  width: 100%;
}

.service-recipe-estimate {
  align-content: center;
  background: #FAFAF9;
  border-radius: 8px;
  display: grid;
  grid-column: 1 / -1;
  min-height: 50px;
  padding: 10px 12px;
}

.service-recipe-row:not(.has-estimate) .service-recipe-estimate {
  background: transparent;
  min-height: 0;
  padding: 0;
}

.service-recipe-card-action {
  height: 28px;
  position: absolute;
  right: 18px;
  top: 18px;
  width: 28px;
}

.service-recipe-remove {
  background: transparent !important;
  border: 0 !important;
  color: #709B97 !important;
  font-size: 13px;
  min-height: auto;
  padding: 0 !important;
  position: absolute;
  right: 18px;
  top: 20px;
}

.service-recipe-add-area {
  align-items: start;
  display: grid;
  gap: 7px;
  justify-items: start;
  margin-top: 18px;
}

.service-recipe-add {
  background: var(--oro-white) !important;
  border-color: var(--oro-rose) !important;
  color: #709B97 !important;
  min-width: 230px;
}

.service-recipe-add:hover,
.service-recipe-add:focus-visible {
  background: #F4F8F8 !important;
}

.service-recipe-add-area > span {
  color: #8C8985;
  font-size: 12px;
}

.service-recipe-estimate strong,
.service-recipe-estimate span {
  display: block;
}

.service-recipe-estimate span {
  color: #8C8985;
  font-size: 12px;
}

.service-usage-history {
  border-top: 1px solid var(--oro-line);
  margin-top: 24px;
  padding-top: 22px;
}

.service-usage-history h3,
.service-usage-history p {
  margin-top: 0;
}

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

.service-cost-summary {
  border: 1px solid var(--oro-line);
  border-radius: 10px;
  display: grid;
  gap: 3px;
  padding: 18px;
}

.service-cost-summary > span,
.service-cost-summary small {
  color: #7E7A76;
}

.service-cost-summary strong {
  color: var(--oro-ink);
  font-size: 21px;
}

.service-cost-input-panel,
.service-cost-composition {
  border: 1px solid var(--oro-line);
  border-radius: 10px;
  margin-top: 18px;
  padding: 18px;
}

.service-cost-input-panel h3,
.service-cost-composition h3 {
  margin: 0 0 14px;
}

.service-cost-input-grid {
  display: grid;
  gap: 16px 18px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.service-cost-input-grid .field {
  min-width: 0;
}

.service-cost-input-grid input {
  width: 100%;
}

.service-cost-results {
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(0, 0.9fr) minmax(280px, 1.1fr);
  margin-top: 18px;
}

.service-cost-result-list,
.service-price-recommendation {
  border: 1px solid var(--oro-line);
  border-radius: 10px;
  padding: 18px;
}

.service-cost-result-list > div {
  align-items: center;
  border-bottom: 1px solid var(--oro-line);
  display: flex;
  gap: 14px;
  justify-content: space-between;
  padding: 11px 0;
}

.service-cost-result-list > div:first-child {
  padding-top: 0;
}

.service-cost-result-list > div:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.service-margin-badge {
  background: #e8f6eb;
  border-radius: 8px;
  color: #28723b;
  padding: 4px 10px;
}

.service-margin-badge.is-negative {
  background: #F4FAFB;
  color: #568889;
}

.service-price-recommendation {
  background: #FAFDFD;
  border-color: rgba(62, 92, 88, 0.55);
  display: grid;
  gap: 7px;
}

.service-price-recommendation > span {
  color: var(--oro-ink);
  font-weight: 800;
}

.service-price-recommendation > strong {
  color: #82ABA6;
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.15;
}

.service-price-recommendation .button {
  justify-self: start;
  margin-top: 8px;
}

.service-price-recommendation p {
  color: #7E7A76;
  font-size: 12px;
  margin: 5px 0 0;
}

.service-cost-bar {
  border-radius: 8px;
  display: flex;
  height: 30px;
  overflow: hidden;
}

.service-cost-bar > span {
  min-width: 0;
  transition: width 180ms ease;
}

.cost-bar-product,
.legend-product {
  background: #3E5C58;
}

.cost-bar-staff,
.legend-staff {
  background: #e7c28e;
}

.cost-bar-other,
.legend-other {
  background: #23211F;
}

.service-cost-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 12px;
}

.service-cost-legend span {
  align-items: center;
  color: #7E7A76;
  display: inline-flex;
  font-size: 12px;
  gap: 7px;
}

.service-cost-legend i {
  border-radius: 999px;
  height: 11px;
  width: 11px;
}

@media (max-width: 760px) {
  .payroll-heading-actions,
  .payroll-header {
    align-items: stretch;
    grid-template-columns: 1fr;
  }

  .payroll-header h1 {
    white-space: normal;
  }

  .payroll-heading-actions > form,
  .payroll-heading-actions button {
    width: 100%;
  }

  .payroll-tabs {
    grid-template-columns: repeat(6, minmax(150px, 1fr));
    top: 64px;
  }

  .payroll-tips-metrics,
  .payroll-overview-layout,
  .payroll-close-layout,
  .payroll-close-lower,
  .payroll-documents-layout,
  .payslip-grid {
    grid-template-columns: 1fr;
  }

  .payroll-summary-panel,
  .payroll-export-card {
    position: static;
  }

  .payslip-grid > section { border-bottom: 1px solid var(--line); border-right: 0; }
  .payslip-title-row { grid-template-columns: 1fr; }
  .payslip-wordmark { justify-self: center; }
  .payslip-footer { align-items: stretch; flex-direction: column; }
  .payslip-footer > div { display: grid; }

  .payroll-payment-form {
    grid-template-columns: 1fr;
  }

  .section-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .service-cost-summary-grid,
  .service-cost-input-grid,
  .service-cost-results {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 960px) {
  .nav {
    display: none;
  }

  .hero,
  .promo,
  .system-layout,
  .panel-grid,
  .booking-section,
  .sales-grid,
  .management-grid,
  .service-workspace,
  .summary-strip,
  .service-editor-grid,
  .service-recipe-row,
  .pos-grid,
  .pos-line-grid,
  .appointment-line-card,
  .payment-split-row {
    grid-template-columns: 1fr;
  }

  .team-page-grid {
    grid-template-columns: 1fr;
  }

  .service-form-panel {
    position: static;
  }

  .team-form-card {
    position: static;
  }

  .customer-form-card {
    position: static;
  }

  .pos-payment-panel {
    position: static;
  }

  .appointments-filter,
  .appointment-detail-grid,
  .customer-search-row,
  .product-search-row,
  .expense-search-row,
  .inventory-workspace,
  .purchase-receiving-workspace,
  .supplier-payables-workspace,
  .purchase-returns-workspace,
  .stock-count-workspace,
  .inventory-alert-item {
    grid-template-columns: 1fr;
  }

  .appointment-view-tabs {
    display: flex;
    overflow-x: auto;
    top: 72px;
  }

  .appointment-view-tabs a {
    flex: 0 0 auto;
    min-width: 128px;
  }

  .appointment-turn-strip {
    display: flex;
    overflow-x: auto;
    top: 136px;
  }

  .appointment-turn-strip > span {
    flex: 0 0 auto;
  }

  .appointment-turn-strip > span:nth-child(2),
  .appointment-turn-strip > span:nth-child(4) {
    display: none;
  }

  .appointment-turn-strip a {
    flex: 0 0 auto;
  }

  .quick-appointment-modal {
    align-items: flex-end;
    padding: 0;
  }

  .quick-modal-dialog {
    border-radius: 17px 17px 0 0;
    max-height: 92vh;
    padding: 18px;
  }

  .quick-appointment-form {
    grid-template-columns: 1fr;
  }

  .quick-availability-result,
  .quick-modal-actions {
    grid-column: 1;
  }

  .quick-modal-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .quick-modal-actions button {
    min-width: 0;
  }

  .appointment-calendar-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .appointment-date-nav {
    justify-content: space-between;
  }

  .appointment-date-picker {
    display: grid;
    grid-template-columns: 1fr auto;
  }

  .appointment-role-legend {
    flex-wrap: wrap;
  }

  .appointment-planner-layout {
    grid-template-columns: 1fr;
  }

  .turn-board-layout {
    grid-template-columns: 1fr;
  }

  .professional-view-summary {
    grid-template-columns: 1fr 1fr;
  }

  .professional-selector-card {
    grid-column: 1 / -1;
  }

  .professional-view-layout {
    grid-template-columns: 1fr;
  }

  .professional-timeline-list {
    margin-left: 54px;
  }

  .professional-timeline-row {
    grid-template-columns: 52px 1fr;
  }

  .professional-timeline-row > time {
    margin-left: -62px;
  }

  .professional-day-row {
    align-items: stretch;
    grid-template-columns: 42px 1fr 1fr;
  }

  .professional-day-row .professional-avatar {
    grid-column: 1;
    grid-row: 1;
  }

  .professional-day-row .professional-identity {
    grid-column: 2 / -1;
    grid-row: 1;
  }

  .professional-day-row label,
  .professional-next-free {
    grid-column: span 1;
    grid-row: auto;
  }

  .professional-day-row > button {
    grid-column: 1 / -1;
    grid-row: auto;
  }

  .turn-queue-row {
    grid-template-columns: 30px 1fr 60px 70px;
  }

  .turn-row-actions {
    grid-column: 1 / -1;
    justify-content: flex-end;
  }

  .turn-audit-list p {
    grid-template-columns: 1fr;
  }

  .turn-fairness-rules {
    grid-template-columns: 1fr 1fr;
  }

  .turn-fairness-rules > strong,
  .fairness-override {
    grid-column: 1 / -1;
  }

  .fairness-rule,
  .fairness-override {
    border-left: 0;
    border-top: 1px solid var(--oro-line);
    padding: 10px 6px;
  }

  .appointment-turn-preview {
    position: static;
  }

  .customer-list-header,
  .customer-modal-header {
    align-items: stretch;
    flex-direction: column;
  }

  .customer-header-actions,
  .customer-modal-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .customer-header-actions .button:first-child {
    grid-column: 1 / -1;
  }

  .customer-modal-discount {
    grid-template-columns: 1fr;
  }

  .pos-line-grid > .pos-item-field,
  .pos-line-grid > .pos-staff-field,
  .appointment-item-service,
  .appointment-item-staff,
  .appointment-addons,
  .appointment-action-form .wide,
  .appointment-action-form .full,
  .pos-addons {
    grid-column: 1 / -1;
  }

  .pos-price-row {
    grid-template-columns: 1fr;
  }

  .appointment-action-form {
    grid-template-columns: 1fr;
  }

  .appointment-payment-summary {
    display: grid;
    gap: 8px;
  }

  .pos-addons {
    grid-template-columns: 1fr;
  }

  .editor-stepper {
    position: sticky;
    top: 74px;
  }

  .service-editor-stack > .editor-card {
    scroll-margin-top: 170px;
  }

  .service-grid,
  .metric-grid,
  .quick-grid,
  .contact-strip,
  .inventory-summary-grid,
  .inventory-movement-types {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .inventory-panel-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .sidebar {
    bottom: 0;
    display: block;
    left: 0;
    max-width: min(340px, 88vw);
    overflow-y: auto;
    position: fixed;
    top: 0;
    transform: translateX(-105%);
    transition: transform 180ms ease;
    width: 100%;
    z-index: 70;
  }

  .sidebar-inner {
    min-height: calc(100vh - 44px);
    position: static;
  }

  .system-mobile-menu-toggle {
    align-items: center;
    display: inline-flex;
    gap: 7px;
    left: 14px;
    min-height: 44px;
    padding: 9px 13px;
    position: fixed;
    top: 10px;
    z-index: 40;
  }

  .system-mobile-menu-close {
    align-items: center;
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.16);
    display: inline-flex;
    font-size: 26px;
    height: 42px;
    justify-content: center;
    padding: 0;
    position: absolute;
    right: 8px;
    top: 8px;
    width: 42px;
    z-index: 2;
  }

  .system-mobile-menu-backdrop {
    background: rgba(27, 26, 25, 0.56);
    border: 0;
    border-radius: 0;
    inset: 0;
    padding: 0;
    position: fixed;
    z-index: 60;
  }

  body.system-menu-open {
    overflow: hidden;
  }

  body.system-menu-open .sidebar {
    transform: translateX(0);
  }

  body.system-menu-open .system-mobile-menu-backdrop {
    display: block;
  }

  .system-topbar {
    min-height: 64px;
    padding-left: 86px;
  }
}

@media print {
  .system-sidebar,
  .system-topbar,
  .payroll-header,
  .payroll-tabs,
  .payroll-documents-layout,
  .notice,
  .payslip-footer > div { display: none !important; }

  .system-layout,
  main,
  .system-main,
  .payroll-page {
    display: block !important;
    margin: 0 !important;
    max-width: none !important;
    padding: 0 !important;
    width: 100% !important;
  }

  .payroll-payslip-preview { border: 0 !important; box-shadow: none !important; }
}

@media (max-width: 760px) {
  .inventory-tabs {
    top: 74px;
  }

  .purchase-tabs {
    top: 143px;
  }

  .return-purchase-info,
  .return-summary-grid,
  .return-settlement {
    grid-template-columns: 1fr;
  }
}

.settings-page {
  display: grid;
  gap: 18px;
  padding-bottom: 48px;
}

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

.settings-tabs {
  background: #fff;
  border: 1px solid var(--oro-line);
  border-radius: 12px;
  box-shadow: 0 10px 24px rgba(40, 46, 44, .09);
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 7px;
  position: sticky;
  top: 85px;
  z-index: 18;
}

.settings-tab {
  border-radius: 9px;
  color: #6F6C68;
  flex: 1 0 max-content;
  font-size: 14px;
  font-weight: 800;
  padding: 13px 16px;
  text-align: center;
  text-decoration: none;
  transition: background-color .18s ease, color .18s ease, transform .18s ease;
}

.settings-tab:hover,
.settings-tab:focus-visible {
  background: #EDF4F3;
  color: #678A85;
  outline: none;
  transform: translateY(-1px);
}

.settings-tab.is-active,
.settings-tab.is-active:hover {
  background: var(--oro-rose);
  color: #fff;
}

.settings-business-form {
  display: grid;
  gap: 18px;
}

.settings-business-grid,
.settings-two-column {
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(0, 1.05fr) minmax(380px, .95fr);
}

.settings-business-grid > .panel,
.settings-side-stack > .panel,
.settings-two-column > .panel,
.settings-hours,
.settings-compact-panel {
  padding: 20px;
}

.settings-business-grid h2,
.settings-side-stack h2,
.settings-two-column h2,
.settings-hours h2,
.settings-compact-panel h2 {
  font-size: 20px;
  margin-top: 0;
}

.settings-business-grid hr {
  border: 0;
  border-top: 1px solid var(--oro-line);
  margin: 4px 0 18px;
}

.settings-side-stack {
  display: grid;
  gap: 18px;
}

.settings-brand-row {
  align-items: center;
  display: grid;
  gap: 18px;
  grid-template-columns: 150px 1fr;
  margin-bottom: 18px;
}

.settings-brand-preview {
  align-content: center;
  aspect-ratio: 1;
  border: 1px solid #D1E2DF;
  border-radius: 10px;
  display: grid;
  justify-items: center;
  overflow: hidden;
  padding: 14px;
}

.settings-brand-preview img {
  height: 100%;
  object-fit: contain;
  width: 100%;
}

.settings-brand-preview span {
  color: var(--oro-rose);
}

.settings-brand-preview strong {
  font-family: Georgia, serif;
  font-size: 38px;
  letter-spacing: .08em;
}

.settings-brand-preview small {
  color: var(--oro-rose);
  letter-spacing: .2em;
}

.settings-logo-button {
  cursor: pointer;
}

.settings-logo-button input {
  display: none;
}

.settings-summary-list,
.settings-method-list {
  display: grid;
}

.settings-summary-list > div,
.settings-method-list > div {
  align-items: center;
  border-bottom: 1px solid var(--oro-line);
  display: flex;
  gap: 12px;
  justify-content: space-between;
  padding: 11px 0;
}

.settings-method-list > div > span {
  display: grid;
  gap: 3px;
  margin-right: auto;
}

.settings-method-list small {
  color: #817B75;
}

.settings-method-list em {
  background: #F2F0EE;
  border-radius: 999px;
  color: #746E68;
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
  padding: 5px 9px;
}

.settings-method-list em.is-active {
  background: #eaf7ed;
  color: #347745;
}

.settings-hours-grid {
  display: grid;
  gap: 8px 24px;
  grid-template-columns: 1fr 1fr;
}

.settings-hour-row {
  align-items: center;
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(90px, 1fr) auto minmax(100px, .8fr) minmax(100px, .8fr);
}

.settings-hour-row input[type="time"] {
  min-width: 0;
  width: 100%;
}

.settings-switch {
  display: inline-flex;
}

.settings-switch input {
  position: absolute;
  opacity: 0;
}

.settings-switch span {
  background: #D7D4D2;
  border-radius: 999px;
  cursor: pointer;
  height: 24px;
  position: relative;
  transition: background .18s ease;
  width: 42px;
}

.settings-switch span::after {
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 2px 5px rgba(0,0,0,.18);
  content: "";
  height: 18px;
  left: 3px;
  position: absolute;
  top: 3px;
  transition: transform .18s ease;
  width: 18px;
}

.settings-switch input:checked + span {
  background: #49a65f;
}

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

.settings-save-button {
  justify-self: end;
}

.settings-receipt-preview > div {
  border: 1px dashed #D9D2CC;
  display: grid;
  gap: 9px;
  justify-items: center;
  margin: 0 auto;
  max-width: 300px;
  padding: 28px 20px;
  text-align: center;
}

.settings-receipt-preview strong {
  font-family: Georgia, serif;
  font-size: 38px;
}

.settings-receipt-preview hr {
  border: 0;
  border-top: 1px dashed #bbb;
  width: 100%;
}

.settings-compact-panel {
  max-width: 820px;
}

.settings-audit-note {
  background: #F3F8F7;
  border-left: 3px solid var(--oro-rose);
  border-radius: 8px;
  color: #746E68;
  margin: 0;
  padding: 14px 16px;
}

@media (max-width: 960px) {
  .settings-business-grid,
  .settings-two-column,
  .settings-hours-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .settings-tabs {
    top: 74px;
  }

  .settings-brand-row,
  .settings-hour-row {
    grid-template-columns: 1fr;
  }

  .settings-brand-preview {
    max-width: 160px;
  }

  .settings-save-button {
    justify-self: stretch;
  }
}

.partners-page {
  display: grid;
  gap: 22px;
  padding-bottom: 48px;
}

.partners-heading {
  align-items: end;
  margin-bottom: 0;
}

.partners-month-form {
  align-items: end;
  display: flex;
  gap: 12px;
}

.partners-month-form label {
  display: grid;
  gap: 6px;
}

.partners-month-form label span {
  color: #7E7974;
  font-size: 12px;
  font-weight: 700;
}

.partners-month-form input {
  min-width: 190px;
}

.partners-tabs {
  background: #fff;
  border: 1px solid var(--oro-line);
  border-radius: 12px;
  box-shadow: 0 10px 24px rgba(40, 46, 44, .09);
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 7px;
  position: sticky;
  top: 85px;
  z-index: 18;
}

.partners-tab {
  border-radius: 9px;
  color: #6F6C68;
  flex: 1 0 max-content;
  font-size: 14px;
  font-weight: 800;
  padding: 13px 16px;
  text-align: center;
  text-decoration: none;
  transition: background-color .18s ease, color .18s ease, transform .18s ease;
}

.partners-tab:hover,
.partners-tab:focus-visible {
  background: #EDF4F3;
  color: #678A85;
  outline: none;
  transform: translateY(-1px);
}

.partners-tab.is-active,
.partners-tab.is-active:hover {
  background: var(--oro-rose);
  color: #fff;
}

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

.partners-metrics article {
  background: #fff;
  border: 1px solid var(--oro-line);
  border-radius: 12px;
  display: grid;
  gap: 8px;
  padding: 22px;
}

.partners-metrics span {
  color: #7E7974;
}

.partners-metrics strong {
  font-size: clamp(23px, 2.5vw, 34px);
}

.partners-metrics .is-positive strong {
  color: #36914c;
}

.partners-dashboard-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(0, 1.08fr) minmax(380px, .92fr);
}

.partners-dashboard-grid > .panel,
.partners-two-column > .panel {
  padding: 20px;
}

.partners-dashboard-grid h2,
.partners-two-column h2 {
  font-size: 20px;
  margin-top: 0;
}

.partners-ownership-layout {
  align-items: center;
  display: grid;
  gap: 24px;
  grid-template-columns: 180px minmax(0, 1fr);
}

.partners-donut {
  aspect-ratio: 1;
  border-radius: 50%;
  box-sizing: border-box;
  display: grid;
  max-width: 180px;
  place-items: center;
  position: relative;
  width: 100%;
}

.partners-donut::after {
  background: #fff;
  border-radius: 50%;
  content: "";
  inset: 29%;
  position: absolute;
}

.partners-donut span {
  font-size: 18px;
  font-weight: 800;
  position: relative;
  z-index: 1;
}

.partners-list {
  display: grid;
}

.partners-list > div,
.partners-distribution-card > div,
.partner-profile-list > div,
.partner-summary-box {
  align-items: center;
  border-bottom: 1px solid var(--oro-line);
  display: flex;
  gap: 12px;
  justify-content: space-between;
  padding: 12px 0;
}

.partners-list > div > span {
  align-items: center;
  display: flex;
  gap: 9px;
}

.partners-list i {
  border-radius: 50%;
  height: 10px;
  width: 10px;
}

.partners-distribution-card {
  display: grid;
  gap: 0;
}

.partners-distribution-card .total {
  font-size: 1.08rem;
  font-weight: 800;
}

.partners-distribution-card .total strong {
  color: #36914c;
}

.partners-distribution-card .button {
  margin-top: 18px;
}

.partners-balance-panel {
  min-width: 0;
}

.partner-review-list {
  display: grid;
  gap: 10px;
}

.partner-review-list > div {
  align-items: center;
  background: #fff9ed;
  border: 1px solid #f0d7aa;
  border-radius: 10px;
  display: flex;
  gap: 14px;
  justify-content: space-between;
  padding: 14px;
}

.partner-review-list span,
.partner-profile-list span {
  display: grid;
  gap: 4px;
}

.partner-review-list small,
.partner-profile-list small {
  color: #817B75;
}

.partner-review-list em {
  background: #ffedd0;
  border-radius: 999px;
  color: #a4640d;
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
  padding: 6px 10px;
}

.partners-two-column {
  display: grid;
  gap: 22px;
  grid-template-columns: minmax(360px, .9fr) minmax(0, 1.1fr);
}

.partner-profile-list {
  display: grid;
}

.partner-profile-list b {
  color: #70938C;
}

.partner-summary-box {
  align-items: stretch;
  display: grid;
  grid-template-columns: 1fr auto;
}

.partner-audit-note {
  background: #F3F8F7;
  border-left: 3px solid var(--oro-rose);
  border-radius: 8px;
  color: #746E68;
  margin: 0;
  padding: 14px 16px;
}

@media (max-width: 960px) {
  .partners-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .partners-month-form {
    align-items: stretch;
  }

  .partners-month-form label {
    flex: 1;
  }

  .partners-metrics,
  .partners-dashboard-grid,
  .partners-two-column {
    grid-template-columns: 1fr 1fr;
  }

  .partners-balance-panel {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  .partners-tabs {
    top: 74px;
  }

  .partners-month-form,
  .partners-metrics,
  .partners-dashboard-grid,
  .partners-two-column,
  .partners-ownership-layout {
    display: grid;
    grid-template-columns: 1fr;
  }

  .partners-month-form input {
    min-width: 0;
  }

  .partners-donut {
    margin: 0 auto;
  }

  .partners-balance-panel {
    grid-column: auto;
  }
}

.accounting-page {
  padding-bottom: 48px;
}

.accounting-heading {
  align-items: end;
  display: flex;
  gap: 24px;
  justify-content: space-between;
}

.accounting-date-filter {
  align-items: end;
  display: flex;
  gap: 12px;
}

.accounting-date-filter label {
  display: grid;
  gap: 6px;
}

.accounting-date-filter label span {
  color: #7E7974;
  font-size: 12px;
  font-weight: 700;
}

.accounting-date-filter input {
  min-width: 190px;
}

.accounting-tabs {
  background: #fff;
  border: 1px solid var(--oro-line);
  border-radius: 12px;
  box-shadow: 0 10px 24px rgba(40, 46, 44, .09);
  display: flex;
  gap: 6px;
  margin: 18px 0 24px;
  overflow-x: auto;
  padding: 7px;
  position: sticky;
  top: 85px;
  z-index: 18;
}

.accounting-tab {
  border-radius: 9px;
  color: #6F6C68;
  flex: 1 0 max-content;
  font-weight: 800;
  padding: 13px 18px;
  text-align: center;
  text-decoration: none;
  transition: background-color .18s ease, color .18s ease, transform .18s ease;
}

.accounting-tab:hover,
.accounting-tab:focus-visible {
  background: #EDF4F3;
  color: #678A85;
  outline: none;
  transform: translateY(-1px);
}

.accounting-tab.is-active,
.accounting-tab.is-active:hover {
  background: var(--oro-rose);
  color: #fff;
}

.accounting-metrics {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 22px;
}

.accounting-metrics article {
  background: #fff;
  border: 1px solid var(--oro-line);
  border-radius: 12px;
  display: grid;
  gap: 8px;
  padding: 22px;
}

.accounting-metrics span,
.accounting-metrics small {
  color: #7E7974;
}

.accounting-metrics strong {
  font-size: clamp(22px, 2.3vw, 32px);
}

.accounting-metrics .is-positive strong,
.accounting-profit-result.is-positive strong {
  color: #36914c;
}

.accounting-metrics .is-negative strong,
.accounting-profit-result.is-negative strong {
  color: #6B9B9E;
}

.accounting-dashboard-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(0, 1.16fr) minmax(420px, .84fr);
}

.accounting-dashboard-grid .panel h2,
.accounting-detail-panel h2,
.accounting-profit-grid h2 {
  font-size: 20px;
  line-height: 1.25;
  margin-top: 0;
}

.accounting-dashboard-grid > .panel {
  padding: 20px;
}

.accounting-chart-legend {
  display: flex;
  gap: 18px;
  margin-bottom: 14px;
}

.accounting-chart-legend span::before {
  border-radius: 3px;
  content: "";
  display: inline-block;
  height: 10px;
  margin-right: 7px;
  width: 10px;
}

.accounting-chart-legend .income::before,
.accounting-chart-bars .income {
  background: #88B0A9;
}

.accounting-chart-legend .expense::before,
.accounting-chart-bars .expense {
  background: #CFE1DE;
}

.accounting-bar-chart {
  align-items: end;
  border-bottom: 1px solid var(--oro-line);
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(6, 1fr);
  height: 260px;
  padding: 16px 12px 0;
}

.accounting-chart-month {
  align-items: center;
  display: grid;
  gap: 9px;
  height: 100%;
  grid-template-rows: 1fr auto;
  text-align: center;
}

.accounting-chart-bars {
  align-items: end;
  display: flex;
  gap: 5px;
  height: 100%;
  justify-content: center;
}

.accounting-chart-bars span {
  border-radius: 5px 5px 0 0;
  min-height: 2px;
  width: min(28px, 38%);
}

.accounting-breakdown-list {
  display: grid;
}

.accounting-donut-layout {
  align-items: center;
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(118px, 145px) minmax(0, 1fr);
}

.accounting-cost-layout {
  grid-template-columns: minmax(105px, 125px) minmax(0, 1fr);
}

.accounting-donut {
  aspect-ratio: 1;
  border-radius: 50%;
  box-sizing: border-box;
  display: grid;
  margin: 6px auto;
  max-width: 145px;
  padding: 0;
  place-items: center;
  position: relative;
  width: 100%;
}

.accounting-donut::after {
  background: #fff;
  border-radius: 50%;
  content: "";
  inset: 24%;
  position: absolute;
}

.accounting-donut > span {
  display: grid;
  gap: 3px;
  inset: 28%;
  place-content: center;
  position: absolute;
  text-align: center;
  z-index: 1;
}

.accounting-donut strong {
  font-size: clamp(12px, 1vw, 15px);
  line-height: 1.2;
}

.accounting-donut small {
  color: #88827D;
  font-size: 10px;
}

.accounting-cost-donut {
  max-width: 125px;
}

.accounting-cost-donut::after {
  inset: 21%;
}

.accounting-cost-donut > span {
  inset: 24%;
}

.accounting-cost-donut strong {
  display: grid;
  font-size: 11px;
  line-height: 1.05;
}

.accounting-cost-donut strong b {
  font: inherit;
}

.accounting-breakdown-list > div {
  align-items: center;
  border-bottom: 1px solid var(--oro-line);
  display: grid;
  gap: 8px;
  grid-template-columns: 1fr auto auto;
  padding: 10px 0;
}

.accounting-chart-list > div > span {
  align-items: center;
  display: flex;
  gap: 8px;
  min-width: 0;
  font-size: 13px;
}

.accounting-chart-list i {
  border-radius: 50%;
  flex: 0 0 10px;
  height: 10px;
  width: 10px;
}

.accounting-chart-list > div > strong,
.accounting-chart-list > div > small {
  font-size: 12px;
  white-space: nowrap;
}

.accounting-breakdown-list > div small {
  color: #88827D;
  font-size: 11px;
  min-width: 48px;
  text-align: right;
}

.accounting-breakdown-list > div.total {
  border-bottom: 0;
  font-size: 13px;
  font-weight: 800;
}

.accounting-review-list {
  display: grid;
}

.accounting-review-list > div {
  align-items: center;
  border-bottom: 1px solid var(--oro-line);
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr auto auto;
  padding: 13px 0;
}

.accounting-review-list span {
  display: grid;
  gap: 4px;
}

.accounting-review-list small {
  color: #88827D;
}

.accounting-review-list em {
  background: #fff0d9;
  border-radius: 999px;
  color: #aa6810;
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
  padding: 6px 10px;
}

.accounting-clear {
  background: #edf8ef;
  border-radius: 10px;
  color: #347745;
  padding: 16px;
}

.accounting-inventory-note {
  background: #F3F8F7;
  border-left: 3px solid var(--oro-rose);
  border-radius: 8px;
  color: #746E68;
  margin: 22px 0 0;
  padding: 14px 16px;
}

.accounting-detail-panel {
  min-height: 420px;
}

.accounting-detail-panel small {
  color: #8C8985;
  display: block;
}

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

.accounting-payment-cards article {
  border: 1px solid var(--oro-line);
  border-radius: 12px;
  display: grid;
  gap: 10px;
  padding: 20px;
}

.accounting-payment-cards span {
  color: #7E7974;
}

.accounting-payment-cards strong {
  font-size: 24px;
}

.accounting-profit-grid {
  display: grid;
  gap: 22px;
  grid-template-columns: minmax(0, 1.3fr) minmax(300px, .7fr);
}

.accounting-profit-result {
  align-content: center;
  display: grid;
  gap: 12px;
  text-align: center;
}

.accounting-profit-result span,
.accounting-profit-result small {
  color: #7E7974;
}

.accounting-profit-result strong {
  font-size: clamp(30px, 4vw, 48px);
}

@media (max-width: 960px) {
  .accounting-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .accounting-date-filter {
    align-items: stretch;
  }

  .accounting-date-filter label {
    flex: 1;
  }

  .accounting-date-filter input {
    min-width: 0;
  }

  .accounting-metrics,
  .accounting-dashboard-grid,
  .accounting-profit-grid {
    grid-template-columns: 1fr 1fr;
  }

  .accounting-performance {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  .accounting-tabs {
    top: 74px;
  }

  .accounting-metrics,
  .accounting-dashboard-grid,
  .accounting-profit-grid,
  .accounting-payment-cards {
    grid-template-columns: 1fr;
  }

  .accounting-donut-layout {
    grid-template-columns: 1fr;
  }

  .accounting-date-filter {
    display: grid;
    grid-template-columns: 1fr;
  }

  .accounting-performance {
    grid-column: auto;
  }

  .accounting-bar-chart {
    gap: 7px;
    height: 210px;
    padding-left: 2px;
    padding-right: 2px;
  }

  .accounting-review-list > div {
    grid-template-columns: 1fr auto;
  }

  .accounting-review-list em {
    grid-column: 1 / -1;
    justify-self: start;
  }
}

@media print {
  @page {
    margin: 14mm;
    size: A4;
  }

  body {
    background: #fff;
    padding: 0;
  }

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

  .receipt-wrap {
    display: block;
    padding: 0;
  }

  .receipt {
    border: 0;
    box-shadow: none;
    margin: 0;
    width: 80mm;
  }

  body.report-page .system-layout {
    display: block;
  }

  body.report-page .sidebar,
  body.report-page .system-topbar {
    display: none !important;
  }

  body.report-page .system-main {
    background: #fff;
    padding: 0;
  }

  body.report-page .report-print-sheet {
    border: 0;
    box-shadow: none;
    padding: 0;
  }

  body.report-page .report-panel,
  body.report-page .report-kpi {
    break-inside: avoid;
  }
}

@media (max-width: 620px) {
  html,
  body {
    max-width: 100%;
    overflow-x: hidden;
  }

  .system-layout,
  .system-layout > main,
  .system-main,
  .customer-management,
  .product-management,
  .inventory-management,
  .management-shell {
    max-width: 100%;
    min-width: 0;
    width: 100%;
  }

  .system-topbar {
    gap: 8px;
    padding-right: 12px;
  }

  .system-topbar > span {
    font-size: 12px;
    white-space: nowrap;
  }

  .system-main {
    overflow-x: hidden;
  }

  .site-header {
    padding: 14px 16px;
  }

  .brand-name,
  .language-switch {
    font-size: 12px;
  }

  .hero-copy,
  .section,
  .system-main {
    padding: 20px 12px;
  }

  .panel,
  .metric-card,
  .customer-table-card,
  .product-form-section,
  .service-list-card {
    max-width: 100%;
    min-width: 0;
  }

  .panel,
  .metric-card {
    padding: 15px;
  }

  .page-heading,
  .customer-list-header,
  .inventory-panel-heading {
    gap: 12px;
  }

  .page-heading h1,
  .customer-list-header h1 {
    font-size: 28px;
  }

  input,
  select,
  textarea,
  button,
  .button {
    max-width: 100%;
  }

  .services-command-bar,
  .editor-header,
  .price-option-box {
    align-items: stretch;
    flex-direction: column;
  }

  .services-filter-bar,
  .customer-filter-bar,
  .pos-client-grid,
  .product-search-row,
  .expense-search-row,
  .inventory-workspace,
  .product-identity-layout,
  .management-service-card,
  .service-card-body,
  .team-card,
  .price-option-fields,
  .form-grid.two,
  .form-grid.three,
  .form-grid.four,
  .customer-modal-form .form-grid.two,
  .customer-modal-form .form-grid.three,
  .payroll-month-form,
  .payroll-card-summary,
  .payroll-item-form {
    grid-template-columns: 1fr;
  }

  .pos-client-grid {
    gap: 12px;
    width: 100%;
  }

  .pos-client-grid .field {
    grid-column: 1 / -1;
    margin-bottom: 0;
    min-width: 0;
    overflow: hidden;
    width: 100%;
  }

  .pos-client-grid input,
  .pos-client-grid select {
    box-sizing: border-box;
    inline-size: 100%;
    max-inline-size: 100%;
    min-width: 0;
    width: 100%;
  }

  .pos-client-grid input[type="date"],
  .pos-client-grid input[type="time"] {
    -webkit-appearance: none;
    appearance: none;
    display: block;
    min-inline-size: 0;
    width: -webkit-fill-available;
  }

  .payroll-control-panel,
  .payroll-card-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .historical-stock-heading,
  .historical-stock-filter,
  .historical-stock-summary,
  .monthly-snapshot-heading,
  .monthly-snapshot-form {
    align-items: stretch;
    flex-direction: column;
  }

  .historical-stock-filter .button {
    width: 100%;
  }

  .monthly-snapshot-form .button {
    width: 100%;
  }

  .payroll-actions {
    justify-content: stretch;
  }

  .payroll-actions form,
  .payroll-actions .button,
  .payroll-notes-field,
  .payroll-net-box {
    grid-column: 1 / -1;
    width: 100%;
  }

  .customer-table {
    min-width: 760px;
  }

  .customer-table-wrap,
  .responsive-table,
  .service-table-wrap {
    border-radius: 8px;
    max-width: calc(100vw - 24px);
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
  }

  .customer-modal,
  .customer-modal.product-modal {
    max-width: calc(100vw - 24px);
    min-width: 0;
    padding: 16px;
    width: 100%;
  }

  .login-page {
    padding: 14px;
  }

  .login-card {
    padding: 22px 18px;
  }

  .customer-avatar {
    flex-basis: 48px;
    height: 48px;
    width: 48px;
  }

  .customer-modal-backdrop {
    padding: 18px 12px;
  }

  .price-options-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .service-card-side {
    align-items: start;
    justify-items: start;
  }

  .service-card-side strong {
    white-space: normal;
  }

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

  .service-editor-page .price-options-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .service-editor-page .price-option-fields {
    grid-template-columns: 1fr;
  }

  .addon-option-row {
    grid-template-columns: 1fr;
  }

  .service-editor-page .price-option-fields label:last-child {
    max-width: none;
  }

  .hero {
    min-height: auto;
  }

  .service-grid,
  .metric-grid,
  .quick-grid,
  .contact-strip,
  .inventory-summary-grid,
  .inventory-movement-types {
    grid-template-columns: 1fr;
  }

  .mobile-actions {
    display: grid;
  }
}
.appointment-row-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.45rem 0.7rem;
}

.appointment-row-actions form {
    display: inline-flex;
    margin: 0;
}

.appointment-row-actions .text-action {
    white-space: nowrap;
}

.danger-link {
    appearance: none;
    border: 0;
    background: transparent;
    color: #6C979B;
    cursor: pointer;
    font: inherit;
    padding: 0;
}

.danger-link:hover {
    color: #446E72;
    text-decoration: underline;
}

@media (max-width: 900px) {
  .appointment-workflow-dashboard {
    grid-template-columns: 1fr;
  }

  .appointment-status-workflow {
    top: 64px;
  }

  .appointment-checkout-tabs {
    grid-template-columns: repeat(4, minmax(170px, 1fr));
    top: 64px;
  }

  .appointment-checkout-layout {
    grid-template-columns: 1fr;
  }

  .appointment-edit-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .appointment-edit-actions .button,
  .appointment-edit-actions button {
    justify-content: center;
    width: 100%;
  }
}

@media (max-width: 620px) {
  .tip-quick-buttons {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .appointment-payment-card,
  .appointment-checkout-summary {
    padding: 15px;
  }
}

.appointment-edit-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    justify-content: flex-end;
}

.appointment-action-form :disabled {
    cursor: default;
    opacity: 0.78;
}

.appointment-action-form #appointment-status:target,
.appointment-action-form #appointment-services:target {
    scroll-margin-top: 7rem;
}

.turn-operations-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(0, 1.55fr) minmax(390px, 0.95fr);
  margin-bottom: 18px;
}

.turn-recommendation-card,
.appointment-lifecycle-card,
.completion-payout-preview {
  padding: 22px;
}

.turn-card-heading {
  align-items: end;
  display: flex;
  gap: 18px;
  justify-content: space-between;
  margin-bottom: 18px;
}

.turn-card-heading > div {
  display: grid;
  gap: 3px;
}

.turn-card-heading span {
  color: rgba(35, 33, 31, 0.54);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.turn-card-heading h2 {
  font-size: 25px;
  margin: 0;
}

.turn-appointment-picker {
  margin: 0;
  min-width: min(370px, 48%);
}

.turn-appointment-picker label {
  display: grid;
  gap: 5px;
}

.turn-appointment-picker label > span {
  font-size: 10px;
}

.turn-appointment-picker select {
  min-height: 43px;
  padding: 8px 34px 8px 11px;
}

.turn-request-summary {
  border-bottom: 1px solid var(--oro-line);
  border-top: 1px solid var(--oro-line);
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-bottom: 14px;
}

.turn-request-summary > div {
  align-items: center;
  display: flex;
  gap: 12px;
  min-height: 76px;
  padding: 12px;
}

.turn-request-summary > div + div {
  border-left: 1px solid var(--oro-line);
}

.turn-summary-icon {
  align-items: center;
  border: 2px solid var(--oro-rose);
  border-radius: 50%;
  color: var(--oro-rose);
  display: inline-flex;
  font-size: 19px;
  height: 42px;
  justify-content: center;
  width: 42px;
}

.turn-request-summary p {
  display: grid;
  gap: 3px;
  margin: 0;
}

.turn-request-summary small {
  color: rgba(35, 33, 31, 0.58);
}

.turn-recommendation-list {
  border: 1px solid var(--oro-line);
  border-radius: 13px;
  overflow: hidden;
}

.turn-recommendation-row {
  align-items: center;
  display: grid;
  gap: 10px;
  grid-template-columns: 34px 42px minmax(0, 1fr) auto;
  min-height: 82px;
  padding: 11px 13px;
}

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

.turn-recommendation-row > b {
  align-items: center;
  background: rgba(62, 92, 88, 0.2);
  border-radius: 7px;
  color: #678A85;
  display: flex;
  height: 34px;
  justify-content: center;
}

.turn-recommendation-row.is-disabled {
  background: rgba(35, 33, 31, 0.025);
  opacity: 0.72;
}

.turn-recommendation-row form {
  margin: 0;
}

.turn-recommendation-row button {
  margin: 0;
  min-height: 40px;
  padding: 8px 13px;
}

.turn-candidate-main {
  display: grid;
  gap: 5px;
}

.turn-candidate-main > small {
  color: rgba(35, 33, 31, 0.65);
}

.turn-validation-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.turn-validation-badges span {
  border-radius: 5px;
  font-size: 10px;
  font-weight: 800;
  padding: 4px 7px;
}

.turn-validation-badges .is-valid {
  background: #eef8ef;
  color: #397648;
}

.turn-validation-badges .is-invalid {
  background: #F4F2F1;
  color: #7D766F;
}

.turn-fairness-draft {
  grid-template-columns: auto repeat(6, minmax(80px, 1fr));
  margin-top: 14px;
  padding: 11px 12px;
}

.turn-fairness-draft .fairness-rule {
  gap: 6px;
  min-height: 46px;
  padding: 0 8px;
}

.turn-fairness-draft .fairness-rule span {
  font-size: 10px;
  line-height: 1.25;
}

.lifecycle-content {
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(170px, 0.85fr) minmax(190px, 1fr);
}

.lifecycle-stepper {
  list-style: none;
  margin: 0;
  padding: 0;
}

.lifecycle-stepper li {
  align-items: center;
  display: grid;
  gap: 8px;
  grid-template-columns: 34px auto;
  min-height: 62px;
  position: relative;
}

.lifecycle-stepper li:not(:last-child)::after {
  background: var(--oro-line);
  content: "";
  height: 28px;
  left: 16px;
  position: absolute;
  top: 47px;
  width: 2px;
}

.lifecycle-stepper i {
  align-items: center;
  border: 2px solid var(--oro-line);
  border-radius: 50%;
  display: flex;
  font-style: normal;
  height: 34px;
  justify-content: center;
  width: 34px;
}

.lifecycle-stepper li.is-complete i,
.lifecycle-stepper li.is-current i {
  background: var(--oro-rose);
  border-color: var(--oro-rose);
  color: #fff;
}

.lifecycle-stepper li.is-current span {
  background: rgba(62, 92, 88, 0.17);
  border-radius: 999px;
  color: #648A85;
  font-size: 10px;
  grid-column: 2;
  justify-self: start;
  padding: 3px 7px;
}

.lifecycle-actions {
  background: rgba(250, 250, 249, 0.8);
  border: 1px solid var(--oro-line);
  border-radius: 12px;
  display: grid;
  gap: 7px;
  padding: 14px;
}

.lifecycle-actions h3 {
  font-size: 14px;
  margin: 0 0 3px;
}

.lifecycle-actions form,
.lifecycle-actions button {
  margin: 0;
  width: 100%;
}

.lifecycle-actions button {
  min-height: 39px;
  padding: 8px 10px;
}

.lifecycle-outcomes {
  border-top: 1px dashed var(--oro-line);
  display: flex;
  gap: 18px;
  justify-content: center;
  margin-top: 16px;
  padding-top: 14px;
}

.lifecycle-outcomes span {
  color: rgba(35, 33, 31, 0.66);
  font-size: 11px;
}

.lifecycle-audit {
  border: 1px solid var(--oro-line);
  border-radius: 12px;
  margin-top: 15px;
  padding: 13px;
}

.lifecycle-audit h3 {
  font-size: 14px;
  margin: 0 0 9px;
}

.lifecycle-audit p {
  display: grid;
  gap: 4px;
  margin: 0;
}

.lifecycle-audit span,
.lifecycle-audit small {
  color: rgba(35, 33, 31, 0.62);
  font-size: 11px;
}

.completion-payout-preview {
  margin-bottom: 18px;
}

.payout-preview-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.payout-preview-grid p {
  align-items: center;
  display: flex;
  gap: 11px;
  margin: 0;
  min-height: 70px;
  padding: 10px 16px;
}

.payout-preview-grid p + p {
  border-left: 1px solid var(--oro-line);
}

.payout-preview-grid i {
  color: var(--oro-rose);
  font-size: 24px;
  font-style: normal;
}

.payout-preview-grid span {
  color: rgba(35, 33, 31, 0.62);
  display: grid;
  font-size: 11px;
  gap: 4px;
}

.payout-preview-grid strong {
  color: var(--oro-ink);
  font-size: 17px;
}

.tip-allocation-form {
  align-items: end;
  border-top: 1px solid var(--oro-line);
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(220px, 380px) auto;
  margin: 12px 0 0;
  padding-top: 12px;
}

.tip-allocation-form label {
  display: grid;
  gap: 5px;
}

.tip-allocation-form label span {
  color: rgba(35, 33, 31, 0.62);
  font-size: 11px;
  font-weight: 800;
}

.tip-allocation-form input,
.tip-allocation-form button {
  margin: 0;
  min-height: 42px;
}

.payout-posting-note {
  background: rgba(62, 92, 88, 0.1);
  border-left: 3px solid var(--oro-rose);
  border-radius: 7px;
  color: rgba(35, 33, 31, 0.78);
  font-size: 12px;
  margin-top: 12px;
  padding: 11px 13px;
}

.turn-board-legacy-tools {
  margin-top: 18px;
}

.turn-board-legacy-tools > summary {
  color: var(--oro-rose);
  cursor: pointer;
  font-weight: 850;
  margin-bottom: 14px;
}

@media (max-width: 1180px) {
  .turn-operations-grid {
    grid-template-columns: 1fr;
  }

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

  .payout-preview-grid p + p {
    border-left: 0;
  }
}

@media (max-width: 720px) {
  .turn-card-heading,
  .turn-request-summary,
  .lifecycle-content,
  .tip-allocation-form {
    align-items: stretch;
    display: grid;
    grid-template-columns: 1fr;
  }

  .turn-appointment-picker {
    min-width: 0;
  }

  .turn-request-summary > div + div {
    border-left: 0;
    border-top: 1px solid var(--oro-line);
  }

  .turn-recommendation-row {
    grid-template-columns: 32px 40px minmax(0, 1fr);
  }

  .turn-recommendation-row form,
  .turn-recommendation-row > button {
    grid-column: 1 / -1;
  }

  .turn-recommendation-row button {
    width: 100%;
  }

  .turn-fairness-draft {
    display: flex;
    flex-wrap: wrap;
  }

  .payout-preview-grid {
    grid-template-columns: 1fr;
  }

  .payout-preview-grid p {
    border-bottom: 1px solid var(--oro-line);
  }
}

/* Payroll documents: compact proportions matched to the approved visual. */
.payroll-documents-layout { gap: 14px; }
.payroll-export-card {
  align-items: center;
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(180px, .75fr) minmax(520px, 2.2fr) auto;
  padding: 16px 20px;
}
.payroll-export-heading { display: grid; gap: 5px; margin: 0; }
.payroll-export-heading .payroll-ready-note { justify-self: start; padding: 6px 10px; }
.payroll-export-metrics { min-width: 0; }
.payroll-export-metrics p { padding: 3px 12px; }
.payroll-export-metrics strong { font-size: 14px; }
.payroll-export-actions { display: grid; gap: 7px; margin: 0; }
.payroll-export-actions .button { min-height: 38px; min-width: 150px; padding: 8px 12px; }
.payroll-documents-list { padding: 18px 20px; }
.payroll-documents-list .section-heading { margin-bottom: 10px; }
.payroll-documents-list table { border-collapse: separate; border-spacing: 0; }
.payroll-documents-list thead { background: rgba(62, 92, 88, .17); }
.payroll-documents-list th { color: #6E6459; font-size: 10.5px; padding: 10px 8px; }
.payroll-documents-list td { font-size: 11px; padding: 9px 8px; }
.payslip-professional { align-items: center; display: flex; gap: 8px; }
.payslip-professional > i {
  align-items: center;
  background: var(--oro-rose);
  border-radius: 50%;
  color: #fff;
  display: inline-flex;
  flex: 0 0 28px;
  font-size: 11px;
  font-style: normal;
  font-weight: 850;
  height: 28px;
  justify-content: center;
}
.payslip-professional > span { display: grid; gap: 2px; }
.payroll-document-actions a { min-height: 30px; padding: 0 8px; }
.payroll-document-actions .icon-action { min-width: 30px; }
.payslip-preview-heading {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin: 2px 4px 10px;
}
.payslip-preview-heading > div { align-items: center; display: flex; gap: 10px; }
.payslip-preview-heading h2 { font-size: 20px; margin: 0; }
.payslip-preview-heading span {
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 11px;
  padding: 5px 10px;
}
.payslip-preview-heading small { color: var(--muted); }
.payslip-preview-actions { justify-content: flex-end; }
.payslip-preview-actions .button { min-height: 36px; padding: 7px 13px; }
.payslip-preview-actions b { font-size: 15px; }
.payroll-payslip-preview { background: transparent; border: 0; box-shadow: none; overflow: visible; }
.payslip-title-row { display: none; padding: 15px 20px; }
.payslip-wordmark strong { font-size: 34px; }
.payslip-grid { gap: 16px; grid-template-columns: .82fr 1.25fr .9fr; }
.payslip-grid > section {
  background: #fff;
  border: 1px solid #D4E2DF;
  border-radius: 12px;
  overflow: hidden;
  padding: 0;
}
.payslip-grid > section:last-child { border-right: 1px solid #D4E2DF; }
.payslip-grid h3 {
  align-items: center;
  border-bottom: 1px solid #E2EAE9;
  color: var(--ink);
  display: flex;
  font-size: 15px;
  gap: 8px;
  margin: 0;
  padding: 13px 16px;
}
.payslip-grid h3 > i { display: none; }
.payslip-grid .detail-list { padding: 12px 16px 15px; }
.payslip-grid .detail-list p { font-size: 12px; padding: 7px 0; }
.payslip-grid .detail-list p.allowance-total {
  background: #F5FBFB;
  border-bottom: 1px solid #CBE0DD;
  border-top: 1px solid #CBE0DD;
  color: #74A7A1;
  margin: 2px -16px;
  padding: 8px 16px;
}
.payslip-grid .detail-list p.total {
  background: #F5FBFB;
  border: 1px solid #A5C9C4;
  border-radius: 8px;
  color: #639B94;
  font-size: 17px;
  margin-top: 10px;
  padding: 12px 14px;
}
.payslip-grid .detail-list p.total strong { font-size: 20px; }
.payslip-employee .detail-list p {
  border: 0;
  display: grid;
  gap: 1px 10px;
  grid-template-columns: 25px 1fr;
  padding: 7px 0;
}
.payslip-employee .detail-list p > span,
.payslip-employee .detail-list p > strong { grid-column: 2; }
.payslip-employee .detail-list p > span { color: var(--muted); font-size: 11px; }
.payslip-employee .detail-list p > strong { font-size: 13px; }
.payslip-field-icon {
  align-self: center;
  color: #5F5D5B;
  grid-column: 1;
  grid-row: 1 / span 2;
}
.payslip-field-icon svg {
  fill: none;
  height: 20px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.65;
  width: 20px;
}
.payslip-payment .detail-list p {
  align-items: start;
  border: 0;
  display: grid;
  gap: 3px;
  padding: 9px 0;
}
.payslip-payment .detail-list p span { color: var(--muted); font-size: 11px; }
.payslip-payment .detail-list p strong { font-size: 13px; }
.payslip-notes {
  background: #fff;
  border: 1px solid #D4E2DF;
  border-radius: 10px;
  font-size: 11px;
  margin-top: 14px;
  padding: 11px 18px;
}
.payslip-signatures { gap: 60px; padding: 14px 60px 12px; }
.payslip-signatures i { height: 15px; }
.payslip-footer { font-size: 11px; padding: 11px 18px; }
.payslip-footer .button { min-height: 38px; padding: 8px 13px; }

@media (max-width: 1420px) {
  .payroll-export-card { grid-template-columns: 1fr; }
  .payroll-export-heading { align-items: center; display: flex; justify-content: space-between; }
  .payroll-export-actions { display: flex; justify-content: flex-end; }
}

@media (max-width: 760px) {
  .payroll-export-metrics { grid-template-columns: 1fr 1fr; }
  .payroll-export-metrics p { border-bottom: 1px solid var(--line); border-right: 0; padding: 10px 4px; }
  .payroll-export-actions { display: grid; }
  .payslip-preview-heading { align-items: flex-start; flex-direction: column; gap: 8px; }
  .payslip-preview-actions { align-items: stretch !important; flex-direction: column; width: 100%; }
  .payslip-preview-actions .button { width: 100%; }
}

/* HR & Attendance �� approved Phase 1 dashboard. */
.hr-icon-library {
  height: 0;
  overflow: hidden;
  position: absolute;
  width: 0;
}

.hr-attendance-page {
  display: grid;
  gap: 18px;
  max-width: 100%;
}

.hr-page-header {
  align-items: center;
  display: flex;
  gap: 24px;
  justify-content: space-between;
}

.hr-page-header h1 {
  color: var(--oro-ink);
  font-size: clamp(34px, 3.4vw, 48px);
  line-height: 1;
  margin: 0 0 10px;
}

.hr-page-header p {
  color: var(--muted);
  margin: 0;
}

.hr-header-actions {
  display: flex;
  gap: 10px;
}

.hr-header-actions .button {
  min-height: 48px;
  min-width: 142px;
}

.hr-tabs {
  background: rgba(255, 255, 255, .98);
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  overflow-x: auto;
  padding: 0 14px;
  position: sticky;
  top: 68px;
  z-index: 35;
}

.hr-tabs a {
  align-items: center;
  border-bottom: 3px solid transparent;
  color: var(--muted);
  display: flex;
  font-size: 14px;
  font-weight: 750;
  gap: 10px;
  justify-content: center;
  min-height: 66px;
  min-width: 0;
  padding: 0 15px;
}

.hr-tabs a:hover {
  background: rgba(62, 92, 88, .09);
  color: var(--oro-rose-dark);
}

.hr-tabs a.active {
  border-bottom-color: var(--oro-rose);
  color: var(--oro-rose-dark);
}

.hr-tabs svg,
.hr-summary-grid svg {
  fill: none;
  height: 22px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
  width: 22px;
}

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

.hr-summary-grid article {
  align-items: center;
  display: flex;
  gap: 16px;
  min-height: 94px;
  padding: 18px 22px;
}

.hr-summary-grid article > i {
  align-items: center;
  border-radius: 13px;
  display: inline-flex;
  flex: 0 0 48px;
  height: 48px;
  justify-content: center;
}

.hr-summary-grid article > span {
  color: var(--muted);
  display: grid;
  font-size: 13px;
  gap: 3px;
}

.hr-summary-grid article strong {
  color: var(--oro-ink);
  font-size: 25px;
}

.hr-summary-grid .present > i { background: #eaf7ed; color: #278044; }
.hr-summary-grid .present strong { color: #278044; }
.hr-summary-grid .late > i { background: #fff4e7; color: #b86910; }
.hr-summary-grid .late strong { color: #b86910; }
.hr-summary-grid .leave > i { background: #edf4fc; color: #3977b8; }
.hr-summary-grid .leave strong { color: #3977b8; }
.hr-summary-grid .absent > i { background: #F1F8F7; color: #649895; }
.hr-summary-grid .absent strong { color: #649895; }

/* HR overview �� approved live-theme dashboard. */
.hro-page { gap: 20px; }
.hro-page .hr-header-actions svg { fill: none; height: 20px; margin-right: 7px; stroke: currentColor; stroke-width: 1.8; vertical-align: -4px; width: 20px; }
.hro-summary small { color: var(--muted); font-size: 12px; font-weight: 500; }
.hro-primary { align-items: stretch; display: grid; gap: 18px; grid-template-columns: minmax(0, 2.15fr) minmax(320px, .85fr); }
.hro-workforce { overflow: hidden; padding: 0; }
.hro-workforce > header,.hro-attention > header,.hro-leave-today > header,.hro-chart > header,.hro-upcoming > header,.hro-payroll > header { align-items: center; border-bottom: 1px solid var(--oro-line); display: flex; justify-content: space-between; padding: 20px 22px; }
.hro-page h2 { font-size: 21px; margin: 0; }
.hro-workforce header p,.hro-chart header p { color: var(--muted); font-size: 12px; margin: 5px 0 0; }
.hro-workforce header a,.hro-leave-today header a,.hro-upcoming header a { color: var(--oro-rose-dark); font-size: 13px; font-weight: 700; }
.hro-workforce th { color: var(--muted); font-size: 11px; text-transform: uppercase; }
.hro-workforce td { padding: 14px 18px; }
.hro-person { align-items: center; display: flex; gap: 10px; min-width: 180px; }
.hro-person > i,.hro-leave-today > div > i { align-items: center; background: #ECF4F2; border-radius: 50%; color: var(--oro-rose-dark); display: inline-flex; flex: 0 0 38px; font-style: normal; font-weight: 750; height: 38px; justify-content: center; }
.hro-person > i.tone-2 { background: #f2eaff; color: #7158ad; }.hro-person > i.tone-3 { background: #e8f1fd; color: #3673b3; }.hro-person > i.tone-4 { background: #fff2df; color: #a56a19; }
.hro-person span { display: grid; gap: 3px; }.hro-person small { color: var(--muted); }
.hro-status { border: 1px solid var(--oro-line); border-radius: 9px; display: inline-block; font-size: 11px; font-weight: 700; min-width: 84px; padding: 7px 9px; text-align: center; }
.hro-status.present,.hro-status.working,.hro-status.on_break { background: #eaf7ed; color: #278044; }.hro-status.late { background: #fff4e7; color: #b86910; }.hro-status.leave { background: #edf4fc; color: #3977b8; }.hro-status.not_clocked_in { background: #f3f3f3; color: #777; }
.hro-side { display: grid; gap: 18px; grid-template-rows: 1fr 1fr; }
.hro-attention,.hro-leave-today { padding: 0; }
.hro-attention header > span { align-items: center; background: #F4FAFB; border-radius: 50%; color: #649895; display: flex; font-weight: 800; height: 30px; justify-content: center; width: 30px; }
.hro-attention > div,.hro-leave-today > div,.hro-upcoming > div { align-items: center; border-bottom: 1px solid var(--oro-line); display: flex; gap: 12px; margin: 0 20px; padding: 14px 0; }
.hro-attention > div > i { align-items: center; background: #fff4e7; border-radius: 9px; color: #b86910; display: flex; font-style: normal; font-weight: 800; height: 34px; justify-content: center; width: 34px; }
.hro-attention > div > span,.hro-leave-today > div > span,.hro-upcoming > div > span { display: grid; flex: 1; gap: 4px; }.hro-attention small,.hro-leave-today small,.hro-upcoming small { color: var(--muted); }
.hro-attention > div > a { color: var(--oro-rose-dark); font-size: 12px; font-weight: 700; }.hro-leave-today > div > b,.hro-upcoming > div > b { color: #278044; font-size: 11px; }
.hro-clear { color: #278044; margin: 20px; padding: 16px; text-align: center; }
.hro-bottom { display: grid; gap: 18px; grid-template-columns: minmax(0, 1.35fr) minmax(300px, .9fr) minmax(300px, .85fr); }
.hro-chart,.hro-upcoming,.hro-payroll { min-height: 290px; padding: 0; }
.hro-chart header > span { color: var(--muted); font-size: 11px; }.hro-chart header > span i { background: var(--oro-rose-dark); border-radius: 50%; display: inline-block; height: 8px; margin: 0 5px 0 10px; width: 8px; }.hro-chart header > span i:last-of-type { background: #D2E4E1; }
.hro-bars { align-items: end; display: grid; gap: 16px; grid-template-columns: repeat(7,1fr); height: 205px; padding: 25px 25px 18px; }
.hro-bars > div { align-items: center; display: flex; flex-direction: column; gap: 8px; height: 100%; justify-content: end; }.hro-bars > div > span { align-items: end; border-bottom: 1px solid var(--oro-line); display: flex; gap: 4px; height: 160px; justify-content: center; width: 100%; }.hro-bars i { border-radius: 5px 5px 0 0; display: block; min-height: 3px; width: 16px; }.hro-bars i.present { background: var(--oro-rose-dark); }.hro-bars i.late { background: #D2E4E1; }.hro-bars small { color: var(--muted); }
.hro-upcoming time { align-items: center; background: #F0F6F5; border-radius: 8px; color: var(--oro-rose-dark); display: flex; flex-direction: column; font-size: 10px; height: 43px; justify-content: center; width: 43px; }.hro-upcoming time strong { font-size: 16px; }
.hro-payroll > header svg { fill: none; height: 25px; stroke: var(--oro-rose-dark); stroke-width: 1.7; width: 25px; }.hro-payroll > div { align-items: center; border-bottom: 1px solid var(--oro-line); display: flex; justify-content: space-between; margin: 0 20px; padding: 15px 0; }.hro-payroll > div span { color: var(--muted); }.hro-payroll > div.total strong { color: var(--oro-rose-dark); font-size: 18px; }.hro-payroll .button { display: flex; margin: 18px 20px; }
@media (max-width: 1180px) { .hro-primary,.hro-bottom { grid-template-columns: 1fr; }.hro-side { grid-template-columns: 1fr 1fr; grid-template-rows: auto; } }
@media (max-width: 720px) { .hro-side { grid-template-columns: 1fr; }.hro-workforce table { min-width: 760px; }.hro-page .hr-page-header { align-items: stretch; }.hro-page .hr-header-actions { width: 100%; }.hro-page .hr-header-actions .button { flex: 1; min-width: 0; } }

.hr-primary-grid {
  align-items: start;
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(0, 2.2fr) minmax(300px, .92fr);
}

.hr-attendance-board,
.hr-attendance-actions,
.hr-exceptions,
.hr-month-preview {
  padding: 20px;
}

.hr-attendance-board > header,
.hr-exceptions > header,
.hr-month-preview > header {
  align-items: center;
  border-bottom: 1px solid var(--oro-line);
  display: flex;
  gap: 18px;
  justify-content: space-between;
  padding-bottom: 14px;
}

.hr-attendance-board > header > div:first-child {
  align-items: baseline;
  display: flex;
  gap: 28px;
}

.hr-attendance-page h2 {
  color: var(--oro-ink);
  font-size: 23px;
  margin: 0;
}

.hr-attendance-board > header span {
  color: var(--muted);
  font-size: 12px;
}

.hr-status-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.hr-status-legend span::before {
  background: #bbb;
  border-radius: 50%;
  content: "";
  display: inline-block;
  height: 8px;
  margin-right: 6px;
  width: 8px;
}

.hr-status-legend .present::before { background: #35a65a; }
.hr-status-legend .late::before { background: #cc7b12; }
.hr-status-legend .working::before { background: #4b91c9; }

.hr-attendance-board table,
.hr-exceptions table {
  min-width: 760px;
}

.hr-attendance-board th,
.hr-exceptions th {
  color: var(--muted);
  font-size: 11px;
  padding: 12px 8px;
  text-transform: none;
}

.hr-attendance-board td,
.hr-exceptions td {
  font-size: 12px;
  padding: 10px 8px;
}

.hr-employee {
  align-items: center;
  display: flex;
  gap: 10px;
  white-space: nowrap;
}

.hr-employee i {
  align-items: center;
  background: #EBF3F1;
  border-radius: 50%;
  color: #6A8F89;
  display: inline-flex;
  flex: 0 0 34px;
  font-style: normal;
  height: 34px;
  justify-content: center;
}

.hr-employee .tone-2 { background: #EEF6F6; color: #629895; }
.hr-employee .tone-3 { background: #eee8fb; color: #6850a1; }
.hr-employee .tone-4 { background: #e8f1fc; color: #3977b8; }
.hr-employee .tone-5 { background: #fbf0df; color: #ad6a18; }
.is-late-time { color: #bf6e0e; font-weight: 800; }

.hr-status {
  background: #f1f1f1;
  border: 1px solid #d5d5d5;
  border-radius: 6px;
  color: #626262;
  display: inline-flex;
  font-size: 11px;
  font-weight: 750;
  justify-content: center;
  min-width: 82px;
  padding: 5px 8px;
  white-space: nowrap;
}

.hr-status.present { background: #eaf7ed; border-color: #a9d8b4; color: #278044; }
.hr-status.working { background: #edf4fc; border-color: #acd0ef; color: #3977b8; }
.hr-status.late { background: #fff4e7; border-color: #efc68f; color: #a96210; }
.hr-status.leave { background: #edf4fc; border-color: #acd0ef; color: #3977b8; }
.hr-status.absent { background: #F1F8F7; border-color: #C2D9D8; color: #649895; }
.hr-status.on_break { background: #f3eefb; border-color: #cbb9e5; color: #6f51a0; }

.hr-row-action {
  align-items: center;
  border: 1px solid var(--oro-line);
  border-radius: 6px;
  color: var(--oro-ink);
  display: inline-flex;
  font-weight: 900;
  height: 32px;
  justify-content: center;
  letter-spacing: 1px;
  width: 36px;
}

.hr-row-action:hover {
  background: rgba(62, 92, 88, .1);
  border-color: var(--oro-rose);
}

.hr-attendance-actions h2 {
  border-bottom: 1px solid var(--oro-line);
  margin-bottom: 16px;
  padding-bottom: 14px;
}

.hr-attendance-actions form {
  display: grid;
  gap: 10px;
}

.hr-attendance-actions .field { margin: 0 0 4px; }
.hr-attendance-actions .button { min-height: 48px; width: 100%; }
.hr-clock-in { background: #3da65a; border-color: #3da65a; }
.hr-clock-in:hover { background: #328b4b; border-color: #328b4b; }
.hr-clock-out { background: var(--oro-rose); }
.hr-break { color: var(--oro-ink); }

.hr-correction {
  border-top: 1px solid var(--oro-line);
  margin-top: 15px;
  padding-top: 12px;
}

.hr-correction summary {
  color: var(--oro-rose-dark);
  cursor: pointer;
  font-size: 13px;
  font-weight: 800;
  list-style: none;
}

.hr-correction summary::-webkit-details-marker { display: none; }
.hr-correction[open] summary { margin-bottom: 14px; }
.hr-correction .help-icon { margin-left: 5px; }

.hr-secondary-grid {
  align-items: stretch;
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.45fr);
}

.hr-exceptions .empty-state {
  min-height: 120px;
}

.hr-month-metrics {
  display: grid;
  grid-template-columns: repeat(5, minmax(110px, 1fr));
  padding-top: 18px;
}

.hr-month-metrics p {
  border-right: 1px solid var(--oro-line);
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0 18px 12px;
  position: relative;
}

.hr-month-metrics p:last-child { border-right: 0; }
.hr-month-metrics p::after {
  background: var(--oro-rose);
  border-radius: 999px;
  bottom: 0;
  content: "";
  height: 4px;
  left: 18px;
  position: absolute;
  right: 18px;
}

.hr-month-metrics i {
  align-items: center;
  background: #EFF4F3;
  border-radius: 50%;
  color: var(--oro-rose-dark);
  display: inline-flex;
  font-style: normal;
  height: 34px;
  justify-content: center;
  width: 34px;
}

.hr-month-metrics strong { color: var(--oro-ink); font-size: 19px; }
.hr-month-metrics span { color: var(--muted); font-size: 11px; }
.hr-month-metrics .present::after { background: #35a65a; }
.hr-month-metrics .late::after { background: #cc7b12; }
.hr-month-metrics .leave::after { background: #4b91c9; }
.hr-month-metrics .overtime::after { background: #8661bd; }
.hr-month-metrics .impact::after { background: var(--oro-rose); }

.hr-report-link {
  color: var(--oro-rose-dark);
  display: block;
  font-size: 12px;
  margin-top: 14px;
  text-align: right;
}

.hr-planned-note {
  background: rgba(62, 92, 88, .08);
  border-left: 4px solid var(--oro-rose);
  color: var(--muted);
  font-size: 12px;
  margin: 0;
  padding: 12px 15px;
}

@media (max-width: 1360px) {
  .hr-primary-grid,
  .hr-secondary-grid { grid-template-columns: 1fr; }
  .hr-attendance-actions form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hr-attendance-actions .field { grid-column: 1 / -1; }
  .hr-correction form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hr-correction form .field:first-of-type,
  .hr-correction form .field:last-of-type,
  .hr-correction form .button { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
  .hr-page-header { align-items: stretch; display: grid; }
  .hr-header-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .hr-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hr-month-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hr-month-metrics p { border-bottom: 1px solid var(--oro-line); border-right: 0; margin-bottom: 12px; }
  .hr-attendance-board > header,
  .hr-attendance-board > header > div:first-child { align-items: flex-start; display: grid; gap: 8px; }
}

@media (max-width: 600px) {
  .hr-header-actions,
  .hr-summary-grid,
  .hr-attendance-actions form,
  .hr-correction form,
  .hr-month-metrics { grid-template-columns: 1fr; }
  .hr-summary-grid article { min-height: 82px; padding: 14px; }
  .hr-attendance-board,
  .hr-attendance-actions,
  .hr-exceptions,
  .hr-month-preview { padding: 14px; }
  .hr-status-legend { gap: 8px; }
}

/* HR Phase 2 �� weekly shifts and appointment availability. */
.hr-week-toolbar {
  align-items: center;
  display: grid;
  gap: 14px;
  grid-template-columns: 48px minmax(210px, auto) 48px 1fr auto auto;
  padding: 16px 20px;
}

.hr-week-toolbar > div {
  display: grid;
  gap: 3px;
}

.hr-week-toolbar .hr-week-label {
  align-items: center;
  column-gap: 12px;
  grid-template-columns: 28px 1fr;
}

.hr-week-label > svg {
  color: var(--oro-rose-dark);
  grid-row: 1 / 3;
  height: 27px;
  width: 27px;
}

.hr-week-toolbar > div span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.hr-week-toolbar > div strong { font-size: 20px; }
.hr-week-toolbar form { margin: 0; }
.hr-week-toolbar input[type="date"] { min-height: 48px; width: 100%; }
.hr-week-toolbar .button { align-items: center; display: inline-flex; gap: 9px; justify-content: center; min-height: 48px; white-space: nowrap; }
.hr-week-toolbar .button svg { height: 19px; width: 19px; }

.hr-week-picker { position: relative; }
.hr-week-picker > svg {
  color: var(--oro-rose-dark);
  height: 19px;
  left: 14px;
  pointer-events: none;
  position: absolute;
  top: 15px;
  width: 19px;
  z-index: 1;
}
.hr-week-picker input[type="date"] { padding-left: 44px; }

.hr-week-arrow {
  align-items: center;
  border: 1px solid var(--oro-line);
  border-radius: 9px;
  color: var(--oro-ink);
  display: inline-flex;
  font-size: 30px;
  height: 48px;
  justify-content: center;
}

.hr-week-arrow:hover { background: #F4F9F8; border-color: var(--oro-rose); }

.hr-shift-summary article > i { font-style: normal; }
.hr-shift-summary article > i svg { height: 25px; width: 25px; }

.hr-shifts-page svg {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.hr-shift-summary article > span {
  align-items: baseline;
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 8px;
}

.hr-shift-summary article small {
  color: var(--muted);
  font-size: 11px;
  grid-column: 1 / -1;
}

.hr-shift-summary .scheduled > i { background: #EEF5F4; color: var(--oro-rose-dark); }
.hr-shift-summary .day-off > i { background: #f1f1f1; color: #747474; }

.hr-shift-layout {
  align-items: start;
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(0, 2.25fr) minmax(330px, .95fr);
}

.hr-week-board,
.hr-shift-editor,
.hr-schedule-exceptions,
.hr-availability-impact { padding: 20px; }

.hr-week-board > header,
.hr-shift-bottom article > header {
  align-items: center;
  border-bottom: 1px solid var(--oro-line);
  display: flex;
  justify-content: space-between;
  padding-bottom: 14px;
}

.hr-shift-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}

.hr-shift-legend span {
  color: var(--muted);
  font-size: 11px;
}

.hr-shift-legend span::before {
  background: #aaa;
  border-radius: 50%;
  content: "";
  display: inline-block;
  height: 8px;
  margin-right: 6px;
  width: 8px;
}

.hr-shift-legend .spa::before { background: var(--oro-rose); }
.hr-shift-legend .hair::before { background: #3977b8; }
.hr-shift-legend .off::before { background: #929292; }

.hr-week-board {
  min-width: 0;
  overflow: hidden;
}

.hr-week-board .table-wrap {
  max-width: 100%;
  overflow-x: auto;
}

.hr-week-board table {
  min-width: 760px;
  table-layout: fixed;
  width: 100%;
}

.hr-week-board th { color: var(--muted); font-size: 10px; padding: 10px 3px; text-align: center; }
.hr-week-board th:first-child { text-align: left; width: 160px; }
.hr-week-board th small { display: block; font-size: 11px; margin-top: 2px; }
.hr-week-board td { min-width: 0; padding: 6px 3px; vertical-align: middle; }
.hr-week-board .hr-employee small { color: var(--muted); display: block; font-size: 10px; margin-top: 2px; }
.hr-week-board .hr-employee i.hair { background: #e5effb; color: #3977b8; }

.hr-shift-block {
  align-items: center;
  background: #EEF5F4;
  border: 1px solid transparent;
  border-radius: 7px;
  color: #4E6460;
  display: flex;
  flex-direction: column;
  font-size: 8.5px;
  justify-content: center;
  line-height: 1.25;
  min-height: 42px;
  overflow: hidden;
  padding: 5px 2px;
  text-align: center;
  width: 100%;
}

.hr-shift-block:hover { border-color: var(--oro-rose); color: var(--oro-rose-dark); }
.hr-shift-block.hair { background: #e8f2ff; color: #2868a8; }
.hr-shift-block.off { background: #f1f1f1; color: #777; }
.hr-shift-block small { color: #b76b12; display: block; font-size: 8px; margin-top: 2px; }

.hr-shift-editor h2 {
  border-bottom: 1px solid var(--oro-line);
  margin-bottom: 16px;
  padding-bottom: 14px;
}

.hr-shift-editor form { display: grid; gap: 12px; }
.hr-shift-editor .field { margin: 0; }
.hr-shift-status { display: grid; grid-template-columns: 1fr 1fr; }
.hr-shift-status input,
.hr-weekday-pills input { position: absolute; opacity: 0; pointer-events: none; }
.hr-shift-status span {
  align-items: center;
  border: 1px solid var(--oro-line);
  display: flex;
  justify-content: center;
  min-height: 42px;
}
.hr-shift-status label:first-child span { border-radius: 8px 0 0 8px; }
.hr-shift-status label:last-child span { border-radius: 0 8px 8px 0; }
.hr-shift-status input:checked + span { background: var(--oro-rose); border-color: var(--oro-rose); color: white; font-weight: 800; }
.hr-apply-week { align-items: center; color: var(--muted); display: flex; font-size: 12px; gap: 8px; }
.hr-weekday-pills { display: grid; gap: 7px; grid-template-columns: repeat(7, 1fr); }
.hr-weekday-pills span {
  align-items: center;
  border: 1px solid var(--oro-line);
  border-radius: 7px;
  display: flex;
  font-size: 11px;
  justify-content: center;
  min-height: 31px;
}
.hr-weekday-pills input:checked + span { background: var(--oro-rose); border-color: var(--oro-rose); color: #fff; }
.hr-editor-actions { display: grid; gap: 10px; grid-template-columns: 1fr 1.2fr; }
.hr-editor-actions .button { width: 100%; }

.hr-shift-bottom {
  display: grid;
  gap: 18px;
  grid-template-columns: 1fr 1.3fr;
}

.hr-exception-row {
  align-items: center;
  display: grid;
  gap: 12px;
  grid-template-columns: 42px 1fr auto auto;
  padding-top: 16px;
}
.hr-exception-row > i {
  align-items: center;
  background: #fff2df;
  border-radius: 50%;
  color: #c97811;
  display: flex;
  font-style: normal;
  height: 38px;
  justify-content: center;
  width: 38px;
}
.hr-exception-row span { display: grid; gap: 4px; }
.hr-exception-row small { color: var(--muted); }
.hr-exception-row b { background: #fff2df; border-radius: 6px; color: #b5680f; font-size: 10px; padding: 6px 9px; }
.hr-exception-row .button { min-height: 38px; padding: 8px 16px; }

.hr-availability-impact p { color: var(--muted); font-size: 12px; margin: 13px 0; }
.hr-availability-impact p.good { color: #278044; }
.hr-availability-impact p.warning { color: #b5680f; }
.hr-availability-impact .button { float: right; margin-top: -48px; }

@media (max-width: 1450px) {
  .hr-shift-layout { grid-template-columns: 1fr; }
  .hr-shift-editor form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hr-shift-editor h2,
  .hr-shift-status,
  .hr-apply-week,
  .hr-weekday-pills,
  .hr-editor-actions,
  .hr-shift-editor .field:last-of-type { grid-column: 1 / -1; }
}

@media (max-width: 1050px) {
  .hr-week-toolbar { grid-template-columns: 48px 1fr 48px; }
  .hr-week-toolbar form,
  .hr-week-toolbar .button { width: 100%; }
  .hr-week-toolbar > form:first-of-type { grid-column: 1 / -1; }
  .hr-week-toolbar > form:nth-of-type(2) { grid-column: 1 / 3; }
  .hr-shift-bottom { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  .hr-week-toolbar { padding: 12px; }
  .hr-week-toolbar > form:nth-of-type(2),
  .hr-week-toolbar > .button { grid-column: 1 / -1; }
  .hr-shift-editor form { grid-template-columns: 1fr; }
  .hr-shift-editor h2,
  .hr-shift-status,
  .hr-apply-week,
  .hr-weekday-pills,
  .hr-editor-actions,
  .hr-shift-editor .field:last-of-type { grid-column: auto; }
  .hr-exception-row { grid-template-columns: 40px 1fr; }
  .hr-exception-row b,
  .hr-exception-row .button { grid-column: 2; }
  .hr-availability-impact .button { float: none; margin-top: 10px; width: 100%; }
}

/* Payroll payslip: final print rules stay last so responsive screen rules cannot stack the A4 layout. */
@media print {
  @page { margin: 6mm; size: A4 portrait; }

  html,
  body {
    background: #fff !important;
    height: auto !important;
    margin: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    print-color-adjust: exact !important;
    -webkit-print-color-adjust: exact !important;
  }

  .system-sidebar,
  .sidebar,
  .system-mobile-menu-toggle,
  .system-mobile-menu-backdrop,
  .system-topbar,
  .payroll-header,
  .payroll-tabs,
  .payroll-documents-layout,
  .payslip-preview-heading,
  .notice,
  .payslip-footer > div { display: none !important; }

  .system-layout,
  main,
  .system-main,
  .payroll-page {
    display: block !important;
    margin: 0 !important;
    max-width: none !important;
    min-height: 0 !important;
    padding: 0 !important;
    width: 100% !important;
  }

  .payroll-payslip-preview {
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    break-inside: avoid-page !important;
    color: #292724 !important;
    font-size: 8.5pt !important;
    line-height: 1.22 !important;
    margin: 0 !important;
    min-height: 0 !important;
    overflow: visible !important;
    page-break-inside: avoid !important;
  }

  .payslip-title-row {
    align-items: center !important;
    border-bottom: 2px solid #A7C4BF !important;
    display: grid !important;
    gap: 8mm !important;
    grid-template-columns: 42mm 1fr 24mm !important;
    padding: 1mm 3mm 2.5mm !important;
  }

  .payslip-wordmark { justify-self: start !important; }
  .payslip-wordmark strong { color: #A7C4BF !important; font-size: 27pt !important; letter-spacing: 5px !important; }
  .payslip-wordmark span { font-size: 6.5pt !important; letter-spacing: 4px !important; }
  .payslip-title-row > div:nth-child(2) { text-align: center !important; }
  .payslip-title-row h2 { font-size: 15pt !important; letter-spacing: .4px !important; text-transform: uppercase; }
  .payslip-title-row p { font-size: 8pt !important; margin: .5mm 0 !important; }
  .payslip-title-row small { display: block; font-size: 7pt; margin-top: .5mm; }
  .payslip-title-row .payroll-status {
    background: #fff8f3 !important;
    border: 1px solid #e8bd8b !important;
    border-radius: 999px !important;
    color: #9a692d !important;
    font-size: 7.5pt !important;
    justify-self: end !important;
    padding: 1.5mm 4mm !important;
  }

  .payslip-grid {
    display: block !important;
    padding: 2.5mm 3mm 0 !important;
    page-break-inside: avoid !important;
  }

  .payslip-grid > section {
    background: #fff !important;
    border: 1px solid #D3DFDD !important;
    border-radius: 3mm !important;
    margin: 0 0 2mm !important;
    padding: 2mm 3.5mm !important;
  }

  .payslip-grid h3 {
    align-items: center !important;
    color: #49423A !important;
    display: flex !important;
    font-size: 9pt !important;
    gap: 2mm !important;
    margin-bottom: 1.2mm !important;
    text-transform: uppercase;
  }
  .payslip-grid h3 i {
    align-items: center !important;
    background: #ECF4F2 !important;
    border-radius: 50% !important;
    color: #7CA19B !important;
    display: inline-flex !important;
    font-size: 8pt !important;
    font-style: normal !important;
    height: 5mm !important;
    justify-content: center !important;
    width: 5mm !important;
  }

  .payslip-grid .detail-list p {
    border-bottom: 1px solid #E7EBEA !important;
    font-size: 8pt !important;
    gap: 8px !important;
    line-height: 1.15 !important;
    padding: .85mm 0 !important;
  }
  .payslip-grid .detail-list p:last-child { border-bottom: 0 !important; }
  .payslip-employee .detail-list,
  .payslip-payment .detail-list {
    column-gap: 8mm !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .payslip-employee .detail-list p {
    display: flex !important;
    justify-content: space-between !important;
  }
  .payslip-employee .detail-list p > span,
  .payslip-employee .detail-list p > strong { grid-column: auto !important; }
  .payslip-field-icon { display: none !important; }
  .payslip-earnings .detail-list {
    column-gap: 8mm !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .payslip-grid .detail-list p.allowance-total {
    background: #F8FCFC !important;
    border: 1px solid #D3DFDD !important;
    border-radius: 2mm !important;
    margin: .5mm 0 !important;
    padding: 1.1mm 2mm !important;
  }
  .payslip-grid .detail-list p.total {
    align-items: center !important;
    background: #ECF4F2 !important;
    border: 1px solid #A7C4BF !important;
    border-radius: 2.5mm !important;
    font-size: 12pt !important;
    grid-column: 1 / -1 !important;
    margin-top: 1mm !important;
    padding: 1.8mm 3mm !important;
  }
  .payslip-grid .detail-list p.total strong { color: #689089 !important; font-size: 15pt !important; }

  .payslip-notes {
    background: #FBFEFD !important;
    border: 1px solid #D3DFDD !important;
    border-radius: 3mm !important;
    font-size: 8pt !important;
    grid-template-columns: 24mm 1fr !important;
    margin: 0 3mm 1.5mm !important;
    padding: 1.6mm 3.5mm !important;
  }
  .payslip-signatures { gap: 34mm !important; padding: 1.5mm 18mm 1mm !important; }
  .payslip-signatures p { font-size: 8pt !important; }
  .payslip-signatures i { height: 4mm !important; }
  .payslip-footer {
    border-top: 1px solid #E1E6E5 !important;
    color: #74685D !important;
    font-size: 7.5pt !important;
    justify-content: center !important;
    margin: 0 3mm !important;
    padding: 1.3mm 4mm !important;
    text-align: center !important;
  }
}
.hr-leave-page svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.hr-leave-page .hr-heading-actions{display:flex;gap:12px}.hr-leave-page .hr-heading-actions .button{display:inline-flex;align-items:center;gap:8px}.hr-leave-toolbar{display:flex;align-items:center;gap:16px;padding:16px 20px;margin-bottom:20px}.hr-leave-toolbar>div{min-width:210px}.hr-leave-toolbar small,.hr-leave-toolbar strong{display:block}.hr-leave-toolbar small{font-size:11px;letter-spacing:.08em;color:#928F8C}.hr-leave-toolbar strong{font-size:20px;margin-top:3px}.hr-leave-toolbar form{display:flex;align-items:center;gap:10px;margin-left:auto;border:1px solid #E2DFDC;border-radius:10px;padding:0 14px;height:50px}.hr-leave-toolbar form input{border:0;padding:0;min-width:150px;height:auto}.hr-leave-toolbar-note{font-size:13px;color:#777;max-width:330px}.hr-leave-summary article{display:flex;align-items:center;gap:16px}.hr-leave-summary article>i{display:grid;place-items:center;width:54px;height:54px;border-radius:14px;background:#EEF5F4;color:#789F9A}.hr-leave-summary article:nth-child(2)>i{background:#eaf7ed;color:#2d9150}.hr-leave-summary article:nth-child(3)>i{background:#eef3fb;color:#4d7eb7}.hr-leave-summary article:nth-child(4)>i{background:#fff4e3;color:#b56a12}.hr-leave-summary article>div{display:grid;grid-template-columns:auto 1fr;align-items:baseline;gap:0 8px}.hr-leave-summary strong{font-size:30px}.hr-leave-summary span{font-weight:600}.hr-leave-summary small{grid-column:1/-1;color:#858280}.hr-new-leave{margin:20px 0}.hr-new-leave summary{display:flex;align-items:center;justify-content:space-between;cursor:pointer;list-style:none}.hr-new-leave summary span{display:flex;align-items:center;gap:10px}.hr-new-leave summary small{color:#8B8885}.hr-new-leave form{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:22px;padding-top:20px;border-top:1px solid #eee}.hr-new-leave label,.hr-leave-review label{display:flex;flex-direction:column;gap:7px;font-weight:600}.hr-new-leave .wide{grid-column:1/-1}.hr-new-leave textarea,.hr-leave-review textarea{min-height:78px}.hr-new-leave button{justify-self:start}.hr-leave-primary{display:grid;grid-template-columns:minmax(0,1.8fr) minmax(310px,.72fr);gap:20px;align-items:start}.hr-leave-list header,.hr-leave-review header,.hr-leave-calendar header,.hr-leave-payroll header{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}.hr-leave-list header p{margin:.35rem 0 0;color:#777}.hr-leave-list header>span{color:#8D8A87}.hr-leave-list tr.selected{background:#FAFDFD}.hr-leave-list td:last-child a{color:#86ABA5;font-weight:700}.hr-leave-person{display:flex;align-items:center;gap:10px}.hr-leave-person>i,.hr-review-person>i{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#EBF3F2;color:#77A09A;font-style:normal;font-weight:700}.hr-leave-person span{display:flex;flex-direction:column}.hr-leave-person small{color:#888}.hr-leave-type{display:inline-flex;align-items:center;gap:7px}.hr-leave-type:before{content:"";width:8px;height:8px;border-radius:50%;background:var(--leave-color)}.hr-status.pending{background:#fff4de;color:#9b650e}.hr-status.approved{background:#eaf7ed;color:#277c44}.hr-status.rejected{background:#fdeaea;color:#a63a3a}.hr-leave-review{position:sticky;top:190px}.hr-review-person{display:flex;align-items:center;gap:12px;margin:20px 0}.hr-review-person>i{width:48px;height:48px}.hr-review-person>div{display:flex;flex-direction:column}.hr-review-person span{color:#888}.hr-leave-review dl{margin:0}.hr-leave-review dl>div{display:flex;justify-content:space-between;padding:12px 0;border-bottom:1px solid #eee}.hr-leave-review dt{color:#7F7C79}.hr-leave-review dd{margin:0;font-weight:700;text-align:right}.hr-leave-review dd.danger{color:#af3d3d}.hr-leave-review dd.safe{color:#28814a}.hr-leave-review blockquote{margin:18px 0;padding:14px;border-left:3px solid #A6C5C0;background:#FAFDFD;color:#5D5A57}.hr-leave-review form>div{display:grid;grid-template-columns:1fr 1.3fr;gap:10px;margin-top:14px}.hr-review-note{display:flex;flex-direction:column;gap:6px;padding:14px;background:#F8F9F9;border-radius:10px}.hr-leave-secondary{display:grid;grid-template-columns:minmax(0,1.8fr) minmax(310px,.72fr);gap:20px;margin-top:20px}.hr-leave-calendar-grid{display:grid;grid-template-columns:repeat(31,minmax(38px,1fr));overflow-x:auto;padding:18px 0 4px}.hr-leave-calendar-grid>div{min-height:76px;border-left:1px solid #eee;text-align:center;position:relative}.hr-leave-calendar-grid small,.hr-leave-calendar-grid strong{display:block}.hr-leave-calendar-grid small{font-size:10px;color:#999}.hr-leave-calendar-grid strong{margin-top:4px}.hr-leave-calendar-grid i{display:block;width:22px;height:5px;border-radius:4px;background:var(--leave-color);margin:9px auto 0}.hr-leave-payroll>div{display:flex;justify-content:space-between;padding:15px 0;border-bottom:1px solid #eee}.hr-leave-payroll p{color:#75726F;line-height:1.55}.hr-leave-payroll a{color:#80A69F;font-weight:700}.hr-icon-library{position:absolute!important;width:0!important;height:0!important;overflow:hidden!important}
.hr-demo-banner{display:flex;align-items:center;justify-content:space-between;gap:18px;margin:0 0 20px;padding:13px 16px;border:1px solid #D2E3E0;border-radius:12px;background:#FAFDFD;color:#66625F}.hr-demo-banner strong{color:#759D97;margin-right:8px}.hr-demo-banner form{margin:0}.hr-demo-banner .button{white-space:nowrap;padding:10px 16px}.hr-new-leave:not([open]){padding:0}.hr-new-leave:not([open]) summary{padding:20px 24px}.hr-new-leave[open] summary{padding-bottom:18px;border-bottom:1px solid #eee}.hr-leave-list,.hr-leave-review{min-height:420px}.hr-leave-list table th{font-size:12px;text-transform:uppercase;letter-spacing:.035em;color:#8D8985}.hr-leave-list table td{padding-top:17px;padding-bottom:17px}.hr-leave-review{border-top:4px solid #A5C2BD}.hr-leave-calendar,.hr-leave-payroll{min-height:250px}
@media(max-width:1100px){.hr-leave-primary,.hr-leave-secondary{grid-template-columns:1fr}.hr-leave-review{position:static}.hr-new-leave form{grid-template-columns:1fr 1fr}.hr-leave-toolbar-note{display:none}}
@media(max-width:700px){.hr-leave-page .hr-page-heading{align-items:flex-start}.hr-leave-page .hr-heading-actions{width:100%;flex-wrap:wrap}.hr-leave-toolbar{flex-wrap:wrap}.hr-leave-toolbar>div{min-width:0;flex:1}.hr-leave-toolbar form{order:3;width:100%;margin:0}.hr-leave-toolbar form input{width:100%}.hr-new-leave form{grid-template-columns:1fr}.hr-new-leave .wide{grid-column:auto}.hr-leave-list table{min-width:760px}.hr-leave-summary{grid-template-columns:1fr 1fr}.hr-leave-summary article{padding:15px}.hr-leave-summary article>i{width:42px;height:42px}.hr-leave-summary strong{font-size:24px}}

/* HR Leave Management �� approved visual composition */
.lv-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:18px}.lv-heading h1{font-size:32px;line-height:1.05;margin:0 0 8px}.lv-heading p{color:#777471;margin:0}.lv-heading-actions{display:flex;align-items:center;gap:12px}.lv-heading-actions form{align-items:center;background:#fff;border:1px solid #DDD9D5;border-radius:9px;display:flex;height:48px;padding:0 14px}.lv-heading-actions form input{border:0;height:auto;min-width:130px;padding:0 0 0 10px}.lv-heading-actions .button{align-items:center;display:inline-flex;gap:9px;height:48px}.lv-tabs{margin-bottom:16px;padding:0 12px}.lv-tabs a{align-items:center;display:flex;justify-content:center;min-height:58px}.hr-demo-banner{font-size:13px;margin-bottom:14px;padding:9px 13px}.hr-demo-banner .button{font-size:12px;padding:7px 12px}.lv-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-bottom:18px}.lv-summary article{align-items:center;background:#fff;border:1px solid #DDDBD8;border-radius:10px;box-shadow:0 5px 14px rgba(53, 62, 60,.05);display:flex;gap:20px;min-height:112px;padding:18px}.lv-summary article>i{align-items:center;border:1px solid #D0E5E2;background:#F4FBFA;border-radius:10px;color:#74A19B;display:flex;flex:0 0 58px;height:58px;justify-content:center}.lv-summary article:nth-child(1)>i{background:#fff7e8;border-color:#f1d29c;color:#c77a16}.lv-summary article:nth-child(2)>i{background:#edf8ef;border-color:#b9dfc0;color:#38894a}.lv-summary article:nth-child(3)>i{background:#eef5ff;border-color:#bdd4f1;color:#2868aa}.lv-summary article>i svg{height:34px;width:34px}.lv-summary article>div{display:flex;flex-direction:column}.lv-summary span{font-size:14px}.lv-summary strong{color:#71A59E;font-size:28px;line-height:1.15;margin:3px 0}.lv-summary article:nth-child(1) strong{color:#bd6b0f}.lv-summary article:nth-child(2) strong{color:#328044}.lv-summary article:nth-child(3) strong{color:#2868aa}.lv-summary small{color:#777}.hr-new-leave{margin:0 0 18px}.lv-workspace{align-items:start;display:grid;gap:18px;grid-template-columns:minmax(0,1.95fr) minmax(360px,1fr)}.lv-requests{min-height:0;padding:14px}.lv-requests>header{align-items:center;display:flex;justify-content:space-between;margin-bottom:10px}.lv-requests h2,.lv-review h2,.lv-calendar h2,.lv-payroll h2{font-size:21px;margin:0}.lv-requests header nav{display:flex;gap:8px}.lv-requests header nav a{border:1px solid #DDDAD6;border-radius:6px;color:#5E5A57;font-size:12px;min-width:78px;padding:7px 14px;text-align:center}.lv-requests header nav a.active{background:#8CBAB3;border-color:#8CBAB3;color:#fff}.lv-requests table{font-size:12px;min-width:830px}.lv-requests th{background:#fffafa;color:#5D5A56;font-size:11px;padding:10px 9px;text-transform:none}.lv-requests td{padding:10px 9px}.lv-requests tr.selected{background:#F9FDFC}.lv-person{align-items:center;display:flex;gap:8px;white-space:nowrap}.lv-person>i,.lv-review-person>i,.lv-staff>i{align-items:center;background:#E3EDEB;border-radius:50%;color:#669089;display:flex;font-style:normal;font-weight:700;height:34px;justify-content:center;width:34px}.lv-person>span{display:flex;flex-direction:column}.lv-person small{color:#83807D}.lv-coverage{font-size:11px;white-space:nowrap}.lv-coverage.covered{color:#438c4c}.lv-coverage.needs{color:#c77a16}.lv-review-button{border:1px solid #9DC3BE;border-radius:5px;color:#73A09A;display:inline-block;padding:6px 12px}.lv-review{border-top:0;min-height:0;padding:16px;position:static}.lv-review>h2{border-bottom:1px solid #eee;padding-bottom:12px}.lv-review-person{align-items:center;display:flex;gap:10px;margin:12px 0}.lv-review-person>i{height:44px;width:44px}.lv-review-person>div{display:flex;flex:1;flex-direction:column}.lv-review-person>span{margin-left:auto}.lv-review dl{font-size:12px;margin:0}.lv-review dl>div{display:grid;grid-template-columns:120px 1fr;padding:2px 0}.lv-review dt{color:#716E6A}.lv-review dd{font-weight:500;margin:0}.lv-balance{align-items:center;background:#FAFDFD;border:1px solid #B9D6D2;border-radius:7px;display:flex;gap:10px;margin:10px 0;padding:8px 10px}.lv-balance svg{color:#739D97}.lv-balance span{display:flex;flex-direction:column;font-size:12px}.lv-balance strong{color:#73A09A}.lv-review>label{display:flex;flex-direction:column;font-size:11px;gap:4px}.lv-review>label textarea{font-size:12px;min-height:48px;padding:8px}.lv-impact{border:1px solid #E5E2DF;border-radius:8px;display:flex;flex-direction:column;font-size:11px;gap:6px;margin-top:10px;padding:9px 11px}.lv-impact>span{align-items:center;display:flex;gap:8px}.lv-impact svg{height:16px;width:16px}.lv-review form>div{display:grid;gap:12px;grid-template-columns:1fr 1.25fr;margin-top:10px}.lv-review form .button{align-items:center;display:flex;gap:7px;justify-content:center;padding:10px}.lv-bottom{align-items:start;display:grid;gap:18px;grid-template-columns:minmax(0,1.95fr) minmax(360px,1fr);margin-top:18px}.lv-calendar{padding:14px}.lv-calendar>header{align-items:center;border-bottom:1px solid #eee;display:flex;justify-content:space-between;padding-bottom:10px}.lv-legend{display:flex;gap:18px}.lv-legend span{align-items:center;display:flex;font-size:11px;gap:6px}.lv-legend i{background:var(--c);border-radius:2px;height:10px;width:10px}.lv-calendar-scroll{overflow:auto}.lv-calendar-grid{display:grid;grid-template-columns:110px repeat(var(--days),minmax(29px,1fr));min-width:880px}.lv-calendar-grid>span{border-bottom:1px solid #eee;border-right:1px solid #eee;min-height:30px}.lv-calendar-corner{align-items:center;display:flex;font-size:11px;padding-left:8px}.lv-day{font-size:10px;text-align:center}.lv-day small{color:#8B8885;display:block;font-size:8px}.lv-staff{align-items:center;display:flex;font-size:11px;gap:6px;padding:3px 6px}.lv-staff>i{font-size:9px;height:22px;width:22px}.lv-calendar-cell{align-items:center;display:flex;justify-content:center}.lv-calendar-cell i{background:var(--c);border-radius:4px;display:block;height:13px;width:100%}.lv-payroll{padding:16px}.lv-payroll h2{border-bottom:1px solid #eee;padding-bottom:12px}.lv-payroll>div{align-items:center;border-bottom:1px solid #eee;display:grid;font-size:12px;gap:8px;grid-template-columns:22px 1fr auto;padding:9px 0}.lv-payroll>div svg{height:18px;width:18px}.lv-payroll>div:nth-of-type(1) svg{color:#78A59F}.lv-payroll>div:nth-of-type(2) svg{color:#3177c2}.lv-payroll>div:nth-of-type(3) svg{color:#c27a20}.lv-payroll>div:nth-of-type(4) strong{color:#73A09A;font-size:15px}.lv-payroll>.button{display:flex;justify-content:center;margin-top:12px;width:100%}
@media(max-width:1250px){.lv-heading{align-items:flex-start;flex-direction:column}.lv-heading-actions{width:100%}.lv-workspace,.lv-bottom{grid-template-columns:1fr}.lv-summary{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){.lv-heading-actions{flex-wrap:wrap}.lv-heading-actions form{width:100%}.lv-heading-actions form input{width:100%}.lv-summary{grid-template-columns:1fr 1fr;gap:10px}.lv-summary article{gap:10px;min-height:96px;padding:12px}.lv-summary article>i{flex-basis:44px;height:44px}.lv-summary article>i svg{height:26px;width:26px}.lv-summary strong{font-size:21px}.lv-requests>header{align-items:flex-start;flex-direction:column;gap:10px}.lv-requests header nav{overflow:auto;width:100%}.lv-workspace,.lv-bottom{display:block}.lv-review,.lv-payroll{margin-top:14px}}

/* HR Leave Management �� final draft alignment corrections */
.hr-leave-page .lv-tabs.hr-sticky-tabs{background:#fff!important;box-shadow:0 7px 18px rgba(51, 59, 58,.09);isolation:isolate;opacity:1!important;z-index:40}
.hr-leave-page .lv-summary{position:relative;z-index:1}
.lv-workspace{grid-template-columns:minmax(0,2.15fr) minmax(340px,.9fr)}
.lv-requests,.lv-review{box-sizing:border-box;min-height:438px}
.lv-requests{overflow:hidden}
.lv-requests .table-wrap{max-width:100%;overflow-x:auto}
.lv-requests table{font-size:11px;min-width:720px;table-layout:fixed;width:100%}
.lv-requests th:nth-child(1){width:24%}.lv-requests th:nth-child(2){width:14%}.lv-requests th:nth-child(3){width:18%}.lv-requests th:nth-child(4){width:6%}.lv-requests th:nth-child(5){width:16%}.lv-requests th:nth-child(6){width:12%}.lv-requests th:nth-child(7){width:10%}
.lv-requests th,.lv-requests td{box-sizing:border-box;overflow:hidden;padding:10px 7px;text-overflow:ellipsis}
.lv-requests th:nth-child(6),.lv-requests td:nth-child(6){overflow:visible;text-overflow:clip;white-space:nowrap}
.lv-requests td:last-child{overflow:visible;text-align:right}
.lv-review-button{box-sizing:border-box;padding:6px 9px;white-space:nowrap}
.lv-review{align-self:stretch}
.lv-review>label textarea{background:#fff;border:1px solid #DDD9D5;border-radius:7px;box-sizing:border-box;font-family:inherit;line-height:1.35;min-height:52px;padding:8px;resize:vertical;width:100%}
.lv-manager-note{background:#F8F9F9;border-radius:8px;display:flex;flex-direction:column;font-size:11px;gap:4px;line-height:1.4;margin:9px 0 0;padding:9px 10px}
.lv-manager-note strong{font-size:11px}
.lv-impact{gap:4px;margin-top:9px;padding:8px 10px}
@media(max-width:1250px){.lv-workspace{grid-template-columns:1fr}.lv-requests,.lv-review{min-height:0}}

/* HR Leave Management �� status and section arrangement correction */
.hr-leave-page .hr-new-leave:not([open]){display:none}
.hr-leave-page .hr-new-leave[open]{margin-bottom:18px}
.lv-requests th:nth-child(1){width:23%}.lv-requests th:nth-child(2){width:14%}.lv-requests th:nth-child(3){width:17%}.lv-requests th:nth-child(4){width:6%}.lv-requests th:nth-child(5){width:16%}.lv-requests th:nth-child(6){width:13%}.lv-requests th:nth-child(7){width:11%}
.lv-requests th:nth-child(6),.lv-requests td:nth-child(6),.lv-requests th:nth-child(7),.lv-requests td:nth-child(7){overflow:visible;text-overflow:clip;white-space:nowrap}
.lv-requests td:nth-child(6){text-align:center}
.lv-requests td:nth-child(7){text-align:right}

/* HR Leave Management �� balanced request-table alignment */
.lv-requests th:not(:first-child),.lv-requests td:not(:first-child){text-align:center}
.lv-requests td:nth-child(5) .lv-coverage{display:inline-flex;justify-content:center}
.lv-requests td:nth-child(7){text-align:center}

/* HR Employee Records �� approved second visual draft */
.er-page svg{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.7}.er-heading{align-items:center;display:flex;gap:22px;justify-content:space-between;margin-bottom:16px}.er-heading h1{font-size:32px;line-height:1.05;margin:0 0 7px}.er-heading p{color:#777471;margin:0}.er-heading>div:last-child{align-items:center;display:flex;gap:12px}.er-heading form{margin:0}.er-heading input{background:#fff;min-width:260px}.er-tabs{background:#fff!important;box-shadow:0 7px 18px rgba(51, 59, 58,.08);isolation:isolate;margin-bottom:16px;opacity:1!important;padding:0 12px;z-index:40}.er-tabs a{align-items:center;display:flex;justify-content:center;min-height:58px}.er-summary{display:grid;gap:16px;grid-template-columns:repeat(4,minmax(0,1fr));margin-bottom:16px}.er-summary article{align-items:center;background:#fff;border:1px solid #D7E3E1;border-radius:10px;display:grid;grid-template-columns:62px auto 1fr;min-height:88px;padding:12px 18px}.er-summary i{align-items:center;color:#78A8A1;display:flex;grid-row:1/3;height:52px;justify-content:center;width:52px}.er-summary i svg{height:44px;width:44px}.er-summary strong{font-size:26px;line-height:1}.er-summary span{align-self:start;font-size:13px;grid-column:2/4}.er-grid{align-items:stretch;display:grid;gap:16px;grid-template-columns:minmax(0,1.43fr) minmax(440px,1fr)}.er-directory,.er-profile{min-height:495px;padding:0}.er-directory>header,.er-profile>header{border-bottom:1px solid #E8E4E1;padding:14px 16px}.er-directory h2,.er-profile h2,.er-activity h2{font-size:21px;margin:0}.er-filters{display:grid;gap:9px;grid-template-columns:1fr 1fr .8fr 1.4fr;padding:12px 16px}.er-filters select,.er-filters input{font-size:12px;height:36px;padding:7px 10px}.er-directory table{font-size:12px;margin:0;min-width:680px;table-layout:fixed;width:100%}.er-directory th{background:#fffafa;font-size:10px;padding:9px 12px}.er-directory td{padding:9px 12px}.er-directory tr.selected{background:#F6FBFB}.er-directory th:nth-child(1){width:30%}.er-directory th:nth-child(2){width:18%}.er-directory th:nth-child(3){width:22%}.er-directory th:nth-child(4){width:15%}.er-directory th:nth-child(5){width:15%}.er-person,.er-profile-person{align-items:center;display:flex;gap:10px}.er-person>i,.er-profile-person>i{align-items:center;background:#EAF2F1;border:1px solid #D4E5E2;border-radius:50%;color:#6C9891;display:flex;font-style:normal;font-weight:700;height:34px;justify-content:center;width:34px}.er-person>span,.er-profile-person>span{display:flex;flex-direction:column}.er-person small,.er-profile-person small{color:#817E7A}.er-badge{border:1px solid;border-radius:14px;display:inline-flex;font-size:10px;justify-content:center;min-width:52px;padding:3px 8px}.er-badge.active{background:#edf8ef;border-color:#b7dabc;color:#2d7d43}.er-view{border:1px solid #9BC2BD;border-radius:5px;color:#6D9C95;display:inline-block;padding:5px 14px}.er-directory td:not(:first-child),.er-directory th:not(:first-child){text-align:center}.er-directory footer{border-top:1px solid #eee;color:#817E7A;font-size:11px;padding:11px 16px}.er-profile>header{align-items:center;display:grid;gap:10px;grid-template-columns:1fr auto auto}.er-profile-person>i{font-size:18px;height:58px;width:58px}.er-profile-person strong{font-size:18px}.er-profile header .button{align-items:center;display:flex;font-size:11px;gap:6px;padding:8px 11px}.er-profile header .button svg{height:15px;width:15px}.er-profile>section{border-bottom:1px solid #eee;display:grid;gap:10px;grid-template-columns:180px 1fr;padding:10px 16px}.er-profile h3{align-items:center;display:flex;font-size:12px;gap:9px;margin:0}.er-profile h3 i{align-items:center;border:1px solid #B8D4D0;border-radius:5px;color:#76A49E;display:flex;height:30px;justify-content:center;width:30px}.er-profile h3 svg{height:18px;width:18px}.er-profile dl{display:grid;gap:5px 22px;grid-template-columns:1fr 1fr;margin:0}.er-profile dl>div{display:flex;gap:8px;justify-content:space-between}.er-profile dt{color:#777;font-size:10px}.er-profile dd{font-size:10px;font-weight:600;margin:0;text-align:right}.er-full-record{border:1px solid #9BC2BD;border-radius:5px;color:#6D9C95;display:block;font-size:11px;margin:10px 16px;padding:7px;text-align:center}.er-activity{margin-top:16px;padding:14px 16px}.er-activity>header{align-items:center;display:flex;justify-content:space-between}.er-activity header a{color:#6D9C95;font-size:11px}.er-activity>div{display:grid;grid-template-columns:repeat(5,1fr);margin-top:12px}.er-activity article{align-items:center;border-right:1px solid #DDD9D5;display:flex;gap:10px;padding:4px 14px}.er-activity article:last-child{border-right:0}.er-activity article>i{align-items:center;border:1px solid #BAD5D1;border-radius:50%;color:#76A49E;display:flex;height:38px;justify-content:center;width:38px}.er-activity article svg{height:20px;width:20px}.er-activity article span{display:flex;flex-direction:column}.er-activity strong{font-size:11px}.er-activity small{color:#777;font-size:9px}.er-page .hr-planned-note{margin-top:14px}
@media(max-width:1250px){.er-grid{grid-template-columns:1fr}.er-summary{grid-template-columns:repeat(2,1fr)}.er-directory,.er-profile{min-height:0}}
@media(max-width:760px){.er-heading{align-items:flex-start;flex-direction:column}.er-heading>div:last-child{flex-wrap:wrap;width:100%}.er-heading form,.er-heading input{width:100%}.er-summary{gap:9px}.er-summary article{grid-template-columns:46px auto 1fr;padding:10px}.er-summary i{height:40px;width:40px}.er-summary i svg{height:32px;width:32px}.er-summary strong{font-size:21px}.er-summary span{font-size:11px}.er-filters{grid-template-columns:1fr 1fr}.er-profile>section{grid-template-columns:1fr}.er-activity>div{grid-template-columns:1fr}.er-activity article{border-bottom:1px solid #eee;border-right:0;padding:9px}}

/* HR Employee Profile �� approved draft proportions */
.er-grid{grid-template-columns:minmax(0,1.25fr) minmax(500px,1fr)}
.er-profile>header{padding:12px 14px}.er-profile-person>i{height:52px;width:52px}.er-profile>section{grid-template-columns:150px minmax(0,1fr);padding:9px 14px}.er-profile h3{font-size:11px}.er-profile dl{gap:5px 16px}.er-profile dl>div{align-items:center;min-width:0}.er-profile dt,.er-profile dd{line-height:1.25}.er-profile dd{overflow-wrap:anywhere}.er-profile>section:nth-of-type(3) dl>div:last-child dd,.er-profile>section:nth-of-type(4) dd{background:#edf8ef;border:1px solid #b7dabc;border-radius:12px;color:#2d7d43;font-size:9px;padding:2px 7px}.er-profile>section:nth-of-type(4) dl>div:nth-child(n+3) dd{background:#eef5ff;border-color:#bdd4f1;color:#2868aa}.er-full-record{margin:9px 14px}
@media(max-width:1250px){.er-grid{grid-template-columns:1fr}.er-profile>section{grid-template-columns:150px minmax(0,1fr)}}
@media(max-width:760px){.er-profile>section{grid-template-columns:1fr}}

/* Employee Records repair �� approved icon set and stable profile proportions */
.er-heading-search{border:1px solid #DDD9D5!important;border-radius:8px!important;box-sizing:border-box;height:44px!important;padding:10px 14px!important}
.er-tabs a{gap:9px}.er-tabs a svg{display:block;flex:0 0 20px;height:20px;width:20px}.er-tabs a.active svg{color:var(--oro-rose-dark)}
.er-summary article{grid-template-columns:56px minmax(0,1fr)}.er-summary i{grid-row:1/3}.er-summary i svg{display:block;max-height:42px;max-width:42px}.er-summary strong,.er-summary span{grid-column:2}
.er-grid{grid-template-columns:minmax(700px,1.45fr) minmax(590px,1fr)}
.er-profile>header{grid-template-columns:minmax(0,1fr) auto auto}
.er-profile>section{grid-template-columns:170px minmax(0,1fr)}
.er-profile dl{grid-template-columns:repeat(2,minmax(180px,1fr))}
.er-profile dl>div{display:grid;gap:8px;grid-template-columns:minmax(90px,1fr) minmax(88px,auto)}
.er-profile dt{min-width:0}.er-profile dd{overflow-wrap:normal;white-space:nowrap}
.er-profile>section:nth-of-type(3) dl>div:last-child dd,.er-profile>section:nth-of-type(4) dd{align-self:center;justify-self:end;white-space:nowrap}
@media(max-width:1500px){.er-grid{grid-template-columns:1fr}.er-directory,.er-profile{min-height:0}.er-profile dl{grid-template-columns:repeat(2,minmax(220px,1fr))}}
@media(max-width:760px){.er-tabs a{gap:0}.er-tabs a svg{display:none}.er-profile>section{grid-template-columns:1fr}.er-profile dl{grid-template-columns:1fr}.er-profile dl>div{grid-template-columns:1fr auto}}

/* HR Reports �� approved visual draft */
.hr-report-page svg{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.8}.hr-report-heading{align-items:flex-end;display:flex;gap:24px;justify-content:space-between;margin-bottom:16px}.hr-report-heading h1{font-size:34px;line-height:1.05;margin:0 0 7px}.hr-report-heading p{color:#777471;margin:0}.hr-report-actions{align-items:center;display:flex;gap:10px}.hr-report-actions form{margin:0}.hr-report-actions input[type=month]{background:#fff;height:44px;min-width:145px}.hr-report-actions .button{align-items:center;display:inline-flex;gap:8px;height:44px;justify-content:center}.hr-report-actions svg{height:18px;width:18px}.hr-report-tabs{background:#fff!important;box-shadow:0 7px 18px rgba(51, 59, 58,.08);isolation:isolate;margin-bottom:14px;opacity:1!important;padding:0 12px;z-index:40}.hr-report-tabs a{align-items:center;display:flex;gap:8px;justify-content:center;min-height:56px}.hr-report-tabs svg{display:block;height:19px;width:19px}.hr-report-summary{display:grid;gap:14px;grid-template-columns:repeat(4,minmax(0,1fr));margin-bottom:14px}.hr-report-summary article{align-items:center;background:#fff;border:1px solid #E1E6E6;border-radius:9px;display:flex;gap:14px;min-height:94px;padding:13px 16px}.hr-report-summary i{align-items:center;border-radius:50%;display:flex;flex:0 0 58px;height:58px;justify-content:center;width:58px}.hr-report-summary i svg{height:33px;width:33px}.hr-report-summary span{display:flex;flex-direction:column;font-size:12px}.hr-report-summary strong{font-size:25px;line-height:1.15;margin:3px 0}.hr-report-summary small{color:#777;font-size:10px}.hr-report-summary .rate i{background:#eaf7ed;color:#278044}.hr-report-summary .rate strong{color:#278044}.hr-report-summary .hours i{background:#eaf2ff;color:#2772bd}.hr-report-summary .hours strong{color:#2772bd}.hr-report-summary .exceptions i{background:#fff1e1;color:#c27413}.hr-report-summary .exceptions strong{color:#c27413}.hr-report-summary .impact i{background:#EEF6F5;color:#75A7A1}.hr-report-summary .impact strong{color:#75A7A1}.hr-report-primary,.hr-report-secondary{display:grid;gap:14px;grid-template-columns:minmax(0,1.4fr) minmax(460px,1fr);margin-bottom:14px}.hr-report-primary>article,.hr-report-secondary>article{min-height:260px;padding:14px}.hr-report-primary h2,.hr-report-secondary h2,.hr-employee-report h2{font-size:18px;margin:0}.hr-attendance-chart>header{align-items:center;display:flex;justify-content:space-between}.hr-attendance-chart>header>div{display:flex;gap:16px}.hr-attendance-chart>header span{align-items:center;display:flex;font-size:10px;gap:6px}.hr-attendance-chart>header span:before{background:var(--dot);border-radius:50%;content:"";height:8px;width:8px}.hr-attendance-chart>header .present{--dot:#65b36d}.hr-attendance-chart>header .late{--dot:#efa72d}.hr-attendance-chart>header .absent{--dot:#8DB8C7}.hr-bar-chart{align-items:end;border-bottom:1px solid #D9D6D3;display:flex;gap:7%;height:205px;justify-content:space-around;padding:18px 18px 0}.hr-bar-group{align-items:center;display:flex;flex:1;flex-direction:column;height:100%;justify-content:flex-end;min-width:56px}.hr-bars{align-items:end;display:flex;gap:5px;height:165px}.hr-bars i{background:currentColor;border-radius:3px 3px 0 0;display:block;height:var(--bar);min-height:3px;width:18px}.hr-bars .present{color:#65b36d}.hr-bars .late{color:#efa72d}.hr-bars .absent{color:#8DB8C7}.hr-bar-group>strong{font-size:10px;font-weight:500;margin:8px 0;white-space:nowrap}.hr-hours-card h2{border-bottom:1px solid #eee;padding-bottom:10px}.hr-hours-card table{font-size:10px;margin:0;min-width:570px}.hr-hours-card th{font-size:9px;padding:7px 5px}.hr-hours-card td{padding:6px 5px;text-align:center}.hr-hours-card th:first-child,.hr-hours-card td:first-child{text-align:left}.hr-report-person{align-items:center;display:inline-flex;gap:7px;white-space:nowrap}.hr-report-person>i{align-items:center;background:#E8F0EF;border-radius:50%;color:#658F89;display:flex;font-size:9px;font-style:normal;font-weight:700;height:25px;justify-content:center;width:25px}.hr-report-person>span{display:flex;flex-direction:column;text-align:left}.hr-report-person small{color:#817E7A;font-size:9px}.positive{color:#278044!important}.negative{color:#71A7AB!important}.hr-report-status{border-radius:10px;display:inline-block;font-size:8px;padding:3px 9px}.hr-report-status.under{background:#EAF3F3;color:#5F898B}.hr-report-status.over{background:#e7f4e9;color:#2f7d43}.hr-leave-chart{overflow:hidden}.hr-leave-chart>header{align-items:center;display:flex;justify-content:space-between}.hr-leave-chart>header span{font-size:10px}.hr-leave-scale,.hr-leave-line{display:grid;grid-template-columns:95px repeat(var(--days,31),1fr);min-width:660px}.hr-leave-scale{border-bottom:1px solid #eee;margin-top:10px}.hr-leave-scale>span{font-size:9px}.hr-leave-scale small{color:#777;font-size:7px;text-align:center}.hr-leave-line>strong{font-size:9px;font-weight:500;padding:5px 0}.hr-leave-line>div{display:grid;grid-column:2/-1;grid-template-columns:repeat(31,1fr);position:relative}.hr-leave-line i{align-self:center;background:var(--color);border-radius:4px;grid-column:var(--start)/span var(--span);height:7px}.hr-leave-chart footer{display:flex;gap:16px;margin-top:12px}.hr-leave-chart footer span{align-items:center;display:flex;font-size:8px;gap:5px}.hr-leave-chart footer span:before{background:var(--color);border-radius:50%;content:"";height:7px;width:7px}.hr-payroll-impact h2{border-bottom:1px solid #eee;padding-bottom:10px}.hr-payroll-impact dl{font-size:11px;margin:5px 0 12px}.hr-payroll-impact dl>div{border-bottom:1px solid #eee;display:flex;justify-content:space-between;padding:8px 0}.hr-payroll-impact dd{font-weight:600;margin:0}.hr-payroll-impact .button{font-size:10px;padding:7px 15px}.hr-employee-report{padding:12px 14px}.hr-employee-report h2{margin-bottom:8px}.hr-employee-report table{font-size:10px;min-width:850px}.hr-employee-report th{font-size:9px;padding:6px;text-align:center}.hr-employee-report td{padding:5px 6px;text-align:center}.hr-employee-report th:first-child,.hr-employee-report td:first-child{text-align:left}.hr-rate{border-radius:12px;display:inline-block;min-width:38px;padding:3px 7px}.hr-rate.good{background:#e6f3e8;color:#2f7d43}.hr-rate.warn{background:#fff1dc;color:#a96511}.hr-rate.low{background:#E8F2F3;color:#5F898B}.hr-view-report{border:1px solid #9EC4BF;border-radius:4px;color:#72A099;display:inline-block;padding:4px 15px}

/* HR module �� responsive repair shared by all HR tabs */
@media(max-width:1250px){.hr-report-heading{align-items:flex-start;flex-direction:column}.hr-report-actions{width:100%}.hr-report-summary{grid-template-columns:repeat(2,minmax(0,1fr))}.hr-report-primary,.hr-report-secondary{grid-template-columns:1fr}.hr-report-primary>article,.hr-report-secondary>article{min-height:0}}
@media(max-width:900px){.hr-attendance-page,.hr-page,.hr-report-page .system-main{min-width:0}.hr-tabs{display:flex;max-width:100%;overflow-x:auto;padding:0 6px;scrollbar-width:none}.hr-tabs::-webkit-scrollbar{display:none}.hr-tabs a{flex:0 0 auto;min-width:145px;padding:10px 14px}.hr-primary-grid,.hr-secondary-grid,.hr-shift-layout,.hr-shift-bottom,.lv-workspace,.lv-bottom,.er-grid,.hr-report-primary,.hr-report-secondary{grid-template-columns:1fr}.hr-attendance-board,.hr-week-board,.lv-requests,.er-directory,.hr-hours-card,.hr-employee-report{overflow:hidden}.table-wrap{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}}
@media(max-width:760px){.hr-report-heading h1,.hr-page-header h1,.lv-heading h1,.er-heading h1{font-size:28px}.hr-report-actions{display:grid;grid-template-columns:1fr 1fr}.hr-report-actions form{grid-column:1/-1}.hr-report-actions input[type=month]{width:100%}.hr-report-actions .button{font-size:12px;padding:9px}.hr-report-summary{gap:9px}.hr-report-summary article{gap:10px;min-height:84px;padding:10px}.hr-report-summary i{flex-basis:43px;height:43px;width:43px}.hr-report-summary i svg{height:25px;width:25px}.hr-report-summary strong{font-size:19px}.hr-report-primary>article,.hr-report-secondary>article,.hr-employee-report{padding:12px}.hr-bar-chart{gap:3%;height:190px;padding-left:0;padding-right:0}.hr-bars i{width:11px}.hr-bar-group>strong{font-size:8px;max-width:55px;overflow:hidden;text-overflow:ellipsis}.hr-leave-chart{overflow-x:auto}.hr-report-tabs a{min-width:132px}.hr-report-tabs svg{display:block}.hr-summary-grid,.lv-summary,.er-summary{grid-template-columns:1fr 1fr}.hr-week-toolbar,.lv-heading-actions,.er-heading>div:last-child{max-width:100%}.hr-week-toolbar input,.lv-heading-actions input,.er-heading-search{max-width:100%;min-width:0}.hr-shift-editor,.lv-review,.er-profile{width:100%}.hr-attendance-actions form,.hr-correction form{grid-template-columns:1fr}.hr-page .system-content,.hr-report-page .system-main{padding-left:12px;padding-right:12px}.system-topbar{padding-left:76px}.system-mobile-menu-toggle{left:12px;top:13px}}
@media(max-width:480px){.hr-report-summary,.hr-summary-grid,.lv-summary,.er-summary{grid-template-columns:1fr}.hr-report-actions{grid-template-columns:1fr}.hr-report-actions .button{width:100%}.hr-tabs a{min-width:120px}.hr-summary-grid article,.lv-summary article,.er-summary article{min-height:76px}.hr-report-heading p,.hr-page-header p,.lv-heading p,.er-heading p{font-size:13px}.hr-status-legend{flex-wrap:wrap}.hr-attendance-board>header{gap:10px}.er-filters{grid-template-columns:1fr}.lv-requests header nav{display:grid;grid-template-columns:1fr 1fr}.lv-requests header nav a{min-width:0}.hr-weekday-pills{grid-template-columns:repeat(4,1fr)}}
@media print{.system-mobile-menu-toggle,.sidebar,.system-topbar,.hr-report-actions,.hr-tabs,.hr-view-report{display:none!important}.system-layout{display:block!important}.hr-report-page .system-main{padding:0!important}.hr-report-heading{margin-bottom:10px}.hr-report-summary,.hr-report-primary,.hr-report-secondary{break-inside:avoid}.hr-report-primary,.hr-report-secondary{grid-template-columns:1.4fr 1fr}.hr-employee-report{break-inside:avoid}.panel{box-shadow:none!important}}

/* Employee documents and expiry tracking */
.hr-doc-page h1,.hr-doc-page h2,.hr-doc-page p{margin-top:0}.hr-doc-heading{align-items:center;display:flex;justify-content:space-between;margin-bottom:16px}.hr-doc-heading h1{font-size:40px;line-height:1;margin-bottom:9px}.hr-doc-heading p{color:#777471;margin-bottom:0}.hr-doc-demo{align-items:center;display:flex;justify-content:space-between;margin-bottom:16px;padding:15px 18px}.hr-doc-demo>div{display:flex;gap:10px}.hr-doc-demo>div:first-child{align-items:flex-start;flex-direction:column;gap:2px}.hr-doc-demo span{color:#817E7A;font-size:13px}.hr-doc-demo form{margin:0}.hr-doc-create{margin-bottom:16px;padding:18px}.hr-doc-create[hidden]{display:none}.hr-doc-create header{align-items:center;display:flex;justify-content:space-between}.hr-doc-create header button{background:none;border:0;font-size:25px}.hr-doc-create>div{display:grid;gap:14px;grid-template-columns:repeat(4,minmax(0,1fr))}.hr-doc-create label{display:flex;flex-direction:column;font-size:13px;gap:6px}.hr-doc-create input,.hr-doc-create select,.hr-doc-create textarea{width:100%}.hr-doc-create>label{margin:14px 0}.hr-doc-check{align-items:center!important;flex-direction:row!important}.hr-doc-check input{width:auto}.hr-doc-filters{align-items:end;display:grid;gap:12px;grid-template-columns:1.2fr 1.2fr 1fr 1fr auto auto;margin-bottom:16px;padding:14px 18px}.hr-doc-filters label{display:flex;flex-direction:column;font-size:12px;gap:5px}.hr-doc-filters select{height:43px;padding:8px}.hr-doc-summary{display:grid;gap:16px;grid-template-columns:repeat(4,minmax(0,1fr));margin-bottom:16px}.hr-doc-summary article{align-items:center;display:flex;gap:14px;min-height:88px;padding:14px 18px}.hr-doc-summary i{align-items:center;background:#ECF4F3;border-radius:10px;color:#72A59D;display:flex;font-size:25px;font-style:normal;height:52px;justify-content:center;width:52px}.hr-doc-summary strong{display:block;font-size:25px;line-height:1.1}.hr-doc-summary span{color:#62605D}.hr-doc-summary.green i{background:#eaf7ed;color:#2b924b}.hr-doc-summary.amber i{background:#fff3e2;color:#bd6a00}.hr-doc-summary.red i{background:#F1F8F8;color:#689FA2}.hr-doc-summary.blue i{background:#eaf3ff;color:#3779bd}.hr-doc-workspace{align-items:stretch;display:grid;gap:16px;grid-template-columns:minmax(760px,1.55fr) minmax(390px,.72fr);margin-bottom:16px}.hr-doc-register,.hr-doc-review{padding:0}.hr-doc-register>header{align-items:center;border-bottom:1px solid #E3E7E6;display:flex;justify-content:space-between;padding:18px}.hr-doc-register h2,.hr-doc-review h2,.hr-doc-bottom h2{font-size:23px;margin-bottom:5px}.hr-doc-register header p{color:#817E7A;font-size:13px;margin:0}.hr-doc-register table{font-size:12px;min-width:850px}.hr-doc-register th{background:#FAFDFD;font-size:11px;text-align:center}.hr-doc-register td{text-align:center;vertical-align:middle}.hr-doc-register td:first-child{text-align:left}.hr-doc-register td:nth-child(2) strong,.hr-doc-register td:nth-child(2) small{display:block;text-align:left}.hr-doc-register tr.selected{background:#F6FBFB}.hr-doc-register td>a{border:1px solid #98C4BD;border-radius:6px;color:#699A93;display:inline-block;padding:6px 13px}.hr-doc-person{align-items:center;display:flex;gap:9px}.hr-doc-person>i{align-items:center;background:#E6F1EF;border-radius:50%;color:#6A9992;display:flex;font-style:normal;font-weight:700;height:38px;justify-content:center;min-width:38px}.hr-doc-person>span{display:flex;flex-direction:column}.hr-doc-person small{color:#817E7A;font-size:10px}.hr-doc-badge{border:1px solid;border-radius:6px;display:inline-block;font-size:10px;min-width:85px;padding:5px 8px}.hr-doc-badge.verified{background:#eaf7ed;border-color:#badbc1;color:#287941}.hr-doc-badge.pending,.hr-doc-badge.expiring,.hr-doc-badge.renewal{background:#fff5df;border-color:#e7cc94;color:#9c680e}.hr-doc-badge.expired,.hr-doc-badge.missing{background:#F0F7F8;border-color:#C9DADC;color:#5C8D94}.hr-doc-review{padding:18px}.hr-doc-review>header{align-items:center;border-bottom:1px solid #eee;display:flex;justify-content:space-between;margin-bottom:15px;padding:0 0 14px}.hr-doc-review dl{display:grid;gap:9px;grid-template-columns:1fr 1fr}.hr-doc-review dl>div{display:flex;flex-direction:column}.hr-doc-review dt{color:#817E7A;font-size:11px}.hr-doc-review dd{font-size:13px;margin:2px 0 0}.hr-doc-reminder,.hr-doc-file{align-items:center;border:1px solid #BBD7D2;border-radius:8px;display:flex;gap:10px;margin:15px 0;padding:11px}.hr-doc-reminder>span,.hr-doc-file>span{display:flex;flex:1;flex-direction:column;font-size:12px}.hr-doc-reminder small,.hr-doc-file small{color:#817E7A}.hr-doc-file>a{font-size:11px}.hr-doc-review form label{display:flex;flex-direction:column;font-size:12px;gap:6px}.hr-doc-review form textarea{min-height:76px}.hr-doc-review form>div{display:grid;gap:10px;grid-template-columns:1fr 1fr;margin-top:10px}.hr-doc-review form .button{font-size:11px;padding:10px}.hr-doc-bottom{display:grid;gap:16px;grid-template-columns:1.55fr .72fr}.hr-doc-bottom>article{padding:18px}.hr-doc-bottom header{align-items:center;display:flex;justify-content:space-between}.hr-doc-timeline{display:flex;gap:0;margin-top:20px;overflow-x:auto}.hr-doc-timeline>div{align-items:center;display:grid;flex:1;grid-template-rows:auto 22px auto;min-width:125px;text-align:center}.hr-doc-timeline i{border-top:2px solid #A1C6C0;display:block;position:relative}.hr-doc-timeline i:before{background:#82AEA8;border-radius:50%;content:"";height:10px;left:50%;position:absolute;top:-6px;width:10px}.hr-doc-timeline span{display:flex;flex-direction:column;font-size:10px;padding-top:7px}.hr-doc-checklist p{align-items:center;border-bottom:1px solid #eee;display:flex;gap:10px;margin:0;padding:10px 0}.hr-doc-checklist p span{color:#71A59D;font-weight:700}.hr-doc-checklist a{display:block;margin-top:14px;text-align:right}
@media(max-width:1450px){.hr-doc-workspace,.hr-doc-bottom{grid-template-columns:1fr}.hr-doc-create>div{grid-template-columns:repeat(2,1fr)}}
@media(max-width:900px){.hr-doc-heading{align-items:flex-start;gap:12px}.hr-doc-heading h1{font-size:30px}.hr-doc-demo{align-items:flex-start;flex-direction:column;gap:12px}.hr-doc-filters{grid-template-columns:1fr 1fr}.hr-doc-summary{grid-template-columns:1fr 1fr}.hr-doc-workspace{display:block}.hr-doc-review{margin-top:16px}}
@media(max-width:560px){.hr-doc-heading{flex-direction:column}.hr-doc-heading .button{width:100%}.hr-doc-create>div,.hr-doc-filters,.hr-doc-summary{grid-template-columns:1fr}.hr-doc-filters .button{width:100%}.hr-doc-review dl{grid-template-columns:1fr}.hr-doc-review form>div{grid-template-columns:1fr}.hr-doc-demo>div:last-child{display:grid;width:100%}.hr-doc-timeline>div{min-width:105px}}

/* Employee documents �� approved register composition */
.hr-doc-symbols{height:0;overflow:hidden;position:absolute;width:0}.hr-doc-tabs a{align-items:center;display:flex;gap:8px;justify-content:center}.hr-doc-tabs svg,.hr-doc-heading-actions svg,.hr-doc-filters button svg,.hr-doc-checklist svg{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.7}.hr-doc-tabs svg{height:20px;width:20px}.hr-doc-heading-actions{align-items:center;display:flex;gap:10px}.hr-doc-heading-actions .button{align-items:center;display:inline-flex;gap:7px;justify-content:center}.hr-doc-heading-actions svg,.hr-doc-filters button svg{height:18px;width:18px}.hr-doc-summary i svg{fill:none;height:28px;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.7;width:28px}.hr-doc-register table{min-width:1240px}.hr-doc-register td:nth-child(2),.hr-doc-register td:nth-child(3){text-align:left}.hr-doc-register td:nth-child(3) strong,.hr-doc-register td:nth-child(3) small{display:block}.hr-doc-bottom{grid-template-columns:minmax(0,1.55fr) minmax(320px,.72fr)}.hr-doc-compliance{padding:18px}.hr-doc-compliance .hr-doc-checklist{border-top:1px solid #E7EBEA;display:grid;gap:0;grid-template-columns:1fr 1fr;margin-top:16px;padding-top:8px}.hr-doc-checklist p{align-items:center;border-bottom:1px solid #eee;display:flex;gap:9px;margin:0;padding:10px}.hr-doc-checklist svg{color:#71A59D;flex:0 0 19px;height:19px;width:19px}.hr-doc-bottom .hr-doc-demo{align-items:flex-start;display:flex;flex-direction:column;justify-content:space-between;margin:0;padding:20px}.hr-doc-bottom .hr-doc-demo>div:last-child{display:grid;gap:10px;width:100%}.hr-doc-bottom .hr-doc-demo .button{width:100%}.er-profile h3{align-items:center}.er-section-link{color:#72A098;font-size:11px;font-weight:600;margin-left:auto;white-space:nowrap}
@media(max-width:1450px){.hr-doc-bottom{grid-template-columns:1fr}.hr-doc-compliance .hr-doc-checklist{grid-template-columns:1fr 1fr}}
@media(max-width:760px){.hr-doc-heading-actions{display:grid;grid-template-columns:1fr 1fr;width:100%}.hr-doc-heading-actions .button{width:100%}.hr-doc-tabs{top:58px}.hr-doc-compliance .hr-doc-checklist{grid-template-columns:1fr}.er-section-link{display:block;margin-left:8px}}

/* Employee Records + Documents containment correction */
.er-tabs.hr-sticky-tabs,.hr-doc-tabs.hr-sticky-tabs{background:#fff!important;isolation:isolate;opacity:1!important;z-index:60}.er-heading{align-items:flex-end}.er-heading>div:first-child{min-width:0}.er-heading>div:last-child{flex:0 0 auto}.er-heading>div:last-child .button{align-items:center;box-sizing:border-box;display:inline-flex;height:44px;justify-content:center;line-height:1.1;min-width:154px;padding:10px 16px;white-space:nowrap}.er-heading>div:last-child .button:last-child{min-width:140px}.hr-doc-workspace{grid-template-columns:minmax(0,1fr) 420px}.hr-doc-register{min-width:0;overflow:hidden}.hr-doc-register .table-wrap{box-sizing:border-box;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}.hr-doc-register table{width:1240px}.hr-doc-review{box-sizing:border-box;min-width:0;overflow:hidden;width:100%}.hr-doc-review textarea{box-sizing:border-box;max-width:100%;width:100%}.hr-doc-file{min-width:0}.hr-doc-file>span{min-width:0}.hr-doc-file strong,.hr-doc-file small{overflow-wrap:anywhere}.hr-doc-filters{position:relative;z-index:1}
@media(max-width:1500px){.hr-doc-workspace{grid-template-columns:1fr}.hr-doc-review{margin-top:0}.er-heading{align-items:flex-start;flex-direction:column}.er-heading>div:last-child{display:grid;grid-template-columns:minmax(260px,1fr) auto auto;width:100%}.er-heading>div:last-child form,.er-heading-search{box-sizing:border-box;min-width:0;width:100%}}
@media(max-width:900px){.er-heading>div:last-child{grid-template-columns:1fr 1fr}.er-heading>div:last-child form{grid-column:1/-1}.er-heading>div:last-child .button{min-width:0;width:100%}.hr-doc-register table{width:1180px}}
@media(max-width:560px){.er-heading>div:last-child{grid-template-columns:1fr}.er-heading>div:last-child form{grid-column:auto}.hr-doc-heading-actions{grid-template-columns:1fr}.hr-doc-register table{width:1120px}}

/* Employee Documents approved dashboard composition */
.hr-doc-summary article>span{display:flex;flex-direction:column;min-width:0}.hr-doc-summary article>span>em{color:#62605D;font-size:12px;font-style:normal;line-height:1.2;order:-1}.hr-doc-summary article>span>strong{font-size:24px;margin:3px 0}.hr-doc-summary article>span>strong small{color:#62605D;font-size:11px;font-weight:400}.hr-doc-summary article>span>small{color:#817E7A;font-size:10px}.hr-doc-workspace{align-items:start;grid-template-columns:minmax(0,1fr) 400px}.hr-doc-register{overflow:hidden}.hr-doc-register .table-wrap{max-width:100%;overflow-x:auto}.hr-doc-register table{font-size:11px;min-width:1050px;width:100%}.hr-doc-register th,.hr-doc-register td{box-sizing:border-box;padding-left:8px;padding-right:8px;white-space:nowrap}.hr-doc-register td:nth-child(3){white-space:normal}.hr-doc-review{position:relative}.hr-doc-bottom{grid-template-columns:minmax(0,1fr) 400px}.hr-doc-compliance{min-width:0}.hr-doc-compliance .hr-doc-timeline{padding-bottom:4px}.hr-doc-bottom .hr-doc-demo{min-height:210px}.hr-doc-filters{grid-template-columns:1.05fr 1.05fr .9fr .9fr auto auto}.hr-doc-filters .button{min-width:100px;white-space:nowrap}
@media(max-width:1550px){.hr-doc-workspace,.hr-doc-bottom{grid-template-columns:1fr}.hr-doc-register table{min-width:1120px}.hr-doc-review{margin-top:0}.hr-doc-bottom .hr-doc-demo{min-height:0}}
@media(min-width:1551px){.hr-doc-workspace{grid-template-columns:minmax(0,1fr) 400px}.hr-doc-bottom{grid-template-columns:minmax(0,1fr) 400px}.hr-doc-review{height:100%}.hr-doc-register table{min-width:1040px}.hr-doc-register th,.hr-doc-register td{font-size:10px;padding:10px 6px}.hr-doc-register td>a{padding:6px 9px}}
@media(max-width:900px){.hr-doc-filters{grid-template-columns:1fr 1fr}.hr-doc-summary article>span>strong{font-size:21px}}

/* Approved Employee Records and Documents desktop proportions */
.hr-doc-row{cursor:pointer}.hr-doc-row:hover{background:#F9FDFD}.hr-doc-register table{min-width:780px;table-layout:auto}.hr-doc-register th,.hr-doc-register td{font-size:9px;padding:9px 5px}.hr-doc-workspace{grid-template-columns:minmax(0,1.7fr) minmax(300px,.72fr)}.hr-doc-bottom{grid-template-columns:minmax(0,1.7fr) minmax(300px,.72fr)}.er-grid{grid-template-columns:minmax(0,1.45fr) minmax(370px,1fr)}.er-profile>section{grid-template-columns:138px minmax(0,1fr)}.er-profile dl{grid-template-columns:repeat(2,minmax(0,1fr))}.er-profile dl>div{grid-template-columns:minmax(74px,1fr) auto}.er-directory table{min-width:620px}.er-heading{align-items:center;flex-direction:row}.er-heading>div:last-child{display:flex;flex:0 0 auto;width:auto}.er-heading>div:last-child form{width:auto}
@media(max-width:1100px){.hr-doc-workspace,.hr-doc-bottom,.er-grid{grid-template-columns:1fr}.hr-doc-review{margin-top:0}.er-directory,.er-profile{min-height:0}.er-heading{align-items:flex-start;flex-direction:column}.er-heading>div:last-child{display:grid;grid-template-columns:minmax(230px,1fr) auto auto;width:100%}.er-heading>div:last-child form{width:100%}}
@media(min-width:1101px){.hr-doc-workspace{grid-template-columns:minmax(0,1.7fr) minmax(300px,.72fr)}.hr-doc-bottom{grid-template-columns:minmax(0,1.7fr) minmax(300px,.72fr)}.hr-doc-review{height:100%}.er-grid{grid-template-columns:minmax(0,1.45fr) minmax(370px,1fr)}.er-heading{align-items:center;flex-direction:row}.er-heading>div:last-child{display:flex;width:auto}}

/* Approved employee-document review and compliance layout */
.hr-doc-review svg,.hr-doc-expiry-card svg,.hr-doc-check-card svg,.hr-doc-demo svg{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.7}.hr-doc-review>.hr-doc-file{margin-bottom:10px}.hr-doc-review .hr-doc-file>svg,.hr-doc-review .hr-doc-reminder>svg{color:#73A69F;flex:0 0 22px;height:22px;width:22px}.hr-doc-review .hr-doc-file .button{align-items:center;display:inline-flex;font-size:10px;gap:5px;min-width:auto;padding:7px 10px}.hr-doc-review .hr-doc-file .button svg{height:15px;width:15px}.hr-doc-review .hr-doc-reminder{border:0;margin:0 0 14px;padding:8px 2px}.hr-doc-review .hr-doc-reminder small{font-size:10px}.hr-doc-switch{background:#D7D4D1;border-radius:20px;display:block;flex:0 0 34px;height:18px;position:relative}.hr-doc-switch:after{background:#fff;border-radius:50%;box-shadow:0 1px 3px #0003;content:"";height:14px;left:2px;position:absolute;top:2px;width:14px}.hr-doc-switch.on{background:#8AB4AD}.hr-doc-switch.on:after{left:18px}.hr-doc-review form>div .button{align-items:center;display:flex;gap:6px;justify-content:center}.hr-doc-review form>div .button svg{height:16px;width:16px}
.hr-doc-bottom{align-items:start}.hr-doc-lower-pair{display:grid;gap:12px;grid-template-columns:1.1fr .9fr;min-width:0}.hr-doc-expiry-card,.hr-doc-check-card{padding:14px}.hr-doc-expiry-card h2,.hr-doc-check-card h2{font-size:15px;margin:0}.hr-doc-expiry-card h2 small{color:#817E7A;font-size:10px;font-weight:400}.hr-doc-expiry-stages{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:14px}.hr-doc-expiry-stages>div{align-items:center;border-right:1px solid #E7ECEB;display:flex;flex-direction:column;min-width:0;padding:0 8px;text-align:center}.hr-doc-expiry-stages>div:last-child{border-right:0}.hr-doc-expiry-stages i{align-items:center;border-radius:50%;display:flex;height:28px;justify-content:center;margin-bottom:7px;width:28px}.hr-doc-expiry-stages svg{height:16px;width:16px}.hr-doc-expiry-stages strong{font-size:10px;line-height:1.15;min-height:24px}.hr-doc-expiry-stages span{font-size:9px;margin:5px 0}.hr-doc-expiry-stages b{font-size:20px;font-weight:500}.hr-doc-expiry-stages small{color:#817E7A;font-size:8px}.hr-doc-expiry-stages .amber{color:#b86d08}.hr-doc-expiry-stages .amber i{background:#fff1dc}.hr-doc-expiry-stages .orange{color:#b37a24}.hr-doc-expiry-stages .orange i{background:#fff1dc}.hr-doc-expiry-stages .blue{color:#3e73b5}.hr-doc-expiry-stages .blue i{background:#eaf2fd}.hr-doc-expiry-stages .green{color:#3e8355}.hr-doc-expiry-stages .green i{background:#e9f5ec}.hr-doc-check-card>div{margin-top:10px}.hr-doc-check-card p{align-items:center;border-bottom:1px solid #E7ECEB;display:grid;font-size:9px;gap:6px;grid-template-columns:16px 1fr auto;margin:0;padding:5px 0}.hr-doc-check-card p svg{height:14px;width:14px}.hr-doc-check-card p.complete svg{color:#398153}.hr-doc-check-card p.attention svg{color:#c17a16}.hr-doc-check-card p.missing svg{color:#6DA1A1}.hr-doc-check-card p b{color:#7D7A76;font-weight:500}.hr-doc-check-card footer{align-items:center;display:flex;font-size:10px;justify-content:space-between;padding-top:9px}.hr-doc-check-card footer strong{color:#73A69F;font-size:18px}.hr-doc-bottom .hr-doc-demo svg{height:16px;width:16px}.hr-doc-bottom .hr-doc-demo .button{align-items:center;display:flex;gap:6px;justify-content:center}
@media(max-width:1100px){.hr-doc-lower-pair{grid-template-columns:1fr 1fr}}@media(max-width:700px){.hr-doc-lower-pair{grid-template-columns:1fr}.hr-doc-expiry-stages{grid-template-columns:1fr 1fr;row-gap:14px}.hr-doc-expiry-stages>div:nth-child(2){border-right:0}}
@media(max-width:760px){.er-heading>div:last-child{grid-template-columns:1fr 1fr}.er-heading>div:last-child form{grid-column:1/-1}.hr-doc-register table{min-width:780px}}

/* HR to payroll adjustments */
.hr-adjustment-page{padding-bottom:48px}.hr-adjustment-heading{align-items:flex-end;display:flex;gap:24px;justify-content:space-between;margin-bottom:20px}.hr-adjustment-heading h1{font-size:42px;line-height:1.08;margin:0 0 8px}.hr-adjustment-heading p,.hr-adjustment-table-card header p{color:#777471;margin:0}.hr-adjustment-heading-actions{align-items:flex-end;display:flex;gap:10px}.hr-adjustment-heading-actions form{align-items:flex-end;display:flex;gap:8px;margin:0}.hr-adjustment-heading-actions label{display:grid;gap:6px}.hr-adjustment-heading-actions label span{color:#74716E;font-size:12px}.hr-adjustment-heading-actions input{height:48px;min-width:180px}.hr-adjustment-heading-actions .button{height:48px;white-space:nowrap}.hr-adjustment-tabs{display:grid;grid-template-columns:repeat(5,1fr);margin-bottom:22px;overflow:hidden;padding:9px;position:sticky;top:0;z-index:20}.hr-adjustment-tabs a{border-radius:10px;color:#504E4B;font-weight:600;padding:18px 12px;text-align:center}.hr-adjustment-tabs a:hover{background:#F4F8F7;color:#729F96}.hr-adjustment-tabs a.active{background:#A5C3BD;color:#fff;box-shadow:0 8px 18px rgba(118, 163, 154,.16)}.hr-adjustment-summary{display:grid;gap:16px;grid-template-columns:repeat(4,1fr);margin-bottom:22px}.hr-adjustment-summary article{align-items:center;background:#fff;border:1px solid #E1DEDC;border-radius:14px;display:flex;gap:16px;min-height:125px;padding:20px;box-shadow:0 10px 25px rgba(47, 54, 52,.04)}.hr-adjustment-summary i{align-items:center;border-radius:12px;display:flex;flex:0 0 56px;height:56px;justify-content:center}.hr-adjustment-summary svg{fill:none;height:29px;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.7;width:29px}.hr-adjustment-summary i.allowance{background:#eaf7ed;color:#278044}.hr-adjustment-summary i.late{background:#fff3e3;color:#b96a0b}.hr-adjustment-summary i.leave{background:#edf4fc;color:#3977b8}.hr-adjustment-summary i.net{background:#F0F7F6;color:#72A198}.hr-adjustment-summary article>div{display:grid;gap:3px;min-width:0}.hr-adjustment-summary span{color:#6D6A67;font-size:13px}.hr-adjustment-summary strong{font-size:24px;line-height:1.2;white-space:nowrap}.hr-adjustment-summary small{color:#918E8A;font-size:11px}.hr-adjustment-workspace{align-items:start;display:grid;gap:20px;grid-template-columns:minmax(0,1fr) 360px}.hr-adjustment-table-card{min-width:0;overflow:hidden;padding:0}.hr-adjustment-table-card>header{align-items:flex-start;display:flex;gap:20px;justify-content:space-between;padding:24px}.hr-adjustment-table-card h2{font-size:25px;margin:0 0 6px}.hr-adjustment-table-card>header>span{color:#8A8683;font-size:13px;white-space:nowrap}.hr-adjustment-table{border-collapse:collapse;min-width:980px;width:100%}.hr-adjustment-table th{background:#F8FBFA;color:#6F6C69;font-size:12px;font-weight:600;padding:15px 12px;text-align:center}.hr-adjustment-table th:first-child,.hr-adjustment-table td:first-child{text-align:left}.hr-adjustment-table td{border-top:1px solid #EBE8E6;padding:15px 12px;text-align:center;vertical-align:middle}.hr-adjustment-table tr.selected td{background:#F8FDFC}.hr-adjustment-table td>small{color:#8E8B87;display:block;font-size:11px;margin-top:2px}.hr-adjustment-person{align-items:center;display:flex;gap:10px}.hr-adjustment-person>i{align-items:center;background:#E5F0EE;border-radius:50%;color:#6C9C92;display:flex;flex:0 0 42px;font-size:14px;font-style:normal;font-weight:700;height:42px;justify-content:center}.hr-adjustment-person>span{display:grid;gap:2px}.hr-adjustment-person strong{white-space:nowrap}.hr-adjustment-person small{color:#8C8985;font-size:11px}.positive{color:#278044!important}.negative{color:#649497!important}.hr-adjustment-review{border:1px solid #E3DEDA;border-radius:9px;display:inline-flex;font-size:11px;font-weight:700;justify-content:center;min-width:86px;padding:8px 10px}.hr-adjustment-review.pending{background:#fff7e8;color:#a96810}.hr-adjustment-review.approved{background:#eaf7ed;color:#278044}.hr-adjustment-review.excluded{background:#F5F6F6;color:#76726F}.hr-adjustment-review.applied{background:#edf4fc;color:#3977b8}.hr-adjustment-detail{padding:22px}.hr-adjustment-detail>header{align-items:center;border-bottom:1px solid #E9E6E3;display:flex;justify-content:space-between;margin-bottom:17px;padding-bottom:17px}.hr-adjustment-detail>header em{border-radius:99px;font-size:11px;font-style:normal;font-weight:700;padding:7px 10px}.hr-adjustment-detail>header em.pending{background:#fff3dd;color:#a4660a}.hr-adjustment-detail>header em.approved{background:#eaf7ed;color:#278044}.hr-adjustment-detail>header em.excluded{background:#F3F1EF;color:#75726E}.hr-adjustment-detail>header em.applied{background:#edf4fc;color:#3977b8}.hr-adjustment-detail section{border-bottom:1px solid #EAECEC;margin-bottom:15px;padding-bottom:12px}.hr-adjustment-detail section h3{font-size:14px;margin:0 0 10px}.hr-adjustment-detail section p{align-items:center;display:flex;font-size:12px;justify-content:space-between;margin:0;padding:6px 0}.hr-adjustment-detail section p span{color:#777470}.hr-adjustment-detail section.calculation{background:#F6FAF9;border:1px solid #CFE2DE;border-radius:11px;padding:14px}.hr-adjustment-detail section.calculation p.total{border-top:1px solid #C8DBD7;font-size:14px;margin-top:6px;padding-top:12px}.hr-adjustment-detail form{display:grid;gap:12px}.hr-adjustment-detail form label{display:grid;gap:7px}.hr-adjustment-detail form label span{font-size:12px}.hr-adjustment-detail form textarea{min-height:78px}.hr-adjustment-detail form>div{display:grid;gap:9px;grid-template-columns:1fr 1.35fr}.hr-adjustment-detail .compact{margin:0}.hr-adjustment-note{background:#F3F9F7;border-left:4px solid #A4C4BD;color:#76726E;font-size:12px;margin:20px 0 0;padding:14px 16px}.hr-adjustment-table .empty{text-align:center}.hr-adjustment-detail .empty-state{padding:80px 20px;text-align:center}.hr-adjustment-detail .empty-state p{color:#817E7A}
.hr-adjustment-samples{align-items:center;display:flex;gap:10px;margin-bottom:20px;padding:14px 18px}.hr-adjustment-samples>div{display:grid;flex:1;gap:3px}.hr-adjustment-samples>div span{color:#827E7A;font-size:12px}.hr-adjustment-samples form{margin:0}.hr-adjustment-samples .button{min-height:42px}.button.danger-outline{background:#fff;border:1px solid #74A5AA;color:#609296}
.hr-adjustment-tabs a{align-items:center;display:flex;gap:9px;justify-content:center}.hr-adjustment-tabs a svg{fill:none;flex:0 0 20px;height:20px;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.7;width:20px}.hr-adjustment-title{align-items:center;display:flex;gap:13px}.hr-adjustment-title>i{align-items:center;background:#ECF4F2;border-radius:11px;color:#72A098;display:flex;flex:0 0 46px;height:46px;justify-content:center}.hr-adjustment-title>i svg{fill:none;height:24px;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.7;width:24px}.hr-adjustment-title>span{display:block}.hr-adjustment-count{background:#F5F9F8;border-radius:99px;color:#817C77!important;padding:7px 11px}.hr-adjustment-table-card .table-wrap{max-width:100%;overflow-x:auto}.hr-adjustment-table{min-width:900px}.hr-adjustment-table th,.hr-adjustment-table td{white-space:nowrap}
@media(max-width:1450px){.hr-adjustment-heading{align-items:flex-start;flex-direction:column}.hr-adjustment-heading-actions{width:100%}.hr-adjustment-workspace{grid-template-columns:1fr}.hr-adjustment-detail{max-width:none}.hr-adjustment-summary{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){.hr-adjustment-page{padding-left:12px;padding-right:12px}.hr-adjustment-heading h1{font-size:29px}.hr-adjustment-heading-actions{display:grid;grid-template-columns:1fr 1fr}.hr-adjustment-heading-actions form:first-child{grid-column:1/-1}.hr-adjustment-heading-actions form:first-child label{flex:1}.hr-adjustment-heading-actions input{min-width:0;width:100%}.hr-adjustment-heading-actions .button{width:100%}.hr-adjustment-tabs{display:flex;overflow-x:auto;padding:7px}.hr-adjustment-tabs a{flex:0 0 auto;min-width:138px;padding:13px}.hr-adjustment-summary{gap:9px}.hr-adjustment-summary article{gap:10px;min-height:92px;padding:12px}.hr-adjustment-summary i{flex-basis:42px;height:42px}.hr-adjustment-summary svg{height:23px;width:23px}.hr-adjustment-summary strong{font-size:17px}.hr-adjustment-table-card>header{padding:16px}.hr-adjustment-detail{padding:16px}.hr-adjustment-samples{align-items:stretch;flex-direction:column}.hr-adjustment-samples form,.hr-adjustment-samples .button{width:100%}}
@media(max-width:480px){.hr-adjustment-summary{grid-template-columns:1fr}.hr-adjustment-heading-actions{grid-template-columns:1fr}.hr-adjustment-heading-actions form{grid-column:1/-1}.hr-adjustment-detail form>div{grid-template-columns:1fr}}

/* HR mobile containment �� keep wide data inside its own card, never the page */
.hr-report-page,
.hr-report-page .system-main,
.hr-report-primary,
.hr-report-secondary,
.hr-report-primary>article,
.hr-report-secondary>article,
.hr-employee-report,
.hr-hours-card,
.hr-leave-chart{box-sizing:border-box;max-width:100%;min-width:0}
.hr-report-page{overflow-x:hidden}
.hr-hours-card .table-wrap,
.hr-employee-report .table-wrap,
.hr-leave-chart .hr-leave-scroll{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}

@media(max-width:760px){
  .hr-report-page .system-main{width:100%}
  .hr-report-heading{gap:14px;margin-bottom:12px}
  .hr-report-actions{gap:8px}
  .hr-report-tabs{margin-left:0;margin-right:0;position:sticky;top:58px;width:100%}
  .hr-report-tabs a{min-height:50px}
  .hr-report-primary,.hr-report-secondary{gap:10px;margin-bottom:10px;width:100%}
  .hr-attendance-chart>header,.hr-leave-chart>header{align-items:flex-start;gap:10px}
  .hr-attendance-chart>header>div{flex-wrap:wrap;gap:8px 12px}
  .hr-hours-card .table-wrap,.hr-employee-report .table-wrap{overflow-x:auto}
  .hr-hours-card table{min-width:620px}
  .hr-employee-report table{min-width:880px}
  .hr-leave-scale,.hr-leave-line{min-width:720px}
}

/* HR Reports approved dashboard composition */
.hr-report-actions label{display:grid;gap:5px}.hr-report-actions label span{color:#7D7A76;font-size:11px}.hr-report-summary article.leave i{background:#eaf2fd;color:#3977b8}.hr-attendance-chart header>div:first-child{display:block}.hr-attendance-chart header p,.hr-employee-report header p{color:#837F7B;font-size:11px;margin:4px 0 0}.hr-report-primary{grid-template-columns:minmax(0,1.6fr) minmax(330px,.7fr)}.hr-leave-donut-card{padding:20px}.hr-leave-donut-card>header{align-items:center;display:flex;justify-content:space-between}.hr-leave-donut-card h2{margin:0}.hr-leave-donut-card header>span{color:#827E7A;font-size:12px}.hr-leave-donut-wrap{align-items:center;display:grid;gap:22px;grid-template-columns:150px minmax(0,1fr);margin-top:22px}.hr-leave-donut{align-items:center;background:conic-gradient(#A2C1BB 0 var(--annual),#73a0d4 var(--annual) var(--medical),#f0aa38 var(--medical) var(--personal),#95C0C7 var(--personal) 100%);border-radius:50%;display:flex;height:150px;justify-content:center;width:150px}.hr-leave-donut:before{background:#fff;border-radius:50%;content:"";height:82px;position:absolute;width:82px}.hr-leave-donut>span{display:grid;position:relative;text-align:center}.hr-leave-donut strong{font-size:23px}.hr-leave-donut small{color:#827E7A;font-size:10px}.hr-leave-donut dl{margin:0}.hr-leave-donut dl div{align-items:center;border-bottom:1px solid #E9ECEC;display:flex;font-size:11px;justify-content:space-between;padding:8px 0}.hr-leave-donut dt{align-items:center;display:flex;gap:7px}.hr-leave-donut dt i{border-radius:50%;height:9px;width:9px}.hr-leave-donut i.annual{background:#A2C1BB}.hr-leave-donut i.medical{background:#73a0d4}.hr-leave-donut i.personal{background:#f0aa38}.hr-leave-donut i.unpaid{background:#95C0C7}.hr-report-workspace{align-items:start;display:grid;gap:16px;grid-template-columns:minmax(0,1fr) 280px;margin-bottom:16px}.hr-employee-report{margin:0;min-width:0;padding:0}.hr-employee-report>header{align-items:flex-start;display:flex;justify-content:space-between;padding:20px}.hr-employee-report>header h2{margin:0}.hr-employee-report>header>span{color:#85817D;font-size:11px}.hr-employee-report table{min-width:1040px}.hr-report-filters{padding:20px}.hr-report-filters h2{font-size:19px;margin:0 0 17px}.hr-report-filters form{display:grid;gap:12px}.hr-report-filters label{display:grid;font-size:11px;gap:6px}.hr-report-filters select{height:42px}.hr-report-filters .button{width:100%}.hr-report-bottom{display:grid;gap:16px;grid-template-columns:1fr 1fr}.hr-compliance-card,.hr-review-card{padding:20px}.hr-compliance-card header{align-items:center;display:flex;justify-content:space-between}.hr-compliance-card h2,.hr-review-card h2{font-size:19px;margin:0}.hr-compliance-card header span{color:#72A49D;font-size:12px;font-weight:700}.hr-compliance-progress{background:#EEF0F0;border-radius:20px;height:9px;margin:18px 0}.hr-compliance-progress i{background:#A2C1BB;border-radius:20px;display:block;height:100%;width:var(--progress)}.hr-compliance-card>div:last-child{display:grid;gap:9px;grid-template-columns:repeat(3,1fr)}.hr-compliance-card>div:last-child span{color:#777470;font-size:11px}.hr-compliance-card>div:last-child b{color:#302E2B;display:block;font-size:20px}.hr-compliance-card>div:last-child a{color:#72A49D;font-size:11px;grid-column:1/-1;margin-top:5px}.hr-review-card ul{list-style:none;margin:14px 0 0;padding:0}.hr-review-card li{align-items:center;border-bottom:1px solid #E9ECEC;display:grid;gap:10px;grid-template-columns:34px 1fr auto;padding:10px 0}.hr-review-card li>i{align-items:center;background:#fff1df;border-radius:9px;display:flex;height:32px;justify-content:center;width:32px}.hr-review-card li>i:after{color:#b56e12;content:"!";font-weight:800}.hr-review-card li>i.document{background:#F0F7F6}.hr-review-card li>i.document:after{color:#72A299;content:"��"}.hr-review-card li>i.payroll{background:#eaf2fd}.hr-review-card li>i.payroll:after{color:#3977b8;content:"$"}.hr-review-card li span{display:grid}.hr-review-card li strong{font-size:11px}.hr-review-card li small{color:#87837F;font-size:9px}.hr-review-card li a{color:#72A49D;font-size:10px}.hr-report-page .hr-report-secondary{display:none}
@media(max-width:1300px){.hr-report-primary,.hr-report-workspace{grid-template-columns:1fr}.hr-report-filters form{grid-template-columns:repeat(3,1fr)}.hr-report-filters h2{grid-column:1/-1}}
@media(max-width:760px){.hr-report-bottom{grid-template-columns:1fr}.hr-leave-donut-wrap{grid-template-columns:1fr}.hr-leave-donut{margin:auto}.hr-report-filters form{grid-template-columns:1fr}.hr-compliance-card>div:last-child{grid-template-columns:1fr 1fr}.hr-report-heading .hr-report-actions{grid-template-columns:1fr 1fr}.hr-report-actions label input{width:100%}}

/* HR Reports screenshot-accurate refinements */
.hr-chart-area{display:grid;grid-template-columns:42px minmax(0,1fr);height:230px;margin-top:12px}.hr-chart-axis{color:#5F5C59;display:flex;flex-direction:column;font-size:9px;justify-content:space-between;padding:0 5px 28px 0;text-align:right}.hr-chart-area .hr-bar-chart{background:repeating-linear-gradient(to bottom,#EAECEC 0,#EAECEC 1px,transparent 1px,transparent 25%);height:100%;margin:0}.hr-chart-area .hr-bars{height:190px}.hr-chart-area .hr-bars i{position:relative}.hr-chart-area .hr-bars i b{color:#514E4B;font-size:9px;font-style:normal;left:50%;position:absolute;top:-16px;transform:translateX(-50%)}.hr-chart-area .hr-bars i.present{background:#6db47b}.hr-chart-area .hr-bars i.late{background:#edae37}.hr-chart-area .hr-bars i.absent{background:#84B7B6}.hr-attendance-chart>header>div:last-child span:before{border-radius:1px}.hr-attendance-chart>header>div:last-child .present:before{background:#6db47b}.hr-attendance-chart>header>div:last-child .late:before{background:#edae37}.hr-attendance-chart>header>div:last-child .absent:before{background:#84B7B6}.hr-leave-donut{background:conic-gradient(#6db47b 0 var(--annual),#6e9fd3 var(--annual) var(--medical),#f0b244 var(--medical) var(--personal),#93BEB8 var(--personal) 100%)}.hr-leave-donut i.annual{background:#6db47b}.hr-leave-donut i.medical{background:#6e9fd3}.hr-leave-donut i.personal{background:#f0b244}.hr-leave-donut i.unpaid{background:#93BEB8}.hr-leave-donut-card{min-height:300px}.hr-leave-donut-wrap{grid-template-columns:190px minmax(0,1fr)}.hr-leave-donut{height:170px;margin:auto;width:170px}.hr-leave-donut:before{height:92px;width:92px}.hr-employee-report>header{padding:13px 16px}.hr-employee-report>header h2{font-size:18px}.hr-employee-report th,.hr-employee-report td{font-size:10px;padding:8px 10px;text-align:center}.hr-employee-report th:first-child,.hr-employee-report td:first-child{text-align:left}.hr-employee-report .hr-report-person i{display:none}.hr-employee-report .hr-view-report{align-items:center;display:inline-flex;height:26px;justify-content:center;padding:0;width:38px}.hr-employee-report .hr-view-report svg{height:15px;width:15px}.hr-employee-report .table-wrap footer{color:#8A8682;font-size:9px;padding:9px 14px}.hr-report-filters{padding:16px}.hr-report-filters h2{font-size:20px}.hr-report-filters form{grid-template-columns:1fr 1fr}.hr-report-filters label{font-size:10px}.hr-report-filters select{height:38px}.hr-report-filters .button{align-items:center;display:flex;gap:7px;height:38px;justify-content:center}.hr-report-filters .button svg{height:15px;width:15px}.hr-report-bottom{grid-template-columns:.9fr 1.1fr}.hr-compliance-card h2,.hr-review-card h2{font-size:17px}.hr-compliance-rows{margin-top:13px}.hr-compliance-rows>div{align-items:center;display:grid;gap:10px;grid-template-columns:23px 175px minmax(0,1fr) 38px;padding:6px 0}.hr-compliance-rows>div>i{align-items:center;background:#57ae6c;border-radius:50%;color:#fff;display:flex;font-size:10px;font-style:normal;height:18px;justify-content:center;width:18px}.hr-compliance-rows>div.attention>i{background:#fff;border:2px solid #eaae37;color:#ca7d0b}.hr-compliance-rows span{font-size:10px}.hr-compliance-rows b{background:#F0EEEB;border-radius:10px;height:5px;overflow:hidden}.hr-compliance-rows b em{background:#59ad6a;display:block;height:100%;width:var(--progress)}.hr-compliance-rows .attention b em{background:#eca930}.hr-compliance-rows strong{font-size:10px;text-align:right}.hr-review-card li{grid-template-columns:25px minmax(0,1fr) 125px 72px;padding:8px 0}.hr-review-card li>i{background:transparent!important;border:2px solid #83B5BD;border-radius:50%;height:18px;width:18px}.hr-review-card li>i:after{color:#71A8AE;font-size:9px}.hr-review-card li>i.document{border-color:#e5a631}.hr-review-card li>i.document:after{color:#c77d0b;content:"!"}.hr-review-card li>i.payroll{border-color:#6d9fd2}.hr-review-card li>i.payroll:after{color:#4d82ba;content:"i"}.hr-review-card li strong,.hr-review-card li time{font-size:9px;font-weight:500}.hr-review-card li time{color:#6E6A67}.hr-review-card li>em{border-radius:4px;font-size:8px;font-style:normal;padding:4px 7px;text-align:center}.hr-review-card li>em.high{background:#EDF6F7;color:#6DA0A5}.hr-review-card li>em.medium{background:#fff1da;color:#b67410}.hr-review-card li>em.low{background:#e9f2fc;color:#447db8}.hr-review-all{color:#73A69F;display:inline-block;font-size:10px;margin-top:8px}
@media(max-width:1100px){.hr-report-bottom{grid-template-columns:1fr}.hr-compliance-rows>div{grid-template-columns:23px 150px minmax(0,1fr) 38px}}
@media(max-width:760px){.hr-chart-area{height:210px}.hr-chart-area .hr-bars{height:170px}.hr-report-filters form{grid-template-columns:1fr}.hr-compliance-rows>div{grid-template-columns:23px 115px minmax(0,1fr) 34px}.hr-review-card li{grid-template-columns:24px 1fr auto}.hr-review-card li time{display:none}}

/* Payroll Adjustments Review �� approved HR Reports visual language */
.hr-adjustment-page{padding:20px 26px 26px}.hr-adjustment-heading{align-items:flex-end;margin-bottom:20px}.hr-adjustment-heading h1{font-family:inherit;font-size:30px;font-weight:700;letter-spacing:-.02em}.hr-adjustment-heading p{font-size:12px}.hr-adjustment-heading-actions{gap:10px}.hr-adjustment-heading-actions input,.hr-adjustment-heading-actions .button{border-radius:8px;height:42px;min-height:42px}.hr-adjustment-heading-actions input{background:#fff;border-color:#D7D5D3;min-width:220px}.hr-adjustment-heading-actions label span{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}.hr-adjustment-heading-actions .button{font-size:11px;padding:8px 16px}.hr-adjustment-tabs{grid-template-columns:repeat(7,1fr);margin-bottom:14px;padding:0 10px;position:static}.hr-adjustment-tabs a{border-bottom:2px solid transparent;border-radius:0;font-size:11px;font-weight:400;min-height:55px;padding:8px 4px}.hr-adjustment-tabs a.active{background:transparent;border-bottom-color:#8CBAB3;box-shadow:none;color:#7FB1AA}.hr-adjustment-tabs a:hover{background:transparent}.hr-adjustment-tabs a svg{height:18px;width:18px}.hr-adjustment-summary{gap:16px;margin-bottom:14px}.hr-adjustment-summary article{border-radius:9px;gap:14px;min-height:92px;padding:13px 18px}.hr-adjustment-summary i{border-radius:9px;flex-basis:62px;height:62px}.hr-adjustment-summary i.allowance{background:#EEF5F5;color:#79ABA4}.hr-adjustment-summary i.late{background:#f0e9f3;color:#82558e}.hr-adjustment-summary i.leave{background:#e8f2df;color:#588d3f}.hr-adjustment-summary i.net{background:#fff0da;color:#c9851d}.hr-adjustment-summary svg{height:34px;width:34px}.hr-adjustment-summary span{font-size:11px}.hr-adjustment-summary strong{font-family:inherit;font-size:25px;font-weight:500}.hr-adjustment-summary small{font-size:9px}.hr-adjustment-workspace{gap:16px;grid-template-columns:minmax(0,2.45fr) minmax(310px,1fr);margin-bottom:14px}.hr-adjustment-table-card>header{padding:13px 16px}.hr-adjustment-title>i{display:none}.hr-adjustment-table-card h2{font-size:17px;margin-bottom:2px}.hr-adjustment-table-card header p{font-size:10px}.hr-adjustment-count{background:#fff1dd;color:#c9851d!important;font-size:9px;padding:5px 8px}.hr-adjustment-table{min-width:760px}.hr-adjustment-table th,.hr-adjustment-table td{font-size:9px;padding:7px 8px}.hr-adjustment-table th{background:#FAFAF9;font-weight:500}.hr-adjustment-person>i{display:none}.hr-adjustment-person small{font-size:8px}.hr-adjustment-review{border-radius:5px;font-size:8px;min-width:68px;padding:5px 7px}.hr-adjustment-detail{padding:14px 16px}.hr-adjustment-detail>header{margin-bottom:10px;padding-bottom:9px}.hr-adjustment-detail>header .hr-adjustment-person>i{display:flex;flex-basis:36px;height:36px}.hr-adjustment-detail>header em{font-size:8px;padding:5px 7px}.hr-adjustment-detail section{margin-bottom:9px;padding-bottom:8px}.hr-adjustment-detail section h3{font-size:11px;margin-bottom:5px}.hr-adjustment-detail section p{font-size:9px;padding:3px 0}.hr-adjustment-detail section.calculation{border-radius:5px;padding:9px}.hr-adjustment-detail section.calculation p.total{font-size:10px;padding-top:8px}.hr-adjustment-detail form{gap:8px}.hr-adjustment-detail form label{gap:4px}.hr-adjustment-detail form label span{font-size:9px}.hr-adjustment-detail form textarea{min-height:56px;padding:7px}.hr-adjustment-detail form .button{font-size:9px;min-height:34px;padding:6px}.hr-adjustment-bottom{display:grid;gap:16px;grid-template-columns:.9fr 1.1fr;margin-bottom:14px}.hr-adjustment-bottom article{padding:14px 18px}.hr-adjustment-bottom h2{font-size:17px;margin:0 0 8px}.hr-adjustment-policy p{align-items:center;border-bottom:1px solid #ECEBE9;display:grid;font-size:9px;gap:10px;grid-template-columns:minmax(150px,1fr) auto minmax(150px,1fr);margin:0;padding:6px 0}.hr-adjustment-policy p:last-child{border-bottom:0}.hr-adjustment-policy span{color:#4D4B49}.hr-adjustment-policy strong{font-size:9px}.hr-adjustment-policy small{color:#878481}.hr-adjustment-review-list>a{align-items:center;border-bottom:1px solid #ECEBE9;color:inherit;display:grid;gap:10px;grid-template-columns:20px minmax(0,1fr) 95px 55px;padding:6px 0}.hr-adjustment-review-list>a:last-child{border-bottom:0}.hr-adjustment-review-list>a>i{align-items:center;border:2px solid #83B5BD;border-radius:50%;color:#71A8AE;display:flex;font-size:8px;font-style:normal;height:18px;justify-content:center;width:18px}.hr-adjustment-review-list>a span{display:grid}.hr-adjustment-review-list>a strong{font-size:9px}.hr-adjustment-review-list>a small{color:#87837F;font-size:8px}.hr-adjustment-review-list>a>b{font-size:9px;text-align:right}.hr-adjustment-review-list>a>em{background:#EDF6F7;border-radius:4px;color:#6DA0A5;font-size:8px;font-style:normal;padding:4px 7px;text-align:center}.hr-adjustment-samples{align-items:center;display:flex;gap:10px;margin:0;padding:10px 14px}.hr-adjustment-samples summary{cursor:pointer;font-size:11px;font-weight:600;margin-right:auto}.hr-adjustment-samples:not([open])>div,.hr-adjustment-samples:not([open])>form{display:none}.hr-adjustment-samples[open]{flex-wrap:wrap}.hr-adjustment-samples[open] summary{flex-basis:100%}.hr-adjustment-samples>div span{font-size:9px}.hr-adjustment-samples .button{font-size:9px;min-height:34px;padding:6px 10px}
@media(max-width:1300px){.hr-adjustment-workspace{grid-template-columns:1fr}.hr-adjustment-bottom{grid-template-columns:1fr}}
@media(max-width:900px){.hr-adjustment-tabs{display:flex;overflow-x:auto}.hr-adjustment-tabs a{flex:0 0 auto;min-width:130px}.hr-adjustment-heading{align-items:flex-start;flex-direction:column}.hr-adjustment-heading-actions{width:100%}.hr-adjustment-summary{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1301px){.system-layout:has(.hr-adjustment-page){grid-template-columns:240px minmax(0,1fr)}}
@media(max-width:760px){.hr-adjustment-page{padding:14px 12px 20px}.hr-adjustment-heading h1{font-size:28px}.hr-adjustment-heading-actions{display:grid;grid-template-columns:1fr 1fr}.hr-adjustment-heading-actions form:first-child{grid-column:1/-1}.hr-adjustment-heading-actions form:first-child label{flex:1}.hr-adjustment-heading-actions input,.hr-adjustment-heading-actions .button{width:100%}.hr-adjustment-summary{gap:9px}.hr-adjustment-summary article{padding:11px}.hr-adjustment-summary strong{font-size:19px}.hr-adjustment-policy p{grid-template-columns:1fr auto}.hr-adjustment-policy p small{grid-column:1/-1}.hr-adjustment-review-list>a{grid-template-columns:20px minmax(0,1fr) 50px}.hr-adjustment-review-list>a>b{display:none}.hr-adjustment-samples{align-items:stretch;flex-direction:column}.hr-adjustment-samples summary{width:100%}}
@media(max-width:480px){.hr-adjustment-summary{grid-template-columns:1fr}.hr-adjustment-heading-actions{grid-template-columns:1fr}.hr-adjustment-heading-actions form{grid-column:1/-1}.hr-adjustment-detail form>div{grid-template-columns:1fr}}

/* HR Reports �� approved visual proportions and removable demonstration state */
.hr-report-demo{align-items:center;display:flex;gap:18px;justify-content:space-between;margin-bottom:14px;min-height:58px;padding:10px 14px}.hr-report-demo>div{display:grid;gap:2px}.hr-report-demo strong{font-size:12px}.hr-report-demo span{color:#807C78;font-size:10px}.hr-report-demo.active{background:#fff7e9;border-color:#edcf94}.hr-report-demo .button{min-height:36px;white-space:nowrap}
.hr-report-primary{gap:14px;grid-template-columns:minmax(0,1.42fr) minmax(320px,1fr);margin-bottom:14px}.hr-attendance-chart,.hr-leave-donut-card{height:276px;min-height:276px;overflow:hidden;padding:15px 18px}.hr-attendance-chart h2,.hr-leave-donut-card h2{font-size:17px}.hr-chart-area{height:215px;margin-top:7px}.hr-chart-area .hr-bars{height:174px}.hr-leave-donut-card{padding:15px 18px}.hr-leave-donut-wrap{gap:18px;grid-template-columns:180px minmax(0,1fr);margin-top:8px}.hr-leave-donut{height:158px;width:158px}.hr-leave-donut:before{height:86px;width:86px}.hr-report-workspace{gap:14px;grid-template-columns:minmax(0,2.2fr) minmax(260px,1fr);margin-bottom:14px}.hr-employee-report>header{padding:11px 14px}.hr-employee-report table{min-width:920px}.hr-employee-report th,.hr-employee-report td{padding:7px 8px}.hr-report-filters{padding:14px}.hr-report-filters h2{font-size:18px;margin-bottom:12px}.hr-report-filters form{gap:9px}.hr-report-filters select{height:36px}.hr-report-filters .button{height:36px}.hr-report-bottom{gap:14px;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr)}.hr-compliance-card,.hr-review-card{padding:14px 18px}.hr-compliance-rows{margin-top:8px}.hr-compliance-rows>div{padding:4px 0}.hr-review-card ul{margin-top:7px}.hr-review-card li{padding:6px 0}
@media(max-width:1300px){.hr-report-primary,.hr-report-workspace{grid-template-columns:1fr}.hr-attendance-chart,.hr-leave-donut-card{height:auto;min-height:276px}}
@media(max-width:760px){.hr-report-demo{align-items:stretch;flex-direction:column}.hr-report-demo .button{width:100%}.hr-report-primary,.hr-report-workspace,.hr-report-bottom{grid-template-columns:1fr}.hr-attendance-chart{height:auto}.hr-leave-donut-wrap{grid-template-columns:1fr}}

/* HR Reports �� final approved compact desktop composition */
.hr-report-user{align-items:center;color:#403E3B;display:flex;font-size:11px;gap:12px;grid-column:1/-1;justify-self:end}.hr-report-user i{background:#CFCCC8;display:block;height:16px;width:1px}.hr-report-user a{color:inherit}.hr-compliance-card .hr-compliance-rows{display:block}
@media(min-width:1301px){
  .system-layout:has(.hr-report-page){grid-template-columns:240px minmax(0,1fr)}
  .hr-report-page .system-main{padding:20px 26px 24px}
  .hr-report-heading{align-items:start;margin-bottom:14px}
  .hr-report-heading h1{font-size:30px;margin-bottom:5px}
  .hr-report-heading p{font-size:12px}
  .hr-report-actions{display:grid;gap:8px 16px;grid-template-columns:220px 154px}
  .hr-report-actions label>span{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}
  .hr-report-actions input[type=month],.hr-report-actions .button{height:42px;width:100%}
  .hr-report-tabs{margin-bottom:13px;padding:0 10px}
  .hr-report-tabs a{font-size:12px;min-height:54px;padding:8px 6px}
  .hr-report-tabs svg{height:18px;width:18px}
  .hr-report-summary{gap:16px;margin-bottom:14px}
  .hr-report-summary article{border-radius:9px;gap:14px;min-height:92px;padding:13px 18px}
  .hr-report-summary i{border-radius:9px;flex-basis:62px;height:62px;width:62px}
  .hr-report-summary i svg{height:34px;width:34px}
  .hr-report-summary strong{font-size:25px}
  .hr-report-primary{gap:16px;grid-template-columns:minmax(0,1.4fr) minmax(360px,.82fr);margin-bottom:14px}
  .hr-attendance-chart,.hr-leave-donut-card{height:210px;min-height:210px;padding:12px 18px}
  .hr-attendance-chart h2,.hr-leave-donut-card h2{font-size:15px}
  .hr-chart-area{height:165px;margin-top:5px}
  .hr-chart-area .hr-bars{height:132px}
  .hr-bar-chart{padding-top:14px}
  .hr-bars i{width:18px}
  .hr-leave-donut-wrap{gap:28px;grid-template-columns:175px minmax(0,1fr);margin-top:4px}
  .hr-leave-donut{height:145px;width:145px}
  .hr-leave-donut:before{height:76px;width:76px}
  .hr-leave-donut dl div{padding:6px 0}
  .hr-report-workspace{gap:16px;grid-template-columns:minmax(0,2.45fr) minmax(310px,1fr);margin-bottom:14px}
  .hr-employee-report>header{padding:9px 14px}
  .hr-employee-report>header h2,.hr-report-filters h2{font-size:17px}
  .hr-employee-report table{min-width:850px}
  .hr-employee-report th,.hr-employee-report td{font-size:9px;line-height:1.2;padding:5px 8px}
  .hr-employee-report .table-wrap footer{padding:7px 14px}
  .hr-report-filters{padding:12px 14px}
  .hr-report-filters h2{margin-bottom:9px}
  .hr-report-filters form{gap:7px;grid-template-columns:1fr 1fr}
  .hr-report-filters select,.hr-report-filters .button{height:34px}
  .hr-report-bottom{gap:16px;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
  .hr-compliance-card,.hr-review-card{padding:11px 18px}
  .hr-compliance-card h2,.hr-review-card h2{font-size:15px}
  .hr-compliance-rows{margin-top:6px}
  .hr-compliance-rows>div{grid-template-columns:20px 165px minmax(0,1fr) 34px;padding:3px 0}
  .hr-review-card ul{margin-top:5px}
  .hr-review-card li{grid-template-columns:22px minmax(0,1fr) 125px 62px;padding:5px 0}
}

/* HR & Attendance �� consistent section menu typography */
.hr-tabs a,
.hr-adjustment-tabs a {
  font-size: 14px !important;
  line-height: 1.3;
}

/* Payroll uses the same menu surface, spacing, icons, and active state as Employee Records. */
.hr-adjustment-tabs {
  background: #fff !important;
  box-shadow: 0 7px 18px rgba(51, 59, 58, .08);
  grid-template-columns: repeat(7, minmax(0, 1fr));
  margin-bottom: 16px;
  overflow-x: auto;
  padding: 0 12px;
  position: sticky;
  top: 68px;
  z-index: 60;
}

.hr-adjustment-tabs a {
  border-bottom: 3px solid transparent;
  border-radius: 0;
  color: var(--muted);
  font-weight: 750;
  gap: 9px;
  min-height: 58px;
  padding: 0 15px;
}

.hr-adjustment-tabs a:hover {
  background: rgba(62, 92, 88, .09);
  color: var(--oro-rose-dark);
}

.hr-adjustment-tabs a.active {
  background: transparent;
  border-bottom-color: var(--oro-rose);
  box-shadow: none;
  color: var(--oro-rose-dark);
}

.hr-adjustment-tabs a svg {
  flex: 0 0 20px;
  height: 20px;
  width: 20px;
}

@media (max-width: 900px) {
  .hr-tabs a,
  .hr-adjustment-tabs a {
    font-size: 13px !important;
  }
}

@media (max-width: 480px) {
  .hr-tabs a,
  .hr-adjustment-tabs a {
    font-size: 12px !important;
  }
}

/* Reports and Payroll Adjustments �� exact HR & Attendance navigation geometry. */
.hr-report-tabs,
.hr-adjustment-tabs {
  background: rgba(255, 255, 255, .98) !important;
  box-shadow: var(--oro-shadow) !important;
  display: grid !important;
  grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
  margin-bottom: 20px !important;
  overflow-x: auto;
  padding: 0 14px !important;
  position: sticky;
  top: 68px;
  z-index: 35;
}

.hr-report-tabs a,
.hr-adjustment-tabs a {
  border-bottom: 3px solid transparent !important;
  border-radius: 0 !important;
  color: var(--muted);
  font-size: 14px !important;
  font-weight: 750 !important;
  gap: 10px !important;
  min-height: 66px !important;
  padding: 0 15px !important;
}

.hr-report-tabs a svg,
.hr-adjustment-tabs a svg {
  flex: 0 0 22px;
  height: 22px !important;
  width: 22px !important;
}

.hr-report-tabs a:hover,
.hr-adjustment-tabs a:hover {
  background: rgba(62, 92, 88, .09) !important;
  color: var(--oro-rose-dark);
}

.hr-report-tabs a.active,
.hr-adjustment-tabs a.active {
  background: transparent !important;
  border-bottom-color: var(--oro-rose) !important;
  box-shadow: none !important;
  color: var(--oro-rose-dark) !important;
}

@media (max-width: 900px) {
  .hr-report-tabs,
  .hr-adjustment-tabs {
    display: flex !important;
    margin-bottom: 14px !important;
  }

  .hr-report-tabs a,
  .hr-adjustment-tabs a {
    flex: 0 0 auto;
    font-size: 13px !important;
    min-width: 145px;
    padding: 10px 14px !important;
  }
}

@media (max-width: 480px) {
  .hr-report-tabs a,
  .hr-adjustment-tabs a {
    font-size: 12px !important;
    min-width: 120px;
  }
}

/* Historical financial opening summaries */
.historical-summary-layout {
  align-items: start;
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(0, 1.7fr) minmax(300px, .8fr);
  margin-bottom: 18px;
}

.historical-summary-editor,
.historical-summary-preview,
.historical-summary-history {
  padding: 22px;
}

.historical-summary-editor > header {
  align-items: flex-start;
  border-bottom: 1px solid #ECEAE7;
  display: flex;
  gap: 18px;
  justify-content: space-between;
  margin-bottom: 20px;
  padding-bottom: 17px;
}

.historical-summary-editor h2,
.historical-summary-preview h2,
.historical-summary-history h2 {
  font-size: 20px;
  margin: 0 0 6px;
}

.historical-summary-editor header p,
.historical-summary-preview > p {
  color: #7D7A76;
  font-size: 12px;
  margin: 0;
}

.historical-status {
  border-radius: 999px;
  display: inline-flex;
  font-size: 10px;
  font-weight: 700;
  padding: 6px 10px;
  white-space: nowrap;
}

.historical-status.new,
.historical-status.draft { background: #fff2dc; color: #a4650a; }
.historical-status.locked { background: #eaf7ed; color: #287a42; }
.historical-status.reversed { background: #F3F1EF; color: #74706D; }

.historical-summary-form,
.historical-reversal-form {
  display: grid;
  gap: 17px;
}

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

.historical-text-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(220px, .7fr) minmax(0, 1.3fr);
}

.historical-summary-form label,
.historical-reversal-form label {
  display: grid;
  gap: 7px;
}

.historical-summary-form label > span,
.historical-reversal-form label > span {
  color: #5F5C59;
  font-size: 12px;
  font-weight: 600;
}

.historical-summary-form label small {
  color: #8E8B87;
  font-size: 10px;
  line-height: 1.4;
}

.historical-summary-form input,
.historical-summary-form textarea,
.historical-reversal-form textarea {
  background: #fff;
  border: 1px solid #D9D6D3;
  border-radius: 8px;
  min-width: 0;
  padding: 11px 12px;
  width: 100%;
}

.historical-summary-form .button,
.historical-summary-preview form .button {
  min-height: 42px;
}

.historical-summary-preview > div {
  align-items: center;
  border-bottom: 1px solid #EEECE9;
  display: flex;
  font-size: 12px;
  justify-content: space-between;
  padding: 12px 0;
}

.historical-summary-preview > div span { color: #74716E; }
.historical-summary-preview > div strong { font-size: 13px; }
.historical-summary-preview > div.total { border-top: 1px solid #D2D7D6; margin-top: 4px; }
.historical-summary-preview > div.total strong { color: #6D9C94; font-size: 15px; }
.historical-exclusion-note { color: #817E7A; display: block; font-size: 10px; line-height: 1.55; margin: 14px 0; }
.historical-summary-preview form { display: grid; gap: 10px; margin-top: 14px; }

.historical-locked-note {
  background: #eef8f0;
  border: 1px solid #cce5d2;
  border-radius: 8px;
  color: #336c43;
  display: grid;
  gap: 4px;
  padding: 14px 16px;
}

.historical-locked-note span { font-size: 11px; }
.historical-summary-history table small { color: #8B8884; display: block; font-size: 9px; margin-top: 3px; }
.historical-summary-history th,
.historical-summary-history td { font-size: 11px; }

@media (max-width: 1150px) {
  .historical-summary-layout { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .historical-summary-editor,
  .historical-summary-preview,
  .historical-summary-history { padding: 16px; }
  .historical-summary-editor > header { align-items: flex-start; flex-direction: column; }
  .historical-amount-grid,
  .historical-text-grid { grid-template-columns: 1fr; }
  .accounting-tabs { overflow-x: auto; }
  .accounting-tab { flex: 0 0 auto; white-space: nowrap; }
}

.report-historical-note {
  background: #F5F9F8;
  border: 1px solid #D3E0DD;
  border-radius: 8px;
  color: #615E5A;
  display: grid;
  gap: 3px;
  margin: 14px 0;
  padding: 11px 14px;
}

.report-historical-note strong { color: #6D9C94; font-size: 11px; }
.report-historical-note span { font-size: 9px; line-height: 1.45; }
/* Service Packages */
.service-package-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(320px,.85fr);gap:16px}.service-package-card{display:flex;justify-content:space-between;gap:16px;border:1px solid var(--border,#E2E7E6);border-radius:10px;padding:16px;margin-top:12px;background:#fff}.service-package-card h3{margin:0 0 6px}.service-package-price{font-size:20px;color:#779F98;font-weight:700;white-space:nowrap}.service-package-price small{display:block;color:#837D77;font-size:12px;font-weight:400;margin-top:4px}.package-redemption-panel{margin-top:16px}.status-pill{display:inline-block;border-radius:999px;padding:4px 9px;font-size:11px;background:#EBF1F1;color:#65857E}.status-pill.published{background:#e7f5e9;color:#347448}.status-pill.draft{background:#fff2d9;color:#996a1d}@media(max-width:900px){.service-package-grid{grid-template-columns:1fr}}@media(max-width:620px){.service-package-card{display:block}.service-package-price{margin-top:10px}.form-grid{grid-template-columns:1fr}}

/* Dashboard Intelligence (Phase 2) */
.metric-card{position:relative;display:flex;flex-direction:column;gap:2px}
.metric-label{order:-2;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--oro-ink-faint)}
.metric-card strong{order:-1;font-family:var(--font-display);font-size:28px;font-variant-numeric:tabular-nums}
.metric-unit{font-size:12px;color:var(--oro-ink-faint)}
.metric-delta{display:inline-flex;align-items:center;gap:4px;margin-top:6px;font-size:12px;font-weight:700;background:none;border-radius:0;padding:0;width:fit-content}
.metric-delta-up{color:var(--oro-sage)}
.metric-delta-down{color:var(--oro-accent-deep)}
.metric-delta-flat{color:var(--oro-ink-faint)}
.metric-delta-up::before{content:"\25B2";font-size:9px}
.metric-delta-down::before{content:"\25BC";font-size:9px}
.metric-delta-flat::before{content:"\2014";font-size:10px}
.metric-sparkline{display:block;width:100%;height:28px;margin-top:10px}
.metric-sparkline polyline{fill:none;stroke:var(--oro-sage);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.metric-card:nth-child(2) .metric-sparkline polyline{stroke:var(--oro-accent-deep)}

.load-bars{display:grid;gap:14px;margin-top:6px}
.load-bar-row{display:grid;grid-template-columns:140px 1fr auto;align-items:center;gap:12px}
.load-bar-name{display:flex;flex-direction:column;font-size:13px;font-weight:700;color:var(--oro-ink)}
.load-bar-name small{font-weight:400;color:#837D77;font-size:11px}
.load-bar-track{background:var(--oro-blush);border-radius:999px;height:8px;overflow:hidden}
.load-bar-fill{height:100%;border-radius:999px}
.load-bar-low{background:#A9C4BE}
.load-bar-mid{background:var(--oro-rose)}
.load-bar-high{background:#8A1F1F}
.load-bar-meta{font-size:11px;color:#837D77;white-space:nowrap}

.feed-list{display:grid;gap:12px;margin-top:6px}
.feed-item{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--oro-line)}
.feed-item:last-child{border-bottom:none;padding-bottom:0}
.feed-time{font-size:12px;font-weight:800;color:var(--oro-rose);white-space:nowrap}
.feed-body{display:flex;flex-direction:column;gap:2px;min-width:0}
.feed-body strong{color:var(--oro-ink);font-size:13px}
.feed-body span{color:#837D77;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.status-pill-good{background:#e7f5e9;color:#347448}
.status-pill-info{background:#E7F1EE;color:#2A4340}
.status-pill-upcoming{background:#EBF1F1;color:#65857E}
.status-pill-alert{background:#fff2d9;color:#996a1d}
.status-pill-muted{background:#F1F1EF;color:#837D77}

@media (max-width: 760px) {
  .load-bar-row{grid-template-columns:1fr;gap:6px}
  .load-bar-meta{justify-self:flex-start}
  .feed-item{grid-template-columns:1fr;gap:4px}
}

/* Phase 3: Drag-and-drop appointment calendar */
.calendar-booking.is-movable{cursor:grab}
.calendar-booking.is-movable:active{cursor:grabbing}
.calendar-booking.is-dragging{opacity:.35}
.calendar-booking.is-pending{opacity:.6;pointer-events:none}
.calendar-booking.is-movable:focus-visible{outline:2px solid var(--oro-rose);outline-offset:2px}
.calendar-slot.is-drop-target{background-color:rgba(62,92,88,.16);outline:2px dashed #3E5C58;outline-offset:-2px;border-radius:8px}
.calendar-slot.is-drop-blocked{background-color:rgba(138,31,31,.10);outline:2px dashed #8A1F1F;outline-offset:-2px;border-radius:8px}

.reschedule-toast-region{position:fixed;right:18px;bottom:18px;display:flex;flex-direction:column;gap:10px;z-index:60;max-width:320px}
.reschedule-toast{background:var(--oro-charcoal);color:var(--oro-white);border-radius:8px;padding:12px 14px;display:flex;align-items:center;justify-content:space-between;gap:12px;box-shadow:var(--oro-shadow);font-size:13px;opacity:1;transform:translateY(0);transition:opacity .25s ease,transform .25s ease}
.reschedule-toast.is-leaving{opacity:0;transform:translateY(6px)}
.reschedule-toast-undo{background:transparent;border:1px solid rgba(255,255,255,.4);color:var(--oro-white);border-radius:6px;padding:4px 10px;font-size:12px;font-weight:700;cursor:pointer;white-space:nowrap}
.reschedule-toast-undo:hover{background:rgba(255,255,255,.12)}

@media (max-width: 760px) {
  .reschedule-toast-region{left:12px;right:12px;max-width:none}
}

/* Phase 4: Command palette */
.sidebar-command-trigger{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;margin:14px 0 4px;padding:9px 12px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:8px;color:rgba(255,255,255,.72);font-size:12.5px;cursor:pointer;text-align:left}
.sidebar-command-trigger:hover,.sidebar-command-trigger:focus-visible{background:rgba(255,255,255,.12);color:#fff;outline:none}
.sidebar-command-trigger kbd{display:inline-flex;align-items:center;gap:2px;background:rgba(255,255,255,.14);border-radius:4px;padding:2px 6px;font-size:11px;font-family:inherit}

.command-palette-backdrop{position:fixed;inset:0;background:rgba(29,28,27,.5);z-index:200;display:flex;align-items:flex-start;justify-content:center;padding-top:12vh}
.command-palette-backdrop[hidden]{display:none}
.command-palette{width:min(560px,92vw);background:var(--oro-white);border-radius:10px;box-shadow:0 30px 70px rgba(29,28,27,.35);overflow:hidden;display:flex;flex-direction:column;max-height:70vh}
.command-palette-input-row{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--oro-line);color:rgba(35,33,31,.5)}
.command-palette-input-row input{flex:1;border:0;outline:none;font-size:15px;color:var(--oro-ink);background:transparent}
.command-palette-input-row kbd{font-size:11px;color:rgba(35,33,31,.45);border:1px solid var(--oro-line);border-radius:4px;padding:2px 6px}
.command-palette-results{overflow-y:auto;padding:6px}
.command-palette-row{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;padding:10px 12px;border:0;background:transparent;border-radius:8px;cursor:pointer;text-align:left;font-size:13.5px;color:var(--oro-ink)}
.command-palette-row.is-active,.command-palette-row:hover{background:var(--oro-blush)}
.command-palette-row-group{font-size:11px;color:rgba(35,33,31,.5)}
.command-palette-empty{padding:24px;text-align:center;color:rgba(35,33,31,.5);font-size:13px;margin:0}
body.command-palette-open{overflow:hidden}

/* Phase 4: Accessibility & motion */
:focus-visible{outline:2px solid var(--oro-rose);outline-offset:2px}
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
}

/* Phase 4: Per-user accent color (falls back to brand pine when unset) */
:root{--oro-user-accent: var(--oro-rose);}
.sidebar-command-trigger kbd,.command-palette-row.is-active{--accent-in-use: var(--oro-user-accent);}

.sidebar-accent-form{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:8px;padding:8px 12px;border:1px solid rgba(255,255,255,.1);border-radius:8px}
.sidebar-accent-label{display:flex;align-items:center;gap:8px;font-size:12px;color:rgba(255,255,255,.62)}
.sidebar-accent-label input[type=color]{width:24px;height:24px;padding:0;border:1px solid rgba(255,255,255,.3);border-radius:5px;background:transparent;cursor:pointer}
.sidebar-accent-reset{background:transparent;border:1px solid rgba(255,255,255,.24);color:rgba(255,255,255,.6);border-radius:6px;padding:3px 8px;font-size:11px;cursor:pointer}
.sidebar-accent-reset:hover{color:#fff;border-color:rgba(255,255,255,.4)}

/* ============================================================
   Phase 5: Full design-system re-skin (typography, sidebar,
   cards, buttons, pills, calendar) �� matches the approved
   redesign concept mockup.
   ============================================================ */

/* ---------- Sidebar: light sunken panel, pill nav ---------- */
.sidebar {
  background: var(--oro-sunken);
  border-right: 1px solid var(--oro-line);
  color: var(--oro-ink);
  padding: 26px 18px;
}

.sidebar-inner {
  gap: 28px;
}

.sidebar-nav {
  gap: 22px;
}

.sidebar .brand,
.sidebar-brand {
  background: var(--oro-white);
  border: 1px solid var(--oro-line);
}

.sidebar-brand-crown {
  color: var(--oro-accent-deep);
}

.sidebar-label {
  color: var(--oro-ink-faint);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  padding: 8px 10px 4px;
}

.sidebar a {
  border-radius: 10px;
  color: var(--oro-ink-soft);
  font-size: 13.6px;
  font-weight: 600;
  min-height: auto;
  padding: 9px 10px;
  transition: background .15s ease, color .15s ease;
}

.sidebar a.active,
.sidebar a:hover {
  background: var(--oro-rose);
  color: var(--oro-white);
  transform: none;
}

.sidebar a.is-muted {
  color: var(--oro-ink-faint);
}

.sidebar a small {
  background: var(--oro-accent-tint);
  color: var(--oro-accent-deep);
}

.sidebar-footer {
  border-top: 1px solid var(--oro-line);
  color: var(--oro-ink-faint);
}

.sidebar-footer strong {
  color: var(--oro-ink);
}

.sidebar-logout {
  color: var(--oro-ink) !important;
}

.sidebar-command-trigger {
  background: var(--oro-white);
  border: 1px solid var(--oro-line);
  color: var(--oro-ink-soft);
}

.sidebar-command-trigger:hover,
.sidebar-command-trigger:focus-visible {
  background: var(--oro-white);
  color: var(--oro-ink);
  box-shadow: var(--oro-shadow);
}

.sidebar-accent-form {
  border: 1px solid var(--oro-line);
}

.sidebar-accent-label {
  color: var(--oro-ink-soft);
}

.sidebar-accent-label input[type=color] {
  border: 1px solid var(--oro-line-strong);
}

.sidebar-accent-reset {
  border: 1px solid var(--oro-line-strong);
  color: var(--oro-ink-soft);
}

.sidebar-accent-reset:hover {
  color: var(--oro-ink);
  border-color: var(--oro-ink-faint);
}

/* ---------- Topbar ---------- */
.system-topbar {
  background: rgba(250, 250, 249, 0.88);
  backdrop-filter: blur(6px);
  padding-top: 22px;
  padding-bottom: 22px;
}

.system-topbar strong {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  color: var(--oro-ink);
}

.system-topbar span {
  font-size: 13px;
  color: var(--oro-ink-faint);
}

.system-topbar span a {
  color: var(--oro-ink-soft);
  font-weight: 700;
}

.page-heading h1 {
  font-size: 30px;
  font-family: var(--font-display);
}

/* ---------- Buttons ---------- */
.button,
button {
  border-radius: var(--oro-radius-sm);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  padding: 9px 16px;
  box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--oro-rose) 55%, transparent);
  transition: transform .12s ease, box-shadow .12s ease;
}

.button:hover,
button:hover {
  transform: translateY(-1px);
}

.button.secondary {
  box-shadow: none;
  border-color: var(--oro-line-strong);
}

.button:focus-visible,
button:focus-visible {
  outline: 2px solid var(--oro-rose);
  outline-offset: 2px;
}

/* ---------- Cards / panels ---------- */
.service-card,
.promo,
.contact-card,
.metric-card,
.panel,
.summary-strip article,
.login-card,
.service-package-card,
.lv-summary article,
.hr-leave-summary article {
  border-radius: var(--oro-radius);
  border-color: var(--oro-line);
  box-shadow: var(--oro-shadow);
  transition: box-shadow .15s ease;
}

.metric-card:hover,
.panel:hover {
  box-shadow: var(--oro-shadow-lg);
}

.metric-card strong,
.summary-strip strong {
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
}

.panel h2,
.panel-head h3 {
  font-family: var(--font-display);
}

/* ---------- Pills / status badges ---------- */
.status-pill,
.metric-delta,
.pill {
  font-weight: 700;
}

/* ---------- Notice / login ---------- */
.notice {
  border-radius: var(--oro-radius-sm);
}

.login-card {
  border-radius: var(--oro-radius);
  box-shadow: var(--oro-shadow-lg);
}

/* ---------- Appointment calendar cards ---------- */
.calendar-booking {
  border-radius: var(--oro-radius-sm);
  box-shadow: var(--oro-shadow);
  transition: transform .14s ease, box-shadow .14s ease;
}

.calendar-booking:hover {
  transform: translateY(-1px);
  box-shadow: var(--oro-shadow-lg);
}

.calendar-slot.is-drop-target {
  border-radius: var(--oro-radius-sm);
}

/* ---------- Command palette / accent picker: match new type ---------- */
.command-palette-row-group,
.command-palette-empty {
  font-family: var(--font-body);
}

.command-palette {
  border-radius: var(--oro-radius);
  box-shadow: var(--oro-shadow-lg);
}

/* ============================================================
   Phase 6: Universal theme �� tabs, tables, forms, steppers,
   donuts/bars, badges. Applies the same tokens site-wide so
   every page (not just Dashboard/Appointments) matches the
   approved mockup without per-page markup rewrites.
   ============================================================ */

/* ---------- Tabs ---------- */
.tabs, .tab-nav, nav.tabs {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--oro-line);
  margin-bottom: 16px;
  background: none;
  border-radius: 0;
  padding: 0;
}

.tabs .tab, .tab {
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--oro-ink-faint);
  padding: 9px 13px;
  border-radius: 0;
  border-bottom: 2px solid transparent;
  background: none;
  box-shadow: none;
  transition: color .15s ease, border-color .15s ease;
}

.tabs .tab:hover, .tab:hover {
  color: var(--oro-ink);
  transform: none;
}

.tabs .tab.active, .tabs .tab[aria-selected="true"], .tab.active, .tab.is-active {
  color: var(--oro-accent-deep);
  border-color: var(--oro-rose);
  background: none;
}

/* ---------- Tables ---------- */
.table-wrap, .table-card {
  border-radius: var(--oro-radius);
  border: 1px solid var(--oro-line);
  box-shadow: var(--oro-shadow);
  overflow: hidden;
}

table {
  font-family: var(--font-body);
  border-collapse: collapse;
  width: 100%;
}

table th {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--oro-ink-faint);
  border-bottom: 1px solid var(--oro-line);
  background: var(--oro-sunken);
  padding: 10px 12px;
  text-align: left;
}

table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--oro-line);
  color: var(--oro-ink-soft);
  font-size: 13px;
}

table tr:last-child td {
  border-bottom: none;
}

table tr:hover td {
  background: var(--oro-sunken);
}

/* ---------- Forms / fields ---------- */
.field label, label {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  color: var(--oro-ink-soft);
  letter-spacing: .02em;
}

.field input, .field select, .field textarea,
input[type="text"], input[type="number"], input[type="email"],
input[type="password"], input[type="date"], input[type="time"],
input[type="search"], input[type="tel"], select, textarea {
  border-radius: 9px;
  border: 1px solid var(--oro-line-strong);
  font-family: var(--font-body);
  font-size: 13.5px;
  background: var(--oro-white);
  color: var(--oro-ink);
  transition: border-color .15s ease, box-shadow .15s ease;
}

.field input:focus, .field select:focus, .field textarea:focus,
input:focus, select:focus, textarea:focus {
  border-color: var(--oro-rose);
  outline: none;
  box-shadow: 0 0 0 3px var(--oro-accent-tint);
}

/* ---------- Status pills / badges ---------- */
.status-pill, .badge, .pill {
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .04em;
  padding: 3px 9px;
  border-radius: 999px;
}

/* ---------- Stepper (appointment lifecycle, payroll close) ---------- */
.stepper {
  display: flex;
  gap: 6px;
  margin-bottom: 16px;
}

.stepper .step {
  flex: 1;
  text-align: center;
  padding: 9px 6px;
  border-radius: 9px;
  background: var(--oro-sunken);
  font-size: 11px;
  font-weight: 700;
  color: var(--oro-ink-faint);
  font-family: var(--font-body);
}

.stepper .step.done, .stepper .step.is-done {
  background: var(--oro-sage-tint);
  color: var(--oro-sage);
}

.stepper .step.now, .stepper .step.is-current {
  background: var(--oro-rose);
  color: #fff;
}

/* ---------- Donut / bar charts (accounting, partners, HR reports) ---------- */
.donut {
  border-radius: 50%;
  box-shadow: none;
}

.bar-track {
  background: var(--oro-sunken);
  border-radius: 6px;
  overflow: hidden;
}

.bar-fill {
  background: var(--oro-rose);
  border-radius: 6px;
}

/* ---------- Cards used as list items (packages, staff, products) ---------- */
.card, .mini-card {
  border: 1px solid var(--oro-line);
  border-radius: var(--oro-radius);
  background: var(--oro-white);
  box-shadow: var(--oro-shadow);
}

/* ---------- Metric-card fallback: label/value ordering when the page
   doesn't wrap its label span in .metric-label (payroll, others) ---------- */
.metric-card > span:first-of-type {
  order: -2;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--oro-ink-faint);
}

.metric-card > small {
  order: 2;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--oro-ink-faint);
}

/* ============================================================
   Phase 7: Universal tab navigation �� every "*-tabs" container
   site-wide (accounting, inventory, HR, partners, payroll,
   purchases, reports, settings, service-packages) reskinned to
   match the mockup's underline-tab pattern in one place.
   ============================================================ */
[class*="tabs"] {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  border-bottom: 1px solid var(--oro-line);
  background: none;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  margin-bottom: 16px;
}

[class*="tabs"] > a,
[class*="tabs"] > button,
[class*="tabs"] > span {
  font-family: var(--font-body) !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  color: var(--oro-ink-faint) !important;
  padding: 9px 13px !important;
  border: none !important;
  border-radius: 0 !important;
  border-bottom: 2px solid transparent !important;
  background: none !important;
  box-shadow: none !important;
  min-height: auto;
  transition: color .15s ease, border-color .15s ease;
}

[class*="tabs"] > a:hover,
[class*="tabs"] > button:hover {
  color: var(--oro-ink) !important;
  background: none !important;
  transform: none;
}

[class*="tabs"] > a.active,
[class*="tabs"] > a.is-active,
[class*="tabs"] > button.active,
[class*="tabs"] > button.is-active,
.accounting-tab.is-active,
.inventory-tab.is-active,
.partners-tab.is-active,
.purchase-tab.is-active,
.settings-tab.is-active {
  color: var(--oro-accent-deep) !important;
  border: none !important;
  border-bottom: 2px solid var(--oro-rose) !important;
  background: none !important;
  box-shadow: none !important;
  font-weight: 800;
}

/* ============================================================
   Phase 8: Appointment calendar �� restyle the existing (already
   fully functional) drag-and-drop grid to match the mockup's
   card look: white bordered cards with a colored left accent
   and hover lift, sunken header row, no markup changes.
   ============================================================ */
.calendar-corner,
.calendar-professional,
.calendar-time {
  background: var(--oro-sunken) !important;
}

.calendar-professional > span {
  background: var(--oro-accent-tint) !important;
  color: var(--oro-accent-deep) !important;
}

.calendar-professional strong {
  font-family: var(--font-display);
  font-weight: 500;
}

.calendar-slot {
  background: var(--oro-white);
}

.calendar-booking {
  background: var(--oro-white) !important;
  border: 1px solid var(--oro-line-strong);
  border-left: 4px solid var(--oro-rose);
  border-radius: var(--oro-radius-sm);
  box-shadow: var(--oro-shadow);
  transition: transform .14s ease, box-shadow .14s ease;
}

.calendar-booking:hover {
  transform: translateY(-1px);
  box-shadow: var(--oro-shadow-lg) !important;
}

.calendar-booking strong {
  font-size: 12.5px;
  font-weight: 800;
  color: var(--oro-ink);
}

.calendar-booking.appointment-completed,
.calendar-booking.appointment-paid {
  border-left-color: var(--oro-sage);
}

.calendar-booking.appointment-canceled,
.calendar-booking.appointment-void,
.calendar-booking.appointment-date_changed {
  border-left-color: var(--oro-ink-faint);
  opacity: .7;
}

/* ---------- Universal status-pill color coding (sales, appointments) ---------- */
.status-pill.status-completed,
.status-pill.status-paid,
.status-pill.status-confirmed {
  background: var(--oro-sage-tint);
  color: var(--oro-sage);
}

.status-pill.status-canceled,
.status-pill.status-void,
.status-pill.status-date_changed {
  background: var(--oro-accent-tint);
  color: var(--oro-accent-deep);
}

.status-pill.status-pending {
  background: var(--oro-sunken);
  color: var(--oro-ink-faint);
}

/* ---------- HR icon summary cards: match KPI typography without markup changes ---------- */
.hr-summary-grid .panel,
.lv-summary article,
.hr-leave-summary article,
.summary-strip article {
  padding: 16px 18px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.hr-summary-grid .panel i {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--oro-accent-tint);
  color: var(--oro-accent-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.hr-summary-grid .panel i svg {
  width: 16px;
  height: 16px;
}

.hr-summary-grid .panel > span {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--oro-ink-faint);
}

.hr-summary-grid .panel > span > strong {
  order: 2;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: normal;
  color: var(--oro-ink);
  font-variant-numeric: tabular-nums;
}

.hr-summary-grid .panel > span > small {
  order: 3;
  font-size: 11.5px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: normal;
  color: var(--oro-ink-faint);
}

/* Phase 9: HR & Attendance section tabs �� align with universal site-wide tab styling
   (overrides the legacy boxed/sticky/icon tab bar used only on HR & Attendance pages). */
.hr-tabs,
.hr-report-tabs,
.hr-adjustment-tabs {
  background: none !important;
  box-shadow: none !important;
  display: flex !important;
  flex-wrap: wrap !important;
  grid-template-columns: none !important;
  gap: 4px !important;
  border-bottom: 1px solid var(--oro-line) !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 0 16px !important;
  position: static !important;
  top: auto !important;
  z-index: auto !important;
  overflow-x: visible !important;
}

.hr-tabs a,
.hr-report-tabs a,
.hr-adjustment-tabs a {
  font-family: var(--font-body) !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  color: var(--oro-ink-faint) !important;
  padding: 9px 13px !important;
  border: none !important;
  border-radius: 0 !important;
  border-bottom: 2px solid transparent !important;
  background: none !important;
  box-shadow: none !important;
  min-height: auto !important;
  min-width: 0 !important;
  flex: 0 0 auto !important;
  transition: color .15s ease, border-color .15s ease !important;
}

.hr-tabs a:hover,
.hr-report-tabs a:hover,
.hr-adjustment-tabs a:hover {
  color: var(--oro-ink) !important;
  background: none !important;
  transform: none !important;
}

.hr-tabs a.active,
.hr-report-tabs a.active,
.hr-adjustment-tabs a.active {
  color: var(--oro-accent-deep) !important;
  border: none !important;
  border-bottom: 2px solid var(--oro-rose) !important;
  background: none !important;
  box-shadow: none !important;
  font-weight: 800 !important;
}

.hr-tabs svg,
.hr-report-tabs svg,
.hr-adjustment-tabs a svg {
  display: none !important;
}

@media (max-width: 900px) {
  .hr-tabs,
  .hr-report-tabs,
  .hr-adjustment-tabs {
    position: static !important;
    width: auto !important;
  }
  .hr-tabs a,
  .hr-report-tabs a,
  .hr-adjustment-tabs a {
    font-size: 12.5px !important;
    min-height: auto !important;
    min-width: 0 !important;
  }
}

@media (max-width: 480px) {
  .hr-tabs a,
  .hr-report-tabs a,
  .hr-adjustment-tabs a {
    font-size: 12px !important;
    padding: 7px 9px !important;
  }
}

/* Phase 10: Leave & Employee Records �� the tab bar and page header on these two
   pages carried extra legacy classes (.lv-tabs/.er-tabs + .hr-sticky-tabs, and
   .lv-heading/.er-heading) whose higher-specificity !important rules were
   silently overriding the Phase 9 universal tab styling and the shared
   hr-page-header title size. Neutralize those leftovers so Leave and Employee
   Records match Overview, Attendance, Shifts, Reports, and Payroll Adjustments. */
.lv-tabs.hr-sticky-tabs,
.hr-leave-page .lv-tabs.hr-sticky-tabs,
.er-tabs.hr-sticky-tabs,
.er-tabs {
  background: none !important;
  box-shadow: none !important;
  isolation: auto !important;
  padding: 0 !important;
  z-index: auto !important;
}

.lv-heading h1,
.er-heading h1,
.hr-report-heading h1,
.hr-adjustment-heading h1{
  font-size: clamp(34px, 3.4vw, 48px) !important;
    font-family: var(--font-display) !important;
      font-weight: 500 !important;
        letter-spacing: normal !important;
  line-height: 1 !important;
  margin: 0 0 10px !important;
}

.lv-heading,
.er-heading {
  align-items: center !important;
}

@media (max-width: 760px) {
  .lv-heading,
  .er-heading {
    align-items: flex-start !important;
  }
}

/* Phase 11: Service Packages �� searchable "Base service" picker in the
   Create Package card, replacing the plain alphabetical <select>. Reuses
   the same field sizing/border language as the rest of .form-grid. */
.svc-picker-field {
  position: relative;
}

.svc-combo {
  position: relative;
}

.svc-combo-input-wrap {
  align-items: center;
  background: var(--oro-white);
  border: 1px solid var(--oro-line);
  border-radius: 8px;
  box-sizing: border-box;
  display: flex;
  gap: 10px;
  padding: 0 14px;
  height: 46px;
}

.svc-combo-input-wrap.open {
  border-color: var(--oro-rose);
  box-shadow: 0 0 0 3px var(--oro-accent-tint);
}

.svc-combo-input-wrap svg {
  color: var(--oro-ink-faint);
  flex: 0 0 16px;
  height: 16px;
  width: 16px;
}

.svc-combo-input {
  background: none;
  border: 0;
  color: var(--oro-ink);
  font: inherit;
  height: 100%;
  outline: 0;
  width: 100%;
}

.svc-combo-input::placeholder {
  color: var(--oro-ink-faint);
}

.svc-combo-clear {
  background: none;
  border: 0;
  color: var(--oro-ink-faint);
  cursor: pointer;
  display: none;
  font-size: 13px;
  padding: 4px;
}

.svc-combo-clear.show {
  display: block;
}

.svc-combo-filter-tag {
  align-items: center;
  background: var(--oro-accent-tint);
  border-radius: 999px;
  color: var(--oro-accent-deep);
  display: inline-flex;
  font-size: 11.5px;
  font-weight: 700;
  gap: 6px;
  margin-top: 8px;
  padding: 4px 6px 4px 10px;
}

.svc-combo-filter-tag[hidden] {
  display: none;
}

.svc-combo-filter-tag button {
  background: none;
  border: 0;
  color: var(--oro-accent-deep);
  cursor: pointer;
  font-size: 11px;
  line-height: 1;
  padding: 3px 4px;
}

.svc-combo-panel {
  background: var(--oro-white);
  border: 1px solid var(--oro-line);
  border-radius: 10px;
  box-shadow: var(--oro-shadow-lg);
  display: none;
  left: 0;
  max-height: 320px;
  overflow-y: auto;
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 30;
}

.svc-combo-panel.open {
  display: block;
}

.svc-combo-group-label {
  background: var(--oro-sunken);
  border-bottom: 1px solid var(--oro-line);
  color: var(--oro-ink-faint);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 8px 14px;
  position: sticky;
  text-transform: uppercase;
  top: 0;
}

.svc-combo-row {
  align-items: center;
  border-bottom: 1px solid var(--oro-line);
  cursor: pointer;
  display: flex;
  gap: 12px;
  padding: 10px 14px;
}

.svc-combo-row:last-child {
  border-bottom: 0;
}

.svc-combo-row:hover,
.svc-combo-row:focus-visible {
  background: var(--oro-accent-tint);
  outline: none;
}

.svc-combo-row-main {
  flex: 1;
  min-width: 0;
}

.svc-combo-row-name {
  color: var(--oro-ink);
  font-size: 13.5px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.svc-combo-row-name mark {
  background: none;
  color: var(--oro-accent-deep);
  font-weight: 800;
}

.svc-combo-row-meta {
  color: var(--oro-ink-faint);
  font-size: 11.5px;
  margin-top: 1px;
}

.svc-combo-row-price {
  color: var(--oro-ink-soft);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  white-space: nowrap;
}

.svc-combo-empty {
  color: var(--oro-ink-faint);
  font-size: 13px;
  padding: 22px 14px;
  text-align: center;
}

.svc-combo-error {
  color: #a13a3a;
  display: none;
  font-size: 12px;
  margin: 6px 0 0;
}

.svc-combo-error.show {
  display: block;
}

.svc-selected-card {
  align-items: center;
  background: var(--oro-sage-tint);
  border: 1px solid var(--oro-line);
  border-radius: 10px;
  display: none;
  gap: 14px;
  margin-top: 10px;
  padding: 12px 14px;
}

.svc-selected-card.show {
  display: flex;
}

.svc-selected-check {
  align-items: center;
  background: var(--oro-sage);
  border-radius: 50%;
  color: var(--oro-white);
  display: flex;
  flex: 0 0 24px;
  height: 24px;
  justify-content: center;
  width: 24px;
}

.svc-selected-info {
  flex: 1;
  min-width: 0;
}

.svc-selected-name {
  color: var(--oro-ink);
  font-size: 13.5px;
  font-weight: 700;
}

.svc-selected-meta {
  color: var(--oro-ink-soft);
  font-size: 12px;
  margin-top: 1px;
}

.svc-selected-swap {
  background: none;
  border: 0;
  color: var(--oro-rose);
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  padding: 6px 4px;
}

/* Phase 12: New Sale �� same searchable picker pattern reused for the
   "Service / Product" line item field, with a stock badge for retail
   products. The native <select> stays in the DOM (still submits with the
   form) but is visually hidden; the combo UI drives it via JS. */
.svc-combo-native-select {
  display: none;
}

.svc-combo-row .stock-badge {
  margin-left: 0;
  white-space: nowrap;
}

/* Phase 13: Services List �� live/instant search box (replaces the
   click-to-submit Filter button) and the split-view layout (pick a
   service on the left, see its full detail on the right) replacing the
   stacked "management-service-card" list. */
.live-search-box {
  margin-bottom: 18px;
  max-width: 480px;
}

.live-search-input-wrap {
  align-items: center;
  background: var(--oro-white);
  border: 1px solid var(--oro-line);
  border-radius: 8px;
  box-shadow: 0 10px 26px rgba(35, 33, 31, 0.04);
  display: flex;
  gap: 10px;
  min-height: 48px;
  padding: 0 14px;
}

.live-search-input-wrap svg {
  color: var(--oro-ink-faint);
  flex: 0 0 16px;
  height: 16px;
  width: 16px;
}

.live-search-input-wrap input {
  background: none;
  border: 0;
  color: var(--oro-ink);
  flex: 1;
  font: inherit;
  height: 100%;
  min-width: 0;
  outline: 0;
  padding: 12px 0;
}

.live-search-clear {
  background: none;
  border: 0;
  color: var(--oro-ink-faint);
  cursor: pointer;
  display: none;
  flex: 0 0 auto;
  font-size: 13px;
  padding: 4px;
}

.live-search-clear.show {
  display: block;
}

.service-split-card {
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid var(--oro-line);
  border-radius: 8px;
  box-shadow: 0 18px 44px rgba(35, 33, 31, 0.08);
  overflow: hidden;
  padding: clamp(16px, 3vw, 24px) 0 0;
}

.service-split-toolbar {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-bottom: 14px;
  padding: 0 clamp(16px, 3vw, 24px);
}

.service-split-toolbar h2 {
  color: var(--oro-ink);
  font-size: 26px;
  margin: 0 0 2px;
}

.service-split-toolbar p {
  color: var(--oro-ink-soft);
  margin: 0;
}

.service-split-body {
  border-top: 1px solid var(--oro-line);
  display: grid;
  grid-template-columns: 300px 1fr;
  min-height: 420px;
}

.service-split-list {
  border-right: 1px solid var(--oro-line);
  max-height: 640px;
  overflow-y: auto;
}

.service-split-cat-label {
  background: var(--oro-soft);
  border-bottom: 1px solid var(--oro-line);
  color: var(--oro-ink-faint);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  padding: 9px 16px;
  position: sticky;
  text-transform: uppercase;
  top: 0;
}

.service-split-item {
  align-items: center;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--oro-line);
  border-left: 3px solid transparent;
  cursor: pointer;
  display: flex;
  font: inherit;
  gap: 10px;
  justify-content: space-between;
  padding: 11px 16px 11px 14px;
  text-align: left;
  width: 100%;
}

.service-split-item:hover {
  background: var(--oro-sunken);
}

.service-split-item.active {
  background: var(--oro-sage-tint);
  border-left-color: var(--oro-sage);
}

.service-split-item-name {
  color: var(--oro-ink-soft);
  font-size: 13px;
  font-weight: 700;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.service-split-item.active .service-split-item-name {
  color: var(--oro-ink);
}

.service-split-item-price {
  color: var(--oro-ink-faint);
  flex: 0 0 auto;
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  white-space: nowrap;
}

.service-split-item.active .service-split-item-price {
  color: var(--oro-sage);
}

.service-split-detail {
  padding: clamp(20px, 3vw, 30px);
}

.service-split-empty {
  align-items: center;
  color: var(--oro-ink-soft);
  display: grid;
  height: 100%;
  justify-items: center;
  min-height: 320px;
  padding: 24px;
  text-align: center;
}

.service-split-empty[hidden] {
  display: none;
}

.service-split-empty strong {
  color: var(--oro-ink);
  display: block;
  font-size: 17px;
  margin-bottom: 4px;
}

.service-split-detail-head {
  align-items: flex-start;
  display: flex;
  gap: 16px;
  justify-content: space-between;
  margin-bottom: 20px;
}

.service-split-detail-head h3 {
  color: var(--oro-ink);
  font-size: 22px;
  margin: 0 0 8px;
}

.service-split-detail-price {
  color: var(--oro-rose-dark);
  font-size: 22px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.service-split-field-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(3, 1fr);
  margin-bottom: 18px;
}

.service-split-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.service-split-field span {
  color: var(--oro-ink-faint);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.service-split-field .val {
  background: var(--oro-soft);
  border: 1px solid var(--oro-line);
  border-radius: 9px;
  color: var(--oro-ink);
  font-size: 13.5px;
  padding: 10px 12px;
}

.service-split-note {
  background: var(--oro-soft);
  border-radius: 9px;
  color: var(--oro-ink-soft);
  font-size: 13px;
  margin-bottom: 20px;
  padding: 12px 14px;
}

.service-split-actions {
  align-items: center;
  display: flex;
  gap: 10px;
}

.service-split-actions form {
  margin: 0;
}

.service-split-actions .link-danger {
  color: #a13a3a;
}

@media (max-width: 860px) {
  .service-split-body {
    grid-template-columns: 1fr;
  }

  .service-split-list {
    border-right: 0;
    border-bottom: 1px solid var(--oro-line);
    max-height: 280px;
  }

  .service-split-field-grid {
    grid-template-columns: 1fr;
  }
}

/* Phase 14: Services List �� expandable rows. Replaces the split-view
   (pick-on-left / detail-on-right) with a flat, single-line-per-service
   list; clicking a row expands it inline to reveal notes, add-on count
   and Edit/Delete, no separate detail pane and no page navigation. The
   live-search box and category tabs above are unchanged. */
.svc-exp-card {
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid var(--oro-line);
  border-radius: 8px;
  box-shadow: 0 18px 44px rgba(35, 33, 31, 0.08);
  overflow: hidden;
  padding: clamp(16px, 3vw, 24px) 0;
}

.svc-exp-list {
  border-top: 1px solid var(--oro-line);
  margin-top: 14px;
}

.svc-exp-row-wrap {
  border-bottom: 1px solid var(--oro-line);
}

.svc-exp-row-wrap:last-child {
  border-bottom: 0;
}

.svc-exp-row {
  align-items: center;
  background: none;
  border: 0;
  cursor: pointer;
  display: grid;
  font: inherit;
  gap: 16px;
  grid-template-columns: 16px minmax(0, 1fr) 130px 110px minmax(150px, auto);
  padding: 13px clamp(16px, 3vw, 24px);
  text-align: left;
  width: 100%;
}

.svc-exp-row:hover {
  background: var(--oro-sunken);
}

.svc-exp-chevron {
  color: var(--oro-ink-faint);
  flex: 0 0 auto;
  height: 14px;
  transition: transform 0.15s ease;
  width: 14px;
}

.svc-exp-row-wrap.open .svc-exp-chevron {
  transform: rotate(90deg);
}

.svc-exp-name {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

.svc-exp-name strong {
  color: var(--oro-ink);
  font-size: 14px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.svc-mini-badge {
  background: var(--oro-sunken);
  border-radius: 999px;
  color: var(--oro-ink-faint);
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 8px;
  white-space: nowrap;
}

.svc-mini-badge.pkg {
  background: var(--oro-sage-tint);
  color: var(--oro-sage);
}

.svc-exp-cat {
  color: var(--oro-ink-faint);
  font-size: 12.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.svc-exp-dur {
  color: var(--oro-ink-faint);
  font-size: 12.5px;
  white-space: nowrap;
}

.svc-exp-price {
  color: var(--oro-ink);
  font-size: 13.5px;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  line-height: 1.3;
  text-align: right;
  white-space: normal;
}

.svc-exp-detail {
  display: none;
  padding: 2px clamp(16px, 3vw, 24px) 18px calc(clamp(16px, 3vw, 24px) + 30px);
}

.svc-exp-row-wrap.open .svc-exp-detail {
  display: block;
}

.svc-exp-detail-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(3, minmax(0, 200px));
  margin-bottom: 12px;
}

.svc-exp-detail-grid div {
  background: var(--oro-soft);
  border-radius: 8px;
  padding: 8px 12px;
}

.svc-exp-detail-grid span {
  color: var(--oro-ink-faint);
  display: block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.03em;
  margin-bottom: 3px;
  text-transform: uppercase;
}

.svc-exp-detail-grid b {
  color: var(--oro-ink);
  font-size: 12.5px;
}

.svc-exp-detail-note {
  color: var(--oro-ink-soft);
  font-size: 12.5px;
  margin: 0 0 14px;
  max-width: 640px;
}

.svc-exp-detail-actions {
  align-items: center;
  display: flex;
  gap: 14px;
}

.svc-exp-detail-actions .button {
  padding: 8px 16px;
}

@media (max-width: 860px) {
  .svc-exp-row {
    grid-template-columns: 16px minmax(0, 1fr) auto;
  }

  .svc-exp-cat {
    display: none;
  }

  .svc-exp-detail-grid {
    grid-template-columns: 1fr;
  }
}

/* Phase 15: Service Packages �� Edit link, per-card status control,
   archived pill variant, section-tabs bar, and Commission Rules panel. */
.section-tabs {
  align-items: center;
  border-bottom: 1px solid var(--oro-line, #E2E7E6);
  display: flex;
  gap: 22px;
  margin: 18px 0 4px;
  padding-bottom: 0;
}

.section-tabs a {
  color: var(--oro-ink-soft, #65857E);
  font-size: 13px;
  font-weight: 600;
  padding: 10px 2px;
  position: relative;
  text-decoration: none;
}

.section-tabs a.active,
.section-tabs a:hover {
  color: var(--oro-ink, #2A4340);
}

.section-tabs a.active::after {
  background: var(--oro-rose, #3E5C58);
  border-radius: 2px 2px 0 0;
  bottom: -1px;
  content: '';
  height: 2px;
  left: 0;
  position: absolute;
  right: 0;
}

.status-pill.archived {
  background: #F1F1EF;
  color: #837D77;
}

.service-package-card.is-editing {
  border-color: var(--oro-rose, #3E5C58);
  box-shadow: 0 0 0 2px rgba(62, 92, 88, 0.12);
}

.service-package-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 10px;
}

.service-package-actions .text-action {
  color: var(--oro-rose, #3E5C58);
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
}

.service-package-actions .text-action:hover {
  text-decoration: underline;
}

.pkg-status-form {
  margin: 0;
}

.pkg-status-inline {
  align-items: center;
  display: flex;
  gap: 6px;
}

.pkg-status-inline span {
  color: var(--oro-ink-faint, #837D77);
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.pkg-status-select {
  background: #fff;
  border: 1px solid var(--oro-line, #E2E7E6);
  border-radius: 7px;
  color: var(--oro-ink, #2A4340);
  font-size: 12px;
  padding: 4px 8px;
}

.commission-info-panel {
  margin-top: 16px;
}

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

.commission-rule-card {
  background: var(--oro-sunken, #F7F5F1);
  border: 1px solid var(--oro-line, #E2E7E6);
  border-radius: 10px;
  padding: 16px;
}

.commission-rule-figure {
  color: var(--oro-rose, #3E5C58);
  display: block;
  font-family: var(--oro-font-display, 'Fraunces', serif);
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 8px;
}

.commission-rule-card p {
  color: var(--oro-ink-soft, #65857E);
  font-size: 13px;
  line-height: 1.5;
  margin: 0;
}

.commission-rule-note {
  font-size: 12.5px;
  margin-top: 14px;
}

@media (max-width: 900px) {
  .commission-rule-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .commission-rule-grid {
    grid-template-columns: 1fr;
  }
}

/* Phase 16: Services List �� category board (kanban columns). Replaces the
   expandable-rows layout with side-scrolling per-category columns. No
   gradients or shadows, per direction. */
.svc-board-card {
  background: var(--oro-white, #fff);
  border: 1px solid var(--oro-line, #E2E7E6);
  border-radius: var(--oro-radius, 12px);
}

.board-scroll {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  padding: 4px 22px 22px;
}

.board-col {
  background: var(--oro-soft, #F7F5F1);
  border: 1px solid var(--oro-line, #E2E7E6);
  border-radius: 12px;
  display: flex;
  flex: 0 0 250px;
  flex-direction: column;
  max-height: 620px;
}

.board-col-head {
  align-items: baseline;
  border-bottom: 1px solid var(--oro-line, #E2E7E6);
  display: flex;
  flex: 0 0 auto;
  gap: 8px;
  justify-content: space-between;
  padding: 12px 14px;
}

.board-col-head strong {
  color: var(--oro-ink, #2A4340);
  font-size: 13px;
}

.board-col-head span {
  color: var(--oro-ink-faint, #837D77);
  font-size: 11px;
  font-weight: 600;
}

.board-col-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  padding: 10px;
}

.board-chip-wrap {
  background: var(--oro-white, #fff);
  border: 1px solid var(--oro-line, #E2E7E6);
  border-radius: 9px;
}

.board-chip {
  background: none;
  border: 0;
  cursor: pointer;
  display: block;
  font-family: inherit;
  padding: 9px 11px;
  text-align: left;
  width: 100%;
}

.board-chip-wrap:hover {
  border-color: var(--oro-sage, #A9BDB6);
}

.board-chip .n {
  color: var(--oro-ink, #2A4340);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  font-size: 12.5px;
  font-weight: 700;
  gap: 6px;
  margin-bottom: 3px;
}

.board-chip .m {
  color: var(--oro-ink-faint, #837D77);
  display: flex;
  font-size: 11px;
  gap: 6px;
  justify-content: space-between;
}

.board-chip .m b {
  color: var(--oro-ink-soft, #65857E);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.board-chip-detail {
  border-top: 1px solid var(--oro-line, #E2E7E6);
  display: none;
  padding: 10px 11px 11px;
}

.board-chip-wrap.open .board-chip-detail {
  display: block;
}

.board-chip-detail-grid {
  display: grid;
  gap: 8px;
  grid-template-columns: 1fr 1fr;
  margin-bottom: 8px;
}

.board-chip-detail-grid div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.board-chip-detail-grid span {
  color: var(--oro-ink-faint, #837D77);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.board-chip-detail-grid b {
  color: var(--oro-ink, #2A4340);
  font-size: 12px;
}

.board-chip-note {
  background: var(--oro-sunken, #F1EEE7);
  border-radius: 7px;
  color: var(--oro-ink-soft, #65857E);
  font-size: 11.5px;
  line-height: 1.4;
  margin: 0 0 10px;
  padding: 8px 9px;
}

.board-chip-actions {
  align-items: center;
  display: flex;
  gap: 12px;
}

.board-chip-actions .button {
  font-size: 11.5px;
  padding: 6px 12px;
}

.board-col-foot {
  border-top: 1px solid var(--oro-line, #E2E7E6);
  flex: 0 0 auto;
  padding: 9px 14px;
}

.board-col-foot a {
  border: 1px dashed var(--oro-line-strong, #C9D2CF);
  border-radius: 8px;
  color: var(--oro-ink-faint, #837D77);
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  padding: 7px 0;
  text-align: center;
  text-decoration: none;
}

.board-col-foot a:hover {
  border-color: var(--oro-rose-dark, #2F4744);
  color: var(--oro-rose-dark, #2F4744);
}

@media (max-width: 720px) {
  .board-scroll {
    flex-direction: column;
    overflow-x: visible;
    padding: 4px 16px 16px;
  }

  .board-col {
    flex: 1 1 auto;
    max-height: none;
  }

  .board-col-body {
    max-height: 360px;
  }
}

/* Phase 17: Service Packages �� no-jump section tabs, per-service commission
   rate display (pill on cards, note in the picker), and the commission
   service table. */
.commission-pill {
  background: var(--oro-sage-tint, #E7F1EE);
  border-radius: 999px;
  color: var(--oro-sage, #4F6F68);
  display: inline-block;
  font-size: 10.5px;
  font-weight: 700;
  margin-left: 8px;
  padding: 2px 9px;
  white-space: nowrap;
}

.commission-pill.warn {
  background: #FCEBEA;
  color: #A13A3A;
}

.svc-selected-commission {
  color: var(--oro-sage, #4F6F68);
  font-size: 11.5px;
  font-weight: 600;
  margin-top: 4px;
}

.svc-selected-commission.warn {
  color: #A13A3A;
}

.commission-service-table {
  border: 1px solid var(--oro-line, #E2E7E6);
  border-radius: 10px;
  margin-top: 18px;
  overflow: hidden;
}

.commission-service-row {
  align-items: center;
  border-bottom: 1px solid var(--oro-line, #E2E7E6);
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) 100px 60px;
  padding: 10px 14px;
}

.commission-service-row:last-child {
  border-bottom: 0;
}

.commission-service-row span {
  font-size: 12.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.commission-service-row span.warn {
  color: #A13A3A;
  font-weight: 700;
}

.commission-service-head {
  background: var(--oro-soft, #F7F5F1);
  color: var(--oro-ink-faint, #837D77);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.commission-service-row .text-action {
  color: var(--oro-rose, #3E5C58);
  font-size: 11.5px;
  font-weight: 700;
  text-decoration: none;
}

.commission-service-row .text-action:hover {
  text-decoration: underline;
}

@media (max-width: 640px) {
  .commission-service-row {
    grid-template-columns: minmax(0, 1fr) 80px 50px;
  }

  .commission-service-row span:nth-child(2) {
    display: none;
  }
}

/* ===== Phase 18: multi-service package eligibility, checkout package selling, drag-and-drop price options ===== */
.svc-multi {
  position: relative;
}

.svc-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

.svc-chip {
  align-items: center;
  background: var(--oro-sunken);
  border: 1px solid var(--oro-line);
  border-radius: 100px;
  color: var(--oro-ink);
  display: inline-flex;
  font-size: 12.5px;
  font-weight: 600;
  gap: 6px;
  padding: 6px 8px 6px 12px;
}

.svc-chip-remove {
  background: none;
  border: 0;
  color: var(--oro-ink-faint);
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  padding: 2px 4px;
}

.svc-chip-remove:hover {
  color: var(--oro-rose);
}

.svc-chip-add {
  background: var(--oro-white);
  border-style: dashed;
  color: var(--oro-ink-soft);
  cursor: pointer;
  padding: 6px 14px;
}

.svc-chip-add:hover {
  border-color: var(--oro-rose);
  color: var(--oro-rose);
}

.svc-eligible-list {
  font-size: 12px;
  margin: 4px 0 0;
}

.svc-price-warning {
  background: var(--oro-warn-tint, #FBEFE1);
  border-radius: 8px;
  color: var(--oro-warn, #A2551F);
  display: none;
  font-size: 12.5px;
  margin-top: 8px;
  padding: 8px 12px;
}

.svc-price-warning.show {
  display: block;
}

.svc-auto-tag {
  background: var(--oro-accent-tint);
  border-radius: 100px;
  color: var(--oro-accent-deep);
  font-size: 10px;
  font-weight: 700;
  margin-left: 6px;
  padding: 1px 8px;
  text-transform: uppercase;
  vertical-align: middle;
}

.svc-auto-tag.hidden {
  display: none;
}

.svc-price-savings {
  color: var(--oro-ink-soft);
  font-size: 12.5px;
  margin: -6px 0 0;
}

/* Checkout: package line item picker + pill */
.checkout-item-type-pill {
  background: var(--oro-accent-tint);
  border-radius: 100px;
  color: var(--oro-accent-deep);
  font-size: 10.5px;
  font-weight: 700;
  margin-left: 8px;
  padding: 2px 9px;
  text-transform: uppercase;
}

/* Drag-and-drop price options on the Service edit form */
.price-option-card {
  transition: box-shadow 0.15s ease, opacity 0.15s ease;
}

.price-option-card.dragging {
  box-shadow: var(--oro-shadow-lg);
  opacity: 0.85;
}

.price-option-card.drag-over {
  border-color: var(--oro-rose);
}

.price-option-card-head {
  gap: 8px;
}

.price-option-drag-handle {
  color: var(--oro-ink-faint);
  cursor: grab;
  font-size: 15px;
  letter-spacing: 1px;
  padding: 2px 4px;
  touch-action: none;
  user-select: none;
}

.price-option-drag-handle:active {
  cursor: grabbing;
}

.price-option-card-head h3 {
  flex: 1;
}

/* Phase 12: guarded delete actions (payroll run reset, customer package purge) */
.danger-zone {
  background: #FBF3F3;
  border: 1px solid rgba(157, 49, 49, 0.28);
}

.danger-zone .section-heading h2 {
  color: #9d3131;
}

.danger-zone .section-heading p {
  color: var(--oro-ink-soft);
}

.danger-zone-form {
  align-items: flex-end;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.danger-zone-form .field {
  min-width: 220px;
}

.danger-zone-form .field small {
  color: var(--oro-ink-soft);
  display: block;
  margin-top: 4px;
}

.button.danger-solid {
  background: #9d3131;
  border: 1px solid #9d3131;
  color: #fff;
}

.button.danger-solid:disabled {
  background: var(--oro-sunken);
  border-color: var(--oro-line);
  color: var(--oro-ink-faint);
  cursor: not-allowed;
}

.customer-package-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.customer-package-row {
  align-items: center;
  background: var(--oro-white);
  border: 1px solid var(--oro-line);
  border-radius: var(--oro-radius-sm);
  display: flex;
  gap: 14px;
  padding: 14px 16px;
}

.customer-package-row .cpr-main {
  flex: 1;
  min-width: 0;
}

.customer-package-row .cpr-main strong {
  display: block;
}

.customer-package-row .cpr-main span {
  color: var(--oro-ink-soft);
  font-size: 12.5px;
}

.customer-package-row .cpr-source {
  background: var(--oro-sunken);
  border-radius: 999px;
  color: var(--oro-ink-soft);
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.customer-package-delete-form {
  align-items: center;
  display: flex;
  gap: 8px;
}

.customer-package-delete-form input[type="text"] {
  font-size: 12.5px;
  padding: 8px 10px;
  width: 150px;
}

#commissionSearchWrap {
  margin-top: 18px;
  max-width: 420px;
}

.service-badges span.role-category-badge {
  background: var(--oro-sage-tint);
  color: var(--oro-sage);
}

.service-badges span.warn {
  background: #FBEAEA;
  color: #A13A3A;
}

.checkbox-field {
  align-items: start;
  display: grid;
  gap: 4px 10px;
  grid-template-columns: auto 1fr;
}

.checkbox-field input[type="checkbox"] {
  grid-column: 1;
  grid-row: 1 / 3;
  height: 18px;
  margin-top: 2px;
  width: 18px;
}

.checkbox-field span {
  font-weight: 700;
  grid-column: 2;
  grid-row: 1;
}

.checkbox-field small {
  grid-column: 2;
  grid-row: 2;
}