/* ── Kölcsönző Manager – Calendar Styles ─────────────────────────────────── */

.km-cal-wrap {
  --km-primary: #2563eb;
  --km-bg:      #ffffff;
  --km-text:    #111111;
  --km-radius:  8px;

  --km-border:       rgba(0, 0, 0, 0.12);
  --km-muted:        #6b7280;
  --km-label-w:      130px;
  --km-row-h:        52px;
  --km-bar-confirmed-bg:     #fee2e2;
  --km-bar-confirmed-border: #ef4444;
  --km-bar-pending-bg:       #fef3c7;
  --km-bar-pending-border:   #f59e0b;

  position:     relative;
  box-sizing:   border-box;
  background:   var(--km-bg);
  color:        var(--km-text);
  font-family:  -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size:    14px;
  line-height:  1.5;
  padding:      20px;
  border:       1px solid var(--km-border);
  border-radius: calc(var(--km-radius) * 1.5);
}

.km-cal-wrap *,
.km-cal-wrap *::before,
.km-cal-wrap *::after {
  box-sizing: inherit;
}

/* ── Fejléc: navigáció + nézet ───────────────────────────────────────────── */

.km-cal-header {
  display:     flex;
  align-items: center;
  gap:         10px;
  margin-bottom: 14px;
  flex-wrap:   wrap;
}

.km-cal-nav-btn {
  display:       inline-flex;
  align-items:   center;
  justify-content: center;
  width:         32px;
  height:        32px;
  border:        1px solid var(--km-border);
  border-radius: var(--km-radius);
  background:    var(--km-bg);
  color:         var(--km-text);
  cursor:        pointer;
  font-size:     16px;
  transition:    background .15s, border-color .15s;
  flex-shrink:   0;
}

.km-cal-nav-btn:hover {
  background:   color-mix(in srgb, var(--km-primary) 8%, transparent);
  border-color: var(--km-primary);
}

.km-cal-title {
  flex:        1;
  text-align:  center;
  font-weight: 600;
  font-size:   15px;
  min-width:   140px;
}

.km-cal-view-toggle {
  display:  flex;
  gap:      4px;
  flex-shrink: 0;
}

.km-cal-view-btn {
  padding:       5px 14px;
  font-size:     13px;
  font-weight:   500;
  font-family:   inherit;
  border:        1px solid var(--km-border);
  border-radius: var(--km-radius);
  background:    var(--km-bg);
  color:         var(--km-muted);
  cursor:        pointer;
  transition:    background .15s, color .15s, border-color .15s;
}

.km-cal-view-btn.km-cal-view-active {
  background:   var(--km-primary);
  border-color: var(--km-primary);
  color:        #fff;
}

/* ── Naptár test ─────────────────────────────────────────────────────────── */

.km-cal-body {
  overflow-x:               auto;
  -webkit-overflow-scrolling: touch;
  border:        1px solid var(--km-border);
  border-radius: var(--km-radius);
}

/* ── Grid belső (min-width JS állítja be) ────────────────────────────────── */

.km-cal-inner { /* min-width set by JS */ }

/* ── Fejléc sor ──────────────────────────────────────────────────────────── */

.km-cal-head-row {
  display:       flex;
  border-bottom: 2px solid var(--km-border);
  background:    #f9fafb;
}

.km-cal-head-label {
  flex:         0 0 var(--km-label-w);
  width:        var(--km-label-w);
  border-right: 1px solid var(--km-border);
  padding:      6px 8px;
  font-size:    11px;
  font-weight:  600;
  color:        var(--km-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.km-cal-days-bar {
  flex:    1;
  display: flex;
}

.km-cal-day-label {
  flex:       1;
  text-align: center;
  padding:    6px 2px;
  font-size:  12px;
  font-weight: 600;
  color:      var(--km-muted);
  border-right: 1px solid #f0f2f4;
  white-space: nowrap;
}

.km-cal-day-label:last-child { border-right: none; }

.km-cal-day-label.km-today {
  color:       var(--km-primary);
  background:  color-mix(in srgb, var(--km-primary) 6%, transparent);
}

/* ── Eszköz sor ──────────────────────────────────────────────────────────── */

.km-cal-eq-row {
  display:     flex;
  align-items: stretch;
  border-bottom: 1px solid #f0f2f4;
}

.km-cal-eq-row:last-child { border-bottom: none; }

.km-cal-row-label {
  flex:           0 0 var(--km-label-w);
  width:          var(--km-label-w);
  padding:        4px 8px;
  border-right:   1px solid var(--km-border);
  display:        flex;
  flex-direction: column;
  justify-content: center;
  gap:            1px;
  overflow:       hidden;
}

.km-cal-eq-icon {
  font-size:   14px;
  flex-shrink: 0;
  align-self:  flex-start;
}

.km-cal-cat-name {
  font-size:    13px;
  font-weight:  500;
  color:        var(--km-muted);
  white-space:  nowrap;
  overflow:     hidden;
  text-overflow: ellipsis;
  line-height:  1.3;
  text-align:   left;
}

.km-cal-eq-id {
  font-size:    12px;
  font-weight:  600;
  color:        var(--km-text);
  white-space:  nowrap;
  overflow:     hidden;
  text-overflow: ellipsis;
  line-height:  1.3;
  text-align:   left;
}

/* ── Idővonal ────────────────────────────────────────────────────────────── */

.km-cal-timeline {
  flex:     1;
  position: relative;
  height:   var(--km-row-h);
  min-height: var(--km-row-h);
}

.km-cal-today-bg {
  position:  absolute;
  top:       0;
  bottom:    0;
  background: color-mix(in srgb, var(--km-primary) 5%, transparent);
  pointer-events: none;
}

.km-cal-day-line {
  position:   absolute;
  top:        0;
  bottom:     0;
  width:      1px;
  background: #f0f2f4;
  pointer-events: none;
}

/* ── Csíkok (event bars) ─────────────────────────────────────────────────── */

.km-cal-bar {
  position:     absolute;
  top:          7px;
  bottom:       7px;
  border-radius: 3px;
  min-width:    4px;
  transition:   opacity .1s;
}

.km-bar-confirmed {
  background:  var(--km-bar-confirmed-bg);
  border:      1px solid var(--km-bar-confirmed-border);
}

.km-bar-pending {
  background:  var(--km-bar-pending-bg);
  border:      1px solid var(--km-bar-pending-border);
}

/* Nyitott végű bérlés: jobb szél szaggatott */
.km-bar-open {
  border-right: 2px dashed var(--km-bar-confirmed-border);
}

/* Kattintható csíkok */
.km-cal-bar[data-label] {
  cursor: pointer;
}

.km-cal-bar[data-label]:hover { opacity: .75; }
.km-cal-bar[data-label]:focus { outline: 2px solid var(--km-primary); outline-offset: 1px; opacity: .85; }

/* ── Popup ───────────────────────────────────────────────────────────────── */

.km-cal-popup {
  position:     absolute;
  z-index:      9999;
  background:   #fff;
  border:       1px solid #d1d5db;
  border-radius: var(--km-radius);
  padding:      12px 36px 12px 14px;
  box-shadow:   0 4px 16px rgba(0,0,0,.12);
  max-width:    280px;
  min-width:    180px;
}

.km-cal-popup-close {
  position:  absolute;
  top:       8px;
  right:     8px;
  width:     22px;
  height:    22px;
  border:    none;
  background: transparent;
  cursor:    pointer;
  font-size: 14px;
  color:     var(--km-muted);
  display:   flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  padding:   0;
}

.km-cal-popup-close:hover { background: #f3f4f6; }

.km-cal-popup-text {
  margin:    0;
  font-size: 13px;
  line-height: 1.5;
  color:     var(--km-text);
}

/* ── Jelmagyarázat ───────────────────────────────────────────────────────── */

.km-cal-legend {
  display:     flex;
  gap:         16px;
  margin-top:  12px;
  flex-wrap:   wrap;
}

.km-cal-legend-item {
  display:     flex;
  align-items: center;
  gap:         6px;
  font-size:   12px;
  color:       var(--km-muted);
}

.km-cal-legend-dot {
  width:        14px;
  height:       14px;
  border-radius: 3px;
  flex-shrink:  0;
}

.km-legend-confirmed { background: var(--km-bar-confirmed-bg); border: 1px solid var(--km-bar-confirmed-border); }
.km-legend-pending   { background: var(--km-bar-pending-bg);   border: 1px solid var(--km-bar-pending-border);   }

/* ── Betöltés / üres állapot ─────────────────────────────────────────────── */

.km-cal-loading {
  display:     flex;
  align-items: center;
  gap:         10px;
  color:       var(--km-muted);
  font-size:   14px;
  padding:     24px 16px;
}

.km-cal-empty {
  text-align:  center;
  color:       #9ca3af;
  font-size:   14px;
  padding:     36px 16px;
}

.km-cal-error {
  color:       #991b1b;
  background:  #fef2f2;
  border:      1px solid #fecaca;
  border-radius: var(--km-radius);
  padding:     12px 16px;
  font-size:   13px;
  margin:      8px;
}

/* .km-spinner újrafelhasználva a booking-form.css-ből – ha nincs betöltve, itt is definiáljuk */
.km-cal-wrap .km-spinner {
  display:      inline-block;
  width:        18px;
  height:       18px;
  border:       2px solid #e5e7eb;
  border-top-color: var(--km-primary);
  border-radius: 50%;
  animation:    km-spin .7s linear infinite;
  flex-shrink:  0;
}

@keyframes km-spin {
  to { transform: rotate(360deg); }
}