*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* Nuimame naršyklės default'inius spinner'ius nuo input[type=number] —
   visi mūsų laukai naudoja savo numpad'us arba paprastą įvedimą. */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
}
input[type=number] {
  -moz-appearance: textfield;
  appearance: textfield;
}

:root {
  --bg:         #0f1117;
  --surface:    #181c27;
  --surface2:   #1e2334;
  --border:     #2a2f45;
  --accent:     #4f7df3;
  --accent2:    #7c5cf6;
  --green:      #22c55e;
  --orange:     #f59e0b;
  --red:        #ef4444;
  --cyan:       #06b6d4;
  --text:       #e2e8f0;
  --text2:      #94a3b8;
  --text3:      #64748b;
  --header-h:   64px;
  --timecol-w:  56px;
  --cell-h:     40px;
  --col-w:      150px;
  --shadow:     rgba(0,0,0,.4);
  --font:       'Inter', sans-serif;
}

/* ── LIGHT THEME ────────────────────────────── */
html[data-theme="light"] {
  --bg:       #f0f4f8;
  --surface:  #ffffff;
  --surface2: #f8fafc;
  --border:   #dde3ed;
  --accent:   #3b6cf0;
  --text:     #1e293b;
  --text2:    #475569;
  --text3:    #94a3b8;
  --shadow:   rgba(0,0,0,.12);
}

html[data-theme="light"] .appt-blue   { background: rgba(59,108,240,.12); border-color: rgba(59,108,240,.4);  color: #2451c7; }
html[data-theme="light"] .appt-green  { background: rgba(22,163,74,.12);  border-color: rgba(22,163,74,.4);   color: #15803d; }
html[data-theme="light"] .appt-orange { background: rgba(217,119,6,.12);  border-color: rgba(217,119,6,.4);   color: #b45309; }
html[data-theme="light"] .appt-cyan   { background: rgba(8,145,178,.12);  border-color: rgba(8,145,178,.4);   color: #0e7490; }
html[data-theme="light"] .appt-violet { background: rgba(109,40,217,.12); border-color: rgba(109,40,217,.4);  color: #7c3aed; }
html[data-theme="light"] .appt-red        { background: rgba(220,38,38,.1);    border-color: rgba(220,38,38,.35);   color: #b91c1c; }
html[data-theme="light"] .appt-light-green{ background: rgba(134,239,172,.28); border-color: rgba(134,239,172,.5);  color: #16a34a; }
html[data-theme="light"] .appt-dark-green { background: rgba(21,128,61,.22);   border-color: rgba(21,128,61,.55);   color: #052e16; }
html[data-theme="light"] .appt-steel-blue { background: rgba(70,130,180,.12);  border-color: rgba(70,130,180,.4);   color: #1d4ed8; }
html[data-theme="light"] .appt-gray       { background: rgba(107,114,128,.1);  border-color: rgba(107,114,128,.35); color: #374151; }
html[data-theme="light"] .appt-pink       { background: rgba(219,39,119,.12);  border-color: rgba(219,39,119,.4);   color: #be185d; }
html[data-theme="light"] .tag-assist   { background: rgba(14,116,144,.08); color: #155e75; border-color: rgba(14,116,144,.25); }
html[data-theme="light"] .slot-cell:hover { background: rgba(59,108,240,.05); }
html[data-theme="light"] .slot-cell { border-bottom-color: rgba(200,210,225,.6); }
html[data-theme="light"] .tooltip { box-shadow: 0 8px 32px rgba(0,0,0,.12); }

/* ── THEME TOGGLE BUTTON ────────────────────── */
.theme-toggle {
  background: none;
  border: 1px solid var(--border);
  color: var(--text2);
  width: 36px; height: 36px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  font-size: 15px;
  transition: all .15s;
  position: relative;
  overflow: hidden;
}
.theme-toggle:hover { color: var(--text); border-color: var(--accent); }
.theme-toggle .icon-dark,
.theme-toggle .icon-light { transition: opacity .2s, transform .3s; position: absolute; }
.theme-toggle .icon-dark  { opacity: 1;  transform: rotate(0deg) scale(1); }
.theme-toggle .icon-light { opacity: 0;  transform: rotate(90deg) scale(.5); }
html[data-theme="light"] .theme-toggle .icon-dark  { opacity: 0;  transform: rotate(-90deg) scale(.5); }
html[data-theme="light"] .theme-toggle .icon-light { opacity: 1;  transform: rotate(0deg) scale(1); }

/* ── GLOBAL TRANSITION ──────────────────────── */
body, .topbar, .search-bar, .modal,
.staff-col-header, .time-slot-cell, .slot-cell,
.filter-btn, .branch-btn, .topbar-action-btn,
.form-input, .form-select, .form-textarea, .tooltip {
  transition: background .25s, border-color .25s, color .2s, box-shadow .25s;
}

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ── TOP HEADER ─────────────────────────────── */
.topbar {
  height: var(--header-h);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  padding: 0 20px;
  gap: 16px;
  flex-shrink: 0;
  z-index: 20;
}
.topbar-logo {
  font-size: 18px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: -0.5px;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
  transition: opacity .15s;
}
.topbar-logo:hover { opacity: .8; }
.topbar-logo i { font-size: 20px; }

/* iClinix prekės ženklo ikona — gradient squircle su balta „iC" monograma.
   Scale'inasi su tėvinio elemento font-size (em), tad tinka ir login, ir topbar. */
.brand-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5em;
  height: 1.5em;
  border-radius: 30%;
  /* Spalvos iš sistemos akcento (--accent) — automatiškai derinasi prie temos */
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--accent) 82%, #fff) 0%,
    var(--accent) 52%,
    color-mix(in srgb, var(--accent) 68%, #000) 100%);
  flex-shrink: 0;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 38%, transparent);
}
.brand-badge .bb-mono {
  color: #fff;
  font-weight: 800;
  font-size: .72em;
  letter-spacing: -.04em;
  line-height: 1;
}

.branch-wrap { position: relative; }
.branch-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 6px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.branch-btn:hover { background: var(--border); }
.branch-btn.active { border-color: var(--accent); }
.branch-chevron { font-size: 10px; margin-left: 2px; transition: transform .2s; }
.branch-btn.active .branch-chevron { transform: rotate(180deg); }

.branch-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  width: 232px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 8px 28px rgba(0,0,0,.35);
  z-index: 200;
  padding: 6px;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity .15s, transform .15s;
}
.branch-dropdown.open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
html[data-theme="light"] .branch-dropdown { box-shadow: 0 8px 28px rgba(0,0,0,.14); }

.branch-dropdown-title {
  font-size: 10px;
  font-weight: 600;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: .6px;
  padding: 6px 10px 4px;
}
.branch-option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  text-align: left;
  transition: background .12s;
}
.branch-option:hover { background: var(--surface2); }
.branch-option.active { background: rgba(79,125,243,.1); }
html[data-theme="light"] .branch-option.active { background: rgba(59,108,240,.08); }
.branch-option-icon {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--surface2);
  display: flex; align-items: center; justify-content: center;
  color: var(--accent);
  font-size: 12px;
  flex-shrink: 0;
}
.branch-option.active .branch-option-icon { background: rgba(79,125,243,.18); }
.branch-option-info { flex: 1; min-width: 0; }
.branch-option-name { font-size: 13px; font-weight: 600; }
.branch-option-addr { font-size: 11px; color: var(--text3); margin-top: 1px; }
.branch-option-check { font-size: 11px; color: var(--accent); opacity: 0; flex-shrink: 0; }
.branch-option.active .branch-option-check { opacity: 1; }

.date-nav {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}
.date-nav button:not(.today-btn) {
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--text);
  width: 32px; height: 32px;
  border-radius: 8px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px;
  transition: background .15s;
}
.date-nav button:not(.today-btn):hover { background: var(--accent); border-color: var(--accent); }
.date-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  padding: 0 8px;
  min-width: 220px;
  text-align: center;
}
.today-btn {
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 0 12px;
  height: 32px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  font-family: var(--font);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: background .15s, border-color .15s, color .15s;
}
.today-btn:hover { background: var(--accent); border-color: var(--accent); color: #fff; }

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: 12px;
}
.topbar-action-btn {
  background: none;
  border: 1px solid var(--border);
  color: var(--text2);
  width: 36px; height: 36px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  font-size: 15px;
  transition: all .15s;
}
.topbar-action-btn:hover { color: var(--text); border-color: var(--accent); }

.sync-status {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  cursor: default;
}
.sync-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22c55e;
  transition: background .4s;
}
.sync-status.syncing .sync-dot { background: #facc15; }
.sync-status.error   .sync-dot { background: #ef4444; }

.clock {
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 1px;
  margin-left: 8px;
}

/* ── BODY LAYOUT ────────────────────────────── */
.layout {
  display: flex;
  flex: 1;
  overflow: hidden;
}


/* ── MAIN AREA ──────────────────────────────── */
.main {
  order: 2;
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ── MODULE STATES ──────────────────────────── */
.module-loading {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text3);
  font-size: 22px;
}
.module-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--text3);
}
.module-empty i   { font-size: 32px; }
.module-empty p   { font-size: 13px; margin: 0; }

/* ── RIGHT SIDEBAR (moduliai) ───────────────── */
:root {
  --rsb-w: 108px;
}

.right-sidebar {
  order: 3;
  width: var(--rsb-w);
  background: var(--surface);
  border-left: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  padding: 5px;
  gap: 3px;
  flex-shrink: 0;
  overflow-y: auto;
  overflow-x: hidden;
  transition: background .25s, border-color .25s;
}

.right-sidebar-label { display: none; }

/* group wrapper */
.rsb-group {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

/* main item – icon on top, text below */
.rsb-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 100%;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 7px;
  color: var(--text2);
  font-family: inherit;
  padding: 10px 4px 8px;
  cursor: pointer;
  text-align: center;
  transition: background .15s, color .15s, border-color .15s;
}
.rsb-item i:first-child { font-size: 18px; color: inherit; }
.rsb-item span { font-size: 12px; font-weight: 500; line-height: 1.2; }
.rsb-item:hover  { background: rgba(79,125,243,.12); color: var(--accent); border-color: rgba(79,125,243,.4); }
.rsb-item.open   { background: var(--accent); color: #fff; border-color: var(--accent); }
.rsb-item.open i:first-child { color: #fff; }

/* hide chevron – not needed in tile layout */
.rsb-chevron { display: none; }

/* submenu tiles – expand inline below parent group */
.rsb-sub {
  display: flex;
  flex-direction: column;
  gap: 3px;
  overflow: hidden;
  max-height: 0;
  padding-top: 0;
  border-top: 2px solid transparent;
  transition: max-height 0.28s cubic-bezier(0.4, 0, 0.2, 1),
              padding .2s, border-color .2s;
}
.rsb-sub.open {
  max-height: 600px;
  padding-top: 4px;
  border-top-color: var(--accent);
}

.rsb-sub-item {
  display: block;
  padding: 7px 6px;
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.35;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text2);
  text-decoration: none;
  text-align: center;
  white-space: normal;
  transition: background .12s, color .12s, border-color .12s;
}
.rsb-sub-item:hover  { background: rgba(79,125,243,.12); color: var(--accent); border-color: rgba(79,125,243,.4); }
.rsb-sub-item.active { background: var(--accent); color: #fff; border-color: var(--accent); }

html[data-theme="light"] .rsb-item            { background: #fff; }
html[data-theme="light"] .rsb-item.open       { background: var(--accent); color: #fff; border-color: var(--accent); }
html[data-theme="light"] .rsb-item.open i     { color: #fff; }
html[data-theme="light"] .rsb-sub-item        { background: #fff; }
html[data-theme="light"] .rsb-sub-item.active { background: var(--accent); color: #fff; }

/* ── SCHEDULE WRAPPER ───────────────────────── */
.schedule-wrap {
  flex: 1;
  overflow: auto;
  position: relative;
}

/* ── SCHEDULE FLEX LAYOUT ───────────────────── */
.schedule-flex {
  display: flex;
  flex-direction: row;
  min-width: max-content;
  position: relative;
}

/* ── TIME COLUMN ────────────────────────────── */
.time-col {
  flex-shrink: 0;
  width: var(--timecol-w);
  position: sticky;
  left: 0;
  z-index: 12;
  background: var(--surface);
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--border);
  transition: background .25s, border-color .25s;
}
.time-header-cell {
  position: sticky;
  top: 0;
  z-index: 15;
  background: var(--surface);
  border-bottom: 2px solid var(--border);
  flex-shrink: 0;
  transition: background .25s, border-color .25s;
}
.time-slot-cell {
  height: var(--cell-h);
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 4px 8px 0;
  font-size: 11px;
  font-weight: 500;
  color: var(--text3);
  white-space: nowrap;
  box-sizing: border-box;
  flex-shrink: 0;
}
.time-slot-cell.hour {
  color: var(--text2);
  font-weight: 600;
  border-top: 1px solid var(--border);
}

/* ── CORNER DATE CELL ───────────────────────── */
.corner-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 6px 0;
  gap: 0;
}
.cd-year {
  font-size: 9px;
  font-weight: 500;
  color: var(--text3);
  line-height: 1.4;
}
.cd-month {
  font-size: 10px;
  font-weight: 600;
  color: var(--accent);
  letter-spacing: 0.3px;
  line-height: 1.3;
}
.cd-day {
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.1;
}

/* ── STAFF COLUMN ───────────────────────────── */
.staff-col {
  flex-shrink: 0;
  width: var(--col-w);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
}
/* Solo režimas: kai gydytojas mato tik savo darbotvarkę — stulpelis 3× platesnis,
   bet darbuotojo kortelė (nuotrauka + asistentų sąrašas) lieka originalaus pločio */
.schedule-flex.solo-view .staff-col { width: calc(var(--col-w) * 3); }
.schedule-flex.solo-view .staff-col-header .staff-card { width: var(--col-w); margin: 0 auto; }
.staff-col-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--surface);
  border-bottom: 2px solid var(--border);
  flex-shrink: 0;
}
.staff-col-body {
  position: relative;
  flex: 1;
}
.staff-cell {
  padding: 0;
  text-align: center;
  position: relative;
}

/* ── STAFF CARD ─────────────────────────────── */
.staff-card {
  width: 100%;
  display: flex;
  flex-direction: column;
}
.staff-card-body {
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}
/* full-width rectangular photo */
.staff-avatar {
  position: relative;
  width: 100%;
  height: 148px;
  flex-shrink: 0;
  margin-bottom: 0;
}
/* clips the photo, solid bg colour as fallback */
.staff-avatar-inner {
  width: 100%; height: 100%;
  border-radius: 0;
  overflow: hidden;
  position: relative;
  border: none;
}
/* initials fallback */
.staff-av-init {
  position: absolute;
  inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 38px;
  font-weight: 700;
  color: rgba(255,255,255,.9);
  letter-spacing: -1px;
}
/* photo fills the area consistently */
.staff-avatar img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 15%;
  transition: transform .3s;
}
.staff-avatar:hover img { transform: scale(1.05); }
/* gradient overlay at bottom of photo */
.staff-avatar-overlay {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 30px 8px 8px;
  background: linear-gradient(to top, rgba(0,0,0,.78) 0%, transparent 100%);
  z-index: 2;
  pointer-events: none;
}
/* name on the photo overlay */
.staff-card-name {
  font-size: 12.5px;
  font-weight: 600;
  color: #fff;
  text-align: center;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 4px rgba(0,0,0,.6);
}
/* role on the photo overlay */
.staff-card-role {
  font-size: 9px;
  font-weight: 400;
  color: rgba(255,255,255,.82);
  text-align: center;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 4px rgba(0,0,0,.6);
}
/* meta row (room + badges) below the photo */

/* ── ASSISTANT CHIPS ────────────────────────── */
.assist-section {
  position: absolute;
  top: 100%;
  left: -1px; right: -1px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 2px solid var(--accent);
  border-radius: 0 0 10px 10px;
  box-shadow: 0 8px 24px var(--shadow);
  padding: 8px;
  display: none;
  z-index: 25;
}
.staff-cell:hover .assist-section { display: block; }
.assist-label {
  font-size: 8px;
  font-weight: 600;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: .5px;
  display: flex;
  align-items: center;
  gap: 3px;
  margin-bottom: 3px;
}
.assist-chips-wrap {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.assist-chip {
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 2px 6px 2px 2px;
  cursor: default;
  transition: border-color .15s, background .15s;
}
.assist-chip:hover { border-color: var(--accent); background: rgba(79,125,243,.07); }
.assist-chip-av {
  width: 18px; height: 18px;
  border-radius: 50%;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}
.assist-chip-av .ac-init {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 7px;
  font-weight: 700;
  color: #fff;
}
.assist-chip-av img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.assist-chip-name {
  font-size: 9px;
  font-weight: 600;
  color: var(--text);
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
}
.assist-chip-time {
  font-size: 8px;
  color: var(--text3);
  white-space: nowrap;
  background: var(--bg);
  border-radius: 3px;
  padding: 0 3px;
}
.assist-edit-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
  margin-top: 6px;
  background: none;
  border: 1px dashed var(--border);
  color: var(--text3);
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 9px;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--font);
  transition: all .15s;
  letter-spacing: .3px;
  text-transform: uppercase;
}
.assist-edit-btn:hover { color: var(--accent); border-color: var(--accent); border-style: solid; }

/* ── ASSIST EDITOR ROWS ─────────────────────────── */
.assist-editor-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 0;
  border-bottom: 1px solid var(--border);
}
.assist-editor-row:last-child { border-bottom: none; }

.slot-cell {
  height: var(--cell-h);
  border-bottom: 1px solid rgba(42,47,69,.5);
  position: relative;
  cursor: pointer;
  transition: background .1s;
  box-sizing: border-box;
}
.slot-cell:hover { background: rgba(79,125,243,.06); }
.slot-cell::after {
  content: attr(data-time);
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 9px;
  font-weight: 600;
  color: var(--accent);
  opacity: 0;
  pointer-events: none;
  transition: opacity .12s;
  white-space: nowrap;
  letter-spacing: .3px;
}
.slot-cell:hover::after { opacity: 0.6; }

/* ── OFF-HOURS (before/after work) ──────────── */
.slot-cell.off-hours {
  background: rgba(0,0,0,.22);
  cursor: pointer;
}
.slot-cell.off-hours:hover { background: rgba(0,0,0,.14); }
html[data-theme="light"] .slot-cell.off-hours {
  background: rgba(0,0,0,.07);
}
html[data-theme="light"] .slot-cell.off-hours:hover {
  background: rgba(0,0,0,.04);
}
.slot-cell.hour-row { border-bottom: 1px solid var(--border); }

/* ── ABSENCE BLOCK ───────────────────────────── */
.absence-block {
  --ab-c: #ef4444;
  position: absolute;
  left: 3px; right: 3px;
  border-radius: 6px;
  padding: 5px 8px;
  overflow: hidden;
  z-index: 5;
  background: repeating-linear-gradient(
    -45deg,
    color-mix(in srgb, var(--ab-c) 18%, transparent),
    color-mix(in srgb, var(--ab-c) 18%, transparent) 5px,
    color-mix(in srgb, var(--ab-c) 7%, transparent) 5px,
    color-mix(in srgb, var(--ab-c) 7%, transparent) 10px
  );
  border-left: 3px solid var(--ab-c);
  display: flex;
  align-items: flex-start;
  gap: 5px;
  cursor: grab;
}
.absence-block:active { cursor: grabbing; }
.absence-block-icon {
  color: var(--ab-c);
  font-size: 11px;
  margin-top: 1px;
  flex-shrink: 0;
}
.absence-block-reason {
  font-size: 10px;
  font-weight: 600;
  color: var(--ab-c);
  line-height: 1.3;
  word-break: break-word;
  flex: 1;
}
.absence-block-del {
  margin-left: auto;
  font-size: 10px;
  color: color-mix(in srgb, var(--ab-c) 50%, transparent);
  cursor: pointer;
  padding: 0 2px;
  line-height: 1;
  flex-shrink: 0;
  transition: color .12s;
}
.absence-block-del:hover { color: var(--ab-c); }
html[data-theme="light"] .absence-block {
  background: repeating-linear-gradient(
    -45deg,
    color-mix(in srgb, var(--ab-c) 13%, transparent),
    color-mix(in srgb, var(--ab-c) 13%, transparent) 5px,
    color-mix(in srgb, var(--ab-c) 4%, transparent) 5px,
    color-mix(in srgb, var(--ab-c) 4%, transparent) 10px
  );
}

/* ── ABSENCE DRAG PREVIEW ────────────────────── */
.absence-preview {
  position: absolute;
  left: 3px; right: 3px;
  border-radius: 6px;
  background: rgba(239,68,68,.25);
  border: 2px dashed #ef4444;
  z-index: 9;            /* nedarbo bloko brėžimo peržiūra — virš vizitų, kad matytųsi */
  pointer-events: none;
}

/* ── APPOINTMENT BLOCKS ─────────────────────── */
.appt {
  position: absolute;
  left: 3px; right: 3px;
  border-radius: 7px;
  padding: 4px 7px;
  overflow: hidden;
  cursor: pointer;
  z-index: 7;            /* virš .absence-block (z-index 5) — kad vizitą būtų galima paspausti */
  transition: filter .15s, transform .1s;
  border: 1px solid transparent;
}
.appt:hover { filter: brightness(1.15); transform: scale(1.01); z-index: 8; }
.appt-cardno {
  font-size: 9px;
  font-weight: 600;
  opacity: .65;
  letter-spacing: .2px;
  display: flex;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
  overflow: hidden;
}
.appt-name {
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 1px;
}
.appt-info {
  font-size: 10px;
  opacity: .7;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.appt-icon {
  position: absolute;
  top: 5px; right: 6px;
  font-size: 10px;
  opacity: .6;
}

/* Įspėjimas: pacientui per metus nesudaryta dantų formulė */
.appt-formula-warn {
  position: absolute;
  bottom: 4px; right: 6px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #f59e0b;
  color: #fff;
  font-size: 9px;
  line-height: 16px;
  text-align: center;
  box-shadow: 0 0 0 1px rgba(245,158,11,.55), 0 1px 3px rgba(0,0,0,.35);
  cursor: pointer;
  z-index: 2;
}
.appt-formula-warn:hover { background: #d97706; transform: scale(1.1); transition: transform .12s; }

/* appointment colour themes */
.appt-blue  { background: rgba(79,125,243,.25); border-color: rgba(79,125,243,.5); color: #a8c4ff; }
.appt-green { background: rgba(34,197,94,.2);   border-color: rgba(34,197,94,.45); color: #86efac; }
.appt-orange{ background: rgba(245,158,11,.2);  border-color: rgba(245,158,11,.45);color: #fde68a; }
.appt-cyan  { background: rgba(6,182,212,.2);   border-color: rgba(6,182,212,.45); color: #a5f3fc; }
.appt-violet{ background: rgba(124,92,246,.25); border-color: rgba(124,92,246,.5); color: #c4b5fd; }
.appt-red        { background: rgba(239,68,68,.2);    border-color: rgba(239,68,68,.45);   color: #fca5a5; }
.appt-light-green{ background: rgba(134,239,172,.2);  border-color: rgba(134,239,172,.45); color: #4ade80; }
.appt-dark-green { background: rgba(21,128,61,.38);   border-color: rgba(21,128,61,.65);   color: #d1fae5; }
.appt-steel-blue { background: rgba(70,130,180,.2);   border-color: rgba(70,130,180,.45);  color: #93c5fd; }
.appt-gray       { background: rgba(156,163,175,.15); border-color: rgba(156,163,175,.4);  color: #d1d5db; }
.appt-pink       { background: rgba(236,72,153,.25); border-color: rgba(236,72,153,.5);  color: #f9a8d4; }

/* ── COMPACT MODE (aktyvuojamas tik esant < 14px ląstelei) ── */
.schedule-flex.compact .appt-cardno { display: none; }
.schedule-flex.compact .appt-info   { display: none; }
.schedule-flex.compact .appt-icon   { display: none; }
.schedule-flex.compact .appt-formula-warn { bottom: 2px; right: 4px; width: 12px; height: 12px; font-size: 7px; line-height: 12px; }
.schedule-flex.compact .appt-name   { font-size: 10px; margin-top: 0; }
.schedule-flex.compact .appt        { padding: 2px 5px; border-radius: 4px; }
.schedule-flex.compact .time-slot-cell      { font-size: 9px; padding-top: 2px; }
.schedule-flex.compact .time-slot-cell.hour { font-size: 10px; }

/* ── ROOM BADGE (top-right of photo) ─────────── */
.staff-room-badge {
  position: absolute;
  top: 7px; right: 7px;
  z-index: 3;
  background: rgba(0,0,0,.52);
  color: #fff;
  font-size: 9px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 4px;
  white-space: nowrap;
  backdrop-filter: blur(2px);
  letter-spacing: .2px;
}
@keyframes zone-conflict-pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(255, 60, 60, 0.7); }
  50%      { opacity: .75; box-shadow: 0 0 0 4px rgba(255, 60, 60, 0); }
}
.staff-room-badge.zone-conflict {
  animation: zone-conflict-pulse 1.5s ease-in-out infinite;
  border: 1.5px solid rgba(255, 60, 60, 0.85);
}

/* ── ASSIST MINI-AVATARS (top-left of photo) ─── */
.staff-assist-avatars {
  position: absolute;
  top: 7px; left: 7px;
  display: flex;
  flex-direction: row;
  z-index: 3;
}
.saa-item {
  position: relative;
  width: 38px;
  height: 38px;
  margin-left: -11px;
  flex-shrink: 0;
}
.saa-item:first-child { margin-left: 0; }
.saa-photo {
  width: 100%; height: 100%;
  border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(0,0,0,.35);
  overflow: hidden;
  position: relative;
}
.saa-active .saa-photo {
  box-shadow: 0 0 0 2.5px #3dba6f;
}
.saa-photo img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 15%;
}
.saa-name {
  position: absolute;
  bottom: -20px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,.75);
  color: #fff;
  font-size: 9px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s;
  z-index: 10;
}
.saa-item:hover .saa-name { opacity: 1; }

/* ── NOW LINE ───────────────────────────────── */
.now-line {
  position: absolute;
  left: 0; right: 0;
  height: 2px;
  background: var(--red);
  z-index: 6;
  pointer-events: none;
}
.now-line::before {
  content: '';
  position: absolute;
  left: 0; top: -3px;
  width: 8px; height: 8px;
  background: var(--red);
  border-radius: 50%;
}

/* ── TOOLBAR BAR ────────────────────────────── */
.search-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.filter-btn {
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--text2);
  padding: 7px 14px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  display: flex; align-items: center; gap: 6px;
  transition: all .15s;
  font-family: var(--font);
}
.filter-btn:hover, .filter-btn.active { border-color: var(--accent); color: var(--accent); }
.filter-btn.active { background: rgba(79,125,243,.1); }

.add-btn {
  background: var(--accent);
  border: none;
  color: #fff;
  padding: 7px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: flex; align-items: center; gap: 6px;
  transition: background .15s;
  font-family: var(--font);
  margin-left: auto;
}
.add-btn:hover { background: #3a6ae0; }

/* ── MODAL ──────────────────────────────────── */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.6);
  backdrop-filter: blur(4px);
  z-index: 100;
  align-items: center;
  justify-content: center;
}
.modal-overlay.open { display: flex; }
.modal {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  width: 480px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 28px;
  position: relative;
  animation: modalIn .2s ease;
}
@keyframes modalIn {
  from { opacity: 0; transform: translateY(16px) scale(.97); }
  to   { opacity: 1; transform: translateY(0)   scale(1);    }
}
.modal-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}
.modal-icon {
  width: 42px; height: 42px;
  border-radius: 12px;
  background: rgba(79,125,243,.15);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  color: var(--accent);
}
.modal-title { font-size: 18px; font-weight: 700; }
.modal-sub   { font-size: 13px; color: var(--text2); margin-top: 2px; }
.modal-close {
  margin-left: auto;
  background: none;
  border: none;
  color: var(--text3);
  font-size: 20px;
  cursor: pointer;
  line-height: 1;
  transition: color .15s;
}
.modal-close:hover { color: var(--text); }

.form-row { display: flex; gap: 14px; margin-bottom: 16px; }
.form-group { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.form-label { font-size: 12px; font-weight: 600; color: var(--text2); }
.form-input, .form-select, .form-textarea {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 9px 12px;
  color: var(--text);
  font-size: 13px;
  font-family: var(--font);
  outline: none;
  transition: border .15s;
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
  border-color: var(--accent);
}
.form-input::placeholder { color: var(--text3); }
.form-select option { background: var(--surface2); }
.form-textarea { resize: vertical; min-height: 80px; }

.status-row { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; }
.status-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--text2);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
}
.status-btn:hover { border-color: var(--text3); color: var(--text1); }
.status-btn.selected { font-weight: 600; }
.status-btn[data-status="unconfirmed"].selected { color: #f59e0b; border-color: #f59e0b; background: rgba(245,158,11,.1); }
.status-btn[data-status="confirmed"].selected   { color: #22c55e; border-color: #22c55e; background: rgba(34,197,94,.1); }
.status-btn[data-status="visited"].selected     { color: #4f7df3; border-color: #4f7df3; background: rgba(79,125,243,.1); }
.status-btn[data-status="missed"].selected      { color: #ef4444; border-color: #ef4444; background: rgba(239,68,68,.1); }
html[data-theme="light"] .status-btn[data-status="unconfirmed"].selected { background: rgba(245,158,11,.08); }
html[data-theme="light"] .status-btn[data-status="confirmed"].selected   { background: rgba(34,197,94,.08); }
html[data-theme="light"] .status-btn[data-status="visited"].selected     { background: rgba(79,125,243,.08); }
html[data-theme="light"] .status-btn[data-status="missed"].selected      { background: rgba(239,68,68,.08); }
.status-btn-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

.modal-footer { display: flex; gap: 10px; margin-top: 24px; justify-content: flex-end; }
.btn-cancel {
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--text2);
  padding: 9px 20px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  font-family: var(--font);
  transition: all .15s;
}
.btn-cancel:hover { color: var(--text); border-color: var(--text2); }
.btn-save {
  background: var(--accent);
  border: none;
  color: #fff;
  padding: 9px 24px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--font);
  transition: background .15s;
}
.btn-save:hover { background: #3a6ae0; }

/* ── TOOLTIP ────────────────────────────────── */
.tooltip {
  display: none;
  position: fixed;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  min-width: 200px;
  z-index: 50;
  pointer-events: none;
  box-shadow: 0 8px 32px rgba(0,0,0,.4);
}
.tooltip.show { display: block; }
.tooltip-name { font-size: 14px; font-weight: 700; margin-bottom: 4px; }
.tooltip-row  { font-size: 12px; color: var(--text2); display: flex; gap: 6px; align-items: center; }
.tooltip-row i { color: var(--accent); width: 12px; }

/* scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text3); }

/* ── DRAG & DROP ────────────────────────────── */
.appt { cursor: grab; }
.appt-resize-top {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 7px;
  cursor: ns-resize;
  z-index: 4;
  border-radius: 7px 7px 0 0;
}
.appt-resize-bottom {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 7px;
  cursor: s-resize;
  z-index: 4;
  border-radius: 0 0 7px 7px;
}
.schedule-flex.compact .appt-resize-top,
.schedule-flex.compact .appt-resize-bottom { height: 4px; }
.appt.dragging {
  opacity: 0.2;
  pointer-events: none;
  transform: none !important;
  filter: none !important;
}
.drag-ghost {
  border-radius: 7px;
  box-shadow: 0 12px 32px rgba(0,0,0,.5);
  transform: scale(1.03) !important;
  pointer-events: none;
  transition: none !important;
  overflow: hidden;
  padding: 4px 7px;
  border: 1px solid transparent;
}
.slot-cell.drag-over {
  background: rgba(79,125,243,.22) !important;
  outline: 2px solid rgba(79,125,243,.55);
  outline-offset: -2px;
}
body.dragging-active { user-select: none; }
body.dragging-active * { cursor: grabbing !important; }

/* ── FOCUS 2-WEEK VIEW ──────────────────────── */
.focus-col { flex-shrink: 0; }

/* Focus header stacks date bar on top of the staff card */
.focus-col-header {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 0;
  cursor: pointer;
  user-select: none;
  border-top: 3px solid transparent; /* reserve space, prevents height jump */
}
/* Today column: accent top border */
.focus-col.is-today-col > .focus-col-header {
  border-top: 3px solid var(--accent);
}

/* Date bar sits above the staff card */
.focus-date-bar {
  font-size: 11px;
  font-weight: 700;
  color: var(--text2);
  text-align: center;
  padding: 4px 6px;
  letter-spacing: .3px;
  white-space: nowrap;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.focus-date-bar.is-today {
  color: var(--accent);
  background: rgba(79,125,243,.08);
}
html[data-theme="light"] .focus-date-bar.is-today { background: rgba(59,108,240,.06); }

/* focus badge in topbar date label */
.focus-label-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border-radius: 20px;
  border: 1px solid;
  font-size: 13px;
  font-weight: 600;
}