:root{--green:#14744a;--green-dark:#0d5736;--cream:#fbf9f4;--ink:#18221e;--muted:#647068;--line:#dce4df;--red:#b42318;--red-bg:#fee4e2;--lipa:#e8f3ec;--eden:#e9f0ff;--external:#f2edf8;--absence:#fff0e8}*{box-sizing:border-box}body{margin:0;background:var(--cream);color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}button,input,select{font:inherit}.login-shell{min-height:100vh;display:grid;place-items:center;padding:24px;background:radial-gradient(circle at 85% 10%,#dcefe4,transparent 30%),var(--cream)}.login-card{width:min(440px,100%);padding:36px;border:1px solid var(--line);border-radius:24px;background:#fff;box-shadow:0 18px 55px #19332518}.brand-logo{width:100%;max-height:160px;object-fit:contain;margin-bottom:18px}.eyebrow{margin:0 0 5px;color:var(--green);font-size:.72rem;font-weight:800;letter-spacing:.12em}.login-card h1,.title-row h1{margin:0;font-size:clamp(1.8rem,4vw,2.5rem);letter-spacing:-.04em}.muted,.status{color:var(--muted)}form{display:grid;gap:15px;margin-top:26px}label{display:grid;gap:7px;font-weight:650;font-size:.9rem}input,select{width:100%;border:1px solid #b9c5be;border-radius:10px;padding:12px 13px;background:#fff;color:var(--ink)}input:focus,select:focus{outline:3px solid #c5e7d3;border-color:var(--green)}.remember{display:flex;align-items:center;gap:9px;font-weight:500}.remember input{width:auto}.button{border:0;border-radius:10px;padding:12px 16px;cursor:pointer;font-weight:750}.primary{background:var(--green);color:#fff}.primary:hover{background:var(--green-dark)}.secondary{background:#eef2ef;color:var(--ink)}.danger{background:#fff;color:var(--red);border:1px solid #efb4ae}.link{color:var(--green);background:transparent;padding:6px}.form-error{margin:0;color:var(--red);font-weight:650}.topbar{height:68px;padding:0 clamp(16px,4vw,52px);display:flex;align-items:center;justify-content:space-between;background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5}.brand,.account{display:flex;align-items:center;gap:10px;font-weight:800}.brand small{font-size:.72rem;color:var(--muted);font-weight:600}.brand-mark{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:var(--green);color:#fff}.page{max-width:1580px;margin:auto;padding:34px clamp(16px,4vw,52px)}.title-row{display:flex;align-items:end;justify-content:space-between;gap:16px;margin-bottom:22px}.filters{display:flex;gap:12px;align-items:center;flex-wrap:wrap;padding:12px;border:1px solid var(--line);border-radius:15px;background:#fff}.segmented{display:flex;padding:3px;background:#eef2ef;border-radius:9px}.segmented button{border:0;background:transparent;border-radius:7px;padding:8px 11px;cursor:pointer;font-weight:700}.segmented .selected{background:#fff;color:var(--green);box-shadow:0 1px 3px #0002}.period{display:flex;align-items:center;gap:10px;padding:0 4px}.period strong{min-width:168px;text-align:center}.icon-button{border:0;width:32px;height:32px;border-radius:8px;background:#edf2ee;font-size:1.5rem;line-height:1;cursor:pointer}.select-label{display:flex;align-items:center;gap:8px;font-weight:600}.select-label select{width:auto;padding:8px}.status{margin:15px 0}.coverage{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:8px;margin:0 0 15px}.warning{padding:11px 13px;border-radius:10px;background:var(--red-bg);color:#7a271a;font-size:.9rem;font-weight:650}.calendar-wrap{overflow:auto;border:1px solid var(--line);border-radius:16px;background:#fff}.calendar{min-width:900px}.calendar-grid{display:grid;grid-template-columns:80px repeat(var(--days),minmax(72px,1fr))}.cell{min-height:77px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:7px}.header-cell{position:sticky;top:68px;background:#f5f8f6;z-index:2;min-height:57px;font-weight:800;text-align:center}.header-cell.weekend{background:#f0f1f4}.header-cell.today{box-shadow:inset 0 -3px var(--green)}.name-cell{position:sticky;left:0;background:#fff;z-index:1;display:flex;align-items:center;gap:9px;font-weight:700}.name-cell small{color:var(--muted);font-weight:600}.corner{z-index:3;background:#f5f8f6}.day-cell{background:#fff}.day-cell.weekend{background:#fafafa}.day-cell.holiday{background:#fff8d8}.shift{display:block;width:100%;border:0;border-left:3px solid;padding:5px 5px 5px 7px;margin:0 0 4px;text-align:left;border-radius:5px;font-size:.74rem;line-height:1.25;cursor:pointer;color:var(--ink)}.shift.lipa{background:var(--lipa);border-color:#4d9a69}.shift.eden{background:var(--eden);border-color:#547cc6}.shift.external{background:var(--external);border-color:#8f72b5}.shift.absence{background:var(--absence);border-color:#dc7f45}.shift strong{display:block}.shift small{color:#42524a}.day-cell.admin:hover{background:#f3fbf6;cursor:cell}.tag{display:inline-block;margin:0 4px 0 11px;padding:2px 5px;border-radius:4px;font-size:.75rem;font-weight:800}.tag:first-child{margin-left:0}.tag.lipa{background:var(--lipa)}.tag.eden{background:var(--eden)}.tag.external{background:var(--external)}.tag.absence{background:var(--absence)}.legend{font-size:.83rem;color:var(--muted)}dialog{width:min(610px,calc(100% - 28px));border:0;border-radius:18px;padding:0;box-shadow:0 20px 80px #0004}dialog::backdrop{background:#15271d66}dialog form{margin:0;padding:24px}.dialog-title{display:flex;justify-content:space-between;align-items:start}.dialog-title h2{margin:0}.close{border:0;background:transparent;font-size:2rem;line-height:1;cursor:pointer}.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}.wide{grid-column:1/-1}.dialog-actions{display:grid;grid-template-columns:auto 1fr auto auto;gap:10px;align-items:center;margin-top:8px}@media(max-width:720px){.topbar{height:60px}.brand small{display:none}.page{padding-top:22px}.title-row{align-items:start}.filters{align-items:stretch}.period{order:-1;justify-content:space-between;width:100%}.period strong{min-width:0}.select-label{justify-content:space-between;width:100%}.select-label select{width:63%}.calendar{min-width:700px}.calendar-grid{grid-template-columns:130px repeat(var(--days),minmax(64px,1fr))}.header-cell{top:60px}.cell{min-height:68px;padding:5px}.shift{font-size:.68rem}.form-grid{grid-template-columns:1fr}.wide{grid-column:auto}.dialog-actions{grid-template-columns:1fr 1fr}.dialog-actions span{display:none}.dialog-actions .danger{grid-column:1/-1}}
.cell{min-height:0}.name-cell,.day-cell{min-height:77px}.shift{background:linear-gradient(90deg,var(--person-color,#14744a) 0%,var(--person-color,#14744a) 100%);border-left-color:var(--person-color,#14744a)}@media(max-width:720px){.name-cell,.day-cell{min-height:68px}}
/* compact, time-proportional shift cells */
.name-cell,.day-cell{min-height:52px!important}.shift{background:linear-gradient(90deg,var(--person-color,#14744a) var(--shift-left,0%),#fff var(--shift-left,0%),#fff var(--shift-right,100%),color-mix(in srgb,var(--person-color,#14744a) 18%,#fff) var(--shift-right,100%))!important;border-left-color:var(--person-color,#14744a)!important}@media(max-width:720px){.name-cell,.day-cell{min-height:48px!important}}

/* Prihlásenie: text zarovnaný pod logo, formulár zostáva čitateľný. */
.login-card > .eyebrow,.login-card > h1,.login-card > .muted{text-align:center}.login-card > .eyebrow{margin-left:auto;margin-right:auto}.login-card #loginForm{text-align:left}.login-card .remember{text-align:left}

/* Správa zamestnancov a nastavenia */
.employee-picker{display:grid;gap:9px;max-height:52vh;overflow:auto;margin:16px 0}.employee-choice{display:grid;grid-template-columns:auto 1fr auto;gap:11px;align-items:center;width:100%;padding:13px;border:1px solid var(--line);border-radius:12px;background:#fff;text-align:left;cursor:pointer}.employee-choice:hover{border-color:var(--green);background:#f4fbf6}.employee-choice small{display:block;color:var(--muted);margin-top:3px}.employee-choice b{font-size:1.5rem;color:var(--green)}.employee-dot{width:17px;height:17px;border-radius:50%;box-shadow:0 0 0 2px #fff,0 0 0 3px var(--line)}.settings-group{margin:18px 0;padding:16px;border:1px solid var(--line);border-radius:14px;background:#fbfcfb}.settings-group h3{margin:0 0 10px}.settings-tags{display:flex;gap:7px;flex-wrap:wrap;margin:0 0 14px}.settings-tags .tag{margin:0;background:#e8f3ec;color:var(--green-dark)}#settingsDialog .form-grid .button{align-self:end}

/* Rovnaký vnútorný biely okraj ako pri dialógu pridania smeny. */
#usersDialog,#settingsDialog{padding:24px}@media(max-width:720px){#usersDialog,#settingsDialog{padding:18px}}

/* Viditeľná pridelená farba v karte zamestnanca. */
.assigned-color{display:flex;align-items:center;min-height:42px;padding:0 12px;border-radius:10px;border:1px solid #ffffff88;box-shadow:inset 0 0 0 1px #0002}.assigned-color b{color:#fff;font-size:.85rem;letter-spacing:.04em;text-shadow:0 1px 2px #0008}.user-color{margin-top:7px}

/* Klikateľný vycentrovaný náhľad farby bez druhého poľa. */
label:has(.assigned-color){position:relative}
label:has(.assigned-color) .assigned-color{justify-content:center}
label:has(.assigned-color) .user-color{position:absolute;left:0;bottom:0;z-index:1;width:100%;height:42px;margin:0;padding:0;border:0;opacity:0;cursor:pointer}

/* Odstránenie položiek v Nastaveniach. */
.settings-tags .tag{display:inline-flex;align-items:center;gap:7px;padding-right:7px}
.tag-remove{width:22px;height:22px;min-width:22px;padding:0;border:0;border-radius:50%;background:#fff;color:var(--red);font-size:1rem;font-weight:700;line-height:1;cursor:pointer}
.tag-remove:hover{background:var(--red);color:#fff}

/* Mesačný kalendár pre kopírovanie smeny. */
#copyDialog{width:min(94vw,440px)}
.copy-dates{display:block!important;margin-top:4px}
.copy-monthbar{display:grid;grid-template-columns:44px 1fr 44px;align-items:center;margin:2px 0 14px;text-align:center;text-transform:capitalize}
.copy-monthbar strong{font-size:1rem}.copy-nav{width:34px;height:34px;justify-self:center;border:0;border-radius:50%;background:transparent;color:var(--muted);font-size:1.55rem;line-height:1;cursor:pointer}.copy-nav:hover{background:#e8f3ec;color:var(--green-dark)}
.copy-weekdays,.copy-month-days{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;text-align:center}.copy-weekdays{margin-bottom:5px;color:var(--muted);font-size:.75rem;font-weight:700}.copy-month-days{grid-auto-rows:44px}
.copy-date,.copy-muted{display:grid;place-items:center;min-width:0}.copy-date{position:relative;cursor:pointer}.copy-date input{position:absolute;opacity:0;pointer-events:none}.copy-date span{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;font-size:.92rem;transition:background .15s,color .15s}.copy-date:hover span{background:#e8f3ec}.copy-date.selected span{background:var(--green);color:#fff;font-weight:800;box-shadow:0 2px 7px #14744a55}.copy-date.source{opacity:.35;cursor:default}.copy-date.source span{background:#f1f3f1}.copy-muted{color:#a9b2ad;font-size:.9rem}

/* Sviatky pri kopírovaní smeny: červené, ale stále voliteľné. */
.copy-date.holiday span{background:var(--red-bg);color:var(--red);font-weight:800}.copy-date.holiday:hover span{background:#fbcfca}.copy-date.holiday.selected span{background:var(--red);color:#fff;box-shadow:0 2px 7px #b4231855}

/* Meno zamestnanca ostáva pri vodorovnom posúvaní stále viditeľné. */
.calendar-wrap{position:relative}.calendar-grid>.name-cell{position:sticky!important;left:0;z-index:4;box-shadow:3px 0 8px #1b30200d}.calendar-grid>.corner{left:0;z-index:5;box-shadow:3px 0 8px #1b30200d}

/* Harmonogram: hlavička nezakrýva prvý riadok a mená sa prispôsobia bunke. */
.calendar-wrap{position:relative;overflow-x:auto;overflow-y:hidden}.header-cell{position:relative;top:auto}.calendar-grid>.name-cell{position:sticky!important;left:0;z-index:4;white-space:normal;line-height:1.18;box-shadow:3px 0 8px #1b30200d}.name-cell>div{min-width:0;overflow-wrap:anywhere;word-break:break-word}.calendar-grid>.corner{position:sticky;left:0;top:auto;z-index:5;box-shadow:3px 0 8px #1b30200d}@media(max-width:720px){.calendar-grid{grid-template-columns:145px repeat(var(--days),minmax(64px,1fr))}.name-cell{padding:7px 6px;gap:6px}.name-cell>span{flex:0 0 auto}}

/* Rodič tabuľky musí mať celú šírku všetkých dní, inak sticky stĺpec skončí v polovici. */
.calendar{width:max-content;min-width:100%}


/* Prehľadné oprávnenia v karte zamestnanca. */
.permission-field{grid-column:1/-1;margin:0;padding:14px;border:1px solid var(--line);border-radius:12px;background:#fbfcfb}.permission-field legend{padding:0 5px;font-weight:800}.permission-list{display:grid;gap:8px;margin-top:6px}.permission-option{display:flex!important;align-items:center;justify-content:space-between;gap:16px;min-height:38px;margin:0!important;padding:8px 10px;border:1px solid #e4ebe6;border-radius:9px;background:#fff;cursor:pointer}.permission-option span{line-height:1.25}.permission-option input{width:20px!important;height:20px!important;margin:0!important;accent-color:var(--green);flex:0 0 auto}.permission-option:hover{border-color:var(--green);background:#f4fbf6}

/* Compact employee column */
.calendar-grid>.corner{white-space:normal;overflow-wrap:anywhere;word-break:break-word;text-align:center;font-size:11px;line-height:1.1;padding:8px 5px}

/* Centered employee initials */
.calendar-grid>.name-cell{justify-content:center;text-align:center;padding-inline:4px}
.calendar-grid>.name-cell>span{font-size:1.08rem;font-weight:500;line-height:1}

/* Keep employee column identical in portrait and landscape */
@media(max-width:720px){.calendar-grid{grid-template-columns:80px repeat(var(--days),minmax(64px,1fr))}}

/* ISO week band above compact day headers */
.calendar-grid>.corner{grid-row:span 2;display:flex;align-items:center;justify-content:center}
.week-cell{min-height:28px;padding:5px 8px;background:#edf5ef;border-bottom:1px solid var(--line);color:var(--green-dark);font-size:.78rem;font-weight:650;text-align:center;letter-spacing:.01em}
.calendar-grid>.header-cell:not(.corner){min-height:34px;height:34px;padding:3px 4px;line-height:1.02}
.calendar-grid>.header-cell:not(.corner) small{font-size:.68rem}

/* Light day labels */
.calendar-grid>.header-cell:not(.corner){font-weight:400}
.calendar-grid>.header-cell:not(.corner) small{font-weight:400}

/* Slightly roomier, smaller day numerals */
.calendar-grid>.header-cell:not(.corner){height:38px;min-height:38px;font-size:.9rem;padding:5px 4px}
.calendar-grid>.header-cell:not(.corner) small{font-size:.65rem}

/* Compact shift rows with a time-proportional color bar */
.day-cell{display:flex;flex-direction:column;gap:3px;padding:4px}
.day-cell .shift:not(.absence){display:block;position:relative;width:100%;min-height:30px;margin:0;padding:0 3px 3px;border:0;border-radius:5px;background:transparent;color:var(--ink);text-align:left;overflow:hidden}
.day-cell .shift:not(.absence) .shift-bar{display:block;position:relative;height:3px;margin:0 0 3px;background:#e4ebe6;border-radius:99px;overflow:hidden}
.day-cell .shift:not(.absence) .shift-bar::after{content:"";position:absolute;top:0;bottom:0;left:var(--shift-left,0%);width:var(--shift-width,100%);background:var(--person-color,var(--green));border-radius:99px}
.day-cell .shift:not(.absence) strong{display:block;font-size:.73rem;line-height:1.25;font-weight:500;white-space:nowrap}
.day-cell .shift:not(.absence) small{display:none}

/* Only the slim bar carries the employee color. */
.day-cell .shift:not(.absence){background:transparent!important;border-left:0!important;box-shadow:none!important}

/* Wider day columns for location, time and work category. */
.calendar{min-width:1260px}
.calendar-grid{grid-template-columns:80px repeat(var(--days),minmax(112px,1fr))}
.day-cell .shift:not(.absence) strong{font-size:.7rem;letter-spacing:-.01em}
@media(max-width:720px){.calendar{min-width:1260px}.calendar-grid{grid-template-columns:80px repeat(var(--days),112px)}}

/* Compact width: enough for location, time and a short category code. */
.calendar{min-width:1080px}
.calendar-grid{grid-template-columns:80px repeat(var(--days),100px)}
@media(max-width:720px){.calendar{min-width:1080px}.calendar-grid{grid-template-columns:80px repeat(var(--days),100px)}}

/* Mobile: compact cells while keeping one complete shift row readable. */
@media(max-width:720px){
  .calendar{min-width:920px}
  .calendar-grid{grid-template-columns:80px repeat(var(--days),88px)}
  .day-cell{padding:3px}
  .day-cell .shift:not(.absence){min-height:25px;padding:0 1px 2px}
  .day-cell .shift:not(.absence) strong{font-size:.60rem;line-height:1.15;letter-spacing:-.045em}
  .day-cell .shift:not(.absence) .shift-bar{margin-bottom:2px}
}

/* Slightly roomier desktop calendar cells. */
@media(min-width:721px){.calendar{min-width:1160px}.calendar-grid{grid-template-columns:80px repeat(var(--days),108px)}}

/* Give mobile shift labels a little more room. */
@media(max-width:720px){.calendar{min-width:1000px}.calendar-grid{grid-template-columns:80px repeat(var(--days),96px)}}

@media(max-width:720px){.day-cell .shift:not(.absence) strong{font-size:.66rem;letter-spacing:-.035em}}

/* Final 10 px increase for readable shift rows. */
@media(min-width:721px){.calendar{min-width:1260px}.calendar-grid{grid-template-columns:80px repeat(var(--days),118px)}.day-cell .shift:not(.absence) strong{font-size:.74rem}}
@media(max-width:720px){.calendar{min-width:1100px}.calendar-grid{grid-template-columns:80px repeat(var(--days),106px)}.day-cell .shift:not(.absence) strong{font-size:.70rem;letter-spacing:-.03em}}

/* Jemné označenie sviatkov v hlavičke harmonogramu */
.calendar-grid .header-cell.holiday{background:#f9dfdf;color:#8b2c2c}

.calendar-grid .header-cell:has(small:last-child){background:#f9dfdf;color:#8b2c2c}.calendar-grid .header-cell:has(small:last-child) small:last-child{display:none}

.calendar-grid .day-cell.holiday-column{background:#fdf0ef}

/* Celodenná neprítomnosť v harmonograme */
.absence-cell{background:#e5e7eb!important;padding:0!important;}
.absence-cell .shift.absence{width:100%;height:100%;min-height:100%;margin:0;display:flex;align-items:center;justify-content:center;text-align:center;background:transparent!important;color:#4b5563;border:0;border-radius:0;box-shadow:none;}
.absence-cell .shift.absence strong{font-weight:500;font-size:inherit;}

/* Recovered layout: match the original two-row header and employee widths. */
[hidden]{display:none!important}
.calendar{width:max-content;min-width:100%}
.calendar-grid{width:max-content;min-width:100%}
.calendar-grid>.corner{grid-column:1;grid-row:1 / span 2}
.calendar-grid>.name-cell{grid-column:1}
.calendar-grid>.header-cell.holiday{background:#f9dfdf;color:#8b2c2c}
.calendar-grid>.header-cell:not(.corner) small{display:inline!important}
.title-row{justify-content:flex-start;flex-wrap:wrap;gap:10px}
.dialog-actions{display:flex;flex-wrap:wrap;justify-content:flex-end}
.dialog-actions>span{flex:1}
.copy-dates{display:block!important;max-height:none;overflow:visible}
.copy-date input:focus-visible+span{outline:3px solid #14744a}
.copy-date.selected span{background:var(--green);color:white}
.copy-date.holiday.selected span{background:var(--red);color:white}
.copy-date.source{opacity:1}
.copy-date.source span{background:#e5e7eb;color:#647068}
.copy-count{font-size:.85rem;margin:12px 0 0}
.day-cell .shift:not(.absence) strong{overflow:hidden;text-overflow:ellipsis}
.absence-cell{min-height:52px}
#usersDialog,#settingsDialog{max-height:calc(100dvh - 32px);overflow:auto}
@media(max-width:720px){.dialog-actions>.button{flex:1 1 auto}.title-row .button{padding:10px 12px;font-size:.85rem}}