:root{
  /* =========================
     PRO CHARCOAL DARK (Option 2)
     (not pure black - more premium, less tiring)
     ========================= */

  /* Backgrounds */
  --bg: #0B1220;        /* deep navy */
  --panel: #0F172A;     /* card surface */
  --panel-2: #0B1426;   /* inner surface (timeline) */

  /* Text */
  --text: #E5E7EB;      /* soft white */
  --muted: #9CA3AF;     /* muted gray */

  /* Accents */
  --gold: #D4AF37;
  --info: #60A5FA;
  --danger: #FB7185;
  --ok: #34D399;

  /* Timeline Specs (DO NOT CHANGE UX) */
  --pxPerMin: 2.4px;
  --rowHeight: calc(30 * var(--pxPerMin)); /* 30min * pxPerMin = 72px (keeps alignment) */
  --headerH: 44px;

  /* UI */
  --tap: 44px;          /* tap targets */
  --radius: 14px;
  --border: rgba(255,255,255,.08);
  --border-2: rgba(255,255,255,.12);
  --shadow: 0 10px 30px rgba(0,0,0,.40);
  --shadow-soft: 0 8px 18px rgba(0,0,0,.30);
  --focus: rgba(212,175,55,.55);

  /* Calmer grid */
  --grid: rgba(255,255,255,.07);
  --grid-strong: rgba(255,255,255,.10);
}

*{ box-sizing: border-box; }
html,body{ height: 100%; }

/* smoother */
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: radial-gradient(1200px 700px at 30% -10%, rgba(96,165,250,.10), transparent 55%),
              radial-gradient(900px 600px at 110% 10%, rgba(212,175,55,.08), transparent 55%),
              linear-gradient(180deg, #0B1220, #070B12);
  color: var(--text);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
}

/* focus-visible for accessibility */
:focus{ outline: none; }
:focus-visible{
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* =========================
   TOPBAR
   ========================= */
.topbar{
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(15,23,42,.78);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  padding: 12px 14px;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap; /* better mobile wrap */
}

.brand{ display:flex; align-items:center; gap:10px; }

.logo{
  width: 38px; height: 38px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--gold), #8D6F19);
  color:#0B1220;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 900;
  box-shadow: 0 10px 22px rgba(212,175,55,.20);
}

.title{ font-weight: 900; letter-spacing: .2px; }
.subtitle{ font-size: 12px; color: var(--muted); margin-top:2px; }

.topbar-actions{
  display:flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* =========================
   LAYOUT
   ========================= */
.container{
  padding: 14px;
  display: grid;
  gap: 14px;
  max-width: 980px;
  margin: 0 auto;
}

.card{
  background: rgba(15,23,42,.92);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.card-header{
  padding: 12px 12px 8px;
  display:flex;
  align-items:flex-start;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--border);
}

.card-header h2{
  margin:0;
  font-size: 16px;
  letter-spacing: .2px;
}

.filters{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* =========================
   FORMS
   ========================= */
.field label{
  display:block;
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 4px;
}

.field input,
.field select,
.field textarea{
  width: 100%;
  min-height: var(--tap);
  background: rgba(11,20,38,.92);
  color: var(--text);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 12px;
  padding: 10px 12px;
  outline: none;
}

/* Dropdown options styling */
.field select option {
  background: #0b1426;
  color: #E5E7EB;
}

.field select option:checked {
  background: rgba(212, 175, 55, 0.25);
  color: #E5E7EB;
}

.field textarea{ min-height: 84px; resize: vertical; }

.field input:focus,
.field select:focus,
.field textarea:focus{
  border-color: var(--focus);
  box-shadow: 0 0 0 3px rgba(212,175,55,.16);
}

.inline{ display:flex; gap:8px; align-items:center; }

/* Buttons: tap targets */
.btn{
  border: 0;
  border-radius: 12px;
  padding: 10px 12px;
  min-height: var(--tap);
  cursor: pointer;
  font-weight: 750;
  transition: transform 0.08s cubic-bezier(0.16, 1, 0.3, 1), 
              opacity 0.22s ease,
              box-shadow 0.25s ease,
              filter 0.22s ease,
              background 0.2s ease;
  touch-action: manipulation;
  position: relative;
  overflow: hidden;
}

.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.btn:hover::before {
  opacity: 0.5;
}

.btn:active {
  transform: scale(0.97);
}

.btn-gold {
  background: linear-gradient(135deg, #d4af37, #c9a227);
  color: #0B1220;
  box-shadow: 0 4px 12px rgba(212, 175, 55, 0.25);
}

.btn-gold:hover {
  box-shadow: 0 8px 24px rgba(212, 175, 55, 0.35);
  transform: translateY(-2px);
}

.btn-ghost {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.btn-ghost:hover {
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 4px 16px rgba(255, 255, 255, 0.1);
  transform: translateY(-1px);
}

.btn-danger {
  background: linear-gradient(135deg, #fb7185, #f43f5e);
  color: #0B1220;
  box-shadow: 0 4px 12px rgba(251, 113, 133, 0.25);
}

.btn-danger:hover {
  box-shadow: 0 8px 24px rgba(251, 113, 133, 0.35);
  transform: translateY(-2px);
}

.btn-ok {
  background: linear-gradient(135deg, #34d399, #10b981);
  color: #052e16;
  box-shadow: 0 4px 12px rgba(52, 211, 153, 0.25);
}

.btn-ok:hover {
  box-shadow: 0 8px 24px rgba(52, 211, 153, 0.35);
  transform: translateY(-2px);
}

/* Booking form */
.booking-form{ padding: 12px; }

.form-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.form-row{
  margin-top: 10px;
  display:flex;
  flex-direction: column;
  gap: 10px; /* less dense */
}

.checkbox{
  display:flex;
  gap: 10px;
  align-items:center;
  font-size: 12px;
  color: var(--muted);
}
.checkbox input{ transform: scale(1.1); }

.form-submit{
  margin-top: 12px;
  display:flex;
  justify-content:flex-end;
}

.form-msg{
  margin-top: 10px;
  font-size: 12px;
  color: var(--muted);
  min-height: 18px;
}
.form-msg.ok{ color: var(--ok); }
.form-msg.err{ color: var(--danger); }

/* =========================
   CALENDAR
   ========================= */
.calendar-nav{ display:flex; align-items:center; gap:8px; }

.month-label{
  min-width: 140px;
  text-align:center;
  color: var(--muted);
  font-weight: 750;
}

.calendar{ padding: 10px; }

.calendar-grid{
  display:grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
}

.cal-head{
  font-size: 11px;
  color: var(--muted);
  text-align:center;
  padding: 6px 0;
}

.cal-cell{
  background: rgba(11,20,38,.65);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  min-height: 44px;
  padding: 8px;
  position: relative;
  cursor:pointer;
  transition: transform .06s ease, border-color .2s ease;
}

.cal-cell:active{ transform: scale(.99); }
.cal-cell:hover{ border-color: rgba(255,255,255,.12); }

.cal-cell.muted{ opacity: .35; }
.cal-cell.selected{ outline: 2px solid rgba(212,175,55,.55); outline-offset: 2px; }

.cal-day{ font-weight: 850; font-size: 13px; }

.dot{
  width: 7px; height:7px;
  border-radius: 50%;
  background: var(--info);
  position:absolute;
  bottom: 8px; right: 9px;
}

/* =========================
   TIMELINE
   ========================= */
.timeline, #timeline{
  position: relative;
  overflow:auto;
  max-height: 70vh;
  background: rgba(11,20,38,.55);
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  overscroll-behavior: contain;
}

.timeline-inner{
  position: relative;
  display:flex;
  min-width: 680px;
}

.time-col{
  width: 74px;
  border-right: 1px solid rgba(255,255,255,.10);
  background: rgba(7,12,20,.45);
}

.time-header{
  height: var(--headerH);
  position: sticky;
  top: 0;
  z-index: 3;
  background: rgba(15,23,42,.80);
  border-bottom: 1px solid rgba(255,255,255,.10);
}

.time-slot{
  height: var(--rowHeight);
  border-bottom: 1px dashed rgba(255,255,255,.07); /* calmer */
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding-top: 8px;
  font-size: 11px;
  color: var(--muted);
}

.emp-col{
  flex: 1;
  min-width: 180px;
  border-right: 1px solid rgba(255,255,255,.08);
  position: relative;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,0) 0,
      rgba(255,255,255,0) calc(60 * var(--pxPerMin) - 1px),
      var(--grid-strong) calc(60 * var(--pxPerMin) - 1px),
      var(--grid-strong) calc(60 * var(--pxPerMin))
    );
}

.emp-header{
  position: sticky;
  top: 0;
  z-index: 2;
  background: rgba(15,23,42,.80);
  border-bottom: 1px solid rgba(255,255,255,.10);
  padding: 10px;
  font-weight: 900;
  height: var(--headerH);
  display:flex;
  align-items:center;
}

.emp-grid{ position: relative; }

.emp-grid .grid-slot{
  height: var(--rowHeight);
  border-bottom: 1px dashed rgba(255,255,255,.07); /* calmer */
}

/* Appointment blocks */
.appointment{
  position:absolute;
  left: 10px;
  right: 10px;
  border-radius: 14px;
  padding: 10px 10px 8px;
  color: #0B1220; /* keep readable on employee colors */
  box-shadow: 0 10px 18px rgba(0,0,0,.35);
  overflow:hidden;
  border: 1px solid rgba(0,0,0,.18);
  transition: height .12s ease;
}

.appointment.conflict{ outline: 3px solid rgba(251, 113, 133, .70); }

/* Gap: subtle premium hatch (stays neutral, readable on dark) */
.appointment.gap{
  background: repeating-linear-gradient(
    45deg,
    rgba(229,231,235,.10),
    rgba(229,231,235,.10) 8px,
    rgba(229,231,235,.05) 8px,
    rgba(229,231,235,.05) 16px
  ) !important;
  border: 1px dashed rgba(229,231,235,.25);
  color: var(--text);
  box-shadow: 0 10px 18px rgba(0,0,0,.30);
}

.appointment .row1{
  display:flex;
  justify-content: space-between;
  gap: 8px;
  align-items: baseline;
}

.appointment .name{ font-weight: 950; font-size: 13px; }
.appointment .time{ font-size: 11px; opacity: .86; font-weight: 800; }

.appointment .row2{
  margin-top: 6px;
  display:flex;
  gap: 8px;
  flex-wrap: wrap;
}

.tag{
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.45);
  font-weight: 800;
}

.app-actions{
  margin-top: 8px;
  display:flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.app-actions button{
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 10px;
}

.hint{
  padding: 10px 12px 12px;
  color: var(--muted);
  font-size: 12px;
  border-top: 1px solid rgba(255,255,255,.08);
}

/* =========================
   MODAL (Premium Glassmorphism)
   ========================= */
.modal{
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
  z-index: 100;
  animation: modalFadeIn 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes modalFadeIn {
  from {
    opacity: 0;
    backdrop-filter: blur(0px);
  }
  to {
    opacity: 1;
    backdrop-filter: blur(12px);
  }
}

@keyframes modalContentIn {
  from {
    opacity: 0;
    transform: scale(0.985) translateY(-7px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.modal.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  animation: none;
}

.modal-content {
  width: 100%;
  max-width: 780px;
  /* Flex column so footer is always visible at bottom of modal */
  display: flex;
  flex-direction: column;
  max-height: calc(100dvh - 28px); /* 14px padding × 2 */
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(11, 20, 38, 0.98));
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 24px;
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.55),
    0 0 1px rgba(255, 255, 255, 0.1) inset;
  overflow: hidden;
  backdrop-filter: blur(20px);
}

/* v411.87.1.91 — replay the content entrance on EVERY modal open, including
   modal→modal swaps (openModal removes+reflows+re-adds .is-open each time), so
   the wizard → 3-questions → onboarding → menu transitions FADE smoothly instead
   of snapping. The backdrop (.modal) keeps its own one-time fade and is NOT
   re-flashed between consecutive modals. CSS only — no logic/sync touched. */
.modal.is-open .modal-content {
  animation: modalContentIn 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

/* v411.87.1.92 — Onboarding action buttons: equal width + uniform shape so
   ◀ Πίσω / Επόμενο ▶ / Μη το ξαναδείξεις / Τέλος ✅ all match instead of being
   content-sized. Scoped to .ob-actions only — no global .btn change. */
.ob-actions {
  margin-top: 16px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
}
.ob-actions .btn {
  flex: 1 1 0;
  min-width: 132px;
  max-width: 190px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  white-space: nowrap;
  padding: 10px 14px;
}
@media (max-width: 420px) {
  .ob-actions .btn {
    flex-basis: 100%;
    max-width: none;
  }
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(90deg, rgba(212, 175, 55, 0.08), transparent);
}

.modal-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.3px;
  color: var(--text);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.modal-body {
  padding: 20px;
  color: var(--text);
  flex: 1 1 auto;   /* grows to fill space between header and footer */
  min-height: 0;    /* required for flex + overflow to work */
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  line-height: 1.5;
}

.modal-body::-webkit-scrollbar {
  width: 8px;
}

.modal-body::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 10px;
}

.modal-body::-webkit-scrollbar-thumb {
  background: rgba(212, 175, 55, 0.3);
  border-radius: 10px;
  transition: background 0.2s;
}

.modal-body::-webkit-scrollbar-thumb:hover {
  background: rgba(212, 175, 55, 0.5);
}

.modal-footer {
  padding: 16px 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
  flex-shrink: 0;   /* never shrinks — always visible */
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.2);
}

/* Premium modal close button */
#closeAppModal {
  background: rgba(251, 113, 133, 0.12) !important;
  color: var(--danger) !important;
  border: 1px solid rgba(251, 113, 133, 0.25) !important;
  width: 36px;
  height: 36px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  border-radius: 10px;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

#closeAppModal:hover {
  background: rgba(251, 113, 133, 0.25) !important;
  border-color: rgba(251, 113, 133, 0.4) !important;
  box-shadow: 0 4px 12px rgba(251, 113, 133, 0.2) !important;
  transform: rotate(90deg) scale(1.1);
}

/* Modal form fields with enhanced premium feel */
.modal-body .field input,
.modal-body .field select,
.modal-body .field textarea {
  background: rgba(11, 20, 38, 0.8);
  color: #E5E7EB;
  border: 1px solid rgba(212, 175, 55, 0.2);
  transition: all 0.25s ease;
}

.modal-body .field input:focus,
.modal-body .field select:focus,
.modal-body .field textarea:focus {
  background: rgba(11, 20, 38, 0.95);
  border-color: rgba(212, 175, 55, 0.5);
  box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.16);
}

/* Modal dropdown options */
.modal-body .field select option {
  background: #0b1426;
  color: #E5E7EB;
}

.modal-body .field select option:checked {
  background: rgba(212, 175, 55, 0.35);
  color: #E5E7EB;
}

/* Modal buttons with premium styling */
.modal-footer .btn {
  border-radius: 10px;
  font-weight: 700;
  letter-spacing: -0.2px;
}

.modal-footer .btn-gold {
  background: linear-gradient(135deg, #d4af37, #c9a227);
  box-shadow: 0 6px 16px rgba(212, 175, 55, 0.3);
}

.modal-footer .btn-gold:hover {
  box-shadow: 0 10px 28px rgba(212, 175, 55, 0.42);
}

.modal-footer .btn-ghost {
  background: rgba(255, 255, 255, 0.06);
}

.modal-footer .btn-ghost:hover {
  background: rgba(255, 255, 255, 0.12);
}

/* Smooth modal transitions for all elements */
.modal * {
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ============================================================
   PREMIUM MODAL BODY POLISH (2026-05-03)
   Lifts the *content* inside modals (the menu items, dialog
   buttons, list rows) to match the polished pricing modal vibe.
   Generic enough to apply to every modal that uses .modal-body
   without breaking existing layouts.
   ============================================================ */

/* Body buttons (menu items, action lists) — give them a subtle
   "tactile" hover lift, gold accent on the left edge on hover. */
.modal-body > button.btn,
.modal-body > .dash-section > button.btn,
.modal-body button.btn:not(.btn-gold):not(.btn-danger):not(.btn-sm) {
  position: relative;
  width: 100%;
  text-align: left;
  padding: 14px 18px;
  margin: 0;
  border-radius: 12px;
  font-weight: 500;
  letter-spacing: -0.2px;
  background: linear-gradient(180deg, rgba(255,255,255,.035) 0%, rgba(255,255,255,.012) 100%);
  border: 1px solid rgba(255,255,255,.08);
  color: var(--text);
  overflow: hidden;
}

.modal-body > button.btn:hover,
.modal-body > .dash-section > button.btn:hover {
  border-color: rgba(212,175,55,.35);
  background: linear-gradient(180deg, rgba(212,175,55,.06) 0%, rgba(212,175,55,.015) 100%);
  transform: translateX(2px);
  box-shadow: 0 6px 16px rgba(0,0,0,.25);
}

.modal-body > button.btn:active,
.modal-body > .dash-section > button.btn:active {
  transform: translateX(2px) scale(.99);
}

/* When two buttons are stacked, give a tiny gap between them. */
.modal-body > button.btn + button.btn,
.modal-body > .dash-section > button.btn + button.btn {
  margin-top: 6px;
}

/* Section dividers in modal body — premium looking thin gradient lines. */
.modal-body hr,
.modal-body .divider {
  border: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.10), transparent);
  margin: 14px 0;
}

/* Pill-style row of quick actions (e.g. "Quick actions for owner role"). */
.modal-body .pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* Generic info/lead text inside modals — readable, slightly muted. */
.modal-body .meta,
.modal-body .description {
  color: #a3acba;
  line-height: 1.55;
  font-size: 0.93em;
}

/* Premium primary CTA inside modal body — gold gradient, glow on hover. */
.modal-body .btn-gold,
.modal-body button.btn-gold {
  background: linear-gradient(135deg, #e6c34a, #b8941f);
  color: #0b1426;
  font-weight: 700;
  border: 0;
  box-shadow: 0 8px 22px rgba(212,175,55,.30);
}
.modal-body .btn-gold:hover,
.modal-body button.btn-gold:hover {
  filter: brightness(1.07);
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(212,175,55,.45);
}

/* Inline label before pill-row of quick actions */
.modal-body .pill-row-label {
  color: #8a93a6;
  font-size: 0.78em;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 6px;
}

.modal h3, .modal h4 {
  letter-spacing: -0.4px;
}

.modal .meta {
  color: rgba(229, 231, 235, 0.72);
  font-size: 13px;
}


/* Smart fill items */
.smart-item{
  padding: 10px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(11,20,38,.55);
  margin-bottom: 10px;
}

.smart-item .top{
  display:flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}
.smart-item .title{ font-weight: 900; }
.smart-item .meta{
  margin-top: 6px;
  color: var(--muted);
  font-size: 12px;
}
.smart-item .actions{
  margin-top: 10px;
  display:flex;
  gap: 8px;
  flex-wrap: wrap;
}
.smart-item .actions .btn{
  min-height: var(--tap);
}

/* Clients modal */
.modal-toolbar{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items:center;
  margin-bottom: 10px;
}

.modal-toolbar input{
  flex: 1 1 220px;
  min-height: var(--tap);
  background: rgba(11,20,38,.92);
  color: var(--text);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 12px;
  padding: 10px 12px;
}

.client-card{
  background: rgba(11,20,38,.60);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  padding: 12px;
  margin-bottom: 10px;
}

.client-top{
  display:flex;
  justify-content: space-between;
  gap: 10px;
  align-items:flex-start;
  flex-wrap: wrap;
}

.client-ident{ flex: 1 1 240px; }

.client-ident .editable{
  padding: 10px 12px;
  border-radius: 12px;
  outline: none;
  min-height: var(--tap);
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(11,20,38,.50);
}

.client-ident .editable:focus{
  background: rgba(212,175,55,.14);
  border: 1px solid rgba(212,175,55,.35);
}

.client-stats{
  display:flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content:flex-end;
}

.badge{
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.10);
  color: var(--text);
}
.badge.ok{ border-color: rgba(52,211,153,.45); }
.badge.bad{ border-color: rgba(251,113,133,.45); }

.client-actions{
  margin-top: 10px;
  display:flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content:flex-end;
}
.client-actions .btn{
  flex: 1 1 160px;
}

.flash-ok{ outline: 3px solid rgba(52,211,153,.65); }
.flash-bad{ outline: 3px solid rgba(251,113,133,.65); }

/* Lists for search/history */
.list{ display:grid; gap: 10px; }

.list-item{
  background: rgba(11,20,38,.55);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  padding: 12px;
}

.list-item .row{
  display:flex;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

.meta{ color: var(--muted); font-size: 12px; margin-top: 6px; }

/* smooth scroll for jump */
html{ scroll-behavior: smooth; }

/* keep sections visible under sticky bars */
#cardBooking, #cardCalendar, #cardTimeline{
  scroll-margin-top: 120px;
}

/* Jump bar (only if present in HTML) */
.mobile-sections{ display: none; }

/* Viber reminder button */
.btn-viber{
  font-weight: 900;
  background: #7360f2;
  color: #0B1220;
  border: 1px solid rgba(255,255,255,.10);
}
.btn-viber:hover{ opacity:.95; }

.viber-ico{
  display:inline-flex;
  width: 18px;
  height: 18px;
  border-radius: 6px;
  align-items:center;
  justify-content:center;
  background: rgba(0,0,0,.15);
  font-weight: 900;
  margin-right: 6px;
}

/* Appointment expand */
.appointment.expanded{ z-index: 80; }
.appointment .app-extra{ display:none; margin-top: 8px; }
.appointment.expanded .app-extra{ display:block; }
.appointment .actions-sheet{ display:grid; gap:10px; }
.appointment .actions-sheet .btn{ width:100%; }
.app-actions.minimal button[data-act="delete"]{ margin-left:auto; }

/* Expanded appointment: status + icons side-by-side */
.appointment .status-line{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.appointment .inline-actions{
  display:flex;
  gap: 8px;
  align-items:center;
}

/* IMPORTANT: make expanded action icons (✅ ❌ ✏) true tap targets */
.appointment.expanded .inline-actions .btn-sm{
  min-width: var(--tap);
  min-height: var(--tap);
  padding: 0;
  border-radius: 12px;
}

/* =========================
   RESPONSIVE
   ========================= */
@media (min-width: 720px){
  .form-grid{ grid-template-columns: 1.1fr 1fr 1fr; }
}

@media (min-width: 900px){
  .container{
    grid-template-columns: 1.1fr 1.9fr;
    align-items:start;
  }
  .container > .card:nth-child(3){ grid-column: 1 / -1; }
}

@media (max-width: 900px){
  /* topbar better wrap */
  .topbar{
    align-items: flex-start;
  }

  .topbar-actions{
    width: 100%;
    justify-content: flex-start;
    gap: 8px;
  }

  .topbar-actions .btn{
    flex: 1 1 calc(50% - 8px);
    min-height: var(--tap);
    padding: 10px 12px;
  }

  .container{
    padding: 12px;
    gap: 12px;
  }

  .booking-form{ padding: 12px; }

  .field input, .field select, .field textarea{
    padding: 11px 12px;
    border-radius: 12px;
  }

  .checkbox{ font-size: 13px; }
  .checkbox input{ transform: scale(1.2); }

  /* Calendar/timeline: better scroll */
  .calendar, .timeline, #timeline{
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Timeline narrower */
  .timeline-inner{ min-width: 560px; }
  .emp-col{ min-width: 160px; }

  /* Jump bar sticky below topbar */
  .mobile-sections{
    display: flex;
    gap: 8px;
    padding: 10px 12px;
    position: sticky;
    top: 64px;
    z-index: 55;
    background: rgba(15,23,42,.78);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255,255,255,.10);
  }

  .mobile-sections .btn{
    flex: 1 1 33%;
    min-height: var(--tap);
    padding: 10px 10px;
    white-space: nowrap;
  }
}

@media (max-width: 480px){
  body{ font-size: 14px; }

  .topbar-actions .btn{
    flex: 1 1 100%;
  }

  /* DO NOT change --rowHeight here (keeps timeline alignment) */
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  .btn{ transition: none; }
}
/* =========================
   MOBILE POLISH PACK
   (append at end of style.css)
   ========================= */

/* 1) iOS input zoom prevention + calmer spacing */
@media (max-width: 520px) {
  /* Prevent iOS Safari zoom on focus (needs >=16px) */
  .field input,
  .field select,
  .field textarea,
  .modal-toolbar input {
    font-size: 16px;
  }

  /* Slightly tighter container/cards without feeling cramped */
  .container { padding: 10px; gap: 10px; }
  .card-header { padding: 10px 10px 6px; }
  .booking-form { padding: 10px; }

  /* Calendar: a bit tighter */
  .calendar-grid { gap: 6px; }
  .cal-cell { min-height: 42px; padding: 7px; }
  .cal-day { font-size: 13px; }

  /* Timeline height on phones: more usable */
  .timeline, #timeline { max-height: 62vh; }
}

/* 2) Timeline: horizontal snap per employee column */
@media (max-width: 520px) {
  .timeline, #timeline {
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
  }

  /* Time column stays as reference; snap the employee columns */
  .emp-col {
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  /* Slightly narrower for small screens */
  .timeline-inner { min-width: 520px; }
  .time-col { width: 64px; }
  .emp-col { min-width: 150px; }
}

/* 3) Appointment blocks: slightly denser but still readable */
@media (max-width: 520px) {
  .appointment {
    left: 8px;
    right: 8px;
    padding: 8px 8px 6px;
    border-radius: 13px;
  }
  .appointment .name { font-size: 12px; }
  .appointment .time { font-size: 10.5px; }
  .app-actions { gap: 6px; }

  /* Keep action icons easy to tap */
  .btn-sm { min-height: 36px; }
}

/* 4) Modal becomes full-screen on mobile */
@media (max-width: 560px) {
  .modal { padding: 0; align-items: stretch; }
  .modal-content {
    max-width: none;
    width: 100%;
    max-height: 100dvh;
    border-radius: 0;
    /* flex column already set on .modal-content — footer stays at bottom */
  }
  /* body fills all remaining space between header and sticky footer */
  .modal-body { max-height: none; }
  /* footer full-width buttons on mobile */
  .modal-footer { justify-content: stretch; }
  .modal-footer .btn { flex: 1; justify-content: center; }
}

/* 5) Safer spacing for notches (iOS) */
:root {
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
}

@media (max-width: 560px) {
  .topbar { padding-top: calc(12px + var(--safe-t)); }
  .mobile-sections { padding-bottom: calc(10px + var(--safe-b)); }
}

/* Utility */
.mobile-only{ display:none; }


/* =========================
   MOBILE: One employee per screen (swipe left/right)
   Goal: show ONE employee column at a time + sticky time column.
   ========================= */
@media (max-width: 560px){
  :root{ --timeColW: 64px; }

  /* Hint line shown only on mobile */
  .mobile-only{ display:block; }

  /* Timeline scroll behaves like pages */
  .timeline, #timeline{
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }

  /* Let inner size itself; each employee column becomes a 'page' */
  .timeline-inner{
    min-width: 0 !important;
    width: max-content;
  }

  /* Sticky time column stays visible while swiping */
  .time-col{
    width: var(--timeColW) !important;
    position: sticky;
    left: 0;
    z-index: 6;
    background: rgba(7,12,20,.70);
    backdrop-filter: blur(6px);
  }
  .time-header{
    z-index: 7;
  }

  /* ONE employee per screen: width = viewport minus time column */
  .emp-col{
    flex: 0 0 calc(100vw - var(--timeColW));
    min-width: calc(100vw - var(--timeColW)) !important;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  /* Slightly tighter blocks so content breathes */
  .appointment{ left: 8px; right: 8px; }
}


/* =========================
   MOBILE: Employee indicator line
   ========================= */
.emp-ind-line{ display:inline-flex; align-items:baseline; gap:6px; }
.emp-ind-count{ color: var(--muted); font-weight: 700; margin-left: 2px; }
.emp-ind-hint{ color: var(--muted); }

@media (max-width: 560px){
  #empSwipeHint{
    display:flex;
    align-items:center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 10px;
    margin: 8px 10px 0;
    border-radius: 12px;
    background: rgba(11,20,38,.55);
    border: 1px solid rgba(255,255,255,.08);
  }
  #empSwipeHint strong{ color: var(--text); }
}


/* =========================
   MOBILE: Frozen employee name bar (sticky)
   - Keeps the selected employee name always visible while scrolling.
   ========================= */
@media (max-width: 560px){
  #empSwipeHint{
    position: sticky;
    top: calc(64px + 52px + var(--safe-t)); /* topbar + jumpbar + safe area */
    z-index: 58;
    backdrop-filter: blur(10px);
    background: rgba(11,20,38,.72);
  }
  #empSwipeHint strong{
    font-size: 16px;
    font-weight: 950;
    letter-spacing: .2px;
  }
}

/* Subtle "changed" flash */
@keyframes empFlash {
  0% { box-shadow: 0 0 0 0 rgba(212,175,55,.0); border-color: rgba(255,255,255,.08); }
  40% { box-shadow: 0 0 0 4px rgba(212,175,55,.20); border-color: rgba(212,175,55,.35); }
  100% { box-shadow: 0 0 0 0 rgba(212,175,55,.0); border-color: rgba(255,255,255,.08); }
}
.emp-flash{ animation: empFlash .45s ease; }


/* Version badge (debug) */
.version-badge{
  position: fixed;
  right: 8px;
  bottom: 8px;
  z-index: 90;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .2px;
  color: rgba(255,255,255,.55);
  background: rgba(11,20,38,.55);
  border: 1px solid rgba(255,255,255,.06);
  backdrop-filter: blur(8px);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  opacity: .7;
  transition: opacity .15s ease;
}
.version-badge:hover{ opacity: 1; }
.version-badge .muted{ color: var(--muted); font-weight: 600; }
@media (max-width: 640px){
  .version-badge{
    right: 6px;
    bottom: 6px;
    font-size: 9px;
    padding: 2px 6px;
    opacity: .45;
  }
}


/* DASHBOARD UI */
.dash-section{
  background: rgba(11,20,38,.40);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  padding: 12px;
}
.dash-section h4{ margin:0 0 10px; font-size: 14px; }
.dash-cards{ display:grid; gap:10px; grid-template-columns: repeat(2, minmax(0,1fr)); }
.dash-card{
  background: rgba(11,20,38,.55);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  padding: 12px;
}
.kpi-label{ color: var(--muted); font-size: 12px; }
.kpi-value{ font-size: 20px; font-weight: 950; letter-spacing: .2px; margin-top: 4px; }
.kpi-sub{ margin-top: 6px; color: var(--muted); font-size: 12px; }

.dash-row{ display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end; justify-content: space-between; }
.dash-chips{ display:flex; gap:8px; flex-wrap:wrap; }
.dash-chip{ min-height: 36px; padding: 7px 10px; border-radius: 999px; font-size: 12px; }
.dash-chip.active{ border-color: rgba(212,175,55,.45); box-shadow: 0 0 0 3px rgba(212,175,55,.14); }
.dash-mini{ display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end; }
.dash-mini .field{ min-width: 150px; }

.dash-emp-row{
  display:flex;
  gap:10px;
  justify-content: space-between;
  align-items:center;
  padding: 10px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(11,20,38,.55);
  margin-bottom: 8px;
}
.dash-emp-name{ font-weight: 950; }
.dash-emp-meta{ color: var(--muted); font-size: 12px; margin-top: 2px; }

.pin-row{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.pin-input{ width: 220px; letter-spacing: .35em; font-weight: 950; text-align:center; font-size: 18px; }

@media (min-width: 720px){
  .dash-cards{ grid-template-columns: repeat(5, minmax(0,1fr)); }
}


/* =========================
   HAMBURGER MENU (mobile)
   ========================= */
.topbar-actions-wrap{
  display:flex;
  align-items:center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 100%;
}
.btn-hamburger{
  min-width: var(--tap);
  font-size: 18px;
  line-height: 1;
  padding: 10px 12px;
}
@media (min-width: 901px){
  .btn-hamburger{ display:none; }
  .topbar-actions{ display:flex; }
}
@media (max-width: 900px){
  .topbar-actions{ display:none; }
  .btn-hamburger{ display:inline-flex; }
}


/* =========================
   FADE PACK (A + B + Γ)
   - A: timeline fade on employee change
   - B/Γ: modal fade in/out (dashboard + all modals)
   ========================= */

:root{
  --fadeMs: 180ms;
  --fadeMsFast: 150ms;
  --fadeEase: cubic-bezier(.2,.8,.2,1);
}

/* A) Timeline micro fade */
#timeline.fade-target{
  transition: opacity var(--fadeMsFast) var(--fadeEase),
              transform var(--fadeMsFast) var(--fadeEase);
  will-change: opacity, transform;
}
#timeline.is-fading{
  opacity: .18;
  transform: translateY(2px);
}

/* B + Γ) Modal fade */
.modal{
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--fadeMs) var(--fadeEase),
              visibility var(--fadeMs) linear;
}
.modal.is-open{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.modal-content{
  transform: translateY(10px) scale(.98);
  opacity: .98;
  transition: transform var(--fadeMs) var(--fadeEase),
              opacity var(--fadeMs) var(--fadeEase);
  will-change: transform, opacity;
}
.modal.is-open .modal-content{
  transform: translateY(0) scale(1);
  opacity: 1;
}
@media (prefers-reduced-motion: reduce){
  #timeline.fade-target,
  .modal,
  .modal-content{
    transition: none !important;
  }
}


/* =========================
   DASHBOARD V2
   ========================= */
.dash-head{
  display:flex;
  align-items:flex-start;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.dash-meta-line{
  color: var(--muted);
  font-size: 12px;
  margin-top: 4px;
}
.dash-kpis{
  display:grid;
  gap:10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 720px){
  .dash-kpis{ grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
.dash-bar-row{
  display:grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
.dash-bar{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 999px;
  height: 12px;
  overflow:hidden;
}
.dash-bar > span{
  display:block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, rgba(212,175,55,.95), rgba(96,165,250,.95));
}
.dash-rowline{
  display:flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.dash-small{
  font-size: 12px;
  color: var(--muted);
}
.dash-table{
  display:grid;
  gap: 8px;
}
.dash-pill{
  display:inline-flex;
  align-items:center;
  gap: 6px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 12px;
}


/* Mobile: version badge safe placement */
@media (max-width: 560px){
  .version-badge{
    bottom: calc(10px + var(--safe-b));
    right: 10px;
    font-size: 12px;
    opacity: .95;
  }
}


/* =========================
   MONTH RIBBON (full month quick view) + ZOOM + PINCH
   ========================= */
:root{ --mrScale: 1; }
.month-ribbon-wrap{
  display:flex;
  align-items:stretch;
  gap:8px;
  padding: 10px 12px 0;
}
.month-ribbon{
  --mrScaleLocal: var(--mrScale);
  flex: 1 1 auto;
  display:flex;
  gap: 8px;
  overflow-x:auto;
  padding-bottom: 10px;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  touch-action: pan-x;
}
.month-ribbon::-webkit-scrollbar{ height: 8px; }
.month-ribbon::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.12); border-radius: 999px; }
.mr-day{
  flex: 0 0 calc(260px * var(--mrScaleLocal));
  scroll-snap-align: start;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(11,20,38,.50);
  border-radius: 14px;
  padding: 10px;
  text-align:left;
  color: var(--text);
}
.mr-day:hover{ border-color: rgba(255,255,255,.16); }
.mr-day.selected{
  border-color: rgba(212,175,55,.45);
  box-shadow: 0 0 0 3px rgba(212,175,55,.14);
}
.mr-dow{ font-weight: 950; letter-spacing: .2px; font-size: calc(14px * var(--mrScaleLocal)); }
.mr-date{ color: var(--muted); font-size: calc(12px * var(--mrScaleLocal)); margin-top: 2px; }
.mr-lines{ margin-top: 8px; font-size: calc(12px * var(--mrScaleLocal)); line-height: 1.35; }
.mr-lines .line{ white-space: nowrap; overflow:hidden; text-overflow: ellipsis; }
.mr-more{ color: var(--muted); font-size: calc(12px * var(--mrScaleLocal)); margin-top: 2px; }
.mr-meta{ margin-top: 8px; display:flex; gap:6px; flex-wrap:wrap; }
.mr-pill{
  font-size: calc(12px * var(--mrScaleLocal));
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
}
.mr-pill.ok{ border-color: rgba(52,211,153,.35); }
.mr-pill.bad{ border-color: rgba(251,113,133,.35); }
.mr-pill.gap{ border-color: rgba(96,165,250,.35); }
@media (max-width: 560px){
  .month-ribbon-wrap{ padding: 10px 10px 0; }
  .mr-day{ flex-basis: calc(78vw * var(--mrScaleLocal)); }
}


/* Utility */
.u-hide{ display:none !important; }
/* =========================
   MONTHLY SHEET (Excel-style)
   ========================= */
.view-toggles{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; justify-content:flex-end; }
.view-toggles .btn-sm{ min-height: 36px; }
.view-toggles .btn-sm.active{ border-color: rgba(212,175,55,.45); box-shadow: 0 0 0 3px rgba(212,175,55,.14); }

.sheet-wrap{ padding: 10px 10px 12px; border-top: 1px solid rgba(255,255,255,.08); }
.sheet-topbar{ display:flex; align-items:center; justify-content: space-between; gap:10px; flex-wrap:wrap; }
.sheet-month{ font-weight: 950; letter-spacing:.2px; color: var(--text); }

.sheet-tabs{ margin-top:10px; display:flex; gap:8px; flex-wrap:wrap; }
.sheet-tab{ min-height: 36px; padding: 7px 10px; border-radius: 999px; font-size: 12px; }
.sheet-tab.active{ border-color: rgba(212,175,55,.45); box-shadow: 0 0 0 3px rgba(212,175,55,.14); }

.month-sheet{
  margin-top: 10px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  overflow: auto;
  max-height: 70vh;
  background: rgba(11,20,38,.55);
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.sheet-grid{ position: relative; display: grid; gap: 0; width: max-content; }
.sheet-cell{
  border-right: 1px solid rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(255,255,255,.06);
  padding: 6px 8px;
  min-height: 64px;
  min-width: var(--sheetDayW, 240px);
  cursor: pointer;
}
.sheet-cell:hover{ background: rgba(255,255,255,.03); }

.sheet-cell.time{
  position: sticky;
  left: 0;
  z-index: 4;
  background: rgba(7,12,20,.70);
  min-width: 72px;
  max-width: 72px;
  width: 72px;
  text-align:center;
  font-size: 11px;
  color: var(--muted);
  cursor: default;
}
.sheet-cell.head{
  position: sticky;
  top: 0;
  z-index: 5;
  background: rgba(15,23,42,.90);
  min-height: 56px;
  cursor: default;
}
.sheet-cell.corner{
  position: sticky;
  left: 0;
  top: 0;
  z-index: 6;
  background: rgba(15,23,42,.95);
  min-width: 72px;
  width: 72px;
  cursor: default;
  text-align:center;
  font-weight: 900;
  color: var(--muted);
}

.sheet-head-dow{ font-weight: 950; font-size: 12px; }
.sheet-head-date{ color: var(--muted); font-size: 12px; margin-top:2px; }

.sheet-lines{ margin-top:2px; display:grid; gap:2px; }
.sheet-line{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12px; }
.sheet-line .empTag{ display:inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.sheet-more{ color: var(--muted); font-size: 12px; margin-top: 2px; }

.sheet-cell.booked{ background: rgba(255,255,255,.02); }
.sheet-cell.done{ background: rgba(52,211,153,.10); }
.sheet-cell.no-show{ background: rgba(251,113,133,.10); }
.sheet-cell.gap{ background: rgba(96,165,250,.10); }

@media (max-width: 560px){
  .month-sheet{ max-height: 64vh; }
  :root{ --sheetDayW: 78vw; }
}


/* =========================
 SHEET-ONLY MODE (2026-02-26.04)
 - Hide Booking/Calendar/Day Timeline UI, show only Monthly Sheet
 ========================= */
body.sheet-only .mobile-sections{ display:none !important; }
body.sheet-only #cardBooking,
body.sheet-only #cardCalendar{ display:none !important; }
body.sheet-only #cardTimeline .view-toggles,
body.sheet-only #cardTimeline .filters,
body.sheet-only .month-ribbon-wrap,
body.sheet-only #timeline,
body.sheet-only #empSwipeHint,
body.sheet-only #cardTimeline .hint{ display:none !important; }
body.sheet-only #monthSheetWrap{ display:block !important; }
body.sheet-only .container{ max-width: 1200px; }
body.sheet-only .month-sheet{ max-height: 78vh; }
@media (max-width: 560px){ body.sheet-only .month-sheet{ max-height: 74vh; } }


/* Sheet: phone under name (bold) */
.sheet-phone{ font-size: 12px; font-weight: 950; color: var(--text); opacity: .95; line-height: 1.15; }

/* HAMBURGER-ONLY (all screens)
 - Keep UI minimal and consistent on mobile/tablet/desktop
 - Everything is accessible via ☰
*/
.btn-hamburger{ display:inline-flex !important; }
.topbar-actions{ display:none !important; }
@media (min-width: 901px){
  .topbar-actions-wrap{ width:auto; justify-content:flex-end; }
}


/* =========================
   CLOSED DAY VISUALS (calendar + month ribbon + timeline banner)
   ========================= */
.cal-cell.closed{
  position: relative;
  background: rgba(212,175,55,.05);
}
.cal-cell.closed::after{
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  background: repeating-linear-gradient(45deg, rgba(212,175,55,.10) 0px, rgba(212,175,55,.10) 10px, rgba(11,20,38,.05) 10px, rgba(11,20,38,.05) 20px);
  opacity:.8;
  border-radius: 12px;
}

.mr-day.closed{
  position: relative;
  background: rgba(212,175,55,.05);
}
.mr-day.closed::after{
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  background: repeating-linear-gradient(45deg, rgba(212,175,55,.10) 0px, rgba(212,175,55,.10) 12px, rgba(11,20,38,.05) 12px, rgba(11,20,38,.05) 24px);
  opacity:.75;
  border-radius: 14px;
}

.closed-banner{
  margin: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(212,175,55,.30);
  background: rgba(212,175,55,.12);
  color: var(--text);
  font-weight: 850;
}

/* =========================
   CLOSED DAYS (visual)
   - Sticky weekday headers stay sticky even for CLOSED days
   - Only lock icon (🔒) next to CLOSED day header
   - Whole CLOSED day column (all hours) in Monthly Sheet: subtle gold hatch
   ========================= */

.lock{
  display:inline-flex;
  margin-left: 6px;
  font-size: .95em;
  opacity: .95;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.35));
}

/* Monthly Sheet: closed day column (head + hour cells)
   IMPORTANT: do NOT set position on .head (it is sticky), only on normal cells. */
.sheet-cell.closed{
  background: rgba(212,175,55,.04);
}
.sheet-cell.closed:not(.head):not(.time):not(.corner){
  position: relative;
}
/* For sticky head cells, position is already sticky; pseudo-element will still work. */
.sheet-cell.closed::after{
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
  background: repeating-linear-gradient(135deg,
    rgba(212,175,55,.12) 0px,
    rgba(212,175,55,.12) 10px,
    rgba(11,20,38,.00) 10px,
    rgba(11,20,38,.00) 24px
  );
  opacity:.55;
}
.sheet-cell.closed > *{
  position: relative;
  z-index: 1;
}

/* Closed banner icon-only (if it appears) */
.closed-banner{
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 18px;
}


/* =========================
   SHEET APPT SPAN BLOCKS (per-employee tab)
   - Duration occupies multiple slots; end is rounded
   ========================= */
.sheet-cell.span-start{
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  border-bottom-color: transparent;
}
.sheet-cell.span-mid{
  border-bottom-color: transparent;
}
.sheet-cell.span-end{
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}
/* =========================
   EMPLOYEE COLOR TINT (ALL TAB)
   - ΜΟΝΟ για Monthly Sheet tab: "Όλοι" + Smart Add Picker rows
   - Mobile-first: λεπτή μπάρα + πολύ απαλό tint
   ========================= */

.emp-tint{
  position: relative;
  border-left: 4px solid var(--empColor, var(--gold));
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--empColor, var(--gold)) 10%, transparent) 0%,
    transparent 72%
  );
}

/* Fallback αν δεν υποστηρίζεται color-mix */
@supports not (background: color-mix(in srgb, red 10%, transparent)){
  .emp-tint{ background: rgba(212,175,55,.08); }
}

/* Wrapper γύρω από κάθε appointment line (μπαίνει μόνο στον "Όλοι" από JS) */
.sheet-appt{
  border-radius: 10px;
  padding: 6px 8px;
  margin-top: 4px;
  border: 1px solid rgba(255,255,255,.08);
}

/* Smart Add Picker row */
.sap-row.emp-tint{
  border-radius: 12px;
}

@media (max-width: 560px){
  .sheet-appt{ padding: 6px 8px; }
}

/* =========================
   PHONE QUICK SUGGEST (Quick Add / Booking)
   - Γράφεις 5 ψηφία και εμφανίζει προτάσεις πελατών
   ========================= */
.phone-field{ position: relative; }
.name-field{ position: relative; }

.phone-suggest{
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  z-index: 200;
  background: rgba(15,23,42,.98);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 14px;
  box-shadow: 0 12px 30px rgba(0,0,0,.45);
  overflow: hidden;
  max-height: 260px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.phone-suggest.hidden{ display:none; }

.phone-suggest .ps-item{
  padding: 10px 12px;
  cursor: pointer;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.phone-suggest .ps-item:last-child{ border-bottom: 0; }

.phone-suggest .ps-item:hover{ background: rgba(255,255,255,.05); }

.phone-suggest .ps-top{
  display:flex;
  justify-content: space-between;
  gap: 10px;
  align-items: baseline;
}

.phone-suggest .ps-name{ font-weight: 900; color: var(--text); }

.phone-suggest .ps-phone{ color: var(--muted); font-size: 12px; font-weight: 750; }

.phone-suggest .ps-meta{ margin-top: 4px; color: var(--muted); font-size: 12px; }

.phone-suggest .ps-pill{
  display:inline-flex;
  align-items:center;
  gap: 6px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  border-radius: 999px;
  padding: 4px 8px;
  font-size: 12px;
}

/* =========================
 SHEET PINCH ZOOM (B)
 - Pinch zoom only inside Monthly Sheet (Excel)
 - Spacer wrapper keeps scrollbars correct
 ========================= */
:root{ --sheetScale: 1; }

.sheet-zoom-spacer{
  position: relative;
  width: max-content;
  height: max-content;
}

.sheet-zoom-spacer > .sheet-grid{
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: top left;
  will-change: transform;
}


/* =========================
 MOBILE-ONLY SHEET PINCH / UNZOOM (0.35)
 - Applies ONLY on mobile to Monthly Sheet (Excel)
 ========================= */
@media (max-width: 560px){
  #monthSheet{ --sheetScale: 1; }
  #monthSheet .sheet-cell{
    padding: calc(6px * var(--sheetScale, 1)) calc(8px * var(--sheetScale, 1));
    min-height: calc(64px * var(--sheetScale, 1));
    min-width: calc(var(--sheetDayW, 78vw) * var(--sheetScale, 1));
  }
  #monthSheet .sheet-cell.time{
    min-width: calc(72px * var(--sheetScale, 1));
    max-width: calc(72px * var(--sheetScale, 1));
    width: calc(72px * var(--sheetScale, 1));
    font-size: calc(11px * var(--sheetScale, 1));
  }
  #monthSheet .sheet-cell.head{ min-height: calc(56px * var(--sheetScale, 1)); }
  #monthSheet .sheet-cell.corner{
    min-width: calc(72px * var(--sheetScale, 1));
    width: calc(72px * var(--sheetScale, 1));
  }
  #monthSheet .sheet-head-dow{ font-size: calc(12px * var(--sheetScale, 1)); }
  #monthSheet .sheet-head-date{ font-size: calc(12px * var(--sheetScale, 1)); margin-top: calc(2px * var(--sheetScale, 1)); }
  #monthSheet .sheet-line{ font-size: calc(12px * var(--sheetScale, 1)); }
  #monthSheet .sheet-phone{ font-size: calc(12px * var(--sheetScale, 1)); }
  #monthSheet .sheet-more{ font-size: calc(11px * var(--sheetScale, 1)); }
  #monthSheet .sheet-appt.emp-tint{
    border-radius: calc(10px * var(--sheetScale, 1));
    padding: calc(6px * var(--sheetScale, 1)) calc(8px * var(--sheetScale, 1));
  }
}


/* STEP 23 PROFILE MANAGER POLISH */
.dash-empty{
  padding: 12px;
  border-radius: 12px;
  border: 1px dashed rgba(255,255,255,.12);
  color: var(--muted);
  background: rgba(255,255,255,.03);
}
.dash-subtitle{
  font-size: 12px;
  font-weight: 900;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .3px;
}
.dash-note{
  padding: 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.04);
  color: var(--muted);
  font-size: 12px;
}
.input{
  width: 100%;
  min-height: var(--tap);
  background: rgba(11,20,38,.92);
  color: var(--text);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 12px;
  padding: 10px 12px;
  outline: none;
}
.input:focus{
  border-color: var(--focus);
  box-shadow: 0 0 0 3px rgba(212,175,55,.16);
}


/* STEP 24A ACCESS FOUNDATION */
.dash-card .meta strong{ color: var(--text); }


/* STEP 26A STORE ACCESS FOUNDATION */
.store-access-grid{
  display:grid;
  gap:10px;
}

@media (min-width: 720px){
  .store-access-grid.cols-2{
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
}

.store-access-card{
  min-height: 118px;
}

/* =========================
 STEP 31 AUTH GATE
 ========================= */
body.auth-booting .topbar,
body.auth-booting .container,
body.auth-locked .topbar,
body.auth-locked .container,
body.auth-booting .mobile-sections,
body.auth-locked .mobile-sections,
body.auth-booting #versionBadge,
body.auth-locked #versionBadge{
 display:none !important;
}
.auth-gate{
 position: fixed;
 inset: 0;
 z-index: 1000;
 display:flex;
 align-items:center;
 justify-content:center;
 padding: 20px;
 background:
   radial-gradient(900px 540px at 50% -10%, rgba(96,165,250,.18), transparent 60%),
   radial-gradient(780px 480px at 110% 10%, rgba(212,175,55,.12), transparent 60%),
   rgba(7,11,18,.92);
}
.auth-gate[hidden]{ display:none !important; }
.auth-gate-panel{
 width: 100%;
 max-width: 520px;
 background: rgba(15,23,42,.96);
 border: 1px solid rgba(255,255,255,.10);
 border-radius: 22px;
 box-shadow: 0 18px 40px rgba(0,0,0,.38);
 padding: 22px;
}
.auth-gate-head{ display:flex; gap:12px; align-items:flex-start; justify-content:space-between; }
.auth-kicker{
 font-size: 12px;
 font-weight: 900;
 letter-spacing: .35px;
 text-transform: uppercase;
 color: var(--gold);
}
.auth-gate-head h2{
 margin: 8px 0 0;
 font-size: 24px;
 line-height: 1.2;
}
.auth-gate-subtitle{
 margin-top: 8px;
 color: var(--muted);
 font-size: 14px;
}
.auth-gate-body{ margin-top: 18px; }
.auth-welcome-grid{
  display:grid;
  gap: 12px;
  grid-template-columns: 1fr;
}
.auth-entry-grid{
  display:grid;
  gap: 12px;
  grid-template-columns: 1fr;
}
.auth-entry-card{
  display:grid;
  gap: 10px;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(11,20,38,.48);
}
.auth-entry-card-owner{
  border-color: rgba(212,175,55,.18);
  box-shadow: 0 0 0 1px rgba(212,175,55,.05) inset;
}
.auth-entry-kicker{
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gold);
}
.auth-entry-title{
  font-size: 18px;
  font-weight: 950;
  line-height: 1.2;
}
.auth-entry-text{
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}
.auth-entry-actions{
  display:grid;
  gap: 10px;
  grid-template-columns: 1fr;
}
.auth-entry-strip{
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.04);
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}
.auth-main-btn{
  min-height: 52px;
  font-size: 15px;
}
.auth-welcome-note,
.auth-inline-note,
.auth-mini-footer{
  margin-top: 12px;
  color: var(--muted);
  font-size: 13px;
}
.auth-card-mini{
  display:grid;
  gap: 12px;
}
.auth-access-handoff{
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(212,175,55,.16);
  background: rgba(212,175,55,.06);
  color: var(--text);
  font-size: 12px;
  line-height: 1.45;
}
.auth-access-support{
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.04);
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}
.step36-owner-hub-note{
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(212,175,55,.14);
  background: rgba(212,175,55,.05);
  color: var(--text);
  font-size: 12px;
  line-height: 1.45;
}
.switch-secondary-strip{
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.04);
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}
.switch-actions-grid-primary{
  grid-template-columns: 1fr 1fr;
}
.switch-actions-grid-secondary{
  grid-template-columns: 1fr 1fr;
}
.step36-owner-footer-actions{
  display:flex;
  justify-content:flex-end;
  margin-top: 10px;
}
.step36-summary-note{
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.04);
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}
.step36-summary-actions{
  justify-content: space-between;
}
@media (max-width: 640px){
  .step36-summary-actions{
    justify-content: stretch;
  }
  .step36-summary-actions .btn{
    width: 100%;
  }
}
@media (max-width: 640px){
  .switch-actions-grid-primary,
  .switch-actions-grid-secondary{
    grid-template-columns: 1fr;
  }
  .step36-owner-footer-actions .btn{
    width: 100%;
  }
}
@media (min-width: 640px){
  .auth-entry-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .auth-entry-actions{
    grid-template-columns: 1fr 1fr;
  }
  .auth-entry-card-employee .auth-entry-actions{
    grid-template-columns: 1fr;
  }
}
.auth-gate-actions{
 display:flex;
 gap:10px;
 justify-content:flex-end;
 flex-wrap:wrap;
 margin-top: 6px;
}
.auth-gate-msg{
 min-height: 20px;
 margin-top: 16px;
 font-size: 13px;
 color: var(--muted);
}
.auth-gate-msg.ok{ color: var(--ok); }
.auth-gate-msg.err{ color: var(--danger); }
.btn-linklike{
 border:0;
 background:none;
 color: var(--gold);
 font-weight: 800;
 cursor:pointer;
 padding:0;
}
@media (max-width: 560px){
  .auth-gate{ padding: 14px; }
  .auth-gate-panel{ padding: 18px; border-radius: 18px; }
  .auth-gate-head h2{ font-size: 22px; }
  .auth-gate-actions .btn{ flex:1 1 calc(50% - 10px); }
  .auth-entry-card{ padding: 12px; border-radius: 16px; }
  .auth-entry-title{ font-size: 17px; }
}

/* =========================
 STEP 32 STORE SETUP WIZARD LITE
 ========================= */
.step32-wrap{ display:grid; gap:12px; }
.step32-pills{ display:flex; gap:8px; flex-wrap:wrap; }

.step32-step-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:36px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  font-size:12px;
  color: var(--muted);
}
.step32-step-pill.active{
  color: var(--text);
  border-color: rgba(212,175,55,.45);
  box-shadow: 0 0 0 3px rgba(212,175,55,.14);
}

.step32-stack{ display:grid; gap:10px; }
.step32-title{ font-size:18px; font-weight:950; }
.step32-sub{ color: var(--muted); font-size:13px; }

.step32-chip-grid,
.step32-day-grid{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.step32-chip,
.step32-day-chip{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:42px;
  padding:10px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  cursor:pointer;
  user-select:none;
}
.step32-chip input,
.step32-day-chip input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.step32-chip.active,
.step32-day-chip.active{
  border-color: rgba(212,175,55,.45);
  box-shadow: 0 0 0 3px rgba(212,175,55,.14);
  color: var(--text);
}

.step32-service-list{
  display:grid;
  gap:8px;
}
.step32-service-row,
.step32-manual-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(11,20,38,.55);
}
.step32-service-duration{
  color: var(--muted);
  font-size:12px;
  font-weight:800;
}

.step32-manual-add{
  display:grid;
  gap:10px;
}
.step32-add-wrap{
  display:flex;
  justify-content:flex-end;
}

.step32-hours-grid{
  display:grid;
  gap:10px;
  grid-template-columns: repeat(2, minmax(0,1fr));
}

@media (max-width: 560px){
  .step32-hours-grid{ grid-template-columns: 1fr; }
  .step32-service-row,
  .step32-manual-row{
    align-items:flex-start;
    flex-direction:column;
  }
  .step32-add-wrap .btn{ width:100%; }
}

/* =========================
 STEP 34A SWITCH USER POLISH
 ========================= */
.switch-stack{ display:grid; gap:12px; }
.switch-card-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
}
.switch-muted{ color: var(--muted); font-size:12px; margin-top:4px; }
.switch-actions-grid{
  display:grid;
  gap:10px;
  grid-template-columns: repeat(2, minmax(0,1fr));
}
.switch-primary{
  border-color: rgba(212,175,55,.24);
  box-shadow: 0 0 0 1px rgba(212,175,55,.06) inset;
}
.switch-advanced summary{
  cursor:pointer;
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.switch-advanced summary::-webkit-details-marker{ display:none; }
.switch-advanced-body{ margin-top:10px; }
@media (max-width: 560px){
  .switch-actions-grid{ grid-template-columns: 1fr; }
}


/* =========================
 STEP 35 STORE CODE / EMPLOYEE BINDING
 ========================= */
.auth-bound-store{
  min-height: var(--tap);
  display:grid;
  gap:6px;
  align-items:center;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(11,20,38,.55);
}
.auth-code-badge{
  display:inline-flex;
  align-items:center;
  width:max-content;
  padding:4px 8px;
  border-radius:999px;
  border:1px solid rgba(212,175,55,.24);
  background: rgba(212,175,55,.10);
  color: var(--text);
  font-size:12px;
  font-weight:800;
}


/* =========================
 STEP 36A STORES OVERVIEW
 ========================= */
.step36-store-list{ display:grid; gap:12px; margin-top:12px; }
.step36-store-card{
  padding:12px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(11,20,38,.55);
}
.step36-store-card-head{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:flex-start;
  flex-wrap:wrap;
}
.step36-store-title{ font-size:16px; font-weight:950; }
.step36-store-meta{ color: var(--muted); font-size:12px; margin-top:4px; }
.step36-store-kpis{
  display:grid;
  gap:8px;
  grid-template-columns: repeat(4, minmax(0,1fr));
  margin-top:12px;
}
.step36-store-kpi{
  padding:10px;
  border-radius:12px;
  background: rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  display:grid;
  gap:4px;
}
.step36-store-kpi strong{ font-size:16px; }
.step36-store-kpi span{ color: var(--muted); font-size:12px; }
.step36-stores-actions{ margin-top:14px; }
.step36-question-actions{ margin-top:14px; }
.step36-all-grid{
  display:grid;
  gap:10px;
  grid-template-columns: repeat(5, minmax(0,1fr));
  margin-top:12px;
}
.step36-summary-list{ display:grid; gap:10px; margin-top:12px; }
.step36-summary-row{
  display:flex;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(11,20,38,.55);
}
.step36-summary-row span{ color: var(--muted); font-size:12px; }
@media (max-width: 720px){
  .step36-store-kpis,
  .step36-all-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 560px){
  .step36-store-kpis,
  .step36-all-grid{ grid-template-columns: 1fr 1fr; }
}

/* 36C.1 — Step 3 duration hours + minutes */
.step32-duration-row{
  align-items: stretch;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
}
.step32-duration-main{
  flex: 1 1 240px;
  min-width: 220px;
  display: grid;
  gap: 8px;
}
.step32-duration-editor{
  flex: 0 1 260px;
  min-width: 220px;
  display: grid;
  gap: 8px;
}
.step32-duration-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.step32-duration-field{
  display:grid;
  gap:6px;
}
.step32-duration-label{
  font-size: 12px;
  color: var(--muted);
}
.step32-duration-preview{
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(212,175,55,.08);
  border: 1px solid rgba(212,175,55,.18);
}
.step32-duration-actions{
  display:flex;
  align-items:flex-end;
  justify-content:flex-end;
}
.step32-services-stack{
  gap: 10px;
}
@media (max-width: 640px){
  .step32-duration-row{
    grid-template-columns: 1fr;
  }
  .step32-duration-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .step32-duration-actions{
    justify-content: stretch;
  }
  .step32-duration-actions .btn{
    width: 100%;
  }
}

/* 36C.2a — compact service step + hours stepper */
.step32-duration-row.compact{
  gap: 8px;
  padding: 10px 12px;
  border-radius: 12px;
}
.step32-duration-main.compact,
.step32-duration-editor.compact{
  gap: 5px;
}
.step32-duration-grid.compact{
  gap: 8px;
  align-items: end;
}
.step32-hours-stepper{
  display:flex;
  align-items:center;
  gap:6px;
  min-height: 36px;
}
.step32-hours-stepper-value{
  min-width: 24px;
  text-align:center;
  font-weight: 800;
  color: var(--text);
}
.step32-duration-preview.compact{
  padding: 6px 9px;
  font-size: 12px;
}
.step32-duration-actions.compact{
  align-items: center;
}
.step32-duration-limit{
  font-size: 11px;
  color: var(--muted);
}
.step32-services-stack{
  gap: 8px;
}
@media (max-width: 640px){
  .step32-hours-stepper{
    justify-content: flex-start;
  }
}

/* 36C.2c — Step 4 premium compact polish */
.step32-duration-row.compact.premium{
  gap: 8px;
  padding: 10px 12px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.09);
  box-shadow: 0 10px 24px rgba(0,0,0,.12);
}
.step32-duration-main.compact.premium,
.step32-duration-editor.compact.premium{
  gap: 5px;
}
.step32-service-kind{
  font-size: 11px;
  color: var(--muted);
  letter-spacing: .02em;
}
.step32-service-name-input{
  font-weight: 600;
}
.step32-duration-grid.compact.premium{
  gap: 8px;
  align-items: end;
}
.step32-hours-stepper.premium{
  display:flex;
  align-items:center;
  gap:6px;
  min-height: 34px;
  padding: 3px;
  border-radius: 12px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
}
.step32-stepper-btn{
  min-width: 28px;
  height: 28px;
  padding: 0;
  border-radius: 9px;
}
.step32-hours-stepper-value.premium{
  min-width: 28px;
  padding: 4px 6px;
  text-align:center;
  font-weight: 800;
  color: var(--text);
  background: rgba(212,175,55,.10);
  border: 1px solid rgba(212,175,55,.18);
  border-radius: 9px;
}
.step32-minutes-select{
  min-height: 34px;
}
.step32-duration-preview.compact.premium{
  padding: 6px 9px;
  font-size: 12px;
  line-height: 1.25;
  background: rgba(212,175,55,.06);
  border: 1px solid rgba(212,175,55,.12);
}
.step32-duration-actions.compact.premium{
  align-items: center;
}
.step32-duration-limit.premium{
  margin-top: 1px;
  font-size: 11px;
  color: var(--muted);
}
.step32-add-service-btn{
  border-radius: 10px;
  padding-inline: 12px;
}

/* 36C.2d — Step 4 validation + guardrails */
.step32-service-row-invalid{
  border-color: rgba(231,76,60,.45) !important;
  box-shadow: 0 0 0 2px rgba(231,76,60,.14), 0 10px 24px rgba(0,0,0,.12) !important;
}
.step32-service-row-warning{
  border-color: rgba(212,175,55,.34) !important;
}

/* 36C.2j — Step 4 density / spacing premium calm polish */
.auth-gate-msg{
  transition: opacity .22s ease, transform .22s ease;
}
.auth-gate-msg.is-visible{
  opacity: 1;
  transform: translateY(0);
}
.step32-duration-row{
  transition: box-shadow .24s ease, border-color .24s ease, transform .24s ease, background .24s ease, opacity .24s ease;
  will-change: transform, opacity;
}
.step32-services-stack{
  display:grid;
  gap: 12px;
}
.step32-duration-row.compact.premium{
  gap: 10px;
  padding: 12px 14px;
  border-radius: 15px;
}
.step32-duration-main.compact.premium,
.step32-duration-editor.compact.premium{
  gap: 6px;
}
.step32-service-kind{
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255,255,255,.58);
}
.step32-service-name-input{
  min-height: 40px;
  padding-top: 11px;
  padding-bottom: 11px;
}
.step32-duration-grid.compact.premium{
  gap: 10px;
}
.step32-duration-preview.compact.premium{
  min-height: 36px;
  display:flex;
  align-items:center;
  padding: 7px 10px;
  border-radius: 11px;
}
.step32-duration-limit.premium{
  line-height: 1.35;
}
.step32-duration-actions.compact.premium{
  padding-left: 2px;
}
.step32-inline-actions{
  display:flex;
  align-items:center;
  gap:10px;
}
.step32-add-service-btn{
  min-height: 38px;
  border-radius: 11px;
  padding-inline: 14px;
}
.step32-service-row-added{
  animation: step32RowAddedSettle 1.08s cubic-bezier(.22,.61,.36,1);
  will-change: transform, opacity, box-shadow;
}
.step32-service-row-corrected{
  animation: step32RowCorrectedFlash .85s ease;
}
@media (max-width: 640px){
  .step32-services-stack{
    gap: 10px;
  }
  .step32-duration-row.compact.premium{
    gap: 8px;
    padding: 11px 12px;
  }
  .step32-duration-main.compact.premium,
  .step32-duration-editor.compact.premium{
    gap: 5px;
  }
  .step32-duration-actions.compact.premium{
    width: 100%;
    padding-left: 0;
  }
  .step32-duration-actions.compact.premium .btn{
    width: 100%;
  }
  .step32-inline-actions{
    justify-content: stretch !important;
  }
  .step32-inline-actions .btn{
    width: 100%;
  }
}
@keyframes step32RowAddedSettle {
  0% {
    box-shadow: 0 10px 24px rgba(0,0,0,.12);
    transform: translateY(10px) scale(.995);
    opacity: .76;
  }
  55% {
    box-shadow: 0 0 0 2px rgba(212,175,55,.08), 0 12px 26px rgba(0,0,0,.13);
    transform: translateY(0) scale(1);
    opacity: 1;
  }
  100% {
    box-shadow: 0 10px 24px rgba(0,0,0,.12);
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}
@keyframes step32RowCorrectedFlash {
  0% { box-shadow: 0 0 0 0 rgba(46,204,113,.00), 0 10px 24px rgba(0,0,0,.12); }
  30% { box-shadow: 0 0 0 4px rgba(46,204,113,.15), 0 14px 28px rgba(0,0,0,.14); }
  100% { box-shadow: 0 10px 24px rgba(0,0,0,.12); }
}



/* =========================
   STEP 40A DIRECTORY-ONLY CUSTOMER INTAKE
   ========================= */
.customer-intake-strip{
  margin-bottom: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.04);
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}
.customer-intake-sheet{
  display:grid;
  gap:12px;
  grid-template-columns: 1.25fr .95fr;
}
.customer-intake-sheet-main,
.customer-intake-side-card{
  padding: 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(11,20,38,.55);
}
.customer-intake-sheet-side{
  display:grid;
  gap:12px;
  align-content:start;
}
.customer-intake-side-card-muted{
  background: rgba(255,255,255,.03);
}
.customer-intake-sheet-actions{
  display:grid;
  gap:10px;
  margin-top:12px;
}
@media (max-width: 720px){
  .customer-intake-sheet{ grid-template-columns: 1fr; }
}


/* =========================
   STEP 40C DIRECTORY IMPORT HUB
   ========================= */
.directory-import-hub{
  display:grid;
  gap:12px;
}
.directory-import-intro{
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.04);
}
.directory-import-mode-row{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.directory-import-mode-btn{
  min-height: 38px;
  border-radius: 999px;
  padding-inline: 12px;
  font-size: 12px;
}
.directory-import-mode-btn.active{
  border-color: rgba(212,175,55,.45);
  box-shadow: 0 0 0 3px rgba(212,175,55,.14);
}
.directory-import-panel{
  padding: 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(11,20,38,.55);
}
.directory-import-actions{
  display:grid;
  gap:10px;
  margin-top:12px;
}
.directory-import-photo-actions{
  display:grid;
  gap:10px;
  grid-template-columns: repeat(2, minmax(0,1fr));
}
@media (max-width: 640px){
  .directory-import-mode-row{
    display:grid;
    grid-template-columns: 1fr 1fr;
  }
  .directory-import-mode-row .btn,
  .directory-import-photo-actions .btn{
    width: 100%;
  }
  .directory-import-photo-actions{
    grid-template-columns: 1fr;
  }
}


.directory-import-preview{display:grid;gap:10px;}
.directory-import-preview-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;}
.directory-import-preview-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;border:1px solid rgba(212,175,55,.28);background:rgba(212,175,55,.10);font-size:12px;font-weight:800;}
.directory-import-preview-meta{margin-top:2px;padding:10px 12px;border-radius:12px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.04);font-size:12px;line-height:1.45;}


.directory-manual-hint{margin-top:12px;padding:10px 12px;border-radius:12px;border:1px solid rgba(212,175,55,.16);background:rgba(212,175,55,.06);color:var(--text);font-size:12px;line-height:1.45;}


.directory-contacts-hint,.directory-photo-hint,.directory-file-hint{margin-top:12px;padding:10px 12px;border-radius:12px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.04);}
.directory-contacts-status,.directory-photo-status,.directory-file-status{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;font-size:12px;font-weight:800;border:1px solid rgba(255,255,255,.10);}
.directory-contacts-status.ok,.directory-photo-status.ok,.directory-file-status.ok{border-color:rgba(52,211,153,.35);background:rgba(52,211,153,.10);color:var(--text);}
.directory-contacts-status.warn,.directory-photo-status.idle,.directory-file-status.idle{border-color:rgba(255,255,255,.12);background:rgba(255,255,255,.05);color:var(--text);}
.directory-import-actions .btn:disabled{opacity:.5;cursor:not-allowed;filter:grayscale(.1);}


.client-spotlight{
  animation: clientSpotlightPulse 1.6s ease-out 1;
  box-shadow: 0 0 0 2px rgba(212,175,55,.38), 0 0 0 6px rgba(212,175,55,.12);
}
@keyframes clientSpotlightPulse{
  0%{ box-shadow: 0 0 0 0 rgba(212,175,55,.38), 0 0 0 0 rgba(212,175,55,.12); }
  35%{ box-shadow: 0 0 0 2px rgba(212,175,55,.38), 0 0 0 8px rgba(212,175,55,.16); }
  100%{ box-shadow: 0 0 0 0 rgba(212,175,55,0), 0 0 0 0 rgba(212,175,55,0); }
}


.directory-import-preview-simple .field label{
  font-weight: 700;
}
.directory-import-summary-list{
  display:grid;
  gap:8px;
}

/* ============================================
   Clinic Attachments V1 (Light)
   ============================================ */
.attachment-item {
  display: grid;
  gap: 8px;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid var(--border-2);
  background: rgba(255,255,255,.04);
}

.att-header {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.att-icon {
  font-size: 1.2em;
  min-width: 24px;
}

.att-name {
  font-weight: 600;
  font-size: 0.9em;
  white-space: pre-wrap;
  word-break: break-all;
  flex: 1;
  min-width: 60px;
}

.att-type {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 0.8em;
  background: rgba(212,175,55,.12);
  color: var(--gold);
  font-weight: 600;
}

.att-meta {
  display: grid;
  gap: 4px;
  font-size: 0.85em;
  color: var(--muted);
}

.att-actions {
  display: flex;
  gap: 6px;
  justify-content: flex-start;
}

.att-actions .btn {
  padding: 4px 8px;
  font-size: 0.85em;
}

.directory-import-summary-item{
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.04);
  font-size:13px;
  line-height:1.45;
}



/* =========================
 STEP 41A.2 CONTACT IMPORT FROM PHOTO HOTFIX
 ========================= */
.directory-photo-thumb{
  width: 100%;
  max-width: 320px;
  display:block;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  object-fit: cover;
  box-shadow: 0 12px 28px rgba(0,0,0,.28);
}
.directory-import-photo-card,
.directory-import-preview-hero{
  margin-top: 14px;
  display:flex;
  justify-content:center;
}
.directory-photo-hint .directory-photo-status.processing{
  border-color: rgba(96,165,250,.38);
  background: rgba(96,165,250,.12);
}
.directory-photo-hint .directory-photo-status.err{
  border-color: rgba(251,113,133,.35);
  background: rgba(251,113,133,.10);
}
.directory-import-photo-summary{
  margin-top: 12px;
  display:grid;
  gap:8px;
}
.directory-import-photo-summary-row{
  padding: 10px 12px;
  border-radius: 12px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.04);
  font-size:13px;
  line-height:1.45;
}
.directory-import-warning-list{
  display:grid;
  gap:8px;
  margin-top: 12px;
}
.directory-import-warning-item{
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(212,175,55,.16);
  background: rgba(212,175,55,.06);
  color: var(--text);
  font-size:12px;
  line-height:1.45;
}
.directory-import-actions-preview{ margin-top: 14px; }
@media (max-width: 640px){ .directory-photo-thumb{ max-width: 100%; } }



/* =========================
 STEP 41A.3 + 41B
 ========================= */
.directory-live-camera-wrap{
  display:grid;
  gap:12px;
}
.directory-live-camera-stage{
  border-radius:18px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  min-height: 260px;
}
.directory-live-video{
  display:block;
  width:100%;
  min-height:260px;
  object-fit:cover;
  background:#000;
}
.directory-live-camera-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}



/* STEP 41A.5 TWO-STEP MULTILINE OCR */
.directory-raw-text{
  min-height: 150px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  line-height: 1.45;
  white-space: pre-wrap;
}

/* STEP 41A.6 ADAPTIVE SINGLE / MULTI PHOTO IMPORT */
.directory-multi-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:12px;
  flex-wrap:wrap;
}
.directory-multi-actions-inline{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.directory-multi-list{
  display:grid;
  gap:12px;
  margin-top:12px;
}
.directory-multi-card{
  border:1px solid rgba(255,255,255,.12);
  border-radius:14px;
  padding:12px;
  background:rgba(255,255,255,.03);
}
.directory-multi-check{
  display:flex;
  align-items:center;
  gap:8px;
}


/* =========================
 STEP 42A.1a SMART IMPORT HUB
 ========================= */
.smart-import-hub{ display:grid; gap:12px; }
.smart-import-hero{
  padding:12px 14px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.04);
}
.smart-import-grid{
  display:grid;
  gap:12px;
  grid-template-columns: repeat(2, minmax(0,1fr));
}
.smart-import-card{
  padding:14px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(11,20,38,.55);
  display:grid;
  gap:10px;
}
.smart-import-card-kicker{
  font-size:11px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  color: var(--gold);
}
.smart-import-card-title{ font-size:18px; font-weight:950; line-height:1.2; }
.smart-import-card-actions{ display:grid; gap:8px; }
.smart-import-note{
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.04);
  color: var(--muted);
  font-size:12px;
  line-height:1.45;
}
.smart-import-detector-summary{
  display:grid;
  gap:10px;
  padding:14px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(11,20,38,.55);
}
.smart-import-warning{
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(212,175,55,.16);
  background: rgba(212,175,55,.06);
  color: var(--text);
  font-size:12px;
  line-height:1.45;
}
@media (max-width: 720px){
  .smart-import-grid{ grid-template-columns: 1fr; }
}


/* =========================
 STEP 42A.2 SMART IMPORT APPOINTMENTS
 ========================= */
.smart-import-inline-grid{
  display:grid;
  gap:10px;
  grid-template-columns: repeat(2, minmax(0,1fr));
}
.smart-import-appointment-list{ display:grid; gap:12px; margin-top:12px; }
.smart-import-appointment-card{
  padding:12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
}
.smart-import-raw-text{
  margin-top:10px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.04);
  color: var(--muted);
  font-size:12px;
  line-height:1.45;
  white-space: pre-wrap;
}
.smart-import-route-badge{
  display:inline-flex;
  width:max-content;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(212,175,55,.24);
  background: rgba(212,175,55,.10);
  color: var(--text);
  font-size:12px;
  font-weight:800;
}
.smart-import-review-strip{
  margin-top:10px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.04);
  color: var(--muted);
  font-size:12px;
  line-height:1.45;
}
.smart-import-source-preview{
  margin-top:10px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.04);
  color: var(--text);
  font-size:12px;
  line-height:1.45;
}
@media (max-width: 640px){
  .smart-import-inline-grid{ grid-template-columns: 1fr; }
}



/* =========================================================
   STEP 42C.3 CLIENT NOTES RESTORE POLISH
   ========================================================= */
.client-notes-edit-block42C3{
  margin-bottom: 12px;
}
.client-notes-edit-textarea42C3{
  min-height: 96px;
}




/* =========================================================
   STEP 42D.1 ATTACHMENTS TOGGLE + PREVIEW POLISH
   ========================================================= */
.step42d1-attachment-toggle-wrap{ margin:0 0 14px 0; padding:12px; border:1px solid rgba(212,175,55,.18); border-radius:12px; background:rgba(255,255,255,.03); }
.step42d1-attachment-head{ margin-bottom:8px; }
.step42d1-attachment-title{ font-weight:900; }
.step42d1-attachment-sub{ color:var(--muted); font-size:12px; margin-top:4px; }
.step42d1-attachment-check{ margin-top:8px; }
.step42d1-attachment-limit-row.is-disabled{ opacity:.6; }
.att-actions42D1{ display:flex; gap:6px; flex-wrap:wrap; }
.att-preview-wrap42D1{ min-height:240px; }
.att-preview-image42D1{ max-width:100%; max-height:60vh; display:block; margin:0 auto; border-radius:10px; }
.att-preview-frame42D1{ width:100%; min-height:70vh; border:0; background:#fff; border-radius:10px; }
.att-preview-text42D1{ white-space:pre-wrap; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; max-height:70vh; overflow:auto; background:rgba(255,255,255,.04); padding:12px; border-radius:10px; }



/* =========================================================
 STEP 36A.5.3 STORES OVERVIEW PREMIUM PASS
 ========================================================= */
#appModal.step36-overview-modal .modal-content{
  max-width: 1380px;
  width: min(1380px, calc(100vw - 28px));
}
#appModal.step36-overview-modal .modal-body{
  padding: 18px 20px 20px;
}
.step36-overview-root{ display:grid; gap:14px; }
.step36-overview-topbar{
  display:grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, .95fr);
  gap:14px;
}
.step36-overview-hero,
.step36-overview-aside,
.step36-overview-controls,
.step36-overview-row,
.step36-overview-focus{
  border:1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.025));
  border-radius:18px;
  box-shadow: 0 16px 34px rgba(0,0,0,.18);
}
.step36-overview-hero,
.step36-overview-aside,
.step36-overview-controls,
.step36-overview-focus{ padding:16px; }
.step36-overview-kicker,
.step36-overview-controls-kicker{
  font-size:11px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  color: rgba(255,255,255,.58);
}
.step36-overview-title{
  margin-top:8px;
  font-size:24px;
  font-weight:950;
  line-height:1.15;
  letter-spacing:-.02em;
}
.step36-overview-subtitle{
  margin-top:8px;
  color: var(--muted);
  font-size:13px;
  line-height:1.5;
}
.step36-overview-summary-grid{
  margin-top:14px;
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap:10px;
}
.step36-overview-summary-card,
.step36-overview-kpi{
  min-height:82px;
  padding:12px 13px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.035);
}
.step36-overview-summary-card strong,
.step36-overview-kpi strong{
  display:block;
  font-size:24px;
  line-height:1;
  font-weight:950;
  color: var(--text);
}
.step36-overview-summary-card span,
.step36-overview-kpi span{
  display:block;
  margin-top:8px;
  font-size:12px;
  color: var(--muted);
}
.step36-overview-aside-list{ display:grid; gap:10px; }
.step36-overview-aside-item{
  padding:12px 13px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
}
.step36-overview-aside-label{ font-size:12px; color: var(--muted); }
.step36-overview-aside-value{ margin-top:6px; font-size:15px; font-weight:900; }
.step36-overview-controls{ display:grid; gap:12px; }
.step36-overview-controls-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
.step36-overview-controls-sub{ margin-top:6px; color: var(--muted); font-size:12px; }
.step36-overview-controls-actions{ display:flex; gap:8px; flex-wrap:wrap; }
.step36-overview-chip-row{ display:flex; flex-wrap:wrap; gap:8px; }
.step36-overview-list{ display:grid; gap:12px; }
.step36-overview-row{
  padding:15px 16px;
  display:grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(340px, .95fr) minmax(170px, auto);
  gap:14px;
  align-items:center;
}
.step36-overview-row.is-active,
.step36-overview-focus.is-active{
  border-color: rgba(46,204,113,.38);
  box-shadow: 0 0 0 3px rgba(46,204,113,.12), 0 16px 34px rgba(0,0,0,.18);
}
.step36-overview-row-main{ min-width:0; }
.step36-overview-row-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.step36-overview-row-title{ font-size:19px; font-weight:950; line-height:1.15; }
.step36-overview-row-meta{ margin-top:6px; color: var(--muted); font-size:12px; }
.step36-overview-row-tertiary{ margin-top:10px; color: var(--muted); font-size:12px; line-height:1.45; }
.step36-overview-badge-stack{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; justify-content:flex-end; }
.step36-overview-inline-kpis{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap:10px;
}
.step36-overview-kpi.risk{ border-color: rgba(251,113,133,.22); background: rgba(251,113,133,.08); }
.step36-overview-action{ display:grid; gap:8px; justify-items:stretch; }
.step36-overview-action .btn{ width:100%; min-height:48px; }
.step36-overview-action-note{ font-size:12px; color: var(--muted); line-height:1.45; text-align:left; }
.step36-overview-focus{ display:grid; gap:14px; }
.step36-overview-focus-grid{
  display:grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(280px, .95fr);
  gap:14px;
  align-items:start;
}
.step36-overview-empty{
  padding:20px;
  border-radius:16px;
  border:1px dashed rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  color: var(--muted);
}
@media (max-width: 1180px){
  #appModal.step36-overview-modal .modal-content{
    width: min(1100px, calc(100vw - 24px));
    max-width: 1100px;
  }
  .step36-overview-topbar,
  .step36-overview-focus-grid,
  .step36-overview-row{
    grid-template-columns: 1fr;
  }
  .step36-overview-action{ justify-items:stretch; }
}
@media (max-width: 760px){
  #appModal.step36-overview-modal .modal-content{
    width: calc(100vw - 12px);
    max-width: none;
  }
  #appModal.step36-overview-modal .modal-body{
    padding: 14px 14px 18px;
  }
  .step36-overview-title{ font-size:22px; }
  .step36-overview-summary-grid,
  .step36-overview-inline-kpis{
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
  .step36-overview-row{ padding:14px; }
  .step36-overview-badge-stack{ justify-content:flex-start; }
}
@media (max-width: 520px){
  #appModal.step36-overview-modal .modal-content{
    width: 100%;
  }
  .step36-overview-summary-grid,
  .step36-overview-inline-kpis{
    gap:8px;
  }
  .step36-overview-summary-card,
  .step36-overview-kpi{ min-height:76px; padding:11px 12px; }
  .step36-overview-summary-card strong,
  .step36-overview-kpi strong{ font-size:22px; }
  .step36-overview-controls-actions .btn,
  .step36-overview-action .btn{ width:100%; }
}


/* LOCAL FOOTER BACK POLISH V1 */
.modal-footer{
  flex-wrap: wrap;
}


/* SMART IMPORT GEMINI CONTACTS CLICK LOGIC FIX V1 */
.smart-import-live-actions .btn{ position:relative; z-index:3; }


/* SMART IMPORT GEMINI SPLIT + GREEK CONTACTS V1 */
.smart-import-contact-list{display:grid;gap:12px;}
.smart-import-contact-card textarea{min-height:84px;}
#gfGeminiAppointmentsBtn,#gfGeminiContactsBtn,.smart-import-live-actions .btn{pointer-events:auto;position:relative;z-index:3;}
.smart-import-raw-text{white-space:pre-wrap;}

/* =========================
   ACCOUNT GATE (server-side magic-link auth)
   Distinct from Step 31 .auth-gate — uses body.account-locked / body.account-booting
   ========================= */
body.account-booting .topbar,
body.account-locked  .topbar,
body.account-booting .container,
body.account-locked  .container,
body.account-booting .mobile-sections,
body.account-locked  .mobile-sections,
body.account-booting #versionBadge,
body.account-locked  #versionBadge{
  display:none !important;
}
.account-gate{
  position: fixed;
  inset: 0;
  z-index: 1200;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 20px;
  background:
    radial-gradient(900px 540px at 50% -10%, rgba(96,165,250,.22), transparent 60%),
    radial-gradient(780px 480px at 110% 10%, rgba(212,175,55,.14), transparent 60%),
    rgba(7,11,18,.96);
}
.account-gate[hidden]{ display:none !important; }
.account-gate-panel{
  width: 100%;
  max-width: 460px;
  background: rgba(15,23,42,.98);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 22px;
  box-shadow: 0 18px 40px rgba(0,0,0,.42);
  padding: 24px;
  color: #e5e7eb;
}
.account-gate-head{ margin-bottom: 16px; }
.account-kicker{
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .35px;
  text-transform: uppercase;
  color: var(--gold, #d4af37);
}
.account-gate-head h2{
  margin: 6px 0 0;
  font-size: 22px;
  line-height: 1.2;
}
.account-gate-status{
  margin: 10px 0 6px;
  padding: 10px 12px;
  border-radius: 12px;
  font-size: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(30,41,59,.6);
}
.account-gate-status[data-kind="ok"]{
  border-color: rgba(34,197,94,.45);
  background: rgba(34,197,94,.12);
  color: #bbf7d0;
}
.account-gate-status[data-kind="err"]{
  border-color: rgba(248,113,113,.45);
  background: rgba(248,113,113,.12);
  color: #fecaca;
}
.account-gate-form{ display:grid; gap:10px; margin-top: 6px; }
.account-gate-label{
  font-size: 13px;
  color: #cbd5e1;
  font-weight: 600;
}
#accountEmail{
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(11,20,38,.7);
  color: #f1f5f9;
  font-size: 15px;
  outline: none;
}
#accountEmail:focus{
  border-color: rgba(96,165,250,.6);
  box-shadow: 0 0 0 3px rgba(96,165,250,.18);
}
.account-gate-submit{ width: 100%; padding: 12px 14px; font-size: 15px; }
.account-gate-submit:disabled{ opacity:.6; cursor: wait; }
.account-gate-hint{
  margin: 4px 0 0;
  font-size: 12.5px;
  color: #94a3b8;
  line-height: 1.4;
}
.account-gate-sent{
  margin-top: 10px;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid rgba(34,197,94,.35);
  background: rgba(34,197,94,.08);
  display:grid;
  gap:10px;
}
.account-gate-sent-title{ font-weight: 800; color: #bbf7d0; }
.account-gate-sent-body{ margin:0; font-size: 14px; color: #d1fae5; line-height: 1.5; }
.account-gate-sent-body span{ color:#fef3c7; font-weight:700; }

/* Topbar usage badge */
.account-usage-badge{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: 12.5px;
  font-weight: 700;
  border-radius: 999px;
  border: 1px solid rgba(212,175,55,.35);
  background: rgba(212,175,55,.08);
  color: #fef3c7;
  letter-spacing: .02em;
  white-space: nowrap;
  user-select: none;
}
.account-usage-badge[hidden]{ display: none !important; }
.account-usage-badge[data-state="warn"]{
  border-color: rgba(251,191,36,.55);
  background: rgba(251,191,36,.14);
  color: #fde68a;
}
.account-usage-badge[data-state="over"]{
  border-color: rgba(248,113,113,.6);
  background: rgba(248,113,113,.16);
  color: #fecaca;
}
.topbar-actions-wrap{ display: flex; align-items: center; gap: 8px; }
@media (max-width: 720px){
  .account-usage-badge{
    padding: 5px 10px;
    font-size: 11.5px;
  }
}

/* v411.67 — Install pill button, placed in topbar next to the Beta/usage
   badge. Visible only when the browser fires beforeinstallprompt AND the
   PWA is not already installed. Permanently hidden after appinstalled. */
.btn-install-pill{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: 12.5px;
  font-weight: 800;
  border-radius: 999px;
  border: 1px solid rgba(212,175,55,.65);
  background: linear-gradient(135deg, #d4af37, #f3d36b);
  color: #111827;
  letter-spacing: .02em;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(212,175,55,.28);
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.btn-install-pill:hover{ filter: brightness(1.05); box-shadow: 0 6px 16px rgba(212,175,55,.38); }
.btn-install-pill:active{ transform: translateY(1px); }
.btn-install-pill[hidden]{ display: none !important; }
.btn-install-pill__icon{ display: inline-block; line-height: 1; }
.btn-install-pill__label{ display: inline-block; }
@media (max-width: 720px){
  .btn-install-pill{
    padding: 5px 10px;
    font-size: 11.5px;
  }
}
/* v411.71 — On narrow phones the cloud-sync status pill ("Συγχρονισμός
   ενεργός") competes for space and pushes the install pill onto a second
   row, which looks broken. Below 600px we drop the install label and keep
   only the 📲 icon — saves ~85px and lets everything sit on one line. */
@media (max-width: 600px){
  .btn-install-pill{
    padding: 6px 9px;
    font-size: 14px;
    gap: 0;
  }
  .btn-install-pill__label{ display: none; }
}

/* ============================================================
   Switch User v2 — list-based, 1-tap UI (Phase 1C+1D)
   Premium charcoal-dark + gold accent
   ============================================================ */
.su-v2-wrap{
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.su-v2-title{
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: .2px;
  opacity: .9;
  margin: 2px 2px 0 2px;
}
.su-v2-list{
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 10px;
}
.su-row{
  display: grid;
  grid-template-columns: 44px 1fr auto auto;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0));
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--text);
  font-size: 15px;
  cursor: pointer;
  transition: transform .1s ease, border-color .15s ease, background .15s ease;
  text-align: left;
  min-height: 56px;
}
.su-row:hover{
  border-color: rgba(212,175,55,.35);
  background: linear-gradient(180deg, rgba(212,175,55,.04), rgba(255,255,255,0));
}
.su-row:active{ transform: scale(.99); }
.su-row-owner{
  border-color: rgba(212,175,55,.28);
  background: linear-gradient(180deg, rgba(212,175,55,.06), rgba(212,175,55,.02));
}
.su-row-owner:hover{
  border-color: rgba(212,175,55,.55);
  background: linear-gradient(180deg, rgba(212,175,55,.10), rgba(212,175,55,.03));
}
.su-row-current{
  border-color: rgba(46,204,113,.45);
}
.su-avatar{
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  font-size: 18px;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--border);
}
.su-avatar-owner{
  background: linear-gradient(135deg, rgba(212,175,55,.22), rgba(141,111,25,.18));
  border-color: rgba(212,175,55,.4);
}
.su-dot{
  width: 22px;
  height: 22px;
  border-radius: 50%;
  justify-self: center;
  background: var(--gold);
  border: 2px solid rgba(255,255,255,.12);
  box-shadow: 0 0 0 3px rgba(0,0,0,.25);
}
.su-name{
  font-weight: 650;
  color: var(--text);
  letter-spacing: .1px;
  line-height: 1.2;
}
.su-meta{
  font-size: 12px;
  color: var(--text);
  opacity: .55;
  font-weight: 500;
}
.su-tag{
  font-size: 11px;
  font-weight: 700;
  color: #9be7b4;
  background: rgba(46,204,113,.14);
  border: 1px solid rgba(46,204,113,.30);
  border-radius: 999px;
  padding: 2px 8px;
  letter-spacing: .3px;
}
.su-lock{
  font-size: 14px;
  opacity: .7;
  color: var(--gold);
}
.su-divider{
  height: 1px;
  background: var(--border);
  margin: 4px 8px;
}
.su-empty{
  text-align: center;
  padding: 14px;
  color: var(--text);
  opacity: .55;
  font-size: 13px;
}

/* PIN keypad panel */
.su-pin-panel{
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  animation: suPinFade .18s ease-out;
}
@keyframes suPinFade{
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.su-pin-title{
  text-align: center;
  font-size: 14px;
  color: var(--text);
  opacity: .85;
}
.su-pin-title strong{
  color: var(--gold);
  font-weight: 700;
}
.su-pin-boxes{
  display: flex;
  justify-content: center;
  gap: 10px;
}
.su-pin-box{
  width: 38px;
  height: 46px;
  border-radius: 10px;
  background: var(--panel-2);
  border: 1px solid var(--border-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: var(--gold);
  font-weight: 800;
  transition: border-color .15s ease, transform .12s ease;
}
.su-pin-box.filled{
  border-color: rgba(212,175,55,.6);
  transform: scale(1.04);
}
.su-pin-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  max-width: 280px;
  margin: 0 auto;
  width: 100%;
}
.su-key{
  min-height: 52px;
  border-radius: 12px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 20px;
  font-weight: 700;
  cursor: pointer;
  transition: background .12s ease, transform .08s ease, border-color .12s ease;
}
.su-key:hover{
  background: rgba(212,175,55,.08);
  border-color: rgba(212,175,55,.3);
}
.su-key:active{ transform: scale(.96); }
.su-key-ghost{
  color: var(--text);
  opacity: .7;
  font-size: 17px;
}
.su-key-ghost:hover{
  color: var(--gold);
  opacity: 1;
}

/* Advanced tools (collapsed) */
.su-v2-advanced{
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 14px;
}
.su-v2-advanced > summary{
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  opacity: .7;
  padding: 4px 0;
  list-style: none;
  outline: none;
}
.su-v2-advanced > summary::-webkit-details-marker{ display: none; }
.su-v2-advanced[open] > summary{ opacity: 1; color: var(--gold); }
.su-v2-adv-body{
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
.su-v2-adv-body .btn{
  width: 100%;
  justify-content: flex-start;
  text-align: left;
}

/* Add Employee modal (Phase 1C) */
.ae-form{
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.ae-field{
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ae-field label{
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  opacity: .75;
  letter-spacing: .3px;
  text-transform: uppercase;
}
.ae-pin-row{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
}
.ae-pin-row input{
  font-size: 18px;
  letter-spacing: 4px;
  font-weight: 700;
  text-align: center;
}
.ae-dice{
  min-width: 52px;
  height: 44px;
  border-radius: 10px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  color: var(--gold);
  font-size: 20px;
  cursor: pointer;
  transition: transform .2s ease, background .12s ease, border-color .12s ease;
}
.ae-dice:hover{
  background: rgba(212,175,55,.08);
  border-color: rgba(212,175,55,.4);
  transform: rotate(15deg);
}
.ae-dice:active{ transform: rotate(30deg) scale(.95); }
.ae-hint{
  font-size: 12px;
  color: var(--text);
  opacity: .6;
  line-height: 1.45;
}
.ae-actions{
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 4px;
}

@media (max-width: 480px){
  .su-row{
    grid-template-columns: 40px 1fr auto;
    gap: 10px;
    padding: 11px 12px;
  }
  .su-row .su-meta{ display: none; }
  .su-pin-box{ width: 34px; height: 42px; font-size: 20px; }
  .su-key{ min-height: 48px; font-size: 18px; }
}

/* ===== Premium toast notifications (notify()) — replaces browser alert() ===== */
#gfToastHost{
  position: fixed;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
  max-width: calc(100vw - 24px);
}
.gf-toast{
  pointer-events: auto;
  background: #0F172A;
  color: #fff;
  border: 1px solid rgba(255,255,255,.08);
  border-left: 4px solid #D4AF37;
  border-radius: 10px;
  padding: 12px 18px;
  font-size: 14px;
  line-height: 1.4;
  box-shadow: 0 8px 24px rgba(0,0,0,.45);
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity .22s ease, transform .22s ease;
  cursor: pointer;
  max-width: 460px;
  word-wrap: break-word;
}
.gf-toast-show{ opacity: 1; transform: translateY(0); }
.gf-toast-ok{ border-left-color: #22c55e; }
.gf-toast-warn{ border-left-color: #D4AF37; }
.gf-toast-err{ border-left-color: #ef4444; }
.gf-toast-info{ border-left-color: #60a5fa; }
@media (max-width: 480px){
  .gf-toast{ font-size: 13px; padding: 10px 14px; }
}

/* ===== chairOnly = πελάτισσα στο κατάστημα ενώ πιάνει βαφή/ανταύγειες ===== */
/* Διάστικτο/striped overlay για να φαίνεται ότι η υπάλληλος είναι ελεύθερη */
.appointment.chair-only{
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(255,255,255,.10) 0,
    rgba(255,255,255,.10) 6px,
    rgba(0,0,0,.12) 6px,
    rgba(0,0,0,.12) 12px
  ) !important;
  opacity: .75;
  border: 1px dashed rgba(255,255,255,.35) !important;
}
.appointment.chair-only::before{
  content: '💇';
  position: absolute;
  top: 4px;
  right: 6px;
  font-size: 12px;
  opacity: .85;
  pointer-events: none;
}
/* Sheet (Excel) view */
.sheet-appt.chair-only{
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(255,255,255,.06) 0,
    rgba(255,255,255,.06) 5px,
    rgba(0,0,0,.10) 5px,
    rgba(0,0,0,.10) 10px
  );
  border-style: dashed !important;
  opacity: .85;
}

/* chairOnly = πελάτισσα στο κατάστημα. Το block μπορεί να καλύπτει 6+ ώρες — */
/* αφήνουμε clicks στο μεγάλο σώμα του να πέσουν στο grid από κάτω για γρήγορη */
/* προσθήκη νέου ραντεβού στην ίδια στήλη. Header (όνομα) + κουμπιά παραμένουν tappable. */
.appointment.chair-only{
  pointer-events: none;
}
.appointment.chair-only .row1,
.appointment.chair-only .app-actions,
.appointment.chair-only .app-extra,
.appointment.chair-only button{
  pointer-events: auto;
}
/* Visual hint: μικρό "+" badge στο κέντρο του chairOnly block να φαίνεται ότι μπορείς να μπεις */
.appointment.chair-only::after{
  content: '+';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 32px;
  color: rgba(255,255,255,.18);
  pointer-events: none;
  font-weight: 300;
}

/* ---------- Pending Client Banner (P2-7) ---------- */
.gf-pending-banner {
  margin: 10px 0 6px;
  padding: 10px 14px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(212,175,55,0.18), rgba(212,175,55,0.08));
  border: 1px solid rgba(212,175,55,0.55);
  box-shadow: 0 2px 8px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.05);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  animation: gfPendingPulse 2.2s ease-in-out infinite;
}
.gf-pending-banner .gfpb-icon {
  font-size: 18px;
  line-height: 1;
}
.gf-pending-banner .gfpb-text {
  flex: 1 1 auto;
  min-width: 180px;
  font-size: 13px;
  line-height: 1.4;
}
.gf-pending-banner .gfpb-text strong {
  color: var(--gold, #d4af37);
}
.gf-pending-banner .gfpb-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
@keyframes gfPendingPulse {
  0%, 100% { box-shadow: 0 2px 8px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.05), 0 0 0 0 rgba(212,175,55,0.0); }
  50% { box-shadow: 0 2px 8px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.05), 0 0 0 4px rgba(212,175,55,0.12); }
}
@media (max-width: 560px) {
  .gf-pending-banner { padding: 8px 10px; font-size: 12px; }
  .gf-pending-banner .gfpb-text { min-width: 140px; }
}

/* =========================================================
   STEP 32 MOBILE WIZARD FOOTER PATCH
   - Sticky/safe footer for Store Setup Wizard
   - Visible disabled Next/Save message
   - Better mobile scroll without touching Sheet pinch/sticky logic
   ========================================================= */

#appModal.step32-wizard-modal .modal-content{
  display: flex;
  flex-direction: column;
  max-height: min(92vh, 860px);
}

#appModal.step32-wizard-modal .modal-body{
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding-bottom: 18px;
}

#appModal.step32-wizard-modal .modal-footer{
  flex: 0 0 auto;
  position: sticky;
  bottom: 0;
  z-index: 5;
  padding: 12px 16px calc(12px + var(--safe-b, 0px));
  background:
    linear-gradient(180deg, rgba(11,20,38,.82), rgba(7,11,18,.98)),
    rgba(7,11,18,.98);
  border-top: 1px solid rgba(212,175,55,.18);
  box-shadow: 0 -14px 30px rgba(0,0,0,.34);
}

.step32-wizard-footer{
  width: 100%;
  display: grid;
  gap: 10px;
}

.step32-footer-actions{
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: wrap;
}

.step32-footer-msg{
  min-height: 0;
  font-size: 12px;
  line-height: 1.4;
  color: var(--muted);
}

.step32-footer-msg[hidden]{
  display: none !important;
}

.step32-footer-msg.err,
.step32-footer-msg.err.is-visible{
  color: var(--danger);
}

.step32-footer-msg.ok,
.step32-footer-msg.ok.is-visible{
  color: var(--ok);
}

.step32-nav-disabled,
#appModal.step32-wizard-modal .btn:disabled{
  opacity: .58;
  cursor: not-allowed;
  filter: grayscale(.08);
}

@media (max-width: 560px){
  #appModal.step32-wizard-modal .modal-content{
    height: 100%;
    max-height: 100%;
  }

  #appModal.step32-wizard-modal .modal-header{
    flex: 0 0 auto;
    padding: 14px 14px 12px;
  }

  #appModal.step32-wizard-modal .modal-body{
    max-height: none;
    padding: 14px 14px 18px;
    overscroll-behavior: contain;
  }

  #appModal.step32-wizard-modal .modal-footer{
    padding: 10px 12px calc(12px + var(--safe-b, 0px));
  }

  #appModal.step32-wizard-modal .step32-footer-actions{
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  #appModal.step32-wizard-modal .step32-footer-actions .btn{
    width: 100%;
    min-height: 48px;
  }

  #appModal.step32-wizard-modal .step32-footer-msg{
    padding: 8px 10px;
    border-radius: 12px;
    background: rgba(251,113,133,.08);
    border: 1px solid rgba(251,113,133,.18);
  }

  #appModal.step32-wizard-modal .step32-footer-msg:empty{
    display: none;
  }

  #appModal.step32-wizard-modal .step32-pills{
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 2px 0 8px;
    background: linear-gradient(180deg, rgba(15,23,42,.98), rgba(15,23,42,.82));
    backdrop-filter: blur(8px);
  }

  #appModal.step32-wizard-modal .step32-step-pill{
    font-size: 11px;
    min-height: 32px;
    padding: 5px 8px;
  }

  #appModal.step32-wizard-modal .step32-duration-row.compact.premium{
    scroll-margin-bottom: 130px;
  }
}



/* ============================================================
   AUTH V2 A2 LANDING — Login / Create Account / Employee Login
   ============================================================ */
.account-auth-landing{display:grid;gap:10px;margin-top:12px;}
.account-auth-landing[hidden]{display:none!important;}
.account-auth-landing .auth-main-btn{width:100%;justify-content:center;text-align:center;}
.account-password-wrap{display:grid;gap:6px;}
.account-password-wrap[hidden],#accountEmployeeFoundation[hidden]{display:none!important;}
#accountPassword,#accountPasswordConfirm,#employeeStoreCode,#employeePin,#employeePinConfirm{width:100%;padding:12px 14px;border-radius:12px;border:1px solid rgba(255,255,255,.14);background:rgba(11,20,38,.7);color:#f1f5f9;font-size:15px;outline:none;}
#accountPassword:focus,#accountPasswordConfirm:focus,#employeeStoreCode:focus,#employeePin:focus,#employeePinConfirm:focus{border-color:rgba(96,165,250,.6);box-shadow:0 0 0 3px rgba(96,165,250,.18);}


/* ============================================================
   AUTH V2 A2.2 UI CLEANUP — single visible account panel only
   Fixes hidden panels being overridden by .account-gate-form/.account-gate-sent display rules.
   ============================================================ */
.account-gate #accountGateLanding[hidden],
.account-gate #accountGateForm[hidden],
.account-gate #accountEmployeeFoundation[hidden],
.account-gate #accountGateSent[hidden],
.account-gate .account-gate-form[hidden],
.account-gate .account-gate-sent[hidden],
.account-gate .account-auth-landing[hidden]{
  display: none !important;
}
.account-gate #accountGateLanding:not([hidden]),
.account-gate #accountGateForm:not([hidden]),
.account-gate #accountEmployeeFoundation:not([hidden]),
.account-gate #accountGateSent:not([hidden]){
  display: grid !important;
}
#accountGateFormBack,
#accountEmployeeBack,
#accountGateBack{
  width: 100%;
}


/* ============================================================
   AUTH V2 A2.3.1 POLISH — Turnstile render-on-open + password eye toggles
   ============================================================ */
.account-human-check{
  display:grid;
  gap:8px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(96,165,250,.20);
  background:rgba(96,165,250,.06);
}
.account-human-check[hidden]{ display:none !important; }
.account-human-check-title{
  font-size:12px;
  font-weight:900;
  color:#cbd5e1;
  letter-spacing:.02em;
}
.account-human-check-note{
  font-size:12px;
  line-height:1.35;
  color:#94a3b8;
}
.account-human-check-note[data-state="missing"]{ color:#fde68a; }
.account-password-input-wrap{
  position:relative;
  display:flex;
  align-items:center;
}
/* v411.55 — `hidden` attribute must win over the .account-password-input-wrap
   display:flex above (otherwise the confirm-PIN wrap stays visible in login
   mode). Same pattern as .account-human-check[hidden] above. Also handles
   the matching label so the "Επιβεβαίωση νέου PIN" line disappears too. */
.account-password-input-wrap[hidden]{ display:none !important; }
.account-gate-label[hidden]{ display:none !important; }
.account-password-input-wrap input{ padding-right:48px !important; }
.account-password-toggle{
  position:absolute;
  right:8px;
  top:50%;
  transform:translateY(-50%);
  width:34px;
  height:34px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
  color:#e5e7eb;
  cursor:pointer;
  padding:0;
  font-size:15px;
}
.account-password-toggle:hover{
  border-color:rgba(212,175,55,.35);
  background:rgba(212,175,55,.10);
}


/* ============================================================
   AUTH V2 A2.3.2 — Turnstile B layout polish
   - Security check sits below Create Account button
   - Same visual width as form buttons
   ============================================================ */
.account-human-check-b-layout{
  width: 100%;
  margin: 0;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(212,175,55,.22);
  background: linear-gradient(180deg, rgba(212,175,55,.07), rgba(96,165,250,.035));
  box-shadow: 0 6px 18px rgba(0,0,0,.16) inset;
}
.account-human-check-b-layout .account-human-check-title{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height: 28px;
  font-size: 12px;
  font-weight: 950;
  color: #fef3c7;
  letter-spacing: .03em;
  text-transform: none;
}
.account-human-check-b-layout .account-turnstile-box{
  width: 100%;
  min-height: 0;
  overflow: hidden;
}
.account-human-check-b-layout .account-turnstile-box iframe{
  max-width: 100% !important;
}
.account-human-check-b-layout .account-human-check-note{
  margin-top: 4px;
  text-align:center;
  font-size: 11.5px;
  line-height: 1.3;
  color: #94a3b8;
}
.account-human-check-b-layout .account-human-check-note[data-state="missing"]{
  color: #fde68a;
}


/* ============================================================
   AUTH V2 A2.3.5 — Ultra-compact Turnstile below Back button
   - Security widget sits below Πίσω
   - Same form width, minimal height/visual noise
   ============================================================ */
.account-human-check-below-back{
  width: 100%;
  margin: -2px 0 0;
  padding: 4px 6px 5px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.055);
  background: rgba(255,255,255,.020);
  box-shadow: none;
}
.account-human-check-below-back .account-human-check-title{
  min-height: 16px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 10px;
  font-weight: 800;
  color: rgba(229,231,235,.58);
  letter-spacing: .012em;
}
.account-human-check-below-back .account-turnstile-box{
  width: 100%;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  transform-origin: top center;
}
.account-human-check-below-back .account-turnstile-box iframe{
  max-width: 100% !important;
}
.account-human-check-below-back .account-human-check-note{
  display:none;
  margin-top: 1px;
  text-align:center;
  font-size: 9.8px;
  line-height: 1.15;
  color: rgba(148,163,184,.58);
}
.account-human-check-below-back .account-human-check-note[data-state="missing"]{
  display:block;
  color: rgba(253,230,138,.76);
}
@media (max-width: 560px){
  .account-human-check-below-back{
    padding: 4px 4px 5px;
  }
  .account-human-check-below-back .account-human-check-title{
    font-size: 9.8px;
  }
}

/* v411.87.1.22 — Menu/modal top interaction layer.
   Additive safety: keep the existing app modal above sticky sheet headers/cells
   and ensure modal content receives pointer events. Does not change sheet sizing,
   sticky hours/days, pinch/unzoom, or appointment layout. */
.modal.gf-modal-top-layer,
#appModal.gf-modal-top-layer {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147483000 !important;
  pointer-events: auto !important;
}
#appModal.gf-modal-top-layer .modal-content,
#appModal.gf-modal-top-layer .modal-body,
#appModal.gf-modal-top-layer button,
#appModal.gf-modal-top-layer a,
#appModal.gf-modal-top-layer input,
#appModal.gf-modal-top-layer select,
#appModal.gf-modal-top-layer textarea {
  pointer-events: auto !important;
}

/* v411.87.1.44 — a CLOSED modal must NEVER block the timeline. The
   gf-modal-top-layer rule above lifts the OPEN modal above sticky sheet cells
   with pointer-events:auto !important (and the v411.87.1.22 JS also sets it
   inline). But .modal.hidden sets pointer-events:none WITHOUT !important, so
   after the hamburger/any modal closed, the #appModal stayed a full-screen
   invisible click-trap (inset:0, z-index 2147483000) and the whole monthly
   sheet / appointments became untappable until a page refresh. Placed AFTER
   the top-layer rule with the same (id+class) specificity + !important, this
   makes "hidden" win, and !important also overrides the inline pointer-events.
   A closed modal is therefore always click-through. */
#appModal.hidden,
#appModal.hidden .modal-content,
#appModal.hidden .modal-body,
#appModal.hidden button,
#appModal.hidden a,
#appModal.hidden input,
#appModal.hidden select,
#appModal.hidden textarea {
  pointer-events: none !important;
}

/* =============================================================
   v411.87.1.76 — ONBOARDING / AUTH-GATE VISUAL POLISH
   Additive + SCOPED to .auth-gate ONLY (rest of the app untouched).
   Pure CSS; revert by deleting this whole block. No HTML/logic change.
   ============================================================= */
@keyframes gfAuthPanelIn {
  from { opacity: 0; transform: translateY(14px) scale(.985); }
  to   { opacity: 1; transform: none; }
}
.auth-gate-panel{
  animation: gfAuthPanelIn .42s cubic-bezier(.16,1,.3,1) both;
  background:
    radial-gradient(120% 80% at 50% -20%, rgba(212,175,55,.07), transparent 60%),
    rgba(15,23,42,.97);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 24px 60px rgba(0,0,0,.45), 0 0 0 1px rgba(212,175,55,.05) inset;
}
@media (prefers-reduced-motion: reduce){ .auth-gate-panel{ animation: none; } }

/* Brand lockup — gold gradient wordmark + small logo chip */
.auth-gate .auth-kicker{
  display:inline-flex; align-items:center; gap:8px;
  font-size: 13px; letter-spacing:.16em;
  background: linear-gradient(90deg, #F6D879, #D4AF37 55%, #B8902A);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.auth-gate .auth-kicker::before{
  content:""; width:18px; height:18px; border-radius:6px; flex:0 0 auto;
  background: linear-gradient(135deg, #F6D879, #C9A227);
  box-shadow: 0 2px 8px rgba(212,175,55,.45);
  -webkit-text-fill-color: initial;
}
.auth-gate-head h2{ font-size: 26px; font-weight: 950; letter-spacing:-.01em; }
.auth-gate-subtitle{ font-size: 14px; line-height: 1.5; }

/* Inputs — taller, smoother, premium gold focus */
.auth-gate .input{
  min-height: 50px;
  background: rgba(11,20,38,.96);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  padding: 12px 14px;
  font-size: 15px;
  transition: border-color .18s ease, box-shadow .22s ease, background .18s ease;
}
.auth-gate .input:focus{
  border-color: rgba(212,175,55,.65);
  box-shadow: 0 0 0 4px rgba(212,175,55,.14);
  background: rgba(11,20,38,1);
}
.auth-gate .field label{ font-size: 12.5px; font-weight: 700; letter-spacing:.02em; }

/* Primary CTA — bigger, bolder, richer shadow */
.auth-gate .auth-main-btn,
.auth-gate .btn-gold{
  min-height: 54px;
  font-size: 15.5px; font-weight: 850; letter-spacing:.01em;
  border-radius: 14px;
  box-shadow: 0 6px 18px rgba(212,175,55,.30);
}
.auth-gate .auth-main-btn:hover,
.auth-gate .btn-gold:hover{ box-shadow: 0 12px 30px rgba(212,175,55,.42); }

/* Entry cards — depth + hover lift */
.auth-gate .auth-entry-card{
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(255,255,255,.045), transparent 55%),
    rgba(11,20,38,.55);
  border-radius: 18px;
  transition: transform .18s cubic-bezier(.16,1,.3,1), box-shadow .22s ease, border-color .2s ease;
}
.auth-gate .auth-entry-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(0,0,0,.30);
  border-color: rgba(212,175,55,.22);
}

/* "Έχεις και άλλο κατάστημα;" — clean symmetric vertical stack of full-width
   buttons (was 2+1 asymmetric).
   v411.87.1.93 — also apply inside #appModal (the post-wizard openModal version
   lives there, NOT in .auth-gate, so it was still showing the 2+1 layout). */
.auth-gate .step36-question-actions,
#appModal .step36-question-actions{
  display:flex !important;
  flex-direction: column;
  gap: 10px;
  margin-top: 16px;
}
.auth-gate .step36-question-actions .btn,
#appModal .step36-question-actions .btn{
  width: 100%;
  flex: 0 0 auto;
  text-align: center;   /* center every button's label in the "another store?" prompt (overrides the generic left-aligned menu-item style, this modal only) */
}

/* v411.87.1.93 — onboarding "Θέλεις γρήγορες οδηγίες;" offer footer: uniform
   full-width vertical stack (same look as the «άλλο κατάστημα» prompt) instead
   of an uneven wrapping row. Works mobile + desktop. */
.ob-choice-actions{
  display:flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}
.ob-choice-actions .btn{
  width: 100%;
  flex: 0 0 auto;
}

/* === Feedback modal — «Η γνώμη σου» (scoped .fb-*) === */
.fb-wrap{ text-align:center; }
.fb-hero{
  display:flex; flex-direction:column; align-items:center; gap:4px;
  padding:4px 0 16px;
}
.fb-hero-ic{
  font-size:40px; line-height:1;
  filter: drop-shadow(0 4px 10px rgba(212,175,55,.25));
}
.fb-hero-title{
  margin:8px 0 0; font-size:1.18rem; font-weight:700;
  color: var(--gold, #D4AF37);
}
.fb-hero-sub{ font-size:.86rem; opacity:.72; max-width:300px; line-height:1.45; }
.fb-options{ display:flex; flex-direction:column; gap:12px; margin-top:4px; }
.fb-card{
  display:flex; align-items:center; gap:14px; width:100%;
  text-align:left; text-decoration:none; cursor:pointer;
  padding:14px 16px; border-radius:14px;
  border:1px solid rgba(212,175,55,.30);
  background:linear-gradient(180deg, rgba(212,175,55,.07), rgba(212,175,55,.02));
  color:inherit; font:inherit;
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease;
}
.fb-card:hover, .fb-card:focus-visible{
  transform:translateY(-1px);
  border-color:rgba(212,175,55,.62);
  box-shadow:0 6px 20px rgba(0,0,0,.20);
  background:linear-gradient(180deg, rgba(212,175,55,.12), rgba(212,175,55,.04));
  outline:none;
}
.fb-card-ic{ font-size:24px; flex:0 0 auto; }
.fb-card-tx{ display:flex; flex-direction:column; gap:2px; flex:1 1 auto; min-width:0; }
.fb-card-tx strong{ font-size:.98rem; }
.fb-card-tx small{ font-size:.78rem; opacity:.66; line-height:1.35; }
.fb-card-arrow{ font-size:24px; opacity:.4; flex:0 0 auto; color: var(--gold, #D4AF37); }
.fb-card-off{ opacity:.5; cursor:default; pointer-events:none; }
.fb-card-off:hover{
  transform:none; box-shadow:none;
  border-color:rgba(212,175,55,.30);
  background:linear-gradient(180deg, rgba(212,175,55,.07), rgba(212,175,55,.02));
}