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

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

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

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

/* ── BUTTONS ────────────────────────────────────── */
.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;
}
.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: 6px;
  overflow: hidden;
  width: 360px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.3);
}
.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: #111;
  color: #fff;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: 3px;
  padding: 6px 14px;
  border-radius: 2px;
}
.logo-block.small {
  font-size: 14px;
  letter-spacing: 2px;
  padding: 4px 10px;
}

/* ══════════════════════════════════════════════════
   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; color: #999; }
.logout-link:hover { color: #333; }

.app-container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 16px 16px 40px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ── CARD ───────────────────────────────────────── */
.card {
  background: #f5f5f5;
  border: 1px solid #ddd;
  border-radius: 4px;
  overflow: hidden;
}
.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;
}

/* ── 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;
}
.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 */
.radio-group { gap: 20px; }
.radio-label { display: flex; align-items: center; gap: 5px; cursor: pointer; }
.checkbox-group { display: flex; gap: 40px; }
.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: 120px;
  height: 120px;
  border-radius: 50%;
  overflow: hidden;
  cursor: pointer;
  border: 3px solid #ddd;
  background: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.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;
}
.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 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; }
.search-box-wrap { display: flex; gap: 8px; margin-bottom: 16px; }
.search-input {
  flex: 1;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 7px 10px;
  font-size: 13px;
  outline: none;
}
.search-input:focus { border-color: #3d6ee4; }

.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: #fff0a0;
  color: #000;
  border-radius: 2px;
  padding: 0 1px;
  font-style: normal;
}

/* ── CONTRACTS ──────────────────────────────────── */
.contracts-card { padding: 12px 16px; }
.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, #ffffff, #f5f5f5);
  color: #cc2222;
  border: 1px solid #ddd;
  border-bottom: 4px solid #bbb;
  padding: 7px 20px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  box-shadow: 0 4px 6px rgba(0,0,0,0.12);
  transition: all 0.1s;
}
.btn-history:hover { background: linear-gradient(to bottom, #fff, #ececec); }
.btn-history:active { border-bottom-width: 1px; transform: translateY(3px); box-shadow: 0 1px 3px rgba(0,0,0,0.15); }
.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: 4px;
  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: 4px;
}
.btn-print {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 7px 16px;
  font-size: 12px;
  font-weight: 700;
  color: #cc2222;
  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;
  cursor: pointer;
  white-space: nowrap;
  z-index: 10;
  transition: box-shadow 0.1s, transform 0.1s;
}
.btn-print: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;
}
.btn-print:active {
  transform: translateY(2px);
  box-shadow: 0 1px 3px rgba(0,0,0,0.18);
}
.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; }
.inv-field-row .input-field { width: 80px; height: 32px; text-align: right; box-sizing: border-box; }
.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: 4px;
  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; }
.salon-initials {
  font-size: 14px;
  font-weight: 400;
  font-style: italic;
  color: #333;
  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: 4px;
  padding: 0 0 16px;
}
.notes-section-title {
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  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: #2e7d32;
  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: linear-gradient(to bottom, #ffffff 0%, #f0f0f0 100%);
  border: 2px solid #cc2222;
  border-radius: 6px;
  padding: 6px 18px;
  font-size: 13px;
  cursor: pointer;
  color: #cc2222;
  font-weight: 700;
  letter-spacing: 0.3px;
  box-shadow: 0 4px 0 #991515, 0 6px 8px rgba(0,0,0,0.2);
  transition: all 0.1s;
  position: relative;
  top: 0;
}
.btn-header:hover {
  background: linear-gradient(to bottom, #fff5f5 0%, #ffe8e8 100%);
  color: #aa1a1a;
}
.btn-header:active {
  box-shadow: 0 1px 0 #991515, 0 2px 4px rgba(0,0,0,0.15);
  top: 3px;
}

/* ── 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, #ffffff, #f5f5f5);
  color: #cc2222;
  border: 2px solid #cc2222;
  border-bottom: 4px solid #991515;
  padding: 7px 18px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  box-shadow: 0 4px 6px rgba(0,0,0,0.15);
  transition: all 0.1s;
}
.btn-email-sel:hover { background: linear-gradient(to bottom, #fff5f5, #ffe8e8); }
.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, #3a80cc 0%, #2a6db5 100%);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 6px 16px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 0 #1a4d8a, 0 6px 8px rgba(0,0,0,0.2);
  position: relative;
  top: 0;
  transition: all 0.1s;
  white-space: nowrap;
}
.btn-import:hover { background: linear-gradient(to bottom, #4a90dc 0%, #3a7dc5 100%); }
.btn-import:active { box-shadow: 0 1px 0 #1a4d8a, 0 2px 4px rgba(0,0,0,0.15); top: 3px; }

/* ── EXCEL BUTTON ────────────────────────────────── */
.btn-excel {
  background: linear-gradient(to bottom, #2d8a55 0%, #1d6f42 100%);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 6px 16px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 0 #0f4a2a, 0 6px 8px rgba(0,0,0,0.2);
  position: relative;
  top: 0;
  transition: all 0.1s;
  white-space: nowrap;
}
.btn-excel:hover { background: linear-gradient(to bottom, #3d9a65 0%, #2d7f52 100%); }
.btn-excel:active { box-shadow: 0 1px 0 #0f4a2a, 0 2px 4px rgba(0,0,0,0.15); top: 3px; }

.list-filter-row { display: flex; flex-direction: row; gap: 8px; align-items: center; flex-wrap: wrap; }
.sel-btn-row { display: flex; gap: 8px; align-items: center; }
.excel-btn-row { display: flex; gap: 8px; align-items: center; }

/* ── CLIENT LIST TABLE ───────────────────────────── */
.list-count {
  padding: 8px 14px;
  font-size: 12px;
  color: #666;
  border-bottom: 1px solid #eee;
  background: #fafafa;
}
.clients-table-card { overflow: visible !important; }
.clients-table-scroll {
  overflow-x: auto;
  overflow-y: auto;
  max-height: calc(100vh - 230px);
  -webkit-overflow-scrolling: touch;
}

.clients-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.clients-table th {
  background: #444;
  color: #fff;
  padding: 9px 12px;
  text-align: left;
  white-space: nowrap;
  font-weight: 600;
  position: sticky;
  top: 0;
  z-index: 2;
}
.clients-table td {
  padding: 8px 12px;
  border-bottom: 1px solid #eee;
  white-space: nowrap;
  color: #333;
}
.clients-table tbody tr:nth-child(even) { background: #f8f8f8; }
.clients-table tbody tr:hover { background: #eef3ff; 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: #333; }
.sort-arrow { font-size: 10px; }

/* ── 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: 700px) {
  .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; }
  .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; }
}

/* ── 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;
}

.btn-tpl {
  background: linear-gradient(to bottom, #f5f5f5, #e8e8e8);
  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-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
══════════════════════════════════════════════════ */
.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-nav-btn {
  padding: 6px 12px !important;
  font-size: 14px !important;
}
.cal-wrapper {
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}
.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: 5px 8px;
  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.3;
}
.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;
}

/* ── Calendar view tabs ── */
.cal-view-tabs { display:flex; border:1px solid #ddd; border-radius:6px; overflow:hidden; }
.cal-tab {
  background:#fff; border:none; padding:6px 14px; font-size:13px; font-weight:500;
  cursor:pointer; color:#555; transition:background 0.15s;
}
.cal-tab:hover { background:#f5f5f5; }
.cal-tab.active { background:#8b1a1a; color:#fff; font-weight:700; }

/* ── Month grid ── */
.cal-month-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  width: 100%;
}
.cal-month-dow {
  flex: 1; min-width: 0;
  padding: 8px 0;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  color: #888;
  border-bottom: 1px solid #eee;
}
.cal-header-row > div[style*="display:contents"] {
  display: contents;
}
.cal-month-cell {
  min-height: 100px;
  border-right: 1px solid #f0f0f0;
  border-bottom: 1px solid #f0f0f0;
  padding: 6px;
  cursor: pointer;
  vertical-align: top;
  transition: background 0.1s;
}
.cal-month-cell:hover { background: #fafafa; }
.cal-month-cell-empty { background: #fafafa; opacity: 0.5; }
.cal-month-today { background: #fff5f5 !important; }
.cal-month-day-num {
  font-size: 14px; font-weight: 600; color: #555;
  margin-bottom: 4px; line-height: 1;
}
.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; }

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

/* ── 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; }
  .header-center { order: 3; width: 100%; flex-direction: column; gap: 4px; align-items: stretch; }
  .btn-header { font-size: 11px; padding: 5px 10px; box-shadow: 0 2px 0 #991515, 0 3px 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; }
  .btn-history { font-size: 12px; padding: 7px 12px; width: 100%; }

  /* Client list table — make it scrollable */
  .clients-table-scroll { max-height: calc(100vh - 280px); }
  .clients-table { font-size: 11px; min-width: 600px; }
  .clients-table th, .clients-table td { padding: 6px 8px; }

  /* Search / filter bar */
  .list-controls { flex-direction: column; gap: 6px; }
  .list-controls input { width: 100%; }

  /* History table */
  #history-table { font-size: 11px; min-width: 700px; }
  .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; }
}