/* Booking page hours editor (public/js/hours-editor.js). */

.he { --he-hour: 40px; --he-gutter: 60px; color: var(--text); font-family: Outfit, sans-serif; }
.he *, .he *::before, .he *::after { box-sizing: border-box; }

.he-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-bottom: 0.75rem; }
.he-row-between { justify-content: space-between; }
.he-label { font-weight: 600; font-size: 0.9rem; margin: 0; }

/* Segmented controls built from real radio buttons */
.he-seg { display: inline-flex; border: 0; margin: 0; padding: 3px; gap: 2px; border-radius: 10px;
  background: var(--card-tint); box-shadow: inset 0 0 0 1px var(--card-border); }
.he-seg legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.he-seg input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.he-seg label { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 36px; padding: 0.4rem 1rem;
  border-radius: 8px; cursor: pointer; font-weight: 600; font-size: 0.9rem; color: var(--text-muted); }
.he-seg input:checked + label { background: var(--card); color: var(--text); box-shadow: 0 1px 3px var(--card-shadow), inset 0 0 0 1px var(--card-border); }
.he-seg input:focus-visible + label { outline: 3px solid var(--focus-ring); outline-offset: 2px; }

.he-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem; min-height: 36px; min-width: 36px;
  padding: 0.35rem 0.75rem; border-radius: 8px; border: 1px solid var(--input-border); background: var(--input-bg);
  color: var(--text); font: 600 0.85rem Outfit, sans-serif; cursor: pointer; }
.he-btn:hover:not(:disabled) { border-color: var(--accent); }
.he-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.he-btn:focus-visible, .he-add:focus-visible, .he-remove:focus-visible, .he-check input:focus-visible,
.he select:focus-visible, .he input[type="date"]:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.he-btn-danger { color: var(--danger); border-color: var(--danger); }

.he-period { font-weight: 600; min-width: 9rem; text-align: center; }
.he-hint, .he-note { font-size: 0.82rem; color: var(--text-muted); margin: 0 0 0.75rem 0; }
.he-note { padding: 0.5rem 0.75rem; border-radius: 8px; background: var(--warning-bg); color: var(--text); }
.he-note:empty { display: none; }
.he-check { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.85rem; cursor: pointer; }
.he-check input { width: 18px; height: 18px; accent-color: var(--accent); margin: 0; }
.he-status { font-size: 0.8rem; color: var(--text-muted); }

/* Calendar grid */
.he-grid { border: 1px solid var(--card-border); border-radius: 10px; overflow: hidden; background: var(--card); }
.he-head, .he-body { display: grid; grid-template-columns: var(--he-gutter) repeat(var(--he-cols, 7), minmax(0, 1fr)); }
.he-head { border-bottom: 1px solid var(--card-border); }
.he-dayhead { display: flex; flex-direction: column; align-items: center; gap: 0.15rem; padding: 0.4rem 0.2rem;
  border-left: 1px solid var(--card-border); text-align: center; min-width: 0; }
.he-dayhead .he-dow { font-weight: 700; font-size: 0.9rem; }
.he-dayhead .he-dom { font-size: 0.8rem; color: var(--text-muted); }
.he-add { min-height: 24px; min-width: 24px; padding: 0.1rem 0.5rem; border-radius: 6px; border: 1px solid var(--card-border);
  background: transparent; color: var(--accent); font: 600 0.78rem Outfit, sans-serif; cursor: pointer; }
[data-theme="dark"] .he-add { color: var(--accent-light); }
.he-add:hover { border-color: var(--accent); }

.he-scroll { max-height: 520px; overflow-y: auto; position: relative; }
.he-body { height: calc(24 * var(--he-hour)); position: relative; }
.he-gutter { position: relative; }
.he-gutter span { position: absolute; right: 6px; font-size: 0.72rem; color: var(--text-muted); transform: translateY(-50%); white-space: nowrap; }
.he-gutter span:first-child { transform: none; }
.he-col { position: relative; border-left: 1px solid var(--card-border); cursor: crosshair; touch-action: pan-y;
  -webkit-user-select: none; user-select: none;
  background-image: repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--he-hour) - 1px),
    var(--card-border) calc(var(--he-hour) - 1px), var(--card-border) var(--he-hour)); }
.he-col.is-disabled { cursor: not-allowed; background-color: var(--card-tint); }
.he-col.is-disabled::after { content: attr(data-reason); position: absolute; top: 0.5rem; left: 0.25rem; right: 0.25rem;
  text-align: center; font-size: 0.72rem; color: var(--text-muted); }

/* Busy events: striped pattern plus text, never color alone */
.he-busy { position: absolute; left: 3px; right: 3px; z-index: 1; overflow: hidden; pointer-events: none;
  padding: 2px 6px; border-radius: 6px; border: 1px solid rgba(74, 109, 115, 0.35); font-size: 0.72rem; line-height: 1.25;
  color: var(--text-muted);
  background: repeating-linear-gradient(135deg, rgba(74, 109, 115, 0.14) 0 6px, transparent 6px 12px), var(--card); }
[data-theme="dark"] .he-busy { border-color: rgba(155, 191, 186, 0.35);
  background: repeating-linear-gradient(135deg, rgba(155, 191, 186, 0.16) 0 6px, transparent 6px 12px), var(--card); }

/* Available hours */
.he-block { position: absolute; left: 8px; right: 8px; z-index: 2; display: flex; flex-direction: column; justify-content: flex-start; width: auto; margin: 0;
  padding: 3px 6px; border-radius: 8px; border: 2px solid var(--accent); text-align: left; overflow: hidden;
  background: rgba(20, 130, 122, 0.14); color: var(--text); font: 700 0.78rem/1.2 Outfit, sans-serif;
  cursor: grab; touch-action: none; -webkit-user-select: none; user-select: none; }
[data-theme="dark"] .he-block { background: rgba(78, 205, 196, 0.2); }
.he-block.is-short { padding-top: 0; padding-bottom: 0; font-size: 0.7rem; }
.he-block:focus-visible, .he-block.is-selected { outline: 3px solid var(--focus-ring); outline-offset: 1px; }
.he-block.is-dragging { opacity: 0.35; }
.he-handle { position: absolute; left: 0; right: 0; height: 10px; cursor: ns-resize; }
.he-handle::after { content: ""; position: absolute; left: 50%; width: 22px; height: 3px; margin-left: -11px; border-radius: 2px;
  background: var(--accent); opacity: 0.7; }
.he-handle-top { top: -2px; } .he-handle-top::after { top: 2px; }
.he-handle-bottom { bottom: -2px; } .he-handle-bottom::after { bottom: 2px; }
.he-preview { position: absolute; left: 8px; right: 8px; z-index: 4; pointer-events: none; border-radius: 8px;
  border: 2px dashed var(--accent); background: rgba(20, 130, 122, 0.2); color: var(--text);
  font: 700 0.78rem Outfit, sans-serif; padding: 3px 6px; }
.he-remove { position: absolute; z-index: 3; width: 28px; height: 28px; margin: 0; padding: 0; border-radius: 50%;
  border: 2px solid var(--card); background: var(--danger); color: var(--btn-text); font: 700 1rem/1 Outfit, sans-serif; cursor: pointer; }

/* List view */
.he-list { display: flex; flex-direction: column; gap: 0.5rem; }
.he-day { border: 1px solid var(--card-border); border-radius: 10px; padding: 0.6rem 0.75rem; margin: 0; }
.he-day legend { font-weight: 700; font-size: 0.9rem; padding: 0 0.3rem; }
.he-range { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0.35rem 0; }
.he select, .he input[type="date"] { min-height: 36px; padding: 0.3rem 0.5rem; border: 2px solid rgba(78, 205, 196, 0.3);
  border-radius: 6px; background: var(--input-bg); color: var(--text); font: 0.88rem Outfit, sans-serif; }
.he-off { font-size: 0.85rem; color: var(--text-muted); margin: 0.25rem 0; }
.he-day-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.35rem; }
.he-adddate { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.5rem; margin-bottom: 0.75rem; }
.he-adddate label { display: flex; flex-direction: column; gap: 0.25rem; font-weight: 600; font-size: 0.85rem; }

.he-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

@media (max-width: 640px) {
  .he { --he-gutter: 52px; }
  .he-period { min-width: 0; flex: 1; }
}