/*
 * Peach Bloom — a restrained, paper-and-terracotta option for BookSys.
 * Loaded after the general schedule/login/account styles. Layout, type scale,
 * grid placement, form behavior, and responsive breakpoints stay with general.
 */
:root {
  --canvas: #f8f0eb;
  --paper: #fffaf6;
  --paper-deep: #f1dfd8;
  --ink: #392b2c;
  --muted: #6e5c5e;
  --line: #dec8c2;
  --brand: #a34b4e;
  --brand-dark: #78383e;
  --brand-soft: #e9bcb2;
  --soft: #f7e5df;
  --danger: #a13d48;
  --success: #396857;
  --shadow: 0 8px 27px rgba(101, 55, 51, .055);
}

body {
  background: var(--canvas);
  color: var(--ink);
}

/* A fine rule, rather than a floating or pill-shaped header. */
.topbar {
  background: rgba(255, 250, 246, .97);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 2px 12px rgba(90, 48, 44, .035);
}
.brand { color: var(--brand-dark); }
.brand small { color: var(--muted); }
.outline-nav {
  border: 1px solid #b98680;
  border-radius: 3px;
  background: transparent;
  color: var(--brand-dark);
}
.outline-nav:hover {
  border-color: var(--brand-dark);
  background: var(--brand-dark);
  color: var(--paper);
}

.toolbar {
  border-bottom: 1px solid var(--line);
}
.toolbar-top > div:first-child b,
.eyebrow,
.week-range,
.filters-link i,
.trainer i { color: var(--brand); }
.nav-week .btn {
  border-color: var(--line);
  border-radius: 3px;
  background: var(--paper);
  color: var(--brand-dark);
}
.nav-week .btn:hover {
  background: var(--brand-dark);
  border-color: var(--brand-dark);
  color: var(--paper);
}
.nav-week .btn.disabled {
  opacity: 1;
  color: #827273;
  background: #f1e7e1;
  border-color: #d9c9c3;
}
.filters-panel {
  border-color: var(--line);
  border-radius: 4px;
  background: var(--paper);
  box-shadow: var(--shadow);
}

/* The general six-column grid is deliberately retained. Rows can grow for
 * Bulgarian class names; no fixed row height or forced single-line text. */
.schedule {
  border-color: var(--line);
  border-radius: 4px;
  background: var(--paper);
  box-shadow: var(--shadow);
}
.day-title {
  border-top-color: var(--line);
  border-left-color: var(--brand);
  background: #f4dcd5;
  color: var(--brand-dark);
}
.class-row {
  border-bottom-color: #ecddd7;
  background: var(--paper);
}
.class-row:hover {
  border-left-color: var(--brand-soft);
  background: #fcf1ec;
}
.class-row.waiting { border-left-color: #ae8064; }
.class-name {
  overflow-wrap: anywhere;
  color: var(--ink);
}
.trainer {
  overflow-wrap: anywhere;
  color: var(--muted);
}
.class-time { color: var(--brand-dark); }
.class-info { color: var(--muted); }
.book {
  border-radius: 3px;
  background: var(--brand);
  color: var(--paper);
}
.book:hover {
  background: var(--brand-dark);
  color: var(--paper);
}
.class-row.unavailable,
.class-row.unavailable:hover {
  border-left-color: #d6c8c2;
  background: #f2ece8;
  color: #675d5d;
}
.class-row.unavailable .class-name,
.class-row.unavailable .class-time,
.class-row.unavailable .trainer,
.class-row.unavailable .trainer i,
.class-row.unavailable .class-info,
.class-row.unavailable .price {
  color: #675d5d;
}
.nonbookable { color: #675d5d; }
.empty-week { color: var(--muted); }

.choose-btn,
.booking-submit {
  border-radius: 3px;
  background: var(--brand);
  color: var(--paper);
}
.choose-btn:hover,
.booking-submit:hover { background: var(--brand-dark); }
.booking-submit:disabled,
.login-btn:disabled,
.dialog-btn:disabled {
  opacity: 1;
  background: #e0ceca;
  border-color: #e0ceca;
  color: #675d5d;
  cursor: wait;
}
.footer {
  border-top-color: var(--line);
  background: var(--paper-deep);
  color: var(--muted);
}
.footer a { color: var(--brand-dark); }

/* Booking form: quiet paper, squared edges, legible feedback. */
.booking-dialog,
.cancel-dialog {
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 25px 75px rgba(58, 32, 34, .23);
}
.booking-dialog::backdrop,
.cancel-dialog::backdrop { background: rgba(46, 28, 32, .58); }
.booking-head { border-bottom-color: var(--line); }
.booking-title { color: var(--brand-dark); }
.dialog-close {
  border-radius: 3px;
  background: var(--soft);
  color: var(--brand-dark);
}
.dialog-close:hover { background: var(--brand-soft); }
.booking-meta { color: var(--muted); }
.booking-meta strong { color: var(--ink); }
.availability {
  border: 1px solid #b9d0c4;
  border-radius: 3px;
  background: #e6f0e9;
  color: var(--success);
}
.booking-input,
.booking-select,
.field input {
  border: 1px solid #cbb0aa;
  border-radius: 3px;
  background: #fffdf9;
  color: var(--ink);
}
.booking-input:focus,
.booking-select:focus,
.field input:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(163, 75, 78, .14);
}
.booking-input.required-look { border-color: #a97265; }
.booking-input.input-error { border-color: var(--danger); }
.field-error,
.required-note { color: var(--danger); }
.form-message,
.error { border-radius: 3px; }
.form-message.success {
  border: 1px solid #b9d0c4;
  background: #e6f0e9;
  color: #315b4b;
}
.form-message.error,
.error {
  border: 1px solid #deb5ae;
  background: #f9e7e0;
  color: #813640;
}

/* Login and account inherit exactly the same materials. */
.login-card,
.surface {
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--paper);
  box-shadow: var(--shadow);
}
.login-card::before {
  border-radius: 0;
  background: var(--brand);
}
.eye { background: var(--brand); }
.login-btn,
.secondary-btn,
.back-btn {
  border-radius: 3px;
}
.login-btn {
  border-color: var(--brand);
  background: var(--brand);
  color: var(--paper);
}
.login-btn:hover {
  border-color: var(--brand-dark);
  background: var(--brand-dark);
}
.secondary-btn,
.back-btn {
  border-color: #b98680;
  color: var(--brand-dark);
}
.secondary-btn:hover,
.back-btn:hover {
  border-color: var(--brand);
  background: var(--soft);
}
.text-link,
.form-title,
.page-title { color: var(--brand-dark); }
.divider,
.page-head,
.profile-top,
.membership { border-color: var(--line); }
.divider { background: var(--line); }
.page-head > .outline-nav {
  border-color: var(--brand);
  background: var(--brand);
  color: var(--paper);
}
.page-head > .outline-nav:hover {
  border-color: var(--brand-dark);
  background: var(--brand-dark);
}
.profile-avatar {
  background: #efcec3;
  color: var(--brand-dark);
}
.info-row { border-bottom-color: #ecddd7; }
.info-row .icon,
.visit-meta .icon { color: var(--brand); }
.membership .section-title { color: var(--brand); }
.card-choice label {
  border-color: var(--line);
  border-radius: 3px;
  background: #fff8f4;
}
.card-choice label:hover {
  border-color: #bb8e85;
  background: #f9eae3;
}
.card-choice input:checked + label {
  border-color: var(--brand);
  background: #f4ddd5;
  box-shadow: inset 3px 0 0 var(--brand);
}
.choice-price { color: var(--brand-dark); }
.tabs {
  border-color: var(--line);
  border-radius: 3px;
  background: var(--soft);
}
.tab-btn { border-radius: 2px; }
.tab-btn.active {
  background: var(--paper);
  color: var(--brand-dark);
  box-shadow: 0 1px 3px rgba(101, 55, 51, .1);
}
.visit-card {
  border-color: var(--line);
  border-radius: 3px;
  background: #fffdf9;
}
.visit-card:hover {
  border-color: #bb8e85;
  box-shadow: 0 7px 18px rgba(101, 55, 51, .07);
}
.date-tile {
  border-radius: 2px;
  background: #f3dcd3;
  color: var(--brand-dark);
}
.visit-status { color: var(--success); }
.visit-status.past { color: var(--muted); }
.cancel-btn {
  border-color: #b98680;
  border-radius: 3px;
  color: var(--brand-dark);
}
.cancel-btn:hover {
  border-color: var(--brand-dark);
  background: var(--brand-dark);
  color: var(--paper);
}
.past-card { background: #f7efea; }
.past-card .date-tile {
  background: #e9dcd6;
  color: #675d5d;
}
.dialog-icon {
  border-radius: 3px;
  background: var(--soft);
  color: var(--brand-dark);
}
.dialog-btn { border-radius: 3px; }
.dialog-back {
  border-color: var(--line);
  color: var(--ink);
}
.dialog-back:hover { background: var(--soft); }
.dialog-confirm {
  border-color: var(--brand);
  background: var(--brand);
  color: var(--paper);
}
.dialog-confirm:hover {
  border-color: var(--brand-dark);
  background: var(--brand-dark);
}
.toast-note {
  border-radius: 3px;
  background: var(--brand-dark);
  color: var(--paper);
}

/* Compact tablet: preserve all six columns and let content determine height. */
@media (min-width: 768px) and (max-width: 991.98px) {
  .class-row { min-height: 56px; height: auto; }
  .class-name, .trainer { min-width: 0; }
}

/* The general two-column mobile grid remains untouched. Long class names
 * wrap within their cell rather than colliding with adjacent rows. */
@media (max-width: 767.98px) {
  .schedule { border-radius: 4px; }
  .class-row {
    height: auto;
    min-height: 98px;
    grid-template-rows: auto auto auto;
  }
  .class-name,
  .trainer { overflow-wrap: anywhere; }
  .booking-dialog { border-radius: 5px; }
  .surface { border-radius: 5px; }
}