/* ===========================================================================
   Rezervacni kalendar Ctyrkolak  --  styly stranky /kalendar
   Vyuziva promenne z styles.css (--green-700, --cream, ...).
   =========================================================================== */

/* atribut hidden musi prebit display:flex/grid nize (jinak by se skryte
   pohledy a modaly zobrazovaly vsechny naraz) */
[hidden] { display: none !important; }

.cal-body { background: var(--cream-2); min-height: 100vh; }

/* --- Horni lista --- */
.cal-topbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  background: var(--green-700); color: var(--cream);
  padding: .7rem clamp(16px, 4vw, 32px);
  box-shadow: var(--shadow-sm);
}
.cal-brand {
  display: inline-flex; align-items: center; gap: .55rem;
  color: var(--cream); text-decoration: none; font-weight: 700; font-family: var(--font-head);
}
.cal-brand .logo-mark { width: 30px; height: 30px; color: #e7c97b; }
.cal-brand .logo-mark svg { width: 100%; height: 100%; }
.cal-userbox { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.cal-user { font-weight: 600; font-size: .95rem; }
.cal-topbar .btn-outline { color: var(--cream); border-color: rgba(247,242,233,.5); background: transparent; }
.cal-topbar .btn-outline:hover { background: rgba(247,242,233,.12); }
.badge-role { background: #e7c97b; color: var(--green-900); border-radius: 999px; padding: .12rem .55rem; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.cal-back { color: #e7c97b; text-decoration: none; font-size: .92rem; }

/* --- Layout --- */
.cal-main { padding: clamp(16px, 3vw, 28px); max-width: 1280px; margin: 0 auto; }
.cal-center { display: flex; align-items: center; justify-content: center; min-height: 70vh; padding: 24px 0; }

.spinner { width: 38px; height: 38px; border: 3px solid var(--line); border-top-color: var(--green-700); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* --- Karta prihlaseni / registrace --- */
.auth-card {
  width: 100%; max-width: 440px; background: var(--white);
  border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: clamp(22px, 4vw, 34px);
}
.auth-card.center { text-align: center; max-width: 480px; }
.auth-head h1 { font-size: 1.6rem; margin: 0 0 .4rem; }
.auth-head p { color: var(--muted); font-size: .95rem; margin: 0 0 1.2rem; }
.auth-tabs { display: flex; gap: .4rem; background: var(--cream); border-radius: var(--radius-sm); padding: .3rem; margin-bottom: 1.2rem; }
.auth-tab { flex: 1; border: 0; background: transparent; padding: .55rem; border-radius: 8px; font-family: inherit; font-weight: 600; font-size: .95rem; color: var(--muted); cursor: pointer; }
.auth-tab.is-active { background: var(--white); color: var(--green-900); box-shadow: var(--shadow-sm); }
.auth-form .field { margin-bottom: .9rem; }
.auth-hint { font-size: .85rem; color: var(--muted); margin: .8rem 0 0; }
.pending-icon { font-size: 3rem; margin-bottom: .4rem; }

/* --- Panel nastroju kalendare --- */
.cal-toolbar {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  margin-bottom: 1rem;
}
.cal-nav { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.cal-date { border: 1.5px solid var(--line); border-radius: 8px; padding: .4rem .6rem; font-family: inherit; font-size: .95rem; color: var(--ink); }
.cal-daylabel { font-weight: 600; color: var(--green-900); text-transform: capitalize; }
.cal-legend { display: flex; gap: .9rem; flex-wrap: wrap; margin-left: auto; }
.legend-item { display: inline-flex; align-items: center; gap: .4rem; font-size: .85rem; color: var(--muted); }
.legend-dot { width: 12px; height: 12px; border-radius: 3px; }
.cal-toolbar .btn-primary { margin-left: .2rem; }

/* --- Kalendar (mrizka) --- */
.cal { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--white); box-shadow: var(--shadow-sm); }
.cal-colhead { display: grid; border-bottom: 1px solid var(--line); background: var(--cream); }
.cal-rhead { padding: .6rem .7rem; text-align: center; border-left: 1px solid var(--line); }
.cal-rhead strong { display: block; font-size: .95rem; color: var(--green-900); }
.cal-rhead small { color: var(--muted); font-size: .76rem; }
.cal-corner { border-left: 0; }

.cal-scroll { max-height: calc(100vh - 230px); overflow-y: auto; }
.cal-grid { display: grid; position: relative; }
.cal-times { position: relative; }
.cal-hourlabel { position: absolute; right: 6px; transform: translateY(-50%); font-size: .72rem; color: var(--muted); }
.cal-lane { position: relative; border-left: 1px solid var(--line); }
.cal-lane.dragging { cursor: ns-resize; }

/* hodinove linky jako pozadi */
.cal-hourline { position: absolute; left: 0; right: 0; border-top: 1px solid var(--line); }
.cal-halfline { position: absolute; left: 0; right: 0; border-top: 1px dashed #f0e9d8; }

/* blok rezervace */
.rez {
  position: absolute; left: 2%; right: 2%;
  border-radius: 7px; padding: 3px 6px; overflow: hidden;
  color: #fff; font-size: .78rem; line-height: 1.2;
  box-shadow: 0 1px 3px rgba(0,0,0,.18); cursor: pointer;
  border: 1px solid rgba(255,255,255,.25);
}
.rez .rez-time { font-weight: 700; opacity: .95; }
.rez .rez-who { opacity: .92; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rez .rez-note { opacity: .85; font-size: .72rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rez.mine { outline: 2px solid #fff; outline-offset: -3px; }

/* vyber tazenim */
.cal-ghost { position: absolute; left: 2%; right: 2%; background: rgba(47,94,65,.25); border: 1.5px dashed var(--green-700); border-radius: 7px; pointer-events: none; }

.cal-foot { font-size: .85rem; color: var(--muted); margin-top: .8rem; text-align: center; }

/* --- Modaly --- */
.modal-backdrop { position: fixed; inset: 0; background: rgba(31,61,43,.45); display: flex; align-items: center; justify-content: center; z-index: 50; padding: 16px; }
.modal { width: 100%; max-width: 460px; background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow-lg); max-height: 90vh; overflow: auto; }
.modal-wide { max-width: 760px; }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.2rem; border-bottom: 1px solid var(--line); }
.modal-head h2 { margin: 0; font-size: 1.25rem; }
.modal-x { border: 0; background: var(--cream); width: 32px; height: 32px; border-radius: 8px; font-size: 1rem; cursor: pointer; color: var(--ink); }
.modal-body { padding: 1.2rem; }
.modal-body .field { margin-bottom: .9rem; }
.modal-actions { display: flex; gap: .6rem; margin-top: 1rem; }
.modal-actions .btn { flex: 1; }

.rez-detail-row { display: flex; gap: .5rem; margin: .3rem 0; font-size: .95rem; }
.rez-detail-row b { min-width: 90px; color: var(--muted); font-weight: 600; }

/* --- Seznam uzivatelu --- */
.users-help { color: var(--muted); font-size: .9rem; margin: 0 0 1rem; }
.users-list { display: flex; flex-direction: column; gap: .6rem; }
.user-row { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: .7rem .9rem; }
.user-row .u-main { flex: 1; min-width: 180px; }
.user-row .u-name { font-weight: 600; }
.user-row .u-meta { font-size: .82rem; color: var(--muted); }
.user-row .u-actions { display: flex; gap: .4rem; flex-wrap: wrap; }
.status-pill { display: inline-block; padding: .12rem .55rem; border-radius: 999px; font-size: .74rem; font-weight: 700; }
.status-pill.approved { background: #dcece1; color: var(--green-900); }
.status-pill.pending { background: #fff3d6; color: #8a6d12; }
.status-pill.rejected { background: #f6dcd8; color: #9c3326; }
.btn-danger { background: #b23b2e; color: #fff; }
.btn-danger:hover { background: #9c3326; }
.btn-xs { padding: .35rem .7rem; font-size: .82rem; }

/* --- Kůň na bloku rezervace --- */
.rez .rez-horse { font-size: .74rem; opacity: .95; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* --- Blok koně v rezervačním formuláři --- */
.rez-horse-block, .care-block { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: .8rem; margin: 0 0 1rem; background: var(--cream-2); }
.rez-block-title { font-weight: 600; font-size: .9rem; margin-bottom: .6rem; color: var(--green-900); }
.rez-block-title small { font-weight: 400; color: var(--muted); }
.rez-match-hint { font-size: .84rem; color: var(--muted); margin: .5rem 0 0; }

/* --- Souhrn péče (kovář/vet) --- */
.care-summary { background: #fff8ea; border: 1px solid #f0e2bd; border-radius: var(--radius-sm); padding: .7rem .9rem; margin-bottom: 1rem; font-size: .9rem; line-height: 1.9; }
.care-chip, .care-mark { display: inline-block; border-radius: 999px; padding: .1rem .55rem; font-size: .78rem; font-weight: 600; background: #eee7d6; color: var(--brown-dark); }
.care-chip.soon, .care-mark.soon { background: #fff3d6; color: #8a6d12; }
.care-chip.overdue, .care-mark.overdue { background: #f6dcd8; color: #9c3326; }
.care-mark { font-size: .72rem; padding: 0 .4rem; }

/* --- Seznam koní (správce) --- */
.horses-actions { margin: 0 0 1rem; }
.horse-list { display: flex; flex-direction: column; gap: .7rem; }
.horse-card { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: .8rem .9rem; }
.horse-head { display: flex; align-items: center; gap: .6rem; justify-content: space-between; }
.horse-name { font-weight: 700; color: var(--green-900); }
.horse-meta { font-size: .84rem; color: var(--muted); margin-top: .3rem; }
.horse-note { font-size: .86rem; margin-top: .35rem; }
.horse-care { margin: .5rem 0 .3rem; padding-left: 1.1rem; font-size: .86rem; }
.horse-care li { margin: .1rem 0; }
.horse-card .u-actions { margin-top: .6rem; }

/* --- Formulář koně --- */
.horse-form { border: 1.5px solid var(--gold); border-radius: var(--radius-sm); padding: 1rem; margin-bottom: 1rem; background: #fff; }
.horse-form h3 { margin: 0 0 .8rem; }
.care-row { display: grid; grid-template-columns: 1.2fr 1fr 1.2fr auto; gap: .4rem; margin-bottom: .4rem; }
.care-row input { padding: .4rem .5rem; border: 1.5px solid var(--line); border-radius: 8px; font-family: inherit; font-size: .88rem; }
#addCare { margin-top: .2rem; }

/* --- Lišta přiděleného počtu koní (člen) --- */
.allowance-bar { background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: .55rem .9rem; margin-bottom: .9rem; font-size: .92rem; display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.allowance-pending { color: #8a6d12; font-style: italic; }

/* --- Koně u uživatele (správce) --- */
.field-hint { font-size: .8rem; color: var(--muted); font-weight: 400; }
.u-horses { width: 100%; display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-top: .3rem; padding-top: .5rem; border-top: 1px dashed var(--line); }
.hset { display: flex; align-items: center; gap: .4rem; }
.hset .hlimit { width: 68px; padding: .35rem .5rem; border: 1.5px solid var(--line); border-radius: 8px; font-family: inherit; }
.horse-req { background: #fff3d6; border: 1px solid #f0e2bd; border-radius: 999px; padding: .3rem .7rem; display: flex; align-items: center; gap: .4rem; font-size: .86rem; }

/* --- Responsivita --- */
@media (max-width: 640px) {
  .cal-legend { width: 100%; margin-left: 0; }
  .cal-toolbar .btn-primary { margin-left: 0; }
  .cal-rhead small { display: none; }
  .rez .rez-note { display: none; }
}