/* ══════════════════════════════════════════════════
   KAIZER CRM — Global Styles
══════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
.no-spinner::-webkit-inner-spin-button, .no-spinner::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.no-spinner { -moz-appearance: textfield; }
html {
  overflow-x: hidden;
  max-width: 100%;
}

body {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 13px;
  background: #e2e2e2;
  color: #333;
  min-height: 100vh;
  overflow-x: hidden;
}

a { color: #4466dd; text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── BUTTONS ────────────────────────────────────── */
/* Every button caption reads in capitals, wherever the button lives — including
   ones built by app.js with inline styles. Lists of values that only look like
   buttons (the payment-method options) keep their own casing. */
button,
a.bday-send-btn, a.bday-sms-btn, a.bday-sent-btn,
a.btn-primary, a.btn-secondary, a.btn-header, a.btn-light {
  text-transform: uppercase;
}
.pay-method-menu button { text-transform: none; }

.btn-ktip {
  background: linear-gradient(to bottom, #f8c0c0, #f09090);
  color: #fff;
  border: none;
  border-bottom: 4px solid #d06060;
  padding: 7px 18px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  box-shadow: 0 4px 6px rgba(0,0,0,0.2);
  transition: all 0.1s;
  white-space: nowrap;
  min-width: 70px;
  text-align: center;
}
.btn-ktip:hover { background: linear-gradient(to bottom, #fad0d0, #f5a0a0); }
.btn-ktip:active { border-bottom-width: 1px; transform: translateY(3px); box-shadow: 0 1px 3px rgba(0,0,0,0.2); }
.btn-primary {
  background: linear-gradient(to bottom, #dd3333, #bb1a1a);
  color: #fff;
  border: none;
  border-bottom: 4px solid #881111;
  padding: 7px 18px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  box-shadow: 0 4px 6px rgba(0,0,0,0.2);
  transition: all 0.1s;
}
.btn-primary:hover { background: linear-gradient(to bottom, #ee4444, #cc2222); }
.btn-primary:active { border-bottom-width: 1px; transform: translateY(3px); box-shadow: 0 1px 3px rgba(0,0,0,0.2); }
.btn-primary.active { background: #991515; }

.btn-secondary {
  background: linear-gradient(to bottom, #999, #777);
  color: #fff;
  border: none;
  border-bottom: 4px solid #555;
  padding: 7px 18px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  box-shadow: 0 4px 6px rgba(0,0,0,0.2);
  transition: all 0.1s;
}
.btn-secondary:hover { background: linear-gradient(to bottom, #aaa, #888); }
.btn-secondary:active { border-bottom-width: 1px; transform: translateY(3px); box-shadow: 0 1px 3px rgba(0,0,0,0.2); }

.btn-danger {
  background: linear-gradient(to bottom, #dd3333, #bb1a1a);
  color: #fff;
  border: none;
  border-bottom: 4px solid #881111;
  padding: 7px 18px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  box-shadow: 0 4px 6px rgba(0,0,0,0.2);
  transition: all 0.1s;
}
.btn-danger:hover { background: linear-gradient(to bottom, #ee4444, #cc2222); }
.btn-danger:active { border-bottom-width: 1px; transform: translateY(3px); box-shadow: 0 1px 3px rgba(0,0,0,0.2); }

/* ── INPUTS ─────────────────────────────────────── */
.input-field {
  border: 1px solid #ccc;
  border-radius: 3px;
  padding: 5px 8px;
  font-size: 13px;
  outline: none;
  background: #fff;
  height: 30px;
}
.input-field:focus { border-color: #3d6ee4; }

.select-field {
  border: 1px solid #ccc;
  border-radius: 3px;
  padding: 4px 6px;
  font-size: 13px;
  background: #fff;
  height: 30px;
  outline: none;
}
.select-field:focus { border-color: #3d6ee4; }

textarea {
  border: 1px solid #ccc;
  border-radius: 3px;
  padding: 6px 8px;
  font-size: 13px;
  font-family: inherit;
  resize: vertical;
  outline: none;
  background: #fff;
}
textarea:focus { border-color: #3d6ee4; }

/* ══════════════════════════════════════════════════
   LOGIN PAGE
══════════════════════════════════════════════════ */
.login-bg {
  position: fixed;
  inset: 0;
  background: #000;
  z-index: 0;
}
.login-wrap {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}
.login-box {
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  width: 360px;
  border: 2px solid #cc3333;
  box-shadow: 0 6px 24px rgba(0,0,0,0.38);
}
.login-logo {
  background: #fff;
  padding: 20px;
  text-align: center;
  border-bottom: 1px solid #eee;
}
.login-body {
  padding: 24px;
}
.form-row-login {
  margin-bottom: 14px;
}
.form-row-login label {
  display: block;
  font-size: 12px;
  color: #666;
  margin-bottom: 4px;
  font-weight: 600;
}
.form-row-login input {
  width: 100%;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 8px 10px;
  font-size: 13px;
  outline: none;
}
.form-row-login input:focus { border-color: #3d6ee4; }
.login-btn-wrap { text-align: center; margin-top: 18px; }
.login-btn-wrap .btn-primary { width: 100%; padding: 10px; font-size: 14px; }
.login-error {
  background: #fee;
  border: 1px solid #fbb;
  color: #c33;
  padding: 8px 10px;
  border-radius: 4px;
  margin-bottom: 12px;
  font-size: 12px;
}

/* ══════════════════════════════════════════════════
   LOGO BLOCK
══════════════════════════════════════════════════ */
.logo-block {
  display: inline-block;
  background: linear-gradient(to bottom, #2a2a2a, #111);
  color: #fff;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: 3px;
  padding: 6px 14px;
  border-radius: 3px;
  border-top: 1px solid #555;
  border-bottom: 4px solid #000;
  box-shadow:
    0 4px 0 #000,
    0 6px 12px rgba(0,0,0,0.5),
    inset 0 1px 0 rgba(255,255,255,0.12);
  text-shadow: 0 1px 3px rgba(0,0,0,0.6);
  transition: transform 0.1s, box-shadow 0.1s, border-bottom-width 0.1s;
  cursor: default;
}
.logo-block:active {
  transform: translateY(3px);
  border-bottom-width: 1px;
  box-shadow: 0 1px 0 #000, 0 2px 4px rgba(0,0,0,0.4);
}
.logo-block.small {
  font-size: 14px;
  letter-spacing: 2px;
  padding: 4px 10px;
  border-bottom-width: 3px;
  box-shadow:
    0 3px 0 #000,
    0 5px 8px rgba(0,0,0,0.4),
    inset 0 1px 0 rgba(255,255,255,0.1);
}

/* ══════════════════════════════════════════════════
   MAIN APP LAYOUT
══════════════════════════════════════════════════ */
.top-header {
  background: #fff;
  border-bottom: 1px solid #ddd;
  padding: 8px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 1px 6px rgba(0,0,0,0.08);
}
.header-right {
  display: flex;
  align-items: center;
  gap: 14px;
}
.header-user { font-size: 12px; color: #666; }
.logout-link {
  font-size: 12px;
  font-weight: 600;
  color: #8b1a1a;
  background: #fff0f0;
  border: 1px solid #e0a0a0;
  border-radius: 5px;
  padding: 5px 12px;
  white-space: nowrap;
  text-decoration: none;
  display: inline-block;
}
.logout-link:hover { background: #fde0e0; text-decoration: none; color: #8b1a1a; }

/* Settings-style pages now span the full page width like everywhere else, so cap
   the fields themselves — a text input stretched to 1200px is hard to read. */
@media (min-width: 901px) {
  #view-settings input, #view-settings select, #view-settings textarea,
  #view-admin input, #view-admin select,
  #view-stg-business input, #view-stg-business select, #view-stg-business textarea,
  #view-stg-google-cal input, #view-stg-google-cal select,
  #view-stg-email input, #view-stg-email select,
  #view-stg-sms input, #view-stg-sms select, #view-stg-sms textarea,
  #view-stg-booking input, #view-stg-booking select, #view-stg-booking textarea {
    max-width: 620px;
  }
  #view-settings input[type="checkbox"], #view-admin input[type="checkbox"],
  #view-stg-business input[type="checkbox"], #view-stg-google-cal input[type="checkbox"],
  #view-stg-email input[type="checkbox"], #view-stg-sms input[type="checkbox"],
  #view-stg-booking input[type="checkbox"] { max-width: none; }
}

/* One page width for every block — the only place it is set. Views used to
   override this inline (600px … 100%), which made cards jump when switching. */
.app-container {
  max-width: 1600px;
  margin: 0 auto;
  padding: 16px 16px 40px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Masters / Services table containers */
#view-masters .card { overflow-x: auto; -webkit-overflow-scrolling: touch; min-width: 0; }
#view-services .card { overflow-x: hidden; min-width: 0; }

/* ── CARD ───────────────────────────────────────── */
.card {
  background: #f5f5f5;
  border: 1px solid #ddd;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 0 12px rgba(0,0,0,0.15);
}
.card-header {
  background: #444;
  color: #fff;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 600;
}
.card-body { padding: 0; }

/* ── TOP NAV CARD ───────────────────────────────── */
.top-nav-card {
  padding: 16px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  background: #f5f5f5;
  border-radius: 10px;
}
/* Analytics filter card: soft gray shadow all around (like the other filter bars) */
#view-analytics .top-nav-card {
  box-shadow: 0 0 14px rgba(0, 0, 0, 0.18);
}
/* Gray shadow all around every date-entry field (mm/dd/yyyy, MM/DD/YYYY, MM/DD/YY)
   and the Email/SMS Log client-filter search boxes */
input[placeholder*="dd/yy" i],
#el-filter-client,
#sl-filter-client {
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.2);
}

/* ── FORM ROWS ──────────────────────────────────── */
.form-row {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 6px 16px;
  background: #fff;
  border-bottom: 1px solid #eee;
}
.form-row.alt { background: #f8f8f8; }
.form-row:last-child { border-bottom: none; }

.form-label {
  width: 220px;
  min-width: 220px;
  font-size: 13px;
  color: #444;
  font-weight: 500;
  padding-right: 12px;
}
/* Indent settings-page field labels 2mm to the right */
#view-stg-email .form-label,
#view-stg-templates .form-label,
#view-stg-sms .form-label,
#view-stg-booking .form-label { padding-left: 2mm; }
.form-control-wrap {
  flex: 1;
  display: flex;
  align-items: center;
}
.form-control-wrap .input-field,
.form-control-wrap .select-field,
.form-control-wrap .medium-input,
.form-control-wrap .form-input-std { width: 320px !important; max-width: 320px !important; box-sizing: border-box; }

/* inline groups */
.inline-group { gap: 8px; align-items: center; flex-wrap: wrap; }
.inline-label { font-size: 12px; color: #555; font-weight: 500; }
.city-input { width: 120px; }
.state-select { width: 90px; }
.zip-input { width: 70px; }
.form-input-std { width: 320px !important; max-width: 320px !important; box-sizing: border-box; }
.phone-part { width: 52px; text-align: center; }

/* radio / checkbox */
/* All checkboxes red brand color by default (desktop, tablet & phone). Header
   select-alls that need white keep it via their inline accent-color:#fff. */
input[type="checkbox"] { accent-color: #cc3333; }
/* Agreement title always reads as two lines: service, then what the document is */
.contract-doc-subtitle .cds-part { display: block; }
.row-cb, #select-all-cb, .lead-cb, #leads-select-all { accent-color: #cc3333; }
.campaign-cb, #campaign-select-all { accent-color: #cc3333; }
.el-cb, #el-select-all { accent-color: #cc3333 !important; }
.radio-group { gap: 20px; }
.radio-label { display: flex; align-items: center; gap: 5px; cursor: pointer; }
.checkbox-group { display: flex; gap: 40px; row-gap: 8px; flex-wrap: wrap; }
.checkbox-col { display: flex; flex-direction: column; gap: 6px; }
.check-label { display: flex; align-items: center; gap: 6px; cursor: pointer; }

.form-footer-btns {
  padding: 14px 16px;
  display: flex;
  gap: 10px;
  background: #f5f5f5;
}

/* Profile layout with photo */
.profile-layout { display: flex; align-items: flex-start; gap: 16px; }
.profile-info { flex: 1; min-width: 0; }
.profile-photo-col { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 16px 8px; }
.profile-photo-wrap {
  position: relative;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  overflow: hidden;
  cursor: pointer;
  border: 2px solid #ccc;
  background: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 6px 20px rgba(0,0,0,0.18), 0 2px 8px rgba(0,0,0,0.12);
}
.profile-photo-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.profile-photo-placeholder { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.profile-photo-overlay {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: rgba(0,0,0,0.5);
  color: #fff;
  font-size: 11px;
  text-align: center;
  padding: 5px 0;
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
}
.profile-photo-wrap:hover .profile-photo-overlay { opacity: 1; }
.profile-photo-delete {
  font-size: 11px;
  color: #999;
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px 6px;
}
.profile-photo-delete:hover { color: #cc2222; }
.profile-photo-change {
  font-size: 11px;
  color: #555;
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px 6px;
}
.profile-photo-change:hover { color: #333; }

#client-photo-lightbox {
  position: fixed; inset: 0; background: rgba(0,0,0,0.88);
  z-index: 9999; display: flex; align-items: center; justify-content: center;
  cursor: zoom-out;
}
#client-photo-lightbox img {
  max-width: 90vw; max-height: 90vh; border-radius: 8px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.6); cursor: default; display: block;
}
#client-photo-lightbox button {
  position: absolute; top: 18px; right: 22px; background: rgba(255,255,255,0.15);
  border: none; color: #fff; font-size: 22px; width: 40px; height: 40px;
  border-radius: 50%; cursor: pointer; display: flex; align-items: center;
  justify-content: center; transition: background 0.2s;
}
#client-photo-lightbox button:hover { background: rgba(255,255,255,0.3); }

/* Profile view rows */
.profile-row {
  display: flex;
  padding: 8px 16px;
  border-bottom: 1px solid #eee;
  background: #fff;
}
.profile-row:nth-child(even) { background: #f8f8f8; }
.profile-key {
  width: 130px;
  min-width: 130px;
  font-size: 12px;
  color: #666;
  font-weight: 600;
}
.profile-val { font-size: 13px; color: #333; }
.profile-name {
  padding: 12px 16px;
  font-size: 16px;
  font-weight: 700;
  color: #cc2222;
  background: #fff;
  border-bottom: 1px solid #eee;
}

/* ── SEARCH ─────────────────────────────────────── */
.search-card { padding: 16px; border-radius: 10px; }
.search-box-wrap { display: flex; gap: 8px; margin-bottom: 16px; }
.search-input {
  flex: 1;
  border: 1.5px solid #cc3333;
  border-radius: 6px;
  padding: 7px 10px;
  font-size: 13px;
  outline: none;
  box-shadow: 0 4px 14px rgba(0,0,0,0.13), 0 1px 4px rgba(0,0,0,0.08);
  background: #fff;
  -webkit-appearance: none;
  appearance: none;
}
.search-input:focus { border-color: #cc3333; box-shadow: 0 4px 14px rgba(0,0,0,0.13), 0 1px 4px rgba(0,0,0,0.08); outline: none; }

.search-results { display: flex; flex-direction: column; gap: 2px; }
.search-item {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 10px 14px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: background 0.1s;
}
.search-item:hover { background: #eef3ff; border-color: #3d6ee4; }
.search-item-name { font-weight: 600; font-size: 13px; }
.search-item-info { font-size: 12px; color: #888; }
.search-empty { text-align: center; color: #999; padding: 24px; font-size: 13px; }
mark.search-highlight {
  background: #ffb3b3;
  color: #8b0000;
  border-radius: 2px;
  padding: 0 1px;
  font-style: normal;
}

/* ── CONTRACTS ──────────────────────────────────── */
.contracts-card { padding: 12px 16px; border-radius: 12px !important; overflow: hidden; }
.contracts-header-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.contracts-toggle-btn {
  background: #eef2ff;
  color: #3d6ee4;
  border: 1px solid #c5d0f5;
  padding: 6px 14px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
}
.contracts-toggle-btn:hover { background: #dde5ff; }

.btn-history {
  background: linear-gradient(to bottom, #dd3333, #bb1a1a);
  color: #fff;
  border: none;
  border-bottom: 4px solid #881111;
  padding: 7px 20px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  box-shadow: 0 4px 6px rgba(0,0,0,0.2);
  transition: all 0.1s;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.btn-history:hover { background: linear-gradient(to bottom, #ee4444, #cc2222); }
.btn-history:active { border-bottom-width: 1px; transform: translateY(3px); box-shadow: 0 1px 3px rgba(0,0,0,0.2); }

.client-action-btns { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.btn-photos-action {
  background: linear-gradient(to bottom, #ffffff, #e8e8e8);
  color: #cc3333;
  border: none;
  border-bottom: 4px solid #aaa;
  border-radius: 6px;
  padding: 7px 20px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 6px rgba(0,0,0,0.2);
  transition: all 0.1s;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.contracts-btns {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 160px;
  overflow-y: auto;
  margin-bottom: 10px;
  border: 1px solid #eee;
  border-radius: 6px;
  padding: 6px;
  background: #fafafa;
}
.contracts-btns:empty { display: none; }
.add-contracts-row { display: flex; gap: 8px; flex-wrap: wrap; }
.contract-btn {
  background: #3d6ee4;
  color: #fff;
  border: none;
  padding: 6px 14px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  text-align: left;
  width: 100%;
}
.contract-btn:hover { background: #2f5acb; }
.contract-btn.active-contract { background: #1e3fa0; }

/* ── NOTES / OFFER ──────────────────────────────── */
.notes-offer-row {
  display: flex;
  gap: 12px;
}
.notes-box {
  flex: 1;
  background: #f5f5f5;
  border: 1px solid #ddd;
  border-radius: 10px;
  padding: 10px 12px;
}
.notes-box label {
  display: block;
  font-weight: 600;
  font-size: 12px;
  color: #555;
  margin-bottom: 6px;
}
.notes-box textarea {
  width: 100%;
  height: 100px;
  resize: vertical;
}

/* ══════════════════════════════════════════════════
   CONTRACT VIEW
══════════════════════════════════════════════════ */

/* ── INVOICE ────────────────────────────────────── */
.invoice-card {
  background: #f5f5f5;
  border: 1px solid #ddd;
  border-radius: 12px;
}
.btn-print {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 7px 16px;
  font-size: 12px;
  font-weight: 700;
  color: #cc3333;
  border: 1px solid #ddd;
  border-bottom: 4px solid #bbb;
  border-radius: 6px;
  background: linear-gradient(to bottom, #fff, #f0f0f0);
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  cursor: pointer;
  white-space: nowrap;
  z-index: 10;
  transition: box-shadow 0.1s, transform 0.1s;
}
.btn-print:hover {
  background: linear-gradient(to bottom, #fff, #e8e8e8);
}
.btn-print:active {
  border-bottom-width: 1px;
  transform: translateY(3px);
  box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}
.invoice-title {
  text-align: center;
  font-size: 22px;
  font-weight: 800;
  padding: 14px 14px 4px;
  background: #fff;
  color: #cc2222;
  text-transform: uppercase;
}
.invoice-body {
  display: flex;
  gap: 0;
  padding: 16px;
  background: #fff;
}
.invoice-left { flex: 1; padding-right: 24px; }
.invoice-right { width: 300px; padding-left: 24px; border-left: 1px solid #eee; }

.salon-name-line {
  font-weight: 800;
  font-size: 14px;
  color: #000;
  margin-bottom: 4px;
}
.salon-address-ta {
  width: 100%;
  height: 110px;
  font-size: 14px;
  font-style: italic;
  color: #888;
  margin-bottom: 10px;
  resize: none;
}
.client-info-line { font-size: 13px; margin-bottom: 6px; }

.service-block { margin-top: 20px; }
.bold-label { font-weight: 700; font-size: 13px; }
.section-title-red {
  font-size: 14px;
  font-weight: 800;
  color: #cc2222;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 6px;
  margin-top: 4px;
}
.service-sub { margin-left: 18px; margin-top: 6px; }
.service-group-label {
  font-size: 12px;
  font-weight: 600;
  color: #555;
  margin: 8px 0 4px;
}
.service-row-item {
  display: flex;
  align-items: center;
  margin-bottom: 4px;
  font-size: 13px;
}
.svc-select { width: 120px; }
.svc-main-row {
  display: flex;
  align-items: center;
  margin-bottom: 6px;
}
.svc-main-label {
  font-weight: 800;
  font-size: 13px;
  color: #222;
  letter-spacing: 0.3px;
  width: 175px;
  min-width: 175px;
  white-space: nowrap;
}
.svc-main-label.grey { color: #888; }
.svc-select-wide { flex: 1; min-width: 0; }
.svc-group-gap {
  height: 12px;
}

.inv-field-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  font-size: 13px;
}
.inv-field-row label { color: #555; flex: 1; white-space: nowrap; }
/* Safari on iPhone pins the text of a fixed-height input to the top of the box,
   so the amount has to be centred by line-height rather than left to the browser.
   32px box − 2px border − 10px padding = 20px of room for the line. */
.inv-field-row .input-field { width: 80px; height: 32px; text-align: right; box-sizing: border-box;
  line-height: 20px; -webkit-appearance: none; appearance: none; }
.inv-num-field { text-align: right; -webkit-appearance: none; appearance: none; }
.date-picker-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 0 8px;
  cursor: pointer;
  background: #fff;
  width: 160px;
  height: 32px;
  justify-content: space-between;
  position: relative;
  box-sizing: border-box;
}
.date-picker-wrap:hover { border-color: #999; }
.date-display-text { font-size: 13px; color: #333; }
.date-cal-icon { font-size: 14px; }
.total-field-row .input-field { border-width: 2px; font-weight: 700; }

/* ── CONTRACT DOCUMENT ──────────────────────────── */
.contract-doc-card {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 12px;
  padding: 24px 32px;
}
.contract-doc-title {
  text-align: center;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 1px;
  margin-bottom: 4px;
  color: #222;
}
.contract-header-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.contract-field-label { font-size: 13px; font-weight: 600; color: #444; white-space: nowrap; }
.contract-name-input { width: 220px; }
.contract-date-input { width: 140px; }

.contract-terms p {
  font-size: 13px;
  line-height: 1.6;
  color: #333;
  margin-bottom: 10px;
}
.totals-inline-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 16px 0;
  font-size: 13px;
}
.small-money-input { width: 80px; }

/* ── SIGNATURES ─────────────────────────────────── */
.sig-section { margin-top: 30px; }
.sig-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.sig-label { font-size: 13px; font-weight: 600; color: #444; white-space: nowrap; }
.sig-date-display { font-size: 13px; font-style: italic; font-weight: 400; color: #333; margin-left: 6px; }
.salon-auth-block { display: flex; align-items: center; gap: 32px; }
.salon-auth-text { display: flex; flex-direction: column; }
.sig-input { width: 160px; }
/* Both names on the signature block are signed by hand, so they are set in the
   same script as the name the client sees on the signing page */
.salon-initials {
  font-family: 'Snell Roundhand', 'Apple Chancery', 'Segoe Script', 'Bradley Hand', 'Brush Script MT', cursive;
  font-size: 26px;
  font-weight: 700;
  font-style: normal;
  color: #111;
  margin: 0 4px;
}
.salon-signature-img {
  height: 180px;
  width: auto;
  display: inline-block;
  vertical-align: middle;
  margin: 0 8px;
  filter: url('#remove-white');
  background: transparent;
}

.client-sig-block { margin-top: 12px; }
.client-sig-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.client-sig-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #444;
  margin-bottom: 0;
}
.sig-clear-btn {
  font-size: 12px;
  font-weight: 700;
  padding: 5px 14px;
  border: none;
  border-radius: 8px;
  background: linear-gradient(180deg, #ffffff 0%, #e8e8e8 100%);
  box-shadow: 0 4px 6px rgba(0,0,0,0.18), 0 1px 0 #bbb inset, 0 -2px 0 #aaa;
  color: #cc2222;
  cursor: pointer;
  transition: box-shadow 0.1s, transform 0.1s;
}
.sig-clear-btn:hover {
  background: linear-gradient(180deg, #f5f5f5 0%, #ddd 100%);
  box-shadow: 0 3px 5px rgba(0,0,0,0.18), 0 1px 0 #bbb inset;
}
.sig-clear-btn:active {
  transform: translateY(2px);
  box-shadow: 0 1px 3px rgba(0,0,0,0.18);
}
.client-sig-canvas {
  width: 100%;
  height: 160px;
  border: 1px solid #d0d0d0;
  border-radius: 4px;
  display: block;
  touch-action: none;
  cursor: crosshair;
  background: #fff;
}

.confirm-block { margin-top: 16px; }
.confirm-text {
  font-size: 12px;
  color: #cc0000;
  font-weight: 700;
  font-style: italic;
  line-height: 1.5;
  text-transform: uppercase;
  align-items: flex-start;
}
.confirm-text input { margin-top: 2px; }

/* ── NOTES SECTION ──────────────────────────────── */
.notes-section-card {
  background: #f5f5f5;
  border: 1px solid #ddd;
  border-radius: 12px;
  padding: 0 0 16px;
  overflow: hidden;
}
.notes-section-title {
  text-align: left;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 14px;
  color: #333;
  border-bottom: 1px solid #ddd;
  background: #fff;
  margin-bottom: 12px;
}
.contract-notes-ta {
  width: calc(100% - 32px);
  margin: 0 16px;
  height: 120px;
  resize: vertical;
  display: block;
}
.file-row {
  margin: 8px 16px 0;
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.browse-link { color: #3d6ee4; font-size: 12px; }
.file-name-label { color: #666; font-size: 12px; }

/* ── ADMIN ──────────────────────────────────────── */
.users-list { margin-top: 16px; }
.user-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 3px;
  margin-bottom: 4px;
}
.user-item-name { font-weight: 600; font-size: 13px; }
.admin-msg {
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 12px;
  margin-top: 8px;
}
.admin-msg.ok { background: #e8f5e9; color: #2e7d32; border: 1px solid #c8e6c9; }
.admin-msg.err { background: #ffebee; color: #c62828; border: 1px solid #ffcdd2; }


/* ── TOAST ──────────────────────────────────────── */
.toast {
  position: fixed;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: #cc3333;
  color: #fff;
  padding: 10px 24px;
  border-radius: 24px;
  font-size: 13px;
  font-weight: 600;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s, transform 0.25s;
  z-index: 9999;
  white-space: nowrap;
}
.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ── ADMIN LINK ─────────────────────────────────── */
.admin-link { font-size: 11px; color: #bbb; }
.admin-link:hover { color: #666; }

/* ── FOOTER ─────────────────────────────────────── */
.app-footer {
  text-align: center;
  font-size: 12px;
  color: #999;
  padding: 16px 0 4px;
}

/* ── HEADER CENTER ──────────────────────────────── */
.header-center { flex: 1; display: flex; justify-content: center; }
.btn-header {
  background: #fff;
  border: 2px solid #cc2222;
  border-radius: 6px;
  padding: 6px 18px;
  font-size: 13px;
  cursor: pointer;
  color: #cc2222;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  box-shadow: 0 0 10px rgba(0,0,0,0.35);
  transition: background 0.1s;
  position: relative;
  top: 0;
}
/* The ads specialist's account: Leads only. Every other tab, the two log
   buttons, and anything that writes to the client base disappears. The server
   enforces the same limits — this just keeps dead buttons off the screen. */
body.role-ads [data-nav]:not([data-nav="leads"]) { display: none !important; }
body.role-ads #leads-smslog-btn, body.role-ads #leads-emaillog-btn { display: none !important; }
body.role-ads #leads-sms-btn, body.role-ads #leads-email-btn, body.role-ads #leads-delete-btn { display: none !important; }
body.role-ads .lead-cb, body.role-ads #leads-select-all { display: none !important; }
/* The whole ACTIONS column disappears, header included, as does the checkbox
   column that only feeds the bulk actions the ads account doesn't have */
body.role-ads #leads-main-table th:last-child,
body.role-ads #leads-main-table td:last-child,
body.role-ads #leads-main-table th:first-child,
body.role-ads #leads-main-table td:first-child { display: none !important; }

/* Light button — pale face with red lettering, like Client Form Link */
.btn-light {
  background: linear-gradient(to bottom, #fff, #f0f0f0);
  color: #cc3333;
  border: 1px solid #ddd;
  border-bottom: 4px solid #bbb;
  border-radius: 6px;
  padding: 7px 16px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.btn-light:hover { background: linear-gradient(to bottom, #fff, #e8e8e8); }
.btn-light:active { border-bottom-width: 1px; transform: translateY(3px); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); }

.btn-header:hover {
  background: #fff5f5;
  color: #aa1a1a;
}
.btn-header:active {
  background: #ffe8e8;
}
.btn-header.filter-on {
  background: linear-gradient(to bottom, #dd3333, #bb1a1a);
  color: #fff;
  border-color: #cc2222;
}
.btn-header.filter-on:hover {
  background: linear-gradient(to bottom, #ee4444, #cc2222);
  color: #fff;
}
/* 3D style matching the CALENDAR button */
.btn-header.btn-header-3d {
  background: linear-gradient(to bottom, #ffffff, #f0f0f0);
  border: 2px solid #cc3333;
  border-bottom: 4px solid #aa1111;
  border-radius: 8px;
  box-shadow: 0 3px 6px rgba(0,0,0,0.12);
}
.btn-header.btn-header-3d:hover {
  background: linear-gradient(to bottom, #fff5f5, #ffe0e0);
  color: #cc3333;
}
.btn-header.btn-header-3d:active {
  border-bottom-width: 2px;
  transform: translateY(2px);
  box-shadow: 0 1px 3px rgba(0,0,0,0.12);
}
.btn-header.btn-header-3d.filter-on {
  background: linear-gradient(to bottom, #dd3333, #bb1a1a);
  color: #fff;
  border-color: #cc2222;
  border-bottom-color: #881111;
}
.btn-header.btn-header-3d.filter-on:hover {
  background: linear-gradient(to bottom, #ee4444, #cc2222);
  color: #fff;
}

/* ── DELETE SELECTED BUTTON ─────────────────────── */
.btn-delete-sel {
  background: linear-gradient(to bottom, #dd3333, #bb1a1a);
  color: #fff;
  border: none;
  border-bottom: 4px solid #881111;
  padding: 7px 18px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  box-shadow: 0 4px 6px rgba(0,0,0,0.2);
  transition: all 0.1s;
}
.btn-delete-sel:hover { background: linear-gradient(to bottom, #ee4444, #cc2222); }
.btn-delete-sel:active { border-bottom-width: 1px; transform: translateY(3px); box-shadow: 0 1px 3px rgba(0,0,0,0.2); }

.btn-email-sel {
  background: linear-gradient(to bottom, #999, #777);
  color: #fff;
  border: none;
  border-bottom: 4px solid #555;
  padding: 7px 16px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  transition: all 0.1s;
}
.btn-email-sel:hover { background: linear-gradient(to bottom, #bbbbbb, #999999); }
.btn-email-sel:active { border-bottom-width: 2px; transform: translateY(2px); box-shadow: 0 1px 3px rgba(0,0,0,0.15); }

/* ── IMPORT BUTTON ───────────────────────────────── */
.btn-import {
  background: linear-gradient(to bottom, #fff, #f0f0f0);
  color: #666;
  border: 1px solid #ddd;
  border-bottom: 4px solid #bbb;
  border-radius: 6px;
  padding: 6px 16px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  position: relative;
  top: 0;
  transition: all 0.1s;
  white-space: nowrap;
}
.btn-import:hover { background: linear-gradient(to bottom, #fff, #e8e8e8); }
.btn-import:active { border-bottom-width: 1px; transform: translateY(3px); box-shadow: 0 1px 2px rgba(0,0,0,0.1); }

/* ── EXCEL BUTTON ────────────────────────────────── */
.btn-excel {
  background: linear-gradient(to bottom, #fff, #f0f0f0);
  color: #666;
  border: 1px solid #ddd;
  border-bottom: 4px solid #bbb;
  border-radius: 6px;
  padding: 6px 16px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  position: relative;
  top: 0;
  transition: all 0.1s;
  white-space: nowrap;
}
.btn-excel:hover { background: linear-gradient(to bottom, #fff, #e8e8e8); }
.btn-excel:active { border-bottom-width: 1px; transform: translateY(3px); box-shadow: 0 1px 2px rgba(0,0,0,0.1); }

.list-filter-row { display: flex; flex-direction: row; gap: 8px; align-items: center; flex-wrap: wrap; flex: 1; }
#clients-search-row { flex: 1; }
#clients-top-nav .btn-header { box-shadow: 0 0 6px rgba(0,0,0,0.18) !important; padding: 7px 18px !important; }
#clients-top-nav #col-menu-btn { border: 2px solid #cc3333 !important; border-top: 2px solid #cc3333 !important; border-bottom: 4px solid #991515 !important; box-shadow: 0 3px 8px rgba(0,0,0,0.2) !important; padding: 6px 18px !important; }
#clients-top-nav .btn-import, #clients-top-nav .btn-excel { padding: 7px 16px !important; }
#list-search { flex: 1 !important; width: auto !important; min-width: 0; }
.sel-btn-row { display: flex; gap: 8px; align-items: center; }
.excel-btn-row { display: flex; gap: 8px; align-items: center; }
.visit-clear-btn { order: 99; }
.btn-search-clear {
  text-transform: uppercase;
  background: linear-gradient(to bottom, #dd3333, #bb1a1a) !important;
  color: #fff !important;
  border: none !important;
  border-bottom: 3px solid #881111 !important;
  box-shadow: 0 3px 6px rgba(0,0,0,0.25) !important;
  font-weight: 700 !important;
  cursor: pointer;
}
.btn-search-clear:active { border-bottom-width: 1px !important; transform: translateY(2px); }
#list-search {
  border: 1.5px solid #cc3333 !important;
  border-radius: 6px;
  outline: none;
  box-shadow: none !important;
}

/* ── CLIENT LIST TABLE ───────────────────────────── */
.clients-section-wrap {
  display: flex;
  flex-direction: column;
}
.list-count {
  padding: 10px 16px;
  font-size: 15px;
  font-weight: 800;
  color: #fff;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  background: linear-gradient(to bottom, #cc3333, #8b1a1a);
  display: flex;
  align-items: center;
  border-radius: 12px 12px 0 0;
  border: 3px solid #fff;
  border-bottom: none;
}
.clients-table-card {
  overflow: hidden;
  overflow: clip;
  background: #fff;
  border: 3px solid #fff !important;
  border-top: none !important;
  box-shadow: 0 0 14px rgba(0,0,0,0.18) !important;
  border-radius: 0 0 12px 12px !important;
  padding: 0 !important;
}
.clients-table-header-scroll {
  overflow-x: hidden;
  overflow-y: visible;
}
.clients-table-header-scroll .clients-table {
  margin-bottom: 0;
  border-bottom: none;
}
.clients-table-scroll {
  overflow-x: auto;
  overflow-y: auto;
  max-height: calc(100vh - 230px);
  -webkit-overflow-scrolling: touch;
  width: 100%;
  display: block;
}

.clients-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 12px;
}
/* Header sticky top — desktop only; on mobile overridden below */
.clients-table-scroll .clients-table thead th {
  position: sticky;
  top: 0;
  z-index: 50;
}
.clients-table th {
  background: linear-gradient(to bottom, #cc3333, #8b1a1a);
  color: #fff;
  padding: 10px 12px;
  text-align: left;
  white-space: nowrap;
  font-weight: 800;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
  border-bottom: 3px solid #6b1010;
  box-shadow: inset -1px 0 0 rgba(255,255,255,0.18);
}

/* History table: compact to fit without horizontal scroll */
#history-table th { padding: 8px 8px; font-size: 11px; white-space: nowrap; text-align: center; }
#history-table td { padding: 8px 8px; font-size: 12px; }
#history-table { table-layout: auto; width: 100%; }
/* Payment-history figures that can be corrected in place */
.pay-edit-cell { cursor: pointer; text-decoration: underline dotted #cc3333; }

/* Our own payment-method list — a <select> would be drawn by the phone instead */
.pay-method-menu {
  position: absolute; z-index: 100000; min-width: 150px; padding: 5px;
  background: #fff; border: 2px solid #cc3333; border-radius: 14px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}
.pay-method-menu button {
  display: flex; align-items: center; gap: 8px; width: 100%; box-sizing: border-box;
  padding: 11px 12px; background: none; border: none; border-radius: 10px;
  font-size: 15px; color: #333; text-align: left; cursor: pointer;
}
.pay-method-menu button .tick { width: 14px; color: #cc3333; font-weight: 900; flex-shrink: 0; }
.pay-method-menu button.on { color: #cc2222; font-weight: 700; }
.pay-method-menu button:hover, .pay-method-menu button:active { background: #fff2f2; }

/* Signature status badge in the invoices table */
.sig-badge { display: inline-block; font-size: 10px; font-weight: 800; letter-spacing: 0.3px;
  padding: 2px 8px; border-radius: 10px; white-space: nowrap; }
.sig-badge-done { background: #cc3333; color: #fff; }
.sig-badge-sent { background: #fff; color: #e21b1b; border: 1.5px solid #e21b1b; }
.sig-badge-date { font-size: 10px; color: #888; margin-top: 2px; }

/* Column 11 is Notes — the long free text that needs room and wrapping */
#history-table th:nth-child(11), #history-table td:nth-child(11) { max-width: 220px; width: 220px; white-space: pre-wrap; word-wrap: break-word; word-break: break-word; }

/* Freeze checkbox (col 1) and № (col 2) horizontally */
.clients-table th:nth-child(1), .clients-table td:nth-child(1) { position: sticky; left: 0;    z-index: 2; min-width: 40px; background: #fff; }
.clients-table th:nth-child(2), .clients-table td:nth-child(2) { position: sticky; left: 40px; z-index: 2; min-width: 44px; background: #fff; box-shadow: 3px 0 6px -2px rgba(0,0,0,0.15); }
.clients-table thead th:nth-child(1) { z-index: 60; background: linear-gradient(to bottom, #cc3333, #8b1a1a); }
.clients-table thead th:nth-child(2) { z-index: 60; background: linear-gradient(to bottom, #cc3333, #8b1a1a); box-shadow: 3px 0 6px -2px rgba(0,0,0,0.25); }
.clients-table tbody tr:nth-child(even) td:nth-child(1),
.clients-table tbody tr:nth-child(even) td:nth-child(2) { background: #fdf8f8; }
.clients-table tbody tr:hover td:nth-child(1),
.clients-table tbody tr:hover td:nth-child(2) { background: #fdf4f4; }
.clients-table tbody tr.row-selected td:nth-child(1),
.clients-table tbody tr.row-selected td:nth-child(2) { background: #fde8e8; }

.clients-table td {
  padding: 10px 12px;
  border-bottom: 1px solid #f0e8e8;
  box-shadow: inset -1px 0 0 #e0e0e0;
  white-space: nowrap;
  color: #333;
}
.clients-table tbody tr:nth-child(even) { background: #fdf8f8; }
.clients-table tbody tr:hover { background: #fdf4f4; cursor: pointer; }
.clients-table tbody tr.row-selected,
.clients-table tbody tr.row-selected:nth-child(even) { background: #fde8e8 !important; }
.clients-table tbody tr td:first-child { color: #999; font-size: 11px; }
.clients-table th.sortable { cursor: pointer; user-select: none; }
.clients-table th.sortable:hover { background: linear-gradient(to bottom, #dd4444, #9b2a2a); }

/* Leads SMS modal — template preset buttons */
.lsms-tpl-btn {
  background: linear-gradient(to bottom, #ffffff, #f5f5f5);
  color: #333;
  border: 1px solid #ccc;
  border-bottom: 2px solid #bbb;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.lsms-tpl-btn.active {
  background: linear-gradient(to bottom, #dd3333, #bb1a1a);
  color: #fff;
  border-color: #bb1a1a;
  border-bottom-color: #881111;
}

/* ===== LEADS table — "Today's Appointments" card style (scoped to #view-leads) ===== */
/* Center the header cell text (leads table only) */
#view-leads .clients-table th { text-align: center; }
/* Center body cells: checkbox, DATE, PHONE, STATUS, SENT columns (leads table only) */
#view-leads .clients-table td:nth-child(1),
#view-leads .clients-table td:nth-child(2),
#view-leads .clients-table td:nth-child(4),
#view-leads .clients-table td:nth-child(8),
#view-leads .clients-table td:nth-child(9) { text-align: center; }
/* Desktop: every control in the leads top bar shares the STATUSES button height (34px), on one level */
#leads-action-row > button,
#leads-log-row > button {
  height: 34px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
#leads-action-row input[type="text"] {
  height: 34px;
  box-sizing: border-box;
}
/* Phone/tablet: make leads action buttons (DELETE/SMS/EMAIL/CLEAR) + STATUSES/SMS log/EMAIL log equal height */
@media (max-width: 1024px) {
  #leads-log-row button,
  #leads-action-row > button {
    height: 40px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  /* Swap rows: date filter (FROM/TO/CLEAR) on top, action buttons (DELETE/SMS/EMAIL) below */
  #leads-action-row #leads-delete-btn,
  #leads-action-row #leads-sms-btn,
  #leads-action-row #leads-email-btn { order: 2; }
  /* CLEAR (date filter) matches the date inputs' height, not the 40px action buttons */
  #leads-date-from, #leads-date-to, #leads-date-clear-btn { height: 34px !important; box-sizing: border-box !important; }
  #leads-date-clear-btn { padding-top: 0 !important; padding-bottom: 0 !important; }
}
/* All screen sizes: in the LEADS table freeze ONLY the checkbox column (col 1);
   let the DATE column (col 2) scroll horizontally.
   Header DATE cell stays sticky to TOP (so it doesn't bleed), only its LEFT pin is removed.
   Scoped to #view-leads so the Clients table keeps both frozen columns. */
#view-leads .clients-table th:nth-child(2) {
  left: auto !important;
  box-shadow: none !important;
  z-index: 49 !important;   /* below the frozen checkbox column (z-index 60) so it scrolls under it */
}
#view-leads .clients-table td:nth-child(2) {
  position: static !important;
  left: auto !important;
  box-shadow: none !important;
  z-index: auto !important;
}
#view-leads .clients-table-card {
  border-radius: 12px !important;
  border: 3px solid #fff !important;
  border-top: 3px solid #fff !important;
  box-shadow: 0 4px 0 #c8c8c8, 0 6px 12px rgba(0,0,0,0.12) !important;
  margin-top: 4px;
}
/* Red header bar */
#view-leads .leads-card-header {
  background: linear-gradient(to bottom, #cc3333, #8b1a1a);
  padding: 12px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
}
#view-leads .leads-card-icon { font-size: 22px; line-height: 1; flex-shrink: 0; }
#view-leads .leads-card-title {
  color: #fff;
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  display: flex;
  align-items: center;
}
#view-leads .leads-card-badge {
  background: rgba(255,255,255,0.25);
  color: #fff;
  border-radius: 10px;
  padding: 1px 9px;
  font-size: 13px;
  font-weight: 700;
  margin-left: 10px;
  box-shadow: 0 1px 3px rgba(0,0,0,.25);
}
/* Column headers — match Clients table exactly (#cc3333 → #8b1a1a):
   inherit base .clients-table th styling, no override here. */
/* Body rows — clean white with thin separators (no stripes, no column shadows) */
#view-leads .clients-table td,
#view-leads .clients-table td:nth-child(1),
#view-leads .clients-table td:nth-child(2) {
  border-bottom: 1px solid #f0f0f0;
  box-shadow: none;
  background: #fff;
}
#view-leads .clients-table tbody tr,
#view-leads .clients-table tbody tr:nth-child(even),
#view-leads .clients-table tbody tr:nth-child(even) td:nth-child(1),
#view-leads .clients-table tbody tr:nth-child(even) td:nth-child(2) { background: #fff; }
#view-leads .clients-table tbody tr:hover,
#view-leads .clients-table tbody tr:hover td,
#view-leads .clients-table tbody tr:hover td:nth-child(1),
#view-leads .clients-table tbody tr:hover td:nth-child(2) { background: #f7f7f7; }
#view-leads .clients-table tbody tr td:first-child { color: #999; }
.sort-arrow { font-size: 10px; }

/* ── Email Log table overrides ── */
.email-log-table td { padding: 9px 12px; border-bottom: 1px solid #f0e8e8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #333; font-size: 12px; }
.email-log-table tbody tr:nth-child(even) { background: #fdf8f8; }
.email-log-table tbody tr:hover { background: #fdf4f4; cursor: pointer; }
.email-log-table tbody tr.el-selected { background: #fde8e8 !important; }
/* SMS Log: red checkboxes everywhere (desktop, tablet & phone) */
#view-sms-log input[type="checkbox"] { accent-color: #cc3333 !important; }
/* email-log: sticky header on all devices */
.email-log-table th { position: sticky; top: 0; z-index: 10; }
/* email-log: NO left-frozen columns (narrow table) — removes the white gap/strip before DATE */
.email-log-table th:nth-child(1), .email-log-table th:nth-child(2) { left: auto !important; box-shadow: none !important; }
.email-log-table td:nth-child(1), .email-log-table td:nth-child(2) { position: static !important; left: auto !important; box-shadow: none !important; background: inherit !important; }
/* desktop: no left-sticky columns */
@media (min-width: 901px) {
  .email-log-table td:nth-child(1), .email-log-table td:nth-child(2),
  .email-log-table td:nth-child(3), .email-log-table td:nth-child(4) { position: static; left: auto; background: inherit; }
}

/* ── VALIDATION ERRORS ──────────────────────────── */
.input-error {
  border-color: #e03333 !important;
  background: #fff5f5 !important;
}
.field-error {
  color: #e03333;
  font-size: 11px;
  font-weight: 600;
  margin-left: 6px;
  white-space: nowrap;
}
.select-field.input-error {
  border-color: #e03333 !important;
  background: #fff5f5 !important;
}

/* ── RESPONSIVE ─────────────────────────────────── */
@media (max-width: 900px) {
  .invoice-body { flex-direction: column; }
  .invoice-right { width: 100%; border-left: none; border-top: 1px solid #eee; padding-left: 0; padding-top: 16px; margin-top: 16px; }
  .inv-field-row .input-field { width: 120px; }
  .form-label { width: 140px; min-width: 140px; font-size: 12px; }
  .notes-offer-row { flex-direction: column; }
  .contract-doc-card { padding: 16px; }
  .inline-group { flex-wrap: wrap; }
  .contract-header-row { flex-wrap: wrap; gap: 8px; }

  /* Tablet: client list table controls */
  .list-filter-row { flex-wrap: wrap; gap: 6px; }
  .list-filter-row .search-input { width: 100% !important; min-width: 0; }
  .clients-table-scroll { max-height: calc(100vh - 260px); }
  .clients-table { font-size: 11px; }
  .clients-table th, .clients-table td { padding: 7px 9px; }
  /* Make sort headers easier to tap on touch devices */
  .clients-table th.sortable { min-height: 40px; }
}

/* ── HISTORY FILTERS ────────────────────────────── */
.history-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px;
  margin-bottom: 14px;
  padding: 12px 14px;
  background: #f8f8f8;
  border: 1px solid #eee;
  border-radius: 8px;
}
.hist-filter-group {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.hist-filter-label {
  font-size: 11px;
  font-weight: 600;
  color: #666;
  letter-spacing: 0.3px;
}
.hist-filter-input {
  padding: 5px 8px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 13px;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-weight: 500;
  color: #444;
  background: #fff;
  letter-spacing: 0.5px;
}
.hist-filter-select {
  padding: 5px 8px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 13px;
  color: #333;
  background: #fff;
  cursor: pointer;
}
.hist-filter-input:focus, .hist-filter-select:focus {
  outline: none;
  border-color: #cc2222;
}

/* ── EMAIL CAMPAIGN ─────────────────────────────── */
.campaign-grid {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 16px;
  align-items: start;
}

/* Email preview: always show an intense all-around shadow on the card,
   regardless of what box-shadow is saved/hardcoded in the template body. */
#campaign-preview > div {
  box-shadow: 0 0 28px 6px rgba(0,0,0,0.35), 0 -12px 26px rgba(0,0,0,0.30) !important;
}
.btn-tpl {
  background: linear-gradient(to bottom, #ffffff, #fafafa);
  color: #333;
  border: 1px solid #ccc;
  border-bottom: 2px solid #bbb;
  padding: 6px 14px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}
.btn-tpl:hover {
  background: linear-gradient(to bottom, #fff, #f0f0f0);
  border-color: #999;
}
.btn-tpl.active {
  background: linear-gradient(to bottom, #dd3333, #bb1a1a);
  color: #fff;
  border: 1px solid #bb1a1a;
  border-bottom: 2px solid #881111;
}
.btn-tpl.active:hover {
  background: linear-gradient(to bottom, #ee4444, #cc2222);
  border-color: #8b1a1a;
}
.btn-send-campaign {
  background: linear-gradient(to bottom, #dd3333, #bb1a1a);
  color: #fff;
  border: none;
  border-bottom: 3px solid #881111;
  padding: 12px 32px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: 0.5px;
  transition: all 0.15s;
}
.btn-send-campaign:hover {
  background: linear-gradient(to bottom, #ee4444, #cc2222);
  transform: translateY(-1px);
}
.btn-send-campaign:active {
  transform: translateY(1px);
  border-bottom-width: 1px;
}

/* ══════════════════════════════════════════════════
   CALENDAR VIEW
══════════════════════════════════════════════════ */

/* Layout */
.cal-layout { display:flex; gap:16px; align-items:flex-start; }
.cal-sidebar { width:200px; flex-shrink:0; }
.cal-main-area { flex:1; min-width:0; }

/* Mini calendar widget */
.mc-widget { background:#fff; border-radius:12px; padding:10px 14px; box-shadow:0 6px 24px rgba(0,0,0,0.18), 0 2px 8px rgba(0,0,0,0.10); border:1.5px solid #cc3333; width:224px; flex-shrink:0; }
.mc-title { font-size:13px; font-weight:700; color:#cc2222; width:110px; text-align:center; }
.mc-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.mc-nav { background:none; border:none; cursor:pointer; font-size:20px; color:#cc2222; padding:1px 5px; line-height:1; border-radius:4px; }
.mc-nav:hover { background:#ffeaea; }
.mc-dow-row { display:grid; grid-template-columns:repeat(7,1fr); margin-bottom:3px; }
.mc-dow { text-align:center; font-size:8px; font-weight:700; color:#333; padding:3px 0; letter-spacing:.2px; }
.mc-dow.mc-wknd { color:#cc2222; background:#ffeaea; }
.mc-grid { display:grid; grid-template-columns:repeat(7,1fr); grid-template-rows:repeat(6,1fr); height:156px; }
.mc-cell { text-align:center; font-size:12px; padding:4px 3px; cursor:pointer; border-radius:0; color:#333; transition:background 0.1s; }
.mc-cell:hover:not(.mc-empty):not(.mc-sel) { background:#ffeaea; }
.mc-cell.mc-empty { cursor:default; }
.mc-cell.mc-wknd { color:#cc2222; border-radius:0; }
.mc-grid > *:nth-child(7n+6):not(.mc-empty),
.mc-grid > *:nth-child(7n):not(.mc-empty) { background:#ffeaea !important; color:#cc2222 !important; }
.mc-grid > *:nth-child(7n+6).mc-today,
.mc-grid > *:nth-child(7n).mc-today { background:#ffeaea !important; color:#cc2222 !important; }
.mc-grid > *:nth-child(7n+6).mc-sel,
.mc-grid > *:nth-child(7n).mc-sel { background:#cc2222 !important; color:#fff !important; border-radius:4px !important; }
.mc-cell.mc-today { background:#fff5f5; color:#cc2222; font-weight:700; border:1.5px solid #cc3333; box-sizing:border-box; }
.mc-cell.mc-sel { background:#cc2222 !important; color:#fff !important; font-weight:700; border-radius:4px !important; border:none !important; }
.mc-today-btn { display:none; }

/* Now line dot */
.cal-now-line { }
.cal-appt-th {
  padding: 9px 14px;
  text-align: left;
  color: #ffd0d0;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
.cal-appt-th:hover { color: #fff; background: rgba(255,255,255,0.08); }
#cal-appt-list-body tr { border-bottom: 1px solid #f0f0f0; transition: background 0.1s; }
#cal-appt-list-body tr:hover { background: #fff8f8; }
#cal-appt-list-body tr:nth-child(even) { background: #fafafa; }
#cal-appt-list-body tr:nth-child(even):hover { background: #fff5f5; }

/* Time in appointment block */
.cal-appt-time-top { font-size:10px; opacity:0.88; font-weight:600; line-height:1; margin-bottom:2px; }

.cal-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: #fff;
  border-radius: 10px;
  margin-bottom: 10px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
  flex-wrap: wrap;
  gap: 8px;
}
#cal-date-title {
  background: linear-gradient(to bottom, #ffffff, #f0f0f0);
  color: #8b1a1a;
  border: 1px solid #cc3333;
  border-bottom: 3px solid #aa2222;
  border-radius: 8px;
  padding: 6px 18px;
  box-shadow: 0 2px 3px rgba(0,0,0,0.08);
  min-width: 180px;
  text-align: center;
  display: inline-block;
  cursor: pointer;
  user-select: none;
}

.cal-nav-btn {
  background: linear-gradient(to bottom, #ffffff, #f0f0f0) !important;
  color: #cc3333 !important;
  border: 1px solid #cc3333 !important;
  border-bottom: 3px solid #aa2222 !important;
  border-radius: 7px !important;
  padding: 6px 14px !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  cursor: pointer;
  box-shadow: 0 2px 3px rgba(0,0,0,0.08) !important;
  transition: background 0.12s !important;
}
.cal-nav-btn:hover {
  background: linear-gradient(to bottom, #fff5f5, #f5e8e8) !important;
  color: #8b1a1a !important;
}
.cal-nav-btn:active {
  border-bottom-width: 1px !important;
  transform: translateY(2px);
}
.cal-nav-btn:active {
  border-bottom-width: 1px !important;
  transform: translateY(2px);
}
.cal-master-filter {
  display: inline-flex;
  flex-direction: column;
  background: transparent;
  border-radius: 10px;
  padding: 0;
  margin-bottom: 0;
  min-width: 0;
  align-self: center;
  position: relative;
}
/* Appointments topbar: make the 4 action buttons equal height (desktop) */
@media (min-width: 901px) {
  #cal-topbar-actions .cal-act-btn,
  #cal-topbar-actions .cal-master-filter .cal-mf-header {
    height: 36px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
  }
  #cal-topbar-actions .cal-master-filter .cal-mf-header { justify-content: space-between; }
}
.cal-mf-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  cursor: pointer;
  user-select: none;
  background: linear-gradient(to bottom, #ffffff, #f0f0f0);
  border-radius: 8px;
  border: 2px solid #cc3333;
  border-bottom: 4px solid #aa1111;
  padding: 6px 14px;
  box-shadow: 0 3px 6px rgba(0,0,0,0.12);
  transition: all 0.1s;
}
.cal-mf-header:hover { background: linear-gradient(to bottom, #fff5f5, #ffe0e0); }
.cal-mf-header:active { border-bottom-width: 2px; transform: translateY(2px); box-shadow: 0 1px 3px rgba(0,0,0,0.12); }

/* Calendar toolbar — one shared halo so APPOINTMENT, WAITLIST, TODAY,
   CALENDAR and EMAIL log all sit on the same shadow. */
#cal-topbar-actions > div:first-child > button,
#cal-topbar-actions > div:first-child > .cal-master-filter .cal-mf-header {
  box-shadow: 0 0 10px rgba(0,0,0,0.28) !important;
}
#cal-topbar-actions > div:first-child > button:active,
#cal-topbar-actions > div:first-child > .cal-master-filter .cal-mf-header:active {
  box-shadow: 0 0 6px rgba(0,0,0,0.28) !important;
}
.cal-mf-label {
  font-size: 13px;
  font-weight: 700;
  color: #cc3333;
  letter-spacing: .3px;
}
.cal-mf-arrow {
  font-size: 9px;
  color: #cc3333;
}
.cal-mf-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  color: #222;
  cursor: pointer;
  user-select: none;
}
.cal-page-container {
  max-width: 1600px;
  margin: 0 auto;
  padding: 16px 16px 24px;
  box-sizing: border-box;
  width: 100%;
}
.cal-wrapper {
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  border: 5px solid #fff;
  box-sizing: border-box;
  width: 100%;
  box-shadow:
    0 2px 0 rgba(255,255,255,0.9) inset,
    0 -1px 0 rgba(255,255,255,0.6) inset,
    0 6px 16px rgba(0,0,0,0.14),
    0 2px 4px rgba(0,0,0,0.10),
    0 8px 0 #d0d0d0,
    0 10px 8px rgba(0,0,0,0.12);
  margin: 0 0 24px;
}
.cal-header-row {
  display: flex;
  position: sticky;
  top: 0;
  z-index: 20;
  background: #fff;
  border-bottom: 2px solid #eee;
  min-width: max-content;
}
.cal-time-gutter {
  width: 56px;
  min-width: 56px;
  flex-shrink: 0;
}
.cal-master-header-cell {
  flex: 1;
  min-width: 180px;
  padding: 10px 12px;
  font-weight: 700;
  font-size: 14px;
  color: #222;
  border-left: 1px solid #eee;
  text-align: center;
  border-top: 3px solid #ccc;
}
.cal-scroll-area {
  overflow-x: auto;
  overflow-y: auto;
  max-height: calc(100vh - 220px);
}
.cal-grid {
  display: flex;
  min-width: max-content;
}
.cal-time-col {
  width: 56px;
  min-width: 56px;
  position: relative;
  flex-shrink: 0;
  background: #fafafa;
  border-right: 1px solid #eee;
}
.cal-time-label {
  position: absolute;
  right: 8px;
  font-size: 11px;
  color: #aaa;
  transform: translateY(-50%);
  white-space: nowrap;
  user-select: none;
}
.cal-master-col {
  flex: 1;
  min-width: 180px;
  position: relative;
  border-left: 1px solid #eee;
  cursor: pointer;
}
.cal-master-col:hover { background: #fafafa; }
.cal-hour-line {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: #f0f0f0;
  pointer-events: none;
}
.cal-half-line {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: #f7f7f7;
  pointer-events: none;
}
.cal-appt {
  position: absolute;
  left: 4px;
  right: 4px;
  border-radius: 7px;
  padding: 4px 6px;
  cursor: pointer;
  overflow: hidden;
  color: #fff;
  font-size: 12px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.18);
  transition: filter 0.1s, box-shadow 0.1s;
  z-index: 2;
  border-left: 3px solid rgba(255,255,255,0.4);
}
.cal-appt:hover {
  filter: brightness(1.08);
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
  z-index: 5;
}
.cal-appt-name {
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.1;
}
.cal-appt-service {
  font-size: 11px;
  opacity: 0.9;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}
.cal-appt-time {
  font-size: 11px;
  opacity: 0.75;
  line-height: 1.3;
}
.cal-empty-msg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #ccc;
  font-size: 13px;
  text-align: center;
  pointer-events: none;
  white-space: nowrap;
}

/* ── Responsive table columns: hide on small screens ── */
/* ── Prevent iOS Safari auto-zoom on input focus ── */
@media (max-width: 768px) {
  input, select, textarea { font-size: 16px !important; }
}

.fc-mon-short { display: none; }
.fc-dep-short { display: none; }
.ht-status-short { display: none; }
.ht-svc-inline { display: none; }
.ht-hdr-count { display: none; }
.ht-hdr-date-mobile { display: none; }
@media (max-width: 600px) {
  /* Today's Appointments header: count right, date below */
  .ht-hdr-dash { display: none; }
  .ht-hdr-count { display: inline; }
  .ht-hdr-date-desktop { display: none !important; }
  .ht-hdr-date-mobile { display: block; }
  /* Today's Appointments: hide Service & Status columns, show Master */
  .ht-col-svc, .ht-col-status { display: none; }
  .ht-tbl td, .ht-tbl th { padding: 6px 4px !important; font-size: 11px !important; }
  .ht-tbl td:first-child, .ht-tbl th:first-child { padding-left: 8px !important; }
  .ht-svc-inline { display: block; }
  .ht-status-full { display: none; }
  .ht-status-short { display: none; }
  /* Forecast: keep dep/rem visible but compact */
  .fc-tbl td, .fc-tbl th { padding: 7px 4px !important; font-size: 11px !important; }
  .fc-tbl td:first-child, .fc-tbl th:first-child { padding-left: 8px !important; }
  .fc-mon-full { display: none; }
  .fc-mon-short { display: inline; }
  .fc-dep-full { display: none; }
  .fc-dep-short { display: inline; }
}

/* ── Calendar view tabs ── */
.cal-view-tabs { display:none !important; }
.cal-today-btn {
  background: linear-gradient(to bottom, #999, #777) !important;
  color: #fff !important;
  border: 1px solid #777 !important;
  border-bottom: 3px solid #555 !important;
  box-shadow: 0 2px 3px rgba(0,0,0,0.15) !important;
}
.cal-today-btn:hover {
  background: linear-gradient(to bottom, #bbbbbb, #999999) !important;
  color: #fff !important;
}
.cal-tab {
  background: linear-gradient(to bottom, #ffffff, #f0f0f0);
  color: #cc3333;
  border: 1px solid #ddd;
  border-bottom: 3px solid #bbb;
  border-radius: 7px;
  padding: 6px 16px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: .4px;
  transition: background 0.12s, color 0.12s;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
.cal-tab:hover { background: linear-gradient(to bottom, #fff5f5, #f5e8e8); color: #8b1a1a; }
.cal-tab.active {
  background: linear-gradient(to bottom, #dd3333, #bb1a1a);
  color: #fff;
  border-color: #8b1a1a;
  border-bottom-color: #5a0e0e;
  box-shadow: 0 2px 4px rgba(139,26,26,0.3);
}

/* ── Month grid ── */
.cal-month-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  width: 100%;
}
.cal-month-dow {
  flex: 1; min-width: 0;
  padding: 12px 0;
  text-align: center;
  font-size: 12px;
  font-weight: 800;
  color: #fff;
  letter-spacing: .8px;
  text-transform: uppercase;
  background: linear-gradient(to bottom, #dd3333, #bb1a1a);
  border-bottom: 3px solid #881111;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
  box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}
.cal-month-dow.weekend {
  color: #ffd0d0;
  background: linear-gradient(to bottom, #b02020, #7a1010);
}
.cal-header-row > div[style*="display:contents"] {
  display: contents;
}
.cal-month-cell {
  min-height: 110px;
  border-right: 1px solid #ebebeb;
  border-bottom: 1px solid #ebebeb;
  padding: 8px;
  cursor: pointer;
  vertical-align: top;
  transition: background 0.15s, box-shadow 0.15s;
  background: #fff;
}
.cal-month-cell:hover {
  background: #f7f0f0;
  box-shadow: inset 0 0 0 1px rgba(139,26,26,0.12);
}
.cal-month-cell.mob-selected {
  background: #f5e6e6 !important;
  box-shadow: inset 0 0 0 2px #cc3333 !important;
  border-radius: 4px;
}
.cal-month-cell-empty { background: #f8f8f8; opacity: 0.6; }
.cal-month-weekend { background: #fff8f8; }
.cal-month-today { background: transparent !important; box-shadow: none !important; }
.cal-month-day-num {
  font-size: 14px; font-weight: 600; color: #555;
  margin-bottom: 4px; line-height: 1;
}
.cal-month-day-num.weekend-num {
  color: #cc2222; font-weight: 800;
}
.cal-month-day-today {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: #8b1a1a; color: #fff !important; font-weight: 900;
}
.cal-month-appt {
  font-size: 11px; color: #fff; border-radius: 3px;
  padding: 1px 5px; margin-bottom: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cal-month-more { font-size: 11px; color: #888; padding-left: 2px; }
@media (min-width: 601px) { .cal-nav-row { display: none !important; } }

/* Day list panel (used on all screen sizes) */
#cal-mobile-day-list {
  background: #fff;
  border: 3px solid #fff;
  border-radius: 12px;
  box-shadow: 0 4px 0 #c8c8c8, 0 6px 12px rgba(0,0,0,0.12);
  overflow: hidden;
  padding: 0;
  margin: 12px 8px 0;
}
#cal-mobile-day-list .mob-day-hdr {
  background: linear-gradient(to bottom, #cc3333, #8b1a1a);
  font-size: 15px; font-weight: 800; color: #fff;
  padding: 12px 20px; letter-spacing: 0.5px; text-transform: uppercase;
  margin-bottom: 0;
}
#cal-mobile-day-list .mob-appt-card {
  background: #fff; border-radius: 10px;
  padding: 12px 16px 12px 12px; margin-bottom: 10px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.09);
  border-left: 4px solid #ccc;
  display: flex; flex-direction: row; align-items: center; gap: 14px;
  cursor: pointer;
}
#cal-mobile-day-list .mob-appt-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.14); }
#cal-mobile-day-list .mob-appt-time { min-width: 52px; font-size: 14px; font-weight: 700; color: #8b1a1a; text-align: center; flex-shrink: 0; }
#cal-mobile-day-list .mob-appt-body { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
#cal-mobile-day-list .mob-appt-client { font-weight: 700; font-size: 15px; color: #222; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#cal-mobile-day-list .mob-appt-service { font-size: 13px; color: #555; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#cal-mobile-day-list .mob-appt-master { font-size: 12px; color: #999; }
#cal-mobile-day-list .mob-appt-price-row { display: flex; gap: 8px; margin-top: 3px; align-items: center; }
#cal-mobile-day-list .mob-appt-price { font-size: 13px; font-weight: 700; color: #cc2222; }
#cal-mobile-day-list .mob-appt-dep { font-size: 12px; color: #888; }
#cal-mobile-day-list .mob-appt-badge { font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 8px; color: #fff; }

/* Desktop: show cards in a grid */
@media (min-width: 601px) {
  #cal-mobile-day-list { padding: 0; }
  #cal-mobile-day-list .mob-day-hdr { font-size: 16px; }
  #cal-mobile-day-list .mob-appt-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
  }
}

/* Day list table (desktop) */
.day-tbl { width: 100%; border-collapse: separate; border-spacing: 0 4px; font-size: 13px; }
.day-tbl thead tr { border-bottom: 2px solid #e8d0d0; }
.day-tbl th { text-align: left; padding: 6px 12px; font-size: 11px; font-weight: 700; color: #999; text-transform: uppercase; letter-spacing: 0.5px; }
.day-tbl-row { background: #fff; cursor: pointer; transition: background 0.15s; }
.day-tbl-row:hover { background: #fdf4f4; }
.day-tbl-row td { padding: 11px 12px; vertical-align: middle; border-top: 1px solid #f0e8e8; border-bottom: 1px solid #f0e8e8; }
.day-tbl-row td:first-child { border-left: 3px solid #ccc; border-radius: 8px 0 0 8px; }
.day-tbl-row td:last-child { border-right: 1px solid #f0e8e8; border-radius: 0 8px 8px 0; }
.day-tbl-time { font-weight: 700; color: #8b1a1a; white-space: nowrap; width: 72px; }
.day-tbl-client { font-weight: 600; color: #222; }
.day-tbl-svc-mob { display: none; font-size: 11px; color: #666; font-weight: 400; margin-top: 2px; }
.day-tbl-badges-row { display: inline; }
.day-tbl-service { color: #555; max-width: 260px; }
.day-tbl-master { color: #888; white-space: nowrap; }
.day-tbl-type { white-space: nowrap; }
.day-tbl-price { text-align: right; white-space: nowrap; font-weight: 700; color: #cc2222; width: 70px; }
.day-tbl-dep { text-align: right; white-space: nowrap; font-weight: 600; color: #333; width: 70px; }
.day-tbl-badge { font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: 8px; color: #fff; margin-left: 5px; vertical-align: middle; }
.day-tbl-total td { padding: 10px 12px; font-weight: 700; font-size: 13px; color: #8b1a1a; border-top: 2px solid #e8d0d0; background: transparent; }
.day-tbl-total .day-tbl-price { color: #cc2222; }
.day-tbl-tips { text-align: center !important; }

/* ── Day table: tablet (≤900px) ── */
@media (max-width: 900px) {
  .day-tbl-col-notes { display: none; }
  .day-tbl { font-size: 12px; }
  .day-tbl-row td { padding: 9px 8px; }
  .day-tbl th { padding: 5px 8px; }
  .day-tbl-service { max-width: 160px; }
  #cal-mobile-day-list {
    border: 3px solid #fff !important;
    box-shadow: 0 4px 0 #cc3333, 0 6px 12px rgba(0,0,0,0.12) !important;
    padding: 0 !important;
  }
}

/* ── Day table: phone (≤600px) ── */
@media (max-width: 600px) {
  .day-tbl-col-notes, .day-tbl-col-master,
  .day-tbl-col-service, .day-tbl-col-price, .day-tbl-col-disc { display: none; }
  .day-tbl-col-dep { display: table-cell; }
  .day-tbl-svc-mob { display: block; }
  .day-tbl-badges-row { display: block; margin-top: 3px; }
  .day-tbl { font-size: 12px; }
  .day-tbl-row td { padding: 8px 6px; }
  .day-tbl th { padding: 5px 6px; font-size: 10px; }
  .day-tbl-time { width: 54px; font-size: 12px; }
  #cal-mobile-day-list {
    border: 3px solid #fff !important;
    box-shadow: 0 4px 0 #cc3333, 0 6px 12px rgba(0,0,0,0.12) !important;
    padding: 0 !important;
    margin-top: 8px;
  }
}

.cal-desk-heat { display: inline-block; margin-top: 4px; border-radius: 6px; font-size: 12px; font-weight: 700; padding: 3px 8px; }
.cal-desk-heat.heat-low  { background: #fde8e8; color: #c0504d; }
.cal-desk-heat.heat-mid  { background: #f8a8a8; color: #8b1a1a; }
.cal-desk-heat.heat-high { background: #cc2222; color: #fff; }

/* Fix cal-header-row for month view */
.cal-header-row.month-mode {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  border-bottom: none;
}

/* ── Availability day buttons ── */
.avail-day-btn {
  width: 42px; height: 42px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; cursor: pointer;
  background: #f0f0f0; color: #888;
  transition: all 0.15s;
  user-select: none;
}
.avail-day-btn.active {
  background: #8b1a1a; color: #fff;
}
.avail-day-btn:hover { opacity: 0.85; }

.btn-save-exit {
  background: linear-gradient(to bottom, #ffffff, #f0f0f0);
  color: #dd3333;
  border: none;
  border-bottom: 4px solid #cc2222;
  padding: 7px 18px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 6px rgba(0,0,0,0.2);
  transition: all 0.1s;
}
.btn-save-exit:hover {
  background: linear-gradient(to bottom, #fff5f5, #ffe8e8);
  color: #bb1a1a;
}
.btn-save-exit:active {
  transform: translateY(3px);
  border-bottom-width: 1px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

/* ══════════════════════════════════════════════════
   MOBILE RESPONSIVE
══════════════════════════════════════════════════ */
@media (max-width: 600px) {
  .app-container { padding: 8px 8px 30px; gap: 8px; }

  /* Nav bar */
  .navbar { padding: 8px 10px; flex-wrap: wrap; gap: 6px; }
  .navbar-brand { font-size: 15px; }
  .navbar-links { gap: 4px; }
  .navbar-links .btn-secondary, .navbar-links .btn-primary { padding: 5px 10px; font-size: 11px; }

  /* Top header - stack nav buttons vertically */
  .top-header { flex-wrap: wrap; padding: 6px 10px; gap: 4px; }
  .header-logo { order: 1; }
  .header-right { order: 2; gap: 8px; }
  .header-user { display: none; }
  .logout-link { display: none !important; }
  .header-center { order: 3; width: 100%; flex-direction: row; gap: 4px; align-items: stretch; }
  .header-center .btn-header { flex: 1; margin-left: 0 !important; font-size: 11px; padding: 7px 2px; text-align: center; white-space: nowrap; }
  .btn-header { font-size: 11px; padding: 5px 10px; box-shadow: 0 0 5px rgba(0,0,0,0.18); }
  .btn-header[style*="margin-left"] { margin-left: 0 !important; }

  /* Signature - remove white box */
  .salon-signature-img { height: 120px; filter: url('#remove-white'); }

  /* Top nav card */
  .top-nav-card { padding: 10px; gap: 6px; flex-wrap: wrap; }
  .top-nav-card button { font-size: 11px; padding: 6px 10px; }
  .top-nav-card > div { flex-wrap: wrap; gap: 6px; }
  .btn-import, .btn-excel { font-size: 11px; padding: 5px 10px; }
  .list-filter-row { flex-direction: column; align-items: stretch; }

  /* Form rows */
  .form-row { flex-direction: column; align-items: flex-start; padding: 8px 12px; min-height: unset; gap: 4px; }
  .form-label { width: 100%; min-width: unset; font-size: 12px; }
  .form-control-wrap { width: 100%; }
  .form-control-wrap .input-field,
  .form-control-wrap .select-field,
  .form-control-wrap .medium-input,
  .form-control-wrap .form-input-std { width: 100% !important; max-width: 100% !important; }
  .form-input-std { width: 100% !important; max-width: 100% !important; }

  /* Checkbox group */
  .checkbox-group { gap: 16px; }

  /* Form footer buttons */
  .form-footer-btns { flex-wrap: wrap; gap: 8px; padding: 10px 12px; }
  .form-footer-btns button { flex: 1; min-width: 80px; font-size: 12px; }

  /* Contracts card */
  .contracts-card { padding: 10px; }
  .add-contracts-row { gap: 6px; }
  .add-contracts-row button { flex: 1; font-size: 12px; padding: 7px 8px; white-space: nowrap; min-width: 76px; }
  /* Notification tables: a full MM/DD/YYYY date plus the time is too wide for one
     phone line — let it wrap so the SMS/WA buttons stay on screen. */
  .hr-date-cell { white-space: normal !important; }

  /* Users list: give the password field its own row so Change/Delete stay on screen. */
  .user-pw-group { flex: 1 1 100% !important; }

  /* Three number fields side by side leave no room for their labels on a phone. */
  .stg-field-grid { grid-template-columns: minmax(0,1fr) !important; }

  /* Four buttons (Invoices / Appointments / Waitlist / Photos) can't share one
     phone row — let them wrap into a 2×2 grid instead of running off-screen. */
  .btn-history { font-size: 12px; padding: 7px 8px; width: auto; flex: 1 1 calc(50% - 4px); }
  .btn-photos-action { font-size: 12px; padding: 7px 8px; flex: 1 1 calc(50% - 4px); }
  .client-action-btns { flex-wrap: wrap; }

  /* Client list table — make it scrollable */
  .clients-table-scroll { max-height: calc(100vh - 280px); }
  .clients-table { font-size: 11px; min-width: 620px; }
  .clients-table th, .clients-table td { padding: 6px 8px; }
  /* Larger tap targets for sort headers on touch */
  .clients-table th.sortable { padding: 8px 8px; line-height: 1.3; }
  .sort-arrow { font-size: 9px; }

  /* Search / filter bar */
  .list-filter-row { flex-direction: column; align-items: stretch; gap: 6px; }
  .list-filter-row .search-input { width: 100% !important; box-sizing: border-box; }
  .sel-btn-row, .excel-btn-row { flex-wrap: wrap; gap: 6px; }
  .sel-btn-row button, .excel-btn-row button { flex: 1; min-width: 0; font-size: 11px; }
  .list-controls { flex-direction: column; gap: 6px; }
  .list-controls input { width: 100%; }

  /* History table */
  #history-table { font-size: 11px; }
  #history-table th:nth-child(5), #history-table td:nth-child(5),
  #history-table th:nth-child(6), #history-table td:nth-child(6) { display: none; }
  /* Unfreeze columns 2–4 on tablet, keep only column 1 (#) sticky */
  #history-table th:nth-child(2), #history-table td:nth-child(2),
  #history-table th:nth-child(3), #history-table td:nth-child(3),
  #history-table th:nth-child(4), #history-table td:nth-child(4) { position: static; left: auto; }
  .history-filters { flex-wrap: wrap; gap: 6px; }
  .hist-filter-group { flex-direction: column; gap: 2px; }
  .hist-filter-input { width: 100px; }

  /* Profile layout */
  .profile-layout { flex-direction: column; }
  .profile-photo-col { align-items: flex-start; margin-top: 12px; }

  /* Invoice */
  .invoice-body { flex-direction: column; }
  .invoice-right { width: 100%; margin-top: 12px; border-left: none; border-top: 1px solid #eee; padding-top: 10px; }
  .inv-field-row label { font-size: 11px; }
  .inv-field-row .input-field { width: 80px; }

  /* Contract doc */
  .contract-doc-card { padding: 12px; }
  .btn-print { position: static; display: block; margin: 0 0 10px auto; }
  .svc-row { flex-wrap: wrap; gap: 4px; }
  .svc-main-label { width: 120px; min-width: 100px; font-size: 11px; }
  .svc-select-wide { min-width: 0; font-size: 11px; }

  /* Card header */
  .card-header { font-size: 13px; padding: 10px 12px; }

  /* Notes */
  .notes-box { padding: 10px; }
  .notes-box textarea { font-size: 12px; }

  /* Stats table */
  #client-stats-table table { font-size: 12px; }
  #client-stats-table th, #client-stats-table td { padding: 6px 12px; }

  /* Email Campaign */
  .campaign-grid { grid-template-columns: 1fr; }
  .campaign-client-list { max-height: 260px !important; }
  #campaign-preview { height: 260px !important; }
  .btn-tpl { font-size: 11px; padding: 5px 10px; }
  #campaign-body { font-size: 11px; }
}

/* ── ANALYTICS RESPONSIVE ─────────────────────────────────── */

/* Tablet (≤900px) */
@media (max-width: 900px) {
  /* Header: stack title row and date row */
  #view-analytics .top-nav-card {
    flex-direction: row;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 8px;
  }
  /* FROM / TO share the top row with CLEAR (inline, like Email/SMS log) */
  #view-analytics .top-nav-card > div:nth-child(1),
  #view-analytics .top-nav-card > div:nth-child(2) {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
  }
  #view-analytics .top-nav-card > div:nth-child(1) input,
  #view-analytics .top-nav-card > div:nth-child(2) input {
    width: 100% !important;
    box-sizing: border-box;
  }
  #view-analytics .top-nav-card > button { flex: 0 0 auto; }
  /* KPI cells drop to their own full-width row below the dates */
  #view-analytics .top-nav-card > #analytics-kpi-row {
    width: 100%;
    flex-basis: 100%;
    margin-left: 0;
  }
  #analytics-return-rate {
    margin-left: 0 !important;
  }

  /* KPI cards: 2 per row */
  #analytics-kpi-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  #analytics-kpi-row .card {
    min-width: 0 !important;
    flex: unset !important;
  }

  /* Tables inside cards: scrollable */
  #analytics-services-ibe,
  #analytics-services-ktip,
  #analytics-type-table,
  #analytics-referral-table,
  #analytics-monthly-table { overflow-x: auto; }

  /* Sleeping clients header wrap */
  #view-analytics .card > div:first-child {
    flex-wrap: wrap;
    gap: 8px;
  }
}

/* Mobile (≤600px) */
@media (max-width: 600px) {
  /* KPI: full width single column */
  #analytics-kpi-row {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  #analytics-kpi-row .card {
    padding: 12px !important;
  }
  #analytics-kpi-row .card > div:nth-child(2) {
    font-size: 20px !important;
  }

  /* Return rate block compact */
  #analytics-return-rate > div {
    padding: 4px 10px !important;
    gap: 8px !important;
  }
  #analytics-return-rate .card > div:first-child div:last-child {
    font-size: 16px !important;
  }

  /* Analytics date inputs */
  #analytics-date-from,
  #analytics-date-to { width: 100px !important; }

  /* Section cards padding */
  #view-analytics .card { padding: 14px !important; }

  /* Tables font size */
  #analytics-services-ibe table,
  #analytics-services-ktip table,
  #analytics-type-table table,
  #analytics-referral-table table,
  #analytics-monthly-table table { font-size: 12px; }

  /* Sleeping clients date input */
  #analytics-sleep-date { width: 110px !important; }
}

/* ══════════════════════════════════════════════════════════
   HAMBURGER MENU
══════════════════════════════════════════════════════════ */
.hamburger-btn {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: none;
  border: 2px solid #cc3333;
  border-radius: 8px;
  cursor: pointer;
  padding: 6px;
  flex-shrink: 0;
}
.hamburger-btn span {
  display: block;
  width: 20px;
  height: 2px;
  background: #cc3333;
  border-radius: 2px;
  transition: all 0.25s;
}
.hamburger-btn.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger-btn.open span:nth-child(2) { opacity: 0; }
.hamburger-btn.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-nav {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 210px;
  background: #fff;
  border-left: 1px solid #cc3333;
  box-shadow: -12px 0 24px -2px rgba(0,0,0,0.5);
  z-index: 500;
  flex-direction: column;
  padding: 20px 0;
  overflow-y: auto;
}
.mobile-nav-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 14px 18px;
  font-size: 16px;
  font-weight: 700;
  color: #333;
  background: none;
  border: none;
  border-bottom: 1px solid #f0f0f0;
  cursor: pointer;
  font-family: inherit;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  transition: background 0.15s;
}
.mobile-nav-item:hover { background: #fff5f5; color: #cc3333; }
.mobile-nav-user-info { padding: 10px 20px; font-size: 13px; color: #666; border-top: 1px solid #eee; margin-top: auto; }
.mobile-nav-logout { color: #cc3333; border-top: none; border-bottom: none; }
.mobile-nav-home { }
.mobile-nav-home:hover { background: #fde8e8; }

/* Desktop (≥901px): show the phone-style menu as a permanent LEFT sidebar
   instead of the horizontal top bar, and shift all content to the right. */
@media (min-width: 901px) {
  #page-app { padding-left: 210px; }
  /* On a wide monitor the centred container left a gap between the menu and the
     tables — keep the content next to the menu and let the slack fall on the right. */
  .app-container, .cal-page-container { margin-left: 0; margin-right: auto; }
  .header-center { display: none !important; }
  .top-header { display: none !important; }
  /* Top header is hidden on desktop, so the edit-page sticky bars sit flush at the top
     (was offset 52px to clear the old header). Keeps the master/service name visible. */
  .svc-sticky-outer { top: 0 !important; }
  #mobile-nav.mobile-nav {
    display: flex !important;
    left: 0;
    right: auto;
    border-left: none;
    border-right: 1px solid #cc3333;
    box-shadow: 12px 0 24px -2px rgba(0,0,0,0.18);
  }
}

/* ══ BIRTHDAY HOME VIEW ════════════════════════════════════ */
.bday-card-header {
  background: linear-gradient(to right, #8b1a1a, #cc3333) !important;
  display: flex; align-items: center; gap: 8px; padding: 12px 16px;
  flex-wrap: nowrap; white-space: nowrap; overflow: hidden;
}
.bday-header-icon { font-size: 18px; flex-shrink: 0; }
.bday-header-title { font-weight: 700; font-size: 14px; flex-shrink: 0; }
.bday-header-subtitle { font-weight: 400; font-size: 13px; opacity: 0.85; margin-left: 2px; flex-shrink: 1; overflow: hidden; text-overflow: ellipsis; }
.bday-header-date { margin-left: auto; font-weight: 400; font-size: 12px; opacity: 0.85; flex-shrink: 0; padding-left: 8px; }
.bday-content { padding: 0; }
.bday-loading { color: #aaa; text-align: center; padding: 30px; font-size: 13px; }

.bday-empty { text-align: center; padding: 40px 20px; color: #aaa; }
.bday-empty-icon { font-size: 44px; margin-bottom: 10px; }
.bday-empty-text { font-size: 14px; }

.bday-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.bday-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.bday-table th {
  background: #f8f8f8; color: #666; font-weight: 600;
  padding: 10px 14px; text-align: left;
  border-bottom: 2px solid #eee; white-space: nowrap;
}
.bday-table td {
  padding: 12px 14px; border-bottom: 1px solid #f2f2f2;
  vertical-align: middle;
}
.bday-table tbody tr:last-child td { border-bottom: none; }
.bday-table tbody tr:hover td { background: #fdf5f5; }
.bday-name-cell { display: flex; align-items: center; gap: 8px; font-weight: 600; color: #222; }
.bday-client-link { cursor: pointer; color: #8b1a1a; text-decoration: underline; text-decoration-style: dotted; }
.bday-client-link:hover { color: #cc3333; }
.bday-sent-label { font-size: 11px; color: #227722; font-weight: 600; }
.bday-cake { font-size: 20px; flex-shrink: 0; }
.bday-send-btn, .bday-sent-btn, .bday-sms-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 80px; height: 32px; border-radius: 6px; font-size: 12px;
  font-weight: 700; white-space: nowrap; text-decoration: none;
  box-sizing: border-box; cursor: pointer; border: none;
  padding: 0 12px;
}
.bday-send-btn {
  background: linear-gradient(to bottom, #dd3333, #bb1a1a);
  color: #fff; box-shadow: 0 3px 0 #881111;
  transition: all 0.1s;
}
.bday-send-btn:hover { background: linear-gradient(to bottom, #ee4444, #cc2222); }
.bday-send-btn:active { box-shadow: none; transform: translateY(2px); }
.bday-send-btn:disabled { opacity: 0.6; cursor: default; transform: none; }
.bday-sent-btn {
  background: #227722; box-shadow: 0 3px 0 #155015; color: #fff;
}
.bday-sms-btn {
  background: linear-gradient(to bottom, #999, #777);
  color: #fff; box-shadow: 0 3px 0 #555;
}
/* Appears after the Messages app is opened: confirms the text really went out */
.bday-sms-confirm {
  min-width: 80px; height: 26px; border-radius: 6px; font-size: 11px; font-weight: 700;
  white-space: nowrap; box-sizing: border-box; cursor: pointer; padding: 0 10px;
  background: #fff; color: #cc3333; border: 1.5px solid #cc3333;
}
.bday-sms-confirm:active { transform: translateY(1px); }
.bday-table { width: 100%; }
.bday-no-email { color: #ccc; font-size: 12px; }
.bday-date-mobile { display: none; }

.coupon-btn-stats, .coupon-btn-edit, .coupon-btn-del {
  display: inline-flex; align-items: center; justify-content: center;
  height: 32px; border-radius: 7px; font-size: 12px;
  font-weight: 700; white-space: nowrap; text-transform: uppercase;
  letter-spacing: 0.4px; padding: 0 14px; cursor: pointer;
  margin-left: 5px; transition: all 0.12s; box-sizing: border-box;
}
.coupon-btn-stats {
  background: #fff; color: #cc3333;
  border: 1px solid #ddd;
  box-shadow: 0 3px 0 #bbb;
}
.coupon-btn-stats:hover { background: #f9f9f9; }
.coupon-btn-stats:active { box-shadow: none; transform: translateY(2px); }
.coupon-btn-edit {
  background: #fff; color: #cc3333;
  border: 1px solid #ddd;
  box-shadow: 0 3px 0 #bbb;
}
.coupon-btn-edit:hover { background: #f9f9f9; }
.coupon-btn-edit:active { box-shadow: none; transform: translateY(2px); }
.coupon-btn-del {
  background: linear-gradient(to bottom, #dd3333, #bb1a1a);
  color: #fff; border: none;
  box-shadow: 0 3px 0 #881515;
}
.coupon-btn-del:hover { background: linear-gradient(to bottom, #ee4444, #cc2222); }
.coupon-btn-del:active { box-shadow: none; transform: translateY(2px); }

.coupon-disc-mobile { display: none; }
.coupon-del-x { display: none; }
.coupon-actions { display: flex; align-items: center; justify-content: flex-end; gap: 5px; }

.ca-date-fp {
  border: 1.5px solid #cc3333; border-radius: 6px; padding: 5px 10px;
  font-size: 13px; color: #333; outline: none; background: #fff;
  cursor: pointer; min-width: 120px;
}

/* Coupon Analytics filters — tablet/phone: dates on row 1, coupon + buttons on row 2 */
@media (max-width: 900px) {
  .ca-grp-dates, .ca-grp-actions { flex: 1 1 100%; width: 100%; }
  .ca-grp-dates .ca-fld { flex: 1; }
  .ca-grp-dates .ca-date-fp { width: 100%; min-width: 0; box-sizing: border-box; }
  .ca-grp-actions .ca-fld:first-child { flex: 1; }
  .ca-grp-actions #ca-coupon-display { min-width: 0; width: 100%; }
  .ca-grp-actions .ca-btn { flex: 0 0 auto; }
  /* Left-align the COUPONS dropdown (remove right push) on phone/tablet */
  .ca-filter-wrap > .ca-fld { margin-left: 0 !important; }
  #ca-coupon-dd { left: 0; right: auto; }
}
.ca-tbl th {
  padding: 7px 12px; text-align: left; font-size: 11px; color: #888;
  font-weight: 700; text-transform: uppercase; background: #fdf4f4;
}
.ca-tbl td {
  padding: 8px 12px; font-size: 13px; border-bottom: 1px solid #f5eded;
}
.ca-tbl tr:last-child td { border-bottom: none; }

@media (max-width: 768px) {
  .coupon-col-disc { display: none; }
  .coupon-col-blogger { display: none; }
  .coupon-blogger-mobile { display: block !important; }
  .coupon-disc-mobile {
    display: block;
    font-size: 13px; color: #000; font-weight: 800; margin-top: 2px;
  }
  .coupon-status-label { display: none; }
  .coupon-actions {
    flex-direction: column; align-items: flex-end; gap: 4px;
  }
  .coupon-btn-stats, .coupon-btn-edit {
    min-width: unset; padding: 0 10px; font-size: 11px; height: 26px; margin-left: 0;
  }
  .coupon-btn-del {
    width: 26px; height: 26px; padding: 0; min-width: unset;
    border-radius: 7px; box-shadow: 0 3px 0 #881515; margin-left: 0;
  }
  .coupon-del-text { display: none; }
  .coupon-del-x { display: inline; font-size: 13px; font-weight: 700; }
  .coupon-actions > div { display: flex; gap: 4px; }
}

@media (max-width: 768px) {
  .bday-table-wrap { overflow-x: hidden; width: 100%; }
  .bday-col-phone { display: none; }
  .bday-col-email { display: none; }
  .bday-table td, .bday-table th { padding: 8px 8px; }
  .bday-action-cell > div { display: flex; gap: 6px; flex-wrap: nowrap; }
  .bday-date-desktop { display: none; }
  .bday-date-mobile { display: block; }
  #admin-footer { display: none !important; }
}

@media (max-width: 900px) {
  .hamburger-btn { display: flex; order: 10; margin-left: 8px; }
  .header-logo { order: 1; }
  .header-right { order: 2; margin-left: 0; }
  .header-center { display: none !important; }
  .header-user { display: none; }
  .logout-link { display: none !important; }
  #header-username-mobile { display: flex !important; align-items: center; order: 9; margin-left: auto; margin-right: 4px; }
}

/* ── Tablet only (601px–900px): hamburger menu like phone ── */
@media (min-width: 601px) and (max-width: 900px) {
  /* Use hamburger menu same as phone */
  .hamburger-btn { display: flex !important; }
  .header-center { display: none !important; }
  .header-user { display: none; }
  .logout-link { display: none !important; }
  .top-header { flex-wrap: nowrap !important; padding: 8px 16px !important; }


  /* Keep invoice form horizontal */
  .invoice-body { flex-direction: row; overflow: hidden; }
  .invoice-left { min-width: 0; flex: 1; }
  .invoice-right { width: 240px; flex-shrink: 0; border-left: 1px solid #eee; border-top: none; padding-left: 12px; padding-top: 0; margin-top: 0; overflow: hidden; }
  .inv-field-row label { font-size: 11px; white-space: normal; }
  .inv-field-row .input-field { width: 75px; }

  /* Keep notes/offer row horizontal */
  .notes-offer-row { flex-direction: row; }

  /* Keep form labels at reasonable width */
  .form-label { width: 150px; min-width: 150px; }

  /* Client list: keep search bar inline (not full-width column) */
  .list-filter-row .search-input { width: auto !important; }
  .list-filter-row { flex-wrap: wrap; gap: 6px; }

  /* Clients table: restore standard font/padding */
  .clients-table { font-size: 13px; }
  .clients-table th, .clients-table td { padding: 9px 12px; }

  /* Keep contract header row horizontal */
  .contract-header-row { flex-wrap: nowrap; }

  /* History table: Notes column wider, table scrolls horizontally */
  #history-table { min-width: 750px; }
  #history-table th:nth-child(11), #history-table td:nth-child(11) { min-width: 180px; width: 180px; white-space: pre-wrap; word-break: break-word; }

  /* Analytics KPI: keep 3-column grid */
  #analytics-kpi-row {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  /* Hide Import/Export Excel buttons */
  .btn-import, .btn-excel { display: none !important; }

  /* COLUMNS button: red border + 3D border-bottom, same height as other buttons */
  #clients-top-nav #col-menu-btn { border: 2px solid #cc3333 !important; border-top: 2px solid #cc3333 !important; border-bottom: 4px solid #991515 !important; box-shadow: 0 3px 8px rgba(0,0,0,0.2) !important; padding: 6px 18px !important; }

  /* Visit filter: all buttons in one row */
  #visit-filter-btns { display: flex !important; flex-wrap: nowrap !important; gap: 6px !important; }
  #visit-filter-btns > button { flex: 1 1 0 !important; min-width: 0 !important; font-size: 11px !important; padding: 6px 4px !important; white-space: nowrap; }
}

/* ══════════════════════════════════════════════════════════
   SERVICES / MASTERS / COUPONS — RESPONSIVE
══════════════════════════════════════════════════════════ */

/* ── Tablet (≤ 900px) ── */
@media (max-width: 900px) {
  /* Services: horizontal scroll; hide Description column */
  #services-list { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  #services-list table { min-width: 760px; }
  #services-list thead tr th:nth-child(4),
  #services-list tbody tr td:nth-child(4) { display: none; }

  /* Service editor */
  .svc-edit-wrap { max-width: 100%; padding: 0 16px 40px; }

  /* Masters modal */
  #master-modal > div { width: 92% !important; max-width: 420px; box-sizing: border-box; }

  /* Coupons: horizontal scroll */
  #view-coupons .card { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  #view-coupons table { min-width: 480px; }
  /* Coupons header: ADD COUPON & ANALYTICS equal height on phone/tablet */
  #view-coupons .top-nav-card > div > button {
    box-sizing: border-box;
    height: 36px;
    display: inline-flex;
    align-items: center;
    line-height: 1;
  }
  /* Masters/Services: horizontal scroll */
  #view-masters .card, #view-services .card { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  #coupon-modal > div { width: 92% !important; max-width: 380px; box-sizing: border-box; }
}

/* ── Phone (≤ 600px) ── */
@media (max-width: 600px) {
  /* Header nav: horizontal scroll, no wrap */
  .header-center { overflow-x: auto; flex-wrap: nowrap !important; -webkit-overflow-scrolling: touch; padding-bottom: 2px; scrollbar-width: none; }
  .header-center::-webkit-scrollbar { display: none; }
  .header-center .btn-header { flex: none !important; font-size: 11px !important; padding: 6px 10px !important; white-space: nowrap; }

  /* Services: horizontal scroll; hide Description + Link columns; smaller image */
  #services-list { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  #services-list table { min-width: 600px; font-size: 12px; }
  #services-list thead tr th:nth-child(4),
  #services-list tbody tr td:nth-child(4) { display: none; }
  #services-list thead tr th:nth-child(10),
  #services-list tbody tr td:nth-child(10) { display: none; }
  #services-list td, #services-list th { padding: 6px 8px !important; }
  /* Smaller service image */
  #services-list img { width: 70px !important; max-height: 90px !important; }
  /* Smaller action buttons */
  #services-list tbody tr td:last-child button { font-size: 11px !important; padding: 5px 8px !important; }

  /* Service editor */
  .svc-edit-wrap { padding: 0 8px 32px; }
  .svc-edit-title-bar { padding: 14px 0 10px; }
  .svc-edit-title-bar h2 { font-size: 18px; }
  .svc-field-row { padding: 10px 12px; }

  /* Masters list: already flex, just ensure it fits */
  #masters-list > div { flex-wrap: wrap; gap: 8px; }
  #master-modal > div { width: 95% !important; padding: 20px 16px !important; box-sizing: border-box; }

  /* Coupons */
  #view-coupons table { font-size: 12px; min-width: 420px; }
  #view-coupons td, #view-coupons th { padding: 6px 8px !important; }
  #coupon-modal > div { width: 95% !important; padding: 20px 16px !important; box-sizing: border-box; }
  #coupon-modal .form-input { font-size: 13px; }

  /* Category group header in services */
  #services-list [style*="font-size:22px"] { font-size: 16px !important; padding: 10px 12px !important; }
}

/* ── Clear Search Button ────────────────────────── */
.btn-clear-search {
  background: linear-gradient(to bottom, #dd3333, #bb1a1a);
  color: #fff;
  border: none;
  border-bottom: 3px solid #881111;
  padding: 9px 16px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  text-transform: uppercase;
  box-shadow: 0 4px 8px rgba(0,0,0,0.25);
  transition: all 0.1s;
}
.btn-clear-search:hover { background: linear-gradient(to bottom, #ee4444, #cc2222); }
.btn-clear-search:active { border-bottom-width: 1px; transform: translateY(2px); }

/* ── Guest Mode ─────────────────────────────────── */
.guest-welcome-card {
  background: linear-gradient(135deg, #8b1a1a, #cc3333);
  border: none;
  padding: 20px 24px;
  margin-bottom: 0;
  text-align: center;
}
.guest-welcome-title {
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 6px;
  letter-spacing: 0.3px;
}
.guest-welcome-text {
  color: rgba(255,255,255,0.88);
  font-size: 13px;
  font-weight: 500;
}
.nc-duplicate-error {
  color: #cc2222;
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.field-id-hint {
  color: #cc2222;
  font-weight: 700;
  font-size: 11px;
  margin-top: 4px;
}

/* ══════════════════════════════════════════════════
   GUEST MODE — force-hide admin elements on all screens
══════════════════════════════════════════════════ */
.contract-type-active {
  outline: 3px solid #fff !important;
  box-shadow: 0 0 0 5px #8b1a1a !important;
  transform: scale(1.07);
  z-index: 1;
  position: relative;
}

body.guest-mode .hamburger-btn      { display: flex !important; }
body.guest-mode #header-center      { display: none !important; }
body.guest-mode #admin-footer       { display: none !important; }
body.guest-mode #contract-date-row  { display: none !important; }
body.guest-mode #contract-notes-card { display: none !important; }
body.guest-mode #home-forecast-section { display: none !important; }
body.guest-mode #btn-back-to-clients { display: none !important; }
/* Guest mobile nav: hide all items except Home and Logout */
body.guest-mode .mobile-nav .mobile-nav-item:not(.mobile-nav-home):not(.mobile-nav-logout) { display: none !important; }
body.guest-mode .mobile-nav .mobile-nav-user-info { display: none !important; }

/* Guest header: just logo + home btn + username + logout */
body.guest-mode .top-header {
  justify-content: space-between;
}
body.guest-mode #guest-home-btn { display: none !important; }
body.guest-mode .logout-link { display: none !important; }

/* ══════════════════════════════════════════════════
   MOBILE / TABLET — general improvements
══════════════════════════════════════════════════ */

/* ── Tablet (≤ 900px) ── */
@media (max-width: 900px) {

  /* Campaign grid: stack columns */
  .campaign-grid {
    grid-template-columns: 1fr !important;
    gap: 12px;
  }
  .campaign-client-list { max-height: 300px !important; }

  /* Email compose area */
  #campaign-preview-wrap { margin-top: 10px; }
  #campaign-preview { min-height: 300px !important; }

  /* Template buttons: wrap */
  .campaign-tpl-row { flex-wrap: wrap; gap: 6px; }
  .btn-tpl { font-size: 12px; padding: 6px 12px; }

  /* Home view: full-width search */
  #view-home .search-box-wrap { flex-wrap: wrap; gap: 6px; }
  #view-home .search-input { width: 100% !important; }

  /* Guest welcome banner */
  .guest-welcome-card { padding: 16px 16px; }
  .guest-welcome-title { font-size: 18px; }

  /* New client form: compact */
  .form-row { padding: 8px 12px; }
}

/* ── Phone (≤ 600px) ── */
@media (max-width: 600px) {

  /* Guest home button fits small screens */
  body.guest-mode #guest-home-btn {
    font-size: 12px !important;
    padding: 6px 12px !important;
  }

  /* Header: guest compact */
  body.guest-mode .top-header {
    padding: 8px 10px;
    gap: 6px;
  }
  body.guest-mode .header-right {
    gap: 6px;
  }
  /* Campaign on phone */
  .campaign-grid { grid-template-columns: 1fr !important; }
  .campaign-client-list { max-height: 220px !important; }
  #campaign-preview { min-height: 220px !important; height: auto !important; }

  /* Tighter card padding on phone */
  .app-container { padding: 6px 6px 30px; }
  .card { border-radius: 8px; }

  /* New-client form: full width inputs */
  .form-input, .form-input-std, .select-field, .input-field {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }

  /* Search bar on guest home */
  #view-home .search-box-wrap {
    flex-direction: column;
    gap: 6px;
  }
  #view-home .search-box-wrap .btn-primary,
  #view-home .search-box-wrap .btn-clear-search {
    width: 100%;
  }

  /* Birthday table on phone */
  .bday-table-wrap { overflow-x: auto; }

  /* Contracts add row */
  .add-contracts-row { flex-wrap: wrap; }
  .add-contracts-row button { flex: 1; font-size: 12px; white-space: nowrap; min-width: 76px; }
}

/* ══════════════════════════════════════════════════
   RICH TEXT EDITOR TOOLBAR
══════════════════════════════════════════════════ */
.fmt-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 3px;
  padding: 6px 8px;
  background: #f5f5f5;
  border: 1px solid #ddd;
  border-radius: 7px 7px 0 0;
  border-bottom: none;
}

.fmt-btn {
  background: #fff;
  border: 1px solid #e2e2e2;
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 14px;
  cursor: pointer;
  min-width: 38px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #333;
  box-shadow: 0 1px 2px rgba(0,0,0,0.08);
  transition: background 0.1s, border-color 0.1s;
  font-family: inherit;
}
.fmt-btn:hover { background: #fde8e8; border-color: #cc3333; color: #8b1a1a; }
.fmt-italic { font-style: italic; }
.fmt-underline { text-decoration: underline; }

.fmt-sel {
  background: #fff;
  border: 1px solid #e2e2e2;
  border-radius: 8px;
  padding: 4px 8px;
  font-size: 12px;
  height: 34px;
  color: #333;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0,0,0,0.08);
  font-family: inherit;
}
.fmt-sel:focus { outline: none; border-color: #cc3333; }
.fmt-sel-size { min-width: 66px; }

/* Custom Size / Font dropdowns */
.fmt-dd-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.fmt-dd-pop {
  position: absolute;
  top: calc(100% + 5px);
  left: 0;
  min-width: 170px;
  max-height: 340px;
  overflow-y: auto;
  background: #fff;
  border: 1.5px solid #ff3333;
  border-radius: 12px;
  box-shadow: 0 0 12px rgba(0,0,0,0.22);
  z-index: 200;
  padding: 6px;
}
.fmt-dd-item {
  padding: 9px 14px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 15px;
  color: #333;
  white-space: nowrap;
}
.fmt-dd-item:hover { background: #fde8e8; }

.fmt-sep {
  width: 1px;
  height: 22px;
  background: #cfcfcf;
  margin: 0 3px;
}

.fmt-color-wrap {
  position: relative;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: #fff;
  overflow: hidden;
}
.fmt-color-wrap:hover { border-color: #cc3333; background: #fde8e8; }
.fmt-color-icon {
  font-size: 13px;
  font-weight: 700;
  pointer-events: none;
  position: relative;
  z-index: 1;
}
.fmt-color-wrap input[type="color"] {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  padding: 0;
  border: none;
}

.visual-editor-area {
  min-height: 160px;
  max-height: 380px;
  overflow-y: auto;
  border: 1px solid #ddd;
  border-radius: 0 0 7px 7px;
  padding: 18px 16px;
  font-size: 15px;
  line-height: 2;
  font-family: Georgia, serif;
  color: #555;
  outline: none;
  background: #fff;
  box-sizing: border-box;
  width: 100%;
}
.visual-editor-area:empty::before {
  content: attr(data-placeholder);
  color: #bbb;
  pointer-events: none;
}

/* ── Color palette popup ── */
.color-palette {
  position: absolute;
  top: 34px;
  left: 0;
  z-index: 400;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 10px;
  padding: 8px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.18);
  width: 220px;
  flex-wrap: wrap;
  gap: 4px;
}
.color-swatch {
  width: 18px;
  height: 18px;
  border-radius: 3px;
  border: 1px solid rgba(0,0,0,0.15);
  cursor: pointer;
  flex-shrink: 0;
  transition: transform 0.1s;
}
.color-swatch:hover { transform: scale(1.3); border-color: #333; z-index: 1; position: relative; }

/* Wider font select */
.fmt-sel-font { width: 130px; }

#service-img-remove-btn:not(.svc-btn-hidden) {
  background: linear-gradient(to bottom, #dd3333, #bb1a1a) !important;
  color: #fff !important;
  border: none !important;
  border-bottom: 4px solid #881111 !important;
  border-radius: 6px !important;
  box-shadow: 0 4px 6px rgba(0,0,0,0.2) !important;
  padding: 7px 18px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  display: inline-block !important;
}
#service-img-remove-btn:hover {
  background: linear-gradient(to bottom, #ee4444, #cc2222) !important;
}

/* ── Calendar: mobile & tablet responsive ── */
@media (max-width: 1024px) {
  .cal-topbar {
    padding: 8px 10px;
    gap: 6px;
    margin: 0 0 8px;
    border-radius: 8px;
  }
  .cal-wrapper {
    margin: 0 0 16px;
    border-radius: 10px;
  }
  .cal-scroll-area {
    max-height: calc(100vh - 180px);
    overflow-x: hidden;
  }
  .cal-month-grid {
    width: 100%;
  }
  .cal-month-cell {
    min-height: 72px;
    padding: 4px;
  }
  .cal-month-dow {
    padding: 8px 0;
    font-size: 10px;
  }
  .cal-month-day-num {
    font-size: 12px;
  }
  .cal-month-appt {
    font-size: 9px;
    padding: 1px 3px;
  }
}

@media (max-width: 600px) {
  body { max-width: 100vw; overflow-x: hidden; width: 100%; }
  #page-app { max-width: 100vw; overflow-x: hidden; width: 100%; }
  #cal-mini-cal-widget { display: none !important; }
  #view-bookings { overflow-x: hidden; max-width: 100vw; width: 100%; box-sizing: border-box; }
  .cal-page-container { padding: 12px 2px 16px; max-width: 100vw; box-sizing: border-box; width: 100%; }
  /* month mode: full width, no scroll */
  .cal-header-row.month-mode { min-width: 0 !important; width: 100% !important; }
  .cal-month-grid { width: 100% !important; box-sizing: border-box; }
  /* day/week mode: let grid expand so columns are scrollable */
  .cal-header-row:not(.month-mode) { min-width: max-content !important; }
  .cal-grid { min-width: max-content !important; }
  .cal-master-header-cell { min-width: 110px !important; }
  .cal-master-col { min-width: 110px !important; }
  .cal-wrapper { border: none; max-width: 100%; box-sizing: border-box; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.10); }
  .cal-scroll-area { overflow-x: auto !important; }
  .cal-topbar {
    flex-direction: column;
    align-items: stretch;
    margin: 0 0 6px;
    padding: 6px;
    gap: 6px;
    max-width: 100%;
    box-sizing: border-box;
  }
  .cal-topbar > div { gap: 4px; justify-content: center; max-width: 100%; flex-wrap: wrap; }
  .cal-nav-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
  }
  .cal-nav-btn {
    background: none !important;
    color: #cc3333 !important;
    border: none !important;
    border-bottom: none !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    padding: 8px 16px !important;
    font-size: 36px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
  }
  .cal-nav-row #cal-date-title {
    font-size: 20px !important;
    font-weight: 800 !important;
    color: #cc3333 !important;
    min-width: 160px !important;
    text-align: center !important;
    border: none !important;
    padding: 8px 12px !important;
    box-shadow: none !important;
    background: none !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
  }
  .cal-view-tabs { display: none !important; }
  .cal-tab { padding: 5px 10px !important; font-size: 11px !important; }
  /* Mobile month cells — dots only */
  .cal-month-cell { min-height: 48px !important; padding: 4px 2px !important; cursor: pointer; }
  .cal-month-cell.mob-selected { background: #f5e6e6 !important; border-radius: 6px; }
  .cal-month-day-num { font-size: 13px !important; }
  .cal-month-appt { display: none !important; }
  .cal-month-more { display: none !important; }
  .cal-mob-heat { margin-top: 2px; border-radius: 4px; font-size: 11px; font-weight: 700; text-align: center; padding: 1px 0; line-height: 1.4; }
  .cal-mob-heat.heat-low  { background: #fde8e8; color: #c0504d; }
  .cal-mob-heat.heat-mid  { background: #f8a8a8; color: #8b1a1a; }
  .cal-mob-heat.heat-high { background: #cc2222; color: #fff; }
  /* Mobile day list overrides */
  #cal-mobile-day-list { padding: 0; }
  .cal-tab-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 6px;
  }
  #cal-back-btn {
    display: none;
    background: none;
    border: none;
    color: #8b1a1a;
    font-size: 22px;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
  }
  .cal-wrapper {
    margin: 0 0 12px;
    border-radius: 8px;
  }
  .cal-scroll-area {
    max-height: calc(100vh - 190px);
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  .cal-month-cell {
    min-height: 58px;
    padding: 3px 2px;
  }
  .cal-month-dow {
    padding: 6px 0;
    font-size: 9px;
    letter-spacing: 0;
  }
  .cal-month-day-num {
    font-size: 12px;
    margin-bottom: 2px;
  }
  .cal-month-appt {
    font-size: 8px;
    padding: 1px 2px;
    margin-bottom: 1px;
  }
  .cal-month-day-today {
    width: 20px; height: 20px;
  }
  #cal-date-title { font-size: 13px !important; font-weight: 800 !important; min-width: 0 !important; padding: 5px 8px !important; }
  .cal-nav-btn { padding: 5px 10px !important; font-size: 15px !important; }
  .cal-today-btn { padding: 5px 10px !important; font-size: 11px !important; }
  .cal-tab { padding: 5px 8px !important; font-size: 11px !important; }
  .btn-header[onclick*="copyBookingLink"],
  .btn-secondary[onclick*="booking-settings"],
  .btn-secondary[onclick*="services"] { display: none; }
  /* action buttons row — constrain on mobile */
  #cal-topbar-actions {
    margin-left: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  #cal-topbar-actions > div:first-child {
    display: flex !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    gap: 6px !important;
    align-items: stretch !important;
  }
  /* Size each button to its own label so the long ones (APPOINTMENT, CALENDAR)
     keep their text intact and the short ones (WAITLIST, TODAY) give up the room. */
  #cal-topbar-actions > div:first-child > button,
  #cal-topbar-actions > div:first-child > .cal-master-filter {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    font-size: 11px !important;
    letter-spacing: 0 !important;
    text-align: center !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
    height: 46px !important;
  }
  #cal-topbar-actions > div:first-child > button {
    padding: 0 6px !important;
  }
  #cal-topbar-actions > div:first-child > .cal-master-filter .cal-mf-header {
    height: 46px !important;
    justify-content: center !important;
    padding: 0 8px !important;
    font-size: 12px !important;
    box-sizing: border-box !important;
  }
  /* hide Email Log button in cal topbar on mobile to save space */
  #cal-topbar-actions button[onclick*="email-log"],
  #cal-topbar-actions button[onclick*="openEmailLogFrom"] { display: none !important; }
}

/* ── Email Log responsive ── */
/* Split scroll axes: card does vertical, scroll-div does horizontal.
   This is required for position:sticky to work on both axes in Safari/iOS. */
#view-email-log .clients-table-card, #view-sms-log .clients-table-card { overflow: visible; border-radius: 12px !important; border-top: 3px solid #fff !important; margin-top: 4px; box-shadow: 0 4px 0 #c8c8c8, 0 6px 12px rgba(0,0,0,0.12) !important; }
/* Inner scroll so the column header stays fixed while rows scroll */
#view-email-log .clients-table-scroll, #view-sms-log .clients-table-scroll { overflow-y: auto !important; max-height: calc(100vh - 230px) !important; }
/* ── Email Log table shared scroll rules ── */
#view-email-log .clients-table-card > div:last-child, #view-sms-log .clients-table-card > div:last-child { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ── SMS Log table: phone & tablet — mirrors the Email Log (fixed widths, sticky checkbox, horizontal scroll) ── */
@media (max-width: 1024px) {
  #view-sms-log .app-container { padding: 12px; display: block !important; height: auto !important; }
  #view-sms-log .clients-table-card { overflow: visible !important; max-height: none !important; }
  #view-sms-log .clients-table-scroll { overflow: auto !important; max-height: 62vh !important; -webkit-overflow-scrolling: touch; }
  #view-sms-log .email-log-table thead th { position: sticky !important; top: 0 !important; z-index: 40 !important; }
  #view-sms-log .email-log-table th:nth-child(1), #view-sms-log .email-log-table td:nth-child(1) { position: sticky !important; left: 0 !important; z-index: 5; }
  #view-sms-log .email-log-table thead th:nth-child(1) { z-index: 55 !important; }
  #view-sms-log .email-log-table td:nth-child(1) { background: #fff !important; }
  #view-sms-log table { width: 842px; min-width: 842px; font-size: 12px; table-layout: fixed; }
  #view-sms-log table colgroup { display: none; }
  #view-sms-log table tr > th:nth-child(1), #view-sms-log table tr > td:nth-child(1) { width: 32px; padding: 8px 6px; }
  #view-sms-log table tr > th:nth-child(1) { background: linear-gradient(to bottom,#cc2222,#991111); }
  #view-sms-log table tr > th:nth-child(2), #view-sms-log table tr > td:nth-child(2) { width: 120px; }
  #view-sms-log table tr > th:nth-child(3), #view-sms-log table tr > td:nth-child(3) { width: 90px; }
  #view-sms-log table tr > th:nth-child(4), #view-sms-log table tr > td:nth-child(4) { width: 140px; }
  #view-sms-log table tr > th:nth-child(5), #view-sms-log table tr > td:nth-child(5) { width: 140px; }
  #view-sms-log table tr > th:nth-child(6), #view-sms-log table tr > td:nth-child(6) { width: 220px; }
  #view-sms-log table tr > th:nth-child(7), #view-sms-log table tr > td:nth-child(7) { width: 100px; }
  #view-sms-log table td, #view-sms-log table th { padding: 8px 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #view-sms-log table td span[style*="border-radius:10px"] { white-space: nowrap; font-size: 10px; padding: 2px 6px; }
  #view-sms-log table tbody tr:nth-child(even) td:nth-child(1) { background: #fdf8f8; }
  #view-sms-log table tbody tr:hover td:nth-child(1) { background: #fdf4f4; }
}

@media (max-width: 1024px) {
  #view-email-log .app-container { padding: 12px; }
  #view-email-log .top-nav-card { flex-wrap: wrap; gap: 6px; }
  /* compact buttons on mobile */
  #view-email-log .top-nav-card button { flex-shrink: 1; font-size: 12px; padding: 6px 10px; white-space: nowrap; }
  #view-email-log .top-nav-card > span { flex-shrink: 1; font-size: 14px; white-space: nowrap; }
  /* Tablet: table scrolls inside a bounded window so the header + checkbox column stay put */
  #view-email-log .app-container { display: block !important; height: auto !important; }
  #view-email-log .clients-table-card { overflow: visible !important; max-height: none !important; }
  #view-email-log .clients-table-scroll { overflow: auto !important; max-height: 62vh !important; -webkit-overflow-scrolling: touch; }
  #view-email-log .email-log-table thead th { position: sticky !important; top: 0 !important; z-index: 40 !important; }
  #view-email-log .email-log-table th:nth-child(1), #view-email-log .email-log-table td:nth-child(1) { position: sticky !important; left: 0 !important; z-index: 5; }
  #view-email-log .email-log-table thead th:nth-child(1) { z-index: 55 !important; }
  #view-email-log .email-log-table td:nth-child(1) { background: #fff !important; }
  /* Table: fixed layout, defined widths, horizontal scroll */
  #view-email-log .card > div:last-child { padding: 0; }
  #view-email-log table { width: 920px; min-width: 920px; font-size: 12px; table-layout: fixed; }
  #view-email-log table colgroup { display: none; }
  /* col 1=checkbox only sticky left; col 2+ scroll freely */
  #view-email-log table tr > th:nth-child(1), #view-email-log table tr > td:nth-child(1) { width: 32px; position: sticky; left: 0; z-index: 12; background: #fff; padding: 8px 6px; }
  #view-email-log table tr > th:nth-child(1) { z-index: 22; background: linear-gradient(to bottom,#cc2222,#991111); }
  /* override clients-table sticky on cols 2-4 */
  #view-email-log table tr > th:nth-child(2), #view-email-log table tr > td:nth-child(2) { width: 120px; position: static; left: auto; }
  #view-email-log table tr > th:nth-child(3), #view-email-log table tr > td:nth-child(3) { width: 100px; position: static; left: auto; }
  #view-email-log table tr > th:nth-child(4), #view-email-log table tr > td:nth-child(4) { width: 150px; position: static; left: auto; }
  #view-email-log table tr > th:nth-child(5), #view-email-log table tr > td:nth-child(5) { width: 160px; }
  #view-email-log table tr > th:nth-child(6), #view-email-log table tr > td:nth-child(6) { width: 148px; }
  #view-email-log table tr > th:nth-child(7), #view-email-log table tr > td:nth-child(7) { width: 136px; }
  #view-email-log table tr > th:nth-child(8), #view-email-log table tr > td:nth-child(8) { width: 74px; }
  #view-email-log table td, #view-email-log table th { padding: 8px 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #view-email-log table td span[style*="border-radius:10px"] { white-space: nowrap; font-size: 10px; }
  /* even/hover backgrounds for sticky checkbox cell */
  #view-email-log table tbody tr:nth-child(even) td:nth-child(1) { background: #fdf8f8; }
  #view-email-log table tbody tr:hover td:nth-child(1) { background: #fdf4f4; }
  #view-email-log table tbody tr.el-selected td:nth-child(1) { background: #fde8e8; }
}

@media (max-width: 600px) {
  #view-email-log .app-container { padding: 10px; display: block !important; height: auto !important; }
  /* Phone: table scrolls inside a bounded window so header + checkbox column stay put */
  #view-email-log .clients-table-card { overflow: visible !important; max-height: none !important; }
  #view-email-log .clients-table-scroll { overflow: auto !important; max-height: 58vh !important; -webkit-overflow-scrolling: touch; }
  #view-email-log .email-log-table thead th { position: sticky !important; top: 0 !important; z-index: 40 !important; }
  #view-email-log .email-log-table th:nth-child(1), #view-email-log .email-log-table td:nth-child(1) { position: sticky !important; left: 0 !important; z-index: 5; }
  #view-email-log .email-log-table thead th:nth-child(1) { z-index: 55 !important; }
  #view-email-log .email-log-table td:nth-child(1) { background: #fff !important; }
  #view-email-log .top-nav-card { padding: 8px 10px; gap: 6px; }
  #view-email-log .top-nav-card span { font-size: 14px; }
  /* Filters: stacked vertically — exclude #el-filter-bar, which manages its own row layout */
  #view-email-log .card:not(#el-filter-bar) > div:first-child {
    padding: 10px !important;
    gap: 8px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    flex-wrap: nowrap !important;
  }
  #view-email-log .flatpickr-input { width: 100% !important; }
  #view-email-log #el-delete-btn { width: 100% !important; text-align: center; }
  #view-email-log #email-log-count { font-size: 13px; }
  #view-email-log .card > div:first-child button { width: 100%; }
  /* Table: fixed layout, defined widths, horizontal scroll */
  #view-email-log .card > div:last-child { padding: 0; }
  #view-email-log table { width: 860px; min-width: 860px; font-size: 11px; table-layout: fixed; }
  #view-email-log table colgroup { display: none; }
  /* col 1=checkbox only sticky left; col 2+ scroll freely */
  #view-email-log table tr > th:nth-child(1), #view-email-log table tr > td:nth-child(1) { width: 32px; position: sticky; left: 0; z-index: 12; background: #fff; padding: 6px 5px; }
  #view-email-log table tr > th:nth-child(1) { z-index: 22; background: linear-gradient(to bottom,#cc2222,#991111); }
  /* override clients-table sticky on cols 2-4 */
  #view-email-log table tr > th:nth-child(2), #view-email-log table tr > td:nth-child(2) { width: 120px; position: static; left: auto; }
  #view-email-log table tr > th:nth-child(3), #view-email-log table tr > td:nth-child(3) { width: 90px; position: static; left: auto; }
  #view-email-log table tr > th:nth-child(4), #view-email-log table tr > td:nth-child(4) { width: 140px; position: static; left: auto; }
  #view-email-log table tr > th:nth-child(5), #view-email-log table tr > td:nth-child(5) { width: 140px; }
  #view-email-log table tr > th:nth-child(6), #view-email-log table tr > td:nth-child(6) { width: 130px; }
  #view-email-log table tr > th:nth-child(7), #view-email-log table tr > td:nth-child(7) { width: 120px; }
  #view-email-log table tr > th:nth-child(8), #view-email-log table tr > td:nth-child(8) { width: 88px; }
  #view-email-log table td, #view-email-log table th { padding: 6px 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #view-email-log table td span[style*="border-radius:10px"] { white-space: nowrap; font-size: 10px; padding: 2px 6px; }
  /* even/hover backgrounds for sticky checkbox cell */
  #view-email-log table tbody tr:nth-child(even) td:nth-child(1) { background: #fdf8f8; }
  #view-email-log table tbody tr:hover td:nth-child(1) { background: #fdf4f4; }
  #view-email-log table tbody tr.el-selected td:nth-child(1) { background: #fde8e8; }
}

/* ── New Booking Modal ── */
.nbm-panel {
  background: #fff;
  border-radius: 12px;
  width: 580px;
  max-width: 96vw;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 16px 48px rgba(0,0,0,0.24);
  margin: auto;
  border: 1.5px solid #cc3333;
}
.nbm-header {
  display: flex;
  align-items: center;
  padding: 12px 20px;
  border-bottom: 1px solid #eee;
  background: #fafafa;
  gap: 14px;
  flex-shrink: 0;
}
.nbm-back-btn {
  background: linear-gradient(to bottom, #999, #777);
  border: 1px solid #555;
  border-bottom: 3px solid #555;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  padding: 7px 16px;
  border-radius: 8px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  box-shadow: 0 2px 4px rgba(0,0,0,0.25);
}
.nbm-back-btn:active {
  border-bottom-width: 1px;
  transform: translateY(1px);
  box-shadow: none;
}
.nbm-back-btn:hover { background: linear-gradient(to bottom, #999, #777); }
.nbm-tab-active {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  background: #cc3333;
  padding: 5px 14px;
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.nbm-body {
  flex: 1;
  overflow-y: auto;
}
.nbm-sect-hdr {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 13px 20px;
  font-size: 15px;
  font-weight: 700;
  color: #cc3333;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid #eee;
}
.nbm-arrow { color: #bbb; font-size: 15px; }
.nbm-chevron { color: #bbb; font-size: 13px; }
.nbm-sect-body {
  padding: 16px 20px;
  border-bottom: 1px solid #eee;
}
.nbm-lbl {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: #cc3333;
  margin-bottom: 5px;
}
/* Date & Time layout */
.nbm-datetime-row {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.nbm-cal-wrap { flex: 1; min-width: 0; border: 1px solid #cc3333; border-radius: 10px; padding: 10px; }
.nbm-cal-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.nbm-cal-title { font-size: 14px; font-weight: 700; color: #cc3333; }
.nbm-cal-nb {
  background: none;
  border: none;
  width: 28px; height: 28px;
  font-size: 18px;
  cursor: pointer;
  color: #555;
  display: flex; align-items: center; justify-content: center;
  line-height: 1;
  border-radius: 4px;
}
.nbm-cal-nb:hover { background: #f5f5f5; }
.nbm-cal-dow {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  margin-bottom: 0;
}
.nbm-cal-dow span {
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  color: #333;
  padding: 6px 0 4px;
}
/* Sat (col 6) and Sun (col 7) — Mon-first */
.nbm-cal-dow > span:nth-child(6),
.nbm-cal-dow > span:last-child { background: rgba(204,51,51,0.09); color: #cc3333; }
.nbm-cal-dow-wkend { color: #cc3333 !important; }
.nbm-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0;
}
.nbm-cal-day {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  border-radius: 0;
  cursor: pointer;
  color: #222;
  transition: background 0.1s;
}
/* Sat column (6th of every 7) */
.nbm-cal-grid > *:nth-child(7n+6) { background: rgba(204,51,51,0.09); color: #cc3333; }
/* Sun column (7th of every 7) */
.nbm-cal-grid > *:nth-child(7n+7) { background: rgba(204,51,51,0.09); color: #cc3333; }
.nbm-cal-day:hover { background: rgba(204,51,51,0.18) !important; }
.nbm-cal-other-month { color: #bbb !important; pointer-events: none; cursor: default; }
.nbm-cal-grid > *:nth-child(7n+6).nbm-cal-other-month,
.nbm-cal-grid > *:nth-child(7n+7).nbm-cal-other-month { color: #dda8a8 !important; }
.nbm-cal-past { color: #ccc !important; cursor: default; pointer-events: none; }
.nbm-cal-grid > *:nth-child(7n+6).nbm-cal-past,
.nbm-cal-grid > *:nth-child(7n+7).nbm-cal-past { color: #ddb5b5 !important; }
.nbm-cal-today { font-weight: 700; box-shadow: inset 0 0 0 1.5px #cc3333; border-radius: 6px; }
.nbm-cal-sel { background: #cc3333 !important; color: #fff !important; font-weight: 700; border-radius: 6px; box-shadow: none !important; }
.nbm-cal-unavail { color: #ccc !important; cursor: default; pointer-events: none; }
/* Time slots */
.nbm-slots-wrap {
  flex: 0 0 150px;
  max-height: 220px;
  overflow-y: auto;
  border: 1px solid #cc3333;
  border-radius: 10px;
}
.nbm-slots-placeholder {
  font-size: 13px;
  color: #aaa;
  padding: 20px 10px;
  text-align: center;
  line-height: 1.5;
}
.nbm-slot {
  padding: 8px 12px;
  font-size: 13px;
  cursor: pointer;
  color: #333;
  border-bottom: 1px solid #f5f5f5;
  text-align: center;
  transition: background 0.1s;
}
.nbm-slot:last-child { border-bottom: none; }
.nbm-slot:hover { background: #f5f5f5; }
.nbm-slot-sel { background: #cc3333 !important; color: #fff !important; font-weight: 700; }
/* Footer */
.nbm-footer {
  padding: 14px 20px;
  border-top: 2px solid #7a1a1a;
  background: linear-gradient(to bottom, #cc3333, #8b1a1a);
  flex-shrink: 0;
}
.nbm-cancel-btn {
  background: linear-gradient(to bottom, #999, #777);
  border: none;
  border-bottom: 3px solid #555;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  padding: 10px 46px;
  height: 44px;
  box-sizing: border-box;
  white-space: nowrap;
  box-shadow: 0 4px 6px rgba(0,0,0,0.2);
  text-decoration: none;
  text-transform: uppercase;
}
.nbm-cancel-btn:hover { background: linear-gradient(to bottom, #aaa, #888); }
.nbm-cancel-btn:active { border-bottom-width: 1px; transform: translateY(2px); }

@media (max-width: 600px) {
  #new-booking-modal {
    padding: 0 !important;
    align-items: stretch !important;
  }
  /* Only the booking form goes full-screen on phones — smaller dialogs
     (waitlist) stay as rounded cards like on desktop. */
  #new-booking-modal .nbm-panel {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    height: 100%;
    border-radius: 0 !important;
    margin: 0 !important;
  }
  #nb-master,
  #wl-in-master,
  .nbm-body #nb-svc-picker .nb-svc-display,
  .nbm-body #wl-svc-picker .nb-svc-display { padding: 12px !important; }
  .nbm-body input,
  .nbm-body select,
  .nbm-body textarea {
    font-size: 16px !important;
  }
  .nbm-footer {
    position: sticky;
    bottom: 0;
    z-index: 2;
    padding: 18px 20px;
  }
  .nbm-footer > div:first-child {
    flex-wrap: wrap !important;
    gap: 10px;
  }
  .nbm-footer > div:first-child > button:first-child {
    width: 100% !important;
    flex: none !important;
    order: 1;
  }
  .nbm-footer > div:first-child > label {
    width: 100% !important;
    justify-content: center;
    order: 2;
  }
  .nb-skip-label #nb-skip-notify {
    width: 22px !important;
    height: 22px !important;
    flex-shrink: 0;
  }
  #cal-appt-popup {
    position: fixed !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 88vw !important;
    max-width: 340px !important;
  }
}
@media (min-width: 601px) and (max-width: 900px) {
  .nbm-footer {
    padding: 18px 20px;
  }
  .nbm-footer > div:first-child {
    flex-wrap: wrap !important;
    gap: 10px;
  }
  .nbm-footer > div:first-child > button:first-child {
    width: 100% !important;
    flex: none !important;
    order: 1;
  }
  .nbm-footer > div:first-child > label {
    width: 100% !important;
    justify-content: center;
    order: 2;
  }
  .nb-skip-label #nb-skip-notify {
    width: 22px !important;
    height: 22px !important;
    flex-shrink: 0;
  }
}
.nbm-error {
  background: #fff0f0;
  border: 1px solid #ffcccc;
  border-radius: 6px;
  padding: 10px 14px;
  font-size: 13px;
  color: #cc2222;
  line-height: 1.5;
}
.nbm-cal-unavail-old { display: none; }
#nb-client-results {
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  max-height: 200px;
  overflow-y: auto;
  margin-bottom: 12px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.nb-cs-item {
  padding: 9px 12px;
  cursor: pointer;
  font-size: 13px;
  border-bottom: 1px solid #f0f0f0;
  transition: background 0.1s;
}
.nb-cs-item:last-child { border-bottom: none; }
.nb-cs-item:hover { background: #fdf0f0; }
.nb-cs-item strong { color: #cc2222; }
.nb-cs-none {
  padding: 10px 12px;
  font-size: 13px;
  color: #999;
  font-style: italic;
}

/* ── Service grouped picker ── */
#nb-master,
#wl-in-master {
  border: 1.5px solid #cc3333 !important;
  border-radius: 6px !important;
  appearance: none;
  -webkit-appearance: none;
  background-color: #fff !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'%3E%3Cpath d='M0 0l5 7 5-7z' fill='%23cc3333'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding: 9px 32px 9px 12px !important;
  font-size: 14px !important;
  font-family: inherit !important;
  color: #333 !important;
  font-weight: 400 !important;
}
.nb-svc-picker {
  position: relative;
  margin-bottom: 12px;
}
.nb-svc-display {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px 12px;
  border: 1.5px solid #cc3333;
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
  font-size: 14px;
  color: #333;
  user-select: none;
}
.nb-svc-display:hover { border-color: #aa1111; }
.nb-svc-arrow { color: #cc3333; font-size: 0; margin-left: 8px; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 7px solid #cc3333; display: inline-block; flex-shrink: 0; }
.nb-svc-dropdown {
  position: absolute;
  left: 0; right: 0; top: calc(100% + 4px);
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.13);
  z-index: 400;
  max-height: 320px;
  overflow-y: auto;
}
.nb-svc-group { border-bottom: 1px solid #f0f0f0; }
.nb-svc-group:last-child { border-bottom: none; }
.nb-svc-grp-hdr {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: #cc2222;
  cursor: pointer;
  background: #fafafa;
  user-select: none;
}
.nb-svc-grp-hdr:hover { background: #f5f0f0; }
.nb-svc-grp-arrow { font-size: 11px; color: #cc2222; }
.nb-svc-item {
  padding: 9px 18px;
  font-size: 13px;
  cursor: pointer;
  border-top: 1px solid #f5f5f5;
  color: #333;
  transition: background 0.1s;
}
.nb-svc-item:hover { background: #fdf0f0; }
.nb-svc-price { color: #888; font-size: 12px; }

/* ── Settings hub ── */
.stg-hub-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.stg-hub-btn {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 0 12px;
  background: linear-gradient(to bottom, #dd3333, #bb1a1a);
  border: none;
  border-radius: 12px;
  padding: 16px 18px;
  cursor: pointer;
  text-align: left;
  box-shadow: 0 0 10px rgba(0,0,0,0.22);
  transition: box-shadow 0.15s, filter 0.15s;
}
.stg-hub-btn:hover { box-shadow: 0 0 14px rgba(0,0,0,0.3); filter: brightness(1.05); }
.stg-hub-icon {
  grid-row: 1 / 3;
  font-size: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.stg-hub-title {
  font-size: 15px;
  font-weight: 800;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  grid-column: 1;
  grid-row: 1;
}
.stg-hub-sub {
  font-size: 12px;
  color: rgba(255,255,255,0.82);
  grid-column: 1;
  grid-row: 2;
  margin-top: 2px;
}
.stg-hub-arr {
  grid-row: 1 / 3;
  font-size: 20px;
  color: rgba(255,255,255,0.9);
  grid-column: 2;
}
.stg-sub-hdr {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}
.stg-sub-title {
  font-size: 17px;
  font-weight: 800;
  color: #8b1a1a;
}

/* ── Date/time mode toggle ── */
.nbm-dt-mode-row {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
}
.nbm-dt-mode-btn {
  flex: 1;
  padding: 8px 0;
  border: none;
  border-bottom: 3px solid #bbb;
  border-radius: 8px;
  background: linear-gradient(to bottom, #f5f5f5, #e0e0e0);
  font-size: 13px;
  font-weight: 700;
  color: #888;
  cursor: pointer;
  box-shadow: 0 4px 6px rgba(0,0,0,0.15);
  transition: all 0.1s;
}
.nbm-dt-mode-btn:hover { background: linear-gradient(to bottom, #eeeeee, #d5d5d5); color: #555; }
.nbm-dt-mode-btn:active { border-bottom-width: 1px; transform: translateY(1px); box-shadow: none; }
.nbm-dt-mode-active {
  background: linear-gradient(to bottom, #dd3333, #bb1a1a) !important;
  color: #fff !important;
  border-bottom: 3px solid #881111 !important;
  box-shadow: 0 4px 6px rgba(150,0,0,0.3) !important;
}
/* Custom time slot pills */
.nbm-cust-slot {
  padding: 6px 12px;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
  background: #fff;
  color: #333;
  transition: all 0.1s;
  white-space: nowrap;
}
.nbm-cust-slot:hover { border-color: #cc2222; color: #cc2222; }
.nbm-cust-slot-sel { background: #cc2222 !important; color: #fff !important; border-color: #aa1111 !important; font-weight: 700; }

/* ── Email template cards with preview ── */
.etpl-card {
  background: #fff;
  border-radius: 0;
  box-shadow: none;
  margin-bottom: 0;
  border-bottom: 1px solid #eee;
  overflow: hidden;
}
.etpl-card.consult .etpl-card-title {
  background: #e6f5e6;
  border-bottom-color: #b6ddb6;
}
.etpl-card.consult .etpl-card-title-toggle:hover {
  background: #d6ecd6;
}
.etpl-card.comp {
  background: #cc3333;
  border: 1.5px solid #aa1111;
}
.etpl-card.comp .etpl-card-title {
  background: linear-gradient(90deg, #cc3333, #aa1111);
  border-bottom-color: #aa1111;
  color: #fff;
}
.etpl-card.comp .etpl-card-title-toggle:hover {
  background: #aa1111;
}
.etpl-card.master {
  background: #e8f0fe;
  border: 1.5px solid #90caf9;
}
.etpl-card.master .etpl-card-title {
  background: #d0e4ff;
  border-bottom-color: #90caf9;
  color: #0d47a1;
}
.etpl-card.master .etpl-card-title-toggle:hover {
  background: #bbd4f8;
}
.etpl-card.review {
  background: #f5f0fa;
  border: 1.5px solid #ce93d8;
}
.etpl-card.review .etpl-card-title {
  background: #ede0f5;
  border-bottom-color: #ce93d8;
  color: #6a1b9a;
}
.etpl-card.review .etpl-card-title-toggle:hover {
  background: #e1c8f0;
}
.etpl-card-title {
  font-size: 14px;
  font-weight: 700;
  color: #8b1a1a;
  padding: 14px 20px;
  border-bottom: 1px solid #f0e0e0;
  background: #fdf8f8;
}
.etpl-card-title-toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  user-select: none;
}
.etpl-card-title-toggle:hover {
  background: #f9efef;
}
.etpl-card-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}
@media (max-width: 700px) {
  .etpl-card-body { grid-template-columns: 1fr; }
}
.etpl-editor {
  padding: 18px 20px;
}
.etpl-preview-wrap {
  padding: 18px 20px;
  background: #fff;
}
.etpl-preview-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: #aaa;
  margin-bottom: 2px;
  margin-left: 8px;
}
/* Email preview frame */
.etpl-ep {
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 0 12px rgba(0,0,0,0.2);
  font-family: Georgia, serif;
  font-size: 13px;
}
.etpl-ep-header {
  background: linear-gradient(135deg,#8b1a1a,#cc3333);
  padding: 28px 32px;
  text-align: center;
  border-radius: 0 0 18px 18px;
}
.etpl-ep-logo {
  color: #fff;
  font-size: 26px;
  font-weight: 900;
  letter-spacing: 4px;
  font-family: 'Helvetica Neue', Arial, sans-serif;
}
.etpl-ep-logo-sub {
  color: rgba(255,255,255,0.8);
  font-size: 12px;
  letter-spacing: 4px;
  margin-top: 4px;
  font-family: Georgia, serif;
  font-style: italic;
}
.etpl-ep-subj {
  padding: 12px 20px 6px;
  font-size: 13px;
  font-weight: 700;
  color: #333;
  border-bottom: 1px solid #f0f0f0;
  background: #fafafa;
}
.etpl-ep-body {
  padding: 20px 24px;
  font-size: 13px;
  line-height: 1.7;
  color: #333;
  min-height: 60px;
  white-space: pre-wrap;
  word-break: break-word;
}
.etpl-ep-footer {
  padding: 12px 24px;
  font-size: 11px;
  color: #aaa;
  border-top: 1px solid #f0f0f0;
  text-align: center;
  background: #fafafa;
}
.etpl-ep-btns {
  padding: 14px 24px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  border-top: 1px solid #f0f0f0;
}
.etpl-ep-btn {
  display: inline-block;
  padding: 9px 18px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.etpl-ep-btn-wa  { background: #25d366; color: #fff; }
.etpl-ep-btn-map { background: #4285f4; color: #fff; }
.etpl-ep-btn-web { background: #8b1a1a; color: #fff; }

/* Rich text editor in template cards */
.etpl-rte-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  padding: 8px 10px;
  background: #e3e3e3;
  border: none;
  border-radius: 12px;
  margin-bottom: 10px;
}
.etpl-rte-area {
  min-height: 220px;
  padding: 20px 24px;
  border: 1px solid #ff3333;
  border-radius: 8px;
  box-shadow: 0 0 8px rgba(0,0,0,0.18);
  font-family: Georgia, serif;
  font-size: 13px;
  line-height: 1.7;
  color: #333;
  outline: none;
  background: #fff;
  overflow-y: auto;
  word-break: break-word;
}
.etpl-rte-area:focus { border-color: #4488cc; }
.etpl-color-pal {
  position: absolute;
  top: 34px;
  left: 0;
  z-index: 400;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
  width: 200px;
  flex-wrap: wrap;
  gap: 4px;
}
.etpl-emoji-pick {
  position: absolute;
  top: 34px;
  left: -80px;
  z-index: 400;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 10px;
  padding: 8px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.18);
  width: 250px;
  flex-wrap: wrap;
  gap: 4px;
}

@media print {
  .no-print,
  .btn-print,
  nav, #sidebar, #topbar { display: none !important; }

  body, html { margin: 0; padding: 0; }
  #print-invoice { box-shadow: none !important; border: none !important; padding: 10px !important; }
  .invoice-card { page-break-inside: avoid; }
  .invoice-body { display: flex !important; flex-direction: row !important; }
  .invoice-left { width: 60% !important; }
  .invoice-right { width: 40% !important; }
  table, .inv-field-row { page-break-inside: avoid; }
  * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
  .svc-row-empty { display: none !important; }
  .nb-svc-display { border: none !important; padding: 2px 0 !important; }
  .nb-svc-arrow { display: none !important; }
}

/* ── Master full-notifications toggle ── */
.master-toggle-wrap {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
  cursor: pointer;
}
.master-toggle-wrap input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}
.master-toggle-track {
  position: absolute;
  inset: 0;
  background: #ccc;
  border-radius: 24px;
  transition: background .25s;
}
.master-toggle-track::before {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  left: 3px;
  top: 3px;
  background: #fff;
  border-radius: 50%;
  transition: transform .25s;
  box-shadow: 0 1px 3px rgba(0,0,0,.25);
}
.master-toggle-wrap input:checked + .master-toggle-track {
  background: #cc3333;
}
.master-toggle-wrap input:checked + .master-toggle-track::before {
  transform: translateX(20px);
}

/* ══ Client Appointments Table ══ */
.cappt-filters { display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:10px; }

@media (max-width: 768px) {
  .cappt-filters { display:flex;flex-wrap:wrap;gap:6px; }
  .cappt-f-date { flex:1;min-width:0;width:auto !important;box-sizing:border-box; }
  .cappt-f-master { flex:1;min-width:0;box-sizing:border-box; }
  .cappt-f-service { flex:0 0 100%;width:100% !important;box-sizing:border-box; }
}
.cappt-row { background: #fff; transition: background 0.1s; }
.cappt-row:hover { background: #fff8f8; }
.cappt-row-even { background: #fafafa; }
.cappt-row-even:hover { background: #fff5f5; }

/* ══ Leads Editable Cells ══ */
.leads-editable {
  cursor: pointer;
  border-bottom: none;
  border-radius: 2px;
  padding: 1px 3px;
  transition: background 0.15s;
  display: inline-block;
}
.leads-editable-notes {
  border-bottom: none;
}
.leads-editable:hover {
  background: #fff4f4;
  border-radius: 3px;
}
.leads-editable::after {
  content: ' ✎';
  font-size: 10px;
  color: #bbb;
  opacity: 0;
  transition: opacity 0.15s;
}
.leads-editable:hover::after {
  opacity: 1;
  color: #8b1a1a;
}

/* ══ NOTIFY VIEW ══ */
#view-notify {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  min-height: 70vh;
  padding-top: 24px;
}
@media (max-width: 700px) {
  #view-notify { padding-top: 10px; }
  #view-notify .app-container { padding: 10px 8px; }
  #view-notify .card { padding: 12px 14px; }
  #notify-list > div { padding: 12px 14px; }
  #notify-list a, #notify-list button {
    flex: 1;
    justify-content: center;
    min-width: 0;
    font-size: 15px;
    padding: 11px 10px;
  }
  #notify-list > div > div:last-child { gap: 6px; }
}

/* ══ HOME REMINDERS TABLE — mobile/tablet ══ */
@media (max-width: 900px) {
  #home-reminders-section th:nth-child(4),
  #home-reminders-section td:nth-child(4) { display: none; }
}
@media (max-width: 900px) {
  .hr-col-svc, .hr-col-master { display: none !important; }
  .hr-svc-mobile { display: block !important; margin-top: 3px; }
  /* Master notifications carry one column more than the client table — drop the
     Client column so the SMS/WA/dismiss buttons stay on screen. */
  .mn-col-client { display: none !important; }
  .mn-client-mobile { display: block !important; margin-top: 3px; }
  #home-reminders-section table, #home-master-notifications-section table { min-width: 0 !important; }
  #home-reminders-section td, #home-reminders-section th,
  #home-master-notifications-section td, #home-master-notifications-section th { padding: 7px 8px !important; font-size: 12px !important; }
  #home-reminders-section a, #home-master-notifications-section a {
    padding: 7px 10px !important;
    font-size: 12px !important;
    flex: 1;
    justify-content: center;
  }
  #home-reminders-section td:last-child > div { gap: 5px; }
}

@keyframes pulse-yellow {
  from { box-shadow: 0 3px 0 #f9a825, 0 4px 8px rgba(0,0,0,.2); }
  to   { box-shadow: 0 3px 0 #f9a825, 0 4px 16px rgba(249,168,37,.5); }
}

/* ══════════════════════════════════════════════════
   PHONE & TABLET — Comprehensive responsive pass
══════════════════════════════════════════════════ */

/* ── Tablet (≤ 900px): general layout ── */
@media (max-width: 900px) {
  .app-container { padding: 8px 8px 30px; }

  /* Top-nav card tighter */
  .top-nav-card { padding: 10px 12px; gap: 6px; }

  /* Form label narrower (already 140px but reinforce) */
  .form-label { width: 130px; min-width: 130px; }

  /* Import/Excel buttons wrap on tablet */
  .btn-import, .btn-excel { font-size: 12px !important; }

  /* Sleeping SMS: min-width table, scrollable wrapper */
  #sleep-sms-table { min-width: 560px; }

  /* Sleeping SMS: tighter template section */
  #view-sleeping-sms .app-container { padding: 10px 10px 30px; }
  #view-sleeping-sms .sleep-tpl-btn { font-size: 11px !important; padding: 5px 10px !important; }
  #sleep-sms-text { font-size: 13px; }

  /* SMS Log filter row wraps naturally (already flex-wrap:wrap) */
  #sl-filter-client, #sl-filter-date-from, #sl-filter-date-to, #sl-filter-type {
    width: 150px !important;
  }

  /* Analytics: compact header */
  #view-analytics .top-nav-card { gap: 8px; }
}

/* ── Phone (≤ 600px): stack form rows vertically ── */
@media (max-width: 600px) {

  /* The gap that separates "Date:" from the client's name on one line leaves it
     indented once the row wraps onto separate lines. */
  .contract-header-row label[style*="margin-left"] { margin-left: 0 !important; }

  /* ── Form rows: label stacks above input ── */
  .form-row {
    flex-direction: column;
    align-items: flex-start;
    min-height: auto;
    padding: 10px 12px;
    gap: 4px;
  }
  .form-label {
    width: 100% !important;
    min-width: 0 !important;
    padding-right: 0;
    font-size: 12px;
    color: #555;
    font-weight: 700;
  }
  .form-control-wrap {
    width: 100%;
  }
  .form-control-wrap .input-field,
  .form-control-wrap .select-field,
  .form-control-wrap .medium-input,
  .form-control-wrap .form-input-std {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }
  /* Phone parts: allow wrap */
  .form-control-wrap .inline-group { flex-wrap: wrap; gap: 4px; }
  .phone-part { width: 90px; }
  .city-input { width: 100% !important; }
  .state-select { width: 110px; }
  .zip-input { width: 80px; }

  /* Clients table: unfreeze cols 3-4, keep only checkbox+# sticky */
  .clients-table th:nth-child(3), .clients-table td:nth-child(3),
  .clients-table th:nth-child(4), .clients-table td:nth-child(4) { position: static; left: auto; z-index: 1; }

  /* ── Client list: control bar ── */
  .top-nav-card { padding: 8px 10px; gap: 6px; }
  .card-header { padding: 8px 12px; font-size: 12px; }

  /* Client list top nav: stack vertically (override inline align-items/justify-content) */
  #view-list #clients-top-nav { flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; gap: 6px; width: 100%; box-sizing: border-box; }
  #view-list #clients-create-wrap { display: none !important; }

  /* Search row: stretch full width */
  #view-list .list-filter-row { flex-direction: column; align-items: stretch; gap: 6px; width: 100%; }
  #clients-search-row { display: flex !important; width: 100%; box-sizing: border-box; }
  #clients-search-row #list-search { flex: 1 !important; width: auto !important; min-width: 0 !important; box-sizing: border-box; }

  /* Search Clear button: 3D red style */
  #clients-search-row .btn-search-clear {
    background: linear-gradient(to bottom, #dd3333, #bb1a1a) !important;
    color: #fff !important;
    border: none !important;
    border-bottom: 3px solid #881111 !important;
    box-shadow: 0 3px 6px rgba(0,0,0,0.25) !important;
    font-weight: 700 !important;
    white-space: nowrap;
    text-transform: uppercase !important;
  }
  #clients-search-row #list-search { border: 1.5px solid #cc3333 !important; border-radius: 6px; }

  /* Columns row: COLUMNS + DELETE (when selected) side by side; hide Import/Export and mobile NEW CLIENT */
  #view-list .excel-btn-row { display: flex !important; flex-wrap: wrap !important; gap: 6px; width: 100%; align-items: stretch; }
  #view-list .excel-btn-row #col-menu-btn { flex: 1 !important; min-width: 0 !important; box-sizing: border-box !important; text-align: center; justify-content: center !important; font-size: 12px; border-top: 1.5px solid #cc3333 !important; }
  #view-list .excel-btn-row #btn-delete-selected { flex: 1 !important; min-width: 0 !important; box-sizing: border-box !important; text-align: center !important; justify-content: center !important; font-size: 12px !important; padding: 8px 6px !important; }
  .btn-create-client-mobile { display: none !important; }
  .btn-import, .btn-excel { display: none !important; }

  /* sel-btn-row: always visible on mobile (for NEW CLIENT), EMAIL+SMS shown when selected */
  #sel-btn-row { display: flex !important; flex-wrap: wrap !important; gap: 6px !important; width: 100%; }
  .btn-create-client-mobile-sel { display: flex !important; order: 1; flex: 1 1 100% !important; align-items: center; justify-content: center; font-size: 12px !important; padding: 8px 6px !important; min-width: 0; }
  .sel-btn-row .btn-email-sel { order: 2; flex: 0 0 calc(50% - 3px) !important; width: calc(50% - 3px) !important; min-width: 0 !important; box-sizing: border-box !important; align-items: center; justify-content: center; text-align: center; font-size: 12px; padding: 8px 6px; }
  #btn-sms-selected { order: 3; flex: 0 0 calc(50% - 3px) !important; width: calc(50% - 3px) !important; min-width: 0 !important; box-sizing: border-box !important; justify-content: center !important; font-size: 12px !important; padding: 8px 6px !important; }

  /* Visit filter: label + clear on row 1, buttons grid 4-per-row on row 2 */
  #visit-filter-bar { padding: 8px 10px !important; gap: 6px !important; flex-wrap: wrap !important; align-items: center; }
  #visit-filter-bar > span { order: -1; flex: 1; font-size: 11px !important; }
  #visit-filter-bar .visit-clear-btn { order: 0; margin-left: auto !important; flex-shrink: 0; }
  #visit-filter-btns { order: 1; width: 100% !important; flex: none !important; display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 5px !important; box-sizing: border-box; }
  #visit-filter-btns > button { min-width: 0 !important; width: auto !important; font-size: 11px; padding: 6px 4px !important; text-align: center; box-sizing: border-box; }

  /* History table: phone — keep #, Type, Date, Total $, To Pay $, Signature, Open.
     Signature is column 10 and Notes column 11 — the two were the other way round
     before the Signature column existed. */
  #history-table th:nth-child(4), #history-table td:nth-child(4),
  #history-table th:nth-child(8), #history-table td:nth-child(8),
  #history-table th:nth-child(11), #history-table td:nth-child(11) { display: none; }
  /* Signature only fits beside the money columns if the row number gives way —
     it counts rows and nothing more, so it is the one to drop on a phone. */
  #history-table th:nth-child(1), #history-table td:nth-child(1) { display: none; }
  /* Six columns only fit a phone if the table stops sizing itself to its content:
     fixed layout with shares of the width, and headings allowed to wrap. */
  #history-table { min-width: 0 !important; width: 100% !important; table-layout: fixed; }
  #history-table th { white-space: normal !important; }
  #history-table th:nth-child(2),  #history-table td:nth-child(2)  { width: 12%; }
  #history-table th:nth-child(3),  #history-table td:nth-child(3)  { width: 19%; padding-left: 4px; padding-right: 4px; }
  #history-table th:nth-child(7),  #history-table td:nth-child(7)  { width: 12%; }
  #history-table th:nth-child(9),  #history-table td:nth-child(9)  { width: 11%; }
  #history-table th:nth-child(10), #history-table td:nth-child(10) { width: 17%; }
  #history-table th:nth-child(12), #history-table td:nth-child(12) { width: 17%; }
  #history-table th:nth-child(13), #history-table td:nth-child(13) { width: 12%; }
  /* Only the tick fits on a phone — the word beside it goes, the date stays */
  #history-table th:nth-child(10), #history-table td:nth-child(10) { white-space: normal !important; padding: 7px 2px; overflow: hidden; }
  #history-table th:nth-child(10) { font-size: 9px; letter-spacing: 0; }
  #history-table .sig-badge-txt { display: none; }
  #history-table .sig-badge { padding: 2px 6px; font-size: 11px; }
  #history-table .sig-badge-date { font-size: 9px; }
  /* Open and delete each have their own column, so a mis-tap lands on a cell
     border rather than on the wrong button. */
  #history-table td:nth-child(12), #history-table td:nth-child(13) { padding: 6px 3px; text-align: center; }
  #history-table td:nth-child(12) button, #history-table td:nth-child(13) button {
    font-size: 10px !important; box-sizing: border-box; }
  #history-table td:nth-child(12) button { padding: 6px 9px !important; }
  #history-table td:nth-child(13) button { padding: 5px 7px !important; }
  #history-table th, #history-table td { padding: 7px 6px; font-size: 11px; }
  /* Unfreeze columns 2–4, keep only column 1 (#) sticky */
  #history-table th:nth-child(2), #history-table td:nth-child(2),
  #history-table th:nth-child(3), #history-table td:nth-child(3),
  #history-table th:nth-child(4), #history-table td:nth-child(4) { position: static; left: auto; }

  /* ── Sleeping SMS view ── */
  #view-sleeping-sms .app-container { padding: 6px 4px; }
  #sleep-sms-table { min-width: 460px; font-size: 12px; }
  #sleep-sms-table thead th { padding: 8px 8px !important; font-size: 10px !important; }
  #sleep-sms-table tbody td { padding: 8px 8px !important; font-size: 12px !important; }

  /* SMS page top nav: wrap on small screens */
  #view-sleeping-sms .top-nav-card { flex-wrap: wrap; gap: 8px; }
  #view-sleeping-sms .top-nav-card > div:last-child { margin-left: 0 !important; }

  /* Template buttons: smaller on phone */
  #view-sleeping-sms .sleep-tpl-btn { font-size: 11px !important; padding: 6px 10px !important; flex: 1 1 auto; text-align: center; }

  /* Textarea: fewer rows on phone */
  #sleep-sms-text { font-size: 13px; min-height: 70px; }

  /* Template card: tighter padding */
  #view-sleeping-sms .app-container > div:nth-child(2) { padding: 12px 12px !important; }

  /* ── SMS Log view ── */
  #view-sms-log .app-container { padding: 6px 4px; }
  /* Filter bar layout mirrors the Email Log — see the shared block in @media (max-width:1024px) */

  /* ── Analytics ── */
  #view-analytics .app-container { padding: 6px 4px; }
  #analytics-kpi-row { gap: 8px; }
  #analytics-kpi-row > div { flex: 1 1 calc(50% - 4px); min-width: 140px; }

  /* ── Form footer buttons ── */
  .form-footer-btns { flex-wrap: wrap; gap: 8px; }
  .form-footer-btns button { flex: 1 1 45%; min-width: 120px; }

  /* ── Contract / Invoice ── */
  .contract-doc-card { padding: 10px !important; }

  /* Invoice card: full width, compact padding */
  .invoice-card { padding: 12px !important; }
  .invoice-body { flex-direction: column !important; }
  .invoice-left { padding-right: 0 !important; }
  .invoice-right { width: 100% !important; border-left: none !important; border-top: 2px solid #eee; padding-left: 0 !important; padding-top: 14px !important; margin-top: 14px !important; }

  /* Service picker rows: single line, no wrap */
  .svc-main-row { gap: 6px !important; align-items: center !important; margin-bottom: 8px !important; }
  .svc-main-row .nb-svc-picker { margin-bottom: 0 !important; flex: 1; min-width: 0; }
  .nb-svc-display { padding: 7px 10px !important; font-size: 13px !important; white-space: nowrap; overflow: hidden; }
  .nb-svc-display span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; max-width: calc(100% - 20px); }
  .inv-num-field { width: 68px !important; flex-shrink: 0; }

  /* HAIR dropdowns: label above select */
  #hair-dropdowns-block .svc-main-row { flex-direction: column; align-items: flex-start !important; gap: 4px !important; }
  .svc-main-label { width: auto !important; min-width: 0 !important; white-space: normal !important; font-size: 13px; }
  .svc-select-wide { width: 100% !important; }

  /* Right side fields: label left, input right */
  .inv-field-row { display: flex !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: space-between !important; gap: 8px !important; }
  .inv-field-row label { font-size: 12px !important; white-space: nowrap; flex: 1; }
  .inv-field-row .input-field { width: 110px !important; min-width: 80px; flex-shrink: 0; }

  /* Link to appointment: keep select inside container */
  #contract-appt-link { overflow: hidden; }
  #contract-appt-select { width: 0; min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; }

  /* Contract totals table: keep both columns side by side, $ inline with amount */
  .contract-totals-table { width: 100% !important; }
  #c-total-svc-contract, #c-total-pay-contract { width: 60px !important; }

  /* Date row on invoice */
  .inv-field-row .date-picker-wrap { width: auto !important; flex: 1 !important; min-width: 0 !important; max-width: 100%; background: #fff !important; }
  .inv-field-row .date-display-text { display: block !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13px; flex: 1; min-width: 0; }
  .date-display-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13px; }

  /* ── Profile photo: side by side with info ── */
  .profile-layout { flex-direction: column; }
  .profile-photo-col { flex-direction: row; align-items: center; padding: 12px 12px 4px; gap: 14px; }
  .profile-photo-wrap { width: 130px; height: 130px; flex-shrink: 0; }

  /* ── SMS campaign view ── */
  #view-sms-campaign .app-container { padding: 6px 4px; }
  .campaign-client-list { max-height: 200px !important; }

  /* ── Sleeping SMS filter row: stack on phone ── */
  #view-sleeping-sms .card { flex-direction: column !important; align-items: stretch !important; }
  #sleep-sms-filter-name, #sleep-sms-filter-date { min-width: 0 !important; width: 100% !important; }

  /* ── Leads view ── */
  #view-leads .app-container { padding: 6px 4px; }

  /* ── Settings sub-pages ── */
  #view-settings .app-container,
  .stg-sub-back { padding: 12px 8px; }
}

/* ── Extra-small (≤ 420px): micro tweaks ── */
@media (max-width: 420px) {
  #analytics-kpi-row > div { flex: 1 1 100%; }
  .sel-btn-row .btn-delete-sel,
  .sel-btn-row .btn-email-sel,
  #btn-sms-selected { flex: 1 1 100% !important; }
  .excel-btn-row .btn-header { flex: 1 1 100%; }
  .excel-btn-row .btn-import,
  .excel-btn-row .btn-excel { display: none !important; }
  .form-footer-btns button { flex: 1 1 100%; }
  .logo-block.small { font-size: 12px; letter-spacing: 1px; padding: 3px 8px; }

  /* Sleeping SMS: very small phones */
  #sleep-sms-table { min-width: 380px; font-size: 11px; }
  #view-sleeping-sms .sleep-tpl-btn { font-size: 10px !important; padding: 5px 8px !important; }
  #view-sleeping-sms .top-nav-card button { font-size: 11px !important; padding: 6px 10px !important; }
}

/* ── Flatpickr calendar: rounded corners + weekend highlight ── */
.flatpickr-calendar {
  border-radius: 12px !important;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,0.15) !important;
  border: 1.5px solid #cc3333 !important;
}
.flatpickr-innerContainer {
  padding: 0 5px 5px !important;
  overflow: hidden !important;
}
.flatpickr-days { width: 100% !important; }
.dayContainer { width: 100% !important; min-width: 0 !important; max-width: 100% !important; }
.flatpickr-current-month,
.flatpickr-current-month .cur-month,
.flatpickr-current-month select.cur-month,
.flatpickr-current-month .cur-year,
.flatpickr-current-month input.cur-year,
.flatpickr-month {
  color: #cc2222 !important;
  font-weight: 700 !important;
  font-size: 14px !important;
}
.flatpickr-monthDropdown-months {
  font-weight: 700 !important;
  font-size: 15px !important;
  color: #cc2222 !important;
  -webkit-appearance: none !important;
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
}
.flatpickr-months .flatpickr-month { height: 40px !important; }
.numInputWrapper span { color: #cc2222 !important; }
/* All weekday headers: black bold uppercase */
.flatpickr-weekdays .flatpickr-weekday {
  color: #333 !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
}
/* Sat (col 6) and Sun (col 7) header highlight — Mon-first */
.flatpickr-weekdays .flatpickr-weekday:nth-child(6),
.flatpickr-weekdays .flatpickr-weekday:nth-child(7) {
  color: #cc2222 !important;
  font-weight: 700 !important;
}
/* Sat (col 6) and Sun (col 7) day cells — Mon-first */
.flatpickr-days .flatpickr-day:nth-child(7n+6),
.flatpickr-days .flatpickr-day:nth-child(7n) {
  background: #ffeaea !important;
  color: #cc2222 !important;
  border-radius: 0 !important;
}
.flatpickr-days .flatpickr-day:nth-child(7n+6).selected,
.flatpickr-days .flatpickr-day:nth-child(7n).selected {
  background: #cc2222 !important;
  color: #fff !important;
  border-radius: 4px !important;
}
.flatpickr-days .flatpickr-day:nth-child(7n+6).today,
.flatpickr-days .flatpickr-day:nth-child(7n).today {
  border-color: #cc2222 !important;
}
/* Override blue circle with red square for selected day */
.flatpickr-day.selected,
.flatpickr-day.selected:hover {
  background: #cc3333 !important;
  border-color: #cc3333 !important;
  color: #fff !important;
  border-radius: 6px !important;
}
/* Today outline in red */
.flatpickr-day.today:not(.selected) {
  border-color: #cc2222 !important;
  color: #cc2222 !important;
  border-radius: 6px !important;
}

/* Prevent browser autofill from changing background in payment fields */
#eb-discount:-webkit-autofill,
#eb-pay-amount:-webkit-autofill,
#eb-pay-date:-webkit-autofill,
#eb-tips:-webkit-autofill,
#nb-name-first,
#nb-name-last,
#nb-phone,
#nb-email {
  border: 1px solid #ccc !important;
  outline: none !important;
  box-shadow: none !important;
}
#nb-name-first:focus,
#nb-name-last:focus,
#nb-phone:focus,
#nb-email:focus {
  border: 1px solid #aaa !important;
  outline: none !important;
  box-shadow: none !important;
}
#nb-name-first:-webkit-autofill,
#nb-name-last:-webkit-autofill,
#nb-phone:-webkit-autofill,
#nb-email:-webkit-autofill {
  -webkit-box-shadow: 0 0 0px 1000px #fff inset !important;
  box-shadow: 0 0 0px 1000px #fff inset !important;
  -webkit-text-fill-color: #999 !important;
}

#eb-tips { border: 1.5px solid #cc3333 !important; outline: none !important; box-shadow: none !important; font-weight: 700 !important; color: #222 !important; }
#eb-tips:focus { border: 1.5px solid #cc3333 !important; outline: none !important; box-shadow: none !important; }
#eb-discount:focus, #eb-pay-amount:focus, #eb-pay-date:focus, #eb-pay-method:focus { outline: none !important; border: 1.5px solid #cc3333 !important; }

.eb-paid-cb {
  width: 16px; height: 16px; cursor: pointer;
  appearance: none; -webkit-appearance: none;
  border: 2px solid #bbb; border-radius: 3px;
  background: #fff; outline: none;
  position: relative; flex-shrink: 0;
}
.eb-paid-cb:checked {
  background: #cc3333;
  border-color: #cc3333;
}
.eb-paid-cb:checked::after {
  content: '';
  position: absolute;
  left: 3px; top: 0px;
  width: 5px; height: 9px;
  border: 2px solid #fff;
  border-top: none; border-left: none;
  transform: rotate(45deg);
}

/* CSS-border triangle arrows for edit booking modal (iOS-safe, no Unicode) */
.eb-arr {
  display: inline-block;
  width: 0;
  height: 0;
  flex-shrink: 0;
  vertical-align: middle;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 8px solid #cc3333;
  margin-left: 2px;
}
.eb-arr.open {
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 8px solid #cc3333;
  border-bottom: 0;
}
.eb-arr-gray { border-left-color: #888; }
.eb-arr-gray.open { border-top-color: #888; }
.eb-arr-white { border-left-color: #fff; }
.eb-arr-white.open { border-top-color: #fff; border-left-color: transparent; border-right-color: transparent; }

#nb-skip-notify {
  border: 1.5px solid #fff;
  border-radius: 3px;
  background: #fff;
}
#nb-skip-notify:checked {
  background: #fff;
  border-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23cc3333' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' d='M2 8l4 4 8-8'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 16px;
}

#nb-custom-date ~ input.flatpickr-input {
  border: 1.5px solid #cc3333 !important;
  border-radius: 8px !important;
  padding: 8px 12px !important;
  font-size: 14px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  background: #fff !important;
  box-shadow: none !important;
  outline: none !important;
}

#nb-custom-time {
  background: #fff !important;
}
#nb-custom-time:-webkit-autofill {
  -webkit-box-shadow: 0 0 0px 1000px #fff inset !important;
  box-shadow: 0 0 0px 1000px #fff inset !important;
}

/* Appointments history — notes column */
@media (max-width: 768px) {
  .cappt-notes-td { min-width: 160px; }
}

/* New Clients From Form — mobile table */
/* Hide extra columns only on phones (≤600px). Tablets show the full table. */
.ncf-submitted-mobile { display: none; }
.ncf-email-mobile { display: none; }
.lead-sent { display: block; font-size: 11px; font-weight: 600; margin-top: 3px; }
.wl-stack-mobile { display: none; }
.wl-notified { color: #cc3333; font-weight: 700; font-size: 12px; margin-top: 3px; }
@media (max-width: 600px) {
  .ncf-referred-td { display: none !important; }
  .ncf-submitted-td { display: none !important; }
  .ncf-email-td { display: none !important; }
  .ncf-submitted-mobile { display: block; font-size: 11px; color: #888; margin-top: 3px; }
  .ncf-email-mobile { display: block; font-size: 12px; color: #777; margin-top: 2px; }
  .ncf-table-wrap { overflow-x: visible !important; }
  /* Waitlist — stack the row under the date so the card never scrolls sideways */
  .wl-name-td, .wl-phone-td, .wl-master-td, .wl-svc-td { display: none !important; }
  .wl-stack-mobile { display: block; white-space: normal; font-weight: 400; margin-top: 4px; line-height: 1.5; }
  .wl-table-wrap { overflow-x: visible !important; }
  .wl-table { min-width: 0 !important; }
}

.svc-photo-btn-add, .svc-photo-btn-remove {
  -webkit-appearance: none !important;
  appearance: none !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: .5px !important;
  color: #fff !important;
  background: linear-gradient(to bottom, #dd3333, #bb1a1a) !important;
  -webkit-gradient: linear, left top, left bottom, from(#dd3333), to(#bb1a1a);
  border: none !important;
  border-bottom: 4px solid #771111 !important;
  border-radius: 8px !important;
  padding: 7px 18px !important;
  cursor: pointer !important;
  box-shadow: 0 4px 8px rgba(0,0,0,0.22) !important;
}
.svc-photo-btn-replace {
  -webkit-appearance: none !important;
  appearance: none !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: .5px !important;
  color: #cc3333 !important;
  background: linear-gradient(to bottom, #ffffff, #f0f0f0) !important;
  border: none !important;
  border-bottom: 4px solid #cccccc !important;
  border-radius: 8px !important;
  padding: 7px 18px !important;
  cursor: pointer !important;
  box-shadow: 0 4px 8px rgba(0,0,0,0.18) !important;
}

/* Phone/tablet: stack the email format toolbar — buttons block on top, SAVE below-right */
@media (max-width: 1024px) {
  #preview-fmt-bar {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  #preview-fmt-bar > div:first-child { flex: none !important; row-gap: 4px !important; }
  /* SAVE sits OUTSIDE (below) the gray toolbar block, aligned right */
  #fmt-save-wrap { display: flex; flex-direction: column; align-items: stretch; }
  #fmt-save-wrap > #email-tpl-save-btn { position: static !important; align-self: flex-end; margin-top: 8px; }
  /* Force the alignment buttons onto a new (second) row on phone/tablet */
  #fmt-break-align { flex-basis: 100% !important; width: 0 !important; height: 0 !important; margin: 0 !important; background: none !important; }
}
/* Desktop: gray toolbar block ends at its content; SAVE on the far right, white bg, full block height */
@media (min-width: 1025px) {
  #fmt-save-wrap { display: flex; align-items: stretch; gap: 10px; }
  #preview-fmt-bar { flex: 0 1 auto; }
  #fmt-save-wrap > #email-tpl-save-btn { height: auto !important; align-self: stretch; }
}

/* Phone/tablet: keep the WhatsApp phone button on ONE line in the email preview
   (preview only — does not change the actual sent email) */
@media (max-width: 1024px) {
  #campaign-preview a[href*="wa.me"] {
    white-space: nowrap !important;
    font-size: 14px !important;
    letter-spacing: 0 !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

/* Email Log filter bar — all controls match the date input height */
#el-filter-bar input[type="text"],
#el-filter-bar button {
  height: 30px;
  box-sizing: border-box;
}
/* Phone/tablet: FROM · TO · CLEAR on one row; search + buttons wrap below */
@media (max-width: 1024px) {
  /* CSS Grid: FROM · TO · CLEAR locked into one row, aligned to the bottom edge.
     Grid places the three cells on the same baseline regardless of column height —
     far more stable on iOS Safari than flexbox for cross-item alignment. */
  /* From · To · CLEAR locked onto the first row via flexbox + order.
     Avoids display:contents/grid which renders unreliably on iOS Safari. */
  #el-filter-bar {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: flex-end !important;
    gap: 6px 8px !important;
    padding-top: 30px !important;   /* reserve space for the absolutely-positioned From/To labels */
  }
  /* Every first-row control (From, To, CLEAR) is exactly 34px tall, so they line up
     regardless of how iOS resolves flex cross-alignment. Labels float above via the
     container's top padding. */
  #el-filter-bar .el-date-col { display: flex !important; flex-direction: column !important; justify-content: flex-end !important; position: relative; flex: 0 0 120px !important; width: 120px !important; min-width: 0 !important; height: 34px !important; margin: 0 !important; padding: 0 !important; }
  #el-filter-bar > .el-date-col:nth-child(1) { order: 1; }
  #el-filter-bar > .el-date-col:nth-child(2) { order: 2; }
  #el-filter-bar > #el-clear-btn { order: 3; flex: 1 1 auto !important; }
  #el-filter-bar > #el-filter-client { order: 4; flex: 1 1 100% !important; }
  #el-filter-bar > #el-right-group { order: 5; flex: 1 1 100% !important; }
  #el-filter-bar .el-date-col > span { position: absolute; top: -15px; left: 2px; display: block; font-size: 11px; line-height: 1.2; margin: 0 !important; padding: 0 !important; }
  #el-filter-bar .el-date-col > input { flex: 0 0 34px !important; width: 100% !important; height: 34px !important; min-height: 34px !important; max-height: 34px !important; box-sizing: border-box !important; display: block; margin: 0 !important; padding: 4px 10px !important; font-size: 16px !important; -webkit-appearance: none; appearance: none; line-height: normal; }
  #el-filter-bar #el-filter-client { width: 100% !important; font-size: 16px !important; box-sizing: border-box; margin: 0 !important; }
  #el-filter-bar #el-clear-btn { height: 34px !important; margin: 0 !important; -webkit-appearance: none; appearance: none; white-space: nowrap; }
  /* Email Log actions on one row (phone & tablet): ALL · TYPES · Sync · DELETE */
  #el-filter-bar #el-right-group { margin: 0 !important; display: flex !important; flex-wrap: nowrap !important; gap: 6px !important; align-items: center; }
  #el-filter-bar #el-right-group > * { flex: 1 1 auto !important; min-width: 0 !important; }
  #el-filter-bar #el-right-group > span { order: 1; }
  #el-filter-bar #el-type-dd-btn { order: 2; }
  #el-filter-bar #email-log-sync-btn { order: 3; }
  #el-filter-bar #el-delete-btn { order: 4; width: auto !important; }
  #el-filter-bar #el-scope-btn { width: 100% !important; }
  #el-filter-bar #el-right-group button { font-size: 11px !important; padding: 7px 6px !important; white-space: nowrap; justify-content: center; }
  /* Sync Status uses .btn-excel which is hidden on mobile elsewhere — keep it visible here */
  #el-filter-bar #email-log-sync-btn { display: inline-flex !important; align-items: center; }

  /* ── SMS Log filter bar: identical layout to Email Log (phone & tablet) ── */
  #sl-filter-bar { display: flex !important; flex-wrap: wrap !important; align-items: flex-end !important; gap: 6px 8px !important; padding-top: 30px !important; }
  #sl-filter-bar .sl-date-col { display: flex !important; flex-direction: column !important; justify-content: flex-end !important; position: relative; flex: 0 0 120px !important; width: 120px !important; min-width: 0 !important; height: 34px !important; margin: 0 !important; padding: 0 !important; }
  #sl-filter-bar > .sl-date-col:nth-child(1) { order: 1; }
  #sl-filter-bar > .sl-date-col:nth-child(2) { order: 2; }
  #sl-filter-bar > #sl-clear-btn { order: 3; flex: 1 1 auto !important; }
  #sl-filter-bar > #sl-filter-client { order: 4; flex: 1 1 100% !important; }
  #sl-filter-bar > #sl-right-group { order: 5; flex: 1 1 100% !important; }
  #sl-filter-bar .sl-date-col > span { position: absolute; top: -15px; left: 2px; display: block; font-size: 11px; line-height: 1.2; margin: 0 !important; padding: 0 !important; }
  #sl-filter-bar .sl-date-col > input { flex: 0 0 34px !important; width: 100% !important; height: 34px !important; min-height: 34px !important; max-height: 34px !important; box-sizing: border-box !important; display: block; margin: 0 !important; padding: 4px 10px !important; font-size: 16px !important; -webkit-appearance: none; appearance: none; line-height: normal; }
  #sl-filter-bar #sl-filter-client { width: 100% !important; font-size: 16px !important; box-sizing: border-box; margin: 0 !important; }
  #sl-filter-bar #sl-clear-btn { height: 34px !important; margin: 0 !important; -webkit-appearance: none; appearance: none; white-space: nowrap; }
  #sl-filter-bar #sl-right-group { margin: 0 !important; display: flex !important; flex-wrap: nowrap !important; gap: 6px !important; align-items: center; }
  #sl-filter-bar #sl-right-group > * { flex: 1 1 auto !important; min-width: 0 !important; }
  #sl-filter-bar #sl-right-group > span { order: 1; }
  #sl-filter-bar #sl-type-dd-btn { order: 2; }
  #sl-filter-bar #sl-send-btn { order: 3; }
  #sl-filter-bar #sl-delete-btn { order: 4; width: auto !important; }
  #sl-filter-bar #sl-scope-btn { width: 100% !important; }
  #sl-filter-bar #sl-right-group button { font-size: 11px !important; padding: 0 6px !important; height: 34px !important; box-sizing: border-box !important; white-space: nowrap; justify-content: center; }
}
#el-filter-bar button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Complimentary table (Analytics): time under the date on phone/tablet */
@media (max-width: 1024px) {
  #view-analytics .comp-time { display: block; margin-top: 1px; }
  /* "(Free of Charge)" drops to a second line */
  #analytics-complimentary-table .comp-foc { display: block; }
  /* Keep all 5 columns (incl. Master) inside the card — no overflow */
  #analytics-complimentary-table table { table-layout: fixed; width: 100%; }
  #analytics-complimentary-table th,
  #analytics-complimentary-table td { padding: 6px 4px !important; font-size: 11px; word-break: break-word; }
  #analytics-complimentary-table th { font-size: 10px !important; white-space: nowrap; }
  #analytics-complimentary-table th:nth-child(1),
  #analytics-complimentary-table td:nth-child(1) { width: 20%; padding-left: 10px !important; }
  #analytics-complimentary-table th:nth-child(2),
  #analytics-complimentary-table td:nth-child(2) { width: 19%; }
  #analytics-complimentary-table th:nth-child(3),
  #analytics-complimentary-table td:nth-child(3) { width: 28%; }
  #analytics-complimentary-table th:nth-child(4),
  #analytics-complimentary-table td:nth-child(4) { width: 15%; }
  #analytics-complimentary-table th:nth-child(5),
  #analytics-complimentary-table td:nth-child(5) { width: 18%; }
}

/* Email template toolbar on phone/tablet: buttons in the panel, SAVE below on the right */
@media (max-width: 1024px) {
  .etpl-tb-wrap { flex-direction: column; align-items: stretch; }
  .etpl-tb-wrap .etpl-rte-toolbar { flex: none; width: 100%; }
  .etpl-tb-wrap > div:last-child { align-self: flex-end; }
  .etpl-rte-toolbar .fmt-sep { display: none; }
  /* Reset to default under SAVE on mobile (stays above SAVE on desktop) */
  .etpl-savecol { flex-direction: row !important; align-items: center !important; gap: 10px !important; }
  .etpl-savecol .etpl-reset-link { order: 1; align-self: flex-end; padding-bottom: 0; transform: translateY(3px); }
  .etpl-savecol .etpl-save-btn { order: 2; }
  .etpl-savecol .etpl-save-status { order: 3; }
  .etpl-tbblock { padding-bottom: 0 !important; }
  .etpl-editor { padding-top: 0 !important; margin-top: -10px !important; }
}

/* Email Settings form: red rounded input cells + red bold uppercase labels */
#view-stg-email .form-input,
#view-stg-booking .form-input {
  display: block;
  border: 1px solid #ff3333;
  border-radius: 8px;
  padding: 7px 14px;
  box-sizing: border-box;
  max-width: 700px;
  box-shadow: 0 0 6px rgba(0,0,0,0.18);
}
#view-stg-email .form-input:focus,
#view-stg-booking .form-input:focus { outline: none; border-color: #cc3333; }
#view-stg-email .form-label,
#view-stg-booking .form-label {
  display: block;
  text-transform: uppercase;
  color: #cc3333;
  font-weight: 800;
  letter-spacing: 0.3px;
  white-space: nowrap;
}
#view-stg-email .form-label .lbl-hint,
#view-stg-booking .form-label .lbl-hint {
  text-transform: none;
  color: #999;
  font-weight: 400;
  letter-spacing: 0;
}

/* Custom time dropdowns in Booking Settings (Work start / end) */
#view-stg-booking .tdd-btn.form-input {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  cursor: pointer;
  text-align: left;
  background: #fff;
  color: #333;
}
#view-stg-booking .tdd-pop {
  left: 0;
  right: auto;
  min-width: 0;
  width: 130px;
}

/* ── PAYMENTS on a phone: the full table, scrolling sideways inside its card,
   with Date and Client pinned on the left so a row keeps its identity ── */
.pay-stack-mobile { display: none; }
@media (max-width: 600px) {
  #view-payments .clients-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  #payments-table { min-width: 1080px; table-layout: auto; }
  #payments-table th, #payments-table td { padding: 8px 8px; font-size: 12px; white-space: nowrap; }
  #payments-table td.pay-date-td { white-space: nowrap !important; }
  #payments-table .pay-hide-m { display: table-cell !important; }
  #view-payments .card { overflow-x: hidden !important; }
  /* pin the first two columns */
  #payments-table th:nth-child(1), #payments-table td:nth-child(1) { position: sticky !important; left: 0; z-index: 2; background: #fff; min-width: 84px; }
  #payments-table th:nth-child(1), #payments-table td:nth-child(1) { box-shadow: 3px 0 6px -2px rgba(0,0,0,0.15); }
  #payments-table th:nth-child(2), #payments-table td:nth-child(2) { position: static !important; left: auto; box-shadow: none; }
  #payments-table thead th:nth-child(1) { z-index: 60; background: linear-gradient(to bottom, #cc3333, #8b1a1a); }
  #payments-table tbody tr:nth-child(even) td:nth-child(1) { background: #fff8f8; }
}
/* Tablet: all columns, table may scroll inside its card */
@media (min-width: 601px) and (max-width: 1024px) {
  #view-payments .card { overflow-x: auto; }
  #payments-table { min-width: 900px; }
  #payments-table th, #payments-table td { padding: 8px 8px; font-size: 12px; }
}

/* PAYMENTS table: same look as Leads — centered headers, centered short columns */
#view-payments .clients-table th { text-align: center; }
#view-payments .clients-table td:nth-child(1),
#view-payments .clients-table td:nth-child(3),
#view-payments .clients-table td:nth-child(8),
#view-payments .clients-table td:nth-child(9),
#view-payments .clients-table td:nth-child(10),
#view-payments .clients-table td:nth-child(11),
#view-payments .clients-table td:nth-child(12) { text-align: center; }
#view-payments .clients-table td:nth-child(5),
#view-payments .clients-table td:nth-child(6),
#view-payments .clients-table td:nth-child(7) { text-align: right; }


/* ═══ HOUSE TABLE STYLE — every data table in the app uses this card ═══
   Rounded 12px corners, 3px white frame, grey 3D lip under the card, red
   gradient header bar with an uppercase title and a count pill, and a
   `.clients-table` inside. Modelled on the Leads table (see #view-leads).
   New tables: <div class="card clients-table-card table-card"><div class="table-card-header">…</div>
               <div class="clients-table-scroll"><table class="clients-table">…</table></div></div> */
.table-card {
  border-radius: 12px !important;
  border: 3px solid #fff !important;
  box-shadow: 0 4px 0 #c8c8c8, 0 6px 12px rgba(0,0,0,0.12) !important;
  overflow: hidden;
  padding: 0 !important;
  margin-top: 4px;
}
.table-card-header {
  background: linear-gradient(to bottom, #cc3333, #8b1a1a);
  padding: 12px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.table-card-title {
  color: #fff; font-weight: 800; font-size: 15px; letter-spacing: 0.5px; text-transform: uppercase;
  display: flex; align-items: center;
}
.table-card-badge {
  background: rgba(255,255,255,0.25); color: #fff; border-radius: 10px;
  padding: 1px 9px; font-size: 13px; font-weight: 700; margin-left: 10px;
  box-shadow: 0 1px 3px rgba(0,0,0,.25);
}
/* Headers centered like Leads; the first (frozen) column of clients-table is
   the checkbox on Clients/Leads — Payments has none, so unpin its first column */
@media (min-width: 601px) {
  #view-payments .clients-table th:nth-child(1), #view-payments .clients-table td:nth-child(1),
  #view-payments .clients-table th:nth-child(2), #view-payments .clients-table td:nth-child(2) {
    position: static !important; left: auto !important; box-shadow: none !important; min-width: 0;
  }
}
#view-payments .clients-table thead th:nth-child(1), #view-payments .clients-table thead th:nth-child(2) {
  background: linear-gradient(to bottom, #cc3333, #8b1a1a);
}

/* PAYMENTS filters on a phone: four tidy rows */
@media (max-width: 600px) {
  #view-payments .pay-filters { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px 8px; align-items: end; }
  #view-payments .pay-filters-row { display: contents !important; }
  #view-payments .pf-from, #view-payments .pf-to     { grid-row: 1; }
  #view-payments .pf-type, #view-payments .pf-master { grid-row: 2; }
  #view-payments .pf-status { grid-row: 3; grid-column: 1; }
  #view-payments .pf-search { grid-row: 3; grid-column: 2; width: 100% !important; box-sizing: border-box; align-self: end; }
  /* Clear: full width, red, a little shorter; New Payment: full width below it */
  #view-payments .pf-search-x { display: none !important; }
  #view-payments .pf-clear  { grid-row: 4; grid-column: 1 / -1; width: 100%; box-sizing: border-box; padding: 8px !important; font-size: 13px !important; }
  #view-payments .pf-new    { grid-row: 5; grid-column: 1 / -1; width: 100%; box-sizing: border-box; padding: 12px !important; font-size: 14px !important; }
  #view-payments .pf input, #view-payments .pf select { width: 100% !important; box-sizing: border-box; }
  #view-payments .pf-from input, #view-payments .pf-to input, #view-payments select { min-width: 0; }
  #view-payments #pay-f-method { display: none !important; }
}
/* PAYMENTS: Clear is the light 3D button on phone and tablet */


/* Master account: only the PAYMENTS screen, and only their own rows */
body.role-master [data-nav]:not([data-nav="payments"]) { display: none !important; }
body.role-master #view-payments .pf-master { display: none !important; }

/* PAYMENTS totals — a light strip inside the header, right above the column names */
#payments-table thead tr.pay-totals-top th,
#rep-cli-table thead tr.pay-totals-top th,
#rep-walk-table thead tr.pay-totals-top th {
  background: linear-gradient(to bottom, #b02020, #7a1010) !important; color: #fff; font-weight: 800; font-size: 13px;
  text-align: center; padding: 8px 8px; border-bottom: 2px solid rgba(255,255,255,0.35); text-transform: none; letter-spacing: 0;
}
#payments-table thead tr.pay-totals-top th.pay-tot-label,
#rep-cli-table thead tr.pay-totals-top th.pay-tot-label,
#rep-sales-table thead tr.pay-totals-top th.pay-tot-label,
#po-table thead tr.pay-totals-top th.pay-tot-label,
#bk-table thead tr.pay-totals-top th.pay-tot-label,
#rep-walk-table thead tr.pay-totals-top th.pay-tot-label { text-align: left; text-transform: uppercase; letter-spacing: .5px; }
/* The two figures that matter stay white and bold; the rest step back in grey */
#payments-table thead tr.pay-totals-top th.pay-tot,
#rep-cli-table thead tr.pay-totals-top th.pay-tot,
#rep-walk-table thead tr.pay-totals-top th.pay-tot { color: #e8b8b8; font-weight: 400; }
#payments-table thead tr.pay-totals-top th.pay-tot-strong,
#rep-cli-table thead tr.pay-totals-top th.pay-tot-strong,
#rep-walk-table thead tr.pay-totals-top th.pay-tot-strong { color: #fff; font-weight: 800; }
/* the strip carries the totals now — the fences belong to the columns below */
#rep-cli-table thead tr.pay-totals-top th, #rep-walk-table thead tr.pay-totals-top th,
#rep-sales-table thead tr.pay-totals-top th, #po-table thead tr.pay-totals-top th,
#bk-table thead tr.pay-totals-top th { border-left: none; border-right: none; text-align: right; }
@media (max-width: 600px) {
  #payments-table thead tr.pay-totals-top th:nth-child(1) { position: sticky; left: 0; z-index: 61; background: linear-gradient(to bottom, #b02020, #7a1010) !important; }
}
/* PAYMENTS: Description wraps between words, never inside them, and keeps a sane width */
#payments-table td:nth-child(4), #payments-table th:nth-child(4) { white-space: normal !important; word-break: normal; overflow-wrap: normal; min-width: 160px; max-width: 240px; }
@media (max-width: 1024px) {
  #payments-table td:nth-child(4), #payments-table th:nth-child(4) { min-width: 180px; max-width: 220px; }
}

/* PAYMENTS: the in-field ✕ is retired — Clear button is back on every screen */
#view-payments .pf-search-x { display: none !important; }

/* ── Client card on phone & tablet ────────────────────────────
   Buttons in three rows: Edit | Delete, then a full-width Take deposit,
   then Send form | QB. And the stats table matches the card's width. */
@media (max-width: 1024px) {
  #view-client .form-footer-btns { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px; }
  #view-client .form-footer-btns > * { flex: none !important; min-width: 0 !important; width: 100%; }
  #view-client #client-deposit-btn { grid-column: 1 / -1; }
  /* QB sits inside a <span> holder — stretch the button itself to the cell */
  #view-client #client-qb-btn { display: block; }
  #view-client #client-qb-btn button { width: 100%; margin: 0 !important; }
  #client-stats-table table { width: 100% !important; }
  #client-stats-table th, #client-stats-table td { padding-left: 8px !important; padding-right: 8px !important; }
}

/* Fields the guest intake still needs — same vivid red as the signing page */
.input-field.needs-fill, .select-field.needs-fill {
  background: #ffd0d0 !important; border-color: #e21b1b !important;
  box-shadow: 0 0 0 3px rgba(226, 27, 27, 0.30) !important;
}

/* Inventory is the owner's section — hidden from ads and master accounts */
body.role-ads [data-nav="inventory"], body.role-master [data-nav="inventory"],
body.role-ads [data-nav="vendors"], body.role-master [data-nav="vendors"],
body.role-ads [data-nav="reports"], body.role-master [data-nav="reports"] { display: none !important; }
/* Accounting group hidden from restricted accounts */
body.role-ads [data-nav="accounting"], body.role-master [data-nav="accounting"] { display: none !important; }
/* Stock-in suggestions: the row the arrow keys are sitting on */
.inv-r-opt.inv-r-hl, .eb-mat-opt.inv-r-hl, .pay-prod-opt.inv-r-hl, .po-opt.inv-r-hl { background: #ffd9d9; box-shadow: inset 3px 0 0 #cc3333; }


/* ── The left menu is how the salon navigates, so keep it down to tablet width.
   Below 701px (phones) the hamburger drawer takes over as before. ── */
@media (min-width: 701px) {
  #page-app { padding-left: 210px; }
  .app-container, .cal-page-container { margin-left: 0; margin-right: auto; }
  .header-center { display: none !important; }
  .top-header { display: none !important; }
  .hamburger-btn { display: none !important; }
  .svc-sticky-outer { top: 0 !important; }
  #mobile-nav.mobile-nav {
    display: flex !important;
    left: 0;
    right: auto;
    border-left: none;
    border-right: 1px solid #cc3333;
    box-shadow: 12px 0 24px -2px rgba(0,0,0,0.18);
  }
}

/* A guest sees almost no menu items, so the sidebar would be an empty white
   strip — give guests the top bar and the hamburger, as before. */
@media (min-width: 701px) {
  body.guest-mode #mobile-nav.mobile-nav { display: none !important; }
  body.guest-mode #page-app { padding-left: 0; }
  body.guest-mode .top-header { display: flex !important; }
  body.guest-mode .hamburger-btn { display: flex !important; }
}

/* ── Stock ledger: fence off the three blocks — what was there, what moved,
   what is left — so the eye does not have to count columns. ── */
#rep-prod-table > thead > tr > th:nth-child(3),  #rep-prod-table > tbody > tr > td:nth-child(3),
#rep-prod-table > thead > tr > th:nth-child(5),  #rep-prod-table > tbody > tr > td:nth-child(5),
#rep-prod-table > thead > tr > th:nth-child(7),  #rep-prod-table > tbody > tr > td:nth-child(7),
#rep-prod-table > thead > tr > th:nth-child(10), #rep-prod-table > tbody > tr > td:nth-child(10),
#rep-cat-table  > thead > tr > th:nth-child(2),  #rep-cat-table  > tbody > tr > td:nth-child(2),
#rep-cat-table  > thead > tr > th:nth-child(3),  #rep-cat-table  > tbody > tr > td:nth-child(3),
#rep-cat-table  > thead > tr > th:nth-child(4),  #rep-cat-table  > tbody > tr > td:nth-child(4),
#rep-cat-table  > thead > tr > th:nth-child(7),  #rep-cat-table  > tbody > tr > td:nth-child(7) { border-left: 2px solid #cc3333; }
#rep-prod-table > thead > tr > th:nth-child(11), #rep-prod-table > tbody > tr > td:nth-child(11),
#rep-cat-table  > thead > tr > th:nth-child(7),  #rep-cat-table  > tbody > tr > td:nth-child(7) { border-right: 2px solid #cc3333; }
/* the drill-down row spans the whole table — no stray fence inside it */
#rep-prod-table > tbody > tr[id^="rep-prod-det-"] > td { border-left: none; border-right: none; }
/* the client break-down sits inside the income table the same way */
#rep-cli-table > tbody > tr[id^="rep-cli-det-"] > td,
#rep-sales-table > tbody > tr[id^="rep-sal-det-"] > td { border-left: none; border-right: none; }
/* group headers span the fences — no red bars cutting through them */
#rep-prod-table > tbody > tr.rep-grp > td { border-left: none; border-right: none; }
#rep-cat-table tr.rep-cat-total td, #rep-cli-table tr.rep-cat-total td, #rep-walk-table tr.rep-cat-total td, #st-sum-table tr.rep-cat-total td, #cs-sum-table tr.rep-cat-total td { border-top: 2px solid #cc3333; background: #fdf4f4; color: #cc3333 !important; font-weight: 800 !important; }
/* Movements opened under a product: a plain ledger grid — thin black rules all
   round. It lives inside .clients-table, so the parent's sticky first columns,
   striping and hair-line borders have to be switched off here or the grid ends
   up in two different colours. */
.mv-detail { table-layout: fixed; }
.mv-detail th, .mv-detail td {
  border: 1px solid #333 !important;
  position: static !important;
  box-shadow: none !important;
  min-width: 0 !important;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mv-detail tbody tr td:first-child { color: inherit; font-size: 12px; }
.mv-detail tbody tr:nth-child(even) td:nth-child(1),
.mv-detail tbody tr:nth-child(even) td:nth-child(2),
.mv-detail tbody tr:hover td:nth-child(1),
.mv-detail tbody tr:hover td:nth-child(2),
.mv-detail tbody tr:hover td { background: inherit; }

/* Two header rows both stuck at the top overlap each other. The totals strip
   holds the top line; the column names stack right under it and stay readable. */
#rep-cli-table thead tr.pay-totals-top th,
#rep-walk-table thead tr.pay-totals-top th,
#payments-table thead tr.pay-totals-top th { top: 0; z-index: 55; }
#rep-cli-table thead tr:not(.pay-totals-top) th,
#rep-walk-table thead tr:not(.pay-totals-top) th,
#payments-table thead tr:not(.pay-totals-top) th { top: 32px; z-index: 50; }
/* no white seam between the totals strip and the column names */
#rep-cli-table thead tr.pay-totals-top th,
#rep-walk-table thead tr.pay-totals-top th { border-bottom: none; }
/* the stock table's drill-down row spans it fully — no column fences inside */
#inventory-table > tbody > tr[id^="inv-det-"] > td { border-left: none; border-right: none; }
/* Act of reconciliation: a plain ruled ledger, the way it is signed on paper */
.act-table td { border: 1px solid #999; vertical-align: top; }
.act-table thead th { border: 1px solid #6b1010; }

/* Report tables are not scrolled sideways, so the first two columns must not
   behave like sticky ones — their drop shadow was eating the column separator. */
/* The header of these tables must stay put, so the first two columns keep their
   sticky behaviour — only the drop shadow that hid the separator is dropped. */
#rep-cli-table td:nth-child(1), #rep-cli-table td:nth-child(2),
#rep-sales-table td:nth-child(1), #rep-sales-table td:nth-child(2),
#rep-walk-table td:nth-child(1), #rep-walk-table td:nth-child(2),
#rep-cat-table td:nth-child(1), #rep-cat-table td:nth-child(2) { min-width: 0; }
/* the ordinary hair-line separator, not the sticky column's drop shadow */
#rep-cli-table td, #rep-sales-table td, #rep-walk-table td,
#rep-cat-table td { box-shadow: inset -1px 0 0 #e0e0e0; }
/* Materials by product is 11 columns wide and does scroll sideways, so its first
   two columns stay sticky — only the drop shadow on the body cells goes. */
#rep-prod-table > tbody > tr > td:nth-child(1),
#rep-prod-table > tbody > tr > td:nth-child(2) { box-shadow: inset -1px 0 0 #e0e0e0; }
#rep-cli-table th, #rep-sales-table th, #rep-walk-table th {
  box-shadow: inset -1px 0 0 rgba(255,255,255,0.18);
}


/* Bank: two tabs cut from the same cloth as the table header — the header's
   red and the header's badge, tucked under the card so they read as one piece. */
.bk-tab {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 22px 20px;
  border: 3px solid #fff; border-bottom: none;
  border-radius: 12px 12px 0 0; cursor: pointer;
  font-size: 15px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px;
  color: #666; background: linear-gradient(to bottom, #e4e4e4, #cfcfcf);
}
.bk-tab:hover { background: linear-gradient(to bottom, #ececec, #d8d8d8); }
.bk-tab-on {
  color: #fff; background: linear-gradient(to bottom, #cc3333, #8b1a1a);
}
.bk-tab-n {
  background: rgba(0, 0, 0, 0.12); color: #666; border-radius: 10px;
  padding: 1px 9px; font-size: 13px; font-weight: 700;
}
.bk-tab-on .bk-tab-n {
  background: rgba(255, 255, 255, 0.25); color: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
}

/* The folder row keeps its blush even under the table's hover and striping,
   which otherwise repaint the first (sticky) cell white. */
.clients-table tbody tr.vnd-folder-row td,
.clients-table tbody tr.vnd-folder-row:hover td,
.clients-table tbody tr.vnd-folder-row:nth-child(even) td {
  background: linear-gradient(to bottom, #f2dede, #ecc9c9) !important;
}

/* The cell the keyboard is standing on, in the bank table. */
#bk-tbody [data-bk-f] { outline: none; border-radius: 4px; }
#bk-tbody [data-bk-f]:focus-visible,
#bk-tbody .bk-here { box-shadow: 0 0 0 2px #cc3333; }

/* Income by service and Income from products, fenced like the materials report:
   a red line before every money column, so the eye lands on the figures. */
#rep-cli-table   > thead > tr > th:nth-child(2), #rep-cli-table   > tbody > tr > td:nth-child(2),
#rep-cli-table   > thead > tr > th:nth-child(3), #rep-cli-table   > tbody > tr > td:nth-child(3),
#rep-cli-table   > thead > tr > th:nth-child(4), #rep-cli-table   > tbody > tr > td:nth-child(4),
#rep-sales-table > thead > tr > th:nth-child(2), #rep-sales-table > tbody > tr > td:nth-child(2),
#rep-sales-table > thead > tr > th:nth-child(3), #rep-sales-table > tbody > tr > td:nth-child(3),
#rep-sales-table > thead > tr > th:nth-child(4), #rep-sales-table > tbody > tr > td:nth-child(4) {
  border-left: 2px solid #cc3333;
}
#rep-cli-table   > thead > tr > th:nth-child(4), #rep-cli-table   > tbody > tr > td:nth-child(4),
#rep-sales-table > thead > tr > th:nth-child(4), #rep-sales-table > tbody > tr > td:nth-child(4) {
  border-right: 2px solid #cc3333;
}
/* the drill-down spans the table — no fences inside it */
#rep-cli-table   > tbody > tr[id^="rep-cli-det-"]   > td,
#rep-sales-table > tbody > tr[id^="rep-sales-det-"] > td { border-left: none; border-right: none; }

/* All clients: the two balances are what the table is read for, so each is
   fenced in red the way the materials report fences its column groups. */
#cs-sum-table > thead > tr > th:nth-child(3), #cs-sum-table > tbody > tr > td:nth-child(3),
#cs-sum-table > thead > tr > th:nth-child(4), #cs-sum-table > tbody > tr > td:nth-child(4),
#cs-sum-table > thead > tr > th:nth-child(8), #cs-sum-table > tbody > tr > td:nth-child(8) {
  border-left: 2px solid #cc3333;
}
#cs-sum-table > thead > tr > th:nth-child(8), #cs-sum-table > tbody > tr > td:nth-child(8) {
  border-right: 2px solid #cc3333;
}

/* All clients, one for one with the materials report: no full grey grid, only
   a hair-line between columns and rows, and the red fences round the balances. */
#cs-sum-table td { border: none; border-bottom: 1px solid #f0e8e8;
                   box-shadow: inset -1px 0 0 #e0e0e0; vertical-align: middle; }
#cs-sum-table thead th { border: none; }
#cs-sum-table > thead > tr > th:nth-child(3), #cs-sum-table > tbody > tr > td:nth-child(3),
#cs-sum-table > thead > tr > th:nth-child(4), #cs-sum-table > tbody > tr > td:nth-child(4),
#cs-sum-table > thead > tr > th:nth-child(8), #cs-sum-table > tbody > tr > td:nth-child(8) {
  border-left: 2px solid #cc3333;
}
#cs-sum-table > thead > tr > th:nth-child(8), #cs-sum-table > tbody > tr > td:nth-child(8) {
  border-right: 2px solid #cc3333;
}
#cs-sum-table tr.rep-cat-total td { border-top: 2px solid #cc3333; }

/* the third contract type sits beside K-TIP and IBE */
#view-contract .btn-training.contract-type-active { box-shadow: 0 0 0 3px #ffd9d9; }

/* All vendors: the ordinary table rules of the client reports — a hair-line
   between rows and columns — and red fences on the two balances only. */
#st-sum-table td { border: none; border-bottom: 1px solid #f0e8e8;
                   box-shadow: inset -1px 0 0 #e0e0e0; vertical-align: middle; }
#st-sum-table thead th { border: none; }
#st-sum-table > thead > tr > th:nth-child(3), #st-sum-table > tbody > tr > td:nth-child(3),
#st-sum-table > thead > tr > th:nth-child(8), #st-sum-table > tbody > tr > td:nth-child(8) {
  border-left: 2px solid #cc3333;
  border-right: 2px solid #cc3333;
}
#st-sum-table tr.rep-cat-total td { border-top: 2px solid #cc3333; }
/* …and no striping: the client reports read as plain white rows, because their
   hidden drill-down rows absorb it. Here it is switched off outright. */
#st-sum-table > tbody > tr:nth-child(even),
#st-sum-table > tbody > tr:nth-child(even) > td:nth-child(1),
#st-sum-table > tbody > tr:nth-child(even) > td:nth-child(2) { background: #fff; }
#st-sum-table > tbody > tr.rep-cat-total > td { background: #fdf4f4; }

/* Sales journal: the plain ruled rows of the vendor tables — a hair-line
   between rows, a grey rule between columns, no striping — and red fences
   round the three columns she reads across: who bought, what it came to and
   what stayed with us. The fences run through the totals strip as well, so the
   lines are unbroken from the top of the table to the bottom. */
#sl-table td { border: none; border-bottom: 1px solid #f0e8e8;
               box-shadow: inset -1px 0 0 #e0e0e0; vertical-align: middle; }
#sl-table thead th { border: none; }
#sl-table > thead > tr:not(.pay-totals-top) > th:nth-child(3),
#sl-table > tbody > tr > td:nth-child(3),
#sl-table > thead > tr:not(.pay-totals-top) > th:nth-child(5),
#sl-table > tbody > tr > td:nth-child(5),
#sl-table > thead > tr:not(.pay-totals-top) > th:nth-child(9),
#sl-table > tbody > tr > td:nth-child(9),
#sl-table > thead > tr.pay-totals-top > th:nth-child(2),
#sl-table > thead > tr.pay-totals-top > th:nth-child(4),
#sl-table > thead > tr.pay-totals-top > th:nth-child(8) {
  border-left: 2px solid #cc3333;
  border-right: 2px solid #cc3333;
}
#sl-table thead tr.pay-totals-top th { text-align: right; }
#sl-table thead tr.pay-totals-top th.pay-tot-label { text-align: left; text-transform: uppercase; letter-spacing: .5px; }
#sl-table > tbody > tr:nth-child(even),
#sl-table > tbody > tr:nth-child(even) > td:nth-child(1),
#sl-table > tbody > tr:nth-child(even) > td:nth-child(2) { background: #fff; }

/* Service bills: same plain rules, with the balance — the figure the table is
   opened for — fenced in red on both sides. */
#bl-table td { border: none; border-bottom: 1px solid #f0e8e8;
               box-shadow: inset -1px 0 0 #e0e0e0; vertical-align: middle; }
#bl-table thead th { border: none; }
#bl-table > thead > tr > th:nth-child(8), #bl-table > tbody > tr > td:nth-child(8) {
  border-left: 2px solid #cc3333;
  border-right: 2px solid #cc3333;
}
/* the date closes off the left edge of the table the same way */
#bl-table > thead > tr > th:nth-child(1), #bl-table > tbody > tr > td:nth-child(1) {
  border-right: 2px solid #cc3333;
}
#bl-table > tbody > tr:nth-child(even),
#bl-table > tbody > tr:nth-child(even) > td:nth-child(1),
#bl-table > tbody > tr:nth-child(even) > td:nth-child(2) { background: #fff; }

/* ── SALES: the CLIENT / BUYER switch on the invoice ── */
.sl-pt { background:#fff; color:#cc3333; }
.sl-pt.on { background:linear-gradient(to bottom,#cc3333,#8b1a1a); color:#fff; }
.sl-badge { display:inline-block; font-size:9px; font-weight:800; letter-spacing:.9px; text-transform:uppercase; padding:0; margin-left:8px; vertical-align:1px; background:none; }
.sl-badge.client { color:#b5b5b5; }
.sl-badge.buyer { color:#cc3333; }

/* the little wheel while the terminal waits for a card */
@keyframes slspin { to { transform: rotate(360deg); } }
.sl-badge.service { color:#b5b5b5; margin-left:8px; }
/* ── auth screens ── */
.auth-links{display:flex;justify-content:space-between;gap:12px;margin-top:14px;font-size:12px;flex-wrap:wrap}
.auth-links a{color:#cc3333;text-decoration:none;font-weight:600}
.auth-links a:hover{text-decoration:underline}
.auth-title{font-size:16px;font-weight:800;color:#222;text-align:center;margin:-2px 0 4px}
.auth-hint{font-size:12px;color:#888;text-align:center;margin:0 0 12px;line-height:1.5}
.auth-select{width:100%;padding:9px 10px;border:1px solid #ccc;border-radius:6px;font-size:13px;background:#fff;box-sizing:border-box}
.login-error.ok{color:#2a8a2a;background:#eef8ee;border-color:#bfe3bf}


/* ── product lockup: the icon next to the name, shown where no salon is known yet
   (sign-in, password reset). The salon's own name lives in the app header. ── */
.brand-lockup { display: flex; align-items: center; justify-content: center; gap: 15px; }
.brand-mark { width: 56px; height: 56px; border-radius: 14px; flex-shrink: 0;
              box-shadow: 0 4px 12px rgba(0,0,0,0.30); }
.brand-text { font-size: 26px; font-weight: 800; letter-spacing: 3.5px; color: #111;
              line-height: 1.05; text-align: left; }
.brand-text em { display: block; font-style: normal; font-size: 16px; font-weight: 400;
                 letter-spacing: 6px; color: #cc3333; margin-top: 3px; }

/* Language picker: a monochrome globe, so it follows the text colour instead of
   being a blue emoji the CSS cannot touch. */
.lang-globe { width: 15px; height: 15px; vertical-align: -3px; margin-right: 5px;
              color: #333; stroke: currentColor; }

/* Sign-up headline: brand-black plate with the number picked out in red, so the
   promise is read before the form and the red sign-up button stays the only CTA. */
.auth-plate { background: #141416; color: #fff; border-radius: 9px; padding: 11px 14px;
              border-bottom: 3px solid #cc3333; text-align: center; margin: -2px 0 6px;
              font-size: 15px; font-weight: 800; line-height: 1.3; }
.auth-plate b { color: #ff6b6b; font-weight: 800; margin-left: 6px; }

/* Compact lockup for the app header. The salon's own name stays where it belongs:
   consent forms, receipts, emails and the public booking page. */
.brand-lockup.sm { gap: 8px; }
.brand-lockup.sm .brand-mark { width: 32px; height: 32px; border-radius: 8px; box-shadow: 0 2px 6px rgba(0,0,0,0.28); }
.brand-lockup.sm .brand-text { font-size: 15px; letter-spacing: 1.8px; }
.brand-lockup.sm .brand-text em { font-size: 9.5px; letter-spacing: 3.2px; margin-top: 1px; }
@media (max-width: 520px) {
  .brand-lockup.sm .brand-mark { width: 28px; height: 28px; border-radius: 7px; }
  .brand-lockup.sm .brand-text { font-size: 13px; letter-spacing: 1.2px; }
  .brand-lockup.sm .brand-text em { font-size: 8.5px; letter-spacing: 2.4px; }
}