/* Leaves module (Phase 4). Tokens only. */ .lv-head { margin-bottom: var(--space-6); } .lv-head h1, .lv-head h2 { font-size: var(--text-2xl); font-weight: var(--font-extrabold); margin-bottom: var(--space-4); } .lv-tabs { display: flex; gap: var(--space-1); border-bottom: 1px solid var(--color-border); } .lv-tab { padding: var(--space-3) var(--space-4); background: transparent; border: 0; border-radius: var(--radius-sm) var(--radius-sm) 0 0; border-bottom: 2px solid transparent; color: var(--color-fg-muted); font-size: var(--text-sm); font-weight: var(--font-medium); cursor: pointer; transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), border-bottom-color var(--dur-fast) var(--ease-out); } .lv-tab:hover { color: var(--color-fg); background: var(--color-surface-hover); } .lv-tab.is-active { color: var(--color-primary); border-bottom-color: var(--color-primary); font-weight: var(--font-semibold); } .lv-tab.is-active:hover { background: transparent; } .lv-dot { display: inline-block; width: 10px; height: 10px; border-radius: var(--radius-full); flex-shrink: 0; } /* Призначення/Редагувати/Видалити button cluster on each leave-type row (2026-07-19) — its own class rather than assuming a shared .row-actions exists elsewhere in this app; flex-wrap so three buttons don't force horizontal overflow next to a long type name on a phone. */ .lv-type-actions { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; flex-shrink: 0; } /* Balances */ .lv-balances { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); gap: var(--space-4); margin-bottom: var(--space-8); } .balance-card { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); } .balance-card__top { display: flex; align-items: center; gap: var(--space-2); font-weight: var(--font-semibold); font-size: var(--text-sm); } /* 2026-07-13 — icon-chip instead of a bare color dot, same "icon + tint" language as the Dashboard KPI cards. Leave types carry a user-picked color, not one of the fixed semantic tokens, so the tint is computed inline (typeColor + alpha suffix) — same trick already used by the Dashboard's leave-widget icon. */ .lv-type-icon { display: grid; place-items: center; width: 26px; height: 26px; border-radius: var(--radius-sm); flex-shrink: 0; } .lv-type-icon .icon { width: 15px; height: 15px; } .balance-card__num { font-size: var(--text-3xl); font-weight: var(--font-extrabold); color: var(--color-fg); font-variant-numeric: tabular-nums; } .balance-card__num span { font-size: var(--text-sm); font-weight: var(--font-normal); color: var(--color-fg-muted); margin-left: var(--space-1); } .balance-bar { height: 8px; border-radius: var(--radius-full); background: var(--color-surface-2); overflow: hidden; } .balance-bar span { display: block; height: 100%; border-radius: var(--radius-full); transition: width var(--dur-slow) var(--ease-out); } .balance-card__used { font-size: var(--text-xs); color: var(--color-fg-muted); } /* ═══ Leave Center hub (2026-07-13) — a real dashboard instead of a flat vertical page: KPI summary row + 70/30 (Recent Requests | Upcoming/ Balances/Holidays) layout. Same 4 API calls the old "Мої" tab already made (+ one extra /api/calendar call, already used by the Calendar tab elsewhere in this file) — every card here is built from real data. ═══ */ .lv-summary-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: var(--space-4); margin-bottom: var(--space-6); } .lv-summary-card { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-5); min-width: 0; min-height: 120px; transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); } .lv-summary-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); } .lv-summary-card__ring-wrap { position: relative; display: grid; place-items: center; width: 64px; height: 64px; flex-shrink: 0; } .lv-summary-card__body { flex: 1; min-width: 0; } .lv-kpi-ring { grid-area: 1 / 1; width: 64px; height: 64px; transform: rotate(-90deg); } .lv-summary-card__icon { grid-area: 1 / 1; display: grid; place-items: center; width: 30px; height: 30px; border-radius: var(--radius-full); } .lv-summary-card__icon .icon { width: 15px; height: 15px; } .lv-summary-card__icon--flat { position: static; background: var(--color-warning-soft); color: var(--color-warning); flex-shrink: 0; } .lv-summary-card__num { font-size: var(--text-2xl); font-weight: var(--font-extrabold); color: var(--color-fg); font-variant-numeric: tabular-nums; line-height: 1.1; } .lv-summary-card__num span { font-size: var(--text-xs); font-weight: var(--font-normal); color: var(--color-fg-muted); } .lv-summary-card__label { max-width: 22ch; margin-top: 3px; color: var(--color-fg); font-size: var(--text-sm); font-weight: var(--font-semibold); line-height: 1.35; overflow-wrap: normal; word-break: normal; hyphens: none; } .lv-summary-card__sub { font-size: var(--text-xs); color: var(--color-fg-muted); } .lv-summary-card--pending { background: var(--color-warning-soft); border-color: transparent; } .lv-hub__body { display: grid; grid-template-columns: 7fr 3fr; gap: var(--space-6); align-items: start; margin-bottom: var(--space-8); } .lv-hub__main { min-width: 0; } .lv-hub__aside { display: flex; flex-direction: column; gap: var(--space-4); } .lv-widget { padding: var(--space-5); } .lv-widget__head { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-4); } .lv-widget__head h3 { margin: 0; font-size: var(--text-sm); font-weight: var(--font-bold); } .lv-widget__icon { display: grid; place-items: center; width: 26px; height: 26px; border-radius: var(--radius-sm); flex-shrink: 0; background: var(--color-primary-soft); color: var(--color-primary); } .lv-widget__icon .icon { width: 15px; height: 15px; } .lv-widget__list { display: flex; flex-direction: column; gap: var(--space-3); } .lv-widget__row { display: flex; align-items: center; gap: var(--space-2); } .lv-widget__row-main { min-width: 0; } .lv-widget__row-title { font-size: var(--text-sm); font-weight: var(--font-medium); } .lv-widget__row-sub { font-size: var(--text-xs); color: var(--color-fg-muted); } .lv-widget__balance-row { display: flex; flex-direction: column; gap: var(--space-1); margin-bottom: var(--space-3); } .lv-widget__balance-row:last-of-type { margin-bottom: 0; } .lv-widget__balance-top { display: flex; justify-content: space-between; font-size: var(--text-sm); } .lv-widget__balance-top b { font-variant-numeric: tabular-nums; } .lv-widget__action { width: 100%; margin-top: var(--space-4); } /* Request cards — grid instead of a flat list, real hierarchy (type badge + status pill, dates, requested days, submitted date, quick cancel). */ .lv-req-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: var(--space-3); } .lv-req-card { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); } .lv-req-card__head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-2); } /* Status badge + cancel button share the head row's right side. Was position:absolute at a smaller inset than the card's own padding, so it sat closer to the corner than the status badge and overlapped its text — normal flow avoids that regardless of badge length (uk/en differ). */ .lv-req-card__head-right { display: flex; align-items: center; gap: var(--space-1); flex-shrink: 0; margin-left: auto; } .lv-req-card__dates { font-size: var(--text-sm); font-weight: var(--font-semibold); } .lv-req-card__meta { display: flex; flex-direction: column; gap: 2px; font-size: var(--text-xs); color: var(--color-fg-muted); } .lv-req-card__cancel { flex-shrink: 0; } .lv-type-badge { display: inline-flex; align-items: center; max-width: 100%; min-height: 26px; padding: 3px var(--space-3); border-radius: var(--radius-full); font-size: 11px; font-weight: var(--font-semibold); line-height: 1.2; white-space: nowrap; } /* Premium empty state — icon + headline + description, replacing the bare one-line "empty-state--sm" fallback this module used everywhere. */ .lv-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-3); padding: var(--space-10) var(--space-6); } .lv-empty__icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: var(--radius-full); background: var(--color-surface-2); color: var(--color-fg-subtle); } .lv-empty__icon .icon { width: 26px; height: 26px; } .lv-empty h3 { margin: 0; font-size: var(--text-base); font-weight: var(--font-bold); } .lv-empty p { margin: 0; font-size: var(--text-sm); color: var(--color-fg-muted); max-width: 36ch; } @media (max-width: 900px) { .lv-hub__body { grid-template-columns: 1fr; } } /* flex-wrap:wrap is a no-op for the common case (heading + one button, fits on one line everywhere) but protects pages with a fuller toolbar — e.g. Perform > Goals stacks a scope-tab group, a period select and an "add" button here — from squeezing to unreadable widths instead of wrapping. */ .lv-section-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-4); } .lv-section-head h2 { font-size: var(--text-lg); } /* 2026-07-13 — a few simpler pages (Assets, etc.) use .lv-section-head as their whole page header (h1 + one action button) instead of the fuller .lv-head/.lv-tabs pattern — same bold-title treatment as everywhere else this pass. */ .lv-section-head h1 { font-weight: var(--font-extrabold); } /* Request list */ .lv-list { display: flex; flex-direction: column; gap: var(--space-3); } .lv-item { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4); } .lv-item__main { flex: 1; min-width: 0; } .lv-item__type { font-weight: var(--font-semibold); font-size: var(--text-sm); } .lv-item__dates { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-xs); color: var(--color-fg-muted); } .lv-item--click { cursor: pointer; transition: box-shadow var(--dur-fast), border-color var(--dur-fast); } .lv-item--click:hover { box-shadow: var(--shadow-md); border-color: var(--color-border-strong); } .lv-del { border: 0; background: transparent; color: var(--color-fg-subtle); cursor: pointer; padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); } .lv-del:hover { background: var(--color-danger-soft); color: var(--color-danger); } .status-badge.lv-pending { background: var(--color-warning-soft); color: var(--color-warning); } .status-badge.lv-approved { background: var(--color-success-soft); color: var(--color-success); } .status-badge.lv-rejected { background: var(--color-danger-soft); color: var(--color-danger); } /* Approvals — manager workspace, Linear-issue-card style (2026-07-13): avatar/name/department + type badge on top, meta row (dates/days/ attachments), reason preview, actions row. Grid of cards instead of a flat list. */ .lv-approve-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: var(--space-4); } .lv-approve { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5); } .lv-approve__top { display: flex; align-items: center; gap: var(--space-3); } .lv-approve__who { flex: 1; min-width: 0; } .lv-approve__main { flex: 1; min-width: 0; } .lv-approve__name { font-weight: var(--font-semibold); } .lv-approve__dept { font-size: var(--text-xs); color: var(--color-fg-muted); } .lv-approve__meta { display: flex; flex-wrap: wrap; gap: var(--space-3); font-size: var(--text-xs); color: var(--color-fg-muted); } .lv-approve__attach { display: inline-flex; align-items: center; gap: 2px; } .lv-approve__note { font-size: var(--text-sm); color: var(--color-fg-muted); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .lv-approve__actions { display: flex; gap: var(--space-2); flex-shrink: 0; } .lv-approve__actions .btn { flex: 1; } /* Leave form modal preview */ .lv-preview { display: flex; gap: var(--space-4); font-size: var(--text-sm); } .lv-preview__days { font-weight: var(--font-semibold); } .lv-preview__bal { color: var(--color-fg-muted); } /* Calendar */ .cal-toolbar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--space-4); margin-bottom: var(--space-4); } .cal-toolbar__center { display: flex; align-items: center; gap: var(--space-4); justify-self: center; } .cal-toolbar__side--right { justify-self: end; } .cal-title { font-weight: var(--font-bold); font-size: var(--text-lg); text-transform: capitalize; min-width: 180px; text-align: center; } .cal-legend { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-bottom: var(--space-4); font-size: var(--text-xs); color: var(--color-fg-muted); } .cal-legend span { display: inline-flex; align-items: center; gap: var(--space-2); } /* Text-label segmented toggle (Місяць/Графік, Компанія/Мої — needs auto width, unlike icon-only .people-viewtoggle) */ .toggle-pill { display: inline-flex; align-items: stretch; min-height: 42px; border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; } .toggle-pill button { display: inline-flex; align-items: center; justify-content: center; padding: 0 var(--space-4); background: var(--color-surface); color: var(--color-fg-muted); border: 0; font-size: var(--text-sm); font-weight: var(--font-medium); line-height: 1.25; white-space: nowrap; cursor: pointer; } .toggle-pill button:not(:last-child) { border-right: 1px solid var(--color-border); } .toggle-pill button.is-active { background: var(--color-primary-soft); color: var(--color-primary); } /* Custom tooltip (bigger + styled than native title=) */ .tt { position: relative; cursor: help; } .tt::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); background: var(--color-fg); color: var(--color-surface); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); font-size: var(--text-sm); font-weight: var(--font-medium); line-height: 1.4; white-space: pre-line; text-align: left; width: max-content; max-width: 240px; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--dur-fast); z-index: 30; box-shadow: var(--shadow-lg); } .tt:hover::after, .tt:focus-visible::after { opacity: 1; visibility: visible; } .calendar { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; background: var(--color-border); border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; } .cal-weekday { background: var(--color-surface-2); padding: var(--space-2); text-align: center; font-size: var(--text-xs); font-weight: var(--font-semibold); color: var(--color-fg-muted); } .cal-cell { background: var(--color-surface); min-height: 92px; padding: var(--space-2); display: flex; flex-direction: column; gap: var(--space-1); } .cal-cell--empty { background: var(--color-surface-2); } .cal-cell.is-weekend { background: var(--color-surface-2); } .cal-cell.is-holiday { background: var(--color-danger-soft); } .cal-cell.is-today { box-shadow: inset 0 0 0 2px var(--color-primary); } .cal-cell.is-today .cal-day { color: var(--color-primary); font-weight: var(--font-bold); } .cal-day { font-size: var(--text-sm); font-weight: var(--font-medium); color: var(--color-fg-muted); } .cal-avatars { display: flex; flex-wrap: wrap; gap: 2px; } .cal-ava { display: inline-flex; } .cal-more { font-size: var(--text-xs); color: var(--color-fg-muted); align-self: center; } /* Schedule (Gantt) */ .schedule-filters { display: flex; gap: var(--space-3); align-items: center; margin-bottom: var(--space-4); } .schedule-wrap { overflow-x: auto; border: 1px solid var(--color-border); border-radius: var(--radius-lg); } .schedule-header { display: flex; background: var(--color-surface-2); border-bottom: 1px solid var(--color-border); position: sticky; top: 0; z-index: 2; } .schedule-namecol { flex: 0 0 200px; display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); position: sticky; left: 0; background: var(--color-surface); z-index: 1; border-right: 1px solid var(--color-border); } .schedule-header .schedule-namecol { background: var(--color-surface-2); } .schedule-name { font-size: var(--text-sm); font-weight: var(--font-medium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .schedule-pos { font-size: var(--text-xs); color: var(--color-fg-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .schedule-days { display: flex; } .schedule-daynum { width: 32px; flex-shrink: 0; text-align: center; font-size: var(--text-xs); color: var(--color-fg-muted); padding: var(--space-2) 0; } .schedule-daynum.is-weekend { background: var(--color-surface-hover); } .schedule-daynum.is-holiday { color: var(--color-danger); font-weight: var(--font-semibold); } .schedule-body { display: flex; flex-direction: column; } .schedule-row { display: flex; border-bottom: 1px solid var(--color-border); } .schedule-row:last-child { border-bottom: 0; } .schedule-daysarea { position: relative; display: flex; height: 44px; } .schedule-daycell { width: 32px; flex-shrink: 0; height: 44px; border-right: 1px solid var(--color-border); cursor: default; } .schedule-daysarea[data-editable] .schedule-daycell { cursor: pointer; } .schedule-daysarea[data-editable] .schedule-daycell:hover { background: var(--color-surface-hover); } .schedule-daycell.is-weekend { background: var(--color-surface-2); } .schedule-daycell.is-holiday { background: var(--color-danger-soft); } .schedule-bar { position: absolute; top: 8px; height: 28px; border-radius: var(--radius-sm); } .schedule-remote-icon { position: absolute; bottom: 2px; width: 32px; text-align: center; font-size: 12px; } .schedule-daysarea[data-editable] .schedule-remote-icon { cursor: pointer; } /* ═══ Leave request modal ("Запит на відсутність") ═══════════════════════ */ .lvreq-overlay { position: fixed; inset: 0; z-index: var(--z-modal); display: grid; place-items: center; padding: var(--space-4); background: var(--color-overlay); opacity: 0; transition: opacity var(--dur-base) var(--ease-in-out); } .lvreq-overlay--in { opacity: 1; } .lvreq { width: 100%; max-width: 860px; max-height: 92dvh; display: flex; flex-direction: column; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-xl); box-shadow: var(--shadow-xl); transform: translateY(12px) scale(0.98); transition: transform var(--dur-base) var(--ease-out); overflow: hidden; } .lvreq-overlay--in .lvreq { transform: none; } .lvreq__head { display: flex; align-items: center; justify-content: space-between; padding: var(--space-5) var(--space-6); border-bottom: 1px solid var(--color-border); } .lvreq__head h2 { font-size: var(--text-xl); } .lvreq__body { flex: 1; overflow-y: auto; display: grid; grid-template-columns: 1fr 340px; } .lvreq__col { padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); } .lvreq__col--right { background: var(--color-surface-2); border-left: 1px solid var(--color-border); } .lvreq__sub { font-size: var(--text-sm); font-weight: var(--font-bold); color: var(--color-fg); } .lvreq__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-4) var(--space-6); border-top: 1px solid var(--color-border); } .lvreq__foot .modal-error { flex: 1; } /* Range input + calendar popover */ .lvr-range { position: relative; display: flex; align-items: center; } .lvr-range .modal-input { flex: 1; cursor: pointer; } .lvr-cal-btn { position: absolute; right: var(--space-2); display: grid; place-items: center; width: 32px; height: 32px; border: 0; background: transparent; color: var(--color-fg-muted); border-radius: var(--radius-sm); } .lvr-cal-btn:hover { background: var(--color-surface-hover); } .lvr-cal { position: absolute; top: calc(100% + var(--space-2)); left: 0; z-index: 10; width: 300px; padding: var(--space-3); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); } .lvr-cal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-2); } .lvr-cal__title { font-weight: var(--font-semibold); font-size: var(--text-sm); text-transform: capitalize; } .lvr-cal__nav { width: 28px; height: 28px; border: 0; background: transparent; border-radius: var(--radius-sm); font-size: var(--text-lg); color: var(--color-fg-muted); } .lvr-cal__nav:hover { background: var(--color-surface-hover); } .lvr-cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; } .lvr-cd { display: grid; place-items: center; height: 34px; border: 0; background: transparent; border-radius: var(--radius-sm); font-size: var(--text-sm); color: var(--color-fg); cursor: pointer; } .lvr-cd:hover:not(.lvr-cd--wd):not(.lvr-cd--pad) { background: var(--color-surface-hover); } .lvr-cd--wd { color: var(--color-fg-muted); font-size: var(--text-xs); font-weight: var(--font-medium); cursor: default; height: 24px; } .lvr-cd--pad { cursor: default; } .lvr-cd.is-we { color: var(--color-fg-muted); } .lvr-cd.is-range { background: var(--color-orange-soft); border-radius: 0; } .lvr-cd.is-sel { background: var(--color-orange); color: #fff; font-weight: var(--font-semibold); } /* Attachments */ .lvr-drop { margin-top: var(--space-1); padding: var(--space-5); text-align: center; border: 1.5px dashed var(--color-border-strong); border-radius: var(--radius-lg); background: var(--color-surface-2); cursor: pointer; transition: border-color var(--dur-fast), background var(--dur-fast); } .lvr-drop.is-over { border-color: var(--color-orange); background: var(--color-orange-soft); } .lvr-drop__title { font-weight: var(--font-semibold); font-size: var(--text-sm); } .lvr-drop__hint { font-size: var(--text-xs); color: var(--color-fg-muted); margin-top: var(--space-1); } .lvr-filelist { display: flex; flex-direction: column; gap: var(--space-1); margin-top: var(--space-2); } .lvr-file { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: var(--space-1) var(--space-2); background: var(--color-surface-2); border-radius: var(--radius-sm); font-size: var(--text-xs); } .lvr-file button { border: 0; background: transparent; color: var(--color-fg-subtle); cursor: pointer; } .lvr-file button:hover { color: var(--color-danger); } /* Поденно (per-day) list */ .lvr-days { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-4); max-height: 340px; overflow-y: auto; } .lvr-day { display: flex; align-items: center; gap: var(--space-3); } .lvr-day__chip { display: grid; place-items: center; width: 42px; padding: var(--space-1) 0; border-radius: var(--radius-md); line-height: 1.1; } .lvr-day__chip b { font-size: var(--text-base); font-weight: var(--font-bold); } .lvr-day__chip i { font-size: 10px; font-style: normal; text-transform: lowercase; color: var(--color-fg-muted); } .lvr-day__chip.is-we { background: var(--color-weekend-soft); } .lvr-day__chip.is-work { background: var(--color-surface-hover); } .lvr-day__wd { width: 34px; font-size: var(--text-sm); color: var(--color-fg-muted); } .lvr-day__dots { flex: 1; border-bottom: 1px dashed var(--color-border); height: 1px; } .lvr-day__val { min-width: 34px; text-align: right; font-variant-numeric: tabular-nums; font-weight: var(--font-semibold); font-size: var(--text-sm); } .lvr-day__ctrl { display: inline-flex; border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; } .lvr-day__ctrl button { width: 30px; height: 30px; border: 0; background: var(--color-surface); color: var(--color-fg); font-size: var(--text-base); cursor: pointer; } .lvr-day__ctrl button:hover { background: var(--color-surface-hover); } .lvr-day__ctrl button:first-child { border-right: 1px solid var(--color-border); } .lvr-summary { border-top: 1px solid var(--color-border); padding-top: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); } .lvr-sum-row { display: flex; align-items: center; justify-content: space-between; font-size: var(--text-sm); color: var(--color-fg-muted); } .lvr-sum-row b { color: var(--color-fg); font-variant-numeric: tabular-nums; } .lvr-sum-row--total { font-weight: var(--font-semibold); } /* Leave request detail modal — rebuilt 2026-07-13 into a large (960px, .modal--xl) sectioned view: Summary / Reason / Daily Breakdown / Attachments / History, each with an icon-chip head like every other redesigned section this pass. */ .lvd-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding-bottom: var(--space-5); margin-bottom: var(--space-2); border-bottom: 1px solid var(--color-border); } .lvd-who { display: flex; align-items: center; gap: var(--space-4); } .lvd-name { font-size: var(--text-lg); font-weight: var(--font-bold); } .lvd-head__right { text-align: right; flex-shrink: 0; } .lvd-submitted { margin-top: var(--space-2); font-size: var(--text-xs); color: var(--color-fg-subtle); } .lvd-days { display: flex; flex-direction: column; gap: var(--space-2); max-height: 280px; overflow-y: auto; } .lvd-note { font-size: var(--text-sm); color: var(--color-on-surface); white-space: pre-wrap; } .lvd-size { color: var(--color-fg-subtle); white-space: nowrap; } .lvd-reject-box { padding: var(--space-3); background: var(--color-danger-soft); border-radius: var(--radius-md); margin-bottom: var(--space-4); } .lvd-section { padding: var(--space-6) 0; border-bottom: 1px solid var(--color-border); } .lvd-section:last-of-type { border-bottom: 0; padding-bottom: var(--space-2); } .lvd-section__head { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-4); } .lvd-section__head h3 { margin: 0; font-size: var(--text-sm); font-weight: var(--font-bold); } .lvd-section__icon { display: grid; place-items: center; width: 28px; height: 28px; border-radius: var(--radius-sm); flex-shrink: 0; background: var(--color-primary-soft); color: var(--color-primary); } .lvd-section__icon .icon { width: 15px; height: 15px; } .lvd-summary-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); gap: var(--space-4); } .lvd-summary-item { display: flex; flex-direction: column; gap: 2px; } .lvd-summary-item span { font-size: var(--text-xs); color: var(--color-fg-muted); } .lvd-summary-item b { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); font-variant-numeric: tabular-nums; } .lvd-summary-item--danger { color: var(--color-danger); } .lvd-summary-item--warn { color: var(--color-warning); } .lvd-note-card { margin: 0; padding: var(--space-4); background: var(--color-surface-2); border-radius: var(--radius-md); font-size: var(--text-sm); white-space: pre-wrap; } .lvd-note-card--sm { margin-top: var(--space-2); font-size: var(--text-xs); } .lvd-daybadge { font-size: 10px; font-weight: var(--font-semibold); padding: 1px 6px; border-radius: var(--radius-full); white-space: nowrap; } .lvd-daybadge--weekend { background: var(--color-weekend-soft); color: var(--color-fg-muted); } .lvd-daybadge--holiday { background: var(--color-danger-soft); color: var(--color-danger); } .lvd-atts { display: flex; flex-direction: column; gap: var(--space-2); } .lvd-file-card { gap: var(--space-2); } .lvd-file-card span:first-of-type { flex: 1; } .lvd-history { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-4); } .lvd-history__item { display: flex; align-items: flex-start; gap: var(--space-3); } .lvd-history__item > div { display: flex; flex-direction: column; gap: 2px; font-size: var(--text-sm); } .lvd-history__item span { font-size: var(--text-xs); color: var(--color-fg-muted); } .lvd-history__dot { flex-shrink: 0; width: 10px; height: 10px; margin-top: 5px; border-radius: var(--radius-full); background: var(--color-border-strong); } .lvd-history__dot--done { background: var(--color-primary); } .lvd-history__dot--approved { background: var(--color-success); } .lvd-history__dot--rejected { background: var(--color-danger); } @media (max-width: 760px) { .lvreq__body { grid-template-columns: 1fr; } .lvreq__col--right { border-left: 0; border-top: 1px solid var(--color-border); } } /* Sidebar pending badge */ .nav-badge { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; display: inline-grid; place-items: center; border-radius: var(--radius-full); background: var(--color-danger); color: #fff; font-size: var(--text-xs); font-weight: var(--font-bold); } @media (max-width: 640px) { .cal-toolbar { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); } .cal-toolbar__side:first-child { display: none; } .cal-toolbar__center { width: 100%; justify-self: stretch; justify-content: space-between; gap: var(--space-2); } .cal-title { min-width: 0; font-size: var(--text-base); } .cal-toolbar__side--right { width: 100%; justify-self: stretch; } .cal-toolbar__side--right .toggle-pill { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; } .cal-toolbar__side--right .toggle-pill button { min-width: 0; padding-inline: var(--space-3); } .calendar { grid-template-columns: repeat(7, minmax(0, 1fr)); } .cal-cell { min-width: 0; } .calendar .tt::after { display: none; } .cal-cell { min-height: 64px; } .lv-approve { flex-wrap: wrap; } } /* ═══ Single-screen Request Leave flow ═══ */ .lvw-overlay { position: fixed; inset: 0; z-index: var(--z-modal); background: var(--color-surface); display: flex; flex-direction: column; opacity: 0; transition: opacity var(--dur-base) var(--ease-in-out); } .lvw-overlay--in { opacity: 1; } .lvw { display: flex; flex-direction: column; height: 100%; max-width: 1180px; width: 100%; margin: 0 auto; } .lvw__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-5); padding: var(--space-5) var(--space-6); border-bottom: 1px solid var(--color-border); } .lvw__heading { min-width: 0; } .lvw__heading h2 { margin: 3px 0 2px; font-size: var(--text-xl); font-weight: var(--font-extrabold); } .lvw__heading p { margin: 0; color: var(--color-fg-muted); font-size: var(--text-sm); } .lvw__kicker { color: var(--color-primary); font-size: 10px; font-weight: var(--font-bold); letter-spacing: .08em; text-transform: uppercase; } .lvw__body { flex: 1; overflow-y: auto; display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--space-8); padding: var(--space-6); } .lvw__main { min-width: 0; display: flex; flex-direction: column; gap: var(--space-5); } .lvw__aside { display: flex; flex-direction: column; gap: var(--space-4); position: sticky; top: 0; } .lvw-aside__card { padding: var(--space-5); background: var(--color-surface-2); border: 1px solid var(--color-border); border-radius: var(--radius-lg); } .lvw-aside__card h4 { margin: 0 0 var(--space-3); font-size: var(--text-sm); font-weight: var(--font-bold); } .lvw-aside__card--summary { background: var(--color-primary-soft); border-color: var(--color-border-strong); } .lvw-aside__eyebrow { display: block; margin-bottom: var(--space-2); color: var(--color-primary); font-size: 10px; font-weight: var(--font-bold); letter-spacing: .08em; text-transform: uppercase; } .lvw-aside__warn { margin: 0; font-size: var(--text-sm); color: var(--color-warning); font-weight: var(--font-medium); } .lvw__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-4) var(--space-6); border-top: 1px solid var(--color-border); } .lvw__foot .modal-error { flex: 1; } .lvw__foot-actions { display: flex; gap: var(--space-3); flex-shrink: 0; } .lvw__foot-actions .btn { min-width: 140px; } .lvw-form-section { padding: var(--space-5); border: 1px solid var(--color-border); border-radius: var(--radius-xl); background: var(--color-surface); box-shadow: var(--shadow-xs); } .lvw-form-section__head { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: var(--space-3); margin-bottom: var(--space-5); } .lvw-form-section__head > span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: var(--radius-full); background: var(--color-primary-soft); color: var(--color-primary); font-size: var(--text-xs); font-weight: var(--font-bold); } .lvw-form-section__head h3 { margin: 0 0 3px; font-size: var(--text-base); } .lvw-form-section__head p { margin: 0; color: var(--color-fg-muted); font-size: var(--text-xs); } .lvw-attachments { display: block; margin-top: var(--space-5); } .lvw-daily-empty { padding: var(--space-5); border-radius: var(--radius-md); background: var(--color-surface-2); text-align: center; } /* Step 1 — Type cards instead of a