:root {
  --blue:    #2E75B6;
  --dark:    #1F3864;
  --green:   #4CAF50;
  --red:     #F44336;
  --amber:   #FF9800;
  --bg:      #F4F6F9;
  --white:   #FFFFFF;
  --border:  #E0E0E0;
  --text:    #333333;
  --muted:   #888888;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

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

/* ── Nav ── */
nav {
  background: var(--dark);
  color: white;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  height: 52px;
  position: sticky;
  top: 0;
  z-index: 100;
}
.nav-brand { font-size: 18px; font-weight: 700; }
.nav-links  { display: flex; align-items: center; gap: 4px; }
.nav-links a {
  color: rgba(255,255,255,0.75);
  text-decoration: none;
  padding: 6px 12px;
  border-radius: 6px;
  transition: all .15s;
}
.nav-links a:hover, .nav-links a.active { color: white; background: rgba(255,255,255,.12); }
.btn-download { background: var(--blue) !important; color: white !important; }
.btn-logout   { color: rgba(255,255,255,.5) !important; }

/* ── Main ── */
main { max-width: 1600px; margin: 0 auto; padding: 16px 10px; }

/* ── Auth ── */
.auth-box {
  max-width: 380px;
  margin: 80px auto;
  background: var(--white);
  border-radius: 12px;
  padding: 36px 32px;
  box-shadow: 0 4px 24px rgba(0,0,0,.08);
}
.auth-box h1   { font-size: 26px; margin-bottom: 4px; }
.subtitle      { color: var(--muted); margin-bottom: 24px; font-size: 13px; }
.auth-box label { display: block; font-weight: 600; margin: 14px 0 4px; font-size: 13px; }
.auth-box input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  outline: none;
  transition: border-color .15s;
}
.auth-box input:focus { border-color: var(--blue); }
.auth-box button {
  width: 100%;
  margin-top: 20px;
  padding: 12px;
  background: var(--blue);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}
.auth-box button:hover { background: var(--dark); }
.auth-link { text-align: center; margin-top: 16px; color: var(--muted); font-size: 13px; }
.auth-link a { color: var(--blue); }

/* ── Messages ── */
.error   { background: #FFEBEE; color: var(--red);   border-radius: 8px; padding: 10px 14px; margin-bottom: 16px; }
.success { background: #E8F5E9; color: #388E3C; border-radius: 8px; padding: 10px 14px; margin-bottom: 16px; }
.info-box { background: #E3F2FD; border-radius: 8px; padding: 12px 16px; margin-bottom: 16px; line-height: 1.6; }
.info-box a { color: var(--blue); }
.warn-box { background: #FFF8E1; border: 1px solid #FFD54F; border-radius: 8px; padding: 12px 16px; margin-bottom: 16px; line-height: 1.6; color: #5D4037; }
.warn-box a { color: var(--blue); font-weight: 600; }

/* ── Page header ── */
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}
.page-header h2 { font-size: 22px; }
.date-label { color: var(--muted); font-size: 13px; margin-left: 8px; }

/* ── Dashboard cards ── */
.salon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
  margin-bottom: 28px;
}
.salon-card {
  background: var(--white);
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
  border-top: 4px solid var(--border);
}
.card-ok   { border-top-color: var(--green); }
.card-warn { border-top-color: var(--amber); }

.card-title   { font-size: 15px; font-weight: 700; margin-bottom: 12px; color: var(--dark); }
.metric-big   { font-size: 32px; font-weight: 700; color: var(--dark); }
.metric-label { font-size: 12px; color: var(--muted); margin-bottom: 12px; }
.no-data      { color: var(--muted); font-size: 20px; }

.plan-bar { background: var(--border); border-radius: 4px; height: 6px; margin: 8px 0 4px; overflow: hidden; }
.plan-bar-fill { height: 100%; border-radius: 4px; transition: width .3s; }
.fill-ok   { background: var(--green); }
.fill-warn { background: var(--amber); }
.plan-label { font-size: 12px; color: var(--muted); margin-bottom: 14px; }

.card-stats { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 12px; }
.stat { display: flex; flex-direction: column; }
.stat-val { font-weight: 700; font-size: 15px; }
.stat-lbl { font-size: 11px; color: var(--muted); }

.month-total { font-size: 13px; color: var(--muted); border-top: 1px solid var(--border); padding-top: 10px; margin-top: 4px; }
.month-total b { color: var(--text); }

.empty-state { text-align: center; padding: 60px 20px; color: var(--muted); }
.empty-state a { color: var(--blue); }

/* ── Buttons ── */
.btn-primary, .btn-secondary, .btn-refresh, .btn-tg, .btn-delete {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 18px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  border: none;
  transition: all .15s;
}
.btn-primary   { background: var(--blue);  color: white; }
.btn-primary:hover { background: var(--dark); }
.btn-secondary { background: var(--white); color: var(--text); border: 1px solid var(--border); }
.btn-secondary:hover { border-color: var(--blue); color: var(--blue); }
.btn-refresh   { background: #E3F2FD; color: var(--blue); }
.btn-tg        { background: #2CA5E0; color: white; }
.btn-delete    { background: #FFEBEE; color: var(--red); padding: 5px 10px; font-size: 13px; }
.btn-sm        { padding: 6px 12px; font-size: 13px; }

.actions-row { display: flex; gap: 12px; flex-wrap: wrap; }

/* ── Settings ── */
.settings-section {
  background: var(--white);
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,.04);
}
.settings-section h3 { font-size: 16px; margin-bottom: 16px; color: var(--dark); }
.settings-section h4 { font-size: 14px; margin: 16px 0 10px; }

.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
  margin-bottom: 16px;
}
.form-group { display: flex; flex-direction: column; gap: 4px; }
.form-group label { font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; }
.form-group input, .form-group select {
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  outline: none;
  transition: border-color .15s;
}
.form-group input:focus, .form-group select:focus { border-color: var(--blue); }

.form-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; margin-top: 12px; }
.form-row input { flex: 1; min-width: 120px; padding: 9px 12px; border: 1px solid var(--border); border-radius: 8px; font-size: 14px; outline: none; }
.form-row input:focus { border-color: var(--blue); }

.salon-row, .list-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: var(--bg);
  border-radius: 8px;
  margin-bottom: 8px;
}
.list-row span { flex: 1; }

.hint       { font-size: 13px; color: var(--muted); margin-bottom: 14px; line-height: 1.5; }
.empty-hint { font-size: 13px; color: var(--muted); font-style: italic; margin: 8px 0; }

.btn-detail {
  display: block;
  text-align: center;
  margin-top: 12px;
  padding: 8px;
  background: var(--bg);
  color: var(--blue);
  border-radius: 8px;
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  transition: background .15s;
}
.btn-detail:hover { background: #E3F2FD; }

.total-card {
  background: var(--dark);
  color: white;
  border-radius: 12px;
  padding: 16px 24px;
  margin-top: 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 15px;
}
.total-card b { font-size: 20px; }

@media (max-width: 600px) {
  .salon-grid { grid-template-columns: 1fr; }
  .form-grid  { grid-template-columns: 1fr; }
  .metric-big { font-size: 26px; }
}

/* ── Salon Detail ── */
.detail-section {
  background: var(--white);
  border-radius: 12px;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,.05);
  overflow: hidden;
}
.section-title {
  background: var(--dark);
  color: white;
  padding: 12px 20px;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .3px;
}

/* P&L grid */
.pl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 0;
}
.pl-block {
  padding: 16px 20px;
  border-right: 1px solid var(--border);
}
.pl-block:last-child { border-right: none; }
.pl-block-revenue { background: #F8FFF8; }
.pl-block-profit  { background: #E8F5E9; }
.pl-block-loss    { background: #FFEBEE; }
.pl-block-title {
  font-weight: 700;
  font-size: 13px;
  color: var(--dark);
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: .4px;
}
.pl-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 0;
  border-bottom: 1px solid #F0F0F0;
  font-size: 13px;
}
.pl-row.pl-sub   { padding-left: 12px; color: var(--muted); font-size: 12px; }
.pl-row.pl-alt   { background: #FAFAFA; }
.pl-row.pl-total-row { font-weight: 700; font-size: 14px; border-bottom: 2px solid var(--border); padding: 8px 0; }
.profit-big {
  font-size: 36px;
  font-weight: 800;
  text-align: center;
  padding: 16px 0;
}
.profit-pos { color: #2E7D32; }
.profit-neg { color: #C62828; }

/* Days table */
.days-scroll { overflow-x: auto; padding: 16px 20px; }
.days-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.days-table th {
  background: var(--dark);
  color: white;
  padding: 8px 12px;
  text-align: center;
  font-weight: 600;
  white-space: nowrap;
}
.days-table td {
  padding: 6px 12px;
  border-bottom: 1px solid #F0F0F0;
  text-align: center;
}
.days-table tbody tr:hover { background: #F5F9FF; }
.row-today  { background: #FFF8E1 !important; font-weight: 600; }
.row-ok     { }
.row-miss   { background: #FFF3F3; }
.row-total  { background: var(--dark); color: white; font-weight: 700; }
.row-total td { border: none; color: white; }
.td-num  { text-align: right !important; font-variant-numeric: tabular-nums; }
.td-fact { color: var(--dark); font-weight: 600; }
.td-pct  { font-weight: 600; }
.pct-ok  { color: #2E7D32; }
.pct-miss{ color: #C62828; }

.plan-input {
  width: 90px;
  padding: 3px 6px;
  border: 1px solid var(--border);
  border-radius: 4px;
  text-align: right;
  font-size: 12px;
  background: #FFFDE7;
}
.plan-input:focus { outline: none; border-color: var(--blue); }

/* Simple table */
.simple-table {
  border-collapse: collapse;
  font-size: 13px;
  margin: 12px 20px;
  width: calc(100% - 40px);
}
.simple-table th {
  background: #3B5178;
  color: white;
  padding: 9px 14px;
  text-align: left;
  font-weight: 600;
  white-space: nowrap;
}
.simple-table th.td-num {
  text-align: right;
}
.simple-table td {
  padding: 7px 14px;
  border-bottom: 1px solid #F0F2F5;
  white-space: nowrap;
}
.simple-table tbody tr:nth-child(even) { background: #FAFBFC; }
.simple-table tbody tr:hover { background: #EEF4FF; }

/* ── Wizard / Onboarding ── */
.wizard-wrap  { max-width: 640px; margin: 40px auto; }
.wizard-steps { display: flex; gap: 0; margin-bottom: 24px; }
.step {
  flex: 1;
  text-align: center;
  padding: 10px;
  background: var(--border);
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  border-right: 2px solid white;
}
.step:last-child { border-right: none; border-radius: 0 8px 8px 0; }
.step:first-child { border-radius: 8px 0 0 8px; }
.step.active { background: var(--blue); color: white; }
.step.done   { background: var(--green); color: white; }
.wizard-card {
  background: white;
  border-radius: 16px;
  padding: 32px;
  box-shadow: 0 4px 24px rgba(0,0,0,.08);
}
.wizard-card h2    { font-size: 22px; margin-bottom: 8px; }
.wizard-sub        { color: var(--muted); font-size: 14px; margin-bottom: 24px; line-height: 1.6; }
.wizard-actions    { margin-top: 24px; }
.btn-lg { padding: 12px 24px; font-size: 15px; }

/* ── Settings blocks ── */
.settings-block {
  background: white;
  border-radius: 12px;
  margin-bottom: 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,.04);
  overflow: hidden;
}
.settings-block-title {
  background: var(--dark);
  color: white;
  padding: 12px 20px;
  font-weight: 700;
  font-size: 13px;
}
.settings-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  padding: 20px;
}
.settings-grid-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
}
.field-group { display: flex; flex-direction: column; gap: 5px; }
.field-group label, .field-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .5px;
  display: block;
}
.field-group input, .field-group select {
  padding: 9px 12px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  outline: none;
  transition: border-color .15s;
  width: 100%;
}
.field-group input:focus, .field-group select:focus { border-color: var(--blue); }
.field-hint { font-size: 11px; color: var(--muted); }

.input-with-suffix {
  display: flex;
  align-items: center;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  transition: border-color .15s;
}
.input-with-suffix:focus-within { border-color: var(--blue); }
.input-with-suffix input {
  border: none !important;
  flex: 1;
  border-radius: 0;
}
.suffix {
  background: var(--bg);
  padding: 9px 10px;
  font-size: 13px;
  color: var(--muted);
  font-weight: 600;
  border-left: 1px solid var(--border);
  white-space: nowrap;
}

.field-row-inline {
  display: flex;
  gap: 8px;
}
.field-row-inline input, .field-row-inline select {
  padding: 9px 12px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  outline: none;
}
.field-row-inline input:focus, .field-row-inline select:focus { border-color: var(--blue); }

.field-row-3 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 12px;
  align-items: end;
  padding: 0 20px 16px;
}
.flex-2  { grid-column: span 2; }
.field-action button { width: 100%; }

.block-hint { font-size: 13px; color: var(--muted); padding: 12px 20px 0; line-height: 1.5; }
.extra-costs { padding: 0 20px 20px; border-top: 1px solid var(--border); margin-top: 8px; }
.extra-costs-title { font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; padding: 12px 0 8px; }

.bonus-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 20px;
  border-bottom: 1px solid var(--border);
}
.bonus-name { flex: 1; }
.bonus-val  { font-weight: 600; color: var(--dark); }
.bonus-cost { font-size: 12px; }
.inline-add-form { padding: 16px 20px; }
.empty-hint { color: var(--muted); font-style: italic; font-size: 13px; padding: 12px 20px; }

.admin-table {
  width: calc(100% - 40px);
  margin: 0 20px 12px;
  border-collapse: collapse;
  font-size: 13px;
}
.admin-table th {
  background: var(--bg);
  padding: 8px 12px;
  text-align: left;
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  color: var(--muted);
  vertical-align: middle;
}
.admin-table td {
  padding: 6px 10px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.admin-table input[type="text"],
.admin-table input[type="number"] {
  padding: 6px 10px;
  border: 1.5px solid var(--border);
  border-radius: 6px;
  font-size: 13px;
  outline: none;
  transition: border-color .15s;
  height: 34px;
  box-sizing: border-box;
}
.admin-table input[type="text"]:focus,
.admin-table input[type="number"]:focus { border-color: var(--blue); }
.admin-table select {
  padding: 6px 8px;
  border: 1.5px solid var(--border);
  border-radius: 6px;
  font-size: 13px;
  outline: none;
  height: 34px;
  width: 100%;
  background: white;
  cursor: pointer;
  transition: border-color .15s;
}
.admin-table select:focus { border-color: var(--blue); }
.admin-table .input-with-suffix { height: 34px; }
.admin-table .input-with-suffix input { height: 100%; }
.admin-table .suffix { padding: 0 8px; font-size: 12px; height: 100%; display: flex; align-items: center; }

.form-save-bar {
  display: flex;
  gap: 12px;
  align-items: center;
  position: sticky;
  bottom: 0;
  background: rgba(244, 246, 249, 0.95);
  backdrop-filter: blur(4px);
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  border-radius: 12px 12px 0 0;
  box-shadow: 0 -4px 16px rgba(0,0,0,.08);
  z-index: 50;
  margin: 0 -10px;
}

/* ── Salons list in settings ── */
.salons-list { padding: 12px 20px; }
.salon-list-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  background: var(--bg);
  border-radius: 8px;
  margin-bottom: 8px;
}
.salon-list-info { display: flex; flex-direction: column; gap: 2px; }
.salon-list-actions { display: flex; gap: 8px; }
.muted { color: var(--muted); font-size: 12px; }

.add-salon-block { padding: 16px 20px; border-top: 1px solid var(--border); }
.add-salon-title { font-size: 13px; font-weight: 700; color: var(--muted); margin-bottom: 12px; text-transform: uppercase; }

/* Onboarding salons */
.salons-added { padding: 0 0 16px; }
.salon-added-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--bg);
  border-radius: 8px;
  margin-bottom: 8px;
}
.salon-added-info { display: flex; flex-direction: column; gap: 3px; }
.add-salon-inline { margin-top: 16px; }

/* ── Dashboard summary bar ── */
.summary-bar {
  display: flex;
  gap: 0;
  background: var(--dark);
  border-radius: 12px;
  margin-bottom: 20px;
  overflow: hidden;
}
.summary-item {
  flex: 1;
  padding: 14px 20px;
  border-right: 1px solid rgba(255,255,255,.1);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.summary-item:last-child { border-right: none; }
.summary-label { font-size: 11px; color: rgba(255,255,255,.6); text-transform: uppercase; font-weight: 600; }
.summary-val   { font-size: 20px; font-weight: 800; color: white; }

/* Dashboard card improvements */
.card-section-label { font-size: 10px; text-transform: uppercase; font-weight: 700; color: var(--muted); letter-spacing: .5px; margin-bottom: 4px; }
.card-divider { height: 1px; background: var(--border); margin: 12px 0; }
.month-row { display: flex; align-items: baseline; gap: 8px; margin-bottom: 10px; }
.month-rev { font-size: 18px; font-weight: 700; color: var(--dark); }
.month-clients { font-size: 12px; color: var(--muted); }

.btn-green { background: #E8F5E9 !important; color: #2E7D32 !important; }

code { background: var(--bg); padding: 2px 6px; border-radius: 4px; font-size: 13px; }

@media (max-width: 768px) {
  .settings-grid-2 { grid-template-columns: 1fr; }
  .settings-grid-3 { grid-template-columns: 1fr 1fr; }
  .field-row-3 { grid-template-columns: 1fr 1fr; padding: 0 12px 12px; }
  .summary-bar { flex-direction: column; }
  .summary-item { border-right: none; border-bottom: 1px solid rgba(255,255,255,.1); }
}

/* ── Salon layout: sidebar + content ── */
.salon-layout {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}
.salon-sidebar {
  flex: 0 0 170px;
  background: white;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  position: sticky;
  top: 68px;
}
.sidebar-title {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
  padding: 12px 14px 8px;
  border-bottom: 1px solid var(--border);
}
.sidebar-salon {
  display: block;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid #F0F0F0;
  transition: background .12s;
}
.sidebar-salon:last-child { border-bottom: none; }
.sidebar-salon:hover { background: #F4F6F9; }
.sidebar-salon.active { background: var(--dark); color: white; font-weight: 700; }
.salon-main { flex: 1; min-width: 0; }

/* ── Salon tabs (section switcher: P&L | Дни | ЗП) ── */
.salon-tabs {
  display: flex;
  align-items: center;
  gap: 4px;
  border-bottom: 2px solid var(--border);
  padding-bottom: 0;
  margin-bottom: 0;
}
.tab {
  padding: 10px 18px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  text-decoration: none;
  border-radius: 8px 8px 0 0;
  border: 1px solid transparent;
  border-bottom: none;
  transition: all .15s;
  margin-bottom: -2px;
}
.tab:hover { color: var(--blue); background: rgba(59, 81, 120, 0.08); }
.tab.active {
  color: var(--dark);
  background: white;
  border-color: var(--border);
  border-bottom-color: white;
}
.tab-salon-name {
  margin-left: auto;
  font-size: 12px;
  color: var(--muted);
  padding-right: 4px;
}
.tab-salon-cur {
  color: white !important;
  background: var(--blue) !important;
  border-color: var(--blue) !important;
  border-bottom-color: var(--blue) !important;
}
.tab-sep {
  color: #CCC;
  padding: 0 6px;
  font-size: 16px;
  align-self: center;
  font-weight: 300;
}

/* ── Payroll ── */
.payroll-summary {
  display: flex;
  gap: 0;
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,.05);
}
.ps-item {
  flex: 1;
  padding: 16px 20px;
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ps-item:last-child { border-right: none; }
.ps-total { background: var(--dark); }
.ps-total .ps-label { color: rgba(255,255,255,.6); }
.ps-total .ps-val   { color: white; }
.ps-label { font-size: 11px; text-transform: uppercase; font-weight: 700; color: var(--muted); }
.ps-val   { font-size: 22px; font-weight: 800; color: var(--dark); }

.payroll-scroll { overflow-x: auto; }

.payroll-table {
  border-collapse: collapse;
  font-size: 12px;
  min-width: 100%;
  white-space: nowrap;
}
.payroll-table th {
  background: var(--dark);
  color: white;
  padding: 8px 10px;
  text-align: center;
  font-weight: 600;
  position: sticky;
  top: 0;
  z-index: 2;
}
.payroll-table td { padding: 5px 8px; border-bottom: 1px solid #F0F0F0; }

.col-name {
  min-width: 160px;
  max-width: 180px;
  text-align: left !important;
  position: sticky;
  left: 0;
  background: white;
  z-index: 1;
  border-right: 2px solid var(--border) !important;
}
.payroll-table th.col-name {
  text-align: left !important;
  z-index: 3;
  min-width: 160px;
}
.col-day   { min-width: 70px; text-align: center !important; }
.col-total { min-width: 90px; font-weight: 700; background: #F8F9FA; border-left: 2px solid var(--border) !important; }
.col-today { background: #FFF8E1 !important; }

.row-master-rev td { background: #FAFAFA; }
.row-master-pay td { background: white; }
.row-fot-total td  { background: var(--dark); color: white; font-weight: 700; }
.row-fot-total .col-name { background: var(--dark); color: white; }

.master-name { font-weight: 700; font-size: 13px; }
.master-sub  { font-size: 10px; color: var(--muted); margin-top: 1px; }
.master-pay-label { color: #666; }

/* Cell colors */
.cell-pct  { background: #E8F5E9 !important; }
.cell-guar { background: #FFFDE7 !important; }
.cell-miss { background: #FFEBEE !important; }
.cell-warn { background: #FFF3E0 !important; }

.pay-tag {
  font-size: 9px;
  font-weight: 700;
  display: inline-block;
  margin-left: 3px;
  vertical-align: middle;
  opacity: .7;
}
.tag-pct  { color: #2E7D32; }
.tag-guar { color: #F57F17; }

.pay-total    { font-weight: 700; color: var(--dark); font-size: 13px; }
.fot-total-val{ color: white; font-size: 13px; }
.empty-cell   { color: #CCC; }
.no-bonus     { color: #EF9A9A; font-size: 11px; }

.payroll-legend {
  padding: 10px 16px;
  display: flex;
  gap: 16px;
  font-size: 12px;
  color: var(--muted);
  border-top: 1px solid var(--border);
}
.legend-item { display: flex; align-items: center; gap: 6px; }
.legend-dot  { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.dot-pct  { background: #E8F5E9; border: 1px solid #A5D6A7; }
.dot-guar { background: #FFFDE7; border: 1px solid #FFE082; }

/* ── Payroll redesign ── */
.zp-summary-bar {
  display: flex;
  align-items: center;
  gap: 0;
  background: white;
  border-radius: 10px;
  padding: 14px 20px;
  margin-bottom: 16px;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
.zp-summary-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 20px;
}
.zp-summary-item:first-child { padding-left: 0; }
.zp-summary-divider {
  width: 1px;
  height: 36px;
  background: #E0E6F0;
  flex-shrink: 0;
}
.zp-summary-label {
  font-size: 10px;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: .04em;
}
.zp-summary-val {
  font-size: 18px;
  font-weight: 800;
  color: var(--dark);
}
.zp-summary-total .zp-summary-val { color: #1F3864; }

.payroll-section-title {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--muted);
  margin-bottom: 12px;
}

.payroll-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 16px;
  margin-bottom: 8px;
}

.payroll-card {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,.05);
}

.pc-header {
  display: flex;
  align-items: center;
  padding: 14px 16px;
  background: var(--dark);
  gap: 10px;
}
.pc-name { font-size: 15px; font-weight: 700; color: white; flex: 1; }
.pc-summary { display: flex; flex-direction: column; gap: 2px; align-items: flex-end; }
.pc-days { font-size: 11px; color: rgba(255,255,255,.5); }
.pc-rev  { font-size: 11px; color: rgba(255,255,255,.6); }
.pc-total-pay {
  font-size: 20px;
  font-weight: 800;
  color: white;
  margin-left: 16px;
  white-space: nowrap;
}

.pc-days-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.pc-days-table th {
  background: #F8F9FA;
  padding: 7px 12px;
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
}
.pc-days-table td {
  padding: 7px 12px;
  border-bottom: 1px solid #F5F5F5;
}
.pc-days-table tfoot td {
  border-top: 2px solid var(--border);
  border-bottom: none;
  font-weight: 700;
  background: #F8F9FA;
}

.td-date { color: var(--muted); font-variant-numeric: tabular-nums; }
.td-num  { text-align: right !important; font-variant-numeric: tabular-nums; }
.td-pay  { font-weight: 700; color: var(--dark); }
.td-basis { text-align: center !important; }
.muted-cell { color: #CCC; }

/* Row colors */
.row-on-pct  { background: #F1F8E9; }
.row-on-guar { background: #FFFDE7; }
.row-neutral { background: white; }
.row-today   { outline: 2px solid #FF9800 !important; outline-offset: -2px; }

/* Badges */
.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
}
.badge-pct  { background: #C8E6C9; color: #2E7D32; }
.badge-guar { background: #FFF9C4; color: #F57F17; }
.badge-miss { background: #FFCDD2; color: #C62828; }

.pc-total-row { font-weight: 700; }
.pc-total-row td { background: #F0F4FF !important; color: var(--dark); }

.fot-section-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #F0F4FF;
  border-radius: 8px;
  padding: 10px 16px;
  font-weight: 700;
  font-size: 14px;
  margin-top: 4px;
  margin-bottom: 4px;
}

/* % ФОТ по дням — плитки */
.fot-by-day-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}
.fbd-item {
  background: white;
  border-radius: 8px;
  padding: 10px 12px;
  text-align: center;
  min-width: 64px;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
  border-top: 3px solid transparent;
}
.fbd-ok   { border-top-color: #4CAF50; }
.fbd-warn { border-top-color: #FF9800; }
.fbd-bad  { border-top-color: #F44336; }
.fbd-avg  { border-top-color: var(--dark); background: var(--dark); }
.fbd-avg .fbd-date, .fbd-avg .fbd-pct, .fbd-avg .fbd-rev { color: white; }
.fbd-date { font-size: 11px; color: var(--muted); font-weight: 700; }
.fbd-pct  { font-size: 18px; font-weight: 800; color: var(--dark); margin: 2px 0; }
.fbd-rev  { font-size: 10px; color: var(--muted); }

.fot-legend { display: flex; gap: 16px; font-size: 12px; margin-bottom: 24px; }
.fot-legend-item { padding: 4px 10px; border-radius: 20px; font-weight: 600; }
.fot-ok   { background: #C8E6C9; color: #2E7D32; }
.fot-warn { background: #FFE0B2; color: #E65100; }
.fot-bad  { background: #FFCDD2; color: #C62828; }

@media (max-width: 600px) {
  .payroll-cards { grid-template-columns: 1fr; }
  .fot-totals { flex-direction: column; gap: 8px; }
  .fot-plus { display: none; }
}

/* ── ЗП горизонтальная таблица (Excel-стиль) ── */
.zp-legend {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
  flex-wrap: wrap;
  font-size: 12px;
  font-weight: 600;
}
.zp-legend span {
  padding: 3px 10px;
  border-radius: 20px;
}
.zp-legend-pct   { background: #C8E6C9; color: #2E7D32; }
.zp-legend-guar  { background: #FFF9C4; color: #F57F17; }
.zp-legend-cosm  { background: #EDE7F6; color: #512DA8; }
.zp-legend-adm   { background: #D9E1F2; color: #1F3864; }
.zp-legend-bonus { background: #C8E6C9; color: #1A5C2A; font-style: italic; }

.zp-wrap {
  overflow-x: auto;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
  margin-bottom: 24px;
}

.zp-table {
  border-collapse: collapse;
  font-size: 12px;
  white-space: nowrap;
  width: 100%;
}

/* Sticky name column */
.zp-name-col {
  position: sticky;
  left: 0;
  background: white;
  z-index: 2;
  min-width: 130px;
  max-width: 160px;
  padding: 6px 8px !important;
  text-align: left;
  white-space: normal;
  word-break: break-word;
}

.zp-table thead .zp-name-col {
  background: #1F3864;
  color: white;
  font-weight: 700;
  z-index: 3;
}

/* Day header */
.zp-hdr-num th, .zp-hdr-dow th {
  background: #1F3864;
  color: white;
  padding: 5px 4px;
  text-align: center;
  border: 1px solid #2E75B6;
}
.zp-hdr-dow th {
  background: #2E75B6;
  font-size: 10px;
  padding: 3px 4px;
}
.zp-day-hdr {
  min-width: 34px;
  font-size: 11px;
  font-weight: 700;
}
.zp-wk {
  background: #8B1A1A !important;
  color: #FFD0D0 !important;
}
.zp-hdr-dow .zp-wk { background: #B22222 !important; }

/* Sum columns */
.zp-sum-col {
  min-width: 60px;
  background: #2E75B6 !important;
  font-size: 11px;
  font-weight: 700;
}

/* Section header row */
.zp-section td {
  background: #2C4A7C;
  color: #BDD7FF;
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 6px 10px;
  position: sticky;
  left: 0;
  border-top: 3px solid #1F3864;
}
.zp-section-adm td { background: #1F3864; color: #BDD7FF; }

/* Master rows */
.zp-master-row td {
  border: 1px solid #E8E8E8;
}
.zp-alt .zp-name-col { background: #F9F9F9; }
.zp-alt td { background: #F9F9F9; }
.zp-master-row .zp-name-col {
  font-weight: 600;
  font-size: 12px;
  color: #222;
}

/* Day cells */
.zp-cell {
  text-align: center;
  padding: 4px 2px;
  font-size: 10px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  border: 1px solid #E8E8E8;
}
.zp-pct   { background: #E8F5E9 !important; color: #2E7D32 !important; }
.zp-guar  { background: #FFF9C4 !important; color: #795800 !important; }
.zp-cosm  { background: #EDE7F6 !important; color: #512DA8 !important; }
.zp-cosm-tag { font-size: 11px; opacity: .7; }
.zp-adm   { background: #D9E1F2 !important; color: #1F3864 !important; }
.zp-adm-empty { background: #EEF1F8; }
.zp-bonus { background: #C8E6C9; color: #1A5C2A; font-style: italic; }
.zp-empty { background: white; }

/* Total columns */
.zp-total {
  text-align: right;
  padding: 5px 8px;
  font-size: 11px;
  font-weight: 700;
  background: #EBF3FB;
  border: 1px solid #C5D8EE;
  color: #1F3864;
  font-variant-numeric: tabular-nums;
}
.zp-shifts, .zp-avg {
  color: #555;
  font-weight: 600;
}

/* Bonus sub-row (master piercings/gel) */
.zp-bonus-subrow td { border: 1px solid #E8EEF8; background: #EEF4FB; }
.zp-bonus-subrow .zp-name-col { background: #EEF4FB; position: sticky; left: 0; z-index: 2; }
.zp-bonus-incl { color: #7A9CC0 !important; font-size: 11px !important; font-style: italic; }
.zp-bonus-cell { position: relative; vertical-align: top; padding: 3px 2px !important; }
.zp-bonus-hint { font-size: 9px; color: #5577AA; line-height: 1.2; white-space: nowrap; }

/* Bonus row (admin % of revenue) */
.zp-bonus-row td { border: 1px solid #E8E8E8; background: #F1F8F1; }
.zp-bonus-row .zp-name-col {
  background: #F1F8F1;
  position: sticky;
  left: 0;
  z-index: 2;
}
.zp-bonus-name {
  font-size: 11px !important;
  font-weight: 400 !important;
  color: #1A5C2A !important;
  font-style: italic;
}

/* FOT total row */
.zp-fot-row td {
  background: #162B50;
  color: #BDD7FF;
  font-weight: 700;
  font-size: 12px;
  border: 1px solid #2E75B6;
  padding: 8px 8px;
  border-bottom: 4px solid #0D1E38;
}
.zp-fot-row .zp-name-col {
  position: sticky;
  left: 0;
  z-index: 2;
  background: #1F3864;
}
.zp-fot-row .zp-total {
  background: #162B50;
  color: #7EC8F4;
  font-size: 13px;
  border-color: #2E75B6;
}

.zp-rate-hint {
  font-size: 10px;
  font-weight: 400;
  color: var(--muted);
  margin-left: 4px;
}
.zp-plan-miss {
  background: #FFF0F0;
  color: #CC0000;
  font-size: 10px;
}
/* % ФОТ строка в таблице ЗП */
.zp-fotpct-row td { border: 1px solid #E8E8E8; }
.zp-fotpct-row .zp-name-col {
  background: #FFF9C4;
  color: #795800;
  font-size: 11px;
  font-style: italic;
  font-weight: 600;
  position: sticky; left: 0; z-index: 2;
}
.zp-fotpct     { font-size: 11px; font-weight: 700; }
.zp-fotpct-ok  { background: #E8F5E9; color: #2E7D32; }
.zp-fotpct-warn{ background: #FFF9C4; color: #795800; }
.zp-fotpct-bad { background: #FFCDD2; color: #C62828; }
.zp-fotpct-total { background: #FFF9C4; color: #795800; font-size: 12px; font-weight: 700; }

/* ── P&L многоколоночная таблица ── */
.pl-wrap {
  overflow-x: auto;
  border-radius: 10px;
  box-shadow: 0 1px 6px rgba(0,0,0,.07);
  margin-bottom: 20px;
  background: white;
  border: 1px solid #DDE3EB;
}
.pl-mtable {
  border-collapse: collapse;
  font-size: 13px;
  table-layout: auto;
  width: 100%;
}
/* Override display:flex from old .pl-row (used in salon_detail divs) */
.pl-mtable tr { display: table-row !important; padding: 0 !important; }

/* ── Шапка ── */
.pl-mtable thead th {
  background: #3B5178;
  color: white;
  padding: 11px 20px;
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  border-right: 1px solid rgba(255,255,255,.12);
  white-space: nowrap;
}
.pl-label-col {
  text-align: left !important;
  min-width: 220px;
  background: #3B5178;
}
.pl-salon-col { min-width: 160px; text-align: center; }
.pl-total-col { min-width: 160px; text-align: center; background: #2A3F5F !important; border-left: 2px solid rgba(255,255,255,.15) !important; }

/* ── Секции ── */
.pl-section td {
  background: #F1F4F8;
  color: #3B5178;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .7px;
  padding: 5px 20px;
  border-top: 2px solid #DDE3EB;
  border-bottom: 1px solid #DDE3EB;
}
.pl-section-first td { border-top: none; }

/* ── Строки ── */
.pl-row { border-bottom: 1px solid #F0F2F5; }

.pl-label {
  padding: 9px 20px;
  font-size: 13px;
  font-weight: 600;
  color: #1E293B;
  white-space: nowrap;
  border-right: 1px solid #EEF1F5;
}

/* Подстроки */
.pl-sub .pl-label {
  font-size: 12px;
  font-weight: 400;
  color: #64748B;
  padding-left: 34px;
}
.pl-sub td { background: #FAFBFC; }
.pl-sub .pl-total { background: #F2F7FD !important; }

/* ── Значения ── */
.pl-val {
  text-align: center;
  padding: 9px 20px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  font-size: 13px;
  color: #1E293B;
}
.pl-sub .pl-val { font-size: 12px; color: #64748B; }

/* Цвета */
.pl-rev  { font-weight: 700; color: #0F4C81; font-size: 14px !important; }
.pl-cost { color: #1E293B; }

/* Колонка ИТОГО */
.pl-total {
  background: #EDF3FB !important;
  font-weight: 700;
  color: #0F4C81;
  border-left: 2px solid #C8D8EE;
}

/* Строка выручки */
.pl-rev-row td { background: #F0F9F0; }
.pl-rev-row .pl-total { background: #D4EDDA !important; }

/* Итого постоянные */
.pl-fixed-total td { background: #F8F5FF; border-top: 1px solid #DDD0F0; }
.pl-fixed-total .pl-label { font-weight: 700; }
.pl-fixed-total .pl-total { background: #EBE0FF !important; }

/* Итого расходов */
.pl-costs-total td { background: #FFF5F5; border-top: 2px solid #FFC5C5; }
.pl-costs-total .pl-label { font-weight: 700; }
.pl-costs-total .pl-val { color: #C0392B; font-weight: 700; }
.pl-costs-total .pl-total { background: #FFDEDE !important; }

/* Разделитель */
.pl-divider td { height: 3px; background: #DDE3EB; padding: 0; }

/* ── Прибыль ── */
.pl-profit-row td { padding: 12px 20px; background: #FAFBFC; border-bottom: 2px solid #DDE3EB; }
.pl-profit-row .pl-label { font-size: 14px; font-weight: 800; color: #1E293B; }
.pl-profit-row .pl-val { font-size: 17px; font-weight: 800; }
.pl-profit-pos { color: #16A34A; }
.pl-profit-neg { color: #DC2626; }
.pl-warn-mid  { color: #D97706; font-weight: 700; }
.pl-warn-high { color: #DC2626; font-weight: 700; }

/* Ссылки на детали салонов */
.section-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: #64748B;
  margin: 20px 0 8px;
}
.salon-links { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; margin-bottom: 24px; }
.salon-link-btn {
  display: inline-block;
  padding: 6px 14px;
  background: white;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 12px;
  color: var(--dark);
  text-decoration: none;
  transition: all .15s;
}
.salon-link-btn:hover { background: var(--dark); color: white; border-color: var(--dark); }
.pl-links-row td { background: #F8FAFC; border-top: 2px solid #DDE3EB; }

/* ── Сегодня карточки ── */
.today-bar {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.today-card {
  background: white;
  border-radius: 10px;
  padding: 14px 18px;
  min-width: 160px;
  box-shadow: 0 2px 6px rgba(0,0,0,.06);
  border-top: 3px solid var(--border);
  flex: 1;
}
.tc-ok   { border-top-color: #4CAF50; }
.tc-warn { border-top-color: #FF9800; }
.tc-total{ border-top-color: var(--dark); background: var(--dark); }
.tc-total .tc-name, .tc-total .tc-rev, .tc-total .tc-clients { color: white; }
.tc-name    { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; margin-bottom: 4px; }
.tc-rev     { font-size: 22px; font-weight: 800; color: var(--dark); }
.tc-plan-bar{ height: 4px; background: #E0E0E0; border-radius: 2px; margin: 6px 0 4px; }
.tc-fill    { height: 100%; border-radius: 2px; transition: width .3s; }
.fill-ok    { background: #4CAF50; }
.fill-warn  { background: #FF9800; }
.tc-plan-label { font-size: 11px; color: var(--muted); margin-top: 4px; }
.tc-noplan { color: #bbb; font-style: italic; }
.tc-clients { font-size: 11px; color: var(--muted); margin-top: 4px; }
.tc-stats-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.tc-stat { font-size: 11px; color: var(--muted); background: #f1f4f8; border-radius: 4px; padding: 2px 6px; }
.tc-pct-ok { color: #2E7D32; }
.tc-pct-miss { color: #E65100; }
.tc-total .tc-plan-label { color: rgba(255,255,255,0.8); }
.tc-total .tc-stat { background: rgba(255,255,255,0.15); color: rgba(255,255,255,0.9); }

/* ── Дни многоколоночная таблица ── */
.days-wrap {
  overflow-x: auto;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
  background: white;
  margin-bottom: 4px;
}
.days-mtable {
  border-collapse: collapse;
  font-size: 13px;
}
.days-hdr-salon th, .days-hdr-cols th {
  background: var(--dark);
  color: white;
  padding: 8px 10px;
  border: 1px solid #2E75B6;
  font-size: 11px;
}
.days-hdr-cols th { background: #2E75B6; padding: 5px 8px; }
.days-salon-hdr { text-align: center; font-size: 12px; font-weight: 700; }
.days-date-col { position: sticky; left: 0; min-width: 65px; background: var(--dark); z-index: 3; }
.days-dow-col  { position: sticky; left: 65px; min-width: 40px; background: var(--dark); z-index: 3; }
.days-col-plan  { min-width: 90px; text-align: right; }
.days-col-fact  { min-width: 90px; text-align: right; }
.days-col-pct   { min-width: 55px; text-align: center; }
.days-col-admin { min-width: 90px; text-align: center; }
.admin-sel {
  font-size: 12px; padding: 2px 4px;
  border: 1px solid var(--border); border-radius: 4px;
  background: white; width: 100%; max-width: 90px;
}

.days-mtable tbody tr td { border-bottom: 1px solid #F0F0F0; padding: 6px 10px; }
.days-date {
  position: sticky; left: 0; z-index: 2;
  background: white;
  font-size: 12px; font-weight: 600; color: var(--muted);
  white-space: nowrap;
}
.days-dow {
  position: sticky; left: 65px; z-index: 2;
  background: white;
  font-size: 12px; color: var(--muted);
}
.days-weekend { color: #CC0000 !important; }

.row-today .days-date, .row-today .days-dow { background: #FFF8E1 !important; }
.row-today td { background: #FFF8E1; }
.row-miss  td { background: #FFFDE7; }
.row-ok    td { background: white; }
.row-total td { background: var(--dark); color: white; font-weight: 700; border: none; }
.row-total .days-date, .row-total .days-dow { background: var(--dark) !important; color: white; }

td.td-fact { font-weight: 700; color: var(--dark); }
.pct-ok   { color: #2E7D32; font-weight: 700; }
.pct-miss { color: #E65100; font-weight: 600; }
.plan-inp {
  width: 80px; border: 1px solid #DDD; border-radius: 4px;
  padding: 3px 6px; text-align: right; font-size: 12px;
  background: #FFF9C4;
}
.plan-inp:focus { outline: none; border-color: var(--blue); }
.row-future td { opacity: .55; }
.days-future { color: #AAA !important; }

/* ── История ── */
.hist-wrap {
  overflow-x: auto;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
  background: white;
  margin-bottom: 24px;
}
.hist-table {
  border-collapse: collapse;
  font-size: 13px;
  width: 100%;
}
.hist-table thead th {
  background: var(--dark);
  color: white;
  padding: 10px 14px;
  font-size: 11px;
  font-weight: 700;
  text-align: center;
  border: 1px solid #2E75B6;
  white-space: nowrap;
}
.hist-month-col { text-align: left !important; min-width: 120px; position: sticky; left: 0; background: var(--dark) !important; z-index: 2; }
.hist-val-col   { min-width: 130px; }
.hist-total-col { background: #162B50 !important; }
.hist-cpd-col   { background: #2E5C8A !important; }

.hist-table tbody tr td { border-bottom: 1px solid #F0F0F0; padding: 8px 14px; text-align: right; }
.hist-month {
  position: sticky; left: 0; z-index: 2;
  background: white;
  text-align: left !important;
  font-weight: 600; font-size: 13px;
}
.hist-month-cur { color: var(--blue); }
.hist-val       { font-variant-numeric: tabular-nums; }
.hist-has-data  { color: var(--dark); font-weight: 600; }
.hist-no-data   { color: #CCC; font-size: 12px; }
.hist-total     { background: #EBF3FB; font-weight: 700; }
.hist-margin    { color: #555; }
.hist-cpd       { color: #555; font-size: 12px; }
.hist-profit-pos{ color: #2E7D32; font-weight: 700; }
.hist-profit-neg{ color: #C62828; font-weight: 700; }
.hist-current td { background: #F1F8E9 !important; }
.hist-current .hist-month { background: #F1F8E9; }
.hist-empty td  { opacity: .5; }
.hist-year-total td { background: var(--dark); color: white; font-weight: 700; border: none; padding: 10px 14px; }
.hist-year-total .hist-month { background: var(--dark); color: white; }

/* ── Admin schedule grid ── */
.sched-table .sched-cell {
  width: 26px !important;
  min-width: 26px !important;
  height: 28px !important;
  line-height: 28px !important;
  cursor: pointer !important;
  background: #F1F4F8 !important;
  border: 1px solid #E0E6EE !important;
  transition: background .1s;
  padding: 0 !important;
  text-align: center;
  user-select: none;
}
.sched-table .sched-cell:hover { background: #C8D6EA !important; }
.sched-table .sched-cell.sched-on { background: #3B5178 !important; border-color: #2A3F5F !important; }
.sched-table .sched-cell.sched-wk { background: #E8EEF8 !important; }
.sched-table .sched-cell.sched-wk.sched-on { background: #5B7EB8 !important; border-color: #3B5178 !important; }


/* ── Month navigation ── */
.month-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 0 14px;
}
.month-nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: #f0f4fa;
  color: #3B5178;
  font-size: 18px;
  font-weight: 700;
  text-decoration: none;
  border: 1px solid #d0daea;
  line-height: 1;
  user-select: none;
  transition: background .15s;
}
.month-nav-btn:hover { background: #dce6f5; color: #1F3864; }
.month-nav-disabled { opacity: .35; cursor: default; pointer-events: none; }
.month-nav-label {
  font-size: 14px;
  font-weight: 600;
  color: #1F3864;
  min-width: 120px;
  text-align: center;
}

/* ── Salon switcher bar (replaces sidebar on all salon pages) ── */
.salon-switcher-bar {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.ss-btn {
  display: inline-block;
  padding: 4px 14px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  color: #3B5178;
  background: #EEF4FB;
  border: 1px solid #C8D8EE;
  text-decoration: none;
  white-space: nowrap;
  transition: background .15s;
}
.ss-btn:hover { background: #d8e8f8; }
.ss-btn.active { background: #3B5178; color: white; border-color: #2A3F5F; }