.employee-heading-note { display: inline-flex; align-items: center; gap: 9px; padding: 11px 14px; border: 1px solid var(--border); background: var(--primary-soft); color: var(--primary-text); border-radius: 10px; font-size: 12px; line-height: 1.6; }
.employee-heading-note svg { width: 17px; height: 17px; flex-shrink: 0; }
.employee-range-form { display: flex; align-items: end; gap: 13px; flex-wrap: wrap; margin-bottom: 23px; padding: 19px 22px; }
.employee-range-form .field { flex: 1; min-width: 155px; max-width: 230px; }
.employee-range-form .field label { font-size: 12px; }
.employee-range-form .field-error { width: 100%; font-size: 12px; }
.employee-range-form .view-toggle { margin-right: auto; align-self: center; }
.employee-range-form .view-toggle button { font-size: 12px; padding: 10px 14px; }
:is(.modal, .app-shell) form[id^="employee-"] .field input:not([type=checkbox]):not([type=radio]), :is(.modal, .app-shell) form[id^="employee-"] .field select,
:is(.modal, .app-shell) form[id^="employee-"] .field textarea { font-size: 14px; min-height: 43px; }
form[id^="employee-"] .field label { font-size: 12px; }
form[id^="employee-"] .field-hint, form[id^="employee-"] .field-error { font-size: 12px; line-height: 1.7; }
.employee-stats { margin-bottom: 23px; }
.employee-stats .stat-label, .employee-stats .stat-foot { font-size: 12px; }
.employee-stats .stat-foot { line-height: 1.7; }
.employee-stats .stat-value { font-size: 28px; }
.employee-appointment-list { display: grid; gap: 15px; }
.employee-day-heading { display: flex; align-items: center; gap: 12px; margin: 9px 0 1px; color: var(--text); font-size: 14px; font-weight: 600; }
.employee-day-heading::after { content: ''; height: 1px; flex: 1; background: var(--border); }
.employee-appointment { display: grid; grid-template-columns: 82px minmax(0, 1fr) auto; gap: 20px; padding: 21px 23px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); align-items: start; }
.employee-appointment-time { display: flex; flex-direction: column; gap: 6px; padding: 12px; background: var(--surface-soft); border: 1px solid var(--border); border-radius: 10px; color: var(--muted); font-size: 12px; text-align: center; }
.employee-appointment-time strong { font-size: 20px; font-weight: 600; color: var(--text); letter-spacing: -.035em; }
.employee-appointment h3 { margin: 3px 0 8px; color: var(--text); font-size: 17px; letter-spacing: -.03em; }
.employee-appointment-service { display: flex; gap: 8px; align-items: center; color: var(--muted); font-size: 14px; }
.employee-appointment-service svg { width: 16px; height: 16px; }
.employee-appointment-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 13px; margin-top: 14px; color: var(--subtle); font-size: 12px; }
.employee-appointment-notes { padding: 12px 14px; margin-top: 15px; border: 1px solid var(--border); background: var(--surface-soft); border-radius: 9px; color: var(--muted); font-size: 13px; line-height: 1.8; white-space: pre-wrap; overflow-wrap: anywhere; }
.employee-appointment-actions { display: flex; flex-direction: column; align-items: end; gap: 15px; }
.employee-status { display: inline-flex; align-items: center; gap: 6px; padding: 6px 9px; font-size: 12px; line-height: 1.4; border: 1px solid var(--border); background: var(--surface-soft); color: var(--muted); border-radius: 7px; white-space: nowrap; }
.employee-status.positive { color: var(--primary-text); background: var(--primary-soft); }
.employee-status.attention { color: var(--orange); background: var(--orange-soft); }
.employee-status.negative { color: var(--red); background: var(--red-soft); }
.employee-request-note { padding: 12px 15px; border-left: 3px solid var(--orange); border-radius: 0 9px 9px 0; background: var(--orange-soft); color: var(--text); margin-top: 16px; font-size: 12px; line-height: 1.8; }
.employee-request-note strong { display: block; font-weight: 550; margin-bottom: 4px; }
.employee-request-note p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.employee-request-note.resolved { border-left-color: var(--border-strong); background: var(--surface-soft); }
.employee-own-note { margin-bottom: 23px; font-size: 13px; line-height: 1.8; }
.employee-empty { padding: 55px 24px; min-height: 240px; }
.employee-empty h3 { font-size: 19px; }
.employee-empty p { font-size: 14px; max-width: 410px; line-height: 1.8; }
.employee-table table { min-width: 790px; }
.employee-earnings-grid .employee-table table { min-width: 620px; }
.employee-table th { font-size: 12px; }
.employee-table td { font-size: 14px; }
.employee-table .cell-sub { font-size: 12px; line-height: 1.8; }
.employee-money { font-variant-numeric: tabular-nums; font-weight: 550; white-space: nowrap; }
.employee-earnings-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(280px, .85fr); gap: 24px; margin-bottom: 24px; }
.employee-pay-details { padding: 0 23px 23px; }
.employee-pay-details .setting-row { font-size: 13px; gap: 20px; }
.employee-pay-details .setting-row strong { text-align: right; }
.employee-pay-details .notice { margin-top: 18px; font-size: 12px; line-height: 1.8; }
.employee-ledger-note { border-top: 1px solid var(--border); padding: 15px 23px; color: var(--subtle); font-size: 12px; line-height: 1.8; }
.employee-access-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 23px; }
.employee-access-card { padding: 24px; }
.employee-access-person { display: flex; align-items: center; gap: 12px; }
.employee-access-person h3 { margin: 0 0 5px; font-size: 18px; letter-spacing: -.03em; }
.employee-access-person p { margin: 0; font-size: 13px; color: var(--muted); }
.employee-access-card .employee-status { margin-top: 20px; }
.employee-access-email { font-size: 13px; color: var(--muted); margin: 13px 0; overflow-wrap: anywhere; min-height: 22px; }
.employee-access-card .btn { font-size: 13px; margin-top: 5px; }
.employee-account-person { display: flex; gap: 13px; align-items: center; margin-bottom: 23px; }
.employee-account-person h3 { margin: 0 0 7px; font-size: 21px; letter-spacing: -.03em; }
.employee-account-person p { margin: 0; font-size: 13px; color: var(--muted); }
.employee-account-role { margin-bottom: 23px; padding: 16px 18px; background: var(--primary-soft); border: 1px solid var(--border); border-radius: 11px; }
.employee-account-role strong { display: block; color: var(--primary-text); font-size: 14px; margin-bottom: 6px; }
.employee-account-role p { color: var(--muted); font-size: 13px; line-height: 1.8; margin: 0; }
.employee-account-actions { display: flex; flex-wrap: wrap; gap: 10px; padding-top: 20px; margin-top: 20px; border-top: 1px solid var(--border); }
.employee-account-actions .btn { font-size: 13px; }
.employee-modal-summary { padding: 17px 19px; margin-bottom: 23px; border: 1px solid var(--border); background: var(--surface-soft); border-radius: 11px; font-size: 14px; }
.employee-modal-summary strong { display: block; margin-bottom: 8px; font-size: 17px; }
.employee-modal-summary p { margin: 4px 0; color: var(--muted); line-height: 1.8; font-size: 13px; }
.employee-request-filters { display: flex; gap: 10px; align-items: center; margin-bottom: 22px; flex-wrap: wrap; }
.employee-request-filters .view-toggle button { font-size: 13px; padding: 10px 15px; }
.employee-request-filters > .btn { margin-left: auto; }
.employee-request-list { display: grid; gap: 18px; }
.employee-request-card { padding: 22px 24px; }
.employee-request-card-header { display: flex; align-items: start; gap: 14px; margin-bottom: 15px; }
.employee-request-card-header > div { flex: 1; min-width: 0; }
.employee-request-card h3 { margin: 0 0 7px; font-size: 18px; letter-spacing: -.035em; }
.employee-request-card-header p { color: var(--muted); font-size: 13px; line-height: 1.7; margin: 0; }
.employee-request-reason { background: var(--surface-soft); border: 1px solid var(--border); border-radius: 10px; padding: 16px; font-size: 14px; line-height: 1.8; white-space: pre-wrap; overflow-wrap: anywhere; }
.employee-request-reason small { display: block; margin-bottom: 8px; font-size: 12px; color: var(--subtle); }
.employee-request-footer { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 17px; }
.employee-request-footer > span { font-size: 12px; color: var(--subtle); margin-right: auto; }
.employee-request-footer .btn { font-size: 13px; }
.employee-more { display: flex; justify-content: center; margin: 23px 0; }
.employee-loading { height: 240px; width: min(650px, 100%); border-radius: 14px; }
.employee-error-retry { margin-top: 17px; }
@media (max-width: 1180px) { .employee-access-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .employee-earnings-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) {
  .studio-topbar:has(.employee-password-trigger) .topbar-title { flex: 1; min-width: 0; }
  .studio-topbar:has(.employee-password-trigger) .topbar-title > div { flex: 1; min-width: 0; }
  .studio-topbar:has(.employee-password-trigger) .studio-current-page { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .studio-topbar:has(.employee-password-trigger) .topbar-actions { flex-shrink: 0; }
  .app-shell .topbar-actions .employee-password-trigger { width: 44px; min-width: 44px; height: 44px; padding: 10px; flex-shrink: 0; }
  .employee-password-trigger > span { display: none; }
  :is(.modal, .app-shell) form[id^="employee-"] .field input:not([type=checkbox]):not([type=radio]), :is(.modal, .app-shell) form[id^="employee-"] .field select, :is(.modal, .app-shell) form[id^="employee-"] .field textarea { font-size: 16px; min-height: 44px; }
  .employee-range-form { padding: 17px; gap: 12px; }
  .employee-range-form .view-toggle { width: 100%; margin: 0; }
  .employee-range-form .view-toggle button { flex: 1; }
  .employee-range-form .field { min-width: 135px; max-width: none; }
  .employee-range-form > .btn { width: 100%; }
  .employee-appointment { grid-template-columns: 69px minmax(0, 1fr); gap: 14px; padding: 19px 17px; }
  .employee-appointment-time { padding: 11px 7px; }
  .employee-appointment-time strong { font-size: 19px; }
  .employee-appointment-actions { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; align-items: center; padding-top: 14px; border-top: 1px solid var(--border); }
  .employee-access-grid { grid-template-columns: minmax(0, 1fr); }
  .employee-stats .stat-value { font-size: 25px; }
  .employee-request-card { padding: 19px 17px; }
  .employee-request-card-header { flex-wrap: wrap; }
  .employee-request-card-header > .employee-status { margin-left: 52px; }
  .employee-request-footer > span { width: 100%; margin-bottom: 4px; }
  .employee-request-footer .btn { flex: 1; }
  .employee-pay-details { padding-inline: 17px; }
}
@media (max-width: 360px) {
  .employee-range-form .view-toggle button { padding-inline: 6px; }
}