:root {
  --restore-daylight-bg: #07090c;
  --restore-daylight-panel: #12151a;
  --restore-daylight-panel-raised: #181c22;
  --restore-daylight-text: #fffaf0;
  --restore-daylight-muted: #d5d7dc;
  --restore-daylight-gold: #ffd86f;
  --restore-daylight-gold-strong: #f2bb3f;
  --restore-daylight-green: #79efb6;
  --restore-daylight-red: #ff9aa4;
  --restore-daylight-blue: #8bc7ff;
}

/* v1.2.9 — dark brand, strong daylight contrast. */
html,
body {
  background-color: var(--restore-daylight-bg);
  color: var(--restore-daylight-text);
}

.app-shell {
  color: var(--restore-daylight-text);
  background:
    radial-gradient(circle at 50% -8%, rgba(246, 193, 72, 0.13), transparent 25rem),
    linear-gradient(180deg, #0e1116 0%, #090b0f 100%);
}

.app-shell::before {
  border-color: rgba(255, 216, 111, 0.3);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.025);
}

.top-line,
.status-pill,
.secure-note,
.muted,
.brand-subtitle,
.clock-panel span,
.employee-strip span,
.employee-strip em,
.test-mode-control p,
.test-mode-heading small,
.card-title p,
.elapsed-panel span,
.elapsed-panel small,
.massage-running span,
.massage-running small,
.report-row > span,
.report-total,
.empty-state {
  color: var(--restore-daylight-muted);
  -webkit-text-fill-color: var(--restore-daylight-muted);
}

.status-pill,
.top-line {
  font-size: 14px;
  font-weight: 750;
}

.status-pill i,
.secure-note i {
  width: 9px;
  height: 9px;
  background: #5be2a0;
  box-shadow: 0 0 13px rgba(91, 226, 160, 0.86);
}

.language-switch {
  border: 2px solid #3b414b;
  background: #171a20;
}

.language-switch button {
  color: #c9cbd0;
  -webkit-text-fill-color: #c9cbd0;
  font-size: 14px;
}

.language-switch button.active {
  border: 1px solid rgba(255, 222, 137, 0.48);
  background: linear-gradient(145deg, #7d6333, #594522);
  color: #fff0bd;
  -webkit-text-fill-color: #fff0bd;
}

.brand-mark {
  border-width: 2px;
  border-color: rgba(255, 216, 111, 0.72);
  box-shadow:
    0 0 0 7px rgba(255, 216, 111, 0.045),
    0 0 28px rgba(230, 175, 52, 0.12),
    inset 0 0 20px rgba(0, 0, 0, 0.75);
}

.brand-name,
.eyebrow,
.clock-panel strong {
  color: var(--restore-daylight-gold);
  -webkit-text-fill-color: var(--restore-daylight-gold);
  text-shadow: 0 0 18px rgba(255, 205, 80, 0.12);
}

.clock-panel,
.employee-strip,
.login-section,
.test-mode-control {
  border: 2px solid #343a43;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.025), transparent 46%),
    #15181d;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.025);
}

.clock-panel {
  min-height: 66px;
}

.clock-panel span {
  font-size: 15px;
  font-weight: 750;
}

.clock-panel strong {
  font-size: 24px;
  font-weight: 900;
}

.login-section {
  padding: clamp(18px, 5vw, 25px);
  border-color: rgba(255, 216, 111, 0.28);
  border-radius: 24px;
}

.login-section h1,
.employee-strip strong,
.card-title h2,
.test-mode-heading strong {
  color: var(--restore-daylight-text);
  -webkit-text-fill-color: var(--restore-daylight-text);
}

.login-section .muted {
  font-size: 16px;
  font-weight: 700;
}

.pin-dots i {
  width: 17px;
  height: 17px;
  border-width: 2px;
  border-color: rgba(255, 216, 111, 0.68);
}

.pin-pad button {
  min-height: 68px;
  border: 2px solid #3c424c;
  background: linear-gradient(145deg, #22262d, #171a20);
  color: #fffaf0;
  -webkit-text-fill-color: #fffaf0;
  font-size: 25px;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.045);
}

.pin-pad button:active {
  border-color: var(--restore-daylight-gold);
  background: #322917;
}

.employee-strip {
  border-color: rgba(255, 216, 111, 0.28);
}

.employee-strip strong {
  font-size: 19px;
}

.employee-strip em {
  padding: 7px 11px;
  border: 1px solid rgba(255, 216, 111, 0.36);
  background: rgba(255, 216, 111, 0.1);
  color: #ffe49a;
  -webkit-text-fill-color: #ffe49a;
  font-size: 12px;
  font-weight: 900;
}

.dashboard-grid {
  gap: 16px;
}

.dashboard-grid > .dashboard-card:not(#restore-employee-earnings) {
  padding: clamp(18px, 4.8vw, 23px);
  border: 2px solid #3c424b;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.035), transparent 48%),
    var(--restore-daylight-panel);
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.03),
    0 12px 28px rgba(0, 0, 0, 0.36);
}

.dashboard-grid > .dashboard-card:not(#restore-employee-earnings) .card-title {
  gap: 14px;
  margin-bottom: 19px;
}

.dashboard-grid > .dashboard-card:not(#restore-employee-earnings) .card-icon,
.dashboard-grid > .dashboard-card:not(#restore-employee-earnings) .card-title-icon {
  width: 49px;
  height: 49px;
  border: 2px solid rgba(255, 216, 111, 0.62);
  border-radius: 16px;
  background: linear-gradient(145deg, #2e2718, #17171a);
  color: var(--restore-daylight-gold);
  -webkit-text-fill-color: var(--restore-daylight-gold);
  font-size: 22px;
}

.dashboard-grid > .dashboard-card:not(#restore-employee-earnings) .card-title h2 {
  color: #fffdf7;
  -webkit-text-fill-color: #fffdf7;
  font-size: clamp(21px, 5.4vw, 26px);
  font-weight: 900;
  line-height: 1.25;
}

.dashboard-grid > .dashboard-card:not(#restore-employee-earnings) .card-title p {
  color: #d7d9de;
  -webkit-text-fill-color: #d7d9de;
  font-size: clamp(15px, 3.9vw, 17px);
  font-weight: 700;
  line-height: 1.5;
}

.dashboard-grid > .shift-card {
  border-color: rgba(84, 226, 155, 0.72);
  background:
    radial-gradient(circle at 91% 0%, rgba(67, 210, 139, 0.16), transparent 40%),
    linear-gradient(145deg, #10271d, #121a17 54%, #101419);
}

.dashboard-grid > .shift-card .card-icon {
  border-color: rgba(100, 235, 169, 0.72);
  background: #10291e;
  color: var(--restore-daylight-green);
  -webkit-text-fill-color: var(--restore-daylight-green);
}

.elapsed-panel {
  min-height: 126px;
  padding: 20px;
  border: 2px solid rgba(91, 226, 160, 0.48);
  background: #0f2019;
}

.elapsed-panel span,
.elapsed-panel small {
  color: #d6e9df;
  -webkit-text-fill-color: #d6e9df;
  font-size: 14px;
  font-weight: 700;
}

.elapsed-panel strong {
  color: #8af1bc;
  -webkit-text-fill-color: #8af1bc;
  font-size: clamp(34px, 9vw, 43px);
  font-weight: 950;
}

.dashboard-grid > .shift-card .primary-button:not(:disabled) {
  border: 2px solid #a6f5cf;
  background: linear-gradient(135deg, #a8f5cf, #4ed28d);
  color: #071d13;
  -webkit-text-fill-color: #071d13;
  box-shadow: 0 10px 26px rgba(65, 210, 137, 0.24);
}

.dashboard-grid > .shift-card .danger-button:not(:disabled) {
  border: 2px solid #ff9ca5;
  background: linear-gradient(145deg, #b84655, #7a2b37);
  color: #fff8f8;
  -webkit-text-fill-color: #fff8f8;
  box-shadow: 0 10px 25px rgba(205, 56, 75, 0.22);
}

.dashboard-grid > .dashboard-card:has(> .duration-grid),
.dashboard-grid > .dashboard-card:has(.massage-running) {
  border-color: rgba(255, 202, 76, 0.72);
  background:
    radial-gradient(circle at 91% 0%, rgba(246, 188, 56, 0.16), transparent 40%),
    linear-gradient(145deg, #241d0e, #171817 54%, #111419);
}

.dashboard-grid > .dashboard-card:not(#restore-employee-earnings) .duration-grid {
  gap: 10px;
}

.dashboard-grid > .dashboard-card:not(#restore-employee-earnings) .duration-grid button {
  min-height: 82px;
  border: 2px solid rgba(255, 211, 103, 0.72);
  background: linear-gradient(145deg, #362a12, #1c1a15);
  color: #fff7e1;
  -webkit-text-fill-color: #fff7e1;
}

.dashboard-grid > .dashboard-card:not(#restore-employee-earnings) .duration-grid button strong {
  color: var(--restore-daylight-gold);
  -webkit-text-fill-color: var(--restore-daylight-gold);
  font-size: 25px;
  font-weight: 950;
}

.dashboard-grid > .dashboard-card:not(#restore-employee-earnings) .duration-grid button span {
  color: #f1eee7;
  -webkit-text-fill-color: #f1eee7;
  font-size: 14px;
  font-weight: 850;
}

.dashboard-grid > .dashboard-card:has(.report-grid) {
  border-color: rgba(75, 218, 145, 0.62);
  background:
    radial-gradient(circle at 91% 0%, rgba(65, 208, 135, 0.11), transparent 38%),
    linear-gradient(145deg, #102219, #15191a 54%, #111419);
}

.report-row {
  min-height: 64px;
  padding: 9px 12px;
  border: 2px solid rgba(83, 222, 153, 0.34);
  background: #111b17;
}

.report-row > span,
.report-total {
  color: #e3e8e5;
  -webkit-text-fill-color: #e3e8e5;
  font-size: 15px;
  font-weight: 750;
}

.report-row > span strong,
.report-row b,
.report-total strong {
  color: var(--restore-daylight-green);
  -webkit-text-fill-color: var(--restore-daylight-green);
  font-size: 22px;
  font-weight: 950;
}

.report-row button {
  border-width: 2px;
  border-color: rgba(255, 216, 111, 0.6);
  background: #2c2413;
  color: var(--restore-daylight-gold);
  -webkit-text-fill-color: var(--restore-daylight-gold);
}

.report-total {
  min-height: 56px;
  border: 2px solid rgba(83, 222, 153, 0.45);
  background: #0e2118;
}

.dashboard-grid > .owner-card {
  border-color: rgba(101, 177, 255, 0.62);
  background:
    radial-gradient(circle at 91% 0%, rgba(77, 158, 243, 0.13), transparent 38%),
    linear-gradient(145deg, #101c2a, #15191e 54%, #111419);
}

.dashboard-grid > .owner-card .card-icon {
  border-color: rgba(101, 177, 255, 0.72);
  background: #101f31;
  color: var(--restore-daylight-blue);
  -webkit-text-fill-color: var(--restore-daylight-blue);
}

.month-input {
  min-height: 56px;
  border: 2px solid #59616c;
  background: #0c0f14;
  color: #fffaf0;
  -webkit-text-fill-color: #fffaf0;
  font-size: 17px;
  font-weight: 850;
}

.owner-actions {
  gap: 10px;
}

.owner-actions button {
  min-height: 58px;
  font-size: 15px;
  font-weight: 900;
}

.dashboard-grid > .dashboard-card:not(#restore-employee-earnings) .secondary-button:not(:disabled),
.owner-actions .secondary-button:not(:disabled) {
  border: 2px solid rgba(255, 211, 103, 0.76);
  background: linear-gradient(145deg, #3b2d12, #211b12);
  color: #ffe49a;
  -webkit-text-fill-color: #ffe49a;
}

.journal-row {
  padding: 15px;
  border: 2px solid #3c424b;
  background: #0c0f14;
}

.journal-row > strong,
.journal-row .journal-date,
.journal-row dd {
  color: #f4f1e9;
  -webkit-text-fill-color: #f4f1e9;
}

.journal-row dt,
.journal-row > div span {
  color: #c8cdd4;
  -webkit-text-fill-color: #c8cdd4;
}

/* Bonus is a separate gold reward, never a grey utility card. */
#restore-admin-bonus-card {
  border: 3px solid #f4c64f;
  background:
    radial-gradient(circle at 88% 3%, rgba(255, 231, 153, 0.25), transparent 34%),
    linear-gradient(145deg, #49330c 0%, #241c0d 48%, #111419 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 242, 199, 0.1),
    0 0 0 1px rgba(244, 198, 79, 0.12),
    0 16px 38px rgba(0, 0, 0, 0.38),
    0 0 30px rgba(235, 176, 38, 0.14);
}

.restore-admin-bonus-heading h2 {
  color: #fff6d7;
  -webkit-text-fill-color: #fff6d7;
  font-size: clamp(22px, 5.5vw, 27px);
}

.restore-admin-bonus-heading p,
.restore-admin-bonus-status {
  color: #f4e3b3;
  -webkit-text-fill-color: #f4e3b3;
  font-size: 15px;
  font-weight: 750;
}

.restore-admin-bonus-icon {
  width: 55px;
  height: 55px;
  flex-basis: 55px;
  border: 2px solid #fff0b5;
  background: linear-gradient(145deg, #ffe99b, #df9f24);
  color: #241501;
  -webkit-text-fill-color: #241501;
}

.restore-admin-bonus-amount {
  min-height: 72px;
  border-color: rgba(255, 220, 120, 0.72);
  background: linear-gradient(135deg, #3f2d0e, #16171a);
  color: #fff1c7;
  -webkit-text-fill-color: #fff1c7;
  font-size: 16px;
}

.restore-admin-bonus-amount strong {
  color: #ffe076;
  -webkit-text-fill-color: #ffe076;
  font-size: 31px;
}

#restore-admin-bonus-card button:not(:disabled) {
  min-height: 62px;
  border: 2px solid #fff0ae;
  background: linear-gradient(135deg, #ffe899, #e4aa32);
  color: #1b1204;
  -webkit-text-fill-color: #1b1204;
  font-size: 18px;
  box-shadow: 0 10px 27px rgba(218, 153, 29, 0.23);
}

/* A disabled control is readable but clearly unavailable. */
.dashboard-grid > .dashboard-card:not(#restore-employee-earnings) button:disabled:not([data-restore-action-state]),
#restore-admin-bonus-card button:disabled:not([data-restore-action-state]) {
  filter: none !important;
  opacity: 1 !important;
  border: 2px solid #5b616b !important;
  background: linear-gradient(145deg, #23272e, #171a20) !important;
  color: #c8cbd1 !important;
  -webkit-text-fill-color: #c8cbd1 !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.035) !important;
}

.dashboard-grid > .dashboard-card:not(#restore-employee-earnings) button:disabled:not([data-restore-action-state]) *,
#restore-admin-bonus-card button:disabled:not([data-restore-action-state]) * {
  color: inherit !important;
  -webkit-text-fill-color: inherit !important;
  opacity: 1 !important;
}

.dashboard-grid > .dashboard-card:not(#restore-employee-earnings) .duration-grid button:disabled:not([data-restore-action-state]) strong {
  color: #e0c77f !important;
  -webkit-text-fill-color: #e0c77f !important;
}

/* Location lock keeps the colour vocabulary without suggesting that a tap will work. */
body.restore-location-locked .dashboard-grid > .shift-card .primary-button:not(.restore-location-exempt) {
  border-color: #4a8f70 !important;
  background: linear-gradient(145deg, #173d2e, #11251d) !important;
  color: #b6efd2 !important;
  -webkit-text-fill-color: #b6efd2 !important;
}

body.restore-location-locked .dashboard-grid > .dashboard-card:not(#restore-employee-earnings) .duration-grid button:not(.restore-location-exempt) {
  border-color: #856b32 !important;
  background: linear-gradient(145deg, #302817, #1b1a17) !important;
}

body.restore-location-locked #restore-admin-bonus-card button:not(.restore-location-exempt) {
  border-color: #8d7135 !important;
  background: linear-gradient(145deg, #342a17, #1b1a17) !important;
  color: #e9d8a5 !important;
  -webkit-text-fill-color: #e9d8a5 !important;
}

/* Action states stay unmistakable after all theme overrides. */
button[data-restore-action-state='waiting'] {
  border-color: #ffd27d !important;
  background: linear-gradient(135deg, #ffd781, #db872d) !important;
}

button[data-restore-action-state='success'] {
  border-color: #9cf2ca !important;
  background: linear-gradient(135deg, #9cf2ca, #39b87a) !important;
}

button[data-restore-action-state='queued'] {
  border-color: #ffe097 !important;
  background: linear-gradient(135deg, #ffe095, #c98924) !important;
}

button[data-restore-action-state='error'] {
  border-color: #ffb0b8 !important;
  background: linear-gradient(135deg, #ffabb4, #d64a5d) !important;
}

button[data-restore-action-state]::after {
  color: #101215 !important;
  -webkit-text-fill-color: #101215 !important;
  font-size: 17px;
  font-weight: 950;
}

.toast {
  min-height: 58px;
  padding: 14px 16px;
  border-width: 2px;
  font-size: 16px;
  font-weight: 850;
  line-height: 1.45;
}

.toast.error {
  border-color: rgba(255, 119, 132, 0.74);
  background: #35191f;
  color: #ffb1b9;
  -webkit-text-fill-color: #ffb1b9;
}

.toast.success {
  border-color: rgba(85, 226, 157, 0.68);
  background: #10261c;
  color: #9af0c4;
  -webkit-text-fill-color: #9af0c4;
}

.restore-action-feedback {
  border-width: 2px;
  font-size: 17px;
}

/* Preserve the lower report's colour system, but raise global readability around it. */
#restore-employee-earnings {
  border-width: 2px;
}

#restore-employee-earnings .restore-earnings-title h2 {
  color: #fffdf7;
  -webkit-text-fill-color: #fffdf7;
}

#restore-employee-earnings .restore-earnings-title p,
#restore-employee-earnings .restore-earnings-controls label > span {
  color: #e1e3e7;
  -webkit-text-fill-color: #e1e3e7;
}

.logout-button {
  min-height: 58px;
  border: 2px solid #414750;
  background: #111419;
  color: #d7d9de;
  -webkit-text-fill-color: #d7d9de;
  font-size: 16px;
}

footer {
  color: #aeb2b8;
  -webkit-text-fill-color: #aeb2b8;
  font-size: 11px;
}

@media (max-width: 390px) {
  .dashboard-grid > .dashboard-card:not(#restore-employee-earnings) {
    padding: 17px;
  }

  .dashboard-grid > .dashboard-card:not(#restore-employee-earnings) .duration-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .owner-actions {
    grid-template-columns: 1fr;
  }
}

@media (prefers-contrast: more) {
  .dashboard-card,
  .clock-panel,
  .employee-strip,
  .login-section,
  .pin-pad button {
    border-color: #737b86 !important;
  }

  .dashboard-grid > .shift-card {
    border-color: #79efb6 !important;
  }

  #restore-admin-bonus-card,
  .dashboard-grid > .dashboard-card:has(> .duration-grid) {
    border-color: #ffd86f !important;
  }
}

/* v1.2.9 — compact mobile controls and clearly separated employee records. */
.restore-owner-period-navigation,
#restore-employee-earnings .restore-earnings-month-navigation {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  direction: ltr;
}

.restore-owner-period-navigation input[type='month'],
#restore-employee-earnings input[type='month'] {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding-inline: 8px;
  font-size: 16px;
  font-weight: 850;
}

.restore-owner-period-navigation input[type='month']::-webkit-calendar-picker-indicator,
#restore-employee-earnings input[type='month']::-webkit-calendar-picker-indicator {
  width: 18px;
  height: 18px;
  margin: 0;
  padding: 2px;
}

/* Yellow means an active/primary action. Its label must stay dark in every
   location state, including the employee's outside-clinic read-only view. */
#restore-employee-earnings .restore-earnings-view-switch button.active,
#restore-employee-earnings .restore-earnings-view-switch button.active *,
#restore-employee-earnings .restore-earnings-refresh,
#restore-employee-earnings .restore-earnings-refresh * {
  color: #171100 !important;
  -webkit-text-fill-color: #171100 !important;
  text-shadow: none !important;
}

.restore-owner-period-picker,
#restore-employee-earnings .restore-earnings-month-picker {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

.restore-owner-period-picker-label,
#restore-employee-earnings .restore-earnings-month-value {
  max-width: 100%;
  overflow: hidden;
  color: #fffaf0 !important;
  -webkit-text-fill-color: #fffaf0 !important;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.restore-owner-timeline-list {
  gap: 14px;
}

.restore-owner-timeline-row {
  --employee-accent: #f3c969;
  gap: 14px;
  padding: 15px;
  border: 2px solid var(--employee-accent);
  border-inline-start-width: 6px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.025), transparent 48%),
    #0c0f14;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.28);
}

.restore-owner-timeline-row[data-employee-accent='0'] { --employee-accent: #f3c969; }
.restore-owner-timeline-row[data-employee-accent='1'] { --employee-accent: #75b7ff; }
.restore-owner-timeline-row[data-employee-accent='2'] { --employee-accent: #67dca4; }
.restore-owner-timeline-row[data-employee-accent='3'] { --employee-accent: #c39bff; }
.restore-owner-timeline-row[data-employee-accent='4'] { --employee-accent: #ff9c7a; }
.restore-owner-timeline-row[data-employee-accent='5'] { --employee-accent: #65d7df; }

.restore-owner-timeline-heading {
  align-items: flex-start;
  padding-bottom: 12px;
  border-bottom-color: var(--employee-accent);
}

.restore-owner-timeline-heading strong {
  color: var(--employee-accent);
  -webkit-text-fill-color: var(--employee-accent);
  font-size: 19px;
  line-height: 1.25;
}

.restore-owner-timeline-heading span {
  flex: 0 0 auto;
  padding: 7px 10px;
  border-radius: 999px;
  background: var(--employee-accent);
  color: #101217;
  -webkit-text-fill-color: #101217;
  font-size: 13px;
  font-weight: 950;
  line-height: 1.2;
  direction: ltr;
  unicode-bidi: isolate;
}

.restore-owner-timeline-status {
  font-size: 14px;
  line-height: 1.6;
}

.restore-owner-shift-fact dt {
  font-size: 12.5px;
}

.restore-owner-shift-fact dd {
  font-size: 17px;
}

.restore-owner-massage-intervals > strong,
.restore-owner-massage-section h4,
.restore-owner-payment-section h4 {
  font-size: 16px;
}

.restore-owner-pay-method > strong,
.restore-owner-shift-total {
  font-size: 14px;
}

.restore-owner-pay-method > span,
.restore-owner-pay-method > small,
.restore-owner-massage-intervals span,
.restore-massage-calculation-empty,
.restore-owner-massage-warning {
  font-size: 13px;
}

#restore-employee-earnings .restore-earnings-title h2 {
  font-size: 24px;
}

#restore-employee-earnings .restore-earnings-title p {
  font-size: 16px;
  line-height: 1.5;
}

#restore-employee-earnings .restore-earnings-view-switch button,
#restore-employee-earnings .restore-earnings-refresh {
  font-size: 15px;
}

#restore-employee-earnings .restore-earnings-controls label > span {
  font-size: 14px;
}

#restore-employee-earnings .restore-earnings-days-heading h3 {
  font-size: 19px;
}

#restore-employee-earnings .restore-earnings-day {
  padding: 15px;
  border-width: 2px;
}

#restore-employee-earnings .restore-earnings-day-date-text {
  font-size: 17px;
}

#restore-employee-earnings .restore-earnings-day-number {
  font-size: 21px;
}

#restore-employee-earnings .restore-earnings-day-work h4,
#restore-employee-earnings .restore-earnings-day-massages h4,
#restore-employee-earnings .restore-earnings-day-paybreakdown h4 {
  font-size: 17px;
}

#restore-employee-earnings .restore-earnings-day-metric span,
#restore-employee-earnings .restore-earnings-day-duration span,
#restore-employee-earnings .restore-earnings-day-pay-row > span,
#restore-employee-earnings .restore-earnings-day-pay-row > small {
  font-size: 14px;
}

#restore-employee-earnings .restore-earnings-day-metric strong,
#restore-employee-earnings .restore-earnings-day-duration strong,
#restore-employee-earnings .restore-earnings-day-pay-row > bdi {
  font-size: 18px;
}

#restore-employee-earnings .restore-earnings-day-massage-total strong {
  font-size: 28px;
}

#restore-employee-earnings .restore-earnings-timeline p {
  font-size: 15px;
  line-height: 1.65;
}

@media (max-width: 520px) {
  .restore-owner-period-navigation,
  #restore-employee-earnings .restore-earnings-month-navigation {
    grid-template-columns: 38px minmax(0, 1fr) 38px;
    gap: 5px;
  }

  .restore-owner-period-navigation button,
  #restore-employee-earnings .restore-earnings-month-step {
    width: 38px;
    min-width: 38px;
    padding-inline: 0;
  }

  #restore-employee-earnings .restore-earnings-controls {
    grid-template-columns: minmax(0, 1fr);
  }

  .restore-owner-timeline-row {
    padding: 14px 12px;
  }

  .restore-owner-shift-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}