/* ============================================================
DiBeauTy — Doplnkové štýly k dibeauty-rezervacie.css
Triedy použité v HTML/JS, ktoré nie sú v pôvodnom 1000-riadkovom
CSS: utility, kalendárové stavy, admin panel, slot-grid, atď.
============================================================ */
/* --- Utility --- */
.hidden { display: none !important; }
/* Default HTML `hidden` atribut (UA stylesheet nastavi display:none, ale
triedy ako .rez-btn { display:inline-block } to prebijaju). Tymto je
pravidlo na rovnakej specificite ako trieda a zaruci skrytie. */
[hidden] { display: none !important; }
/* Cancel/reschedule action row – flex iba keď element NIE JE hidden */
.rez-cancel-actions:not([hidden]) {
margin-top: 1.5rem;
display: flex;
gap: .75rem;
flex-wrap: wrap;
}
.rez-link {
color: var(--rez-primary);
text-decoration: underline;
background: transparent;
border: 0;
cursor: pointer;
font: inherit;
font-weight: 600;
}
.rez-link:hover { color: var(--rez-primary-hover); }
/* GDPR consent note styling */
.rez-gdpr-note {
display: block;
margin-top: 0.75rem;
font-size: 0.8rem;
font-style: italic;
color: var(--rez-text-muted, #6b7886);
line-height: 1.5;
}
/* --- Kontajnerové varianty --- */
.rez-container-narrow { max-width: 520px; margin: 0 auto; padding: 2rem 1rem; }
.rez-container-wide { max-width: 1200px; margin: 0 auto; padding: 1rem; }
/* --- Výsledkové karty (potvrdene.html, chyba.html) --- */
.rez-result-card { text-align: center; padding: 2.5rem 1.5rem; }
.rez-result-icon {
display: inline-flex; align-items: center; justify-content: center;
width: 72px; height: 72px; border-radius: 50%;
font-size: 2.5rem; font-weight: 700; margin-bottom: 1rem;
}
.rez-result-icon.success { background: rgba(25,135,84,0.12); color: var(--rez-success, #198754); }
.rez-result-icon.error { background: rgba(220,53,69,0.12); color: var(--rez-error, #dc3545); }
.rez-result-summary {
max-width: 520px; margin: 1.25rem auto 0;
background: var(--rez-surface); border-radius: 12px; padding: 1rem 1.25rem;
text-align: left;
}
/* --- Zhrnutie výberu pred ďalším krokom --- */
.rez-selection-summary {
display: flex; justify-content: space-between; align-items: center; gap: 1rem;
flex-wrap: wrap;
padding: .75rem 1rem; border: 1px solid var(--rez-border);
border-radius: 10px; background: var(--rez-surface);
margin-bottom: 1.25rem;
}
/* --- Login card --- */
.rez-login-card {
background: var(--rez-surface);
border: 1px solid var(--rez-border);
border-radius: 12px;
padding: 2rem 1.5rem;
box-shadow: 0 8px 24px rgba(0,0,0,0.04);
}
/* --- Form actions --- */
.rez-form-actions {
display: flex; gap: .75rem; flex-wrap: wrap; margin-top: 1.25rem;
}
.rez-checkbox-inline {
display: inline-flex; align-items: center; gap: .5rem;
color: var(--rez-text); cursor: pointer;
}
.rez-checkbox-inline input[type="checkbox"] { transform: scale(1.15); }
/* --- Kalendár: jemné odlíšenie víkendu ---
Grid má 7 stĺpcov v poradí Po, Ut, St, Št, Pi, So, Ne.
Leading blanks v mesačnom pohľade tiež zaberajú grid sloty, takže
:nth-child(7n+6) a :nth-child(7n) cielia na So a Ne stĺpce spoľahlivo.
Týždenný pohľad má presne 7 buniek v rovnakom poradí. */
.rez-calendar-weekdays > .rez-calendar-weekday:nth-child(6),
.rez-calendar-weekdays > .rez-calendar-weekday:nth-child(7) {
color: #6c7a8c; /* trochu chladnejšia sivomodrá oproti pracovným dňom */
}
.rez-calendar-grid > .rez-calendar-day:nth-child(7n+6),
.rez-calendar-grid > .rez-calendar-day:nth-child(7n) {
background: rgba(100,120,150,.05); /* veľmi jemný cool-gray podklad */
border-color: rgba(31,100,71,.45);
}
/* Zachovaj biele pozadie otvorených dní aj na víkende — akcent sa prejaví
iba cez jemný border-tint, aby víkend bol rozoznateľný ale nie dominantný. */
.rez-calendar-grid > .rez-calendar-day.open:nth-child(7n+6),
.rez-calendar-grid > .rez-calendar-day.open:nth-child(7n) {
background: #fff;
}
.rez-calendar-grid > .rez-calendar-day.open:nth-child(7n+6):hover,
.rez-calendar-grid > .rez-calendar-day.open:nth-child(7n):hover {
background: rgba(31,100,71,.06);
}
/* --- Kalendár: stavy dní --- */
.rez-calendar-day { cursor: default; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .25rem; padding: .25rem; aspect-ratio: 1; border-radius: 8px; border: 1.5px solid transparent; transition: background .15s, border-color .15s; }
.rez-calendar-day.open { background: #fff; border-color: rgba(31,100,71,.4); cursor: pointer; }
.rez-calendar-day.open:hover { background: rgba(31,100,71,.06); }
.rez-calendar-day.full { background: var(--rez-surface); color: var(--rez-text-faint); cursor: not-allowed; border-color: rgba(31,100,71,.3); }
.rez-calendar-day.closed { background: transparent; color: var(--rez-text-faint); text-decoration: line-through; cursor: not-allowed; border-color: rgba(31,100,71,.3); }
.rez-calendar-day.past { opacity: .4; cursor: not-allowed; border-color: rgba(31,100,71,.35); }
.rez-calendar-day.selected { outline: 2px solid var(--rez-primary); background: rgba(31,100,71,.14); }
.rez-calendar-day.blocked-day {
background: rgba(220,53,69,.10);
border-color: rgba(220,53,69,.35);
color: var(--rez-error, #dc3545);
cursor: pointer; /* admin môže kliknúť na detail */
text-decoration: none;
}
.rez-calendar-day.blocked-day .rez-calendar-day-num { text-decoration: line-through; }
.rez-calendar-day.past .rez-calendar-day-num,
.rez-calendar-day.full .rez-calendar-day-num,
.rez-calendar-day.open .rez-calendar-day-num { font-weight: 600; }
/* .rez-calendar-day.blocked-partial::after — červená gulička odstránená (posúvala bunku) */
/* Admin pohľad: aj „closed" dni sú klikateľné, aby admin vedel spraviť override */
.rez-admin .rez-calendar-day.closed { cursor: pointer; }
.rez-admin .rez-calendar-day.closed:hover { background: rgba(0,0,0,.04); }
/* Override — admin jednorazovo otvoril inak zatvorený deň */
.rez-calendar-day.override {
background: rgba(25,135,84,.12);
border-color: rgba(25,135,84,.5);
border-style: dashed;
color: var(--rez-text);
text-decoration: none;
}
.rez-calendar-day.override .rez-calendar-day-num { text-decoration: none; }
/* Stacked alert modal musí byť nad prompt-modalom (DOM order: alert je pred prompt) */
#alert-modal { z-index: 1200; }
/* Inline error v prompt modale (ponechané pre budúce využitie — momentálne sa používa popup) */
.rez-prompt-error {
background: rgba(220,53,69,.08);
border: 1px solid rgba(220,53,69,.4);
color: var(--rez-error, #dc3545);
padding: .5rem .75rem;
border-radius: 6px;
font-size: .9rem;
margin: .5rem 0 .75rem;
}
/* Info banner v prompt modale (read-only kontext ako pracovný čas dňa) */
.rez-prompt-info {
background: rgba(31,100,71,.06);
border: 1px solid rgba(31,100,71,.25);
color: var(--rez-text);
padding: .5rem .75rem;
border-radius: 6px;
font-size: .9rem;
margin-bottom: .75rem;
}
/* Preset chipy */
.rez-prompt-presets {
display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .75rem;
}
.rez-chip {
background: var(--rez-surface);
border: 1px solid var(--rez-border);
color: var(--rez-text);
padding: .35rem .75rem;
border-radius: 999px;
font: inherit; font-size: .85rem;
cursor: pointer;
transition: background .15s, border-color .15s, color .15s;
}
.rez-chip:hover {
background: var(--rez-primary);
color: var(--rez-text-inverse);
border-color: var(--rez-primary);
}
/* Info banner v detaile dňa keď je celý deň blokovaný (zobrazí dôvod blokácie) */
.rez-admin-block-banner {
padding: .5rem .75rem; margin: .5rem 0;
background: rgba(220,53,69,.08);
border: 1px solid rgba(220,53,69,.35);
border-left: 4px solid rgba(220,53,69,.7);
border-radius: 6px;
font-size: .9rem; color: var(--rez-text);
}
.rez-admin-block-banner strong { color: #b02434; }
.rez-admin-block-reason { color: var(--rez-text-muted); }
/* Info banner v detaile dňa keď je deň otvorený cez override (víkendová akcia) */
.rez-admin-override-banner {
padding: .5rem .75rem; margin: .5rem 0;
background: rgba(40,167,69,.08);
border: 1px solid rgba(40,167,69,.35);
border-left: 4px solid rgba(40,167,69,.7);
border-radius: 6px;
font-size: .9rem; color: var(--rez-text);
}
.rez-admin-override-banner strong { color: #1e7c3a; }
.rez-admin-override-reason { color: var(--rez-text-muted); }
/* Zoznam blokovaných slotov v detaile dňa */
.rez-admin-blocked-list { display: flex; flex-direction: column; gap: .35rem; margin: .5rem 0; }
.rez-admin-blocked-row {
display: flex; justify-content: space-between; align-items: center; gap: .75rem;
padding: .4rem .75rem;
background: rgba(220,53,69,.08);
border: 1px solid rgba(220,53,69,.3);
border-radius: 6px;
font-size: .9rem;
}
.rez-calendar-day-status {
font-size: .75rem; color: var(--rez-text-muted); text-align: center; line-height: 1.2;
}
.rez-calendar-day-more {
font-size: .7rem; color: var(--rez-text-muted);
}
/* --- Kalendárny grid — drop shadow --- */
.rez-calendar-grid {
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
border-radius: 8px;
overflow: visible;
margin-bottom: 0.2rem;
}
/* --- Grid slotov pre jeden deň --- */
.rez-time-slots {
display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
gap: .5rem; margin-top: .75rem;
}
.rez-time-slot {
display: inline-flex; align-items: center; justify-content: center;
padding: .5rem .75rem; border: 1px solid var(--rez-border); border-radius: 8px;
background: #fff; color: var(--rez-text); font-family: var(--rez-font-body);
cursor: pointer; transition: background .15s, border-color .15s;
}
.rez-time-slot:hover { background: var(--rez-primary-light); border-color: var(--rez-primary); }
.rez-time-slot.booked { text-decoration: line-through; color: var(--rez-text-faint); cursor: not-allowed; }
.rez-time-slot.blocked { opacity: .5; cursor: not-allowed; }
.rez-time-slot.pending { border-style: dashed; color: var(--rez-text-muted); }
.rez-skeleton-slot { height: 36px; border-radius: 8px; }
/* ============================================================
Admin panel
============================================================ */
.rez-admin .rez-container,
.rez-admin .rez-container-wide {
background: transparent;
}
/* Navigácia */
.rez-admin-nav {
display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
padding: .75rem 1.25rem;
background: var(--rez-primary);
color: var(--rez-text-inverse);
box-shadow: 0 1px 4px rgba(0,0,0,.08);
}
.rez-admin-nav-brand {
font-family: var(--rez-font-display);
font-size: 1.25rem;
margin-right: auto;
}
.rez-admin-nav-link {
color: var(--rez-text-inverse);
text-decoration: none;
padding: .4rem .75rem;
border-radius: 6px;
}
.rez-admin-nav-link { transition: background .2s ease, color .2s ease; }
.rez-admin-nav-link:hover,
.rez-admin-nav-link.active {
background: rgba(255,255,255,.85);
color: var(--rez-text);
}
.rez-admin-nav-logout {
background: transparent; border: 1px solid rgba(255,255,255,.4);
color: var(--rez-text-inverse); cursor: pointer;
padding: .4rem .75rem; border-radius: 6px;
font: inherit;
transition: background .2s ease, color .2s ease;
}
.rez-admin-nav-logout:hover { background: rgba(255,255,255,.85); color: var(--rez-text); }
/* Toolbar */
.rez-admin-toolbar {
display: flex; justify-content: space-between; align-items: center; gap: 1rem;
flex-wrap: wrap; margin-bottom: 1rem;
}
.rez-admin-toolbar-actions {
display: flex; gap: .5rem; flex-wrap: wrap; align-items: center;
}
.rez-admin-filters {
display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: .5rem; margin-bottom: 1rem;
}
/* Od + Do v jednom riadku — rez-form-row má priority */
.rez-admin-filters .rez-form-row {
grid-column: span 2;
display: grid; grid-template-columns: 1fr 1fr;
gap: .5rem;
}
/* View switch (mesiac/týždeň/deň) */
.rez-view-switch {
display: inline-flex; border: 1px solid var(--rez-border); border-radius: 8px; overflow: hidden;
}
.rez-view-btn {
background: var(--rez-surface); color: var(--rez-text);
border: 0; padding: .4rem .8rem; cursor: pointer; font: inherit;
border-right: 1px solid var(--rez-border);
}
.rez-view-btn:last-child { border-right: 0; }
.rez-view-btn.active {
background: var(--rez-primary); color: var(--rez-text-inverse);
}
/* Tabuľky */
.rez-admin-table-wrap { overflow-x: auto; }
.rez-admin-table {
width: 100%; border-collapse: collapse; font-size: .95rem;
background: var(--rez-surface); border-radius: 10px; overflow: hidden;
}
.rez-admin-table th, .rez-admin-table td {
padding: .6rem .75rem; border-bottom: 1px solid var(--rez-border);
text-align: left; vertical-align: middle;
}
.rez-admin-table th {
background: rgba(31,100,71,.05); font-weight: 600; color: var(--rez-text);
}
.rez-admin-table tbody tr:last-child td { border-bottom: 0; }
.rez-admin-table tbody tr.status-cancelled td { color: var(--rez-text-faint); text-decoration: line-through; }
.rez-admin-table tbody tr.status-pending td { background: rgba(255,193,7,.06); }
.drag-handle { cursor: grab; color: var(--rez-text-faint); text-align: center; user-select: none; }
/* Pagination */
.rez-admin-pagination {
display: flex; gap: .5rem; justify-content: center; margin-top: 1rem;
}
/* Detail dňa (admin dashboard) */
.rez-admin-day-list {
display: flex; flex-direction: column; gap: .5rem; margin-top: .75rem;
}
.rez-admin-day-row {
display: grid;
grid-template-columns: 80px 1.5fr 2fr 120px auto;
gap: .75rem; align-items: center;
padding: .5rem .75rem; background: var(--rez-surface); border-radius: 8px;
border: 1px solid var(--rez-border);
}
.rez-admin-day-row.status-cancelled { opacity: .6; text-decoration: line-through; }
.rez-admin-day-row.status-pending { border-color: rgba(255,193,7,.5); }
.rez-admin-day-actions { display: flex; gap: .5rem; }
/* Badges */
.rez-badge {
display: inline-block; padding: .15rem .55rem;
border-radius: 999px; font-size: .75rem; font-weight: 600;
background: var(--rez-surface); color: var(--rez-text-muted);
}
.rez-badge.badge-active { background: rgba(25,135,84,.12); color: var(--rez-success, #198754); }
.rez-badge.badge-pending { background: rgba(255,193,7,.18); color: #8a6d00; }
.rez-badge.badge-cancelled { background: rgba(220,53,69,.12); color: var(--rez-error, #dc3545); }
/* Credit badge */
.rez-credit-badge {
display: inline-block;
padding: .3rem .75rem; border-radius: 999px;
background: var(--rez-surface); border: 1px solid var(--rez-border);
font-size: .85rem; color: var(--rez-text-muted);
}
/* Mobile */
@media (max-width: 768px) {
.rez-admin-day-row { grid-template-columns: 70px 1fr; }
.rez-admin-day-procs, .rez-admin-day-status { grid-column: 2; }
.rez-admin-day-actions { grid-column: 1 / -1; justify-content: flex-end; }
.rez-admin-nav-brand { flex-basis: 100%; margin-right: 0; }
}
/* Password show/hide toggle ("ocko") */
.rez-password-wrap {
position: relative;
}
.rez-password-wrap .rez-input-with-toggle {
padding-right: 2.75rem; /* miesto na tlacidlo */
}
.rez-password-toggle {
position: absolute;
top: 50%;
right: .35rem;
transform: translateY(-50%);
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.25rem;
height: 2.25rem;
padding: 0;
background: transparent;
border: none;
border-radius: 6px;
cursor: pointer;
color: var(--rez-text-muted);
font-size: 1.15rem;
line-height: 1;
transition: background-color .15s, color .15s;
}
.rez-password-toggle:hover,
.rez-password-toggle:focus {
background: var(--rez-surface);
color: var(--rez-primary);
outline: none;
}
.rez-password-toggle.is-on {
color: var(--rez-primary);
}
.rez-password-toggle .rez-eye {
pointer-events: none;
}
/* SMS preview box */
.rez-preview-pre {
margin: 0;
padding: .75rem;
background: #f5f7fa;
border: 1px solid rgba(31, 100, 71, .15);
border-radius: 6px;
white-space: pre-wrap;
word-wrap: break-word;
font-family: inherit;
font-size: .95rem;
color: #1f2a36;
}
/* Category accordion (výber procedúr) */
.rez-cat-accordion {
display: flex;
flex-direction: column;
gap: .5rem;
}
.rez-cat-panel {
border: 1.5px solid rgba(31, 100, 71, .28);
border-radius: 8px;
background: #fff;
overflow: hidden;
transition: border-color .15s, box-shadow .15s;
}
.rez-cat-panel.open {
border-color: rgba(31, 100, 71, .5);
box-shadow: inset 3px 0 0 var(--rez-primary, #1f6447);
}
.rez-cat-header {
width: 100%;
display: flex;
align-items: center;
gap: .75rem;
padding: .9rem 1rem;
background: #fff;
border: none;
cursor: pointer;
font-size: 1rem;
font-weight: 700;
color: var(--rez-text, #1f2a36);
text-align: left;
transition: background-color .15s;
}
.rez-cat-header:hover {
background: #f5f7fa;
}
.rez-cat-panel.open > .rez-cat-header {
background: #edf7f2;
}
.rez-cat-icon {
width: 28px;
height: 28px;
flex-shrink: 0;
object-fit: contain;
}
.rez-cat-icon-placeholder {
display: none;
}
.rez-cat-name {
flex: 1;
font-weight: 600;
}
.rez-cat-count {
font-size: .85rem;
font-weight: 400;
color: var(--rez-text-faint, #6b7886);
}
.rez-cat-chevron {
flex-shrink: 0;
color: var(--rez-primary, #1f6447);
font-size: .85rem;
line-height: 1;
transition: transform .2s;
}
.rez-cat-panel.open .rez-cat-chevron {
transform: rotate(180deg);
}
.rez-cat-body {
border-top: 1px solid transparent;
padding: 0 .5rem;
display: flex;
flex-direction: column;
gap: .4rem;
background: #fff;
max-height: 0;
overflow: hidden;
transition: max-height 280ms ease, padding 280ms ease, border-top-color 280ms ease, background-color 280ms ease;
}
.rez-cat-panel:not(.open) .rez-cat-body {
transition-duration: 0s;
}
.rez-cat-panel.open .rez-cat-body {
border-top-color: rgba(31, 100, 71, .1);
max-height: 1400px;
padding: .5rem;
background: #edf7f2;
}
/* Procedure row (inside category panel) */
.rez-proc-row {
border: 1.5px solid rgba(31, 100, 71, .22);
border-radius: 6px;
background: #fff;
transition: border-color .15s, box-shadow .15s, background-color .15s;
}
.rez-proc-row.active {
border-color: var(--rez-primary, #1f6447);
background: #eef7f2;
box-shadow: 0 0 0 1px var(--rez-primary, #1f6447) inset;
}
.rez-proc-row:hover:not(.active) {
border-color: rgba(31, 100, 71, .35);
}
/* Gold výber v akciovej kategórii */
.rez-cat-panel--accented .rez-proc-row.active {
border-color: #b07d10;
background: #fef3d0;
box-shadow: 0 0 0 1px #b07d10 inset;
}
.rez-cat-panel--accented .rez-proc-row:hover:not(.active) {
border-color: rgba(176, 125, 16, .4);
}
/* Gold pill button Detail/Skryť v akciovej kategórii */
.rez-cat-panel--accented .rez-proc-info-btn {
border-color: rgba(176, 125, 16, .4);
color: #b07d10;
}
.rez-cat-panel--accented .rez-proc-info-btn:hover {
background: rgba(176, 125, 16, .08);
border-color: #b07d10;
}
.rez-cat-panel--accented .rez-proc-info-btn.expanded {
background: rgba(176, 125, 16, .12);
border-color: #b07d10;
}
/* Gold badge "N vybrané" v headeri akciovej kategórie */
.rez-cat-panel--accented .rez-cat-badge {
background: #b07d10;
}
/* Procedure item layout — wrappable: ○ name | [orig price price · duration ⓘ] */
.rez-proc-main {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: .3rem .5rem;
padding: .6rem .9rem .6rem .75rem;
cursor: pointer;
}
/* Výberový krúžok s fajočkou — CSS-only, žiadny JS */
.rez-proc-main::before {
content: '';
width: 20px;
height: 20px;
border-radius: 50%;
border: 2px solid rgba(31, 100, 71, .3);
flex-shrink: 0;
align-self: center;
transition: background .15s, border-color .15s, box-shadow .15s;
box-sizing: border-box;
}
.rez-proc-row.active .rez-proc-main::before {
content: '✓';
background: var(--rez-primary, #1f6447);
border-color: var(--rez-primary, #1f6447);
color: #fff;
font-size: 12px;
font-weight: 700;
line-height: 16px;
text-align: center;
}
.rez-cat-panel--accented .rez-proc-row.active .rez-proc-main::before {
background: #b07d10;
border-color: #b07d10;
}
.rez-proc-name {
flex: 1 1 130px;
min-width: 0;
font-weight: 400;
color: var(--rez-text, #1f2a36);
}
/* Wrapper pre meta + Detail tlačidlo — vždy vpravo, zalomí sa pod názov ak treba */
.rez-proc-right {
display: flex;
align-items: center;
gap: .4rem;
margin-left: auto;
flex-shrink: 0;
}
.rez-proc-meta {
display: flex;
align-items: center;
gap: .35rem;
font-size: .95rem;
color: var(--rez-text-faint, #6b7886);
}
.rez-proc-price {
font-size: .9rem;
font-weight: 700;
color: var(--rez-text, #1f2a36);
}
.rez-proc-duration {
font-size: .82rem;
color: var(--rez-text-faint, #6b7886);
}
.rez-proc-duration::before {
content: '·';
margin-right: .25rem;
}
/* V súhrnnom accordione krúžok a separator nechceme */
.rez-procs-accordion .rez-proc-main::before { display: none; }
.rez-procs-accordion .rez-proc-duration::before { content: none; }
.rez-proc-info-btn {
position: relative;
flex-shrink: 0;
display: flex;
align-items: center;
gap: .25rem;
padding: .2rem .55rem;
background: transparent;
border: 1px solid rgba(31, 100, 71, .3);
border-radius: 999px;
color: var(--rez-primary, #1f6447);
font-size: .76rem;
font-weight: 500;
cursor: pointer;
line-height: 1.4;
min-height: 26px;
transition: background-color .15s, border-color .15s;
}
.rez-proc-info-btn:hover {
background: rgba(31, 100, 71, .07);
border-color: var(--rez-primary, #1f6447);
}
.rez-proc-info-btn.expanded {
background: rgba(31, 100, 71, .1);
border-color: var(--rez-primary, #1f6447);
}
.rez-info-icon {
font-size: .9rem;
line-height: 1;
}
.rez-proc-details {
padding: 0 .9rem .7rem;
border-top: 1px dashed rgba(31, 100, 71, .15);
margin-top: 0;
}
.rez-proc-desc {
margin: .6rem 0 0;
font-size: .9rem;
line-height: 1.45;
color: var(--rez-text-faint, #6b7886);
white-space: pre-wrap;
}
/* Akciová kategória (pin_top=1) — pevná zlatá schéma */
.rez-cat-panel--accented {
border-color: #b07d10;
border-width: 2px;
}
.rez-cat-panel--accented > .rez-cat-header {
background: #fef8ec;
color: #6b4400;
}
.rez-cat-panel--accented > .rez-cat-header:hover {
background: #fdf3da;
}
.rez-cat-panel--accented > .rez-cat-header .rez-cat-count,
.rez-cat-panel--accented > .rez-cat-header .rez-cat-chevron {
color: #b07d10;
}
.rez-cat-panel--accented.open {
border-color: #b07d10;
box-shadow: inset 3px 0 0 #b07d10;
}
.rez-cat-panel--accented.open > .rez-cat-header {
background: #fef8ec;
}
.rez-cat-panel--accented.open .rez-cat-body {
background: #fef8ec;
border-top-color: rgba(176, 125, 16, .18);
}
/* Hviezda pred názvom akciovej kategórie */
.rez-cat-promo-star {
color: #b07d10;
margin-right: .2rem;
font-style: normal;
}
/* Badge 🏷️ na procedúre v akciovej kategórii */
.rez-proc-promo-tag {
font-style: normal;
margin-right: .25rem;
flex-shrink: 0;
}
/* Preškrtnutá pôvodná cena */
.rez-proc-orig-price {
text-decoration: line-through;
color: var(--rez-text-faint, #6b7886);
font-size: .85rem;
margin-right: .2rem;
}
/* ============================================================
Admin: Cascading customer autocomplete
============================================================ */
/* Wrapper — provides positioning context for the dropdown */
.rez-ac-wrap {
position: relative;
}
/* Floating dropdown list */
.rez-ac-dropdown {
position: absolute;
top: calc(100% + 4px);
left: 0;
right: 0;
z-index: 200;
background: #fff;
border: 1px solid rgba(31, 100, 71, .3);
border-radius: 10px;
box-shadow: 0 6px 24px rgba(0, 0, 0, .10);
max-height: 260px;
overflow-y: auto;
/* scrollbar styling */
scrollbar-width: thin;
scrollbar-color: rgba(31, 100, 71, .25) transparent;
}
.rez-ac-dropdown:empty { display: none; }
/* Individual dropdown item — 44px min-height for mobile touch */
.rez-ac-item {
display: flex;
align-items: center;
gap: .5rem;
min-height: 44px;
padding: .55rem .85rem;
cursor: pointer;
font-size: .95rem;
color: var(--rez-text, #1f2a36);
border-bottom: 1px solid rgba(31, 100, 71, .08);
transition: background .12s;
line-height: 1.35;
}
.rez-ac-item:last-child { border-bottom: none; }
.rez-ac-item:hover,
.rez-ac-item.active {
background: rgba(31, 100, 71, .09);
color: var(--rez-primary, #1f6447);
}
/* Archived marker inside dropdown item */
.rez-ac-item-archived {
font-size: .8rem;
color: var(--rez-text-faint, #6b7886);
margin-left: auto;
white-space: nowrap;
}
/* Badge shown after customer is selected */
.rez-ac-badge {
display: flex;
align-items: center;
justify-content: space-between;
gap: .4rem;
width: 100%;
box-sizing: border-box;
margin-top: .45rem;
padding: .45rem .7rem .45rem .75rem;
background: rgba(31, 100, 71, .12);
border: 1px solid rgba(31, 100, 71, .25);
border-radius: .5rem;
font-size: .82rem;
font-weight: 600;
color: var(--rez-primary, #1f6447);
line-height: 1.4;
}
/* × reset button inside the badge */
.rez-ac-badge-x {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
padding: 0;
border: none;
background: transparent;
cursor: pointer;
font-size: 1rem;
line-height: 1;
color: var(--rez-primary, #1f6447);
opacity: .7;
border-radius: 50%;
transition: opacity .15s, background .15s;
}
.rez-ac-badge-x:hover {
opacity: 1;
background: rgba(31, 100, 71, .18);
}
/* Highlight kategórie pri vybranej procedúre */
.rez-cat-panel.has-selected {
border-color: var(--rez-primary, #1f6447);
box-shadow: 0 0 0 1px var(--rez-primary, #1f6447) inset;
}
.rez-cat-panel.has-selected > .rez-cat-header {
background: #edf7f2;
}
.rez-cat-panel.has-selected .rez-cat-name {
color: var(--rez-primary, #1f6447);
}
/* Akciová kategória — zachováme gold aj pri has-selected */
.rez-cat-panel--accented.has-selected {
border-color: #b07d10;
box-shadow: 0 0 0 1px #b07d10 inset;
}
.rez-cat-panel--accented.has-selected > .rez-cat-header {
background: #fef8ec;
}
.rez-cat-panel--accented.has-selected .rez-cat-name {
color: #6b4400;
}
.rez-cat-badge {
display: inline-block;
background: var(--rez-primary, #1f6447);
color: #fff;
font-size: .75rem;
font-weight: 600;
padding: .15rem .5rem;
border-radius: 999px;
line-height: 1.2;
}
/* Danger tlačidlo (vymazať) */
.rez-btn-danger {
background-color: #fff0f0;
border-color: #f5c2c2;
color: #c0392b;
}
.rez-btn-danger:hover {
background-color: #ffe0e0;
border-color: #e08080;
color: #a93226;
}
/* Cancel page: zarovnať nadpis, box a tlačidlá na rovnakú šírku */
.rez-cancel-page {
max-width: 560px;
margin-left: auto;
margin-right: auto;
}
.rez-cancel-page .rez-result-summary {
max-width: none;
margin-left: 0;
margin-right: 0;
}
/* Zoskupenie procedúr podľa kategórie — detailný blok (confirm modal, cancel, reschedule) */
.rez-procs-grouped {
display: flex;
flex-direction: column;
gap: .6rem;
text-align: left;
width: 100%;
font-weight: 400;
}
.rez-procs-group {
display: flex;
flex-direction: column;
gap: .15rem;
}
.rez-procs-cat-header {
font-size: .78rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .04em;
color: var(--rez-primary, #1f6447);
margin-bottom: .1rem;
}
.rez-procs-item {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: .75rem;
padding-left: .1rem;
}
.rez-procs-name {
flex: 1;
min-width: 0;
color: var(--rez-text, #1f2a36);
font-weight: 500;
}
.rez-procs-dur {
flex-shrink: 0;
font-size: .85em;
color: var(--rez-text-faint, #6b7886);
font-variant-numeric: tabular-nums;
}
/* V .rez-modal-row-value zruš text-align:right pre blok so zoskupenými procedúrami */
.rez-modal-row-value:has(.rez-procs-grouped) {
text-align: left;
font-weight: 400;
flex: 1;
}
/* Inline verzia pre admin tabuľku */
.rez-procs-group-inline {
margin: 0 0 .2rem;
}
.rez-procs-group-inline:last-child { margin-bottom: 0; }
.rez-procs-cat-inline {
color: var(--rez-text-faint, #6b7886);
font-size: .88em;
margin-right: .25rem;
}
/* --- Info tooltip (otáznik vedľa hlavičky stĺpca / labelu) --- */
.rez-tip-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.1rem;
height: 1.1rem;
margin-left: .35rem;
padding: 0;
border: 1px solid var(--rez-border, #d6dde4);
border-radius: 50%;
background: var(--rez-surface-muted, #f4f6f8);
color: var(--rez-text-muted, #5b6672);
font-size: .7rem;
font-weight: 700;
line-height: 1;
cursor: pointer;
vertical-align: middle;
transition: background .15s, color .15s;
}
.rez-tip-btn:hover,
.rez-tip-btn.active {
background: var(--rez-primary, #2a7de1);
color: #fff;
border-color: var(--rez-primary, #2a7de1);
}
.rez-tip-popover {
position: absolute;
z-index: 300;
max-width: 320px;
padding: .6rem .75rem;
background: #1f2933;
color: #fff;
font-size: .82rem;
font-weight: 400;
line-height: 1.35;
text-align: left;
text-transform: none;
letter-spacing: normal;
border-radius: 8px;
box-shadow: 0 6px 20px rgba(0,0,0,.25);
white-space: normal;
}
.rez-tip-popover::before {
content: '';
position: absolute;
top: -6px;
left: 16px;
width: 0; height: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #1f2933;
}
/* ---------------------------------------------------------------- */
/* Padding for body when shared header (navbar-fixed-top) is present */
/* ---------------------------------------------------------------- */
body.with-menu { padding-top: 88px !important; }
@media (min-width: 992px) {
body.with-menu { padding-top: 106px !important; }
}
/* Day detail scroll offset to prevent menu overlap */
#day-detail { scroll-margin-top: 110px; }
@media (min-width: 992px) {
#day-detail { scroll-margin-top: 128px; }
}
/* ---------------------------------------------------------------- */
/* Sticky footer + vertical centering for short pages */
/* (chyba, potvrdene, cancel, reschedule) */
/* ---------------------------------------------------------------- */
body.rez-page-short {
display: flex;
flex-direction: column;
min-height: 100vh;
min-height: 100dvh;
}
body.rez-page-short > .rez-app {
flex: 1 1 auto;
display: flex;
flex-direction: column;
justify-content: center;
}
body.rez-page-short > .rez-app > .rez-container {
width: 100%;
}
/* ---------------------------------------------------------------- */
/* On reservation site: unify Rezervácie nav item with other links */
/* (no CTA button styling — current page is indicated by underline) */
/* ---------------------------------------------------------------- */
.nav-rezervacie .nav-link,
.nav-rezervacie .nav-link:hover,
.nav-rezervacie .nav-link:focus {
font-weight: inherit !important;
color: inherit !important;
background-color: transparent !important;
border: 0 !important;
padding: inherit !important;
transform: none !important;
}
@media (min-width: 992px) {
.nav-rezervacie { margin-left: 0 !important; }
.nav-rezervacie .nav-link,
.nav-rezervacie .nav-link:hover,
.nav-rezervacie .nav-link:focus {
background-color: transparent !important;
color: inherit !important;
padding: inherit !important;
}
}
@media (min-width: 992px) and (max-width: 1199.98px) {
.nav-rezervacie .nav-link {
padding: inherit !important;
font-size: inherit !important;
}
.nav-rezervacie { margin-left: 0 !important; }
}
/* ---------------------------------------------------------------- */
/* Index page background color */
/* ---------------------------------------------------------------- */
body.with-menu {
background-color: #edefeb;
}
body > .rez-app {
background-color: #edefeb;
}
.rez-container {
background-color: #edefeb;
}
/* ---------------------------------------------------------------- */
/* Admin rezervácie — Master-detail layout */
/* ---------------------------------------------------------------- */
/* Clickable table rows */
.rez-tbl-row {
cursor: pointer;
transition: background .12s;
}
.rez-tbl-row:hover td { background: rgba(31,100,71,.04); }
.rez-tbl-row.selected td { background: rgba(31,100,71,.09); }
.rez-procs-more {
font-size: .82em;
color: var(--rez-text-faint);
white-space: nowrap;
}
/* Split layout */
.rez-admin-list-layout {
display: flex;
gap: 1.25rem;
align-items: flex-start;
}
.rez-admin-list-main { flex: 1; min-width: 0; }
/* Detail panel — desktop */
.rez-admin-detail-panel {
width: 340px;
flex-shrink: 0;
background: var(--rez-surface, #fff);
border: 1px solid var(--rez-border, #d6dde4);
border-radius: 12px;
overflow: hidden;
position: sticky;
top: 1rem;
max-height: calc(100vh - 2rem);
overflow-y: auto;
box-shadow: 0 4px 16px rgba(0,0,0,.07);
}
.rez-admin-detail-hd {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1rem 1.1rem .75rem;
border-bottom: 1px solid var(--rez-border, #d6dde4);
position: sticky;
top: 0;
background: var(--rez-surface, #fff);
z-index: 1;
}
.rez-admin-detail-title {
font-size: 1rem;
font-weight: 600;
margin: 0;
color: var(--rez-text);
}
.rez-admin-detail-close {
display: flex; align-items: center; justify-content: center;
width: 1.75rem; height: 1.75rem;
border: none; background: transparent;
color: var(--rez-text-faint); font-size: 1rem;
cursor: pointer; border-radius: 6px;
transition: background .15s, color .15s;
}
.rez-admin-detail-close:hover { background: rgba(0,0,0,.06); color: var(--rez-text); }
.rez-admin-detail-body { padding: .75rem 1.1rem; }
.rez-admin-detail-actions { padding: .5rem 1.1rem 1rem; }
/* Detail rows inside panel */
.rez-detail-row {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: .5rem;
padding: .35rem 0;
font-size: .9rem;
border-bottom: 1px solid rgba(0,0,0,.04);
}
.rez-detail-row:last-child { border-bottom: none; }
.rez-detail-label {
color: var(--rez-text-faint);
font-size: .82rem;
flex-shrink: 0;
}
.rez-detail-row a { color: var(--rez-primary); text-decoration: none; }
.rez-detail-row a:hover { text-decoration: underline; }
.rez-detail-divider {
border: none; border-top: 1px solid var(--rez-border);
margin: .6rem 0;
}
.rez-detail-total { font-size: .95rem; margin-top: .25rem; }
.rez-detail-proc-group { margin-bottom: .6rem; }
.rez-detail-proc-group:last-child { margin-bottom: 0; }
.rez-detail-proc-cat {
font-size: .75rem; font-weight: 600;
text-transform: uppercase; letter-spacing: .04em;
color: var(--rez-primary); margin-bottom: .2rem;
}
.rez-detail-proc-item {
display: flex; justify-content: space-between; align-items: baseline;
gap: .5rem; padding: .2rem 0;
font-size: .88rem;
}
.rez-detail-proc-name { flex: 1; min-width: 0; }
.rez-detail-proc-meta { flex-shrink: 0; color: var(--rez-text-faint); font-size: .82rem; }
/* Mobile: cards */
.rez-admin-cards { display: none; flex-direction: column; gap: .65rem; }
.rez-admin-card {
background: var(--rez-surface, #fff);
border: 1.5px solid rgba(31,100,71,.2);
border-radius: 10px;
padding: .85rem 1rem;
display: flex; flex-direction: column; gap: .4rem;
}
.rez-admin-card.status-cancelled { opacity: .6; }
.rez-admin-card-hd {
display: flex; justify-content: space-between; align-items: flex-start; gap: .5rem;
}
.rez-admin-card-hd .drag-handle {
flex-shrink: 0; align-self: center; line-height: 1;
}
.rez-admin-card-dt { font-size: .88rem; font-weight: 600; color: var(--rez-text); }
.rez-admin-card-name { font-weight: 500; font-size: .95rem; flex: 1; min-width: 0; text-align: left; }
.rez-admin-card-procs { font-size: .84rem; color: var(--rez-text-faint); }
.rez-admin-card-ft {
display: flex; justify-content: space-between; align-items: center;
margin-top: .25rem;
}
.rez-admin-card-price { font-weight: 600; font-size: .95rem; }
/* Responsive: mobile = cards, no table */
@media (max-width: 767px) {
.rez-admin-list-layout { flex-direction: column; }
.rez-admin-list-main { width: 100vw; margin-left: calc(-50vw + 50%); }
.rez-admin-table-wrap { display: none; }
.rez-admin-cards { display: flex; padding: 0; gap: .4rem; }
}
/* Skry browser dropdown arrow na v admin filtroch */
#f-utm::-webkit-calendar-picker-indicator { display: none !important; }
#f-utm::-webkit-list-button { display: none !important; }
#f-utm { appearance: textfield; -webkit-appearance: textfield; }
@media (max-width: 767px) {
/* Kompaktnejšia karta — viac do strán, menej vertikálneho priestoru */
.rez-admin-cards .rez-admin-card { padding: .55rem .7rem; gap: .25rem; border-radius: 8px; }
.rez-admin-card-hd { gap: .35rem; }
.rez-admin-card-dt { font-size: .82rem; }
.rez-admin-card-name { font-size: .9rem; }
.rez-admin-card-procs { font-size: .78rem; line-height: 1.3; }
.rez-admin-card-ft { margin-top: .1rem; }
.rez-admin-card-price { font-size: .9rem; }
.rez-admin-detail-panel {
position: fixed;
top: auto;
bottom: 0; left: 0; right: 0;
width: auto;
max-height: 85vh;
height: auto;
border-radius: 16px 16px 0 0;
border: none;
border-top: 1px solid var(--rez-border);
box-shadow: 0 -4px 32px rgba(0,0,0,.18);
z-index: 600;
display: flex;
flex-direction: column;
}
.rez-admin-detail-body {
flex: 0 1 auto;
overflow-y: auto;
}
}
/* ── Procedúry picker — accordion v admin modali (kompaktný) ─────────── */
.rez-procs-accordion {
border: 1px solid var(--rez-border);
border-radius: 8px;
overflow: hidden;
}
/* Kompaktné overrides pre cat-panel/header/body/proc-row v admin modali */
.rez-procs-accordion .rez-cat-panel { border-radius: 0; border-bottom: 1px solid var(--rez-border); }
.rez-procs-accordion .rez-cat-panel:last-child { border-bottom: none; }
.rez-procs-accordion .rez-cat-header {
padding: .4rem .75rem;
font-size: .86rem;
border-radius: 0;
gap: .4rem;
}
.rez-procs-accordion .rez-cat-icon { display: none; }
.rez-procs-accordion .rez-cat-count { font-size: .76rem; }
.rez-procs-accordion .rez-cat-badge { font-size: .74rem; padding: .08rem .4rem; }
.rez-procs-accordion .rez-cat-body { padding: 0; }
.rez-procs-accordion .rez-proc-row {
padding: .12rem .75rem .12rem 1.25rem;
font-size: .84rem;
min-height: 0;
border-radius: 0;
border-bottom: 1px solid rgba(0,0,0,.04);
}
.rez-procs-accordion .rez-proc-row:last-child { border-bottom: none; }
.rez-procs-accordion .rez-proc-main { gap: .25rem; }
.rez-procs-accordion .rez-proc-meta { gap: .4rem; }
.rez-procs-accordion .rez-proc-price,
.rez-procs-accordion .rez-proc-duration { font-size: .76rem; }
.rez-procs-summary {
margin-top: .4rem; font-size: .88rem; color: var(--rez-text-faint);
min-height: 1.4em;
}
.rez-procs-summary.has-selection { color: var(--rez-primary); font-weight: 600; }
/* ── Admin modaly – opravy pre mobile ────────────────────────────────── */
@media (max-width: 768px) {
/* Všetky rez-form-row v admin modaloch zostanú 2-stĺpcové */
#edit-modal .rez-form-row,
#new-modal .rez-form-row {
grid-template-columns: 1fr 1fr;
}
#edit-modal .rez-form-group,
#new-modal .rez-form-group {
margin-bottom: .65rem;
}
}
/* ── Procedúry accordion — skupiny podľa kategórie ────────────────────── */
/* Desktop: hlavička skupiny v tabuľke */
.rez-admin-table tr.rez-cat-group-header td {
background: var(--rez-bg, #f7f7f5);
font-weight: 600;
font-size: .88rem;
cursor: pointer;
user-select: none;
padding: .45rem 1rem;
border-bottom: 1px solid var(--rez-border);
color: var(--rez-text);
}
.rez-admin-table tr.rez-cat-group-header:hover td { background: rgba(0,0,0,.04); }
.rez-cat-toggle { display: inline-block; width: 1rem; font-size: .8rem; opacity: .6; }
.rez-cat-count { font-weight: 400; font-size: .8rem; color: var(--rez-text-faint); margin-left: .4rem; }
.rez-cat-group.collapsed tr:not(.rez-cat-group-header) { display: none; }
/* Mobile: sekcie s kategóriami v kartách */
.rez-admin-cards { gap: 1rem; }
.rez-admin-cat-section { display: flex; flex-direction: column; gap: 0; }
.rez-admin-cat-section-header {
background: var(--rez-bg, #f7f7f5);
border: 1.5px solid rgba(31,100,71,.15);
border-radius: 10px 10px 0 0;
padding: .6rem 1rem;
cursor: pointer;
user-select: none;
display: flex;
align-items: center;
gap: .5rem;
font-weight: 600;
font-size: .9rem;
color: var(--rez-text);
}
.rez-admin-cat-section.collapsed .rez-admin-cat-section-header {
border-radius: 10px;
margin-bottom: 0;
}
.rez-admin-cat-section-header:hover { background: rgba(31,100,71,.07); }
.rez-admin-cat-section-cards { display: flex; flex-direction: column; gap: .5rem; padding: .5rem 0 .25rem; }
.rez-admin-cat-section.collapsed .rez-admin-cat-section-cards { display: none; }
/* Karty vnútri sekcie – trochu zarovnané */
.rez-admin-cat-section-cards .rez-admin-card:first-child { border-radius: 0 0 0 0; }
.rez-admin-cat-section-cards .rez-admin-card:last-child { border-radius: 0 0 10px 10px; }
.rez-admin-cat-section-cards .rez-admin-card { border-radius: 0; border-top: none; }
.rez-admin-cat-section-cards .rez-admin-card:first-child { border-top: 1.5px solid rgba(31,100,71,.2); }
/* Modal overlays (incl. dynamicke choose3) musia byt nad detail panelom (z-index 600) */
.rez-modal-overlay { z-index: 1000; }
/* Help text styling */
.rez-help-text {
font-size: 0.85rem;
color: var(--rez-text-faint);
}
.rez-help-text a {
color: inherit;
text-decoration: underline;
}
.rez-help-text a:hover {
opacity: 0.7;
}
/* Centered title with green color */
.rez-section-title-centered {
text-align: center;
color: var(--rez-primary);
}
/* Center section subtitle */
.rez-section-subtitle {
text-align: center;
}
/* ============================================================
HERO – úvod rezervácie (minimalistická elegancia)
============================================================ */
.rez-hero {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 1.5rem 0 1.25rem;
margin-bottom: 1.25rem;
border-bottom: 1px solid var(--rez-divider);
}
/* Avatar – kruh s placeholderom */
.rez-hero-avatar {
position: relative;
width: 88px;
height: 88px;
border-radius: 50%;
margin-bottom: 1rem;
overflow: hidden;
background: var(--rez-primary-light);
box-shadow:
0 0 0 4px #ffffff,
0 0 0 5px rgba(31, 100, 71, 0.18),
0 6px 18px rgba(31, 100, 71, 0.12);
display: flex;
align-items: center;
justify-content: center;
}
.rez-hero-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
position: relative;
z-index: 2;
}
.rez-hero-avatar-fallback {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--rez-font-display);
font-size: 2.25rem;
font-weight: 500;
color: var(--rez-primary);
letter-spacing: 0.02em;
z-index: 1;
}
/* Eyebrow – malý štítok nad nadpisom */
.rez-hero-eyebrow {
margin: 0 0 0.5rem;
font-size: 0.75rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--rez-primary);
font-weight: 600;
}
/* Personálne oslovenie */
.rez-hero-greeting {
margin: 0.5rem 0 0;
max-width: 38rem;
font-size: 1rem;
line-height: 1.6;
color: var(--rez-text-muted);
}
.rez-hero-greeting strong {
color: var(--rez-text);
font-weight: 600;
}
/* Trust bar */
.rez-trust-bar {
list-style: none;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 1.25rem 1.75rem;
padding: 0;
margin: 1.25rem 0 0;
font-size: 0.8125rem;
color: var(--rez-text-muted);
}
.rez-trust-item {
display: inline-flex;
align-items: center;
gap: 0.4rem;
white-space: nowrap;
}
.rez-trust-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.85rem;
height: 1.85rem;
border-radius: 50%;
background: var(--rez-primary-light);
color: var(--rez-primary);
font-size: 1rem;
line-height: 1;
}
/* Slabšie glyphs (stopky, šípka kruhu) zväčš o trochu viac aby boli vizuálne rovnocenné */
.rez-trust-item:nth-child(1) .rez-trust-icon,
.rez-trust-item:nth-child(3) .rez-trust-icon {
font-size: 1.15rem;
font-weight: 700;
}
/* ============================================================
HELP CARD
============================================================ */
.rez-help-card {
display: flex;
align-items: flex-start;
gap: 0.85rem;
margin: 1.5rem auto 0;
max-width: 32rem;
padding: 1rem 1.1rem;
background: var(--rez-primary-light);
border: 1px solid rgba(31, 100, 71, 0.18);
border-radius: 14px;
}
.rez-help-card-icon {
flex-shrink: 0;
font-size: 1.25rem;
line-height: 1;
width: 2.25rem;
height: 2.25rem;
display: flex;
align-items: center;
justify-content: center;
background: #ffffff;
border-radius: 50%;
box-shadow: 0 2px 6px rgba(31, 100, 71, 0.08);
}
.rez-help-card-body {
flex: 1;
min-width: 0;
}
.rez-help-card-title {
margin: 0 0 0.15rem;
font-size: 0.95rem;
font-weight: 600;
color: var(--rez-text);
}
.rez-help-card-text {
margin: 0 0 0.6rem;
font-size: 0.875rem;
color: var(--rez-text-muted);
line-height: 1.5;
}
.rez-help-card-contacts {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.rez-help-card-pill {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.35rem 0.75rem;
background: #ffffff;
border: 1px solid rgba(31, 100, 71, 0.18);
border-radius: 999px;
font-size: 0.8125rem;
color: var(--rez-primary);
text-decoration: none;
font-weight: 500;
transition: background 0.15s ease, border-color 0.15s ease;
}
.rez-help-card-pill:hover,
.rez-help-card-pill:focus-visible {
background: var(--rez-primary);
border-color: var(--rez-primary);
color: #ffffff;
}
/* Mobile úpravy */
@media (max-width: 480px) {
.rez-hero-avatar {
width: 76px;
height: 76px;
}
.rez-hero-avatar-fallback {
font-size: 2rem;
}
.rez-trust-bar {
gap: 0.75rem 1.25rem;
font-size: 0.75rem;
}
.rez-help-card {
flex-direction: column;
align-items: stretch;
text-align: left;
}
}
/* Skryť slug+poradie v admin karte kategórie */
.rez-admin-card-cat-meta {
display: none;
}
/* ============================================================
M1 — Admin Calendar Mini-Timeline (mesačný/týždenný view)
============================================================ */
/* V admin pohľade: všetky bunky kalendára (vrátane prázdnych leading) majú
uniformnú výšku, žiadne aspect-ratio, aby grid neskreslil šírku stĺpcov. */
.rez-admin .rez-calendar-grid .rez-calendar-day {
aspect-ratio: auto;
min-height: 92px;
}
.rez-admin .rez-calendar-grid .rez-calendar-day.out-of-month {
background: var(--rez-surface);
border-color: transparent;
}
/* Bunka dňa: vyššia, aby sa zmestil mini-timeline */
.rez-calendar-day.has-timeline {
min-height: 92px;
padding: 4px 4px 5px;
display: flex;
flex-direction: column;
align-items: stretch; /* override default center */
justify-content: flex-start;/* override default center */
gap: 3px;
position: relative;
cursor: pointer;
aspect-ratio: auto; /* override default 1:1 */
}
@media (max-width: 480px) {
.rez-calendar-day.has-timeline {
min-height: 88px;
padding: 3px 3px 4px;
}
}
/* Hlavička bunky: číslo + count */
.rez-cal-cell-hd {
display: flex;
align-items: center;
justify-content: space-between;
gap: 2px;
flex-shrink: 0;
}
.rez-calendar-day.has-timeline .rez-calendar-day-num {
font-size: 0.78rem;
font-weight: 600;
color: var(--rez-text);
line-height: 1;
padding: 2px 1px;
}
.rez-calendar-day.has-timeline.past .rez-calendar-day-num {
color: var(--rez-text-faint);
font-weight: 400;
}
/* Dnešok – výrazný zelený rámček celej bunky (cez inset box-shadow,
aby sa neposunul layout) + tučné zelené číslo + jemné pozadie hlavičky.
Box-shadow nemení rozmery → os zostáva zarovnaná naprieč riadkom. */
.rez-calendar-day.has-timeline.today {
box-shadow: inset 0 0 0 2px var(--rez-primary);
border-radius: 6px;
}
.rez-calendar-day.has-timeline.today .rez-calendar-day-num {
color: var(--rez-primary);
font-weight: 700;
position: relative;
}
/* Malý "DNES" indikátor – diskrétny pruh pod číslom v rámci hlavičky */
.rez-calendar-day.has-timeline.today .rez-cal-cell-hd {
background: rgba(31, 100, 71, 0.10);
border-radius: 3px;
padding: 1px 3px;
margin: -2px -1px 0;
}
/* Count badge (počet rezervácií) */
.rez-cal-cell-count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 1.05rem;
height: 1.05rem;
padding: 0 4px;
border-radius: 999px;
background: rgba(31, 100, 71, 0.14);
color: var(--rez-primary);
font-size: 0.66rem;
font-weight: 700;
line-height: 1;
}
.rez-cal-cell-count.is-empty { display: none; }
/* Mini-timeline */
.rez-cal-cell-mt {
position: relative;
flex: 1;
width: 100%;
border-radius: 3px;
overflow: hidden;
/* off-hours = šrafovanie diagonálne */
background:
repeating-linear-gradient(
135deg,
rgba(31, 100, 71, 0.08) 0 2px,
rgba(255, 255, 255, 0) 2px 5px
),
#ececec;
border: 1px solid rgba(0, 0, 0, 0.06);
min-height: 50px;
}
/* Working hours band — biely prekryv off-hours šrafu */
.rez-mt-work {
position: absolute;
left: 0;
right: 0;
background: #ffffff;
}
/* Segmenty rezervácií — z-indexy: cancelled < pending < active < blocked */
.rez-mt-seg {
position: absolute;
left: 0;
right: 0;
border-radius: 0;
border: 1px solid rgba(0, 0, 0, 0.18);
}
.rez-mt-seg.cancelled {
background: rgba(220, 53, 69, 0.32); /* jemná ružová */
z-index: 1;
}
.rez-mt-seg.pending {
background: #fff3a0; /* svetlá žltá */
z-index: 2;
}
.rez-mt-seg.active {
background: #3a8866; /* mäkšia zelená */
z-index: 3;
}
.rez-mt-seg.blocked {
background: rgba(70, 72, 69, 0.55); /* tmavá sivá */
z-index: 4;
}
.rez-mt-seg.forced {
background: rgba(234, 145, 12, 0.55); /* oranžová — forced slot */
z-index: 3;
}
/* Hover/touch feedback na bunke */
.rez-calendar-day.has-timeline:hover .rez-cal-cell-mt {
border-color: rgba(31, 100, 71, 0.35);
}
.rez-calendar-day.has-timeline.selected .rez-cal-cell-mt {
outline: 2px solid var(--rez-primary);
outline-offset: -1px;
}
/* Víkend – jemný odlišný odtieň pozadia bunky */
.rez-calendar-day.has-timeline.weekend {
background: #fafaf6;
}
/* Out-of-month vo verzii s timeline – hlavne čísla zľahka stlmiť */
.rez-calendar-day.has-timeline.out-of-month {
opacity: 0.45;
}
/* Status tag malý, ak je deň zatvorený / blokovaný / sviatok */
.rez-calendar-day.has-timeline .rez-calendar-day-status {
position: absolute;
bottom: 4px;
left: 4px;
right: 4px;
font-size: 0.6rem;
text-align: center;
background: rgba(255, 255, 255, 0.85);
color: var(--rez-text-muted);
padding: 1px 2px;
border-radius: 2px;
pointer-events: none;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Pri zatvorenom dni: celý timeline ako šraf bez bieleho work-bandu (riešené v JS) */
.rez-calendar-day.has-timeline.closed .rez-cal-cell-mt {
/* tmavšie šrafovanie pre vizuálne odlíšenie */
background:
repeating-linear-gradient(
135deg,
rgba(70, 72, 69, 0.18) 0 2px,
rgba(255, 255, 255, 0) 2px 5px
),
#e6e4df;
}
/* Skry staré time-slot pily pri novom timeline view */
.rez-calendar-day.has-timeline .rez-time-slot,
.rez-calendar-day.has-timeline .rez-calendar-day-more {
display: none;
}
/* Mesačný grid: na mobile menšie gapy a fixná výška */
@media (max-width: 768px) {
.rez-calendar-grid {
gap: 1px;
}
/* grid-template-rows odstraňujeme — grid auto-sizing podľa obsahu,
prázdny 6. riadok sa teda nezobrazí ak mesiac potrebuje len 5 */
}
/* Header lepšie využiť priestor (sticky pri scrolle) */
.rez-calendar-header {
position: sticky;
top: 0;
z-index: 5;
}
/* ============================================================
M2 — Fullscreen Day Detail Modal s timeline (60 px/h)
============================================================ */
/* Overlay celá obrazovka, žiadne padding */
.rez-modal-overlay-fs {
padding: 0 !important;
}
.rez-modal-overlay-fs.open {
align-items: stretch;
justify-content: stretch;
}
/* Modal panel — fullscreen na mobile */
.rez-day-modal {
width: 100%;
height: 100%;
background: #ffffff;
border-radius: 0;
display: flex;
flex-direction: column;
overflow: hidden;
max-width: none;
max-height: none;
box-shadow: none;
padding: 0;
}
/* Hlavička (sticky vrchol) — 2 riadky: close v hornom, prev/title/next dolu */
.rez-day-modal-hd {
display: flex;
flex-direction: column;
gap: .35rem;
padding: .35rem .5rem .55rem;
background: var(--rez-primary);
color: #ffffff;
flex-shrink: 0;
}
.rez-day-modal-hd-top {
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.rez-day-modal-refresh {
position: absolute;
right: 0;
background: rgba(255, 255, 255, 0.15);
color: #ffffff;
border: 0;
width: 2rem;
height: 2rem;
border-radius: 50%;
font-size: 1.1rem;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background .15s;
}
.rez-day-modal-refresh:disabled {
opacity: 0.5;
cursor: default;
}
@keyframes rez-spin {
to { transform: rotate(360deg); }
}
.rez-day-modal-refresh.spinning {
animation: rez-spin 0.7s linear infinite;
}
.rez-day-modal-hd-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: .5rem;
}
.rez-day-modal-title {
margin: 0;
font-size: 1.05rem;
font-weight: 500;
text-align: center;
font-family: var(--rez-font-display);
flex: 1;
}
.rez-day-modal-nav,
.rez-day-modal-close {
background: rgba(255, 255, 255, 0.15);
color: #ffffff;
border: 0;
width: 2rem;
height: 2rem;
border-radius: 50%;
font-size: 1.1rem;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background .15s;
}
.rez-day-modal-nav:hover,
.rez-day-modal-close:hover,
.rez-day-modal-refresh:hover {
background: rgba(255, 255, 255, 0.3);
}
/* Telo (scrollovateľné) */
.rez-day-modal-body {
flex: 1 1 auto;
overflow-y: auto;
background: #fafaf6;
padding: .5rem .25rem;
-webkit-overflow-scrolling: touch;
}
/* Timeline kontajner – tl je full-width relatívne v paddingu wrap-u,
hour-labels visia naľavo v paddingu (negatívnym left). */
.rez-day-tl-wrap {
position: relative;
padding: .25rem 1rem 1rem 3.5rem; /* miesto pre hour labels vľavo */
}
.rez-day-tl {
position: relative;
background:
repeating-linear-gradient(
135deg,
rgba(31, 100, 71, 0.08) 0 2px,
rgba(255, 255, 255, 0) 2px 5px
),
#ececec;
border: 1px solid rgba(0, 0, 0, 0.08);
border-radius: 6px;
/* Výška sa nastaví v JS: total_hours * HOUR_PX */
}
.rez-day-tl-hour-line {
position: absolute;
left: 0; right: 0;
height: 0;
border-top: 1px dashed rgba(31, 100, 71, 0.45);
z-index: 1;
}
.rez-day-tl-hour-label {
position: absolute;
left: -3.25rem;
width: 3rem;
text-align: right;
padding-right: .35rem;
font-size: 0.72rem;
color: var(--rez-text-faint);
transform: translateY(-50%);
pointer-events: none;
}
.rez-day-tl-half {
position: absolute;
left: 0; right: 0;
height: 0;
border-top: 1px dashed rgba(0, 0, 0, 0.08);
}
/* Polhodinové guides — bodkované, na bielom aj na šrafe viditeľné */
.rez-day-tl-half {
border-top: 1px dotted rgba(31, 100, 71, 0.45) !important;
z-index: 1 !important;
}
/* Hint — preview slotu (tap zobrazí, long-press potvrdí) */
.rez-day-tl-tap {
position: absolute;
left: 4px; right: 4px;
border-radius: 4px;
background: rgba(31, 100, 71, 0.18);
border: 2px solid var(--rez-primary);
pointer-events: none;
z-index: 6;
opacity: 0;
display: flex;
align-items: center;
justify-content: center;
color: var(--rez-primary);
font-size: 0.78rem;
font-weight: 700;
text-align: center;
padding: 0 4px;
transition: opacity .12s, top .15s, height .15s;
white-space: nowrap;
overflow: hidden;
}
.rez-day-tl-tap.visible {
opacity: 1;
}
.rez-day-tl-tap.holding {
background: rgba(31, 100, 71, 0.32);
animation: rez-tap-hold 0.5s linear forwards;
}
.rez-day-tl-tap.force {
background: rgba(220, 53, 69, 0.15);
border-color: var(--rez-error);
color: var(--rez-error);
}
.rez-day-tl-tap.force.holding {
background: rgba(220, 53, 69, 0.28);
}
@keyframes rez-tap-hold {
0% { box-shadow: inset 0 0 0 0 rgba(31, 100, 71, 0.4); }
100% { box-shadow: inset 0 -100% 0 0 rgba(31, 100, 71, 0.4); }
}
/* Working hours – biely prekryv */
.rez-day-tl-work {
position: absolute;
left: 0; right: 0;
background: #ffffff;
z-index: 0;
}
/* Aktuálny čas – červená čiara (len pre dnes) */
.rez-day-tl-now {
position: absolute;
left: 0; right: 0;
height: 0;
border-top: 2px solid #dc3545;
z-index: 5;
pointer-events: none;
}
.rez-day-tl-now::before {
content: '';
position: absolute;
left: -4px;
top: -5px;
width: 8px;
height: 8px;
border-radius: 50%;
background: #dc3545;
}
/* Segmenty (rezervácie) — väčšie ako mini-timeline, klikateľné, s textom */
.rez-day-tl-seg {
position: absolute;
left: 4px;
right: 4px;
border-radius: 5px;
padding: 4px 6px;
font-size: 0.78rem;
line-height: 1.2;
cursor: pointer;
overflow: hidden;
transition: transform .12s, box-shadow .12s;
z-index: 3;
border: 1px solid rgba(0, 0, 0, 0.18);
}
.rez-day-tl-seg:active {
transform: scale(0.98);
}
.rez-day-tl-seg.active {
background: #3a8866;
color: #ffffff;
z-index: 4;
}
.rez-day-tl-seg.pending {
background: #fff3a0;
color: #5a4a00;
z-index: 3;
}
.rez-day-tl-seg.cancelled {
background: rgba(220, 53, 69, 0.28);
color: #5a1a22;
text-decoration: line-through;
z-index: 2;
right: auto;
width: calc(42% - 4px);
opacity: 0.6;
}
.rez-day-tl-seg.blocked {
background: rgba(70, 72, 69, 0.7);
color: #ffffff;
z-index: 5;
cursor: default;
}
.rez-day-tl-seg-time {
font-weight: 700;
font-size: 0.7rem;
display: block;
opacity: 0.95;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.rez-day-tl-seg-name {
font-weight: 500;
display: block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.rez-day-tl-seg-meta {
font-size: 0.68rem;
opacity: 0.85;
display: block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.rez-day-tl-seg-meta--wrap {
white-space: normal;
overflow: visible;
text-overflow: clip;
}
.rez-day-tl-seg-name--inline {
display: inline;
white-space: nowrap;
}
.rez-day-tl-seg-meta--inline {
display: inline;
white-space: nowrap;
}
/* Pätička s pomocným textom */
.rez-day-modal-ft {
flex-shrink: 0;
background: #ffffff;
border-top: 1px solid var(--rez-divider);
padding: .5rem .75rem;
text-align: center;
}
.rez-day-modal-hint {
margin: 0;
font-size: 0.72rem;
color: var(--rez-text-faint);
line-height: 1.3;
}
/* Tap target visual feedback pri hovere/touch nad voľným časom */
.rez-day-tl.tap-hint::after {
content: '+';
position: absolute;
left: 50%;
transform: translateX(-50%);
font-size: 1.5rem;
color: var(--rez-primary);
opacity: 0;
transition: opacity .12s;
pointer-events: none;
z-index: 6;
}
/* Status banner v modali (Sviatok / Zatvorené / Override) */
.rez-day-modal-banner {
margin: .5rem .25rem;
padding: .5rem .75rem;
border-radius: 6px;
font-size: 0.85rem;
text-align: center;
}
.rez-day-modal-banner.holiday,
.rez-day-modal-banner.closed {
background: rgba(70, 72, 69, 0.10);
color: var(--rez-text-muted);
}
.rez-day-modal-banner.override {
background: rgba(25, 135, 84, 0.10);
color: var(--rez-success);
border: 1px solid rgba(25, 135, 84, 0.3);
}
.rez-day-modal-banner.blocked {
background: rgba(220, 53, 69, 0.10);
color: var(--rez-error);
border: 1px solid rgba(220, 53, 69, 0.3);
}
/* ============================================================
M4 — Akcie sheet pre day-modal (block/unblock/override...)
============================================================ */
.rez-day-actions-sheet {
position: absolute;
left: 0; right: 0; bottom: 0;
background: #ffffff;
border-top: 1px solid var(--rez-border);
box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.15);
border-radius: 16px 16px 0 0;
padding: 0 0 .5rem;
max-height: 70vh;
overflow-y: auto;
z-index: 50;
transform: translateY(100%);
transition: transform .22s ease-out;
}
.rez-day-actions-sheet:not([hidden]) {
transform: translateY(0);
}
/* Backdrop pri otvorenom sheete */
.rez-day-actions-backdrop {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.32);
z-index: 40;
}
.rez-day-actions-sheet-hd {
display: flex;
align-items: center;
justify-content: space-between;
padding: .85rem 1rem .5rem;
border-bottom: 1px solid var(--rez-divider);
}
.rez-day-actions-sheet-title {
margin: 0;
font-size: 1rem;
font-weight: 600;
color: var(--rez-text);
font-family: var(--rez-font-display);
}
.rez-day-actions-sheet-close {
background: var(--rez-surface);
border: 0;
width: 2rem;
height: 2rem;
border-radius: 50%;
font-size: 1rem;
cursor: pointer;
color: var(--rez-text-muted);
display: inline-flex;
align-items: center;
justify-content: center;
}
.rez-day-actions-list {
display: flex;
flex-direction: column;
gap: 0;
padding: .5rem 0;
}
.rez-day-action-btn {
display: flex;
align-items: center;
gap: .75rem;
padding: .9rem 1.1rem;
background: transparent;
border: 0;
border-bottom: 1px solid var(--rez-divider);
font: inherit;
font-size: 0.95rem;
color: var(--rez-text);
cursor: pointer;
text-align: left;
width: 100%;
transition: background .12s;
}
.rez-day-action-btn:last-child { border-bottom: 0; }
.rez-day-action-btn:hover,
.rez-day-action-btn:focus-visible {
background: rgba(31, 100, 71, 0.06);
outline: none;
}
.rez-day-action-btn .rez-day-action-icon {
flex-shrink: 0;
width: 1.5rem;
height: 1.5rem;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1rem;
}
.rez-day-action-btn .rez-day-action-text {
flex: 1;
min-width: 0;
}
.rez-day-action-btn .rez-day-action-title {
display: block;
font-weight: 500;
}
.rez-day-action-btn .rez-day-action-meta {
display: block;
font-size: 0.8rem;
color: var(--rez-text-faint);
margin-top: 1px;
}
.rez-day-action-btn.danger {
color: var(--rez-error);
}
.rez-day-action-btn.danger .rez-day-action-icon {
color: var(--rez-error);
}
.rez-day-action-btn.success {
color: var(--rez-success);
}
.rez-day-action-btn.success .rez-day-action-icon {
color: var(--rez-success);
}
.rez-day-action-btn:disabled {
color: var(--rez-text-faint);
cursor: not-allowed;
}
/* Klikateľný blocked segment v timeline */
.rez-day-tl-seg.blocked {
cursor: pointer;
}
/* M4 polish — inline akcie panel pod timeline (namiesto bottom-sheet) */
.rez-day-actions-inline {
margin: 1rem .25rem 0;
padding: .85rem 0 .5rem;
border-top: 1px solid var(--rez-divider);
background: #ffffff;
border-radius: 8px;
border: 1px solid var(--rez-divider);
}
.rez-day-actions-inline-title {
margin: 0 1rem .5rem;
font-size: .9rem;
font-weight: 600;
color: var(--rez-text);
text-transform: uppercase;
letter-spacing: .05em;
font-family: var(--rez-font-display);
}
/* Z-index — modaly nad day-modal majú prioritu */
#day-modal { z-index: 900; }
#prompt-modal { z-index: 1100; }
#detail-modal { z-index: 1100; }
/* alert-modal už má 1200 (nad prompt) — necháme */
/* ============================================================
Dnesok — vzdy viditelny, opacity nikdy nepadne na .4 (aj ked je "past").
Cislo dostane zeleny kruzok ako vacsia kalendarova app.
============================================================ */
.rez-calendar-day.today {
opacity: 1 !important;
border-color: rgba(31, 100, 71, 0.14) !important; /* slaby border ako past dni */
background: transparent !important;
}
.rez-calendar-day.today .rez-calendar-day-num {
color: var(--rez-primary);
font-weight: 700;
background: rgba(31, 100, 71, 0.14);
border-radius: 50%;
width: 1.6em;
height: 1.6em;
display: inline-flex;
align-items: center;
justify-content: center;
}
/* ============================================================
Info / alert ikony na informačných stránkach (potvrdene, chyba, cancel)
Na mobile sú príliš malé — zväčšíme ich.
============================================================ */
.rez-alert-icon {
font-size: 1.75rem;
min-width: 1.75rem;
text-align: center;
}
@media (max-width: 480px) {
.rez-alert-icon {
font-size: 2rem;
min-width: 2rem;
}
.rez-result-icon {
width: 88px;
height: 88px;
font-size: 3rem;
}
}
/* ── Draft rezervačný blok ──────────────────────────────── */
.rez-draft-block {
position: absolute;
left: 4px;
right: 4px;
background: #3b82f6;
color: #fff;
border: 2px dashed rgba(255,255,255,0.55);
border-radius: 6px;
z-index: 10;
cursor: grab;
user-select: none;
touch-action: none;
font-size: 0.78rem;
line-height: 1.25;
overflow: visible;
box-shadow: 0 2px 8px rgba(59,130,246,0.35);
}
.rez-draft-block:active {
cursor: grabbing;
}
.rez-draft-label {
display: block;
padding: 5px 8px 4px 8px;
font-weight: 700;
padding-right: 90px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.rez-draft-btn {
position: absolute;
top: 4px;
right: 6px;
background: #1d4ed8;
color: #fff;
border: none;
border-radius: 4px;
padding: 3px 8px;
font-size: 0.75rem;
font-weight: 600;
cursor: pointer;
white-space: nowrap;
line-height: 1.4;
z-index: 11;
}
.rez-draft-btn:hover {
background: #1e40af;
}
.rez-draft-resize {
position: absolute;
bottom: -14px;
left: 50%;
transform: translateX(-50%);
width: 28px;
height: 28px;
border-radius: 50%;
background: #1d4ed8;
border: 2px solid rgba(255,255,255,0.8);
cursor: ns-resize;
display: flex;
align-items: center;
justify-content: center;
color: rgba(255,255,255,0.9);
font-size: 0.7rem;
z-index: 12;
box-shadow: 0 2px 6px rgba(0,0,0,0.25);
touch-action: none;
}
.rez-draft-resize:hover {
background: #1e40af;
transform: translateX(-50%) scale(1.1);
}
/* ── Forced-open slot on timeline ─────────────────────────────── */
.rez-day-tl-seg.forced {
background: rgba(249, 115, 22, 0.18);
border: 1.5px dashed rgba(249, 115, 22, 0.7);
color: #9a3412;
z-index: 3;
}
.rez-day-tl-seg.forced .rez-day-tl-seg-time,
.rez-day-tl-seg.forced .rez-day-tl-seg-name {
color: #9a3412;
}
.rez-day-tl-seg-del {
position: absolute;
top: 2px;
right: 3px;
background: none;
border: none;
cursor: pointer;
font-size: .85rem;
line-height: 1;
color: inherit;
opacity: 0.55;
padding: 2px 4px;
border-radius: 3px;
}
.rez-day-tl-seg-del:hover { opacity: 1; }
/* Výraznejší × — top-right pozícia zdedená z base, len vizuál */
.rez-day-tl-seg-del--prominent {
font-size: 1.1rem;
font-weight: 700;
opacity: 0.75;
padding: 3px 6px;
background: rgba(0,0,0,.08);
border-radius: 4px;
}
.rez-day-tl-seg-del--prominent:hover {
opacity: 1;
background: rgba(0,0,0,.18);
}
/* Sticky footer pre new-rez modal a detail-modal — tlačidlá vždy na spodnej
hrane modalu. .rez-modal má padding 24px 32px a overflow-y:auto, tak
negatívne marginy tlačidlá natiahnu na okraj a position:sticky ich pri
scrolle drží dole. */
/* Override modal padding-bottom — sticky footer sa drží na hranici padding-boxu,
takže ak je padding-bottom 0, footer sedí flush s border-boxom modalu. */
#new-modal .rez-modal,
#detail-modal .rez-modal,
#edit-modal .rez-modal {
padding-bottom: 0;
}
#new-modal .rez-modal-actions,
#detail-modal .rez-modal-actions,
#edit-modal .rez-modal-actions {
position: sticky;
bottom: 0;
margin: var(--rez-space-4) calc(-1 * var(--rez-space-8)) 0;
padding: var(--rez-space-4) var(--rez-space-8);
background: #dfeae3;
border-top: 1px solid rgba(31,100,71,.28);
box-shadow: 0 -8px 14px -6px rgba(0,0,0,.18);
border-radius: 0 0 var(--rez-radius-xl) var(--rez-radius-xl);
z-index: 5;
}
/* Kontakt-hint pod time-slots v day-detail */
.cal-contact-hint {
margin-top: 1rem;
padding: .85rem 1rem;
background: #f4f7f4;
border: 1px solid rgba(31,100,71,.18);
border-radius: var(--rez-radius);
font-size: .92rem;
line-height: 1.5;
color: var(--rez-text);
text-align: center;
}
.cal-contact-hint a {
color: var(--rez-accent, #1f6447);
font-weight: 600;
text-decoration: none;
white-space: nowrap;
}
.cal-contact-hint a:hover { text-decoration: underline; }
/* ============================================================
Floating toast (snackbar) — hore vo viewporte, mimo dokumentu
============================================================ */
#rez-toast-host {
position: fixed;
top: 0;
left: 0;
right: 0;
display: flex;
justify-content: center;
pointer-events: none;
z-index: 9999;
padding: 1rem;
}
.rez-toast {
pointer-events: auto;
max-width: 560px;
width: 100%;
background: #fff8e1;
color: #5a3e08;
border: 1.5px solid #b07d10;
border-radius: 10px;
box-shadow: 0 6px 24px rgba(0,0,0,.18);
padding: .85rem 1rem;
font-size: .95rem;
line-height: 1.45;
display: flex;
align-items: flex-start;
gap: .65rem;
transform: translateY(-120%);
opacity: 0;
transition: transform .28s ease, opacity .28s ease;
}
.rez-toast.show {
transform: translateY(0);
opacity: 1;
}
.rez-toast-icon {
flex: 0 0 auto;
font-weight: 700;
width: 1.4rem;
height: 1.4rem;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: #b07d10;
color: #fff;
font-size: .85rem;
}
.rez-toast-body { flex: 1 1 auto; }
.rez-toast-body strong { font-weight: 700; }
.rez-toast-close {
background: none;
border: 0;
color: inherit;
font-size: 1.2rem;
line-height: 1;
cursor: pointer;
padding: 0 .25rem;
opacity: .7;
}
.rez-toast-close:hover { opacity: 1; }
/* Varianty podla typu (rovnaka paleta ako rez-alert) */
.rez-toast.rez-toast-error { background:#fde8e8; color:#5a1010; border-color:#c83b3b; }
.rez-toast.rez-toast-error .rez-toast-icon { background:#c83b3b; }
.rez-toast.rez-toast-success { background:#e6f4ec; color:#0e4a2b; border-color:#2e8b57; }
.rez-toast.rez-toast-success .rez-toast-icon { background:#2e8b57; }
.rez-toast.rez-toast-info { background:#e7f1fb; color:#0c3b6e; border-color:#3a78c8; }
.rez-toast.rez-toast-info .rez-toast-icon { background:#3a78c8; }
/* Shake + cervena hranica pre odmietnutu procedurnu polozku */
@keyframes rez-shake {
0%, 100% { transform: translateX(0); }
20% { transform: translateX(-6px); }
40% { transform: translateX(6px); }
60% { transform: translateX(-4px); }
80% { transform: translateX(4px); }
}
.rez-proc-row.rejected {
animation: rez-shake .35s ease;
outline: 2px solid #c83b3b;
outline-offset: 2px;
transition: outline-color .8s ease;
}
/* UTM builder: skry browseru-renderovany dropdown trojuholnicek pri inputoch
napojenych na